@ui5/webcomponents 0.0.0-cf069fb29 → 0.0.0-cf50976ce

package/dist/Popup.js

@@ -4,9 +4,12 @@ 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 { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
 import { hasStyle, createStyle } from "@ui5/webcomponents-base/dist/ManagedStyles.js";
-import { isTabPrevious } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isEnter, 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 { addOpenedPopup, removeOpenedPopup } from "./popup-utils/OpenedPopupsRegistry.js";
@@ -21,12 +24,12 @@ import globalStyles from "./generated/themes/PopupGlobal.css.js";
  */
 const metadata = {
 	managedSlots: true,
-	slots: /** @lends  sap.ui.webcomponents.main.Popup.prototype */ {
+	slots: /** @lends sap.ui.webcomponents.main.Popup.prototype */ {
 
 		/**
 		 * Defines the content of the Popup.
 		 * @type {HTMLElement[]}
-		 * @slot
+		 * @slot content
 		 * @public
 		 */
 		"default": {
@@ -34,7 +37,7 @@ const metadata = {
 			propertyName: "content",
 		},
 	},
-	properties: /** @lends  sap.ui.webcomponents.main.Popup.prototype */ {
+	properties: /** @lends sap.ui.webcomponents.main.Popup.prototype */ {
 		/**
 		 * Defines the ID of the HTML Element, which will get the initial focus.
 		 *
@@ -60,18 +63,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,
 		},
 
 		/**
 		 * Defines the accessible name of the component.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -84,7 +99,7 @@ const metadata = {
 		/**
 		 * Defines the IDs of the elements that label the component.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
 		 * @since 1.1.0
@@ -94,6 +109,16 @@ const metadata = {
 			defaultValue: "",
 		},
 
+		/**
+		 * Defines the current media query size.
+		 *
+		 * @type {string}
+		 * @private
+		 */
+		mediaRange: {
+			type: String,
+		},
+
 		/**
 		 * @private
 		 */
@@ -105,7 +130,7 @@ const metadata = {
 			type: Boolean,
 		},
 	},
-	events: /** @lends  sap.ui.webcomponents.main.Popup.prototype */ {
+	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. <b>This event does not bubble.</b>
@@ -164,7 +189,7 @@ const createBlockingStyle = () => {
 
 createBlockingStyle();
 
-const bodyScrollingBlockers = new Set();
+const pageScrollingBlockers = new Set();
 
 /**
  * @class
@@ -176,7 +201,7 @@ const bodyScrollingBlockers = new Set();
  *
  * 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):
@@ -200,6 +225,12 @@ const bodyScrollingBlockers = new Set();
  * @public
  */
 class Popup extends UI5Element {
+	constructor() {
+		super();
+
+		this._resizeHandler = this._resize.bind(this);
+	}
+
 	static get metadata() {
 		return metadata;
 	}
@@ -228,19 +259,27 @@ class Popup extends UI5Element {
 		if (!this.isOpen()) {
 			this._blockLayerHidden = true;
 		}
+
+		ResizeHandler.register(this, this._resizeHandler);
 	}
 
 	onExitDOM() {
 		if (this.isOpen()) {
-			Popup.unblockBodyScrolling(this);
+			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
 	 */
@@ -249,36 +288,31 @@ class Popup extends UI5Element {
 	}
 
 	/**
-	 * Temporarily removes scrollbars from the body
+	 * Temporarily removes scrollbars from the html element
 	 * @protected
 	 */
-	static blockBodyScrolling(popup) {
-		bodyScrollingBlockers.add(popup);
+	static blockPageScrolling(popup) {
+		pageScrollingBlockers.add(popup);
 
-		if (bodyScrollingBlockers.size !== 1) {
+		if (pageScrollingBlockers.size !== 1) {
 			return;
 		}
 
-		if (window.pageYOffset > 0) {
-			document.body.style.top = `-${window.pageYOffset}px`;
-		}
-		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(popup) {
-		bodyScrollingBlockers.delete(popup);
+	static unblockPageScrolling(popup) {
+		pageScrollingBlockers.delete(popup);
 
-		if (bodyScrollingBlockers.size !== 0) {
+		if (pageScrollingBlockers.size !== 0) {
 			return;
 		}
 
-		document.body.classList.remove("ui5-popup-scroll-blocker");
-		window.scrollTo(0, -parseFloat(document.body.style.top));
-		document.body.style.top = "";
+		document.documentElement.classList.remove("ui5-popup-scroll-blocker");
 	}
 
 	_scroll(e) {
@@ -289,7 +323,11 @@ class Popup extends UI5Element {
 	}
 
 	_onkeydown(e) {
-		if (e.target === this._root && isTabPrevious(e)) {
+		const isTabOutAttempt = e.target === this._root && isTabPrevious(e);
+		// if the popup is closed, focus is already moved, so Enter keydown may result in click on the newly focused element
+		const isEnterOnClosedPopupChild = isEnter(e) && !this.isOpen();
+
+		if (isTabOutAttempt || isEnterOnClosedPopupChild) {
 			e.preventDefault();
 		}
 	}
@@ -408,11 +446,12 @@ class Popup extends UI5Element {
 			// create static area item ref for block layer
 			this.getStaticAreaItemDomRef();
 			this._blockLayerHidden = false;
-			Popup.blockBodyScrolling(this);
+			Popup.blockPageScrolling(this);
 		}
 
 		this._zIndex = getNextZIndex();
 		this.style.zIndex = this._zIndex;
+
 		this._focusedElementBeforeOpen = getFocusedElement();
 
 		this._show();
@@ -424,6 +463,7 @@ class Popup extends UI5Element {
 		this._addOpenedPopup();
 
 		this.opened = true;
+		this.open = true;
 
 		await renderFinished();
 		this.fireEvent("after-open", {}, false, false);
@@ -453,11 +493,12 @@ class Popup extends UI5Element {
 
 		if (this.isModal) {
 			this._blockLayerHidden = true;
-			Popup.unblockBodyScrolling(this);
+			Popup.unblockPageScrolling(this);
 		}
 
 		this.hide();
 		this.opened = false;
+		this.open = false;
 
 		if (!preventRegistryUpdate) {
 			this._removeOpenedPopup();
@@ -530,7 +571,7 @@ class Popup extends UI5Element {
 	 *
 	 * @protected
 	 * @abstract
-	 * @returns {String}
+	 * @returns {string}
 	 */
 	get _ariaLabelledBy() {} // eslint-disable-line
 
@@ -539,13 +580,13 @@ 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() {
@@ -556,6 +597,14 @@ class Popup extends UI5Element {
 		return this.shadowRoot.querySelector(".ui5-popup-root");
 	}
 
+	get _role() {
+		return "dialog";
+	}
+
+	get contentDOM() {
+		return this.shadowRoot.querySelector(".ui5-popup-content");
+	}
+
 	get styles() {
 		return {
 			root: {},
@@ -570,6 +619,7 @@ class Popup extends UI5Element {
 		return {
 			root: {
 				"ui5-popup-root": true,
+				"ui5-content-native-scrollbars": getEffectiveScrollbarStyle(),
 			},
 			content: {
 				"ui5-popup-content": true,

package/dist/ProgressIndicator.js

@@ -5,6 +5,7 @@ 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 { 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,
@@ -138,6 +139,10 @@ class ProgressIndicator extends UI5Element {
 		return ProgressIndicatorTemplate;
 	}
 
+	static get dependencies() {
+		return [Icon];
+	}
+
 	constructor() {
 		super();
 

package/dist/RadioButton.js

@@ -21,7 +21,12 @@ 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";
@@ -100,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}
@@ -175,12 +182,12 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the accessible name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
 		 * @type {string}
 		 * @defaultvalue ""
-		 * @private
-		 * @since 1.0.0-rc.16
+		 * @public
+		 * @since 1.6.0
 		 */
 		accessibleName: {
 			type: String,
@@ -189,7 +196,7 @@ const metadata = {
 		/**
 		 * Defines the IDs of the elements that label the component.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
 		 * @since 1.1.0
@@ -393,11 +400,13 @@ class RadioButton extends UI5Element {
 			return this.toggle();
 		}
 
-		if (isDown(event) || isRight(event)) {
+		const isRTL = this.effectiveDir === "rtl";
+
+		if (isDown(event) || (!isRTL && isRight(event)) || (isRTL && isLeft(event))) {
 			this._handleDown(event);
 		}
 
-		if (isUp(event) || isLeft(event)) {
+		if (isUp(event) || (!isRTL && isLeft(event)) || (isRTL && isRight(event))) {
 			this._handleUp(event);
 		}
 	}
@@ -446,6 +455,8 @@ class RadioButton extends UI5Element {
 		return {
 			"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),
 		};
 	}
 

package/dist/RangeSlider.js

@@ -6,6 +6,7 @@ import {
 	isEnd,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import SliderBase from "./SliderBase.js";
+import Icon from "./Icon.js";
 import RangeSliderTemplate from "./generated/templates/RangeSliderTemplate.lit.js";
 
 // Texts
@@ -15,6 +16,9 @@ import {
 	RANGE_SLIDER_END_HANDLE_DESCRIPTION,
 } from "./generated/i18n/i18n-defaults.js";
 
+// Styles
+import rangeSliderStyles from "./generated/themes/RangeSlider.css.js";
+
 /**
  * @public
  */
@@ -47,6 +51,10 @@ const metadata = {
 			type: Float,
 			defaultValue: 100,
 		},
+
+		rangePressed: {
+			type: Boolean,
+		},
 	},
 };
 
@@ -124,6 +132,14 @@ class RangeSlider extends SliderBase {
 		};
 	}
 
+	static get dependencies() {
+		return [Icon];
+	}
+
+	static get styles() {
+		return [SliderBase.styles, rangeSliderStyles];
+	}
+
 	constructor() {
 		super();
 		this._stateStorage.startValue = null;
@@ -167,7 +183,7 @@ class RangeSlider extends SliderBase {
 	/**
 	 * Check if the previously saved state is outdated. That would mean
 	 * either it is the initial rendering or that a property has been changed
-	 * programatically - because the previous state is always updated in
+	 * programmatically - because the previous state is always updated in
 	 * the interaction handlers.
 	 *
 	 * Normalize current properties, update the previously stored state.
@@ -351,6 +367,8 @@ class RangeSlider extends SliderBase {
 		// Determine the rest of the needed details from the start of the interaction.
 		this._saveInteractionStartData(event, newValue);
 
+		this.rangePressed = this._isPressInCurrentRange;
+
 		// Do not yet update the RangeSlider if press is in range or over a handle.
 		if (this._isPressInCurrentRange || this._handeIsPressed) {
 			this._handeIsPressed = false;
@@ -450,6 +468,8 @@ class RangeSlider extends SliderBase {
 		this._setIsPressInCurrentRange(false);
 
 		this.handleUpBase();
+
+		this.rangePressed = false;
 	}
 
 	/**
@@ -502,7 +522,7 @@ class RangeSlider extends SliderBase {
 	 * - mouse press position - cursor coordinates relative to the start/end handles
 	 * - selected inner element via a keyboard navigation
 	 *
-	 * @param {String} valuePropAffectedByInteraction The value that will get modified by the interaction
+	 * @param {string} valuePropAffectedByInteraction The value that will get modified by the interaction
 	 * @private
 	 */
 	_setAffectedValue(valuePropAffectedByInteraction) {
@@ -718,6 +738,24 @@ class RangeSlider extends SliderBase {
 		return this._reversedValues;
 	}
 
+	get tickmarksObject() {
+		const count = this._tickmarksCount;
+		const arr = [];
+
+		if (this._hiddenTickmarks) {
+			return [false, false];
+		}
+
+		for (let i = 0; i <= count; i++) {
+			const isBiggerThanStartValue = this._effectiveMin + (i * this.step) >= this.startValue;
+			const isBiggerThanEndValue = this._effectiveMin + (i * this.step) <= this.endValue;
+
+			arr.push(isBiggerThanStartValue && isBiggerThanEndValue);
+		}
+
+		return arr;
+	}
+
 	get _startHandle() {
 		return this.shadowRoot.querySelector(".ui5-slider-handle--start");
 	}
@@ -730,6 +768,18 @@ class RangeSlider extends SliderBase {
 		return this.shadowRoot.querySelector(".ui5-slider-progress");
 	}
 
+	get _ariaLabelledByStartHandleRefs() {
+		return [`${this._id}-accName`, `${this._id}-startHandleDesc`].join(" ").trim();
+	}
+
+	get _ariaLabelledByEndHandleRefs() {
+		return [`${this._id}-accName`, `${this._id}-endHandleDesc`].join(" ").trim();
+	}
+
+	get _ariaLabelledByProgressBarRefs() {
+		return [`${this._id}-accName`, `${this._id}-sliderDesc`].join(" ").trim();
+	}
+
 	get styles() {
 		return {
 			progress: {

package/dist/RatingIndicator.js

@@ -18,6 +18,9 @@ import {
 	RATING_INDICATOR_TOOLTIP_TEXT,
 } from "./generated/i18n/i18n-defaults.js";
 import RatingIndicatorTemplate from "./generated/templates/RatingIndicatorTemplate.lit.js";
+import Icon from "./Icon.js";
+import "@ui5/webcomponents-icons/dist/favorite.js";
+import "@ui5/webcomponents-icons/dist/unfavorite.js";
 
 // Styles
 import RatingIndicatorCss from "./generated/themes/RatingIndicator.css.js";
@@ -88,9 +91,9 @@ const metadata = {
 		},
 
 		/**
-		 * Sets the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue: undefined
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -192,6 +195,10 @@ class RatingIndicator extends UI5Element {
 		RatingIndicator.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 
+	static get dependencies() {
+		return [Icon];
+	}
+
 	constructor() {
 		super();
 
@@ -231,7 +238,7 @@ class RatingIndicator extends UI5Element {
 			return;
 		}
 
-		this.value = parseInt(event.target.getAttribute("data-value"));
+		this.value = parseInt(event.target.getAttribute("data-ui5-value"));
 
 		if (this.value === 1 && this._liveValue === 1) {
 			this.value = 0;

package/dist/ResponsivePopover.js

@@ -18,15 +18,6 @@ import ResponsivePopoverCss from "./generated/themes/ResponsivePopover.css.js";
 const metadata = {
 	tag: "ui5-responsive-popover",
 	properties: /** @lends sap.ui.webcomponents.main.ResponsivePopover.prototype */ {
-
-		/**
-		 * Defines if padding would be added around the content.
-		 * @private
-		 */
-		withPadding: {
-			type: Boolean,
-		},
-
 		/**
 		 * Defines if only the content would be displayed (without header and footer) in the popover on Desktop.
 		 * By default both the header and footer would be displayed.
@@ -49,7 +40,7 @@ const metadata = {
 		 * <b>Note:</b> If you are using the <code>header</code> slot, this property will have no effect
 		 *
 		 * @private
-		 * @type {Boolean}
+		 * @type {boolean}
 		 * @defaultvalue false
 		 * @since 1.0.0-rc.16
 		 */
@@ -69,6 +60,17 @@ const metadata = {
  * <h3>Usage</h3>
  * Use it when you want to make sure that all the content is visible on any device.
  *
+ * <h3>CSS Shadow Parts</h3>
+ *
+ * <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
+ * <br>
+ * The <code>ui5-responsive-popover</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>header - Used to style the header of the component</li>
+ * <li>content - Used to style the content of the component</li>
+ * <li>footer - Used to style the footer of the component</li>
+ * </ul>
+ *
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.ResponsivePopover
@@ -165,6 +167,10 @@ class ResponsivePopover extends Popover {
 		return this.shadowRoot.querySelector("[ui5-dialog]");
 	}
 
+	get contentDOM() {
+		return this._isPhone ? this._dialog.contentDOM : super.contentDOM;
+	}
+
 	get _isPhone() {
 		return isPhone();
 	}
@@ -181,12 +187,14 @@ class ResponsivePopover extends Popover {
 		return ResponsivePopover.i18nBundle.getText(RESPONSIVE_POPOVER_CLOSE_DIALOG_BUTTON);
 	}
 
-	_afterDialogOpen(event) {
+	_beforeDialogOpen(event) {
+		this.open = true;
 		this.opened = true;
 		this._propagateDialogEvent(event);
 	}
 
 	_afterDialogClose(event) {
+		this.open = false;
 		this.opened = false;
 		this._propagateDialogEvent(event);
 	}

package/dist/SegmentedButton.js

@@ -4,7 +4,6 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
-import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
 import {
 	isSpace,
 	isEnter,
@@ -27,9 +26,9 @@ const metadata = {
 	languageAware: true,
 	properties: /** @lends sap.ui.webcomponents.main.SegmentedButton.prototype */  {
 		/**
-		 * Sets the accessible aria name of the component.
+		 * Defines the accessible ARIA name of the component.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue: ""
 		 * @public
 		 * @since 1.0.3
@@ -175,15 +174,7 @@ class SegmentedButton extends UI5Element {
 
 		this.widths = this.items.map(item => {
 			// +1 is added because for width 100.44px the offsetWidth property returns 100px and not 101px
-			let width = item.offsetWidth + 1;
-
-			if (isIE()) {
-				// in IE we are adding 1 one px beacause the width of the border on an item in the middle is not calculated and if the
-				// longest item is in the middle, it truncates
-				width += 1;
-			}
-
-			return width;
+			return item.offsetWidth + 1;
 		});
 	}