@ui5/webcomponents 0.0.0-fb61e9889 → 0.0.0-fd6264051

package/src/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
@@ -264,18 +268,10 @@ 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>
- * <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
@@ -320,7 +316,6 @@ class Select extends UI5Element {
 		this._lastSelectedOption = null;
 		this._typedChars = "";
 		this._typingTimeoutID = -1;
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
 	}
 
 	onBeforeRendering() {
@@ -336,6 +331,8 @@ class Select extends UI5Element {
 				this._listWidth = this.responsivePopover.offsetWidth;
 			}
 		}
+
+		this._attachRealDomRefs();
 	}
 
 	_onfocusin() {
@@ -358,7 +355,7 @@ class Select extends UI5Element {
 	/**
 	 * Currently selected option.
 	 * @readonly
-	 * @type { ui5-option }
+	 * @type { sap.ui.webcomponents.main.ISelectOption }
 	 * @public
 	 */
 	get selectedOption() {
@@ -379,6 +376,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;
@@ -401,6 +406,7 @@ class Select extends UI5Element {
 				icon: opt.icon,
 				value: opt.value,
 				textContent: opt.textContent,
+				title: opt.title,
 				id: opt._id,
 				stableDomRef: opt.stableDomRef,
 			};
@@ -553,7 +559,7 @@ class Select extends UI5Element {
 	 * @private
 	 */
 	_handleItemPress(event) {
-		const item = event.detail.item;
+		const item = event.detail.selectedItems[0];
 		const selectedItemIndex = this._getSelectedItemIndex(item);
 
 		this._handleSelectionChange(selectedItemIndex);
@@ -658,13 +664,11 @@ class Select extends UI5Element {
 	}
 
 	get valueStateTextMappings() {
-		const i18nBundle = this.i18nBundle;
-
 		return {
-			"Success": i18nBundle.getText(VALUE_STATE_SUCCESS),
-			"Information": i18nBundle.getText(VALUE_STATE_INFORMATION),
-			"Error": i18nBundle.getText(VALUE_STATE_ERROR),
-			"Warning": i18nBundle.getText(VALUE_STATE_WARNING),
+			"Success": Select.i18nBundle.getText(VALUE_STATE_SUCCESS),
+			"Information": Select.i18nBundle.getText(VALUE_STATE_INFORMATION),
+			"Error": Select.i18nBundle.getText(VALUE_STATE_ERROR),
+			"Warning": Select.i18nBundle.getText(VALUE_STATE_WARNING),
 		};
 	}
 
@@ -685,7 +689,7 @@ class Select extends UI5Element {
 	}
 
 	get _headerTitleText() {
-		return this.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
+		return Select.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE);
 	}
 
 	get _currentSelectedItem() {
@@ -702,6 +706,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: {
@@ -711,6 +729,9 @@ class Select extends UI5Element {
 				"ui5-valuestatemessage--warning": this.valueState === ValueState.Warning,
 				"ui5-valuestatemessage--information": this.valueState === ValueState.Information,
 			},
+			popover: {
+				"ui5-select-popover-valuestate": this.hasValueState,
+			},
 		};
 	}
 
@@ -758,7 +779,7 @@ class Select extends UI5Element {
 	itemSelectionAnnounce() {
 		let text;
 		const optionsCount = this._filteredItems.length;
-		const itemPositionText = this.i18nBundle.getText(LIST_ITEM_POSITION, [this._selectedIndex + 1], [optionsCount]);
+		const itemPositionText = Select.i18nBundle.getText(LIST_ITEM_POSITION, this._selectedIndex + 1, optionsCount);
 
 		if (this.focused && this._currentlySelectedOption) {
 			text = `${this._currentlySelectedOption.textContent} ${this._isPickerOpen ? itemPositionText : ""}`;
@@ -807,6 +828,10 @@ class Select extends UI5Element {
 			Button,
 		];
 	}
+
+	static async onDefine() {
+		Select.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+	}
 }
 
 Select.define();

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}}
@@ -40,7 +42,7 @@
 			mode="SingleSelectAuto"
 			separators="None"
 			@mousedown="{{_itemMousedown}}"
-			@ui5-item-press="{{_handleItemPress}}"
+			@ui5-selection-change="{{_handleItemPress}}"
 		>
 			{{#each _syncedOptions}}
 				<ui5-li
@@ -48,6 +50,7 @@
 					icon="{{this.icon}}"
 					?selected="{{this.selected}}"
 					?focused="{{this._focused}}"
+					title="{{this.title}}"
 					?aria-selected="{{this.selected}}"
 					data-ui5-stable="{{this.stableDomRef}}"
 				>
@@ -63,13 +66,13 @@
 		skip-registry-update
 		_disable-initial-focus
 		prevent-focus-restore
-		no-padding
 		hide-arrow
 		class="ui5-valuestatemessage-popover"
 		placement-type="Bottom"
 		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,6 +32,7 @@
 		data-sap-focus-ref
 		part="handle"
 	>
+	<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/Slider.js

@@ -1,7 +1,8 @@
 import Float from "@ui5/webcomponents-base/dist/types/Float.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.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";
@@ -116,7 +117,10 @@ class Slider extends SliderBase {
 		super();
 		this._stateStorage.value = null;
 		this._setInitialValue("value", null);
-		this.i18nBundle = getI18nBundle("@ui5/webcomponents");
+	}
+
+	static get dependencies() {
+		return [Icon];
 	}
 
 	/**
@@ -308,11 +312,11 @@ class Slider extends SliderBase {
 	}
 
 	get _ariaLabelledByText() {
-		return this.i18nBundle.getText(SLIDER_ARIA_DESCRIPTION);
+		return Slider.i18nBundle.getText(SLIDER_ARIA_DESCRIPTION);
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		Slider.i18nBundle = await getI18nBundle("@ui5/webcomponents");
 	}
 }
 

package/src/SliderBase.hbs

@@ -1,5 +1,5 @@
 <div
-	class="ui5-slider-root"
+	class="ui5-slider-root {{classes.root}}"
 	@mousedown="{{_onmousedown}}"
 	@touchstart="{{_ontouchstart}}"
 	@mouseover="{{_onmouseover}}"

package/src/SliderBase.js

@@ -3,6 +3,8 @@ 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 { isPhone } from "@ui5/webcomponents-base/dist/Device.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,6 +182,7 @@ class SliderBase extends UI5Element {
 			sap_belize: "#bfbfbf",
 			sap_belize_hcw: "#000000",
 			sap_belize_hcb: "#ffffff",
+			sap_horizon: "#89919a",
 		};
 	}
 
@@ -227,6 +230,9 @@ class SliderBase extends UI5Element {
 
 	get classes() {
 		return {
+			root: {
+				"ui5-slider-root-phone": isPhone(),
+			},
 			labelContainer: {
 				"ui5-slider-hidden-labels": this._labelsOverlapping,
 			},
@@ -660,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
@@ -673,12 +682,10 @@ class SliderBase extends UI5Element {
 		const maxStr = String(this._effectiveMax);
 		const minStr = String(this._effectiveMin);
 		const stepStr = String(this._effectiveStep);
-		const tickmarkWidth = "1px";
 
 		// 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 currentColor = SliderBase.TICKMARK_COLOR_MAP[currentTheme];
+		const tickmarkWidth = "1px";
 
 		this._tickmarksAmount = `${maxStr - minStr} / ${stepStr}`;
 		this._hiddenTickmarks = false;

package/src/SplitButton.hbs

@@ -0,0 +1,53 @@
+<div
+	class="ui5-split-button-root"
+	role="group"
+	tabindex={{_tabIndex}}
+	aria-labelledby="{{_id}}-invisibleTextDefault {{_id}}-invisibleText"
+	@focusout={{_onFocusOut}}
+	@focusin={{_onFocusIn}}
+	@keydown={{_onKeyDown}}
+	@keyup={{_onKeyUp}}
+>
+
+	<ui5-button
+		class="ui5-split-text-button"
+		design="{{design}}"
+		dir={{effectiveDir}}
+		icon="{{_textButtonIcon}}"
+		tabindex="-1"
+		?disabled="{{disabled}}"
+		?active="{{_textButtonActive}}"
+		@click="{{_fireClick}}"
+		@touchstart={{_textButtonPress}}
+		@mousedown={{_textButtonPress}}
+		@mouseup={{_textButtonRelease}}
+		@focusin={{_setTabIndexValue}}
+		@focusout={{_onFocusOut}}
+	>
+		<slot></slot>
+	</ui5-button>
+
+	<div
+		class="ui5-split-arrow-button-wrapper"
+		dir={{effectiveDir}}
+	>
+		<ui5-button
+			class="ui5-split-arrow-button"
+			design="{{design}}"
+			icon="slim-arrow-down"
+			tabindex="-1"
+			?disabled="{{disabled}}"
+			?active="{{_arrowButtonActive}}"
+			aria-expanded="{{accessibilityInfo.ariaExpanded}}"
+			aria-haspopup="{{accessibilityInfo.ariaHaspopup}}"
+			@click="{{_fireArrowClick}}"
+			@focusin={{_setTabIndexValue}}
+			@focusout={{_onFocusOut}}
+		>
+		</ui5-button>
+	</div>
+
+	<span id="{{_id}}-invisibleText" class="ui5-hidden-text">{{accessibilityInfo.description}} {{accessibilityInfo.keyboardHint}} {{accessibleName}}</span>
+	<span id="{{_id}}-invisibleTextDefault" class="ui5-hidden-text">{{textButtonAccText}}</span>
+
+</div>