@ui5/webcomponents 0.0.0-037d08c67

package/dist/MultiComboBoxPopoverTemplate.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
+import multiSelectAll from "@ui5/webcomponents-icons/dist/multiselect-all.js";
+import ResponsivePopover from "./ResponsivePopover.js";
+import Button from "./Button.js";
+import Input from "./Input.js";
+import ToggleButton from "./ToggleButton.js";
+import SuggestionItem from "./SuggestionItem.js";
+import Icon from "./Icon.js";
+import List from "./List.js";
+import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
+import Popover from "./Popover.js";
+import CheckBox from "./CheckBox.js";
+import BusyIndicator from "./BusyIndicator.js";
+export default function MultiComboBoxPopoverTemplate() {
+    return (_jsxs(_Fragment, { children: [_jsxs(ResponsivePopover, { placement: "Bottom", horizontalAlign: "Start", class: this.classes.popover, id: this.responsivePopoverId, hideArrow: true, preventInitialFocus: true, style: this.styles.suggestionsPopover, "onui5-selection-change": this._listSelectionChange, onClose: this._afterClose, onBeforeOpen: this._beforeOpen, onBeforeClose: this._beforeClose, onOpen: this._afterOpen, onFocusOut: this._onPopoverFocusOut, accessibleName: this._popupLabel, open: this.open, opener: this, children: [this.loading &&
+                        _jsx(BusyIndicator, { active: true, class: "ui5-multi-combobox-busy" }), !this.loading && this._isPhone && _jsxs(_Fragment, { children: [_jsxs("div", { slot: "header", class: "ui5-responsive-popover-header", style: this.styles.popoverHeader, children: [_jsx("div", { class: "row", children: _jsx("span", { children: this._headerTitleText }) }), _jsxs("div", { class: "row", children: [_jsx(Input, { onInput: this._handleMobileInput, onKeyDown: this._onMobileInputKeydown, placeholder: this.placeholder, valueState: this._dialogInputValueState, showClearIcon: this.showClearIcon, noTypeahead: this.noTypeahead, children: this._filteredItems.map(item => (_jsx(SuggestionItem, { text: item.text, additionalText: item.additionalText }))) }), _jsx(ToggleButton, { slot: "header", class: "ui5-multi-combobox-toggle-button", icon: multiSelectAll, design: "Transparent", pressed: this._showAllItemsButtonPressed, disabled: this._getSelectedItems().length === 0, onClick: this.filterSelectedItems, accessibleName: this._showSelectedButtonAccessibleNameText })] })] }), "\t\t\t\t", this.hasValueStateMessage &&
+                                _jsxs("div", { class: this.classes.popoverValueState, style: this.styles.popoverValueStateMessage, children: [_jsx(Icon, { class: "ui5-input-value-state-message-icon", name: this._valueStateMessageIcon }), this.open && valueStateMessage.call(this)] }), selectAllWrapper.call(this)] }), !this.loading && !this._isPhone && _jsxs(_Fragment, { children: [this.hasValueStateMessage &&
+                                _jsxs("div", { slot: "header", onKeyDown: this._onListHeaderKeydown, class: this.classes.responsivePopoverHeaderValueState, style: this.styles.popoverValueStateMessage, children: [_jsx(Icon, { class: "ui5-input-value-state-message-icon", name: this._valueStateMessageIcon }), this.open && valueStateMessage.call(this)] }), selectAllWrapper.call(this)] }), !this.loading && this.filterSelected ?
+                        _jsx(List, { separators: "None", selectionMode: "Multiple", class: "ui5-multi-combobox-all-items-list", accessibleRole: "ListBox", children: this.selectedItems.map(item => _jsx("slot", { name: item._individualSlot })) })
+                        : !this.loading &&
+                            _jsx(List, { separators: "None", selectionMode: "Multiple", class: "ui5-multi-combobox-all-items-list", accessibleRole: "ListBox", onKeyDown: this._onItemKeydown, children: this._filteredItems.map(item => _jsx("slot", { name: item._individualSlot })) }), this._isPhone &&
+                        _jsxs("div", { slot: "footer", class: "ui5-responsive-popover-footer", children: [_jsx(Button, { design: "Emphasized", onClick: this.handleOK, children: this._dialogOkButton }), _jsx(Button, { class: "ui5-responsive-popover-close-btn", design: "Transparent", onClick: this.handleCancel, children: this._dialogCancelButton })] })] }), this.hasValueStateMessage &&
+                _jsx(Popover
+                // skipRegistryUpdate={true}
+                , { 
+                    // skipRegistryUpdate={true}
+                    preventInitialFocus: true, preventFocusRestore: true, hideArrow: true, class: "ui5-valuestatemessage-popover", placement: "Bottom", horizontalAlign: PopoverHorizontalAlign.Start, tabIndex: -1, open: this.valueStateOpen, opener: this, children: _jsxs("div", { slot: "header", class: this.classes.popoverValueState, style: this.styles.popoverHeader, children: [_jsx(Icon, { class: "ui5-input-value-state-message-icon", name: this._valueStateMessageIcon }), this.valueStateOpen && valueStateMessage.call(this)] }) })] }));
+}
+function valueStateMessage() {
+    return this.shouldDisplayDefaultValueStateMessage ? this.valueStateDefaultText : _jsx("slot", { name: "valueStateMessage" });
+}
+function selectAllWrapper() {
+    if (this.showSelectAll) {
+        return (_jsx("div", { class: "ui5-mcb-select-all-header", onKeyDown: this._onListHeaderKeydown, tabIndex: 0, children: _jsx(CheckBox, { disabled: this.readonly, checked: this._allSelected, class: "ui5-mcb-select-all-checkbox", text: this.selectAllCheckboxLabel, onChange: this._handleSelectAllCheckboxClick }) }));
+    }
+}
+//# sourceMappingURL=MultiComboBoxPopoverTemplate.js.map

package/dist/MultiComboBoxPopoverTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiComboBoxPopoverTemplate.js","sourceRoot":"","sources":["../src/MultiComboBoxPopoverTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import multiSelectAll from \"@ui5/webcomponents-icons/dist/multiselect-all.js\";\nimport type MultiComboBox from \"./MultiComboBox.js\";\nimport ResponsivePopover from \"./ResponsivePopover.js\";\nimport Button from \"./Button.js\";\nimport Input from \"./Input.js\";\nimport ToggleButton from \"./ToggleButton.js\";\nimport SuggestionItem from \"./SuggestionItem.js\";\nimport Icon from \"./Icon.js\";\nimport List from \"./List.js\";\nimport PopoverHorizontalAlign from \"./types/PopoverHorizontalAlign.js\";\nimport Popover from \"./Popover.js\";\nimport CheckBox from \"./CheckBox.js\";\nimport BusyIndicator from \"./BusyIndicator.js\";\n\nexport default function MultiComboBoxPopoverTemplate(this: MultiComboBox) {\n\treturn (<>\n\t\t<ResponsivePopover\n\t\t\tplacement=\"Bottom\"\n\t\t\thorizontalAlign=\"Start\"\n\t\t\tclass={this.classes.popover}\n\t\t\tid={this.responsivePopoverId}\n\t\t\thideArrow={true}\n\t\t\tpreventInitialFocus={true}\n\t\t\tstyle={this.styles.suggestionsPopover}\n\t\t\tonui5-selection-change={this._listSelectionChange}\n\t\t\tonClose={this._afterClose}\n\t\t\tonBeforeOpen={this._beforeOpen}\n\t\t\tonBeforeClose={this._beforeClose}\n\t\t\tonOpen={this._afterOpen}\n\t\t\tonFocusOut={this._onPopoverFocusOut}\n\t\t\taccessibleName={this._popupLabel}\n\t\t\topen={this.open}\n\t\t\topener={this}\n\t\t>\n\t\t\t{this.loading &&\n\t\t\t\t<BusyIndicator active={true} class=\"ui5-multi-combobox-busy\"/>\n\t\t\t}\n\n\t\t\t{!this.loading && this._isPhone && <>\n\t\t\t\t<div slot=\"header\" class=\"ui5-responsive-popover-header\" style={this.styles.popoverHeader}>\n\t\t\t\t\t<div class=\"row\">\n\t\t\t\t\t\t<span>{this._headerTitleText}</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"row\">\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tonInput={this._handleMobileInput}\n\t\t\t\t\t\t\tonKeyDown={this._onMobileInputKeydown}\n\t\t\t\t\t\t\tplaceholder={this.placeholder}\n\t\t\t\t\t\t\tvalueState={this._dialogInputValueState}\n\t\t\t\t\t\t\tshowClearIcon={this.showClearIcon}\n\t\t\t\t\t\t\tnoTypeahead={this.noTypeahead}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{this._filteredItems.map(item => (\n\t\t\t\t\t\t\t\t<SuggestionItem text={item.text} additionalText={item.additionalText}></SuggestionItem>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</Input>\n\t\t\t\t\t\t<ToggleButton\n\t\t\t\t\t\t\tslot=\"header\"\n\t\t\t\t\t\t\tclass=\"ui5-multi-combobox-toggle-button\"\n\t\t\t\t\t\t\ticon={multiSelectAll}\n\t\t\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\t\t\tpressed={this._showAllItemsButtonPressed}\n\t\t\t\t\t\t\tdisabled={this._getSelectedItems().length === 0}\n\t\t\t\t\t\t\tonClick={this.filterSelectedItems}\n\t\t\t\t\t\t\taccessibleName={this._showSelectedButtonAccessibleNameText}\n\t\t\t\t\t\t></ToggleButton>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\t\t\t\t{this.hasValueStateMessage &&\n\t\t\t\t\t<div class={this.classes.popoverValueState} style={this.styles.popoverValueStateMessage}>\n\t\t\t\t\t\t<Icon class=\"ui5-input-value-state-message-icon\" name={this._valueStateMessageIcon}></Icon>\n\t\t\t\t\t\t{this.open && valueStateMessage.call(this)}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\n\t\t\t\t{selectAllWrapper.call(this)}\n\t\t\t</>}\n\n\t\t\t{!this.loading && !this._isPhone && <>\n\t\t\t\t{this.hasValueStateMessage &&\n\t\t\t\t\t<div slot=\"header\" onKeyDown={this._onListHeaderKeydown} class={this.classes.responsivePopoverHeaderValueState} style={this.styles.popoverValueStateMessage}>\n\t\t\t\t\t\t<Icon class=\"ui5-input-value-state-message-icon\" name={this._valueStateMessageIcon}></Icon>\n\t\t\t\t\t\t{this.open && valueStateMessage.call(this)}\n\t\t\t\t\t</div>\n\t\t\t\t}\n\n\t\t\t\t{selectAllWrapper.call(this)}\n\t\t\t</>}\n\n\t\t\t{!this.loading && this.filterSelected ?\n\t\t\t\t<List separators=\"None\" selectionMode=\"Multiple\" class=\"ui5-multi-combobox-all-items-list\" accessibleRole=\"ListBox\">\n\t\t\t\t\t{this.selectedItems.map(item => <slot name={item._individualSlot}></slot>)}\n\t\t\t\t</List>\n\t\t\t\t: !this.loading &&\n\t\t\t\t<List separators=\"None\" selectionMode=\"Multiple\" class=\"ui5-multi-combobox-all-items-list\" accessibleRole=\"ListBox\" onKeyDown={this._onItemKeydown}>\n\t\t\t\t\t{this._filteredItems.map(item => <slot name={item._individualSlot}></slot>)}\n\t\t\t\t</List>\n\t\t\t}\n\n\t\t\t{this._isPhone &&\n\t\t\t\t<div slot=\"footer\" class=\"ui5-responsive-popover-footer\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdesign=\"Emphasized\"\n\t\t\t\t\t\tonClick={this.handleOK}\n\t\t\t\t\t>{this._dialogOkButton}</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclass=\"ui5-responsive-popover-close-btn\"\n\t\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\t\tonClick={this.handleCancel}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this._dialogCancelButton}\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</ResponsivePopover>\n\n\t\t{this.hasValueStateMessage &&\n\t\t\t<Popover\n\t\t\t\t// skipRegistryUpdate={true}\n\t\t\t\tpreventInitialFocus={true}\n\t\t\t\tpreventFocusRestore={true}\n\t\t\t\thideArrow={true}\n\t\t\t\tclass=\"ui5-valuestatemessage-popover\"\n\t\t\t\tplacement=\"Bottom\"\n\t\t\t\thorizontalAlign={PopoverHorizontalAlign.Start}\n\t\t\t\ttabIndex={-1}\n\t\t\t\topen={this.valueStateOpen}\n\t\t\t\topener={this}\n\t\t\t>\n\t\t\t\t<div slot=\"header\" class={this.classes.popoverValueState} style={this.styles.popoverHeader}>\n\t\t\t\t\t<Icon class=\"ui5-input-value-state-message-icon\" name={this._valueStateMessageIcon}></Icon>\n\t\t\t\t\t{this.valueStateOpen && valueStateMessage.call(this)}\n\t\t\t\t</div>\n\t\t\t</Popover>\n\t\t}\n\t</>);\n}\n\nfunction valueStateMessage(this: MultiComboBox) {\n\treturn this.shouldDisplayDefaultValueStateMessage ? this.valueStateDefaultText : <slot name=\"valueStateMessage\"></slot>;\n}\n\nfunction selectAllWrapper(this: MultiComboBox) {\n\tif (this.showSelectAll) {\n\t\treturn (\n\t\t\t<div class=\"ui5-mcb-select-all-header\" onKeyDown={this._onListHeaderKeydown} tabIndex={0}>\n\t\t\t\t<CheckBox\n\t\t\t\t\tdisabled={this.readonly}\n\t\t\t\t\tchecked={this._allSelected}\n\t\t\t\t\tclass=\"ui5-mcb-select-all-checkbox\"\n\t\t\t\t\ttext={this.selectAllCheckboxLabel}\n\t\t\t\t\tonChange={this._handleSelectAllCheckboxClick}\n\t\t\t\t></CheckBox>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}

package/dist/MultiComboBoxTemplate.d.ts

@@ -0,0 +1,2 @@
+import type MultiComboBox from "./MultiComboBox.js";
+export default function MultiComboBoxTemplate(this: MultiComboBox): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/MultiComboBoxTemplate.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
+import decline from "@ui5/webcomponents-icons/dist/decline.js";
+import MultiComboboxPopoverTemplate from "./MultiComboBoxPopoverTemplate.js";
+import Tokenizer from "./Tokenizer.js";
+import Token from "./Token.js";
+import Icon from "./Icon.js";
+export default function MultiComboBoxTemplate() {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { class: "ui5-multi-combobox-root ui5-input-focusable-element", children: [_jsx("span", { id: "ui5-multi-combobox-hiddenText-nMore", class: "ui5-hidden-text", children: this._tokensCountText }), this.hasValueState &&
+                        _jsx("span", { id: "ui5-multi-combobox-valueStateDesc", class: "ui5-hidden-text", children: this.ariaValueStateHiddenText }), this.linksInAriaValueStateHiddenText.length > 0 &&
+                        _jsx("span", { id: "hiddenText-value-state-link-shortcut", class: "ui5-hidden-text", children: this.getValueStateLinksShortcutsTextAcc }), _jsx(Tokenizer, { slot: "_beginContent", preventPopoverOpen: true, hidePopoverArrow: true, readonly: this.readonly, class: "ui5-multi-combobox-tokenizer", disabled: this.disabled, onShowMoreItemsPress: this._showFilteredItems, opener: this.morePopoverOpener, popoverMinWidth: this._inputWidth, onTokenDelete: this._tokenDelete, onBeforeMorePopoverOpen: this.handleBeforeTokenizerPopoverOpen, onFocusOut: this._tokenizerFocusOut, onFocusIn: this._tokenizerFocusIn, onClick: this._click, onPaste: this._handlePaste, onKeyDown: this._onTokenizerKeydown, expanded: this._tokenizerExpanded, open: this.tokenizerOpen, children: this.items.map((item, index) => {
+                            if (item.isGroupItem) {
+                                return item.items?.map((groupItem, groupItemIndex) => {
+                                    return groupItem.selected && _jsx(Token, { readonly: this.readonly, class: "ui5-multi-combobox-token", "data-ui5-id": groupItem._id, part: `token-${groupItemIndex}`, text: groupItem.text });
+                                });
+                            }
+                            return item.selected && _jsx(Token, { readonly: this.readonly, class: "ui5-multi-combobox-token", "data-ui5-id": item._id, part: `token-${index}`, text: item.text });
+                        }) }), _jsx("input", { id: "ui5-multi-combobox-input", value: this.value, "inner-input": true, placeholder: this._getPlaceholder, disabled: this.disabled, readonly: this.readonly, "value-state": this.valueState, onInput: this._inputLiveChange, onChange: this._inputChange, onKeyDown: this._onkeydown, onClick: this._click, onFocusIn: this.inputFocusIn, onFocusOut: this.inputFocusOut, onPaste: this._handlePaste, role: "combobox", "aria-haspopup": "dialog", "aria-expanded": this.open, "aria-autocomplete": "both", "aria-describedby": this.ariaDescribedByText, "aria-required": this.required, "aria-label": this.ariaLabelText, "aria-controls": this.responsivePopoverId, autocomplete: "off", "data-sap-focus-ref": true }), this._effectiveShowClearIcon &&
+                        _jsx("div", { onClick: this._clear, class: "ui5-input-clear-icon-wrapper inputIcon", tabIndex: -1, onMouseDown: this._iconMouseDown, children: _jsx(Icon, { tabIndex: -1, class: "ui5-input-clear-icon", name: decline, "accessible-name": this.clearIconAccessibleName }) }), this.icon &&
+                        _jsx("slot", { name: "icon" }), !this.readonly &&
+                        _jsx(Icon, { name: "slim-arrow-down", class: {
+                                "inputIcon": true,
+                                "inputIcon--pressed": this._iconPressed,
+                            }, slot: "icon", tabIndex: -1, onClick: this.togglePopoverByDropdownIcon, onMouseDown: this._onIconMousedown, onFocusIn: this._forwardFocusToInner, 
+                            // pressed={this.open}
+                            accessibleName: this._iconAccessibleNameText })] }), MultiComboboxPopoverTemplate.call(this)] }));
+}
+//# sourceMappingURL=MultiComboBoxTemplate.js.map

package/dist/MultiComboBoxTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiComboBoxTemplate.js","sourceRoot":"","sources":["../src/MultiComboBoxTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import decline from \"@ui5/webcomponents-icons/dist/decline.js\";\nimport MultiComboboxPopoverTemplate from \"./MultiComboBoxPopoverTemplate.js\";\nimport type MultiComboBox from \"./MultiComboBox.js\";\nimport Tokenizer from \"./Tokenizer.js\";\nimport Token from \"./Token.js\";\nimport Icon from \"./Icon.js\";\n\nexport default function MultiComboBoxTemplate(this: MultiComboBox) {\n\treturn (<>\n\t\t<div class=\"ui5-multi-combobox-root ui5-input-focusable-element\">\n\t\t\t<span id=\"ui5-multi-combobox-hiddenText-nMore\" class=\"ui5-hidden-text\">{this._tokensCountText}</span>\n\n\t\t\t{this.hasValueState &&\n\t\t\t\t<span id=\"ui5-multi-combobox-valueStateDesc\" class=\"ui5-hidden-text\">{this.ariaValueStateHiddenText}</span>\n\t\t\t}\n\n\t\t\t{this.linksInAriaValueStateHiddenText.length > 0 &&\n\t\t\t\t<span id=\"hiddenText-value-state-link-shortcut\" class=\"ui5-hidden-text\">{this.getValueStateLinksShortcutsTextAcc}</span>\n\t\t\t}\n\n\t\t\t<Tokenizer\n\t\t\t\tslot=\"_beginContent\"\n\t\t\t\tpreventPopoverOpen={true}\n\t\t\t\thidePopoverArrow={true}\n\t\t\t\treadonly={this.readonly}\n\t\t\t\tclass=\"ui5-multi-combobox-tokenizer\"\n\t\t\t\tdisabled={this.disabled}\n\t\t\t\tonShowMoreItemsPress={this._showFilteredItems}\n\t\t\t\topener={this.morePopoverOpener}\n\t\t\t\tpopoverMinWidth={this._inputWidth}\n\t\t\t\tonTokenDelete={this._tokenDelete}\n\t\t\t\tonBeforeMorePopoverOpen={this.handleBeforeTokenizerPopoverOpen}\n\t\t\t\tonFocusOut={this._tokenizerFocusOut}\n\t\t\t\tonFocusIn={this._tokenizerFocusIn}\n\t\t\t\tonClick={this._click}\n\t\t\t\tonPaste={this._handlePaste}\n\t\t\t\tonKeyDown={this._onTokenizerKeydown}\n\t\t\t\texpanded={this._tokenizerExpanded}\n\t\t\t\topen={this.tokenizerOpen}\n\t\t\t>\n\t\t\t\t{this.items.map((item, index) => {\n\t\t\t\t\tif (item.isGroupItem) {\n\t\t\t\t\t\treturn item.items?.map((groupItem, groupItemIndex) => {\n\t\t\t\t\t\t\treturn groupItem.selected && <Token\n\t\t\t\t\t\t\t\treadonly={this.readonly}\n\t\t\t\t\t\t\t\tclass=\"ui5-multi-combobox-token\"\n\t\t\t\t\t\t\t\tdata-ui5-id={groupItem._id}\n\t\t\t\t\t\t\t\tpart={`token-${groupItemIndex}`}\n\t\t\t\t\t\t\t\ttext={groupItem.text}\n\t\t\t\t\t\t\t/>;\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\n\t\t\t\t\treturn item.selected && <Token\n\t\t\t\t\t\treadonly={this.readonly}\n\t\t\t\t\t\tclass=\"ui5-multi-combobox-token\"\n\t\t\t\t\t\tdata-ui5-id={item._id}\n\t\t\t\t\t\tpart={`token-${index}`}\n\t\t\t\t\t\ttext={item.text}\n\t\t\t\t\t/>;\n\t\t\t\t})}\n\t\t\t</Tokenizer>\n\n\t\t\t<input\n\t\t\t\tid=\"ui5-multi-combobox-input\"\n\t\t\t\tvalue={this.value}\n\t\t\t\tinner-input\n\t\t\t\tplaceholder={this._getPlaceholder}\n\t\t\t\tdisabled={this.disabled}\n\t\t\t\treadonly={this.readonly}\n\t\t\t\tvalue-state={this.valueState}\n\t\t\t\tonInput={this._inputLiveChange}\n\t\t\t\tonChange={this._inputChange}\n\t\t\t\tonKeyDown={this._onkeydown}\n\t\t\t\tonClick={this._click}\n\t\t\t\tonFocusIn={this.inputFocusIn}\n\t\t\t\tonFocusOut={this.inputFocusOut}\n\t\t\t\tonPaste={this._handlePaste}\n\t\t\t\trole=\"combobox\"\n\t\t\t\taria-haspopup=\"dialog\"\n\t\t\t\taria-expanded={this.open}\n\t\t\t\taria-autocomplete=\"both\"\n\t\t\t\taria-describedby={this.ariaDescribedByText}\n\t\t\t\taria-required={this.required}\n\t\t\t\taria-label={this.ariaLabelText}\n\t\t\t\taria-controls={this.responsivePopoverId}\n\t\t\t\tautocomplete=\"off\"\n\t\t\t\tdata-sap-focus-ref\n\t\t\t/>\n\n\t\t\t{this._effectiveShowClearIcon &&\n\t\t\t\t<div\n\t\t\t\t\tonClick={this._clear}\n\t\t\t\t\tclass=\"ui5-input-clear-icon-wrapper inputIcon\"\n\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\tonMouseDown={this._iconMouseDown}\n\t\t\t\t>\n\t\t\t\t\t<Icon tabIndex={-1} class=\"ui5-input-clear-icon\" name={decline} accessible-name={this.clearIconAccessibleName}></Icon>\n\t\t\t\t</div>\n\t\t\t}\n\n\t\t\t{this.icon &&\n\t\t\t\t<slot name=\"icon\"></slot>\n\t\t\t}\n\n\t\t\t{!this.readonly &&\n\t\t\t\t<Icon name=\"slim-arrow-down\"\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t\"inputIcon\": true,\n\t\t\t\t\t\t\"inputIcon--pressed\": this._iconPressed,\n\t\t\t\t\t}}\n\t\t\t\t\tslot=\"icon\"\n\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\tonClick={this.togglePopoverByDropdownIcon}\n\t\t\t\t\tonMouseDown={this._onIconMousedown}\n\t\t\t\t\tonFocusIn={this._forwardFocusToInner}\n\t\t\t\t\t// pressed={this.open}\n\t\t\t\t\taccessibleName={this._iconAccessibleNameText}\n\t\t\t\t></Icon>\n\t\t\t}\n\t\t</div>\n\n\t\t{MultiComboboxPopoverTemplate.call(this)}\n\t</>);\n}\n"]}

package/dist/MultiInput.d.ts

@@ -0,0 +1,150 @@
+import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
+import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
+import Input from "./Input.js";
+import type Token from "./Token.js";
+import type Tokenizer from "./Tokenizer.js";
+import type { TokenizerTokenDeleteEventDetail } from "./Tokenizer.js";
+import type { InputSelectionChangeEventDetail as MultiInputSelectionChangeEventDetail } from "./Input.js";
+import type { Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+interface IToken extends UI5Element, ITabbable {
+    text?: string;
+    readonly: boolean;
+    selected: boolean;
+    isTruncatable: boolean;
+}
+type MultiInputTokenDeleteEventDetail = {
+    tokens: Token[];
+};
+/**
+ * @class
+ * ### Overview
+ * A `ui5-multi-input` field allows the user to enter multiple values, which are displayed as `ui5-token`.
+ *
+ * User can choose interaction for creating tokens.
+ * Fiori Guidelines say that user should create tokens when:
+ *
+ * - Type a value in the input and press enter or focus out the input field (`change` event is fired)
+ * - Move between suggestion items (`selection-change` event is fired)
+ * - Clicking on a suggestion item (`selection-change` event is fired if the clicked item is different than the current value. Also `change` event is fired )
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/MultiInput.js";`
+ * @constructor
+ * @extends Input
+ * @since 1.0.0-rc.9
+ * @public
+ */
+declare class MultiInput extends Input implements IFormInputElement {
+    eventDetails: Input["eventDetails"] & {
+        "value-help-trigger": void;
+        "token-delete": MultiInputTokenDeleteEventDetail;
+    };
+    /**
+     * Determines whether a value help icon will be visualized in the end of the input.
+     * Pressing the icon will fire `value-help-trigger` event.
+     * @default false
+     * @public
+     */
+    showValueHelpIcon: boolean;
+    /**
+     * Indicates whether the tokenizer has tokens
+     * @default false
+     * @private
+     */
+    tokenizerAvailable: boolean;
+    /**
+     * Determines the name by which the component will be identified upon submission in an HTML form.
+     *
+     * **Note:** This property is only applicable within the context of an HTML Form element.
+     * **Note:** When the component is used inside a form element,
+     * the value is sent as the first element in the form data, even if it's empty.
+     * @default undefined
+     * @public
+     */
+    name?: string;
+    /**
+     * Indicates whether to show tokens in suggestions popover
+     * @default false
+     * @private
+     */
+    _showTokensInSuggestions: boolean;
+    /**
+     * Tracks whether user has explicitly toggled the show tokens state
+     * @default false
+     * @private
+     */
+    _userToggledShowTokens: boolean;
+    /**
+     * Defines the component tokens.
+     * @public
+     */
+    tokens: Slot<IToken>;
+    _skipOpenSuggestions: boolean;
+    _valueHelpIconPressed: boolean;
+    get formValidityMessage(): string;
+    get formValidity(): ValidityStateFlags;
+    get formFormattedValue(): FormData | string | null;
+    constructor();
+    valueHelpPress(): void;
+    tokenDelete(e: CustomEvent<TokenizerTokenDeleteEventDetail>): void;
+    valueHelpMouseDown(e: MouseEvent): void;
+    _tokenizerFocusOut(e: FocusEvent): void;
+    valueHelpMouseUp(): void;
+    innerFocusIn(): void;
+    _showMoreItemsPress(): void;
+    _onkeydown(e: KeyboardEvent): void;
+    _onTokenizerKeydown(e: KeyboardEvent): void;
+    _handleLeft(e: KeyboardEvent): void;
+    _handleBackspace(e: KeyboardEvent): void;
+    _focusFirstToken(e: KeyboardEvent): void;
+    _onfocusout(e: FocusEvent): void;
+    /**
+     * @override
+     */
+    _onfocusin(e: FocusEvent): void;
+    onBeforeRendering(): void;
+    /**
+     * Override the _handlePickerAfterOpen method to handle token display based on device type
+     */
+    _handlePickerAfterOpen(): void;
+    onAfterRendering(): void;
+    get iconsCount(): number;
+    get tokenizer(): Tokenizer;
+    get tokenizerExpanded(): boolean;
+    get _tokensCountText(): string;
+    get _valueHelpText(): string;
+    get _filterButtonAccessibleName(): string;
+    get _tokensCountTextId(): string;
+    get _valueHelpTextId(): "" | "hiddenText-value-help";
+    /**
+     * Returns the placeholder value when there are no tokens.
+     * @protected
+     */
+    get _placeholder(): string | undefined;
+    get accInfo(): {
+        ariaRoledescription: string;
+        ariaDescribedBy: string;
+        ariaInvalid: boolean | undefined;
+        ariaHasPopup: import("@ui5/webcomponents-base/dist/types.js").AriaHasPopup | undefined;
+        ariaAutoComplete: "list" | "none" | "inline" | "both" | undefined;
+        role: import("@ui5/webcomponents-base/dist/thirdparty/preact/jsx.js").JSXInternal.AriaRole | undefined;
+        ariaControls: string | undefined;
+        ariaExpanded: boolean | undefined;
+        ariaDescription: string;
+        accessibleDescription: string | undefined;
+        ariaLabel: string | undefined;
+    };
+    get valueHelpLabel(): string;
+    get ariaRoleDescription(): string;
+    get morePopoverOpener(): HTMLElement;
+    get shouldDisplayOnlyValueStateMessage(): boolean;
+    /**
+     * Computes the effective state for showing tokens in suggestions.
+     * Returns false (show suggestions) by default, true only when explicitly set.
+     */
+    get _effectiveShowTokensInSuggestions(): boolean;
+}
+export default MultiInput;
+export type { IToken, MultiInputTokenDeleteEventDetail, MultiInputSelectionChangeEventDetail, };

package/dist/MultiInput.js

@@ -0,0 +1,368 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var MultiInput_1;
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import { isShow, isBackSpace, isLeft, isRight, isRightCtrl, isHome, isEnd, isDown, } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+import { MULTIINPUT_ROLEDESCRIPTION_TEXT, MULTIINPUT_VALUE_HELP_LABEL, MULTIINPUT_VALUE_HELP, FORM_MIXED_TEXTFIELD_REQUIRED, MULTIINPUT_FILTER_BUTTON_LABEL, } from "./generated/i18n/i18n-defaults.js";
+import Input from "./Input.js";
+import MultiInputTemplate from "./MultiInputTemplate.js";
+import styles from "./generated/themes/MultiInput.css.js";
+import { getTokensCountText } from "./Tokenizer.js";
+/**
+ * @class
+ * ### Overview
+ * A `ui5-multi-input` field allows the user to enter multiple values, which are displayed as `ui5-token`.
+ *
+ * User can choose interaction for creating tokens.
+ * Fiori Guidelines say that user should create tokens when:
+ *
+ * - Type a value in the input and press enter or focus out the input field (`change` event is fired)
+ * - Move between suggestion items (`selection-change` event is fired)
+ * - Clicking on a suggestion item (`selection-change` event is fired if the clicked item is different than the current value. Also `change` event is fired )
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/MultiInput.js";`
+ * @constructor
+ * @extends Input
+ * @since 1.0.0-rc.9
+ * @public
+ */
+let MultiInput = MultiInput_1 = class MultiInput extends Input {
+    get formValidityMessage() {
+        return MultiInput_1.i18nBundle.getText(FORM_MIXED_TEXTFIELD_REQUIRED);
+    }
+    get formValidity() {
+        const tokens = (this.tokens || []);
+        return { valueMissing: this.required && !this.value && !tokens.length };
+    }
+    get formFormattedValue() {
+        const tokens = (this.tokens || []);
+        if (tokens.length && this.name) {
+            const formData = new FormData();
+            formData.append(this.name, this.value);
+            for (let i = 0; i < tokens.length; i++) {
+                formData.append(this.name, (tokens[i].text || ""));
+            }
+            return formData;
+        }
+        return this.value;
+    }
+    constructor() {
+        super();
+        /**
+         * Determines whether a value help icon will be visualized in the end of the input.
+         * Pressing the icon will fire `value-help-trigger` event.
+         * @default false
+         * @public
+         */
+        this.showValueHelpIcon = false;
+        /**
+         * Indicates whether the tokenizer has tokens
+         * @default false
+         * @private
+         */
+        this.tokenizerAvailable = false;
+        /**
+         * Indicates whether to show tokens in suggestions popover
+         * @default false
+         * @private
+         */
+        this._showTokensInSuggestions = false;
+        /**
+         * Tracks whether user has explicitly toggled the show tokens state
+         * @default false
+         * @private
+         */
+        this._userToggledShowTokens = false;
+        // Prevent suggestions' opening.
+        this._skipOpenSuggestions = false;
+        this._valueHelpIconPressed = false;
+    }
+    valueHelpPress() {
+        this.closeValueStatePopover();
+        this.fireDecoratorEvent("value-help-trigger");
+    }
+    tokenDelete(e) {
+        const deletedTokens = e.detail.tokens;
+        const selectedTokens = this.tokens.filter(token => token.selected);
+        const shouldFocusInput = this.tokens.length - 1 === 0 || this.tokens.length === selectedTokens.length;
+        if (this._readonly) {
+            return;
+        }
+        if (deletedTokens) {
+            this.fireDecoratorEvent("token-delete", { tokens: deletedTokens });
+            if (shouldFocusInput) {
+                this.focus();
+            }
+        }
+    }
+    valueHelpMouseDown(e) {
+        const target = e.target;
+        this.closeValueStatePopover();
+        this.tokenizer.open = false;
+        this._valueHelpIconPressed = true;
+        target.focus();
+    }
+    _tokenizerFocusOut(e) {
+        if (!this.contains(e.relatedTarget) && !this.shadowRoot.contains(e.relatedTarget)) {
+            this.tokenizer._tokens.forEach(token => { token.selected = false; });
+        }
+    }
+    valueHelpMouseUp() {
+        setTimeout(() => {
+            this._valueHelpIconPressed = false;
+        }, 0);
+    }
+    innerFocusIn() {
+        this.focused = true;
+        this.tokens.forEach(token => {
+            token.selected = false;
+        });
+    }
+    _showMoreItemsPress() {
+        this.tokenizer._scrollToEndOnExpand = true;
+    }
+    _onkeydown(e) {
+        !this._isComposing && super._onkeydown(e);
+        const target = e.target;
+        const isHomeInBeginning = isHome(e) && target.selectionStart === 0;
+        if (isHomeInBeginning) {
+            this._skipOpenSuggestions = true; // Prevent input focus when navigating through the tokens
+            return this._focusFirstToken(e);
+        }
+        if (isLeft(e)) {
+            this._skipOpenSuggestions = true;
+            return this._handleLeft(e);
+        }
+        if (isBackSpace(e)) {
+            this._skipOpenSuggestions = true;
+            return this._handleBackspace(e);
+        }
+        this._skipOpenSuggestions = false;
+        if (isShow(e)) {
+            this.valueHelpPress();
+        }
+    }
+    _onTokenizerKeydown(e) {
+        const rightCtrl = isRightCtrl(e);
+        if (isRight(e) || isDown(e) || isEnd(e) || rightCtrl) {
+            e.preventDefault();
+            const lastTokenIndex = this.tokens.length - 1;
+            if (e.target === this.tokens[lastTokenIndex] && this.tokens[lastTokenIndex] === document.activeElement) {
+                setTimeout(() => {
+                    this.focus();
+                }, 0);
+            }
+        }
+    }
+    _handleLeft(e) {
+        const cursorPosition = this.getDomRef().querySelector(`input`).selectionStart;
+        const tokens = this.tokens;
+        const lastToken = tokens.length && tokens[tokens.length - 1];
+        // selectionStart property applies only to inputs of types text, search, URL, tel, and password
+        if (((cursorPosition === null && !this.value) || cursorPosition === 0) && lastToken) {
+            e.preventDefault();
+            lastToken.focus();
+            this.tokenizer._itemNav.setCurrentItem(lastToken);
+        }
+    }
+    _handleBackspace(e) {
+        const cursorPosition = this.getDomRef().querySelector(`input`).selectionStart;
+        const selectionEnd = this.getDomRef().querySelector(`input`).selectionEnd;
+        const isValueSelected = cursorPosition === 0 && selectionEnd === this.value.length;
+        const tokens = this.tokens;
+        const lastToken = tokens.length && tokens[tokens.length - 1];
+        // selectionStart property applies only to inputs of types text, search, URL, tel, and password
+        if ((!this.value || (this.value && cursorPosition === 0 && !isValueSelected)) && lastToken) {
+            e.preventDefault();
+            lastToken.focus();
+            this.tokenizer._itemNav.setCurrentItem(lastToken);
+        }
+    }
+    _focusFirstToken(e) {
+        const tokens = this.tokens;
+        const firstToken = tokens.length && tokens[0];
+        if (firstToken) {
+            e.preventDefault();
+            firstToken.focus();
+            this.tokenizer._itemNav.setCurrentItem(firstToken);
+        }
+    }
+    _onfocusout(e) {
+        super._onfocusout(e);
+        const relatedTarget = e.relatedTarget;
+        const insideDOM = this.contains(relatedTarget);
+        const insideShadowDom = this.shadowRoot.contains(relatedTarget);
+        if (!insideDOM && !insideShadowDom) {
+            this.tokenizer.expanded = false;
+        }
+        if (this.contains(relatedTarget) && relatedTarget.hasAttribute("ui5-token")) {
+            this.focused = false;
+        }
+    }
+    /**
+     * @override
+     */
+    _onfocusin(e) {
+        const inputDomRef = this.getInputDOMRef();
+        if (e.target === inputDomRef) {
+            super._onfocusin(e);
+        }
+    }
+    onBeforeRendering() {
+        super.onBeforeRendering();
+        this.style.setProperty("--_ui5-input-icons-count", `${this.iconsCount}`);
+        this.tokenizerAvailable = this.tokens && this.tokens.length > 0;
+        if (this.tokenizer) {
+            this.tokenizer.readonly = this.readonly;
+        }
+    }
+    /**
+     * Override the _handlePickerAfterOpen method to handle token display based on device type
+     */
+    _handlePickerAfterOpen() {
+        if (this.tokens.length > 0) {
+            // On mobile: show tokens by default (for filter dialog feature)
+            // On desktop: keep showing suggestions (default behavior)
+            if (isPhone()) {
+                this._showTokensInSuggestions = true;
+            }
+            this._userToggledShowTokens = false;
+            // Expand tokenizer to show all tokens and prevent cut-off
+            this.tokenizer._scrollToEndOnExpand = true;
+            this.tokenizer.expanded = true;
+        }
+        super._handlePickerAfterOpen();
+    }
+    onAfterRendering() {
+        super.onAfterRendering();
+        this.tokenizer.preventInitialFocus = true;
+    }
+    get iconsCount() {
+        return super.iconsCount + (this.showValueHelpIcon ? 1 : 0);
+    }
+    get tokenizer() {
+        return this.shadowRoot.querySelector("[ui5-tokenizer]");
+    }
+    get tokenizerExpanded() {
+        return this.tokenizer && this.tokenizer.expanded;
+    }
+    get _tokensCountText() {
+        return getTokensCountText(this.tokens.length);
+    }
+    get _valueHelpText() {
+        return MultiInput_1.i18nBundle.getText(MULTIINPUT_VALUE_HELP);
+    }
+    get _filterButtonAccessibleName() {
+        return MultiInput_1.i18nBundle.getText(MULTIINPUT_FILTER_BUTTON_LABEL);
+    }
+    get _tokensCountTextId() {
+        return `hiddenText-nMore`;
+    }
+    get _valueHelpTextId() {
+        return this.showValueHelpIcon ? `hiddenText-value-help` : "";
+    }
+    /**
+     * Returns the placeholder value when there are no tokens.
+     * @protected
+     */
+    get _placeholder() {
+        if (this.tokens.length) {
+            return "";
+        }
+        return this.placeholder;
+    }
+    get accInfo() {
+        const ariaDescribedBy = `${this._tokensCountTextId} ${this.suggestionsTextId} ${this.valueStateTextId} ${this._valueStateLinksShortcutsTextAccId} ${this._valueHelpTextId}`.trim();
+        return {
+            ...super.accInfo,
+            "ariaRoledescription": this.ariaRoleDescription,
+            "ariaDescribedBy": ariaDescribedBy,
+        };
+    }
+    get valueHelpLabel() {
+        return MultiInput_1.i18nBundle.getText(MULTIINPUT_VALUE_HELP_LABEL);
+    }
+    get ariaRoleDescription() {
+        return MultiInput_1.i18nBundle.getText(MULTIINPUT_ROLEDESCRIPTION_TEXT);
+    }
+    get morePopoverOpener() {
+        if (this.tokens.length === 1 && this.tokens[0].isTruncatable) {
+            return this.tokens[0];
+        }
+        return this;
+    }
+    get shouldDisplayOnlyValueStateMessage() {
+        return this.hasValueStateMessage && !this.readonly && !this.open && this.focused && !this.tokenizer.open;
+    }
+    /**
+     * Computes the effective state for showing tokens in suggestions.
+     * Returns false (show suggestions) by default, true only when explicitly set.
+     */
+    get _effectiveShowTokensInSuggestions() {
+        // If no tokens exist, always show suggestions
+        if (this.tokens.length === 0) {
+            return false;
+        }
+        // Return the current state (will be true on mobile after picker opens, false otherwise)
+        return this._showTokensInSuggestions;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], MultiInput.prototype, "showValueHelpIcon", void 0);
+__decorate([
+    property({ type: Boolean })
+], MultiInput.prototype, "tokenizerAvailable", void 0);
+__decorate([
+    property()
+], MultiInput.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean })
+], MultiInput.prototype, "_showTokensInSuggestions", void 0);
+__decorate([
+    property({ type: Boolean })
+], MultiInput.prototype, "_userToggledShowTokens", void 0);
+__decorate([
+    slot({ type: HTMLElement, individualSlots: true })
+], MultiInput.prototype, "tokens", void 0);
+MultiInput = MultiInput_1 = __decorate([
+    customElement({
+        tag: "ui5-multi-input",
+        renderer: jsxRenderer,
+        formAssociated: true,
+        template: MultiInputTemplate,
+        styles: [Input.styles, styles],
+    })
+    /**
+     * Fired when the value help icon is pressed
+     * and F4 or ALT/OPTION + ARROW_UP/ARROW_DOWN keyboard keys are used.
+     * @public
+     */
+    ,
+    event("value-help-trigger", {
+        bubbles: true,
+    })
+    /**
+     * Fired when tokens are being deleted.
+     * @param {Array} tokens An array containing the deleted tokens.
+     * @public
+     */
+    ,
+    event("token-delete", {
+        bubbles: true,
+    })
+], MultiInput);
+MultiInput.define();
+export default MultiInput;
+//# sourceMappingURL=MultiInput.js.map