@ui5/webcomponents 0.0.0-aeb93167c → 0.0.0-b93c2a321

package/dist/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.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
+	}
 }
 
 MultiComboBoxItem.define();

package/dist/MultiInput.js

@@ -4,7 +4,11 @@ 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";
 import MultiInputTemplate from "./generated/templates/MultiInputTemplate.lit.js";
 import styles from "./generated/themes/MultiInput.css.js";
@@ -19,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}
@@ -40,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 */ {
@@ -143,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();
@@ -177,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();
@@ -196,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) {
@@ -237,6 +277,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 +306,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/dist/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,35 @@ 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 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}
@@ -33,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}
@@ -42,8 +67,42 @@ const metadata = {
 		value: {
 			type: String,
 		},
-	},
 
+		/**
+		 * Defines the additional text displayed at the end of the option element.
+		 * @type {string}
+		 * @public
+		 * @since 1.3.0
+		 */
+		 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: /** @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 +111,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.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
+	}
 }
 
 Option.define();