@siemens/ix 0.0.0-20240419081748 → 0.0.0-20240508065324

package/dist/cjs/ix-menu.cjs.entry.js

@@ -402,44 +402,44 @@ const Menu = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '61f040004004c0ac92ac737c133bbdc5c8a0479d', class: {
+        return (index.h(index.Host, { key: '04381993d2b3de312e2d2cf9960e4674f817d112', class: {
                 expanded: this.expand,
                 [`breakpoint-${this.breakpoint}`]: true,
-            }, slot: "menu" }, index.h("aside", { key: 'dd588610dfacb86ede84c8ebc73ad8653e8d31e2', class: {
+            }, slot: "menu" }, index.h("aside", { key: '03991cabbeb7fbc4ed620e2cc65739127c76c2e5', class: {
                 menu: true,
                 expanded: this.expand,
             }, onClick: () => {
                 this.resetActiveTab();
-            } }, index.h("div", { key: '56538ac36be893ab8b78c8859da08b05a2f05201', class: "menu-buttons" }, this.breakpoint !== 'sm' && (index.h("ix-menu-expand-icon", { breakpoint: this.breakpoint, expanded: this.expand, pinned: this.pinned, class: "menu-expand-icon", ixAriaLabel: this.i18nExpandSidebar, onClick: async () => this.toggleMenu() })), this.breakpoint === 'sm' &&
-            this.applicationLayoutContext.appSwitchConfig && (index.h("ix-icon-button", { onClick: () => index$1.showAppSwitch(this.applicationLayoutContext.appSwitchConfig), icon: "apps", ghost: true }))), index.h("div", { key: '36df72f91c00ed97845198f30676475202ff000d', id: "menu-tabs", style: {
+            } }, index.h("div", { key: 'db75ed295b5d528f63a557168acc87dbb0f9f7cc', class: "menu-buttons" }, this.breakpoint !== 'sm' && (index.h("ix-menu-expand-icon", { breakpoint: this.breakpoint, expanded: this.expand, pinned: this.pinned, class: "menu-expand-icon", ixAriaLabel: this.i18nExpandSidebar, onClick: async () => this.toggleMenu() })), this.breakpoint === 'sm' &&
+            this.applicationLayoutContext.appSwitchConfig && (index.h("ix-icon-button", { onClick: () => index$1.showAppSwitch(this.applicationLayoutContext.appSwitchConfig), icon: "apps", ghost: true }))), index.h("div", { key: '2720ecc044b969dce2c30ce4caebc337a2c14fdf', id: "menu-tabs", style: {
                 display: 'contents',
-            }, onClick: (e) => this.onMenuItemsClick(e) }, index.h("div", { key: '2af53795b7e3250848d9014271f97ea5cd330672', class: "tabs-shadow-container" }, index.h("div", { key: 'bcf6e5caf81a5eee24d6575923c6b7694742e5a0', class: {
+            }, onClick: (e) => this.onMenuItemsClick(e) }, index.h("div", { key: '41cf30c3ff12c6bc4b6cbee1b7ac6e38e0591a8e', class: "tabs-shadow-container" }, index.h("div", { key: '1ab4dfeb9512cd11553c3cf957f499cb3f3f0874', class: {
                 'tabs--shadow': true,
                 'tabs--shadow-top': true,
                 'tabs--shadow--show': this.itemsScrollShadowTop,
-            } }), index.h("div", { key: '8bf83467772dabd34f296de37f5926a935b9facd', class: {
+            } }), index.h("div", { key: '13b064b021d8cc95748336a09b2abe102c43255c', class: {
                 tabs: true,
                 'show-scrollbar': this.expand,
-            }, onScroll: () => this.handleOverflowIndicator() }, index.h("div", { key: 'ac25103b4145a4c3ce9426119f32278812dfd908', class: "menu-avatar" }, index.h("slot", { key: '2f4f9d54fc218d4a8d87b74317000aee7b4e613a', name: "ix-menu-avatar" })), index.h("slot", { key: '87e191c1a7c73eca7f58eed464affbcd2baa0812', name: "home" }), this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (index.h("slot", null)) : null), index.h("div", { key: '85d1018c78bf76b49eb9162357e8862ff6fb6ed5', class: {
+            }, onScroll: () => this.handleOverflowIndicator() }, index.h("div", { key: '56b8bdaaf62dcb141c05ac3f0d85f212280ae3be', class: "menu-avatar" }, index.h("slot", { key: '71558d01cc5c4402daffa2a14565f9413f86eb38', name: "ix-menu-avatar" })), index.h("slot", { key: 'a9769cfeafc4a704ef6bd5b3ba8a067599c1d0eb', name: "home" }), this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (index.h("slot", null)) : null), index.h("div", { key: '1207b0712c13e075944db84015646e80c36384cf', class: {
                 'tabs--shadow': true,
                 'tabs--shadow-bottom': true,
                 'tabs--shadow--show': this.itemsScrollShadowBottom,
-            } }))), index.h("div", { key: '28adcb235d366f352575973034ff5d2d7dca1bc0', class: "bottom-tab-divider" }), this.settings ? (index.h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "settings", class: {
+            } }))), index.h("div", { key: 'bf3b36fd14b0845c50c554fa3a160165fcb7cb4a', class: "bottom-tab-divider" }), this.settings ? (index.h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "settings", class: {
                 'internal-tab': true,
                 'bottom-tab': true,
                 active: this.showSettings,
-            }, icon: 'cogwheel', onClick: async () => this.toggleSettings(!this.showSettings) }, this.i18nSettings)) : null, index.h("div", { key: 'f87516229b665d80e620d9b96a85247e970733a4', onClick: (e) => this.onMenuItemsClick(e) }, index.h("slot", { key: 'fac63e22b70435a22482af1fee8595e3a510ad6e', name: "bottom" })), index.h("div", { key: '150bea99ffcfe3277da5f42ff27b57b4dc9fc6ec', id: "popover-area" }), this.about ? (index.h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "aboutAndLegal", class: {
+            }, icon: 'cogwheel', onClick: async () => this.toggleSettings(!this.showSettings) }, this.i18nSettings)) : null, index.h("div", { key: '6ed7e214926341ed613df5586c4e03f34cc75147', onClick: (e) => this.onMenuItemsClick(e) }, index.h("slot", { key: '235d19eade65b8a3005f81dba02869ee8185abb8', name: "bottom" })), index.h("div", { key: '1ab169504cb519a9634ae808ea9be0a062c60e8f', id: "popover-area" }), this.about ? (index.h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "aboutAndLegal", class: {
                 'internal-tab': true,
                 'bottom-tab': true,
                 active: this.showAbout,
-            }, icon: 'info', onClick: async () => this.toggleAbout(!this.showAbout) }, this.i18nLegal)) : null, this.enableToggleTheme ? (index.h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "toggleTheme", onClick: () => themeSwitcher.themeSwitcher.toggleMode(), class: "internal-tab bottom-tab", icon: 'light-dark' }, this.i18nToggleTheme)) : null, this.enableMapExpand || ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.sidebar) ? (index.h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "menu-collapse", onClick: () => this.sidebarToggle(), class: "internal-tab bottom-tab", icon: `${this.getCollapseIcon()}` }, this.getCollapseText())) : null), index.h("div", { key: 'f45c34fbbaa23c7b1918a8468adb42f535a72444', class: {
+            }, icon: 'info', onClick: async () => this.toggleAbout(!this.showAbout) }, this.i18nLegal)) : null, this.enableToggleTheme ? (index.h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "toggleTheme", onClick: () => themeSwitcher.themeSwitcher.toggleMode(), class: "internal-tab bottom-tab", icon: 'light-dark' }, this.i18nToggleTheme)) : null, this.enableMapExpand || ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.sidebar) ? (index.h("ix-menu-item", { disabled: this.isHiddenFromViewport(), id: "menu-collapse", onClick: () => this.sidebarToggle(), class: "internal-tab bottom-tab", icon: `${this.getCollapseIcon()}` }, this.getCollapseText())) : null), index.h("div", { key: '95766018d4ef14f54142f69b4193c21378732930', class: {
                 'menu-overlay': true,
                 visible: this.isOverlayVisible(),
                 expanded: this.expand,
             }, onTransitionEnd: () => {
                 this.isTransitionDisabled = true;
                 this.checkTransition();
-            } }, index.h("div", { key: 'a404af2395bf1659555e8581687564ded60f4811', class: 'menu-overlay-container' }, this.showSettings ? index.h("slot", { name: "ix-menu-settings" }) : null), index.h("div", { key: '03b635c41744e4dea67330f02bfe89eac4f1ad82', class: 'menu-overlay-container' }, this.showAbout ? index.h("slot", { name: "ix-menu-about" }) : null))));
+            } }, index.h("div", { key: '01080a1085e7cf7805552e4226e5af59be81ed0b', class: 'menu-overlay-container' }, this.showSettings ? index.h("slot", { name: "ix-menu-settings" }) : null), index.h("div", { key: '1f432ce86c44d5d1460345b84f2c3d16dbf8c68e', class: 'menu-overlay-container' }, this.showAbout ? index.h("slot", { name: "ix-menu-about" }) : null))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ix-message-bar.cjs.entry.js

@@ -44,7 +44,7 @@ const MessageBar = class {
         this.closedChange.emit();
     }
     render() {
-        return (index.h(index.Host, { key: '610b30afda9530351f18514757fa02bb463f14fd' }, index.h("div", { key: 'f087c80eabe66fdc962c565fe3dd0130d5e80189', class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, index.h("ix-icon", { key: '875022604fb5bb38cac7d8e46ca718e45ef9f686', color: this.color, name: this.icon }), index.h("div", { key: 'bca551cd194acac092778d7c3f86f46f6e6178ea', class: "message-content" }, index.h("slot", { key: '18051ca8aa62cb9fa4a4ca5e84fa8f06510f323d' })), this.dismissible ? (index.h("ix-icon-button", { icon: 'close', size: "24", ghost: true, onClick: () => {
+        return (index.h(index.Host, { key: '1e6b060fd39fb008c5ce8e56553b7ee235d5db2d' }, index.h("div", { key: 'a0f00d550a6c2e2f61918bbccd2c342100e73dcd', class: { 'message-container': true, [this.type]: true }, role: "alert", ref: (el) => (this.divElement = el) }, index.h("ix-icon", { key: '5bbfa1b8fcd0025b4d2fa0b488c604458fc4e131', color: this.color, name: this.icon }), index.h("div", { key: '78e83b8a02ea46b6b3ba65690d5939f00a63ca78', class: "message-content" }, index.h("slot", { key: 'b5813c317b7ea1b0c0e6919488016a43140dd68f' })), this.dismissible ? (index.h("ix-icon-button", { icon: 'close', size: "24", ghost: true, onClick: () => {
                 this.closeAlert(this.divElement);
             }, "data-testid": "close-btn" })) : (''))));
     }

package/dist/cjs/ix-modal-content_2.cjs.entry.js

@@ -13,7 +13,7 @@ const ModalContent = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'a879639cc048dc4388ff5f324c6beaf928089480' }, index.h("slot", { key: 'b7d7d8afe947646464dd409bcc574cba40c9a1b3' })));
+        return (index.h(index.Host, { key: 'ae7d626442e1d32189d5811a76b9921e893a2708' }, index.h("slot", { key: '09c33581a65e4db3f54ee84f625bf5c601b0178c' })));
     }
 };
 ModalContent.style = IxModalContentStyle0;
@@ -51,7 +51,7 @@ const ModalHeader = class {
         this.parentDialog.dismissModal();
     }
     render() {
-        return (index.h(index.Host, { key: 'ae262d966e9e69c5c7558190f61928b4c109643f' }, this.icon ? (index.h("ix-icon", { class: 'modal-icon', name: this.icon, color: this.iconColor })) : null, index.h("ix-typography", { key: '4ff8195c0b582e37527d793e1e32615cb190e0a5', variant: 'default-title' }, index.h("slot", { key: '10f9506941a2f34631520d7209612c3cf07dd431' })), !this.hideClose ? (index.h("ix-icon-button", { onClick: (event) => this.onCloseClick(event), ghost: true, icon: "close", class: 'modal-close' })) : null));
+        return (index.h(index.Host, { key: '330fd598a3b07d2f41c9f683923101f77d214fe5' }, this.icon ? (index.h("ix-icon", { class: 'modal-icon', name: this.icon, color: this.iconColor })) : null, index.h("ix-typography", { key: 'a07ec792401066c71a1f4d50aa318a38c3fbe0ee', variant: 'default-title' }, index.h("slot", { key: '9c1ba3358ad6efb9971ed896764441c1a3fc4a89' })), !this.hideClose ? (index.h("ix-icon-button", { onClick: (event) => this.onCloseClick(event), ghost: true, icon: "close", class: 'modal-close' })) : null));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ix-modal-example.cjs.entry.js

@@ -18,7 +18,7 @@ const ModalExample = class {
         modal.closeModal(this.host, 'Done!');
     }
     render() {
-        return (index.h(index.Host, { key: '6588eca80a4a796627317d549ced3d767792d528' }, index.h("div", { key: '06a4f6cb97ef30f9bdc406ca7bad4a1978c8df03' }, index.h("div", { key: 'dfc00207c3d9ead47420a30768e216b7907588c9', class: "modal-header" }, "Message headline", index.h("ix-icon-button", { key: '2b01ad4f2e9ca5e277c4d53b6d6cdb5d2b9b74c8', "data-close-button": true, ghost: true, icon: 'close', onClick: () => this.dismiss() })), index.h("div", { key: '4d1ac160957975fe53162ebd42dd2bd8d6dee0d9', class: "modal-body" }, "Message text lorem ipsum"), index.h("div", { key: '9709cda6c07d7c0abe13424dc87c64bb11162622', class: "modal-footer" }, index.h("ix-button", { key: 'f2c257ebea902ef30674ad2d24a150ad17b82df3', outline: true, onClick: () => this.dismiss() }, "Cancel"), index.h("ix-button", { key: '1f512110cfacee2259d709031be3e5a5869d9704', onClick: () => this.close() }, "OK")))));
+        return (index.h(index.Host, { key: 'e219bbf7bea6f929aa522982cbdf055b3fc45a92' }, index.h("div", { key: '186e10c89c6fd9f626a8fa7642a3a2efe9b4e899' }, index.h("div", { key: '2919c50fa62881cc689d659657bd5b55fb7c6f81', class: "modal-header" }, "Message headline", index.h("ix-icon-button", { key: '3dc6851c96c9140f1b13a0c312100acd71762fcd', "data-close-button": true, ghost: true, icon: 'close', onClick: () => this.dismiss() })), index.h("div", { key: '4b202214dad7f1502f4201969d7cf1a378a55957', class: "modal-body" }, "Message text lorem ipsum"), index.h("div", { key: 'b8df28789d9cede8b78117a8b2cd88b7088e9ea1', class: "modal-footer" }, index.h("ix-button", { key: 'eace38404f5761f3ead889d477481dfd33a5de3a', outline: true, onClick: () => this.dismiss() }, "Cancel"), index.h("ix-button", { key: '38d00bad14606c86ea9ca37bae984579a43475e6', onClick: () => this.close() }, "OK")))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/ix-modal-footer.cjs.entry.js

@@ -12,7 +12,7 @@ const ModalFooter = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '798888b92e40b6c7fe43eddfc94437d8fc8a49c8' }, index.h("slot", { key: '2da276a8b43f061d07f85953e1e54e144944267e' })));
+        return (index.h(index.Host, { key: '10d32ee56938d12d5300cc8bccb401a4492ddb85' }, index.h("slot", { key: '63b0a1b1611bfd377192b6f49e22fc22861f809b' })));
     }
 };
 ModalFooter.style = IxModalFooterStyle0;

package/dist/cjs/ix-modal-loading.cjs.entry.js

@@ -12,7 +12,7 @@ const ModalLoading = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '9333078e1c22a3307abb022ca8cf761667ce9d95' }, index.h("ix-spinner", { key: '895d205873c13dfa9257627094b67a9bfb40e04a', variant: "primary" }), index.h("span", { key: '9c84db0939e4f9fbf359425251103ce9ba2cd968', class: 'loading-text' }, index.h("slot", { key: 'b2fa68d8d6ab862b88cf7deadc4249c2775fd6e6' }))));
+        return (index.h(index.Host, { key: 'f6d440918bef7125ac06449ab6d0cd4088f5fefb' }, index.h("ix-spinner", { key: '3efc2e66c193f2af94f4f5d6dc3e91daa2049008', variant: "primary" }), index.h("span", { key: '4d81c46bedae034801a35637ca78bd8f2b618124', class: 'loading-text' }, index.h("slot", { key: '90bf6e1aeac791f70c203fb6bf32dcb7cb313719' }))));
     }
 };
 ModalLoading.style = IxModalLoadingStyle0;

package/dist/cjs/ix-pagination.cjs.entry.js

@@ -124,10 +124,10 @@ const Pagination = class {
         return index.h("span", { class: "page-buttons" }, pageButtons);
     }
     render() {
-        return (index.h(index.Host, { key: '85e2d8d8a0b65799e17d53eaa18f7ffba858fba3' }, index.h("ix-icon-button", { key: 'e77de9c81cf24077466ede7211db3f13caa7f256', disabled: this.selectedPage === 0, ghost: true, icon: 'chevron-left-small', onClick: () => this.decrease() }), this.advanced ? (index.h("div", { class: "advanced-pagination" }, index.h("ix-typography", { variant: "default" }, this.i18nPage), index.h("input", { class: "form-control page-selection", type: "number", min: "1", max: this.count, value: this.selectedPage + 1, onChange: (e) => {
+        return (index.h(index.Host, { key: '0d3ee03dc65b4178ad572d753d2c01f35c853d0e' }, index.h("ix-icon-button", { key: '58af8c5d7a36d3ddf24f1dde1b39cac9c3c2d929', disabled: this.selectedPage === 0, ghost: true, icon: 'chevron-left-small', onClick: () => this.decrease() }), this.advanced ? (index.h("div", { class: "advanced-pagination" }, index.h("ix-typography", { variant: "default" }, this.i18nPage), index.h("input", { class: "form-control page-selection", type: "number", min: "1", max: this.count, value: this.selectedPage + 1, onChange: (e) => {
                 const index = Number.parseInt(e.target['value']);
                 this.selectPage(index - 1);
-            } }), index.h("span", { class: "total-count" }, index.h("ix-typography", { variant: "default" }, this.i18nOf, " ", this.count)))) : (index.h("span", { class: "basic-pagination" }, this.renderPageButtons(), " ")), index.h("ix-icon-button", { key: 'dfa3fcd219a8817e304adfecd8d1a84cce8dd580', disabled: this.selectedPage === this.count - 1, ghost: true, icon: 'chevron-right-small', onClick: () => this.increase() }), this.advanced && this.showItemCount ? (index.h("span", { class: "item-count" }, index.h("ix-typography", { variant: "default" }, this.i18nItems), index.h("ix-select", { hideListHeader: true, i18nPlaceholder: "", i18nSelectListHeader: "", value: `${this.itemCount}`, onValueChange: (e) => {
+            } }), index.h("span", { class: "total-count" }, index.h("ix-typography", { variant: "default" }, this.i18nOf, " ", this.count)))) : (index.h("span", { class: "basic-pagination" }, this.renderPageButtons(), " ")), index.h("ix-icon-button", { key: 'bac7c247befd2262c9c01c95d2feba78dc4dfa12', disabled: this.selectedPage === this.count - 1, ghost: true, icon: 'chevron-right-small', onClick: () => this.increase() }), this.advanced && this.showItemCount ? (index.h("span", { class: "item-count" }, index.h("ix-typography", { variant: "default" }, this.i18nItems), index.h("ix-select", { hideListHeader: true, i18nPlaceholder: "", i18nSelectListHeader: "", value: `${this.itemCount}`, onValueChange: (e) => {
                 const count = Number.parseInt(Array.isArray(e.detail) ? e.detail[0] : e.detail);
                 this.itemCountChanged.emit(count);
             } }, index.h("ix-select-item", { label: "10", value: "10" }), index.h("ix-select-item", { label: "15", value: "15" }), index.h("ix-select-item", { label: "20", value: "20" }), index.h("ix-select-item", { label: "40", value: "40" }), index.h("ix-select-item", { label: "100", value: "100" })))) : ('')));

package/dist/cjs/ix-pane-layout.cjs.entry.js

@@ -229,7 +229,7 @@ const Panes = class {
         return pane ? pane.floating : false;
     }
     render() {
-        return (index.h(index.Host, { key: '90da4f25bcad07a3a2a4bfc551a129deac824d84' }, !this.isMobile ? (this.layout == 'full-vertical' ? (index.h("div", { class: "side-panes-wrapper" }, index.h("div", { class: {
+        return (index.h(index.Host, { key: '4167dc285dcf1adaf15f0eb3b9f6692e27918b43' }, !this.isMobile ? (this.layout == 'full-vertical' ? (index.h("div", { class: "side-panes-wrapper" }, index.h("div", { class: {
                 row: true,
                 'padding-left': this.hasPadding('left'),
                 'padding-right': this.hasPadding('right'),

package/dist/cjs/ix-pill.cjs.entry.js

@@ -27,13 +27,13 @@ const Pill = class {
                 [this.outline ? 'borderColor' : 'backgroundColor']: this.background,
             };
         }
-        return (index.h(index.Host, { key: 'a16d4165f6412fa48a0bb642b0ba1980ef2e9775', style: this.variant === 'custom'
+        return (index.h(index.Host, { key: 'd7aa88991ef6b8cf39358e65a3c3745d9b6cf112', style: this.variant === 'custom'
                 ? {
                     '--ix-icon-button-color': (_b = this.pillColor) !== null && _b !== void 0 ? _b : this.color,
                 }
                 : {}, title: this.el.textContent, class: {
                 'align-left': this.alignLeft,
-            } }, index.h("div", { key: 'f700d598c5f02e2e8090798337bf47ec10abda39', style: Object.assign({}, customStyle), class: {
+            } }, index.h("div", { key: '490ecb6d8560e39541d50b5d538608adef939dcf', style: Object.assign({}, customStyle), class: {
                 container: true,
                 outline: this.outline,
                 inactive: false,
@@ -47,10 +47,10 @@ const Pill = class {
                 custom: this.variant === 'custom',
                 closable: false,
                 icon: !!this.icon,
-            } }, index.h("ix-icon", { key: '599c7381a83a567637f0f2584596d2ba8745df82', class: {
+            } }, index.h("ix-icon", { key: 'd615b73a2bdd35fa67409e0783324abd2fc02f21', class: {
                 'with-icon': true,
                 hidden: this.icon === undefined || this.icon === '',
-            }, name: this.icon, size: '16' }), index.h("span", { key: '65760423d94f21f1d3286f80fba0139338bd10ba', class: "slot-container" }, index.h("slot", { key: 'f7c2b9dec75d1042a1d98168d3be90a509b7b0d3' })))));
+            }, name: this.icon, size: '16' }), index.h("span", { key: '8c4f149571ae115af0cc264634f03633988d7871', class: "slot-container" }, index.h("slot", { key: '582ff33fd2b1cd6de42d4febbcd7f2ad31be0e02' })))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ix-playground-internal.cjs.entry.js

@@ -12,7 +12,7 @@ const PlaygroundInternal = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return index.h(index.Host, { key: 'd1a5b02febd62dcc43ea13c0a531990ec5fe2156' });
+        return index.h(index.Host, { key: '64dc9d49b33337f3f1fbfef272dbe26bc08a17a8' });
     }
 };
 PlaygroundInternal.style = IxPlaygroundInternalStyle0;

package/dist/cjs/ix-select.cjs.entry.js

@@ -3,9 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-c6f0ac73.js');
+const focus = require('./focus-9c8ffbb0.js');
 const listener = require('./listener-d27acb41.js');
+const mutationObserver = require('./mutation-observer-babb20a5.js');
 
-const selectCss = ":host{display:inline-block;position:relative;min-height:2rem;height:auto;border-radius:var(--theme-input--border-radius)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .d-none{display:none}:host .select{position:relative;display:flex;align-items:center;background-color:var(--theme-input--background);border:var(--theme-input--border-thickness) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);padding:0 0 0 0.5rem;box-shadow:var(--theme-inset-shadow-1) !important}:host .select:not(.disabled):not(:disabled){cursor:pointer}:host .select:not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover)}:host .select:focus-within{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline:1px solid #119fff;outline-offset:var(--theme-input--focus--outline-offset)}:host .select.readonly{box-shadow:none !important;border:none;border-radius:0px;border-bottom:var(--theme-input--border-thickness) solid var(--theme-color-weak-bdr)}:host .select.readonly,:host .select.readonly:hover,:host .select.readonly:active{background-color:transparent !important}:host .select.readonly:focus,:host .select.readonly:focus-within,:host .select.readonly:focus-visible{outline:none}:host .select.readonly input{color:var(--theme-color-weak-text)}:host .select.readonly input:focus,:host .select.readonly input:focus-visible{outline:none}:host .hidden{display:none !important}:host .trigger{display:flex;align-items:center;flex-grow:1;height:100%}:host .input-container{display:flex;position:relative;align-items:flex-start;width:100%;height:100%}:host .input-container .chips{position:relative;display:flex;align-items:center;flex-wrap:wrap;height:100%;max-height:3.5rem;flex-grow:1;overflow-y:auto}:host .input-container .chips>ix-filter-chip{margin:0.1rem}:host .input-container input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);background:transparent;height:1.75rem;width:100%}:host .input-container input,:host .input-container input:hover,:host .input-container input:focus-visible{border:none;outline:none}:host .input-container input::-moz-placeholder{color:var(--theme-input-select-icon--color)}:host .input-container input::placeholder{color:var(--theme-input-select-icon--color)}:host .input-container input.hide-placeholder::-moz-placeholder{opacity:0}:host .input-container input.hide-placeholder::placeholder{opacity:0}:host .dropdown-visible{--ix-icon-button-color:var(--theme-color-dynamic--hover)}:host .add-item{display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%}:host .select-list-header{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;height:2rem;color:var(--theme-select-list-item-hint--color);margin:0 0.5rem 0 1rem}";
+const selectCss = ":host{display:inline-block;position:relative;min-height:2rem;height:auto;border-radius:var(--theme-input--border-radius)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .d-none{display:none}:host .select{position:relative;display:flex;align-items:center;background-color:var(--theme-input--background);border:var(--theme-input--border-thickness) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);padding:0 0 0 0.5rem;box-shadow:var(--theme-inset-shadow-1) !important}:host .select:not(.disabled):not(:disabled){cursor:pointer}:host .select:not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover)}:host .select:focus-within{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline:1px solid #119fff;outline-offset:var(--theme-input--focus--outline-offset)}:host .select.readonly,:host .select.disabled{box-shadow:none !important;border:none;border-radius:0;cursor:pointer}:host .select.readonly,:host .select.readonly:hover,:host .select.readonly:active,:host .select.disabled,:host .select.disabled:hover,:host .select.disabled:active{background-color:transparent !important}:host .select.readonly:focus,:host .select.readonly:focus-within,:host .select.readonly:focus-visible,:host .select.disabled:focus,:host .select.disabled:focus-within,:host .select.disabled:focus-visible{outline:none}:host .select.readonly input:focus,:host .select.readonly input:focus-visible,:host .select.disabled input:focus,:host .select.disabled input:focus-visible{outline:none}:host .select.disabled{border-bottom:var(--theme-input--border-thickness) solid var(--theme-color-weak-bdr)}:host .select.disabled input{color:var(--theme-color-weak-text)}:host .select.readonly{border-bottom:var(--theme-input--border-thickness) solid var(--theme-color-soft-bdr)}:host .select.readonly input{color:var(--theme-color-std-text)}:host .hidden{display:none !important}:host .trigger{display:flex;align-items:center;flex-grow:1;height:100%}:host .input-container{display:flex;position:relative;align-items:flex-start;width:100%;height:100%}:host .input-container .chips{position:relative;display:flex;align-items:center;flex-wrap:wrap;height:100%;max-height:3.5rem;flex-grow:1;overflow-y:auto}:host .input-container .chips>ix-filter-chip{margin:0.1rem}:host .input-container input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);background:transparent;height:1.75rem;width:100%}:host .input-container input,:host .input-container input:hover,:host .input-container input:focus-visible{border:none;outline:none}:host .input-container input::-moz-placeholder{color:var(--theme-input-select-icon--color)}:host .input-container input::placeholder{color:var(--theme-input-select-icon--color)}:host .input-container input.hide-placeholder::-moz-placeholder{opacity:0}:host .input-container input.hide-placeholder::placeholder{opacity:0}:host .dropdown-visible{--ix-icon-button-color:var(--theme-color-dynamic--hover)}:host .add-item{display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%}:host .select-list-header{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;height:2rem;color:var(--theme-select-list-item-hint--color);margin:0 0.5rem 0 1rem}";
 const IxSelectStyle0 = selectCss;
 
 /*
@@ -33,6 +35,10 @@ const Select = class {
         this.itemSelectionChange = index.createEvent(this, "itemSelectionChange", 7);
         this.inputChange = index.createEvent(this, "inputChange", 7);
         this.addItem = index.createEvent(this, "addItem", 7);
+        this.focusControllerCallbackBind = this.focusDropdownItem.bind(this);
+        this.itemObserver = mutationObserver.createMutationObserver(() => {
+            this.arrowFocusController.items = this.visibleNonShadowItems;
+        });
         this.selectedIndices = undefined;
         this.value = undefined;
         this.allowClear = false;
@@ -50,16 +56,27 @@ const Select = class {
         this.dropdownWrapperRef = undefined;
         this.dropdownAnchor = undefined;
         this.isDropdownEmpty = false;
-        this.hasFocus = false;
         this.navigationItem = undefined;
         this.inputFilterText = undefined;
         this.inputValue = undefined;
     }
+    get nonShadowItems() {
+        return Array.from(this.hostElement.querySelectorAll('ix-select-item'));
+    }
+    get visibleNonShadowItems() {
+        return this.nonShadowItems.filter((item) => !item.classList.contains('d-none'));
+    }
+    get shadowItems() {
+        return Array.from(this.hostElement.shadowRoot.querySelectorAll('ix-select-item'));
+    }
+    get visibleShadowItems() {
+        return this.shadowItems.filter((item) => !item.classList.contains('d-none'));
+    }
     get items() {
-        return [
-            ...Array.from(this.hostElement.querySelectorAll('ix-select-item')),
-            ...Array.from(this.hostElement.shadowRoot.querySelectorAll('ix-select-item')),
-        ];
+        return [...this.nonShadowItems, ...this.shadowItems];
+    }
+    get visibleItems() {
+        return this.items.filter((item) => !item.classList.contains('d-none'));
     }
     get selectedItems() {
         return this.items.filter((item) => item.selected);
@@ -84,23 +101,48 @@ const Select = class {
         this.selectedIndices = value;
         this.updateSelection();
     }
+    watchDropdownShow(show) {
+        if (show) {
+            this.arrowFocusController = new focus.ArrowFocusController(this.visibleNonShadowItems, this.dropdownRef, this.focusControllerCallbackBind);
+            this.arrowFocusController.wrap = !this.editable;
+            this.itemObserver.observe(this.dropdownRef, {
+                childList: true,
+                subtree: true,
+            });
+        }
+        else {
+            this.arrowFocusController.disconnect();
+            this.arrowFocusController = undefined;
+            this.itemObserver.disconnect();
+        }
+    }
     onItemClicked(event) {
         const newId = event.detail;
         this.itemClick(newId);
     }
+    focusDropdownItem(index) {
+        var _a;
+        this.navigationItem = undefined;
+        if (index < this.visibleNonShadowItems.length) {
+            const nestedDropdownItem = (_a = this.visibleNonShadowItems[index]) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('ix-dropdown-item');
+            requestAnimationFrame(() => {
+                nestedDropdownItem.shadowRoot.querySelector('button').focus();
+            });
+        }
+    }
     itemClick(newId) {
         this.value = this.toggleValue(newId);
         this.updateSelection();
         this.emitValueChange();
     }
     emitAddItem(value) {
-        if (value.trim() === '') {
+        if (value === undefined || value.trim() === '') {
             return;
         }
         const newItem = document.createElement('ix-select-item');
         newItem.value = value;
         newItem.label = value;
-        this.addItemRef.appendChild(newItem);
+        this.customItemsContainerRef.appendChild(newItem);
         this.clearInput();
         this.itemClick(value);
         this.addItem.emit(value);
@@ -138,10 +180,9 @@ const Select = class {
                     : ''));
         });
         this.selectedLabels = this.selectedItems.map((item) => item.label);
-        if (this.isSingleMode) {
-            this.inputValue = ((_a = this.selectedLabels) === null || _a === void 0 ? void 0 : _a.length)
-                ? this.selectedLabels[0]
-                : null;
+        if (this.isSingleMode && ((_a = this.selectedLabels) === null || _a === void 0 ? void 0 : _a.length)) {
+            this.inputValue = this.selectedLabels[0];
+            this.inputRef && (this.inputRef.value = this.inputValue);
             return;
         }
         this.inputValue = null;
@@ -173,8 +214,8 @@ const Select = class {
         this.updateSelection();
     }
     disconnectedCallback() {
-        if (this.labelMutationObserver) {
-            this.labelMutationObserver.disconnect();
+        if (this.itemMutationObserver) {
+            this.itemMutationObserver.disconnect();
         }
     }
     itemExists(item) {
@@ -182,7 +223,6 @@ const Select = class {
     }
     dropdownVisibilityChanged(event) {
         this.dropdownShow = event.detail;
-        this.hasFocus = event.detail;
         if (event.detail) {
             this.inputRef.focus();
             this.inputRef.select();
@@ -191,11 +231,13 @@ const Select = class {
         }
         else {
             this.navigationItem = undefined;
+            this.updateSelection();
+            this.inputFilterText = '';
         }
     }
     async onKeyDown(event) {
         if (event.code === 'ArrowDown' || event.code === 'ArrowUp') {
-            this.onArrowNavigation(event, event.code);
+            await this.onArrowNavigation(event, event.code);
         }
         if (!this.dropdownShow) {
             return;
@@ -208,38 +250,101 @@ const Select = class {
         }
     }
     async onEnterNavigation() {
-        var _a, _b;
+        var _a;
         if (this.isMultipleMode) {
             return;
         }
+        let item;
         if (this.editable && !this.itemExists(this.inputFilterText)) {
             this.emitAddItem(this.inputFilterText);
-            this.navigationItem = this.items[this.items.length - 1];
+            item = this.items[this.items.length - 1];
+        }
+        if (item) {
+            item.onItemClick();
         }
-        (_a = this.navigationItem) === null || _a === void 0 ? void 0 : _a.onItemClick();
-        await ((_b = this.dropdownRef) === null || _b === void 0 ? void 0 : _b.updatePosition());
+        await ((_a = this.dropdownRef) === null || _a === void 0 ? void 0 : _a.updatePosition());
         if (this.isSingleMode && !this.editable) {
             this.dropdownShow = false;
         }
     }
-    onArrowNavigation(event, key) {
+    async onArrowNavigation(event, key) {
+        if (event.defaultPrevented) {
+            return;
+        }
         event.preventDefault();
         event.stopPropagation();
         this.dropdownShow = true;
-        const items = this.items.filter((i) => !i.classList.contains('d-none'));
-        if (this.navigationItem === undefined) {
-            this.applyFocusTo(items[0]);
+        if (!this.navigationItem && document.activeElement === this.hostElement) {
+            if (this.visibleItems.length) {
+                this.applyFocusTo(this.visibleItems.shift());
+            }
+            else if (this.isAddItemVisible()) {
+                this.focusAddItemButton();
+            }
             return;
         }
-        let indexOfNavigationItem = items.findIndex((item) => item === this.navigationItem);
-        if (key === 'ArrowDown') {
-            indexOfNavigationItem++;
+        const moveUp = key === 'ArrowUp';
+        const indexNonShadow = this.visibleNonShadowItems.indexOf(document.activeElement);
+        // Slotted select items
+        if (indexNonShadow === 0) {
+            if (!this.visibleShadowItems.length && this.isAddItemVisible()) {
+                this.focusAddItemButton();
+            }
+            else {
+                this.applyFocusTo(this.visibleShadowItems.pop());
+            }
+            return;
+        }
+        else if (indexNonShadow !== -1 &&
+            indexNonShadow === this.visibleNonShadowItems.length - 1) {
+            if (this.visibleShadowItems.length) {
+                this.applyFocusTo(this.visibleShadowItems.shift());
+            }
+            else if (this.isAddItemVisible()) {
+                this.focusAddItemButton();
+            }
+            return;
+        }
+        if (this.isAddItemVisible() &&
+            this.addItemRef.contains(await this.navigationItem.getDropdownItemElement())) {
+            if (moveUp) {
+                this.applyFocusTo(this.visibleItems.pop());
+            }
+            else {
+                if (this.visibleItems.length) {
+                    this.applyFocusTo(this.visibleItems.shift());
+                }
+            }
+            return;
+        }
+        // Custom select items
+        const indexShadow = this.visibleShadowItems.indexOf(this.navigationItem);
+        if (moveUp) {
+            if (indexShadow === 0) {
+                if (this.visibleNonShadowItems.length) {
+                    this.applyFocusTo(this.visibleNonShadowItems.pop());
+                }
+                else if (this.isAddItemVisible()) {
+                    this.focusAddItemButton();
+                }
+            }
+            else {
+                this.applyFocusTo(this.visibleShadowItems[indexShadow - 1]);
+            }
         }
         else {
-            indexOfNavigationItem--;
+            if (indexShadow === this.visibleShadowItems.length - 1) {
+                if (this.isAddItemVisible()) {
+                    this.focusAddItemButton();
+                }
+                else {
+                    this.applyFocusTo(this.visibleItems.shift());
+                }
+            }
+            else {
+                this.applyFocusTo(this.visibleShadowItems[indexShadow + 1]);
+            }
         }
-        const newFocusItem = items[indexOfNavigationItem];
-        this.applyFocusTo(newFocusItem);
     }
     applyFocusTo(element) {
         if (!element) {
@@ -253,6 +358,12 @@ const Select = class {
                 .focus();
         });
     }
+    focusAddItemButton() {
+        if (this.addItemButton) {
+            this.addItemButton.shadowRoot.querySelector('button').focus();
+            this.navigationItem = this.addItemRef;
+        }
+    }
     filterItemsWithTypeahead() {
         this.inputFilterText = this.inputRef.value;
         if (this.isSingleMode && this.inputFilterText === this.selectedLabels[0]) {
@@ -269,6 +380,9 @@ const Select = class {
         else {
             this.removeHiddenFromItems();
         }
+        if (this.arrowFocusController) {
+            this.arrowFocusController.items = this.visibleNonShadowItems;
+        }
         this.isDropdownEmpty = this.isEveryDropdownItemHidden;
     }
     removeHiddenFromItems() {
@@ -299,12 +413,15 @@ const Select = class {
         }
     }
     placeholderValue() {
-        if (this.editable) {
-            return this.i18nPlaceholderEditable;
+        if (this.disabled) {
+            return '';
         }
         if (this.readonly) {
             return '';
         }
+        if (this.editable) {
+            return this.i18nPlaceholderEditable;
+        }
         return this.i18nPlaceholder;
     }
     isAddItemVisible() {
@@ -314,7 +431,7 @@ const Select = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: 'c3436b72b89db710173be26ccc34d44eaef48096' }, index.h("div", { key: '19b6245bdbd79faa3d4bbf25a4d106e2084875d9', class: {
+        return (index.h(index.Host, { key: '7708ebeef204960e387864c06de4cf3d0d92620b' }, index.h("div", { key: '76ae70f1d3e1c3988a8db625b8c41626dcc0b28e', class: {
                 select: true,
                 disabled: this.disabled,
                 readonly: this.readonly,
@@ -322,13 +439,13 @@ const Select = class {
                 this.dropdownAnchor = ref;
                 if (!this.editable)
                     this.dropdownWrapperRef = ref;
-            } }, index.h("div", { key: '283b9918b77987f4a5c943eeba63679cb4cd979c', class: "input-container" }, index.h("div", { key: 'eb809d645c40ae085805d0ec3fcbbb48534cfb2c', class: "chips" }, this.isMultipleMode
+            } }, index.h("div", { key: '4cc234c24f76895f3dbc4a004c748352ef8aaa33', class: "input-container" }, index.h("div", { key: '066c71f9a1ead8f39685ea66fb1c83c6ad45f6a6', class: "chips" }, this.isMultipleMode
             ? (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => (index.h("ix-filter-chip", { disabled: this.disabled || this.readonly, key: item.value, onCloseClick: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     this.itemClick(item.value);
                 } }, item.label)))
-            : '', index.h("div", { key: 'e2faa64250d72d63afaf05139a0f6ed144097f69', class: "trigger" }, index.h("input", { key: '3aa2890f133b801bb14f8cc9d568cbee3eb83d13', autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, type: "text", class: {
+            : '', index.h("div", { key: '513a21a42da236852e5baa0dd15246f6108fcb0e', class: "trigger" }, index.h("input", { key: '7e059a58466f1ef24af5465a31842dc373be681c', autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, type: "text", class: {
                 'allow-clear': this.allowClear && !!((_b = this.selectedLabels) === null || _b === void 0 ? void 0 : _b.length),
             }, placeholder: this.placeholderValue(), value: this.inputValue, ref: (ref) => (this.inputRef = ref), onBlur: (e) => this.onInputBlur(e), onFocus: () => {
                 this.navigationItem = undefined;
@@ -340,27 +457,30 @@ const Select = class {
             } })) : null, this.disabled || this.readonly ? null : (index.h("ix-icon-button", { "data-select-dropdown": true, class: { 'dropdown-visible': this.dropdownShow }, icon: "chevron-down-small", ghost: true, ref: (ref) => {
                 if (this.editable)
                     this.dropdownWrapperRef = ref;
-            } })))))), index.h("ix-dropdown", { key: '571d47a09fb16445a94a304e9fae4a1a592d078b', ref: (ref) => (this.dropdownRef = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
+            } })))))), index.h("ix-dropdown", { key: '90d7f4d393e170384c3849a81cc2d0f9cafdaba4', ref: (ref) => (this.dropdownRef = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
                 'd-none': this.disabled || this.readonly,
             }, anchor: this.dropdownAnchor, trigger: this.dropdownWrapperRef, onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "bottom-start", overwriteDropdownStyle: async () => {
                 return {
                     minWidth: `${this.hostElement.clientWidth}px`,
                 };
-            } }, index.h("div", { key: '2751511a275b502709f59e600eb494cf33085d80', class: {
+            } }, index.h("div", { key: '5ca9e64a4bd8b566e33717f2d2bac21f86638aeb', class: {
                 'select-list-header': true,
                 hidden: this.hideListHeader || this.isDropdownEmpty,
-            }, title: this.i18nSelectListHeader }, this.i18nSelectListHeader), index.h("slot", { key: '8f894985df712df0f0b0d4527ee7b136d2c84a60' }), index.h("div", { key: '4edce84e19a13a67defc8de67ca1e23fb7319be7', ref: (ref) => (this.addItemRef = ref), class: "d-contents" }), this.isAddItemVisible() ? (index.h("ix-dropdown-item", { "data-testid": "add-item", icon: 'plus', class: {
+            }, title: this.i18nSelectListHeader }, this.i18nSelectListHeader), index.h("slot", { key: 'c2b10c1b09dd64eb0ab0a6bc51d43f98e876031a' }), index.h("div", { key: 'a7076d2f894af20584a45109b397b0362ea6f6a5', ref: (ref) => (this.customItemsContainerRef = ref), class: "d-contents" }), this.isAddItemVisible() ? (index.h("ix-dropdown-item", { "data-testid": "add-item", icon: 'plus', class: {
                 'add-item': true,
             }, label: this.inputFilterText, onItemClick: (e) => {
                 e.preventDefault();
                 e.stopPropagation();
                 this.emitAddItem(this.inputFilterText);
+            }, onFocus: () => (this.navigationItem = this.addItemRef), ref: (ref) => {
+                this.addItemRef = ref;
             } })) : null, this.isDropdownEmpty && !this.editable ? (index.h("div", { class: "select-list-header" }, this.i18nNoMatches)) : (''))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
         "selectedIndices": ["watchSelectedIndices"],
-        "value": ["watchValue"]
+        "value": ["watchValue"],
+        "dropdownShow": ["watchDropdownShow"]
     }; }
 };
 __decorate([