@ui5/webcomponents 0.0.0-39bd3067f → 0.0.0-4180fe799

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,21 +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 {
-	/**
-	 * @public
-	 */
 	static get metadata() {
 		return metadata;
 	}
+
+	get stableDomRef() {
+		return `${this._id}-stable-dom-ref`;
+	}
 }
 
 MultiComboBoxItem.define();

package/dist/MultiInput.js

@@ -0,0 +1,301 @@
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import {
+	isShow,
+	isBackSpace,
+	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";
+import Token from "./Token.js";
+import Tokenizer from "./Tokenizer.js";
+import Icon from "./Icon.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-multi-input",
+	properties: /** @lends sap.ui.webcomponents.main.MultiInput.prototype */ {
+		/**
+		 * 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}
+		 * @defaultvalue false
+		 * @public
+		 */
+		showValueHelpIcon: {
+			type: Boolean,
+		},
+
+		/**
+		 * Indicates whether the tokenizer is expanded or collapsed(shows the n more label)
+		 * @private
+		 */
+		expandedTokenizer: {
+			type: Boolean,
+		},
+	},
+	slots: /** @lends  sap.ui.webcomponents.main.MultiInput.prototype */ {
+		/**
+		 * Defines the component tokens.
+		 *
+		 * @type {sap.ui.webcomponents.main.IToken[]}
+		 * @slot
+		 * @public
+		 */
+		tokens: {
+			type: HTMLElement,
+		},
+	},
+	events: /** @lends  sap.ui.webcomponents.main.MultiInput.prototype */ {
+		/**
+		 * Fired when the value help icon is pressed
+		 * and F4 or ALT/OPTION + ARROW_UP/ARROW_DOWN keyboard keys are used.
+		 *
+		 * @event sap.ui.webcomponents.main.MultiInput#value-help-trigger
+		 * @public
+		 */
+		"value-help-trigger": {},
+
+		/**
+		 * Fired when a token is about to be deleted.
+		 *
+		 * @event sap.ui.webcomponents.main.MultiInput#token-delete
+		 * @param {HTMLElement} token deleted token.
+		 * @public
+		 */
+		"token-delete": {
+			detail: {
+				token: { type: HTMLElement },
+			},
+		},
+	},
+};
+
+/**
+ * @class
+ * <h3>Overview</h3>
+ * A <code>ui5-multi-input</code> field allows the user to enter multiple values, which are displayed as <code>ui5-token</code>.
+ *
+ * User can choose interaction for creating tokens.
+ * Fiori Guidelines say that user should create tokens when:
+ * <ul>
+ * <li>Type a value in the input and press enter or focus out the input field (<code>change</code> event is fired)
+ * <li>Select a value from the suggestion list</li> (<code>suggestion-item-select</code> event is fired)
+ * </ul>
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/MultiInput";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.MultiInput
+ * @extends Input
+ * @tagname ui5-multi-input
+ * @appenddocs Token
+ * @since 1.0.0-rc.9
+ * @public
+ */
+class MultiInput extends Input {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get render() {
+		return litRender;
+	}
+
+	static get template() {
+		return MultiInputTemplate;
+	}
+
+	static get styles() {
+		return [Input.styles, styles];
+	}
+
+	constructor() {
+		super();
+
+		// Prevent suggestions' opening.
+		this._skipOpenSuggestions = false;
+	}
+
+	valueHelpPress(event) {
+		this.closePopover();
+		this.fireEvent("value-help-trigger", {});
+	}
+
+	showMorePress(event) {
+		this.expandedTokenizer = false;
+		this.focus();
+	}
+
+	tokenDelete(event) {
+		this.fireEvent("token-delete", {
+			token: event.detail.ref,
+		});
+
+		this.focus();
+	}
+
+	valueHelpMouseDown(event) {
+		this.closePopover();
+		this.tokenizer.closeMorePopover();
+		this._valueHelpIconPressed = true;
+		event.target.focus();
+	}
+
+	_tokenizerFocusOut(event) {
+		if (!this.contains(event.relatedTarget)) {
+			this.tokenizer._tokens.forEach(token => { token.selected = false; });
+			this.tokenizer.scrollToStart();
+		}
+	}
+
+	valueHelpMouseUp(event) {
+		setTimeout(() => {
+			this._valueHelpIconPressed = false;
+		}, 0);
+	}
+
+	innerFocusIn() {
+		this.expandedTokenizer = true;
+	}
+
+	_onkeydown(event) {
+		super._onkeydown(event);
+
+		if (isLeft(event)) {
+			this._skipOpenSuggestions = true; // Prevent input focus when navigating through the tokens.
+
+			return this._handleLeft(event);
+		}
+
+		this._skipOpenSuggestions = false;
+		if (isBackSpace(event) && event.target.value === "") {
+			event.preventDefault();
+
+			this.tokenizer._focusLastToken();
+		}
+
+		if (isShow(event)) {
+			this.valueHelpPress();
+		}
+	}
+
+	_onTokenizerKeydown(event) {
+		if (isRight(event)) {
+			const lastTokenIndex = this.tokenizer._tokens.length - 1;
+
+			if (this.tokenizer._tokens[lastTokenIndex] === document.activeElement) {
+				setTimeout(() => {
+					this.focus();
+				}, 0);
+			}
+		}
+	}
+
+	_handleLeft() {
+		const cursorPosition = this.getDomRef().querySelector(`input`).selectionStart;
+
+		if (cursorPosition === 0) {
+			this.tokenizer._focusLastToken();
+		}
+	}
+
+	_onfocusout(event) {
+		super._onfocusout(event);
+		const relatedTarget = event.relatedTarget;
+		const insideDOM = this.contains(relatedTarget);
+		const insideShadowDom = this.shadowRoot.contains(relatedTarget);
+
+		if (!insideDOM && !insideShadowDom) {
+			this.expandedTokenizer = false;
+		}
+	}
+
+	/**
+	 * @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;
+		const nonEmptyValue = this.value !== "";
+
+		return parent && nonEmptyValue && !valueHelpPressed && !this._skipOpenSuggestions;
+	}
+
+	lastItemDeleted() {
+		setTimeout(() => {
+			this.focus();
+		}, 0);
+	}
+
+	get tokenizer() {
+		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,
+			Tokenizer,
+			Token,
+			Icon,
+		];
+	}
+}
+
+MultiInput.define();
+
+export default MultiInput;

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,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();