@ui5/webcomponents 0.0.0-cc312800a → 0.0.0-cf069fb29

package/dist/Popup.js

@@ -1,8 +1,10 @@
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { isChrome } from "@ui5/webcomponents-base/dist/Device.js";
 import { getFirstFocusableElement, getLastFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
-import createStyleInHead from "@ui5/webcomponents-base/dist/util/createStyleInHead.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import { hasStyle, createStyle } from "@ui5/webcomponents-base/dist/ManagedStyles.js";
 import { isTabPrevious } from "@ui5/webcomponents-base/dist/Keys.js";
 import { getNextZIndex, getFocusedElement, isFocusedElementWithinNode } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
 import PopupTemplate from "./generated/templates/PopupTemplate.lit.js";
@@ -12,6 +14,7 @@ import { addOpenedPopup, removeOpenedPopup } from "./popup-utils/OpenedPopupsReg
 // Styles
 import styles from "./generated/themes/Popup.css.js";
 import staticAreaStyles from "./generated/themes/PopupStaticAreaStyles.css.js";
+import globalStyles from "./generated/themes/PopupGlobal.css.js";
 
 /**
  * @public
@@ -22,7 +25,7 @@ const metadata = {
 
 		/**
 		 * Defines the content of the Popup.
-		 * @type {Node[]}
+		 * @type {HTMLElement[]}
 		 * @slot
 		 * @public
 		 */
@@ -66,18 +69,31 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the aria-label attribute for the popup
+		 * Defines the accessible name of the component.
 		 *
 		 * @type {String}
 		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.8
+		 * @public
+		 * @since 1.0.0-rc.15
 		 */
-		ariaLabel: {
+		accessibleName: {
 			type: String,
 			defaultValue: undefined,
 		},
 
+		/**
+		 * Defines the IDs of the elements that label the component.
+		 *
+		 * @type {String}
+		 * @defaultvalue ""
+		 * @public
+		 * @since 1.1.0
+		 */
+		accessibleNameRef: {
+			type: String,
+			defaultValue: "",
+		},
+
 		/**
 		 * @private
 		 */
@@ -92,7 +108,7 @@ const metadata = {
 	events: /** @lends  sap.ui.webcomponents.main.Popup.prototype */ {
 
 		/**
-		 * Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. This event does not bubble.
+		 * Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. <b>This event does not bubble.</b>
 		 *
 		 * @public
 		 * @event sap.ui.webcomponents.main.Popup#before-open
@@ -101,7 +117,7 @@ const metadata = {
 		"before-open": {},
 
 		/**
-		 * Fired after the component is opened. This event does not bubble.
+		 * Fired after the component is opened. <b>This event does not bubble.</b>
 		 *
 		 * @public
 		 * @event sap.ui.webcomponents.main.Popup#after-open
@@ -109,7 +125,7 @@ const metadata = {
 		"after-open": {},
 
 		/**
-		 * Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. This event does not bubble.
+		 * Fired before the component is closed. This event can be cancelled, which will prevent the popup from closing. <b>This event does not bubble.</b>
 		 *
 		 * @public
 		 * @event sap.ui.webcomponents.main.Popup#before-close
@@ -123,7 +139,7 @@ const metadata = {
 		},
 
 		/**
-		 * Fired after the component is closed. This event does not bubble.
+		 * Fired after the component is closed. <b>This event does not bubble.</b>
 		 *
 		 * @public
 		 * @event sap.ui.webcomponents.main.Popup#after-close
@@ -140,27 +156,16 @@ const metadata = {
 	},
 };
 
-let customBlockingStyleInserted = false;
-
 const createBlockingStyle = () => {
-	if (customBlockingStyleInserted) {
-		return;
+	if (!hasStyle("data-ui5-popup-scroll-blocker")) {
+		createStyle(globalStyles, "data-ui5-popup-scroll-blocker");
 	}
-
-	createStyleInHead(`
-		.ui5-popup-scroll-blocker {
-			width: 100%;
-			height: 100%;
-			position: fixed;
-			overflow: hidden;
-		}
-	`, { "data-ui5-popup-scroll-blocker": "" });
-
-	customBlockingStyleInserted = true;
 };
 
 createBlockingStyle();
 
+const bodyScrollingBlockers = new Set();
+
 /**
  * @class
  * <h3 class="comment-api-title">Overview</h3>
@@ -227,7 +232,7 @@ class Popup extends UI5Element {
 
 	onExitDOM() {
 		if (this.isOpen()) {
-			Popup.unblockBodyScrolling();
+			Popup.unblockBodyScrolling(this);
 			this._removeOpenedPopup();
 		}
 	}
@@ -247,8 +252,16 @@ class Popup extends UI5Element {
 	 * Temporarily removes scrollbars from the body
 	 * @protected
 	 */
-	static blockBodyScrolling() {
-		document.body.style.top = `-${window.pageYOffset}px`;
+	static blockBodyScrolling(popup) {
+		bodyScrollingBlockers.add(popup);
+
+		if (bodyScrollingBlockers.size !== 1) {
+			return;
+		}
+
+		if (window.pageYOffset > 0) {
+			document.body.style.top = `-${window.pageYOffset}px`;
+		}
 		document.body.classList.add("ui5-popup-scroll-blocker");
 	}
 
@@ -256,7 +269,13 @@ class Popup extends UI5Element {
 	 * Restores scrollbars on the body, if needed
 	 * @protected
 	 */
-	static unblockBodyScrolling() {
+	static unblockBodyScrolling(popup) {
+		bodyScrollingBlockers.delete(popup);
+
+		if (bodyScrollingBlockers.size !== 0) {
+			return;
+		}
+
 		document.body.classList.remove("ui5-popup-scroll-blocker");
 		window.scrollTo(0, -parseFloat(document.body.style.top));
 		document.body.style.top = "";
@@ -276,9 +295,30 @@ class Popup extends UI5Element {
 	}
 
 	_onfocusout(e) {
-		// relatedTarget is the element, which will get focus. If no such element exists, focus the root
+		// relatedTarget is the element, which will get focus. If no such element exists, focus the root.
+		// This happens after the mouse is released in order to not interrupt text selection.
 		if (!e.relatedTarget) {
-			this._root.focus();
+			this._shouldFocusRoot = true;
+		}
+	}
+
+	_onmousedown(e) {
+		this._root.removeAttribute("tabindex");
+
+		if (this.shadowRoot.contains(e.target)) {
+			this._shouldFocusRoot = true;
+		} else {
+			this._shouldFocusRoot = false;
+		}
+	}
+
+	_onmouseup() {
+		this._root.tabIndex = -1;
+		if (this._shouldFocusRoot) {
+			if (isChrome()) {
+				this._root.focus();
+			}
+			this._shouldFocusRoot = false;
 		}
 	}
 
@@ -334,12 +374,15 @@ class Popup extends UI5Element {
 			|| this._root; // in case of no focusable content focus the root
 
 		if (element) {
+			if (element === this._root) {
+				element.tabIndex = -1;
+			}
 			element.focus();
 		}
 	}
 
 	/**
-	 * Tells if the component is open
+	 * Tells if the component is opened
 	 * @public
 	 * @returns {boolean}
 	 */
@@ -355,7 +398,7 @@ class Popup extends UI5Element {
 	 * Shows the block layer (for modal popups only) and sets the correct z-index for the purpose of popup stacking
 	 * @protected
 	 */
-	async open(preventInitialFocus) {
+	async _open(preventInitialFocus) {
 		const prevented = !this.fireEvent("before-open", {}, true, false);
 		if (prevented) {
 			return;
@@ -365,14 +408,14 @@ class Popup extends UI5Element {
 			// create static area item ref for block layer
 			this.getStaticAreaItemDomRef();
 			this._blockLayerHidden = false;
-			Popup.blockBodyScrolling();
+			Popup.blockBodyScrolling(this);
 		}
 
 		this._zIndex = getNextZIndex();
 		this.style.zIndex = this._zIndex;
 		this._focusedElementBeforeOpen = getFocusedElement();
 
-		this.show();
+		this._show();
 
 		if (!this._disableInitialFocus && !preventInitialFocus) {
 			this.applyInitialFocus();
@@ -410,7 +453,7 @@ class Popup extends UI5Element {
 
 		if (this.isModal) {
 			this._blockLayerHidden = true;
-			Popup.unblockBodyScrolling();
+			Popup.unblockBodyScrolling(this);
 		}
 
 		this.hide();
@@ -452,7 +495,7 @@ class Popup extends UI5Element {
 	 * Sets "block" display to the popup. The property can be overriden by derivatives of Popup.
 	 * @protected
 	 */
-	show() {
+	_show() {
 		this.style.display = this._displayProp;
 	}
 
@@ -506,7 +549,7 @@ class Popup extends UI5Element {
 	 * @protected
 	 */
 	get _ariaLabel() {
-		return this.ariaLabel || undefined;
+		return getEffectiveAriaLabelText(this);
 	}
 
 	get _root() {

package/dist/ProgressIndicator.js

@@ -4,7 +4,7 @@ import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ProgressIndicatorTemplate from "./generated/templates/ProgressIndicatorTemplate.lit.js";
 import {
 	VALUE_STATE_ERROR,
@@ -23,7 +23,7 @@ const metadata = {
 	tag: "ui5-progress-indicator",
 	properties: /** @lends sap.ui.webcomponents.main.ProgressIndicator.prototype */ {
 		/**
-		 * Defines whether <code>ui5-progress-indicator</code> is in disabled state.
+		 * Defines whether component is in disabled state.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
@@ -33,7 +33,7 @@ const metadata = {
 			type: Boolean,
 		},
 		/**
-		 * Defines whether <code>ui5-progress-indicator</code> value is shown.
+		 * Defines whether the component value is shown.
 		 *
 		 * @type {boolean}
 		 * @defaultvalue false
@@ -43,7 +43,7 @@ const metadata = {
 			type: Boolean,
 		},
 		/**
-		 * Specifies the numerical value in percent for the length of the <code>ui5-progress-indicator</code>.
+		 * Specifies the numerical value in percent for the length of the component.
 		 *
 		 * <b>Note:</b>
 		 * If a value greater than 100 is provided, the percentValue is set to 100. In other cases of invalid value, percentValue is set to its default of 0.
@@ -56,7 +56,22 @@ const metadata = {
 			defaultValue: 0,
 		},
 		/**
-		 * Defines the value state of the <code>ui5-progress-indicator</code>.
+		 * Specifies the text value to be displayed in the bar.
+		 *
+		 * <b>Note:</b>
+		 * <ul>
+		 * <li>If there is no value provided or the value is empty, the default percentage value is shown.</li>
+		 * <li>If <code>hideValue</code> property is <code>true</code> both the <code>displayValue</code> and <code>value</code> property values are not shown.</li>
+		 * </ul>
+		 *
+		 * @type {string}
+		 * @public
+		 */
+		displayValue: {
+			type: String,
+		},
+		/**
+		 * Defines the value state of the component.
 		 * <br><br>
 		 * Available options are:
 		 * <ul>
@@ -89,17 +104,14 @@ const metadata = {
  *
  * <h3 class="comment-api-title">Overview</h3>
  * Shows the progress of a process in a graphical way. To indicate the progress,
- * the inside of the <code>ui5-progress-indicator</code> is filled with a color.
+ * the inside of the component is filled with a color.
  *
  * <h3>Responsive Behavior</h3>
- * You can change the size of the Rating Indicator by changing its <code>width</code> or <code>height</code> CSS properties.
- * <br>
- * Example: <code>&lt;ui5-progress-indicator style="height: 2rem; width: 6rem;">&lt;/ui5-progress-indicator></code>
+ * You can change the size of the Progress Indicator by changing its <code>width</code> or <code>height</code> CSS properties.
  *
- * For the <code>ui5-progress-indicator</code>
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @ui5/webcomponents/dist/ProgressIndicator.js";</code>
+ * <code>import "@ui5/webcomponents/dist/ProgressIndicator.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -131,8 +143,6 @@ class ProgressIndicator extends UI5Element {
 
 		this._previousValue = 0;
 		this._transitionDuration = 0;
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	onBeforeRendering() {
@@ -141,13 +151,11 @@ class ProgressIndicator extends UI5Element {
 	}
 
 	valueStateTextMappings() {
-		const i18nBundle = this.i18nBundle;
-
 		return {
-			"Error": i18nBundle.getText(VALUE_STATE_ERROR),
-			"Warning": i18nBundle.getText(VALUE_STATE_WARNING),
-			"Success": i18nBundle.getText(VALUE_STATE_SUCCESS),
-			"Information": i18nBundle.getText(VALUE_STATE_INFORMATION),
+			"Error": ProgressIndicator.i18nBundle.getText(VALUE_STATE_ERROR),
+			"Warning": ProgressIndicator.i18nBundle.getText(VALUE_STATE_WARNING),
+			"Success": ProgressIndicator.i18nBundle.getText(VALUE_STATE_SUCCESS),
+			"Information": ProgressIndicator.i18nBundle.getText(VALUE_STATE_INFORMATION),
 		};
 	}
 
@@ -218,7 +226,7 @@ class ProgressIndicator extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		ProgressIndicator.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }