@ui5/webcomponents 0.0.0-aeb93167c → 0.0.0-b053ad005

package/src/MultiComboBoxItem.js

@@ -7,7 +7,7 @@ const metadata = {
 	tag: "ui5-mcb-item",
 	properties: /** @lends  sap.ui.webcomponents.main.MultiComboBoxItem.prototype */ {
 		/**
-		 * Defines the selected state of the <code>ui5-mcb-item</code>.
+		 * Defines the selected state of the component.
 		 * @type {boolean}
 		 * @defaultvalue false
 		 * @public
@@ -18,19 +18,24 @@ const metadata = {
 
 /**
  * @class
- * The <code>ui5-cb-item</code> represents the item for a <code>ui5-multi-combobox</code>.
+ * The <code>ui5-mcb-item</code> represents the item for a <code>ui5-multi-combobox</code>.
  *
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.MultiComboBoxItem
  * @extends ComboBoxItem
  * @tagname ui5-mcb-item
+ * @implements sap.ui.webcomponents.main.IMultiComboBoxItem
  * @public
  */
 class MultiComboBoxItem extends ComboBoxItem {
 	static get metadata() {
 		return metadata;
 	}
+
+	get stableDomRef() {
+		return `${this._id}-stable-dom-ref`;
+	}
 }
 
 MultiComboBoxItem.define();

package/src/MultiComboBoxPopover.hbs

@@ -1,12 +1,13 @@
 <ui5-responsive-popover
 	placement-type="Bottom"
-	horizontal-align="Left"
-	class="ui5-multi-combobox-all-items-responsive-popover"
-	no-arrow
+	horizontal-align="Stretch"
+	class="{{classes.popover}}"
+	hide-arrow
 	_disable-initial-focus
 	@ui5-selection-change={{_listSelectionChange}}
-	@ui5-after-close={{_toggle}}
-	@ui5-after-open={{_toggle}}
+	@ui5-after-close={{_afterClosePicker}}
+	@ui5-before-open={{_beforeOpen}}
+	@ui5-after-open={{_afterOpenPicker}}
 >
 	{{#if _isPhone}}
 		<div slot="header" class="ui5-responsive-popover-header" style="{{styles.popoverHeader}}">
@@ -16,7 +17,7 @@
 					class="ui5-responsive-popover-close-btn"
 					icon="decline"
 					design="Transparent"
-					@click="{{togglePopover}}"
+					@click="{{handleCancel}}"
 				>
 				</ui5-button>
 			</div>
@@ -30,7 +31,6 @@
 						.value="{{value}}"
 						inner-input
 						placeholder="{{placeholder}}"
-						?required={{required}}
 						value-state="{{valueState}}"
 						@input="{{_inputLiveChange}}"
 						@change={{_inputChange}}
@@ -39,18 +39,18 @@
 						aria-describedby="{{_id}}-valueStateDesc"
 						/>
 					</div>
-					<ui5-togglebutton
+					<ui5-toggle-button
 						slot="header"
 						class="ui5-multi-combobox-toggle-button"
 						icon="multiselect-all"
 						design="Transparent"
 						?pressed={{_showAllItemsButtonPressed}}
-						?disabled={{allItemsSelected}}
 						@click="{{filterSelectedItems}}"
-					></ui5-togglebutton>
+					></ui5-toggle-button>
 				</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,23 +60,32 @@
 
 	{{#unless _isPhone}}
 		{{#if hasValueStateMessage}}
-			<div slot="header" class="ui5-responsive-popover-header {{classes.popoverValueState}}" style={{styles.popoverValueStateMessage}}>
+			<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}}
 	{{/unless}}
 
-	<ui5-list separators="None" mode="MultiSelect" class="ui5-multi-combobox-all-items-list">
-		{{#each _filteredItems}}
-				<ui5-li type="{{../_listItemsType}}" ?selected={{this.selected}} data-ui5-token-id="{{this._id}}">{{this.text}}</ui5-li>
-		{{/each}}
-	</ui5-list>
+	{{#if filterSelected}}
+		<ui5-list separators="None" mode="MultiSelect" class="ui5-multi-combobox-all-items-list">
+			{{#each selectedItems}}
+				{{> listItem}}
+			{{/each}}
+		</ui5-list>
+	{{else}}
+		<ui5-list separators="None" mode="MultiSelect" class="ui5-multi-combobox-all-items-list">
+			{{#each _filteredItems}}
+				{{> listItem}}
+			{{/each}}
+		</ui5-list>
+	{{/if}}
 
 	{{#if _isPhone}}
 		<div slot="footer" class="ui5-responsive-popover-footer">
 			<ui5-button
 				design="Transparent"
-				@click="{{togglePopover}}"
+				@click="{{handleOK}}"
 			>{{_dialogOkButton}}</ui5-button>
 		</div>
 	{{/if}}
@@ -88,11 +97,13 @@
 		_disable-initial-focus
 		prevent-focus-restore
 		no-padding
-		no-arrow
+		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="{{_valueStateMessageIcon}}"></ui5-icon>
 			{{> valueStateMessage}}
 		</div>
 	</ui5-popover>
@@ -107,3 +118,16 @@
 		{{/each}}
 	{{/if}}
 {{/inline}}
+
+{{#*inline "listItem"}}
+	<ui5-li
+		type="{{../_listItemsType}}"
+		additional-text={{this.additionalText}}
+		?selected={{this.selected}}
+		data-ui5-token-id="{{this._id}}"
+		data-ui5-stable="{{this.stableDomRef}}"
+		@keydown="{{../_onItemKeydown}}"
+	>
+		{{this.text}}
+	</ui5-li>
+{{/inline}}

package/src/MultiInput.hbs

@@ -1,6 +1,7 @@
 {{>include "./Input.hbs"}}
 
 {{#*inline "preContent"}}
+	<span id="{{_id}}-hiddenText-nMore" class="ui5-hidden-text">{{_tokensCountText}}</span>
 	<ui5-tokenizer
 		class="ui5-multi-input-tokenizer"
 		.morePopoverOpener={{this}}
@@ -37,4 +38,4 @@
 			name="value-help"
 		></ui5-icon>
 	{{/if}}
-{{/inline}}
+{{/inline}}

package/src/MultiInput.js

@@ -5,6 +5,7 @@ import {
 	isLeft,
 	isRight,
 } from "@ui5/webcomponents-base/dist/Keys.js";
+import { MULTIINPUT_ROLEDESCRIPTION_TEXT } from "./generated/i18n/i18n-defaults.js";
 import Input from "./Input.js";
 import MultiInputTemplate from "./generated/templates/MultiInputTemplate.lit.js";
 import styles from "./generated/themes/MultiInput.css.js";
@@ -19,7 +20,7 @@ const metadata = {
 	tag: "ui5-multi-input",
 	properties: /** @lends sap.ui.webcomponents.main.MultiInput.prototype */ {
 		/**
-		 * Determines whether a value help icon will be should in the end of the input.
+		 * Determines whether a value help icon will be visualized in the end of the input.
 		 * Pressing the icon will fire <code>value-help-trigger</code> event.
 		 *
 		 * @type {boolean}
@@ -40,22 +41,14 @@ const metadata = {
 	},
 	slots: /** @lends  sap.ui.webcomponents.main.MultiInput.prototype */ {
 		/**
-		 * Defines the <code>ui5-multi-input</code> tokens.
-		 * <br><br>
-		 * Example: <br>
-		 * &lt;ui5-multi-input><br>
-		 * &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-token slot="tokens" text="Token 1">&lt;/ui5-token><br>
-		 * &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-token slot="tokens" text="Token 2">&lt;/ui5-token><br>
-		 * &lt;/ui5-multi-input>
-		 * <br> <br>
+		 * Defines the component tokens.
 		 *
-		 * @type {HTMLElement[]}
+		 * @type {sap.ui.webcomponents.main.IToken[]}
 		 * @slot
 		 * @public
 		 */
 		tokens: {
 			type: HTMLElement,
-			multiple: true,
 		},
 	},
 	events: /** @lends  sap.ui.webcomponents.main.MultiInput.prototype */ {
@@ -187,7 +180,7 @@ class MultiInput extends Input {
 		if (isBackSpace(event) && event.target.value === "") {
 			event.preventDefault();
 
-			this._focusLastToken();
+			this.tokenizer._focusLastToken();
 		}
 
 		if (isShow(event)) {
@@ -211,21 +204,10 @@ class MultiInput extends Input {
 		const cursorPosition = this.getDomRef().querySelector(`input`).selectionStart;
 
 		if (cursorPosition === 0) {
-			this._focusLastToken();
+			this.tokenizer._focusLastToken();
 		}
 	}
 
-	_focusLastToken() {
-		const lastTokenIndex = this.tokenizer._tokens.length - 1;
-
-		if (lastTokenIndex < 0) {
-			return;
-		}
-
-		this.tokenizer._itemNav.currentIndex = lastTokenIndex;
-		this.tokenizer._tokens[lastTokenIndex].focus();
-	}
-
 	_onfocusout(event) {
 		super._onfocusout(event);
 		const relatedTarget = event.relatedTarget;
@@ -237,6 +219,17 @@ class MultiInput extends Input {
 		}
 	}
 
+	/**
+	 * @override
+	 */
+	async _onfocusin(event) {
+		const inputDomRef = await this.getInputDOMRef();
+
+		if (event.target === inputDomRef) {
+			await super._onfocusin(event);
+		}
+	}
+
 	shouldOpenSuggestions() {
 		const parent = super.shouldOpenSuggestions();
 		const valueHelpPressed = this._valueHelpIconPressed;
@@ -255,6 +248,44 @@ class MultiInput extends Input {
 		return this.shadowRoot.querySelector("[ui5-tokenizer]");
 	}
 
+	get _tokensCountText() {
+		if (!this.tokenizer) {
+			return;
+		}
+		return this.tokenizer._tokensCountText();
+	}
+
+	get _tokensCountTextId() {
+		return `${this._id}-hiddenText-nMore`;
+	}
+
+	/**
+	 * Returns the placeholder value when there are no tokens.
+	 * @protected
+	 */
+	get _placeholder() {
+		if (this.tokenizer && this.tokenizer._tokens.length) {
+			return "";
+		}
+
+		return this.placeholder;
+	}
+
+	get accInfo() {
+		const ariaDescribedBy = `${this._tokensCountTextId} ${this.suggestionsTextId} ${this.valueStateTextId}`.trim();
+		return {
+			"input": {
+				...super.accInfo.input,
+				"ariaRoledescription": this.ariaRoleDescription,
+				"ariaDescribedBy": ariaDescribedBy,
+			},
+		};
+	}
+
+	get ariaRoleDescription() {
+		return MultiInput.i18nBundle.getText(MULTIINPUT_ROLEDESCRIPTION_TEXT);
+	}
+
 	static get dependencies() {
 		return [
 			...Input.dependencies,

package/src/Option.js

@@ -5,10 +5,11 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 */
 const metadata = {
 	tag: "ui5-option",
+	managedSlots: true,
 	properties: /** @lends  sap.ui.webcomponents.main.Option.prototype */ {
 
 		/**
-		 * Defines the selected state of the <code>ui5-option</code>.
+		 * Defines the selected state of the component.
 		 * @type {boolean}
 		 * @defaultvalue false
 		 * @public
@@ -17,11 +18,24 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines whether the component is in disabled state.
+		 * <br><br>
+		 * <b>Note:</b> A disabled component is noninteractive.
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 * @since 1.0.0-rc.12
+		 */
+		disabled: {
+			type: Boolean,
+		},
+
 		/**
 		 * Defines the <code>icon</code> source URI.
 		 * <br><br>
 		 * <b>Note:</b>
-		 * SAP-icons font provides numerous buil-in icons. To find all the available icons, see the
+		 * SAP-icons font provides numerous built-in icons. To find all the available icons, see the
 		 * <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
 		 *
 		 * @type {string}
@@ -33,7 +47,7 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the value of the <code>ui5-select</code> inside an HTML Form element when this <code>ui5-option</code> is selected.
+		 * Defines the value of the <code>ui5-select</code> inside an HTML Form element when this component is selected.
 		 * For more information on HTML Form support, see the <code>name</code> property of <code>ui5-select</code>.
 		 *
 		 * @type {string}
@@ -42,8 +56,32 @@ const metadata = {
 		value: {
 			type: String,
 		},
-	},
 
+		/**
+		 * Defines the focused state of the component.
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @since 1.0.0-rc.13
+		 * @private
+		 */
+		_focused: {
+			type: Boolean,
+		},
+	},
+	slots: /** @lends sap.ui.webcomponents.main.Option.prototype */ {
+		/**
+		 * Defines the text of the component.
+		 * <br><br>
+		 * <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+		 *
+		 * @type {Node[]}
+		 * @slot
+		 * @public
+		 */
+		"default": {
+			type: Node,
+		},
+	},
 	events: /** @lends sap.ui.webcomponents.main.Option.prototype */ {},
 };
 
@@ -52,19 +90,24 @@ const metadata = {
  *
  * <h3 class="comment-api-title">Overview</h3>
  *
- * The <code>ui5-option</code> component defines the content of an opton in the <code>ui5-select</code>.
+ * The <code>ui5-option</code> component defines the content of an option in the <code>ui5-select</code>.
  *
  * @constructor
  * @author SAP SE
  * @alias sap.ui.webcomponents.main.Option
  * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-option
+ * @implements sap.ui.webcomponents.main.ISelectOption
  * @public
  */
 class Option extends UI5Element {
 	static get metadata() {
 		return metadata;
 	}
+
+	get stableDomRef() {
+		return `${this._id}-stable-dom-ref`;
+	}
 }
 
 Option.define();

package/src/Panel.hbs

@@ -2,6 +2,7 @@
 	data-sap-ui-fastnavgroup="true"
 	class="ui5-panel-root"
 	role="{{accRole}}"
+	aria-label="{{effectiveAccessibleName}}"
 >
 	<!-- header: either header or h1 with header text -->
 	<div
@@ -13,21 +14,25 @@
 		role="{{accInfo.role}}"
 		aria-expanded="{{accInfo.ariaExpanded}}"
 		aria-controls="{{accInfo.ariaControls}}"
-		aria-label="{{accInfo.ariaLabel}}"
 		aria-labelledby="{{accInfo.ariaLabelledby}}"
 	>
 		{{#unless fixed}}
 			<div class="ui5-panel-header-button-root">
-				<ui5-button
-					design="Transparent"
-					class="ui5-panel-header-button {{classes.headerBtn}}"
-					icon="slim-arrow-right"
-					?non-focusable="{{nonFocusableButton}}"
-					@click="{{_toggleButtonClick}}"
-					._buttonAccInfo="{{accInfo.button}}"
-					aria-label="{{accInfo.ariaLabelButton}}"
-					aria-labelledby="{{accInfo.ariaLabelledbyButton}}"
-				></ui5-button>
+				{{#if _hasHeader}}
+					<ui5-button
+						design="Transparent"
+						class="ui5-panel-header-button {{classes.headerBtn}}"
+						icon="slim-arrow-right"
+						@click="{{_toggleButtonClick}}"
+						._buttonAccInfo="{{accInfo.button}}"
+						accessible-name="{{accInfo.button.ariaLabelButton}}"
+					></ui5-button>
+				{{else}}
+					<ui5-icon
+						class="ui5-panel-header-button ui5-panel-header-icon {{classes.headerBtn}}"
+						name="slim-arrow-right"
+					></ui5-icon>
+				{{/if}}
 			</div>
 		{{/unless}}
 
@@ -39,18 +44,20 @@
 				role="heading"
 				aria-level="{{headerAriaLevel}}"
 				class="ui5-panel-header-title"
-				aria-labelledby="{{_id}}-headerText"
 			>
 				{{headerText}}
 			</div>
 		{{/if}}
 	</div>
 
-	<div id="aria-labelledby-texts"></div>
-	<span id="{{_id}}-headerText" class="ui5-hidden-text">{{headerAriaLabelledByText}}</span>
-
 	<!-- content area -->
-	<div class="ui5-panel-content" id="{{_id}}-content" tabindex="-1" style="{{styles.content}}">
+	<div
+		class="ui5-panel-content"
+		id="{{_id}}-content"
+		tabindex="-1"
+		style="{{styles.content}}"
+		part="content"
+	>
 		<slot></slot>
 	</div>
 </div>