@ui5/webcomponents 0.0.0-dc3ccac50 → 0.0.0-deac3098a

package/src/Select.hbs

@@ -1,5 +1,5 @@
 <div
-	class="ui5-select-root"
+	class="ui5-select-root ui5-input-focusable-element"
 	dir="{{effectiveDir}}"
 	id="{{_id}}-select"
 	@click="{{_onclick}}"
@@ -22,6 +22,7 @@
 		aria-disabled="{{isDisabled}}"
 		aria-required="{{required}}"
 		aria-expanded="{{_isPickerOpen}}"
+		aria-roledescription="{{_ariaRoleDescription}}"
 		@keydown="{{_onkeydown}}"
 		@keypress="{{_handleKeyboardNavigation}}"
 		@keyup="{{_onkeyup}}"

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";
@@ -28,6 +32,7 @@ import {
 	VALUE_STATE_WARNING,
 	INPUT_SUGGESTIONS_TITLE,
 	LIST_ITEM_POSITION,
+	SELECT_ROLE_DESCRIPTION,
 } from "./generated/i18n/i18n-defaults.js";
 import Option from "./Option.js";
 import Label from "./Label.js";
@@ -174,9 +179,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 +193,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 +272,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
@@ -351,7 +356,7 @@ class Select extends UI5Element {
 	/**
 	 * Currently selected option.
 	 * @readonly
-	 * @type { ui5-option }
+	 * @type { sap.ui.webcomponents.main.ISelectOption }
 	 * @public
 	 */
 	get selectedOption() {
@@ -402,6 +407,7 @@ class Select extends UI5Element {
 				icon: opt.icon,
 				value: opt.value,
 				textContent: opt.textContent,
+				title: opt.title,
 				id: opt._id,
 				stableDomRef: opt.stableDomRef,
 			};
@@ -554,7 +560,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);
@@ -630,6 +636,7 @@ class Select extends UI5Element {
 	_beforeOpen() {
 		this._selectedIndexBeforeOpen = this._selectedIndex;
 		this._lastSelectedOption = this._filteredItems[this._selectedIndex];
+		this.focused = false;
 	}
 
 	_afterOpen() {
@@ -638,6 +645,7 @@ class Select extends UI5Element {
 
 	_afterClose() {
 		this.opened = false;
+		this.focused = true;
 		this._iconPressed = false;
 		this._listWidth = 0;
 
@@ -725,7 +733,7 @@ class Select extends UI5Element {
 				"ui5-valuestatemessage--information": this.valueState === ValueState.Information,
 			},
 			popover: {
-				"ui5-valuestatemessage-popover": this.hasValueState,
+				"ui5-select-popover-valuestate": this.hasValueState,
 			},
 		};
 	}
@@ -763,6 +771,10 @@ class Select extends UI5Element {
 			&& !this._isPickerOpen && !this._isPhone;
 	}
 
+	get _ariaRoleDescription() {
+		return Select.i18nBundle.getText(SELECT_ROLE_DESCRIPTION);
+	}
+
 	get _isPhone() {
 		return isPhone();
 	}

package/src/SelectPopover.hbs

@@ -42,7 +42,7 @@
 			mode="SingleSelectAuto"
 			separators="None"
 			@mousedown="{{_itemMousedown}}"
-			@ui5-item-press="{{_handleItemPress}}"
+			@ui5-selection-change="{{_handleItemPress}}"
 		>
 			{{#each _syncedOptions}}
 				<ui5-li
@@ -50,6 +50,7 @@
 					icon="{{this.icon}}"
 					?selected="{{this.selected}}"
 					?focused="{{this._focused}}"
+					title="{{this.title}}"
 					?aria-selected="{{this.selected}}"
 					data-ui5-stable="{{this.stableDomRef}}"
 				>
@@ -65,7 +66,6 @@
 		skip-registry-update
 		_disable-initial-focus
 		prevent-focus-restore
-		no-padding
 		hide-arrow
 		class="ui5-valuestatemessage-popover"
 		placement-type="Bottom"

package/src/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/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,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 { 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,
@@ -158,6 +159,13 @@ class SliderBase extends UI5Element {
 			max: null,
 			labelInterval: null,
 		};
+
+		this._ontouchstart = {
+			handleEvent(event) {
+				this._onmousedown(event);
+			},
+			passive: true,
+		};
 	}
 
 	static get metadata() {
@@ -229,6 +237,9 @@ class SliderBase extends UI5Element {
 
 	get classes() {
 		return {
+			root: {
+				"ui5-slider-root-phone": isPhone(),
+			},
 			labelContainer: {
 				"ui5-slider-hidden-labels": this._labelsOverlapping,
 			},
@@ -251,10 +262,6 @@ class SliderBase extends UI5Element {
 		}
 	}
 
-	_ontouchstart(event) {
-		this._onmousedown(event);
-	}
-
 	/** Shows the tooltip(s) if the <code>showTooltip</code> property is set to true
 	 *
 	 * @private
@@ -662,12 +669,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
@@ -678,9 +688,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/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>