@ui5/webcomponents 1.1.2 → 1.2.0

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

@@ -189,7 +189,7 @@ const metadata = {
 		/**
 		 * Defines the IDs of the elements that label the component.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
 		 * @since 1.1.0

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
@@ -124,6 +125,10 @@ class RangeSlider extends SliderBase {
 		};
 	}
 
+	static get dependencies() {
+		return [Icon];
+	}
+
 	constructor() {
 		super();
 		this._stateStorage.startValue = null;
@@ -502,7 +507,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) {

package/dist/RatingIndicator.js

@@ -88,9 +88,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

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
@@ -182,11 +184,13 @@ class ResponsivePopover extends Popover {
 	}
 
 	_afterDialogOpen(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

@@ -27,9 +27,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

package/dist/SegmentedButtonItem.js

@@ -1,6 +1,7 @@
 import SegmentedButtonItemTemplate from "./generated/templates/SegmentedButtonItemTemplate.lit.js";
 import ToggleButton from "./ToggleButton.js";
 import ButtonDesign from "./types/ButtonDesign.js";
+import Icon from "./Icon.js";
 
 import { SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION } from "./generated/i18n/i18n-defaults.js";
 
@@ -48,7 +49,7 @@ const metadata = {
 		 * Defines the index of the item inside of the SegmentedButton.
 		 *
 		 * @private
-		 * @type {String}
+		 * @type {string}
 		 */
 		posInSet: {
 			type: String,
@@ -58,7 +59,7 @@ const metadata = {
 		 * Defines how many items are inside of the SegmentedButton.
 		 *
 		 * @private
-		 * @type {String}
+		 * @type {string}
 		 */
 		sizeOfSet: {
 			type: String,
@@ -99,6 +100,10 @@ class SegmentedButtonItem extends ToggleButton {
 		return SegmentedButtonItemTemplate;
 	}
 
+	static get dependencies() {
+		return [Icon];
+	}
+
 	get ariaDescription() {
 		return SegmentedButtonItem.i18nBundle.getText(SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION);
 	}

package/dist/Select.js

@@ -18,6 +18,10 @@ import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
 import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import "@ui5/webcomponents-icons/dist/error.js";
+import "@ui5/webcomponents-icons/dist/alert.js";
+import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
+import "@ui5/webcomponents-icons/dist/information.js";
 import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import "@ui5/webcomponents-icons/dist/decline.js";
@@ -174,9 +178,9 @@ const metadata = {
 		},
 
 		/**
-		 * Sets the accessible aria name of the component.
+		 * Defines the accessible aria name of the component.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @since 1.0.0-rc.9
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -188,7 +192,7 @@ const metadata = {
 		/**
 		 * Receives id(or many ids) of the elements that label the select.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -267,7 +271,7 @@ const metadata = {
  * <h3>ES6 Module Import</h3>
  * <code>import "@ui5/webcomponents/dist/Select";</code>
  * <br>
- * <code>import "@ui5/webcomponents/dist/Option";</code>
+ * <code>import "@ui5/webcomponents/dist/Option";</code> (comes with <code>ui5-select</code>)
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.Select
@@ -726,7 +730,7 @@ class Select extends UI5Element {
 				"ui5-valuestatemessage--information": this.valueState === ValueState.Information,
 			},
 			popover: {
-				"ui5-valuestatemessage-popover": this.hasValueState,
+				"ui5-select-popover-valuestate": this.hasValueState,
 			},
 		};
 	}

package/dist/Slider.js

@@ -2,6 +2,7 @@ import Float from "@ui5/webcomponents-base/dist/types/Float.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
 import SliderBase from "./SliderBase.js";
+import Icon from "./Icon.js";
 
 // Template
 import SliderTemplate from "./generated/templates/SliderTemplate.lit.js";
@@ -118,6 +119,10 @@ class Slider extends SliderBase {
 		this._setInitialValue("value", null);
 	}
 
+	static get dependencies() {
+		return [Icon];
+	}
+
 	/**
 	 *
 	 * Check if the previously saved state is outdated. That would mean

package/dist/SliderBase.js

@@ -666,12 +666,15 @@ class SliderBase extends UI5Element {
 	 * @private
 	 */
 	get _tickmarks() {
+		const currentTheme = getTheme();
+		const currentColor = SliderBase.TICKMARK_COLOR_MAP[currentTheme];
+
 		if (!this.showTickmarks || !this._effectiveStep) {
 			return;
 		}
 
 		if (this._hiddenTickmarks) {
-			return `linear-gradient(to right, currentColor 1px, transparent 0) 0 center / calc(100% - 1px) 100% repeat-x`;
+			return `linear-gradient(to right, ${currentColor} 1px, transparent 0) 0 center / calc(100% - 1px) 100% repeat-x`;
 		}
 
 		// Convert number values to strings to let the CSS do calculations better
@@ -682,9 +685,7 @@ class SliderBase extends UI5Element {
 
 		// There is a CSS bug with the 'currentcolor' value of a CSS gradient that does not
 		// respect the variable for more than one theme. It has to be set here for now.
-		const currentTheme = getTheme();
 		const tickmarkWidth = "1px";
-		const currentColor = SliderBase.TICKMARK_COLOR_MAP[currentTheme];
 
 		this._tickmarksAmount = `${maxStr - minStr} / ${stepStr}`;
 		this._hiddenTickmarks = false;

package/dist/SplitButton.js

@@ -14,6 +14,7 @@ import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import SplitButtonTemplate from "./generated/templates/SplitButtonTemplate.lit.js";
 import ButtonDesign from "./types/ButtonDesign.js";
+import Button from "./Button.js";
 
 import {
 	SPLIT_BUTTON_DESCRIPTION,
@@ -95,9 +96,9 @@ const metadata = {
 		},
 
 		/**
-		 * Sets the accessible aria name of the component.
+		 * Defines the accessible aria name of the component.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue: ""
 		 * @public
 		 */
@@ -251,8 +252,8 @@ const metadata = {
  * the style to provide visual feedback to the user that it is pressed or hovered over with
  * the mouse cursor. A disabled <code>ui5-split-button</code> appears inactive and any of the two buttons
  * cannot be pressed.
- * <br><br>
- * <b>Keyboard handing</b>
+ *
+ * <h3>Keyboard Handling</h3>
  * <ul>
  * <li><code>Space</code> or <code>Enter</code> - triggers the default action</li>
  * <li><code>Shift</code> or <code>Escape</code> - if <code>Space</code> is pressed, releases the default action button without triggering the click event.</li>
@@ -262,10 +263,11 @@ const metadata = {
  * <li><code>click</code> for the first button (default action)</li>
  * <li><code>arrow-click</code> for the second button (arrow action)</li>
  * </ul>
+ * </ul>
  *
  * <h3>ES6 Module Import</h3>
  *
- * <code>import @ui5/webcomponents/dist/SplitButton.js";</code>
+ * <code>import "@ui5/webcomponents/dist/SplitButton.js";</code>
  *
  * @constructor
  * @author SAP SE
@@ -292,6 +294,10 @@ class SplitButton extends UI5Element {
 		return SplitButtonTemplate;
 	}
 
+	static get dependencies() {
+		return [Button];
+	}
+
 	static async onDefine() {
 		SplitButton.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}

package/dist/StepInput.js

@@ -187,9 +187,9 @@ const metadata = {
 		},
 
 		/**
-		 * Sets the accessible aria name of the component.
+		 * Defines the accessible aria name of the component.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @public
 		 * @since 1.0.0-rc.15
 		 */
@@ -200,7 +200,7 @@ const metadata = {
 		/**
 		 * Receives id(or many ids) of the elements that label the component.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
 		 * @since 1.0.0-rc.15
@@ -221,7 +221,7 @@ const metadata = {
 		},
 
 		/**
-		 * @type {Boolean}
+		 * @type {boolean}
 		 * @private
 		 */
 		focused: {

package/dist/Switch.js

@@ -97,10 +97,22 @@ const metadata = {
 			type: String,
 		},
 
+		/**
+		 * Sets the accessible aria name of the component.
+		 *
+		 * @type {string}
+		 * @defaultvalue: ""
+		 * @public
+		 * @since 1.2.0
+		 */
+		 accessibleName: {
+			type: String,
+		},
+
 		/**
 		 * Receives id(or many ids) of the elements that label the component.
 		 *
-		 * @type {String}
+		 * @type {string}
 		 * @defaultvalue ""
 		 * @public
 		 * @since 1.1.0

package/dist/TabContainer.js

@@ -1,6 +1,7 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import slideDown from "@ui5/webcomponents-base/dist/animations/slideDown.js";
 import slideUp from "@ui5/webcomponents-base/dist/animations/slideUp.js";
 import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
@@ -22,6 +23,7 @@ import {
 	TABCONTAINER_NEXT_ICON_ACC_NAME,
 	TABCONTAINER_OVERFLOW_MENU_TITLE,
 	TABCONTAINER_END_OVERFLOW,
+	TABCONTAINER_POPOVER_CANCEL_BUTTON,
 } from "./generated/i18n/i18n-defaults.js";
 import Button from "./Button.js";
 import Icon from "./Icon.js";
@@ -291,6 +293,15 @@ const metadata = {
  * <li><code>ui5-tab-separator</code> - used to separate tabs with a vertical line</li>
  * </ul>
  *
+ * <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-tabcontainer</code> exposes the following CSS Shadow Parts:
+ * <ul>
+ * <li>content - Used to style the content of the component</li>
+ * </ul>
+ *
  * <h3>Keyboard Handling</h3>
  *
  * <h4>Fast Navigation</h4>
@@ -595,11 +606,13 @@ class TabContainer extends UI5Element {
 		}
 	}
 
-	_handleResize() {
+	async _handleResize() {
 		if (this.responsivePopover && this.responsivePopover.opened) {
 			this.responsivePopover.close();
 		}
 		this._updateMediaRange();
+
+		await renderFinished(); // await the tab container to have rendered its representation of tabs
 		this._setItemsForStrip();
 	}
 
@@ -893,7 +906,11 @@ class TabContainer extends UI5Element {
 		const focusableTabs = [];
 
 		if (!this._getStartOverflow().hasAttribute("hidden")) {
-			focusableTabs.push(this._getStartOverflow().querySelector("[ui5-button]"));
+			if (this._getCustomStartOverflowBtnDOM()) {
+				focusableTabs.push(this._getCustomStartOverflowBtnDOM());
+			} else {
+				focusableTabs.push(this._getStartOverflowBtnDOM());
+			}
 		}
 
 		this._getTabs().forEach(tab => {
@@ -903,7 +920,11 @@ class TabContainer extends UI5Element {
 		});
 
 		if (!this._getEndOverflow().hasAttribute("hidden")) {
-			focusableTabs.push(this._getEndOverflow().querySelector("[ui5-button]"));
+			if (this._getCustomEndOverflowBtnDOM()) {
+				focusableTabs.push(this._getCustomEndOverflowBtnDOM());
+			} else {
+				focusableTabs.push(this._getEndOverflowBtnDOM());
+			}
 		}
 
 		return focusableTabs;
@@ -933,6 +954,22 @@ class TabContainer extends UI5Element {
 		return this.shadowRoot.querySelector(".ui5-tc__overflow--end");
 	}
 
+	_getCustomStartOverflowBtnDOM() {
+		return this.shadowRoot.querySelector("slot[name=startOverflowButton]");
+	}
+
+	_getStartOverflowBtnDOM() {
+		return this._getStartOverflow().querySelector("[ui5-button]");
+	}
+
+	_getCustomEndOverflowBtnDOM() {
+		return this.shadowRoot.querySelector("slot[name=overflowButton]");
+	}
+
+	_getEndOverflowBtnDOM() {
+		return this._getEndOverflow().querySelector("[ui5-button]");
+	}
+
 	async _respPopover() {
 		const staticAreaItem = await this.getStaticAreaItemDomRef();
 		return staticAreaItem.querySelector(`#${this._id}-overflowMenu`);
@@ -1002,6 +1039,10 @@ class TabContainer extends UI5Element {
 		return TabContainer.i18nBundle.getText(TABCONTAINER_END_OVERFLOW);
 	}
 
+	get popoverCancelButtonText() {
+		return TabContainer.i18nBundle.getText(TABCONTAINER_POPOVER_CANCEL_BUTTON);
+	}
+
 	get animate() {
 		return getAnimationMode() !== AnimationMode.None;
 	}