Merge branch 'master' of github.com:SAP/ui5-webcomponents into fix_po…

…pup_background_elements_focus

packages/main/src/AvatarGroup.js

@@ -100,7 +100,11 @@ const metadata = {
 	},
 	slots: /** @lends sap.ui.webcomponents.main.AvatarGroup.prototype */ {
 		/**
-		 * Defines the items of the <code>ui5-avatar-group</code>.
+		 * Defines the items of the <code>ui5-avatar-group</code>. Use the <code>ui5-avatar</code> component as an item.
+		 * <br><br>
+		 * <b>Note:</b> The UX guidelines recommends using avatars with "Circle" shape.
+		 * Moreover, if you use avatars with "Square" shape, there will be visual inconsistency
+		 * as the built-in overflow action has "Circle" shape.
 		 * @type {HTMLElement[]}
 		 * @slot
 		 * @public
@@ -120,7 +124,7 @@ const metadata = {
 		* @public
 		* @since 1.0.0-rc.11
 		*/
-	   click: {
+		click: {
 			detail: {
 				targetRef: { type: HTMLElement },
 				overflowButtonClicked: { type: Boolean },

packages/main/src/Dialog.js

@@ -223,11 +223,15 @@ class Dialog extends Popup {
 	}
 
 	onEnterDOM() {
+		super.onEnterDOM();
+
 		ResizeHandler.register(this, this._screenResizeHandler);
 		ResizeHandler.register(document.body, this._screenResizeHandler);
 	}
 
 	onExitDOM() {
+		super.onExitDOM();
+
 		ResizeHandler.deregister(this, this._screenResizeHandler);
 		ResizeHandler.deregister(document.body, this._screenResizeHandler);
 	}

packages/main/src/Input.js

@@ -1104,7 +1104,7 @@ class Input extends UI5Element {
 	get styles() {
 		return {
 			popoverHeader: {
-				"width": `${this._inputWidth}px`,
+				"max-width": `${this._inputWidth}px`,
 			},
 			suggestionPopoverHeader: {
 				"display": this._listWidth === 0 ? "none" : "inline-block",

packages/main/src/InputPopover.hbs

@@ -71,6 +71,7 @@
 			no-arrow
 			class="ui5-valuestatemessage-popover"
 			placement-type="Bottom"
+			horizontal-align="Left"
 		>
 			<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
 				{{> valueStateMessage}}

packages/main/src/MultiComboBox.js

@@ -882,7 +882,7 @@ class MultiComboBox extends UI5Element {
 				"padding": "0.9125rem 1rem",
 			},
 			popoverHeader: {
-				"width": `${this._inputWidth}px`,
+				"max-width": `${this._inputWidth}px`,
 			},
 		};
 	}

packages/main/src/MultiComboBoxPopover.hbs

@@ -98,6 +98,7 @@
 		no-arrow
 		class="ui5-valuestatemessage-popover"
 		placement-type="Bottom"
+		horizontal-align="Left"
 	>
 		<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
 			{{> valueStateMessage}}

packages/main/src/Popover.js

@@ -1,4 +1,5 @@
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import Popup from "./Popup.js";
 import PopoverPlacementType from "./types/PopoverPlacementType.js";
 import PopoverVerticalAlign from "./types/PopoverVerticalAlign.js";
@@ -250,6 +251,12 @@ const metadata = {
  * @public
  */
 class Popover extends Popup {
+	constructor() {
+		super();
+
+		this._handleResize = this.handleResize.bind(this);
+	}
+
 	static get metadata() {
 		return metadata;
 	}
@@ -266,6 +273,14 @@ class Popover extends Popup {
 		return 10; // px
 	}
 
+	onEnterDOM() {
+		ResizeHandler.register(this, this._handleResize);
+	}
+
+	onExitDOM() {
+		ResizeHandler.deregister(this, this._handleResize);
+	}
+
 	isOpenerClicked(event) {
 		const target = event.target;
 		return target === this._opener || (target.getFocusDomRef && target.getFocusDomRef() === this._opener) || event.composedPath().indexOf(this._opener) > -1;
@@ -277,14 +292,15 @@ class Popover extends Popup {
 	 * @param {boolean} preventInitialFocus prevents applying the focus inside the popover
 	 * @public
 	 */
-	openBy(opener, preventInitialFocus = false) {
+	async openBy(opener, preventInitialFocus = false) {
 		if (!opener || this.opened) {
 			return;
 		}
 
 		this._opener = opener;
+		this._openerRect = opener.getBoundingClientRect();
 
-		super.open(preventInitialFocus);
+		await super.open(preventInitialFocus);
 	}
 
 	/**
@@ -332,21 +348,36 @@ class Popover extends Popup {
 			&& openerRect.right === 0;
 	}
 
+	handleResize() {
+		if (this.opened) {
+			this.reposition();
+		}
+	}
+
 	reposition() {
 		this.show();
 	}
 
 	show() {
 		let placement;
-		const popoverSize = this.popoverSize;
-		const openerRect = this._opener.getBoundingClientRect();
+		const popoverSize = this.getPopoverSize();
+
+		if (popoverSize.width === 0 || popoverSize.height === 0) {
+			// size can not be determined properly at this point, popover will be shown with the next reposition
+			return;
+		}
 
-		if (this.shouldCloseDueToNoOpener(openerRect) && this.isFocusWithin()) {
+		if (this.isOpen()) {
+			// update opener rect if it was changed during the popover being opened
+			this._openerRect = this._opener.getBoundingClientRect();
+		}
+
+		if (this.shouldCloseDueToNoOpener(this._openerRect) && this.isFocusWithin()) {
 			// reuse the old placement as the opener is not available,
 			// but keep the popover open as the focus is within
 			placement = this._oldPlacement;
 		} else {
-			placement = this.calcPlacement(openerRect, popoverSize);
+			placement = this.calcPlacement(this._openerRect, popoverSize);
 		}
 
 		const stretching = this.horizontalAlign === PopoverHorizontalAlign.Stretch;
@@ -379,7 +410,7 @@ class Popover extends Popup {
 		}
 	}
 
-	get popoverSize() {
+	getPopoverSize() {
 		let width,
 			height;
 		let rect = this.getBoundingClientRect();
@@ -391,17 +422,15 @@ class Popover extends Popup {
 			return { width, height };
 		}
 
-		this.style.visibility = "hidden";
 		this.style.display = "block";
+		this.style.top = "-10000px";
+		this.style.left = "-10000px";
 
 		rect = this.getBoundingClientRect();
 
 		width = rect.width;
 		height = rect.height;
 
-		this.hide();
-		this.style.visibility = "visible";
-
 		return { width, height };
 	}
 
@@ -595,6 +624,7 @@ class Popover extends Popup {
 		switch (this.horizontalAlign) {
 		case PopoverHorizontalAlign.Center:
 		case PopoverHorizontalAlign.Stretch:
+
 			left = targetRect.left - (popoverSize.width - targetRect.width) / 2;
 			break;
 		case PopoverHorizontalAlign.Left:

packages/main/src/Popup.js

@@ -1,3 +1,4 @@
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
@@ -55,7 +56,7 @@ const metadata = {
 		},
 
 		/**
-		 * Indicates if the elements is open
+		 * Indicates if the element is open
 		 * @private
 		 * @type {boolean}
 		 * @defaultvalue false
@@ -206,6 +207,19 @@ class Popup extends UI5Element {
 		return staticAreaStyles;
 	}
 
+	onEnterDOM() {
+		if (!this.isOpen()) {
+			this._blockLayerHidden = true;
+		}
+	}
+
+	onExitDOM() {
+		if (this.isOpen()) {
+			Popup.unblockBodyScrolling();
+			this._removeOpenedPopup();
+		}
+	}
+
 	get _displayProp() {
 		return "block";
 	}
@@ -328,7 +342,7 @@ class Popup extends UI5Element {
 	 * @param {boolean} preventInitialFocus prevents applying the focus inside the popup
 	 * @public
 	 */
-	open(preventInitialFocus) {
+	async open(preventInitialFocus) {
 		const prevented = !this.fireEvent("before-open", {}, true, false);
 		if (prevented) {
 			return;
@@ -344,6 +358,7 @@ class Popup extends UI5Element {
 		this._zIndex = getNextZIndex();
 		this.style.zIndex = this._zIndex;
 		this._focusedElementBeforeOpen = getFocusedElement();
+
 		this.show();
 
 		if (!this._disableInitialFocus && !preventInitialFocus) {
@@ -353,6 +368,8 @@ class Popup extends UI5Element {
 		this._addOpenedPopup();
 
 		this.opened = true;
+
+		await renderFinished();
 		this.fireEvent("after-open", {}, false, false);
 	}
 
@@ -435,13 +452,6 @@ class Popup extends UI5Element {
 		this.style.display = "none";
 	}
 
-	onExitDOM() {
-		if (this.isOpen()) {
-			Popup.unblockBodyScrolling();
-			this._removeOpenedPopup();
-		}
-	}
-
 	/**
 	 * Implement this getter with relevant logic regarding the modality of the popup (e.g. based on a public property)
 	 *

packages/main/src/Tokenizer.hbs

@@ -1,4 +1,5 @@
 <div
+	dir="{{effectiveDir}}"
 	class="{{classes.wrapper}}"
 >
 	<span id="{{_id}}-hiddenText" class="ui5-hidden-text">{{tokenizerLabel}}</span>

packages/main/src/Tokenizer.js

@@ -296,12 +296,14 @@ class Tokenizer extends UI5Element {
 		}
 
 		return this._getTokens().filter(token => {
+			const isRTL = this.effectiveDir === "rtl";
+			const elementEnd = isRTL ? "left" : "right";
 			const parentRect = this.contentDom.getBoundingClientRect();
 			const tokenRect = token.getBoundingClientRect();
-			const tokenLeft = tokenRect.left + tokenRect.width;
-			const parentLeft = parentRect.left + parentRect.width;
+			const tokenEnd = tokenRect[elementEnd];
+			const parentEnd = parentRect[elementEnd];
 
-			token.overflows = (tokenLeft > parentLeft) && !this.expanded;
+			token.overflows = isRTL ? ((tokenEnd < parentEnd) && !this.expanded) : ((tokenEnd > parentEnd) && !this.expanded);
 
 			return token.overflows;
 		});

packages/main/src/themes/Token.css

@@ -35,7 +35,7 @@
 }
 
 :host([readonly]) .ui5-token--wrapper {
-	padding-right: 0.375rem;
+	padding-right: 0.3125rem;
 }
 
 :host([selected]) .ui5-token--wrapper:focus {
@@ -48,9 +48,8 @@
 	height: 100%;
 	width: 100%;
 	cursor: default;
+	padding: 0.25rem 0;
 	padding-left: 0.3125rem;
-	padding-top: 0.25rem;
-	padding-bottom: 0.25rem;
 	box-sizing: border-box;
 	font-size: var(--sapFontSize);
 	font-family: "72override", var(--sapFontFamily);
@@ -86,12 +85,7 @@
 }
 
 /* RTL */
-:host .ui5-token--wrapper[dir="rtl"] {
+:host(:not([readonly])) .ui5-token--wrapper[dir="rtl"] {
 	padding-right: var(--_ui5_token_wrapper_right_padding);
 	padding-left: var(--_ui5_token_wrapper_left_padding);
 }
-
-:host([readonly]) .ui5-token--wrapper[dir="rtl"] {
-	padding-right: 0;
-	padding-left: 0.375rem;
-}

packages/main/src/themes/Tokenizer.css

@@ -64,3 +64,15 @@
 ::slotted([ui5-token]) {
 	margin-left: .25rem;
 }
+
+/* RTL */
+
+[dir="rtl"] .ui5-tokenizer-more-text  {
+	margin-right: .25rem;
+	margin-left: 0;
+}
+
+[dir=rtl] ::slotted([ui5-token]) {
+	margin-right: .25rem;
+	margin-left: 0;
+}

packages/main/src/themes/base/sizes-parameters.css

@@ -41,7 +41,7 @@
 	--_ui5_year_picker_item_height: 3rem;
 	--_ui5_tokenizer_root_padding: 0.1875rem;
 	--_ui5_token_height: 1.625rem;
-	--_ui5_token_icon_size: 1rem;
+	--_ui5_token_icon_size: .75rem;
 	--_ui5_token_icon_padding: 0.25rem 0.5rem;
 	--_ui5_token_wrapper_right_padding: 0.3125rem;
 	--_ui5_token_wrapper_left_padding: 0;

packages/main/test/pages/Avatar.html

@@ -23,13 +23,13 @@ <h3>Avatar - Basic sample</h3>
 		<ui5-avatar image="./img/John_Miller.png"></ui5-avatar>
 	</section>
 
-    <section>
-        <h3>Avatar - special characters in image path</h3>
-	    <ui5-avatar image="./img/John$$$ ' (_)Miller 100%25 &=.png" style="border: 1px dashed red;"></ui5-avatar>
-	    <ui5-avatar image="./img/John Miller.png" style="border: 1px dashed red;"></ui5-avatar>
-	    <ui5-avatar image="./img/John%20Miller.png" style="border: 1px dashed red;"></ui5-avatar>
-	    <ui5-avatar image="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" style="border: 1px dashed red;"></ui5-avatar>
-    </section>
+	<section>
+		<h3>Avatar - special characters in image path</h3>
+		<ui5-avatar image="./img/John$$$ ' (_)Miller 100%25 &=.png" style="border: 1px dashed red;"></ui5-avatar>
+		<ui5-avatar image="./img/John Miller.png" style="border: 1px dashed red;"></ui5-avatar>
+		<ui5-avatar image="./img/John%20Miller.png" style="border: 1px dashed red;"></ui5-avatar>
+		<ui5-avatar image="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg" style="border: 1px dashed red;"></ui5-avatar>
+	</section>
 
 	<section>
 		<h3>Avatar - Square [ XS, S, M, L, XL ]</h3>