@ui5/webcomponents 0.0.0-b4cbc43ba → 0.0.0-b93c2a321

package/src/MultiComboBoxItem.js

@@ -7,21 +7,12 @@ 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
 		 */
 		selected: { type: Boolean },
-
-		/**
-		 * Defines the stable selector that you can use via getStableDomRef method.
-		 * @public
-		 * @since 1.0.0-rc.11
-		 */
-		stableDomRef: {
-			type: String,
-		},
 	},
 };
 
@@ -34,12 +25,17 @@ const metadata = {
  * @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.getAttribute("stable-dom-ref") || `${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>
@@ -38,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}}
@@ -59,31 +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}}"
-					info={{this.additionalText}}
-					?selected={{this.selected}}
-					data-ui5-token-id="{{this._id}}"
-					data-ui5-stable="{{this.stableDomRef}}"
-				>
-					{{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}}
@@ -94,13 +96,13 @@
 		skip-registry-update
 		_disable-initial-focus
 		prevent-focus-restore
-		no-padding
-		no-arrow
+		hide-arrow
 		class="ui5-valuestatemessage-popover"
 		placement-type="Bottom"
-		horizontal-align="Left"
+		horizontal-align="{{_valueStatePopoverHorizontalAlign}}"
 	>
 		<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>
@@ -115,3 +117,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

@@ -11,7 +11,7 @@
 		show-more
 		@keydown="{{_onTokenizerKeydown}}"
 		@show-more-items-press={{showMorePress}}
-		@token-delete={{tokenDelete}}
+		@ui5-token-delete={{tokenDelete}}
 		@focusout="{{_tokenizerFocusOut}}"
 	>
 		<slot name="tokens"></slot>

package/src/MultiInput.js

@@ -4,6 +4,9 @@ import {
 	isBackSpace,
 	isLeft,
 	isRight,
+	isRightCtrl,
+	isHome,
+	isEnd,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import { MULTIINPUT_ROLEDESCRIPTION_TEXT } from "./generated/i18n/i18n-defaults.js";
 import Input from "./Input.js";
@@ -20,7 +23,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}
@@ -41,22 +44,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 */ {
@@ -144,8 +139,15 @@ class MultiInput extends Input {
 	}
 
 	tokenDelete(event) {
-		this.fireEvent("token-delete", {
-			token: event.detail.ref,
+		const focusedToken = event.detail.ref;
+		const selectedTokens = this.tokens.filter(token => token.selected);
+
+		if (selectedTokens.indexOf(focusedToken) === -1) {
+			selectedTokens.push(focusedToken);
+		}
+
+		selectedTokens.forEach(token => {
+			this.fireEvent("token-delete", { token });
 		});
 
 		this.focus();
@@ -178,18 +180,19 @@ class MultiInput extends Input {
 	_onkeydown(event) {
 		super._onkeydown(event);
 
-		if (isLeft(event)) {
-			this._skipOpenSuggestions = true; // Prevent input focus when navigating through the tokens.
+		const isHomeInBeginning = isHome(event) && event.target.selectionStart === 0;
 
+		if (isHomeInBeginning) {
+			this._skipOpenSuggestions = true; // Prevent input focus when navigating through the tokens
+			return this._focusFirstToken(event);
+		}
+
+		if (isLeft(event) || isBackSpace(event)) {
+			this._skipOpenSuggestions = true;
 			return this._handleLeft(event);
 		}
 
 		this._skipOpenSuggestions = false;
-		if (isBackSpace(event) && event.target.value === "") {
-			event.preventDefault();
-
-			this._focusLastToken();
-		}
 
 		if (isShow(event)) {
 			this.valueHelpPress();
@@ -197,34 +200,70 @@ class MultiInput extends Input {
 	}
 
 	_onTokenizerKeydown(event) {
-		if (isRight(event)) {
-			const lastTokenIndex = this.tokenizer._tokens.length - 1;
+		const rightCtrl = isRightCtrl(event);
+		const isCtrl = !!(event.metaKey || event.ctrlKey);
+		const tokens = this.tokens;
+
+		if (isRight(event) || isEnd(event) || rightCtrl) {
+			event.preventDefault();
+			const lastTokenIndex = this.tokens.length - 1;
 
-			if (this.tokenizer._tokens[lastTokenIndex] === document.activeElement) {
+			if (event.target === this.tokens[lastTokenIndex] && this.tokens[lastTokenIndex] === document.activeElement) {
 				setTimeout(() => {
 					this.focus();
 				}, 0);
+			} else if (rightCtrl) {
+				event.preventDefault();
+				return this.tokenizer._handleArrowCtrl(event.target, this.tokens, true);
+			}
+		}
+
+		this.tokenizer._handleItemNavigation(event, tokens);
+
+		if (isCtrl && ["c", "x"].includes(event.key.toLowerCase())) {
+			event.preventDefault();
+
+			const isCut = event.key.toLowerCase() === "x";
+			const selectedTokens = tokens.filter(token => token.selected);
+
+			if (isCut) {
+				const cutResult = this.tokenizer._fillClipboard("cut", selectedTokens);
+
+				selectedTokens.forEach(token => {
+					this.fireEvent("token-delete", { token });
+				});
+
+				this.focus();
+
+				return cutResult;
 			}
+
+			return this.tokenizer._fillClipboard("copy", selectedTokens);
 		}
 	}
 
-	_handleLeft() {
+	_handleLeft(event) {
 		const cursorPosition = this.getDomRef().querySelector(`input`).selectionStart;
+		const tokens = this.tokens;
+		const lastToken = tokens.length && tokens[tokens.length - 1];
 
-		if (cursorPosition === 0) {
-			this._focusLastToken();
+		if (cursorPosition === 0 && lastToken) {
+			event.preventDefault();
+			lastToken.focus();
+			this.tokenizer._itemNav.setCurrentItem(lastToken);
 		}
 	}
 
-	_focusLastToken() {
-		const lastTokenIndex = this.tokenizer._tokens.length - 1;
+	_focusFirstToken(event) {
+		const tokens = this.tokens;
+		const firstToken = tokens.length && tokens[0];
 
-		if (lastTokenIndex < 0) {
-			return;
-		}
+		if (firstToken) {
+			event.preventDefault();
 
-		this.tokenizer._itemNav.currentIndex = lastTokenIndex;
-		this.tokenizer._tokens[lastTokenIndex].focus();
+			firstToken.focus();
+			this.tokenizer._itemNav.setCurrentItem(firstToken);
+		}
 	}
 
 	_onfocusout(event) {
@@ -291,7 +330,7 @@ class MultiInput extends Input {
 	}
 
 	get accInfo() {
-		const ariaDescribedBy = `${this._tokensCountTextId} ${this.suggestionsTextId} ${this.valueStateTextId} ${this.suggestionsCount}`.trim();
+		const ariaDescribedBy = `${this._tokensCountTextId} ${this.suggestionsTextId} ${this.valueStateTextId}`.trim();
 		return {
 			"input": {
 				...super.accInfo.input,
@@ -302,7 +341,7 @@ class MultiInput extends Input {
 	}
 
 	get ariaRoleDescription() {
-		return this.i18nBundle.getText(MULTIINPUT_ROLEDESCRIPTION_TEXT);
+		return MultiInput.i18nBundle.getText(MULTIINPUT_ROLEDESCRIPTION_TEXT);
 	}
 
 	static get dependencies() {

package/src/Option.js

@@ -9,7 +9,7 @@ const metadata = {
 	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
@@ -19,9 +19,9 @@ const metadata = {
 		},
 
 		/**
-		 * Defines whether <code>ui5-option</code> is in disabled state.
+		 * Defines whether the component is in disabled state.
 		 * <br><br>
-		 * <b>Note:</b> A disabled <code>ui5-option</code> is noninteractive.
+		 * <b>Note:</b> A disabled component is noninteractive.
 		 * @type {boolean}
 		 * @defaultvalue false
 		 * @public
@@ -31,11 +31,22 @@ const metadata = {
 			type: Boolean,
 		},
 
+		/**
+		 * Defines the tooltip of the component.
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @private
+		 * @since 1.1.0
+		 */
+		title: {
+			type: String,
+		},
+
 		/**
 		 * 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}
@@ -47,7 +58,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}
@@ -58,15 +69,36 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the stable selector that you can use via getStableDomRef method.
+		 * Defines the additional text displayed at the end of the option element.
+		 * @type {string}
 		 * @public
-		 * @since 1.0.0-rc.11
+		 * @since 1.3.0
 		 */
-		stableDomRef: {
+		 additionalText: {
 			type: String,
 		},
+
+		/**
+		 * Defines the focused state of the component.
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @since 1.0.0-rc.13
+		 * @private
+		 */
+		_focused: {
+			type: Boolean,
+		},
 	},
-	slots: {
+	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,
 		},
@@ -86,12 +118,17 @@ const metadata = {
  * @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.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
+	}
 }
 
 Option.define();

package/src/Panel.hbs

@@ -1,9 +1,9 @@
 <div
-	data-sap-ui-fastnavgroup="true"
 	class="ui5-panel-root"
 	role="{{accRole}}"
+	aria-label="{{effectiveAccessibleName}}"
 >
-	<!-- header: either header or h1 with header text -->
+	{{! header: either header or h1 with header text}}
 	<div
 		@click="{{_headerClick}}"
 		@keydown="{{_headerKeyDown}}"
@@ -13,21 +13,26 @@
 		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}}"
+						.accessibilityAttributes={{accInfo.button.accessibilityAttributes}}
+						tooltip="{{accInfo.button.title}}"
+						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}}">
+	{{! content area}}
+	<div
+		class="ui5-panel-content"
+		id="{{_id}}-content"
+		tabindex="-1"
+		style="{{styles.content}}"
+		part="content"
+	>
 		<slot></slot>
 	</div>
 </div>