@ui5/webcomponents 0.0.0-fca1107e7 → 0.0.0-fd426fe8a

package/dist/MultiComboBoxItem.js

@@ -4,29 +4,78 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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 MultiComboBoxItem_1;
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import { property, eventStrict as event, } from "@ui5/webcomponents-base/dist/decorators.js";
 import ComboBoxItem from "./ComboBoxItem.js";
+import CheckBox from "./CheckBox.js";
+import { ARIA_LABEL_LIST_ITEM_CHECKBOX, } from "./generated/i18n/i18n-defaults.js";
+import styles from "./generated/themes/MultiComboBoxItem.css.js";
+import MultiComboBoxItemTemplate from "./MultiComboBoxItemTemplate.js";
 /**
  * @class
  * The `ui5-mcb-item` represents the item for a `ui5-multi-combobox`.
  * @constructor
  * @extends ComboBoxItem
- * @abstract
  * @implements {IMultiComboBoxItem}
  * @public
  */
-let MultiComboBoxItem = class MultiComboBoxItem extends ComboBoxItem {
+let MultiComboBoxItem = MultiComboBoxItem_1 = class MultiComboBoxItem extends ComboBoxItem {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines whether the item is filtered
+         * @private
+         */
+        this._isVisible = false;
+        this._readonly = false;
+    }
     get isMultiComboBoxItem() {
         return true;
     }
+    _onclick(e) {
+        if (e.target?.hasAttribute("ui5-checkbox")) {
+            return this.fireDecoratorEvent("selection-requested", { item: this, selected: e.target.checked, selectionComponentPressed: true });
+        }
+        super._onclick(e);
+    }
+    get _accessibleName() {
+        return MultiComboBoxItem_1.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_CHECKBOX);
+    }
+    get checkBoxAccInfo() {
+        return {
+            role: "presentation",
+        };
+    }
 };
 __decorate([
     property({ type: Boolean })
 ], MultiComboBoxItem.prototype, "selected", void 0);
-MultiComboBoxItem = __decorate([
-    customElement("ui5-mcb-item")
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], MultiComboBoxItem.prototype, "_isVisible", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], MultiComboBoxItem.prototype, "_readonly", void 0);
+__decorate([
+    i18n("@ui5/webcomponents")
+], MultiComboBoxItem, "i18nBundle", void 0);
+MultiComboBoxItem = MultiComboBoxItem_1 = __decorate([
+    customElement({
+        tag: "ui5-mcb-item",
+        template: MultiComboBoxItemTemplate,
+        styles: [ComboBoxItem.styles, styles],
+        dependencies: [...ComboBoxItem.dependencies, CheckBox],
+    }),
+    event("selection-requested", {
+        bubbles: true,
+    })
 ], MultiComboBoxItem);
+const isInstanceOfMultiComboBoxItem = (object) => {
+    return "isMultiComboBoxItem" in object;
+};
 MultiComboBoxItem.define();
 export default MultiComboBoxItem;
+export { isInstanceOfMultiComboBoxItem };
 //# sourceMappingURL=MultiComboBoxItem.js.map

package/dist/MultiComboBoxItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiComboBoxItem.js","sourceRoot":"","sources":["../src/MultiComboBoxItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,YAAY,MAAM,mBAAmB,CAAC;AAG7C;;;;;;;;GAQG;AAEH,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,YAAY;IAS3C,IAAI,mBAAmB;QACtB,OAAO,IAAI,CAAC;IACb,CAAC;CACD,CAAA;AALQ;IADP,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDACF;AAPrB,iBAAiB;IADtB,aAAa,CAAC,cAAc,CAAC;GACxB,iBAAiB,CAYtB;AAED,iBAAiB,CAAC,MAAM,EAAE,CAAC;AAE3B,eAAe,iBAAiB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport ComboBoxItem from \"./ComboBoxItem.js\";\nimport type { IMultiComboBoxItem } from \"./MultiComboBox.js\";\n\n/**\n * @class\n * The `ui5-mcb-item` represents the item for a `ui5-multi-combobox`.\n * @constructor\n * @extends ComboBoxItem\n * @abstract\n * @implements {IMultiComboBoxItem}\n * @public\n */\n@customElement(\"ui5-mcb-item\")\nclass MultiComboBoxItem extends ComboBoxItem implements IMultiComboBoxItem {\n\t/**\n\t * Defines the selected state of the component.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdeclare selected: boolean;\n\n\tget isMultiComboBoxItem() {\n\t\treturn true;\n\t}\n}\n\nMultiComboBoxItem.define();\n\nexport default MultiComboBoxItem;\n"]}
+{"version":3,"file":"MultiComboBoxItem.js","sourceRoot":"","sources":["../src/MultiComboBoxItem.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AAErF,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,EACN,QAAQ,EACR,WAAW,IAAI,KAAK,GACpB,MAAM,4CAA4C,CAAC;AACpD,OAAO,YAAY,MAAM,mBAAmB,CAAC;AAC7C,OAAO,QAAQ,MAAM,eAAe,CAAC;AAErC,OAAO,EACN,6BAA6B,GAC7B,MAAM,mCAAmC,CAAC;AAE3C,OAAO,MAAM,MAAM,6CAA6C,CAAC;AACjE,OAAO,yBAAyB,MAAM,gCAAgC,CAAC;AAIvE;;;;;;;GAOG;AAWH,IAAM,iBAAiB,yBAAvB,MAAM,iBAAkB,SAAQ,YAAY;IAA5C;;QAYC;;;WAGG;QAEH,eAAU,GAAG,KAAK,CAAC;QAGnB,cAAS,GAAG,KAAK,CAAC;IA0BnB,CAAC;IArBA,IAAI,mBAAmB;QACtB,OAAO,IAAI,CAAC;IACb,CAAC;IAED,QAAQ,CAAC,CAAa;QACrB,IAAK,CAAC,CAAC,MAAsB,EAAE,YAAY,CAAC,cAAc,CAAC,EAAE,CAAC;YAC7D,OAAO,IAAI,CAAC,kBAAkB,CAAC,qBAAqB,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAG,CAAC,CAAC,MAAmB,CAAC,OAAO,EAAE,yBAAyB,EAAE,IAAI,EAAE,CAAC,CAAC;QAClJ,CAAC;QAED,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IACnB,CAAC;IAED,IAAI,eAAe;QAClB,OAAO,mBAAiB,CAAC,UAAU,CAAC,OAAO,CAAC,6BAA6B,CAAC,CAAC;IAC5E,CAAC;IAED,IAAI,eAAe;QAClB,OAAO;YACN,IAAI,EAAE,cAA0B;SAChC,CAAC;IACH,CAAC;CACD,CAAA;AApCQ;IADP,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDACF;AAO1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;qDAC5B;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;oDAC7B;AAGX;IADN,IAAI,CAAC,oBAAoB,CAAC;2CACG;AAvBzB,iBAAiB;IAVtB,aAAa,CAAC;QACd,GAAG,EAAE,cAAc;QACnB,QAAQ,EAAE,yBAAyB;QACnC,MAAM,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC;QACrC,YAAY,EAAE,CAAC,GAAG,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC;KACtD,CAAC;IAED,KAAK,CAAC,qBAAqB,EAAE;QAC7B,OAAO,EAAE,IAAI;KACb,CAAC;GACI,iBAAiB,CA8CtB;AAED,MAAM,6BAA6B,GAAG,CAAC,MAAW,EAA+B,EAAE;IAClF,OAAO,qBAAqB,IAAI,MAAM,CAAC;AACxC,CAAC,CAAC;AAEF,iBAAiB,CAAC,MAAM,EAAE,CAAC;AAE3B,eAAe,iBAAiB,CAAC;AACjC,OAAO,EAAE,6BAA6B,EAAE,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport {\n\tproperty,\n\teventStrict as event,\n} from \"@ui5/webcomponents-base/dist/decorators.js\";\nimport ComboBoxItem from \"./ComboBoxItem.js\";\nimport CheckBox from \"./CheckBox.js\";\nimport type { IMultiComboBoxItem } from \"./MultiComboBox.js\";\nimport {\n\tARIA_LABEL_LIST_ITEM_CHECKBOX,\n} from \"./generated/i18n/i18n-defaults.js\";\n\nimport styles from \"./generated/themes/MultiComboBoxItem.css.js\";\nimport MultiComboBoxItemTemplate from \"./MultiComboBoxItemTemplate.js\";\nimport type { SelectionRequestEventDetail } from \"./ListItem.js\";\nimport type { AriaRole } from \"@ui5/webcomponents-base\";\n\n/**\n * @class\n * The `ui5-mcb-item` represents the item for a `ui5-multi-combobox`.\n * @constructor\n * @extends ComboBoxItem\n * @implements {IMultiComboBoxItem}\n * @public\n */\n@customElement({\n\ttag: \"ui5-mcb-item\",\n\ttemplate: MultiComboBoxItemTemplate,\n\tstyles: [ComboBoxItem.styles, styles],\n\tdependencies: [...ComboBoxItem.dependencies, CheckBox],\n})\n\n@event(\"selection-requested\", {\n\tbubbles: true,\n})\nclass MultiComboBoxItem extends ComboBoxItem implements IMultiComboBoxItem {\n\teventDetails!: ComboBoxItem[\"eventDetails\"] & {\n\t\t\"selection-requested\": SelectionRequestEventDetail,\n\t}\n\t/**\n\t * Defines the selected state of the component.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdeclare selected: boolean;\n\n\t/**\n\t * Defines whether the item is filtered\n\t * @private\n\t */\n\t@property({ type: Boolean, noAttribute: true })\n\t_isVisible = false;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_readonly = false;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\n\n\tget isMultiComboBoxItem() {\n\t\treturn true;\n\t}\n\n\t_onclick(e: MouseEvent) {\n\t\tif ((e.target as HTMLElement)?.hasAttribute(\"ui5-checkbox\")) {\n\t\t\treturn this.fireDecoratorEvent(\"selection-requested\", { item: this, selected: (e.target as CheckBox).checked, selectionComponentPressed: true });\n\t\t}\n\n\t\tsuper._onclick(e);\n\t}\n\n\tget _accessibleName() {\n\t\treturn MultiComboBoxItem.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_CHECKBOX);\n\t}\n\n\tget checkBoxAccInfo() {\n\t\treturn {\n\t\t\trole: \"presentation\" as AriaRole,\n\t\t};\n\t}\n}\n\nconst isInstanceOfMultiComboBoxItem = (object: any): object is MultiComboBoxItem => {\n\treturn \"isMultiComboBoxItem\" in object;\n};\n\nMultiComboBoxItem.define();\n\nexport default MultiComboBoxItem;\nexport { isInstanceOfMultiComboBoxItem };\n"]}

package/dist/MultiComboBoxItemGroup.d.ts

@@ -0,0 +1,33 @@
+import type { IMultiComboBoxItem } from "./MultiComboBox.js";
+import type MultiComboBoxItem from "./MultiComboBoxItem.js";
+import type ListItemGroupHeader from "./ListItemGroupHeader.js";
+import ComboBoxItemGroup from "./ComboBoxItemGroup.js";
+/**
+ * @class
+ * The `ui5-mcb-item-group` is type of suggestion item,
+ * that can be used to split the `ui5-multi-combobox` suggestions into groups.
+ * @constructor
+ * @extends ComboBoxItemGroup
+ * @public
+ * @implements {IMultiComboBoxItem}
+ * @since 2.0.0
+ */
+declare class MultiComboBoxItemGroup extends ComboBoxItemGroup implements IMultiComboBoxItem {
+    eventDetails: ComboBoxItemGroup["eventDetails"];
+    /**
+     * Defines the items of the <code>ui5-mcb-item-group</code>.
+     * @public
+     */
+    items: Array<MultiComboBoxItem>;
+    /**
+     * Used to avoid tag name checks
+     * @protected
+     */
+    get isGroupItem(): boolean;
+    get selected(): boolean;
+    get stableDomRef(): string;
+    getFocusDomRef(): ListItemGroupHeader;
+}
+declare const isInstanceOfMultiComboBoxItemGroup: (object: any) => object is MultiComboBoxItemGroup;
+export default MultiComboBoxItemGroup;
+export { isInstanceOfMultiComboBoxItemGroup };

package/dist/MultiComboBoxItemGroup.js

@@ -0,0 +1,59 @@
+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;
+};
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import MultiComboBoxItemGroupTemplate from "./MultiComboBoxItemGroupTemplate.js";
+import ComboBoxItemGroup from "./ComboBoxItemGroup.js";
+/**
+ * @class
+ * The `ui5-mcb-item-group` is type of suggestion item,
+ * that can be used to split the `ui5-multi-combobox` suggestions into groups.
+ * @constructor
+ * @extends ComboBoxItemGroup
+ * @public
+ * @implements {IMultiComboBoxItem}
+ * @since 2.0.0
+ */
+let MultiComboBoxItemGroup = class MultiComboBoxItemGroup extends ComboBoxItemGroup {
+    /**
+     * Used to avoid tag name checks
+     * @protected
+     */
+    get isGroupItem() {
+        return true;
+    }
+    get selected() {
+        return false;
+    }
+    get stableDomRef() {
+        return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
+    }
+    getFocusDomRef() {
+        return this.shadowRoot.querySelector("[ui5-li-group-header]");
+    }
+};
+__decorate([
+    slot({
+        "default": true,
+        invalidateOnChildChange: true,
+        individualSlots: true,
+        type: HTMLElement,
+    })
+], MultiComboBoxItemGroup.prototype, "items", void 0);
+MultiComboBoxItemGroup = __decorate([
+    customElement({
+        tag: "ui5-mcb-item-group",
+        template: MultiComboBoxItemGroupTemplate,
+    })
+], MultiComboBoxItemGroup);
+MultiComboBoxItemGroup.define();
+const isInstanceOfMultiComboBoxItemGroup = (object) => {
+    return "isGroupItem" in object;
+};
+export default MultiComboBoxItemGroup;
+export { isInstanceOfMultiComboBoxItemGroup };
+//# sourceMappingURL=MultiComboBoxItemGroup.js.map

package/dist/MultiComboBoxItemGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiComboBoxItemGroup.js","sourceRoot":"","sources":["../src/MultiComboBoxItemGroup.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,IAAI,MAAM,iDAAiD,CAAC;AAGnE,OAAO,8BAA8B,MAAM,qCAAqC,CAAC;AAEjF,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AAEvD;;;;;;;;;GASG;AAKH,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,iBAAiB;IAcrD;;;OAGG;IACH,IAAI,WAAW;QACd,OAAO,IAAI,CAAC;IACb,CAAC;IAED,IAAI,QAAQ;QACX,OAAO,KAAK,CAAC;IACd,CAAC;IAED,IAAI,YAAY;QACf,OAAO,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,IAAI,GAAG,IAAI,CAAC,GAAG,iBAAiB,CAAC;IAC5E,CAAC;IAED,cAAc;QACb,OAAO,IAAI,CAAC,UAAW,CAAC,aAAa,CAAC,uBAAuB,CAAwB,CAAC;IACvF,CAAC;CACD,CAAA;AArBA;IANC,IAAI,CAAC;QACL,SAAS,EAAE,IAAI;QACf,uBAAuB,EAAE,IAAI;QAC7B,eAAe,EAAE,IAAI;QACrB,IAAI,EAAE,WAAW;KACjB,CAAC;qDAC+B;AAZ5B,sBAAsB;IAJ3B,aAAa,CAAC;QACd,GAAG,EAAE,oBAAoB;QACzB,QAAQ,EAAE,8BAA8B;KACxC,CAAC;GACI,sBAAsB,CAiC3B;AAED,sBAAsB,CAAC,MAAM,EAAE,CAAC;AAEhC,MAAM,kCAAkC,GAAG,CAAC,MAAW,EAAoC,EAAE;IAC5F,OAAO,aAAa,IAAI,MAAM,CAAC;AAChC,CAAC,CAAC;AAEF,eAAe,sBAAsB,CAAC;AAEtC,OAAO,EAAE,kCAAkC,EAAE,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport type { IMultiComboBoxItem } from \"./MultiComboBox.js\";\nimport type MultiComboBoxItem from \"./MultiComboBoxItem.js\";\nimport MultiComboBoxItemGroupTemplate from \"./MultiComboBoxItemGroupTemplate.js\";\nimport type ListItemGroupHeader from \"./ListItemGroupHeader.js\";\nimport ComboBoxItemGroup from \"./ComboBoxItemGroup.js\";\n\n/**\n * @class\n * The `ui5-mcb-item-group` is type of suggestion item,\n * that can be used to split the `ui5-multi-combobox` suggestions into groups.\n * @constructor\n * @extends ComboBoxItemGroup\n * @public\n * @implements {IMultiComboBoxItem}\n * @since 2.0.0\n */\n@customElement({\n\ttag: \"ui5-mcb-item-group\",\n\ttemplate: MultiComboBoxItemGroupTemplate,\n})\nclass MultiComboBoxItemGroup extends ComboBoxItemGroup implements IMultiComboBoxItem {\n\teventDetails!: ComboBoxItemGroup[\"eventDetails\"];\n\t/**\n\t * Defines the items of the <code>ui5-mcb-item-group</code>.\n\t * @public\n\t */\n\t@slot({\n\t\t\"default\": true,\n\t\tinvalidateOnChildChange: true,\n\t\tindividualSlots: true,\n\t\ttype: HTMLElement,\n\t})\n\titems!: Array<MultiComboBoxItem>;\n\n\t/**\n\t * Used to avoid tag name checks\n\t * @protected\n\t */\n\tget isGroupItem() {\n\t\treturn true;\n\t}\n\n\tget selected() {\n\t\treturn false;\n\t}\n\n\tget stableDomRef() {\n\t\treturn this.getAttribute(\"stable-dom-ref\") || `${this._id}-stable-dom-ref`;\n\t}\n\n\tgetFocusDomRef() {\n\t\treturn this.shadowRoot!.querySelector(\"[ui5-li-group-header]\") as ListItemGroupHeader;\n\t}\n}\n\nMultiComboBoxItemGroup.define();\n\nconst isInstanceOfMultiComboBoxItemGroup = (object: any): object is MultiComboBoxItemGroup => {\n\treturn \"isGroupItem\" in object;\n};\n\nexport default MultiComboBoxItemGroup;\n\nexport { isInstanceOfMultiComboBoxItemGroup };\n"]}

package/dist/MultiComboBoxItemGroupTemplate.d.ts

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

package/dist/MultiComboBoxItemGroupTemplate.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
+import ListBoxItemGroupTemplate from "./ListBoxItemGroupTemplate.js";
+export default function MultiComboBoxItemGroupTemplate() {
+    return [ListBoxItemGroupTemplate.call(this, { items })];
+}
+function items() {
+    return this.items.filter(item => item._isVisible).map(item => _jsx("slot", { name: item._individualSlot }));
+}
+//# sourceMappingURL=MultiComboBoxItemGroupTemplate.js.map

package/dist/MultiComboBoxItemGroupTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiComboBoxItemGroupTemplate.js","sourceRoot":"","sources":["../src/MultiComboBoxItemGroupTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,wBAAwB,MAAM,+BAA+B,CAAC;AAGrE,MAAM,CAAC,OAAO,UAAU,8BAA8B;IACrD,OAAO,CAAC,wBAAwB,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;AACzD,CAAC;AAED,SAAS,KAAK;IACb,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,eAAM,IAAI,EAAE,IAAI,CAAC,eAAe,GAAS,CAAC,CAAC;AAC1G,CAAC","sourcesContent":["import ListBoxItemGroupTemplate from \"./ListBoxItemGroupTemplate.js\";\nimport type MultiComboBoxItemGroup from \"./MultiComboBoxItemGroup.js\";\n\nexport default function MultiComboBoxItemGroupTemplate(this: MultiComboBoxItemGroup) {\n\treturn [ListBoxItemGroupTemplate.call(this, { items })];\n}\n\nfunction items(this: MultiComboBoxItemGroup) {\n\treturn this.items.filter(item => item._isVisible).map(item => <slot name={item._individualSlot}></slot>);\n}\n"]}

package/dist/MultiComboBoxItemTemplate.d.ts

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

package/dist/MultiComboBoxItemTemplate.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
+import CheckBox from "./CheckBox.js";
+import ListItemBaseTemplate from "./ListItemBaseTemplate.js";
+export default function MultiComboBoxItemTemplate() {
+    return ListItemBaseTemplate.call(this, { listItemContent }, { role: "option" });
+}
+function listItemContent() {
+    return (_jsxs(_Fragment, { children: [_jsx(CheckBox, { disabled: this._readonly, checked: this.selected, _accInfo: this.checkBoxAccInfo }), _jsx("div", { part: "content", id: "content", class: "ui5-li-content", children: _jsxs("div", { class: "ui5-li-text-wrapper", children: [this.text && _jsx("span", { part: "title", className: "ui5-li-title", children: this.text }), this.additionalText && _jsx("span", { part: "additional-text", class: "ui5-li-additional-text", children: this.additionalText })] }) })] }));
+}
+//# sourceMappingURL=MultiComboBoxItemTemplate.js.map

package/dist/MultiComboBoxItemTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiComboBoxItemTemplate.js","sourceRoot":"","sources":["../src/MultiComboBoxItemTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,QAAQ,MAAM,eAAe,CAAC;AACrC,OAAO,oBAAoB,MAAM,2BAA2B,CAAC;AAG7D,MAAM,CAAC,OAAO,UAAU,yBAAyB;IAChD,OAAO,oBAAoB,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,eAAe,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;AACjF,CAAC;AAED,SAAS,eAAe;IACvB,OAAO,CACN,8BACC,KAAC,QAAQ,IACR,QAAQ,EAAE,IAAI,CAAC,SAAS,EACxB,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,QAAQ,EAAI,IAAI,CAAC,eAAe,GAC/B,EACF,cAAK,IAAI,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS,EAAC,KAAK,EAAC,gBAAgB,YACtD,eAAK,KAAK,EAAC,qBAAqB,aAC7B,IAAI,CAAC,IAAI,IAAI,eAAM,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,cAAc,YAAE,IAAI,CAAC,IAAI,GAAQ,EAC3E,IAAI,CAAC,cAAc,IAAI,eAAM,IAAI,EAAC,iBAAiB,EAAC,KAAK,EAAC,wBAAwB,YAAE,IAAI,CAAC,cAAc,GAAQ,IAC5G,GACD,IACJ,CACH,CAAC;AACH,CAAC","sourcesContent":["import CheckBox from \"./CheckBox.js\";\nimport ListItemBaseTemplate from \"./ListItemBaseTemplate.js\";\nimport type MultiComboBoxItem from \"./MultiComboBoxItem.js\";\n\nexport default function MultiComboBoxItemTemplate(this: MultiComboBoxItem) {\n\treturn ListItemBaseTemplate.call(this, { listItemContent }, { role: \"option\" });\n}\n\nfunction listItemContent(this: MultiComboBoxItem) {\n\treturn (\n\t\t<>\n\t\t\t<CheckBox\n\t\t\t\tdisabled={this._readonly}\n\t\t\t\tchecked={this.selected}\n\t\t\t\t_accInfo = {this.checkBoxAccInfo}\n\t\t\t/>\n\t\t\t<div part=\"content\" id=\"content\" class=\"ui5-li-content\">\n\t\t\t\t<div class=\"ui5-li-text-wrapper\">\n\t\t\t\t\t{ this.text && <span part=\"title\" className=\"ui5-li-title\">{this.text}</span> }\n\t\t\t\t\t{ this.additionalText && <span part=\"additional-text\" class=\"ui5-li-additional-text\">{this.additionalText}</span> }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n"]}

package/dist/MultiComboBoxPopoverTemplate.d.ts

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

package/dist/MultiComboBoxPopoverTemplate.js

@@ -0,0 +1,35 @@
+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 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 Popover from "./Popover.js";
+import CheckBox from "./CheckBox.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._isPhone && _jsxs(_Fragment, { children: [_jsxs("div", { slot: "header", class: "ui5-responsive-popover-header", style: this.styles.popoverHeader, children: [_jsxs("div", { class: "row", children: [_jsx("span", { children: this._headerTitleText }), _jsx(Button, { class: "ui5-responsive-popover-close-btn", icon: decline, design: "Transparent", onClick: this.handleCancel })] }), _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, 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._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.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 })) })
+                        :
+                            _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 &&
+                        _jsx("div", { slot: "footer", class: "ui5-responsive-popover-footer", children: _jsx(Button, { design: "Transparent", onClick: this.handleOK, children: this._dialogOkButton }) })] }), this.hasValueStateMessage &&
+                _jsx(Popover
+                // skipRegistryUpdate={true}
+                , { 
+                    // skipRegistryUpdate={true}
+                    preventInitialFocus: true, preventFocusRestore: true, hideArrow: true, class: "ui5-valuestatemessage-popover", placement: "Bottom", horizontalAlign: this._valueStatePopoverHorizontalAlign, 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":";AAAA,OAAO,OAAO,MAAM,0CAA0C,CAAC;AAC/D,OAAO,cAAc,MAAM,kDAAkD,CAAC;AAE9E,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AACvD,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,YAAY,MAAM,mBAAmB,CAAC;AAC7C,OAAO,cAAc,MAAM,qBAAqB,CAAC;AACjD,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,OAAO,MAAM,cAAc,CAAC;AACnC,OAAO,QAAQ,MAAM,eAAe,CAAC;AAErC,MAAM,CAAC,OAAO,UAAU,4BAA4B;IACnD,OAAO,CAAC,8BACP,MAAC,iBAAiB,IACjB,SAAS,EAAC,QAAQ,EAClB,eAAe,EAAC,OAAO,EACvB,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO,EAC3B,EAAE,EAAE,IAAI,CAAC,mBAAmB,EAC5B,SAAS,EAAE,IAAI,EACf,mBAAmB,EAAE,IAAI,EACzB,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,kBAAkB,4BACb,IAAI,CAAC,oBAAoB,EACjD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,YAAY,EAAE,IAAI,CAAC,WAAW,EAC9B,aAAa,EAAE,IAAI,CAAC,YAAY,EAChC,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,UAAU,EAAE,IAAI,CAAC,kBAAkB,EACnC,cAAc,EAAE,IAAI,CAAC,WAAW,EAChC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,aAEX,IAAI,CAAC,QAAQ,IAAI,8BACjB,eAAK,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,+BAA+B,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,aACxF,eAAK,KAAK,EAAC,KAAK,aACf,yBAAO,IAAI,CAAC,gBAAgB,GAAQ,EACpC,KAAC,MAAM,IACN,KAAK,EAAC,kCAAkC,EACxC,IAAI,EAAE,OAAO,EACb,MAAM,EAAC,aAAa,EACpB,OAAO,EAAE,IAAI,CAAC,YAAY,GAElB,IACJ,EACN,eAAK,KAAK,EAAC,KAAK,aACf,KAAC,KAAK,IACL,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAChC,SAAS,EAAE,IAAI,CAAC,qBAAqB,EACrC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,UAAU,EAAE,IAAI,CAAC,sBAAsB,EACvC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,WAAW,EAAE,IAAI,CAAC,WAAW,YAE5B,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAChC,KAAC,cAAc,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,cAAc,EAAE,IAAI,CAAC,cAAc,GAAmB,CACvF,CAAC,GACK,EACR,KAAC,YAAY,IACZ,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,kCAAkC,EACxC,IAAI,EAAE,cAAc,EACpB,MAAM,EAAC,aAAa,EACpB,OAAO,EAAE,IAAI,CAAC,0BAA0B,EACxC,OAAO,EAAE,IAAI,CAAC,mBAAmB,EACjC,cAAc,EAAE,IAAI,CAAC,qCAAqC,GAC3C,IACX,IACD,cAAK,IAAI,CAAC,oBAAoB;gCACnC,eAAK,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,iBAAiB,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,wBAAwB,aACtF,KAAC,IAAI,IAAC,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,IAAI,CAAC,sBAAsB,GAAS,EAC1F,IAAI,CAAC,IAAI,IAAI,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,IACrC,EAGN,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,IAC1B,EAEF,CAAC,IAAI,CAAC,QAAQ,IAAI,8BACjB,IAAI,CAAC,oBAAoB;gCACzB,eAAK,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAE,IAAI,CAAC,oBAAoB,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,iCAAiC,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,wBAAwB,aAC1J,KAAC,IAAI,IAAC,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,IAAI,CAAC,sBAAsB,GAAS,EAC1F,IAAI,CAAC,IAAI,IAAI,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,IACrC,EAGN,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,IAC1B,EAEF,IAAI,CAAC,cAAc,CAAC,CAAC;wBACrB,KAAC,IAAI,IAAC,UAAU,EAAC,MAAM,EAAC,aAAa,EAAC,UAAU,EAAC,KAAK,EAAC,mCAAmC,EAAC,cAAc,EAAC,SAAS,YACjH,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,eAAM,IAAI,EAAE,IAAI,CAAC,eAAe,GAAS,CAAC,GACpE;wBACP,CAAC;4BACD,KAAC,IAAI,IAAC,UAAU,EAAC,MAAM,EAAC,aAAa,EAAC,UAAU,EAAC,KAAK,EAAC,mCAAmC,EAAC,cAAc,EAAC,SAAS,EAAC,SAAS,EAAE,IAAI,CAAC,cAAc,YAChJ,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,eAAM,IAAI,EAAE,IAAI,CAAC,eAAe,GAAS,CAAC,GACrE,EAGP,IAAI,CAAC,QAAQ;wBACb,cAAK,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,+BAA+B,YACvD,KAAC,MAAM,IACN,MAAM,EAAC,aAAa,EACpB,OAAO,EAAE,IAAI,CAAC,QAAQ,YACrB,IAAI,CAAC,eAAe,GAAU,GAC3B,IAEY,EAEnB,IAAI,CAAC,oBAAoB;gBACzB,KAAC,OAAO;gBACP,4BAA4B;;oBAA5B,4BAA4B;oBAC5B,mBAAmB,EAAE,IAAI,EACzB,mBAAmB,EAAE,IAAI,EACzB,SAAS,EAAE,IAAI,EACf,KAAK,EAAC,+BAA+B,EACrC,SAAS,EAAC,QAAQ,EAClB,eAAe,EAAE,IAAI,CAAC,iCAAiC,EACvD,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAE,IAAI,CAAC,cAAc,EACzB,MAAM,EAAE,IAAI,YAEZ,eAAK,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,iBAAiB,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,aACzF,KAAC,IAAI,IAAC,KAAK,EAAC,oCAAoC,EAAC,IAAI,EAAE,IAAI,CAAC,sBAAsB,GAAS,EAC1F,IAAI,CAAC,cAAc,IAAI,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,IAC/C,GACG,IAET,CAAC,CAAC;AACN,CAAC;AAED,SAAS,iBAAiB;IACzB,OAAO,IAAI,CAAC,qCAAqC,CAAC,CAAC,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,eAAM,IAAI,EAAC,mBAAmB,GAAQ,CAAC;AACzH,CAAC;AAED,SAAS,gBAAgB;IACxB,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;QACxB,OAAO,CACN,cAAK,KAAK,EAAC,2BAA2B,EAAC,SAAS,EAAE,IAAI,CAAC,oBAAoB,EAAE,QAAQ,EAAE,CAAC,YACvF,KAAC,QAAQ,IACR,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,KAAK,EAAC,6BAA6B,EACnC,IAAI,EAAE,IAAI,CAAC,sBAAsB,EACjC,QAAQ,EAAE,IAAI,CAAC,6BAA6B,GACjC,GACP,CACN,CAAC;IACH,CAAC;AACF,CAAC","sourcesContent":["import decline from \"@ui5/webcomponents-icons/dist/decline.js\";\nimport 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 Popover from \"./Popover.js\";\nimport CheckBox from \"./CheckBox.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._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\t<Button\n\t\t\t\t\t\t\tclass=\"ui5-responsive-popover-close-btn\"\n\t\t\t\t\t\t\ticon={decline}\n\t\t\t\t\t\t\tdesign=\"Transparent\"\n\t\t\t\t\t\t\tonClick={this.handleCancel}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t</Button>\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\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._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.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:\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=\"Transparent\"\n\t\t\t\t\t\tonClick={this.handleOK}\n\t\t\t\t\t>{this._dialogOkButton}</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={this._valueStatePopoverHorizontalAlign}\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

@@ -1,17 +1,19 @@
+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 Tokenizer from "./Tokenizer.js";
+import type Token from "./Token.js";
+import type Tokenizer from "./Tokenizer.js";
 import type { TokenizerTokenDeleteEventDetail } from "./Tokenizer.js";
-import "@ui5/webcomponents-icons/dist/value-help.js";
-import type { InputSuggestionItemSelectEventDetail as MultiInputSuggestionItemSelectEventDetail, InputSuggestionItemPreviewEventDetail as MultiInputSuggestionItemPreviewEventDetail } from "./Input.js";
-interface IToken extends HTMLElement, ITabbable {
-    text: string;
+import type { InputSelectionChangeEventDetail as MultiInputSelectionChangeEventDetail } from "./Input.js";
+interface IToken extends UI5Element, ITabbable {
+    text?: string;
     readonly: boolean;
     selected: boolean;
     isTruncatable: boolean;
 }
 type MultiInputTokenDeleteEventDetail = {
-    token: IToken;
+    tokens: Token[];
 };
 /**
  * @class
@@ -22,7 +24,8 @@ type MultiInputTokenDeleteEventDetail = {
  * 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)
- * - Select a value from the suggestion list (`suggestion-item-select` 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
  *
@@ -32,7 +35,11 @@ type MultiInputTokenDeleteEventDetail = {
  * @since 1.0.0-rc.9
  * @public
  */
-declare class MultiInput extends Input {
+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.
@@ -40,18 +47,22 @@ declare class MultiInput extends Input {
      * @public
      */
     showValueHelpIcon: boolean;
-    /**
-     * Indicates whether the tokenizer is expanded or collapsed(shows the n more label)
-     * @default false
-     * @private
-     */
-    expandedTokenizer: 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;
     /**
      * Defines the component tokens.
      * @public
@@ -59,9 +70,10 @@ declare class MultiInput extends Input {
     tokens: Array<IToken>;
     _skipOpenSuggestions: boolean;
     _valueHelpIconPressed: boolean;
+    get formValidity(): ValidityStateFlags;
+    get formFormattedValue(): FormData | string | null;
     constructor();
     valueHelpPress(): void;
-    showMorePress(): void;
     tokenDelete(e: CustomEvent<TokenizerTokenDeleteEventDetail>): void;
     valueHelpMouseDown(e: MouseEvent): void;
     _tokenizerFocusOut(e: FocusEvent): void;
@@ -76,35 +88,38 @@ declare class MultiInput extends Input {
     /**
      * @override
      */
-    _onfocusin(e: FocusEvent): Promise<void>;
-    lastItemDeleted(): void;
+    _onfocusin(e: FocusEvent): void;
     onBeforeRendering(): void;
+    onAfterRendering(): void;
     get iconsCount(): number;
     get tokenizer(): Tokenizer;
-    get _tokensCountText(): string | undefined;
+    get tokenizerExpanded(): boolean;
+    get _tokensCountText(): string;
+    get _valueHelpText(): string;
     get _tokensCountTextId(): string;
+    get _valueHelpTextId(): "" | "hiddenText-value-help";
     /**
      * Returns the placeholder value when there are no tokens.
      * @protected
      */
-    get _placeholder(): string;
+    get _placeholder(): string | undefined;
     get accInfo(): {
-        input: {
-            ariaRoledescription: string;
-            ariaDescribedBy: string;
-            ariaInvalid: string | undefined;
-            ariaHasPopup: string | undefined;
-            ariaAutoComplete: string | undefined;
-            role: string | undefined;
-            ariaControls: string | undefined;
-            ariaExpanded: string | undefined;
-            ariaDescription: string | undefined;
-            ariaLabel: string | undefined;
-        };
+        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;
 }
 export default MultiInput;
-export type { IToken, MultiInputTokenDeleteEventDetail, MultiInputSuggestionItemSelectEventDetail, MultiInputSuggestionItemPreviewEventDetail, };
+export type { IToken, MultiInputTokenDeleteEventDetail, MultiInputSelectionChangeEventDetail, };