@ui5/webcomponents 0.0.0-6ef02a35f → 0.0.0-701b14e36

package/src/Popup.js

@@ -3,16 +3,20 @@ 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 ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import MediaRange from "@ui5/webcomponents-base/dist/MediaRange.js";
 import PopupTemplate from "./generated/templates/PopupTemplate.lit.js";
 import PopupBlockLayer from "./generated/templates/PopupBlockLayerTemplate.lit.js";
-import { getOpenedPopups, addOpenedPopup, removeOpenedPopup } from "./popup-utils/OpenedPopupsRegistry.js";
+import { addOpenedPopup, removeOpenedPopup } from "./popup-utils/OpenedPopupsRegistry.js";
 
 // 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
@@ -24,7 +28,7 @@ const metadata = {
 		/**
 		 * Defines the content of the Popup.
 		 * @type {HTMLElement[]}
-		 * @slot
+		 * @slot content
 		 * @public
 		 */
 		"default": {
@@ -58,18 +62,30 @@ const metadata = {
 
 		/**
 		 * Indicates if the element is open
+		 * @public
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @since 1.2.0
+		 */
+		open: {
+			type: Boolean,
+		},
+
+		/**
+		 * Indicates if the element is already open
 		 * @private
 		 * @type {boolean}
 		 * @defaultvalue false
 		 */
 		opened: {
 			type: Boolean,
+			noAttribute: true,
 		},
 
 		/**
-		 * Sets the accessible aria name of the component.
+		 * Defines the accessible name of the component.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -79,6 +95,29 @@ const metadata = {
 			defaultValue: undefined,
 		},
 
+		/**
+		 * Defines the IDs of the elements that label the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 * @since 1.1.0
+		 */
+		accessibleNameRef: {
+			type: String,
+			defaultValue: "",
+		},
+
+		/**
+		 * Defines the current media query size.
+		 *
+		 * @type {string}
+		 * @private
+		 */
+		 mediaRange: {
+			type: String,
+		},
+
 		/**
 		 * @private
 		 */
@@ -141,27 +180,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 pageScrollingBlockers = new Set();
+
 /**
  * @class
  * <h3 class="comment-api-title">Overview</h3>
@@ -172,7 +200,7 @@ createBlockingStyle();
  *
  * 1. The Popup class handles modality:
  *  - The "isModal" getter can be overridden by derivatives to provide their own conditions when they are modal or not
- *  - Derivatives may call the "blockBodyScrolling" and "unblockBodyScrolling" static methods to temporarily remove scrollbars on the body
+ *  - Derivatives may call the "blockPageScrolling" and "unblockPageScrolling" static methods to temporarily remove scrollbars on the html element
  *  - Derivatives may call the "open" and "close" methods which handle focus, manage the popup registry and for modal popups, manage the blocking layer
  *
  *  2. Provides blocking layer (relevant for modal popups only):
@@ -196,6 +224,12 @@ createBlockingStyle();
  * @public
  */
 class Popup extends UI5Element {
+	constructor() {
+		super();
+
+		this._resizeHandler = this._resize.bind(this);
+	}
+
 	static get metadata() {
 		return metadata;
 	}
@@ -224,19 +258,27 @@ class Popup extends UI5Element {
 		if (!this.isOpen()) {
 			this._blockLayerHidden = true;
 		}
+
+		ResizeHandler.register(this, this._resizeHandler);
 	}
 
 	onExitDOM() {
 		if (this.isOpen()) {
-			Popup.unblockBodyScrolling();
+			Popup.unblockPageScrolling(this);
 			this._removeOpenedPopup();
 		}
+
+		ResizeHandler.deregister(this, this._resizeHandler);
 	}
 
 	get _displayProp() {
 		return "block";
 	}
 
+	_resize() {
+		this.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef().offsetWidth);
+	}
+
 	/**
 	 * Prevents the user from interacting with the content under the block layer
 	 */
@@ -245,24 +287,31 @@ class Popup extends UI5Element {
 	}
 
 	/**
-	 * Temporarily removes scrollbars from the body
+	 * Temporarily removes scrollbars from the html element
 	 * @protected
 	 */
-	static blockBodyScrolling() {
-		if (window.pageYOffset > 0) {
-			document.body.style.top = `-${window.pageYOffset}px`;
+	static blockPageScrolling(popup) {
+		pageScrollingBlockers.add(popup);
+
+		if (pageScrollingBlockers.size !== 1) {
+			return;
 		}
-		document.body.classList.add("ui5-popup-scroll-blocker");
+
+		document.documentElement.classList.add("ui5-popup-scroll-blocker");
 	}
 
 	/**
-	 * Restores scrollbars on the body, if needed
+	 * Restores scrollbars on the html element, if needed
 	 * @protected
 	 */
-	static unblockBodyScrolling() {
-		document.body.classList.remove("ui5-popup-scroll-blocker");
-		window.scrollTo(0, -parseFloat(document.body.style.top));
-		document.body.style.top = "";
+	static unblockPageScrolling(popup) {
+		pageScrollingBlockers.delete(popup);
+
+		if (pageScrollingBlockers.size !== 0) {
+			return;
+		}
+
+		document.documentElement.classList.remove("ui5-popup-scroll-blocker");
 	}
 
 	_scroll(e) {
@@ -392,7 +441,7 @@ class Popup extends UI5Element {
 			// create static area item ref for block layer
 			this.getStaticAreaItemDomRef();
 			this._blockLayerHidden = false;
-			Popup.blockBodyScrolling();
+			Popup.blockPageScrolling(this);
 		}
 
 		this._zIndex = getNextZIndex();
@@ -408,6 +457,7 @@ class Popup extends UI5Element {
 		this._addOpenedPopup();
 
 		this.opened = true;
+		this.open = true;
 
 		await renderFinished();
 		this.fireEvent("after-open", {}, false, false);
@@ -435,16 +485,14 @@ class Popup extends UI5Element {
 			return;
 		}
 
-		const openedPopups = getOpenedPopups();
 		if (this.isModal) {
 			this._blockLayerHidden = true;
-			if (openedPopups.length === 1) {
-				Popup.unblockBodyScrolling();
-			}
+			Popup.unblockPageScrolling(this);
 		}
 
 		this.hide();
 		this.opened = false;
+		this.open = false;
 
 		if (!preventRegistryUpdate) {
 			this._removeOpenedPopup();
@@ -517,7 +565,7 @@ class Popup extends UI5Element {
 	 *
 	 * @protected
 	 * @abstract
-	 * @returns {String}
+	 * @returns {string}
 	 */
 	get _ariaLabelledBy() {} // eslint-disable-line
 
@@ -526,23 +574,27 @@ class Popup extends UI5Element {
 	 *
 	 * @protected
 	 * @abstract
-	 * @returns {String}
+	 * @returns {string}
 	 */
 	get _ariaModal() {} // eslint-disable-line
 
 	/**
 	 * Ensures ariaLabel is never null or empty string
-	 * @returns {String|undefined}
+	 * @returns {string|undefined}
 	 * @protected
 	 */
 	get _ariaLabel() {
-		return this.accessibleName || undefined;
+		return getEffectiveAriaLabelText(this);
 	}
 
 	get _root() {
 		return this.shadowRoot.querySelector(".ui5-popup-root");
 	}
 
+	get contentDOM() {
+		return this.shadowRoot.querySelector(".ui5-popup-content");
+	}
+
 	get styles() {
 		return {
 			root: {},

package/src/PopupBlockLayer.hbs

@@ -1,6 +1,6 @@
 <div class="ui5-block-layer"
     ?hidden={{_blockLayerHidden}}
-    tabindex="1"
+    tabindex="0"
     style="{{styles.blockLayer}}"
 	@keydown="{{_preventBlockLayerFocus}}"
     @mousedown="{{_preventBlockLayerFocus}}">

package/src/ProgressIndicator.hbs

@@ -1,5 +1,4 @@
 <div class="ui5-progress-indicator-root {{classes.root}}"
-     dir="{{effectiveDir}}"
      role="progressbar"
      aria-valuemin="0"
      aria-valuenow="{{validatedValue}}"
@@ -24,6 +23,12 @@
         <ui5-icon name="{{valueStateIcon}}" class="ui5-progress-indicator-icon"></ui5-icon>
     {{/if}}
     {{#unless hideValue}}
-        <span class="ui5-progress-indicator-value">{{validatedValue}}%</span>
+        <span class="ui5-progress-indicator-value">
+            {{#if displayValue}}
+                {{displayValue}}
+            {{else}}
+                {{validatedValue}}%
+            {{/if}}
+        </span>
     {{/unless}}
 {{/inline}}

package/src/ProgressIndicator.js

@@ -4,7 +4,8 @@ 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 Icon from "./Icon.js";
 import ProgressIndicatorTemplate from "./generated/templates/ProgressIndicatorTemplate.lit.js";
 import {
 	VALUE_STATE_ERROR,
@@ -55,6 +56,21 @@ const metadata = {
 			type: Integer,
 			defaultValue: 0,
 		},
+		/**
+		 * 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>
@@ -123,13 +139,15 @@ class ProgressIndicator extends UI5Element {
 		return ProgressIndicatorTemplate;
 	}
 
+	static get dependencies() {
+		return [Icon];
+	}
+
 	constructor() {
 		super();
 
 		this._previousValue = 0;
 		this._transitionDuration = 0;
-
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	onBeforeRendering() {
@@ -138,13 +156,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),
 		};
 	}
 
@@ -215,7 +231,7 @@ class ProgressIndicator extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		ProgressIndicator.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }
 

package/src/RadioButton.hbs

@@ -3,19 +3,21 @@
 	aria-checked="{{checked}}"
 	aria-readonly="{{ariaReadonly}}"
 	aria-disabled="{{ariaDisabled}}"
-	aria-labelledby="{{ariaLabelledBy}}"
+	aria-label="{{ariaLabelText}}"
 	aria-describedby="{{ariaDescribedBy}}"
 	tabindex="{{tabIndex}}"
-	dir="{{effectiveDir}}"
 	@click="{{_onclick}}"
 	@keydown="{{_onkeydown}}"
 	@keyup="{{_onkeyup}}"
+	@mousedown="{{_onmousedown}}"
+	@mouseup="{{_onmouseup}}"
+	@focusout="{{_onfocusout}}"
 >
 
 	<div class='ui5-radio-inner {{classes.inner}}'>
 		<svg class="ui5-radio-svg" focusable="false" aria-hidden="true">
 			<circle class="ui5-radio-svg-outer" cx="50%" cy="50%" r="50%" />
-			<circle class="ui5-radio-svg-inner" cx="50%" cy="50%" r="22%" />
+			<circle class="ui5-radio-svg-inner" cx="50%" cy="50%" />
 		</svg>
  		<input type='radio' ?checked="{{checked}}" ?readonly="{{readonly}}" ?disabled="{{disabled}}" name="{{name}}" data-sap-no-tab-ref/>
 	</div>

package/src/RadioButton.js

@@ -2,8 +2,9 @@ import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import {
 	isSpace,
 	isEnter,
@@ -20,11 +21,19 @@ import WrappingType from "./types/WrappingType.js";
 import RadioButtonTemplate from "./generated/templates/RadioButtonTemplate.lit.js";
 
 // i18n
-import { VALUE_STATE_ERROR, VALUE_STATE_WARNING } from "./generated/i18n/i18n-defaults.js";
+import {
+	VALUE_STATE_ERROR,
+	VALUE_STATE_WARNING,
+	VALUE_STATE_SUCCESS,
+	VALUE_STATE_INFORMATION,
+} from "./generated/i18n/i18n-defaults.js";
 
 // Styles
 import radioButtonCss from "./generated/themes/RadioButton.css.js";
 
+let isGlobalHandlerAttached = false;
+let activeRadio = null;
+
 /**
  * @public
  */
@@ -96,6 +105,8 @@ const metadata = {
 		 * <li><code>None</code></li>
 		 * <li><code>Error</code></li>
 		 * <li><code>Warning</code></li>
+		 * <li><code>Success</code></li>
+		 * <li><code>Information</code></li>
 		 * </ul>
 		 *
 		 * @type {ValueState}
@@ -170,11 +181,43 @@ const metadata = {
 			defaultValue: WrappingType.None,
 		},
 
+		/**
+		 * Defines the accessible name of the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @private
+		 * @since 1.0.0-rc.16
+		 */
+		accessibleName: {
+			type: String,
+		},
+
+		/**
+		 * Defines the IDs of the elements that label the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 * @since 1.1.0
+		 */
+		accessibleNameRef: {
+			type: String,
+		},
+
 		_tabIndex: {
 			type: String,
 			defaultValue: "-1",
 			noAttribute: true,
 		},
+
+		/**
+		 * Defines the active state (pressed or not) of the component.
+		 * @private
+		 */
+		 active: {
+			type: Boolean,
+		},
 	},
 	slots: /** @lends sap.ui.webcomponents.main.RadioButton.prototype */ {
 		/**
@@ -238,7 +281,16 @@ class RadioButton extends UI5Element {
 	constructor() {
 		super();
 
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
+		this._deactivate = () => {
+			if (activeRadio) {
+				activeRadio.active = false;
+			}
+		};
+
+		if (!isGlobalHandlerAttached) {
+			document.addEventListener("mouseup", this._deactivate);
+			isGlobalHandlerAttached = true;
+		}
 	}
 
 	static get metadata() {
@@ -262,7 +314,7 @@ class RadioButton extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		RadioButton.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
 	onBeforeRendering() {
@@ -339,10 +391,12 @@ class RadioButton extends UI5Element {
 
 	_onkeydown(event) {
 		if (isSpace(event)) {
+			this.active = true;
 			return event.preventDefault();
 		}
 
 		if (isEnter(event)) {
+			this.active = true;
 			return this.toggle();
 		}
 
@@ -359,6 +413,21 @@ class RadioButton extends UI5Element {
 		if (isSpace(event)) {
 			this.toggle();
 		}
+
+		this.active = false;
+	}
+
+	_onmousedown() {
+		this.active = true;
+		activeRadio = this; // eslint-disable-line
+	}
+
+	_onmouseup() {
+		this.active = false;
+	}
+
+	_onfocusout() {
+		this.active = false;
 	}
 
 	toggle() {
@@ -381,11 +450,11 @@ class RadioButton extends UI5Element {
 	}
 
 	valueStateTextMappings() {
-		const i18nBundle = this.i18nBundle;
-
 		return {
-			"Error": i18nBundle.getText(VALUE_STATE_ERROR),
-			"Warning": i18nBundle.getText(VALUE_STATE_WARNING),
+			"Error": RadioButton.i18nBundle.getText(VALUE_STATE_ERROR),
+			"Warning": RadioButton.i18nBundle.getText(VALUE_STATE_WARNING),
+			"Success": RadioButton.i18nBundle.getText(VALUE_STATE_SUCCESS),
+			"Information": RadioButton.i18nBundle.getText(VALUE_STATE_INFORMATION),
 		};
 	}
 
@@ -406,8 +475,8 @@ class RadioButton extends UI5Element {
 		return this.disabled ? "true" : undefined;
 	}
 
-	get ariaLabelledBy() {
-		return this.text ? `${this._id}-label` : undefined;
+	get ariaLabelText() {
+		return [getEffectiveAriaLabelText(this), this.text].filter(Boolean).join(" ");
 	}
 
 	get ariaDescribedBy() {

package/src/RangeSlider.hbs

@@ -1,7 +1,9 @@
 {{>include "./SliderBase.hbs"}}
 
-<span id="{{_id}}-startHandleDesc" class="ui5-hidden-text">{{_ariaHandlesText.startHandleText}}</span>
-<span id="{{_id}}-endHandleDesc" class="ui5-hidden-text">{{_ariaHandlesText.endHandleText}}</span>
+{{#*inline "handlesAriaText"}}
+	<span id="{{_id}}-startHandleDesc" class="ui5-hidden-text">{{_ariaHandlesText.startHandleText}}</span>
+	<span id="{{_id}}-endHandleDesc" class="ui5-hidden-text">{{_ariaHandlesText.endHandleText}}</span>
+{{/inline}}
 
 {{#*inline "progressBar"}}
 	<div class="ui5-slider-progress-container">
@@ -35,6 +37,8 @@
 		aria-labelledby="{{_id}}-startHandleDesc"
 		aria-disabled="{{_ariaDisabled}}"
 	>
+		<ui5-icon name="source-code" slider-icon></ui5-icon>
+
 		{{#if showTooltip}}
 			<div class="ui5-slider-tooltip ui5-slider-tooltip--start" style="{{styles.tooltip}}">
 				<span class="ui5-slider-tooltip-value">{{tooltipStartValue}}</span>
@@ -55,6 +59,8 @@
 		aria-labelledby="{{_id}}-endHandleDesc"
 		aria-disabled="{{_ariaDisabled}}"
 	>
+		<ui5-icon name="source-code" slider-icon></ui5-icon>
+
 		{{#if showTooltip}}
 			<div class="ui5-slider-tooltip ui5-slider-tooltip--end" style="{{styles.tooltip}}">
 				<span class="ui5-slider-tooltip-value">{{tooltipEndValue}}</span>