@ui5/webcomponents 1.0.0-rc.8 → 1.0.2

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,27 +1,28 @@
 <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
-	content-only-on-desktop
 	@ui5-selection-change={{_listSelectionChange}}
-	@ui5-after-close={{_toggleIcon}}
-	@ui5-after-open={{_toggleIcon}}
+	@ui5-after-close={{_afterClosePicker}}
+	@ui5-before-open={{_beforeOpen}}
+	@ui5-after-open={{_afterOpenPicker}}
 >
-	<div slot="header" class="ui5-responsive-popover-header">
-		<div class="row">
-			<span>{{_headerTitleText}}</span>
-			<ui5-button
-				class="ui5-responsive-popover-close-btn"
-				icon="decline"
-				design="Transparent"
-				@click="{{togglePopover}}"
-			>
-			</ui5-button>
-		</div>
-		<div class="row">
-			<div
+	{{#if _isPhone}}
+		<div slot="header" class="ui5-responsive-popover-header" style="{{styles.popoverHeader}}">
+			<div class="row">
+				<span>{{_headerTitleText}}</span>
+				<ui5-button
+					class="ui5-responsive-popover-close-btn"
+					icon="decline"
+					design="Transparent"
+					@click="{{handleCancel}}"
+				>
+				</ui5-button>
+			</div>
+			<div class="row">
+				<div
 					slot="header"
 					class="input-root-phone"
 					value-state="{{valueState}}"
@@ -30,36 +31,103 @@
 						.value="{{value}}"
 						inner-input
 						placeholder="{{placeholder}}"
-						?required={{required}}
 						value-state="{{valueState}}"
 						@input="{{_inputLiveChange}}"
 						@change={{_inputChange}}
 						aria-autocomplete="both"
 						aria-labelledby="{{_id}}-hiddenText-nMore"
 						aria-describedby="{{_id}}-valueStateDesc"
-					/>
+						/>
+					</div>
+					<ui5-toggle-button
+						slot="header"
+						class="ui5-multi-combobox-toggle-button"
+						icon="multiselect-all"
+						design="Transparent"
+						?pressed={{_showAllItemsButtonPressed}}
+						@click="{{filterSelectedItems}}"
+					></ui5-toggle-button>
 				</div>
-				<ui5-togglebutton
-					slot="header"
-					class="ui5-multi-combobox-toggle-button"
-					icon="multiselect-all"
-					design="Transparent"
-					?pressed={{filterSelected}}
-					@click="{{filterSelectedItems}}"
-				></ui5-togglebutton>
+			{{#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}}
+			</div>
+		</div>
+	{{/if}}
+
+	{{#unless _isPhone}}
+		{{#if hasValueStateMessage}}
+			<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}}
+
+	{{#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="{{handleOK}}"
+			>{{_dialogOkButton}}</ui5-button>
+		</div>
+	{{/if}}
+</ui5-responsive-popover>
+
+{{#if hasValueStateMessage}}
+	<ui5-popover
+		skip-registry-update
+		_disable-initial-focus
+		prevent-focus-restore
+		no-padding
+		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>
-	</div>
+	</ui5-popover>
+{{/if}}
 
-	<ui5-list separators="None" mode="MultiSelect" class="ui5-multi-combobox-all-items-list">
-		{{#each _filteredItems}}
-				<ui5-li type="Active" ?selected={{this.selected}} data-ui5-token-id="{{this._id}}">{{this.text}}</ui5-li>
+{{#*inline "valueStateMessage"}}
+	{{#if shouldDisplayDefaultValueStateMessage}}
+		{{valueStateText}}
+	{{else}}
+		{{#each valueStateMessageText}}
+			{{this}}
 		{{/each}}
-	</ui5-list>
+	{{/if}}
+{{/inline}}
 
-	<div slot="footer" class="ui5-responsive-popover-footer">
-		<ui5-button
-			design="Transparent"
-			@click="{{togglePopover}}"
-		>OK</ui5-button>
-	</div>
-</ui5-responsive-popover>
+{{#*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

@@ -0,0 +1,41 @@
+{{>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}}
+		.popoverMinWidth={{_inputWidth}}
+		.valueState={{valueState}}
+		?expanded="{{expandedTokenizer}}"
+		show-more
+		@keydown="{{_onTokenizerKeydown}}"
+		@show-more-items-press={{showMorePress}}
+		@token-delete={{tokenDelete}}
+		@focusout="{{_tokenizerFocusOut}}"
+	>
+		<slot name="tokens"></slot>
+		<div slot="valueStateMessage">
+			{{#if shouldDisplayDefaultValueStateMessage}}
+				{{valueStateText}}
+			{{else}}
+				{{#each valueStateMessageText}}
+					{{this}}
+				{{/each}}
+			{{/if}}
+		</div>
+	</ui5-tokenizer>
+{{/inline}}
+
+
+{{#*inline "postContent"}}
+	{{#if showValueHelpIcon}}
+		<ui5-icon
+			@click={{valueHelpPress}}
+			@mousedown={{valueHelpMouseDown}}
+			@mouseup={{valueHelpMouseUp}}
+			input-icon
+			name="value-help"
+		></ui5-icon>
+	{{/if}}
+{{/inline}}

package/src/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/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();