@ui5/webcomponents 0.0.0-db2be6526 → 0.0.0-dc3ccac50

package/src/MultiComboBoxPopover.hbs

@@ -1,7 +1,7 @@
 <ui5-responsive-popover
 	placement-type="Bottom"
 	horizontal-align="Stretch"
-	class="ui5-multi-combobox-all-items-responsive-popover"
+	class="{{classes.popover}}"
 	hide-arrow
 	_disable-initial-focus
 	@ui5-selection-change={{_listSelectionChange}}
@@ -50,6 +50,7 @@
 				</div>
 			{{#if hasValueStateMessage}}
 				<div class="{{classes.popoverValueState}}" style="{{styles.popoverValueStateMessage}}">
+					<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
 					{{> valueStateMessage}}
 				</div>
 			{{/if}}
@@ -60,6 +61,7 @@
 	{{#unless _isPhone}}
 		{{#if hasValueStateMessage}}
 			<div slot="header" @keydown="{{_onValueStateKeydown}}" tabindex="0" class="ui5-responsive-popover-header {{classes.popoverValueState}}" style={{styles.popoverValueStateMessage}}>
+				<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
 				{{> valueStateMessage}}
 			</div>
 		{{/if}}
@@ -101,6 +103,7 @@
 		horizontal-align="Left"
 	>
 		<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
+			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
 			{{> valueStateMessage}}
 		</div>
 	</ui5-popover>

package/src/Option.js

@@ -57,16 +57,6 @@ const metadata = {
 			type: String,
 		},
 
-		/**
-		 * Defines the stable selector that you can use via getStableDomRef method.
-		 * @public
-		 * @type {string}
-		 * @since 1.0.0-rc.11
-		 */
-		stableDomRef: {
-			type: String,
-		},
-
 		/**
 		 * Defines the focused state of the component.
 		 * @type {boolean}
@@ -114,6 +104,10 @@ class Option extends UI5Element {
 	static get metadata() {
 		return metadata;
 	}
+
+	get stableDomRef() {
+		return `${this._id}-stable-dom-ref`;
+	}
 }
 
 Option.define();

package/src/Popup.js

@@ -13,6 +13,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
@@ -143,13 +144,7 @@ const metadata = {
 
 const createBlockingStyle = () => {
 	if (!hasStyle("data-ui5-popup-scroll-blocker")) {
-		createStyle(`
-		.ui5-popup-scroll-blocker {
-			width: 100%;
-			height: 100%;
-			position: fixed;
-			overflow: hidden;
-		}`, "data-ui5-popup-scroll-blocker");
+		createStyle(globalStyles, "data-ui5-popup-scroll-blocker");
 	}
 };
 

package/src/RangeSlider.js

@@ -733,7 +733,7 @@ class RangeSlider extends SliderBase {
 	get styles() {
 		return {
 			progress: {
-				"transform": `scaleX(${this._selectedRange})`,
+				"width": `${this._selectedRange * 100}%`,
 				"transform-origin": `${this.directionStart} top`,
 				[this.directionStart]: `${this._firstHandlePositionFromStart}%`,
 			},

package/src/Select.js

@@ -264,14 +264,6 @@ const metadata = {
  * </ul>
  * <br>
  *
- * <h3>Stable DOM Refs</h3>
- *
- * In the context of <code>ui5-select</code>, you can provide a custom stable DOM ref for:
- * <ul>
- * <li>Every <code>ui5-option</code> that you provide.
- * Example: <code><ui5-option stable-dom-ref="option1"></ui5-option></code></li>
- * </ul>
- *
  * <h3>ES6 Module Import</h3>
  * <code>import "@ui5/webcomponents/dist/Select";</code>
  * <br>
@@ -335,6 +327,8 @@ class Select extends UI5Element {
 				this._listWidth = this.responsivePopover.offsetWidth;
 			}
 		}
+
+		this._attachRealDomRefs();
 	}
 
 	_onfocusin() {
@@ -378,6 +372,14 @@ class Select extends UI5Element {
 		}
 	}
 
+	async _attachRealDomRefs() {
+		this.responsivePopover = await this._respPopover();
+
+		this.options.forEach(option => {
+			option._getRealDomRef = () => this.responsivePopover.querySelector(`*[data-ui5-stable=${option.stableDomRef}]`);
+		});
+	}
+
 	_syncSelection() {
 		let lastSelectedOptionIndex = -1,
 			firstEnabledOptionIndex = -1;
@@ -699,6 +701,20 @@ class Select extends UI5Element {
 		&& this.responsivePopover.opened) ? "-1" : "0";
 	}
 
+	 /**
+	 * This method is relevant for sap_horizon theme only
+	 */
+	get _valueStateMessageInputIcon() {
+		const iconPerValueState = {
+			Error: "error",
+			Warning: "alert",
+			Success: "sys-enter-2",
+			Information: "information",
+		};
+
+		return this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : "";
+	}
+
 	get classes() {
 		return {
 			popoverValueState: {
@@ -708,6 +724,9 @@ class Select extends UI5Element {
 				"ui5-valuestatemessage--warning": this.valueState === ValueState.Warning,
 				"ui5-valuestatemessage--information": this.valueState === ValueState.Information,
 			},
+			popover: {
+				"ui5-valuestatemessage-popover": this.hasValueState,
+			},
 		};
 	}
 

package/src/SelectPopover.hbs

@@ -3,6 +3,7 @@
 		hide-arrow
 		_disable-initial-focus
 		placement-type="Bottom"
+		class="ui5-select-popover {{classes.popover}}"
 		horizontal-align="Stretch"
 		@ui5-after-open="{{_afterOpen}}"
 		@ui5-before-open="{{_beforeOpen}}"
@@ -30,7 +31,8 @@
 		{{/if}}
 		{{#unless _isPhone}}
 			{{#if hasValueStateText}}
-				<div slot="header" class="ui5-select-value-state-popover-padding {{classes.popoverValueState}}" style={{styles.responsivePopoverHeader}}>
+				<div slot="header" class="{{classes.popoverValueState}}" style={{styles.responsivePopoverHeader}}>
+					<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
 					{{> valueStateMessage}}
 				</div>
 			{{/if}}
@@ -70,6 +72,7 @@
 		horizontal-align="Left"
 	>
 		<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
+			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageInputIcon}}"></ui5-icon>
 			{{> valueStateMessage}}
 		</div>
 	</ui5-popover>

package/src/Slider.hbs

@@ -32,7 +32,7 @@
 		data-sap-focus-ref
 		part="handle"
 	>
-	<ui5-icon name="source-code" slider-icon></ui5-icon>
+	<ui5-icon name="source-code" part="icon-slider" slider-icon></ui5-icon>
 		{{#if showTooltip}}
 			<div class="ui5-slider-tooltip" style="{{styles.tooltip}}">
 				<span class="ui5-slider-tooltip-value">{{tooltipValue}}</span>

package/src/SliderBase.js

@@ -3,6 +3,7 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import Float from "@ui5/webcomponents-base/dist/types/Float.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import "@ui5/webcomponents-icons/dist/source-code.js";
 import {
 	isEscape, isHome, isEnd, isUp, isDown, isRight, isLeft, isUpCtrl, isDownCtrl, isRightCtrl, isLeftCtrl, isPlus, isMinus, isPageUp, isPageDown,
 } from "@ui5/webcomponents-base/dist/Keys.js";
@@ -180,7 +181,7 @@ class SliderBase extends UI5Element {
 			sap_belize: "#bfbfbf",
 			sap_belize_hcw: "#000000",
 			sap_belize_hcb: "#ffffff",
-			sap_horizon: "#d5dadd",
+			sap_horizon: "#89919a",
 		};
 	}
 

package/src/Switch.hbs

@@ -21,11 +21,21 @@
 						<ui5-icon name="decline" class="ui5-switch-icon-off"></ui5-icon>
 					</span>
 				{{else}}
-					<span class="ui5-switch-text ui5-switch-text--on" part="text-on">{{_textOn}}</span>
-					<span class="ui5-switch-text ui5-switch-text--off" part="text-off">{{_textOff}}</span>
+					{{#if hasNoLabel}}
+						<span class="ui5-switch-text ui5-switch-text--on ui5-switch-no-label-icon" part="text-on">
+							<ui5-icon name="{{sapNextIcon}}" class="ui5-switch-no-label-icon-on" ></ui5-icon>
+						</span>
+						<span class="ui5-switch-text ui5-switch-text--off switch-no-label-icon" part="text-off">
+							<ui5-icon name="{{sapNextIcon}}" class="ui5-switch-no-label-icon-off" ></ui5-icon>
+						</span>
+					{{else}}
+						<span class="ui5-switch-text ui5-switch-text--on" part="text-on">{{_textOn}}</span>
+						<span class="ui5-switch-text ui5-switch-text--off" part="text-off">{{_textOff}}</span>
+					{{/if}}
 				{{/if}}
 
 				<span class="ui5-switch-handle" part="handle">
+					{{!-- this icon is used in the sap_horizon_exp theme --}}
 					<ui5-icon
 						name="{{sapNextIcon}}"
 						class="ui5-switch-handle-icon"

package/src/Switch.js

@@ -201,6 +201,10 @@ class Switch extends UI5Element {
 		return this.design === SwitchDesign.Graphical;
 	}
 
+	get hasNoLabel() {
+		return !(this.graphical || this.textOn || this.textOff);
+	}
+
 	get _textOn() {
 		return this.graphical ? "" : this.textOn;
 	}

package/src/Tab.js

@@ -102,16 +102,6 @@ const metadata = {
 			defaultValue: SemanticColor.Default,
 		},
 
-		/**
-		 * Defines the stable selector that you can use via getStableDomRef method.
-		 * @public
-		 * @type {string}
-		 * @since 1.0.0-rc.8
-		 */
-		stableDomRef: {
-			type: String,
-		},
-
 		/**
 		 * Specifies if the component is selected.
 		 *
@@ -179,6 +169,16 @@ class Tab extends UI5Element {
 		];
 	}
 
+	get displayText() {
+		let text = this.text;
+
+		if (this._isInline && this.additionalText) {
+			text += ` (${this.additionalText})`;
+		}
+
+		return text;
+	}
+
 	get isSeparator() {
 		return false;
 	}
@@ -191,6 +191,22 @@ class Tab extends UI5Element {
 		return executeTemplate(this.constructor.overflowTemplate, this);
 	}
 
+	get stableDomRef() {
+		return `${this._id}-stable-dom-ref`;
+	}
+
+	/**
+	 * Returns the DOM reference of the tab that is placed in the header.
+	 * <b>Note:</b> If you need a DOM ref to the tab content please use the <code>getDomRef</code> method.
+	 *
+	 * @function
+	 * @public
+	 * @since 1.0.0-rc.16
+	 */
+	getTabInStripDomRef() {
+		return this._getTabInStripDomRef;
+	}
+
 	getFocusDomRef() {
 		let focusedDomRef = super.getFocusDomRef();
 
@@ -256,8 +272,6 @@ class Tab extends UI5Element {
 
 		if (this._isInline) {
 			classes.push("ui5-tab-strip-item--inline");
-		} else {
-			classes.push("ui5-tab-strip-item--standard");
 		}
 
 		if (this.additionalText) {

package/src/TabContainer.hbs

@@ -30,7 +30,12 @@
 							{{this.stripPresentation}}
 						{{/unless}}
 						{{#if this.isSeparator}}
-							<li id="{{this._id}}" role="separator" class="{{../classes.separator}}"></li>
+							<li
+								id="{{this._id}}"
+								data-ui5-stable="{{this.stableDomRef}}"
+								role="separator"
+								class="{{../classes.separator}}"
+							></li>
 						{{/if}}
 					{{/each}}
 				</ul>

package/src/TabContainer.js

@@ -235,14 +235,6 @@ const metadata = {
  * <li><code>ui5-tab-separator</code> - used to separate tabs with a vertical line</li>
  * </ul>
  *
- * <h3>Stable DOM Refs</h3>
- *
- * In the context of <code>ui5-tabcontainer</code>, you can provide a custom stable DOM refs for:
- * <ul>
- * <li>Each <code>ui5-tab</code>
- * Example: <code><ui5-tab stable-dom-ref="in-stock"></ui5-tab></code></li>
- * </ul>
- *
  * <h3>ES6 Module Import</h3>
  *
  * <code>import "@ui5/webcomponents/dist/TabContainer";</code>
@@ -318,6 +310,7 @@ class TabContainer extends UI5Element {
 				return this.getDomRef().querySelector(`#${item._id}`);
 			};
 			item._itemSelectCallback = this._onItemSelect.bind(this);
+			item._getRealDomRef = () => this.getDomRef().querySelector(`*[data-ui5-stable=${item.stableDomRef}]`);
 		});
 
 		if (!this._animationRunning) {
@@ -328,6 +321,10 @@ class TabContainer extends UI5Element {
 	onAfterRendering() {
 		this._scrollEnablement.scrollContainer = this._getHeaderScrollContainer();
 		this._updateScrolling();
+
+		this.items.forEach(item => {
+			item._getTabInStripDomRef = this.getDomRef().querySelector(`*[data-ui5-stable="${item.stableDomRef}"]`);
+		});
 	}
 
 	onEnterDOM() {

package/src/TabContainerPopover.hbs

@@ -6,6 +6,7 @@
 	with-padding
 	hide-arrow
 	_hide-header
+	class="ui5-tab-container-responsive-popover"
 >
 	<ui5-list @ui5-item-press="{{_onOverflowListItemSelect}}">
 		{{#each items}}

package/src/TabInStrip.hbs

@@ -27,14 +27,10 @@
 		{{#if this.text}}
 			<span class="ui5-tab-strip-itemText" id="{{this._id}}-text">
 				<span class="{{this.headerSemanticIconClasses}}"></span>
-				{{this.text}}
+				{{this.displayText}}
 			</span>
 		{{/if}}
 
-		{{#if this._isInline}}
-			{{> additionalText}}
-		{{/if}}
-
 	</div>
 
 </li>

package/src/Table.js

@@ -12,6 +12,7 @@ import isElementInView from "@ui5/webcomponents-base/dist/util/isElementInView.j
 import TableGrowingMode from "./types/TableGrowingMode.js";
 import BusyIndicator from "./BusyIndicator.js";
 import TableMode from "./types/TableMode.js";
+import CheckBox from "./CheckBox.js"; // Ensure the dependency as it is being used in the renderer
 
 // Texts
 import {
@@ -399,7 +400,7 @@ class Table extends UI5Element {
 	}
 
 	static get dependencies() {
-		return [BusyIndicator];
+		return [BusyIndicator, CheckBox];
 	}
 
 	static async onDefine() {

package/src/TableRow.js

@@ -277,7 +277,7 @@ class TableRow extends UI5Element {
 
 	get shouldPopin() {
 		return this._columnsInfo.filter(el => {
-			return el.demandPopin;
+			return el.demandPopin || !el.visible;
 		}).length;
 	}
 

package/src/TextArea.js

@@ -655,6 +655,20 @@ class TextArea extends UI5Element {
 		return this.valueStateTextMappings()[this.valueState];
 	}
 
+	/**
+	 * This method is relevant for sap_horizon theme only
+	 */
+	get _valueStateMessageIcon() {
+		const iconPerValueState = {
+			Error: "error",
+			Warning: "alert",
+			Success: "sys-enter-2",
+			Information: "information",
+		};
+
+		return this.valueState !== ValueState.None ? iconPerValueState[this.valueState] : "";
+	}
+
 	valueStateTextMappings() {
 		return {
 			"Information": TextArea.i18nBundle.getText(VALUE_STATE_INFORMATION),

package/src/TextAreaPopover.hbs

@@ -11,6 +11,7 @@
 		horizontal-align="Left"
 	>
 		<div slot="header" class="ui5-valuestatemessage-root {{classes.valueStateMsg}}">
+			<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
 			{{> valueStateMessage}}
 		</div>
 	</ui5-popover>

package/src/Token.hbs

@@ -1,6 +1,8 @@
 <div
 	tabindex="{{_tabIndex}}"
 	@click="{{_handleSelect}}"
+	@focusin="{{_focusin}}"
+	@focusout="{{_focusout}}"
 	@keydown="{{_keydown}}"
 	class="ui5-token--wrapper"
 	dir="{{effectiveDir}}"

package/src/Token.js

@@ -61,6 +61,14 @@ const metadata = {
 		 */
 		selected: { type: Boolean },
 
+		/**
+		 * Defines whether the component is focused or not.
+		 *
+		 * @type {boolean}
+		 * @private
+		 */
+		focused: { type: Boolean },
+
 		/**
 		 * Defines the tabIndex of the component.
 		 * @type {string}
@@ -153,6 +161,14 @@ class Token extends UI5Element {
 		this.fireEvent("select");
 	}
 
+	_focusin() {
+		this.focused = true;
+	}
+
+	_focusout() {
+		this.focused = !this.focused;
+	}
+
 	 _delete() {
 		this.fireEvent("delete");
 	 }
@@ -182,7 +198,11 @@ class Token extends UI5Element {
 	}
 
 	get iconURI() {
-		return getTheme() === "sap_fiori_3" ? "decline" : "sys-cancel";
+		if (getTheme().includes("sap_belize")) {
+			return "sys-cancel";
+		}
+
+		return "decline";
 	}
 
 	static get dependencies() {

package/src/Tokenizer.js

@@ -27,6 +27,9 @@ import styles from "./generated/themes/Tokenizer.css.js";
 import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
 import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js";
 
+// reuse suggestions focus styling for NMore popup
+import SuggestionsCss from "./generated/themes/Suggestions.css.js";
+
 /**
  * @public
  */
@@ -125,7 +128,7 @@ class Tokenizer extends UI5Element {
 	}
 
 	static get staticAreaStyles() {
-		return [ResponsivePopoverCommonCss, ValueStateMessageCss];
+		return [ResponsivePopoverCommonCss, ValueStateMessageCss, SuggestionsCss];
 	}
 
 	static get staticAreaTemplate() {

package/src/WheelSlider.js

@@ -397,25 +397,25 @@ class WheelSlider extends UI5Element {
 		this._selectElementByIndex(nextElementIndex);
 	}
 
-	_onkeydown(е) {
+	_onkeydown(e) {
 		if (!this.expanded) {
 			return;
 		}
 
-		if (isUp(е)) {
-			this._onArrowUp(е);
+		if (isUp(e)) {
+			this._onArrowUp(e);
 		}
 
-		if (isDown(е)) {
-			this._onArrowDown(е);
+		if (isDown(e)) {
+			this._onArrowDown(e);
 		}
 
-		if (isPageDown(е)) {
-			this._selectLimitCell(е, false);
+		if (isPageDown(e)) {
+			this._selectLimitCell(e, false);
 		}
 
-		if (isPageUp(е)) {
-			this._selectLimitCell(е, true);
+		if (isPageUp(e)) {
+			this._selectLimitCell(e, true);
 		}
 	}