@siemens/ix 0.0.0-20240419081748 → 0.0.0-20240508065324

package/components/ix-menu.js

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

package/components/ix-message-bar.js

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

package/components/ix-modal-example.js

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

package/components/ix-modal-footer.js

@@ -10,7 +10,7 @@ const ModalFooter = /*@__PURE__*/ proxyCustomElement(class ModalFooter extends H
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: '798888b92e40b6c7fe43eddfc94437d8fc8a49c8' }, h("slot", { key: '2da276a8b43f061d07f85953e1e54e144944267e' })));
+        return (h(Host, { key: '10d32ee56938d12d5300cc8bccb401a4492ddb85' }, h("slot", { key: '63b0a1b1611bfd377192b6f49e22fc22861f809b' })));
     }
     static get style() { return IxModalFooterStyle0; }
 }, [1, "ix-modal-footer"]);

package/components/ix-modal-loading.js

@@ -11,7 +11,7 @@ const ModalLoading = /*@__PURE__*/ proxyCustomElement(class ModalLoading extends
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: '9333078e1c22a3307abb022ca8cf761667ce9d95' }, h("ix-spinner", { key: '895d205873c13dfa9257627094b67a9bfb40e04a', variant: "primary" }), h("span", { key: '9c84db0939e4f9fbf359425251103ce9ba2cd968', class: 'loading-text' }, h("slot", { key: 'b2fa68d8d6ab862b88cf7deadc4249c2775fd6e6' }))));
+        return (h(Host, { key: 'f6d440918bef7125ac06449ab6d0cd4088f5fefb' }, h("ix-spinner", { key: '3efc2e66c193f2af94f4f5d6dc3e91daa2049008', variant: "primary" }), h("span", { key: '4d81c46bedae034801a35637ca78bd8f2b618124', class: 'loading-text' }, h("slot", { key: '90bf6e1aeac791f70c203fb6bf32dcb7cb313719' }))));
     }
     static get style() { return IxModalLoadingStyle0; }
 }, [1, "ix-modal-loading"]);

package/components/ix-pagination.js

@@ -130,10 +130,10 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
         return h("span", { class: "page-buttons" }, pageButtons);
     }
     render() {
-        return (h(Host, { key: '85e2d8d8a0b65799e17d53eaa18f7ffba858fba3' }, h("ix-icon-button", { key: 'e77de9c81cf24077466ede7211db3f13caa7f256', disabled: this.selectedPage === 0, ghost: true, icon: 'chevron-left-small', onClick: () => this.decrease() }), this.advanced ? (h("div", { class: "advanced-pagination" }, h("ix-typography", { variant: "default" }, this.i18nPage), h("input", { class: "form-control page-selection", type: "number", min: "1", max: this.count, value: this.selectedPage + 1, onChange: (e) => {
+        return (h(Host, { key: '0d3ee03dc65b4178ad572d753d2c01f35c853d0e' }, h("ix-icon-button", { key: '58af8c5d7a36d3ddf24f1dde1b39cac9c3c2d929', disabled: this.selectedPage === 0, ghost: true, icon: 'chevron-left-small', onClick: () => this.decrease() }), this.advanced ? (h("div", { class: "advanced-pagination" }, h("ix-typography", { variant: "default" }, this.i18nPage), 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);
-            } }), h("span", { class: "total-count" }, h("ix-typography", { variant: "default" }, this.i18nOf, " ", this.count)))) : (h("span", { class: "basic-pagination" }, this.renderPageButtons(), " ")), 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 ? (h("span", { class: "item-count" }, h("ix-typography", { variant: "default" }, this.i18nItems), h("ix-select", { hideListHeader: true, i18nPlaceholder: "", i18nSelectListHeader: "", value: `${this.itemCount}`, onValueChange: (e) => {
+            } }), h("span", { class: "total-count" }, h("ix-typography", { variant: "default" }, this.i18nOf, " ", this.count)))) : (h("span", { class: "basic-pagination" }, this.renderPageButtons(), " ")), 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 ? (h("span", { class: "item-count" }, h("ix-typography", { variant: "default" }, this.i18nItems), 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);
             } }, h("ix-select-item", { label: "10", value: "10" }), h("ix-select-item", { label: "15", value: "15" }), h("ix-select-item", { label: "20", value: "20" }), h("ix-select-item", { label: "40", value: "40" }), h("ix-select-item", { label: "100", value: "100" })))) : ('')));

package/components/ix-pane-layout.js

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

package/components/ix-pill.js

@@ -25,13 +25,13 @@ const Pill = /*@__PURE__*/ proxyCustomElement(class Pill extends HTMLElement {
                 [this.outline ? 'borderColor' : 'backgroundColor']: this.background,
             };
         }
-        return (h(Host, { key: 'a16d4165f6412fa48a0bb642b0ba1980ef2e9775', style: this.variant === 'custom'
+        return (h(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,
-            } }, h("div", { key: 'f700d598c5f02e2e8090798337bf47ec10abda39', style: Object.assign({}, customStyle), class: {
+            } }, h("div", { key: '490ecb6d8560e39541d50b5d538608adef939dcf', style: Object.assign({}, customStyle), class: {
                 container: true,
                 outline: this.outline,
                 inactive: false,
@@ -45,10 +45,10 @@ const Pill = /*@__PURE__*/ proxyCustomElement(class Pill extends HTMLElement {
                 custom: this.variant === 'custom',
                 closable: false,
                 icon: !!this.icon,
-            } }, h("ix-icon", { key: '599c7381a83a567637f0f2584596d2ba8745df82', class: {
+            } }, h("ix-icon", { key: 'd615b73a2bdd35fa67409e0783324abd2fc02f21', class: {
                 'with-icon': true,
                 hidden: this.icon === undefined || this.icon === '',
-            }, name: this.icon, size: '16' }), h("span", { key: '65760423d94f21f1d3286f80fba0139338bd10ba', class: "slot-container" }, h("slot", { key: 'f7c2b9dec75d1042a1d98168d3be90a509b7b0d3' })))));
+            }, name: this.icon, size: '16' }), h("span", { key: '8c4f149571ae115af0cc264634f03633988d7871', class: "slot-container" }, h("slot", { key: '582ff33fd2b1cd6de42d4febbcd7f2ad31be0e02' })))));
     }
     get el() { return this; }
     static get style() { return IxPillStyle0; }

package/components/ix-playground-internal.js

@@ -9,7 +9,7 @@ const PlaygroundInternal = /*@__PURE__*/ proxyCustomElement(class PlaygroundInte
         this.__registerHost();
     }
     render() {
-        return h(Host, { key: 'd1a5b02febd62dcc43ea13c0a531990ec5fe2156' });
+        return h(Host, { key: '64dc9d49b33337f3f1fbfef272dbe26bc08a17a8' });
     }
     static get style() { return IxPlaygroundInternalStyle0; }
 }, [2, "ix-playground-internal"]);

package/components/ix-split-button-item.js

@@ -20,7 +20,7 @@ const SplitButtonItem = /*@__PURE__*/ proxyCustomElement(class SplitButtonItem e
         return this.wrapperRef.waitForCurrent();
     }
     render() {
-        return (h(Host, { key: 'b7360859acb51da295ef29d514e8d4dbef347931' }, h("ix-dropdown-item", { key: '1c47e6937a8a686da1bb0b028daa0fef1b711f4e', ref: this.wrapperRef, suppressChecked: true, icon: this.icon, label: this.label, onItemClick: (e) => {
+        return (h(Host, { key: 'ef07b2d6b51ae7356319d47e610517676651f2ae' }, h("ix-dropdown-item", { key: '83b4d7597071c2337aae657211c2c093fabe5eb1', ref: this.wrapperRef, suppressChecked: true, icon: this.icon, label: this.label, onItemClick: (e) => {
                 e.preventDefault();
                 e.stopPropagation();
             }, onClick: (e) => this.itemClick.emit(e) })));

package/components/ix-tile.js

@@ -19,17 +19,17 @@ const Tile = /*@__PURE__*/ proxyCustomElement(class Tile extends HTMLElement {
         this.hasFooterSlot = !!this.hostElement.querySelector('[slot="footer"]');
     }
     render() {
-        return (h(Host, { key: 'c0d60ca326a0a16f2255ae8a755f03a86c4c2bdf', class: {
+        return (h(Host, { key: '16fa86cdf2448b3335401be00cba0284fd166959', class: {
                 'tile-small': this.size === 'small',
                 'tile-medium': this.size === 'medium',
                 'tile-big': this.size === 'big',
-            } }, h("div", { key: 'b43e41051b62b8146749b884c9d611f79b6bf9c8', class: {
+            } }, h("div", { key: '0aaf6e763e1bd75f919d1067208af8a33be06937', class: {
                 'tile-header': true,
                 'has-content': this.hasHeaderSlot,
-            } }, h("slot", { key: '3dc74cc4beb1b24023463d62daf862c28ba2177a', name: "header", onSlotchange: () => this.handleHeaderSlotChange() })), h("div", { key: '4935b7758861eab0fd305ceccba9d4d3a7cc90de', class: "tile-subheader" }, h("slot", { key: '31d66eb3e361c0b811ab3c0f89976c39f3576629', name: "subheader" })), h("div", { key: '083b54d5455f1015811c904826dda8fb2b35a243', class: "tile-content" }, h("slot", { key: '14c79b5d8365444f234c030c56b2592b7cb38dc8' })), h("div", { key: 'a12114c3593b8032aa4e5d841efc55723deb7b44', class: {
+            } }, h("slot", { key: '70178ba49417bf674cc8798f6824aa37864668f7', name: "header", onSlotchange: () => this.handleHeaderSlotChange() })), h("div", { key: '823a4907cbe143ef6586a5482f31c8729644bf76', class: "tile-subheader" }, h("slot", { key: '6e240f390b24fec6630bed00539479d11d89b096', name: "subheader" })), h("div", { key: '7d83cbe84804423f654e4f9dd0fe3f2ca261a3c4', class: "tile-content" }, h("slot", { key: '100276ea9333c7dd7d183dbd7fb2651475b397cf' })), h("div", { key: 'f73dcff2a9730339deed5c82c0978ff4122dd6a5', class: {
                 'tile-footer': true,
                 'has-content': this.hasFooterSlot,
-            } }, h("slot", { key: 'aa1f08fe633554658a5119cd7d61febb3928e8f4', name: "footer", onSlotchange: () => this.handleFooterSlotChange() }))));
+            } }, h("slot", { key: 'a550b2cc798c1bc8a57adea6c6fcd4863ad9ac57', name: "footer", onSlotchange: () => this.handleFooterSlotChange() }))));
     }
     get hostElement() { return this; }
     static get style() { return IxTileStyle0; }

package/components/ix-toggle-button.js

@@ -60,9 +60,9 @@ const ToggleButton = /*@__PURE__*/ proxyCustomElement(class ToggleButton extends
                 'aria-pressed': a11yBoolean(this.pressed),
             },
         };
-        return (h(Host, { key: 'dfcef75c0ea69b53af7afc1df02915a869b6ef3b', class: {
+        return (h(Host, { key: 'f8633f71b51df3509bc679922b432bd5c530d580', class: {
                 disabled: this.disabled || this.loading,
-            } }, h(BaseButton, Object.assign({ key: 'ea0fbe743f0c3371fb71925be47fc566e5dee37d' }, baseButtonProps), h("slot", { key: '2e6d2c6169978fc567974220437f2a7aa05c62ac' }))));
+            } }, h(BaseButton, Object.assign({ key: '005a4497d2d37783c6dcf2824c471b56515396ed' }, baseButtonProps), h("slot", { key: '9cafada091aa59fd6b447a2821f58ebd504875cd' }))));
     }
     static get watchers() { return {
         "variant": ["onVariantChange"],

package/components/ix-toggle.js

@@ -26,9 +26,9 @@ const Toggle = /*@__PURE__*/ proxyCustomElement(class Toggle extends HTMLElement
         this.checkedChange.emit(this.checked);
     }
     render() {
-        return (h(Host, { key: '4ba9c673e94ffceedf28fbf04a7d136720db55f4', class: {
+        return (h(Host, { key: 'ffc42b6828208dcf6483abfda90ae88dd43ee408', class: {
                 disabled: this.disabled,
-            }, onClick: () => this.onCheckedChange(!this.checked) }, h("input", { key: '38b9f9e4577c54c1f930e93db5958f828e5fe789', disabled: this.disabled, indeterminate: this.indeterminate, checked: this.checked, role: "switch", tabindex: 0, type: "checkbox", "aria-checked": a11yBoolean(this.checked), onChange: (event) => this.onCheckedChange(event.target.checked) }), h("label", { key: '0ec0fa498dde12fc557ab02fc785ef291a803dcd', class: "switch", tabIndex: -1 }, h("span", { key: '8101166f958219372a1ea6e509233b63c0d05ede', class: "slider" })), !this.hideText ? (h(Fragment, null, !this.indeterminate ? (h("span", { class: 'toggle-text', "aria-hidden": a11yBoolean(true) }, this.checked ? this.textOn : this.textOff)) : (h("span", { class: 'toggle-text', "aria-hidden": a11yBoolean(true) }, this.textIndeterminate)))) : null));
+            }, onClick: () => this.onCheckedChange(!this.checked) }, h("input", { key: '35954eafdb6301bb6e7063a8978f2bfcc7076de0', disabled: this.disabled, indeterminate: this.indeterminate, checked: this.checked, role: "switch", tabindex: 0, type: "checkbox", "aria-checked": a11yBoolean(this.checked), onChange: (event) => this.onCheckedChange(event.target.checked) }), h("label", { key: '0aed058713bc742c3408accee2e3551313a1ad31', class: "switch", tabIndex: -1 }, h("span", { key: '62fbfca9e3adb625006e981f4ae655d2989d9aef', class: "slider" })), !this.hideText ? (h(Fragment, null, !this.indeterminate ? (h("span", { class: 'toggle-text', "aria-hidden": a11yBoolean(true) }, this.checked ? this.textOn : this.textOff)) : (h("span", { class: 'toggle-text', "aria-hidden": a11yBoolean(true) }, this.textIndeterminate)))) : null));
     }
     get hostElement() { return this; }
     static get style() { return IxToggleStyle0; }

package/components/ix-tree.js

@@ -698,7 +698,7 @@ const Tree = /*@__PURE__*/ proxyCustomElement(class Tree extends HTMLElement {
         this.hyperlist = new Hyperlist(this.hostElement, config);
     }
     render() {
-        return (h(Host, { key: 'fa198f954c529db834099df3f599ecaf65223365' }, h("slot", { key: '54e63253af180cdd5e1c2c5048bf495475db36de' })));
+        return (h(Host, { key: '5e3f0e8bbd14073590ed9ae548fa51abb50bd52b' }, h("slot", { key: '9e05d42472878f4791cce2033271e1918d40c38f' })));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/components/ix-upload.js

@@ -85,7 +85,7 @@ const Upload = /*@__PURE__*/ proxyCustomElement(class Upload extends HTMLElement
         this.filesToUpload = obj;
     }
     render() {
-        return (h(Host, { key: '24415b4716bc4e6e575668cb5b09f978ebd387d4' }, h("div", { key: '877e983ae775fa95ffd5254b3bb7697db4cd2720', class: {
+        return (h(Host, { key: 'c13c30ad2fa2a251ad872d7b0461f625798a3d2a' }, h("div", { key: '572bf6899630cdc1fdff1518750415270792a368', class: {
                 'file-upload-area': true,
                 'file-over': this.state !== UploadFileState.LOADING && this.isFileOver,
                 checking: this.state === UploadFileState.LOADING,
@@ -95,9 +95,9 @@ const Upload = /*@__PURE__*/ proxyCustomElement(class Upload extends HTMLElement
                 if (this.state !== UploadFileState.LOADING) {
                     this.fileDropped(e);
                 }
-            }, onDragOver: (e) => this.fileOver(e), onDragLeave: () => this.fileLeave(), draggable: !this.disabled }, this.renderUploadState(), h("div", { key: '6828b521609b8698f3ebc78ed83256a4fbb3cfea' }, h("input", { key: 'e825ce2834b93d3ef09100d29d127573eb812cfa', multiple: this.multiple, type: "file", class: "upload-browser", id: "upload-browser", onChange: (e) => {
+            }, onDragOver: (e) => this.fileOver(e), onDragLeave: () => this.fileLeave(), draggable: !this.disabled }, this.renderUploadState(), h("div", { key: '5c48357676e704f0e285e510059593c526ca47fc' }, h("input", { key: '5ed9faca22b46db4962c64ff3822c59d3e44cf95', multiple: this.multiple, type: "file", class: "upload-browser", id: "upload-browser", onChange: (e) => {
                 this.fileChangeEvent(e);
-            }, accept: this.accept }), h("ix-button", { key: '117dd488e465ec542381b38b90d9d6a2ac5afb35', tabindex: "-1", outline: true, onClick: () => this.inputElement.click(), disabled: this.disabled || this.state === UploadFileState.LOADING }, this.i18nUploadFile)))));
+            }, accept: this.accept }), h("ix-button", { key: '6e5bcfec5d982c8674e6bf38bbf1e0d805b1af0f', tabindex: "-1", outline: true, onClick: () => this.inputElement.click(), disabled: this.disabled || this.state === UploadFileState.LOADING }, this.i18nUploadFile)))));
     }
     get hostElement() { return this; }
     static get style() { return IxUploadStyle0; }

package/components/ix-validation-tooltip.js

@@ -131,13 +131,13 @@ const ValidationTooltip = /*@__PURE__*/ proxyCustomElement(class ValidationToolt
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '67aacf7f22d2d165674ab78c2f590c54abe33420' }, h("slot", { key: 'e0c33f6e04e6ce11caeb8dba4318214699de0f4c' }), h("div", { key: '3c5d508386e333a2ca50dc5bfe6ab59375c60e37', role: "tooltip", style: {
+        return (h(Host, { key: '2adabc09b27adab332a05e06f95f778e635db7cf' }, h("slot", { key: '9737aa1f46813f88404c5a80eaf0b8e1c6b166c4' }), h("div", { key: '6be2cd8f7c24bd7c3ddc42218ca0b70d3c56dc0a', role: "tooltip", style: {
                 display: 'none',
                 position: 'fixed',
                 top: '0',
                 left: '0',
                 transform: `translate(${Math.round(((_a = this.tooltipPosition) === null || _a === void 0 ? void 0 : _a.x) || 0)}px,${Math.round(((_b = this.tooltipPosition) === null || _b === void 0 ? void 0 : _b.y) || 0)}px)`,
-            }, class: "validation-tooltip text-default" }, this.message, h("slot", { key: '8e87f49c00ea3916fd83a3b7e69b996311197dcb', name: "tooltip-message" }), h("div", { key: '1bd0d2d368cb7cb0fa113605522fff53831f2c35', id: "arrow" }))));
+            }, class: "validation-tooltip text-default" }, this.message, h("slot", { key: '228c539e4447ce9a4c89ffe584f9b712ccaa1924', name: "tooltip-message" }), h("div", { key: 'cdbaf18c6c2033b9b03e33b4e5826309f504df14', id: "arrow" }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/components/ix-workflow-step.js

@@ -70,18 +70,18 @@ const WorkflowStep = /*@__PURE__*/ proxyCustomElement(class WorkflowStep extends
     }
     render() {
         const icons = !this.customIconSlot ? (h(Fragment, null, h("ix-icon", { color: "color-1", name: this.iconName === 'warning' ? 'triangle-filled' : 'circle-filled', class: "absolute", size: "24" }), h("ix-icon", { color: this.iconColor, name: this.iconName, class: "absolute", size: "24" }))) : null;
-        return (h(Host, { key: '358b9e3e25d832467c9b2abbdf9f48a270a4a340', onClick: () => this.onStepClick() }, h("div", { key: 'e5206e9a7ba4f3a3c63f82199d434f4f66e1f1dc', tabIndex: 0, class: {
+        return (h(Host, { key: 'e6da26c63019f1efd788ac0e6d64e8c669f711b3', onClick: () => this.onStepClick() }, h("div", { key: '607ad21e42070abc412fd4a5313e207f7908d765', tabIndex: 0, class: {
                 step: true,
                 selected: this.selected,
                 vertical: this.vertical,
                 disabled: this.disabled,
                 clickable: this.clickable && !this.disabled,
-            } }, h("div", { key: '26fc906525c73bbfb79053ccfa0c4f7f0a2ececd', class: "wrapper" }, h("div", { key: '3990d45cdf8241bd53a849d11313e877ef82c974', class: {
+            } }, h("div", { key: 'a55397363ac7fdb3579751903e98e4840314a2c7', class: "wrapper" }, h("div", { key: 'b4044cabf368cdb5632727baf1a9040a2ba59296', class: {
                 line: true,
                 selected: this.selected,
                 [this.status]: true,
                 [this.position]: true,
-            } }), h("div", { key: '9d509a30ef4c514c8d71048e9cf29bfe954659ff', class: "iconWrapper" }, icons, h("slot", { key: '61edba63ba2d2f812837fb50f55f8ce184c5821d', name: "custom-icon" }))), h("div", { key: '1e0f1c991dcd3d9d6ca9368ffef196c3133f78ba', class: "text" }, h("slot", { key: 'b758245d47b573e20a6cae6e8d28b1aa030f5b65' })))));
+            } }), h("div", { key: 'da4cbb5b0755dea7c8ff4c45676a5c7da33e0caf', class: "iconWrapper" }, icons, h("slot", { key: '3059dcda912a1fd2d7225dd7c97cf6c7f640b875', name: "custom-icon" }))), h("div", { key: '316a8dbb4b5e8845cca3635b3f2c1bb5ef3ebefd', class: "text" }, h("slot", { key: '9cc1127aa169fb7096b671720160da4a3ab7efc7' })))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/components/ix-workflow-steps.js

@@ -72,7 +72,7 @@ const WorkflowSteps = /*@__PURE__*/ proxyCustomElement(class WorkflowSteps exten
         this.updateSteps();
     }
     render() {
-        return (h(Host, { key: 'fadad485a71a3366872450c53c089d6f4b79702d' }, h("div", { key: 'eda4300c1de1abe221e2051e2d38f3509e682fbe', class: { steps: true, vertical: this.vertical } }, h("slot", { key: 'c79f023401cc03cc5de9117d00de66885987085a' }))));
+        return (h(Host, { key: 'af99c9947b8a4fb552ef46c11366ed39c102d3a4' }, h("div", { key: 'ea41ce20a136ef087fedb7f3fb3c77de2466e881', class: { steps: true, vertical: this.vertical } }, h("slot", { key: 'f24e0e55526b44ada6c922ef79ab0eb581052287' }))));
     }
     get hostElement() { return this; }
     static get style() { return IxWorkflowStepsStyle0; }

package/components/map-navigation-overlay.js

@@ -46,14 +46,14 @@ const MapNavigationOverlay = /*@__PURE__*/ proxyCustomElement(class MapNavigatio
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: 'd9bbc6c5b08a7104ae14233a90d73803a9d711f1' }, h("div", { key: '150555600e31d6a9108c71a79cd59ce10aa8000e', class: "overlay-header" }, h("div", { key: '9a9b9599e9e7e2beabf0b01b699be49357e678fe', class: {
+        return (h(Host, { key: 'c992b5ea02d714ebf9ca9b567c5047d74dc588c7' }, h("div", { key: '6b2312354d083296f7c2daca376d82bd33f50b29', class: "overlay-header" }, h("div", { key: 'be432f47e376532f48a5408f4f080c2a30af9f9c', class: {
                 'color-indicator': true,
                 'd-none': ((_a = this.iconColor) !== null && _a !== void 0 ? _a : this.color) === undefined,
             }, style: {
                 'background-color': ((_b = this.iconColor) !== null && _b !== void 0 ? _b : this.color)
                     ? `var(--theme-${(_c = this.iconColor) !== null && _c !== void 0 ? _c : this.color})`
                     : '',
-            } }), h("div", { key: 'eb2f2c1204e672cbc5d4abeac43b0e88d556a921', class: "overlay-header-content" }, h("ix-icon", { key: '4fc7a68f6826d5c39accd056e322bc9210032e8e', size: "32", name: this.icon }), h("span", { key: '4cfbfacf6e6a9fab19cdf3d162261f5851029db9', class: "overlay-header-title", title: this.name }, this.name)), h("ix-icon-button", { key: 'c77d6dafb88168c83d50dd889dc56305516c0af0', class: "overlay-close", ghost: true, icon: 'close', size: "24", onClick: () => this.closeOverlay() })), h("slot", { key: '01f890dbc18fbc62b76e5f07d6fc0e53edecfd34' })));
+            } }), h("div", { key: '41fe4514c4076704cdad94ccef438401ff7f4e41', class: "overlay-header-content" }, h("ix-icon", { key: '815d0df9d50aa9dd91ccd094a7801c215c0f3f7e', size: "32", name: this.icon }), h("span", { key: '670420d4703b65b39c9b0dc4d9031fadb73934da', class: "overlay-header-title", title: this.name }, this.name)), h("ix-icon-button", { key: '3ef17d0836b665787e22f6e9da0e14ccecc15d52', class: "overlay-close", ghost: true, icon: 'close', size: "24", onClick: () => this.closeOverlay() })), h("slot", { key: '4328f4ab00517bc4de787fc45117c14afc309efb' })));
     }
     get hostElement() { return this; }
     static get style() { return IxMapNavigationOverlayStyle0; }

package/components/menu-avatar-item.js

@@ -20,7 +20,7 @@ const MenuAvatarItem = /*@__PURE__*/ proxyCustomElement(class MenuAvatarItem ext
         return this.dropdownItemRef.waitForCurrent();
     }
     render() {
-        return (h("ix-dropdown-item", { key: '29fc32af98771990e67a0f31197db8d20151d3d0', ref: this.dropdownItemRef, icon: this.icon, label: this.label, onClick: (e) => this.itemClick.emit(e) }));
+        return (h("ix-dropdown-item", { key: 'daf1c8be62496e8c4240eea2394857abb98497d0', ref: this.dropdownItemRef, icon: this.icon, label: this.label, onClick: (e) => this.itemClick.emit(e) }));
     }
     get hostElement() { return this; }
     static get style() { return IxMenuAvatarItemStyle0; }

package/components/menu-expand-icon.js

@@ -36,7 +36,7 @@ const MenuExpandIcon = /*@__PURE__*/ proxyCustomElement(class MenuExpandIcon ext
         return this.getSmallScreenIcon();
     }
     render() {
-        return (h(Host, { key: '36ee1cac55573a7413f6fd89635987a1a38d3a1d', class: {
+        return (h(Host, { key: '01c334cc036c65c1ba58b1eb2266fec201e7204e', class: {
                 expanded: this.expanded,
             } }, this.getMenuIcon()));
     }

package/components/menu-item.js

@@ -87,13 +87,13 @@ const MenuItem = /*@__PURE__*/ proxyCustomElement(class MenuItem extends HTMLEle
                 slot: 'bottom',
             };
         }
-        return (h(Host, Object.assign({ key: 'bfc3aa3ed90de347026711d3af189c0bbe99e1ae', class: {
+        return (h(Host, Object.assign({ key: '777964dc37701b147cba8070470a0dba049ccc9b', class: {
                 disabled: this.disabled,
                 'home-tab': this.home,
                 'bottom-tab': this.bottom,
                 active: this.active,
                 'tab-nested': this.isHostedInsideCategory,
-            } }, extendedAttributes), h("button", { key: '17d3a3ec7b65c596f0eaaa26d0202b38a9ab7023', class: "tab", tabIndex: this.disabled ? -1 : 0, role: "listitem", ref: this.buttonRef }, (this.icon || this.tabIcon) && (h("ix-icon", { class: 'tab-icon', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.tabIcon })), this.notifications ? (h("div", { class: "notification" }, h("div", { class: "pill" }, this.notifications))) : null, h("span", { key: '6289a0f93a7b79580c2962c2e51bf427eeb01183', class: "tab-text text-default" }, this.label, " ", h("slot", { key: 'de9ccad5b97b9603de86791a3a98656a2add17d3' }))), !this.isCategory &&
+            } }, extendedAttributes), h("button", { key: '20f94fbcf3babdadc83c4c2b4a267c6d74266541', class: "tab", tabIndex: this.disabled ? -1 : 0, role: "listitem", ref: this.buttonRef }, (this.icon || this.tabIcon) && (h("ix-icon", { class: 'tab-icon', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.tabIcon })), this.notifications ? (h("div", { class: "notification" }, h("div", { class: "pill" }, this.notifications))) : null, h("span", { key: 'a168fd4927264ce970c52098a6a4a1263db48f6d', class: "tab-text text-default" }, this.label, " ", h("slot", { key: '36a52eb3d0cd6f96c5c3a6f36bffa1593c78fb1c' }))), !this.isCategory &&
             !this.isHostedInsideCategory &&
             !this.menuExpanded && (h("ix-tooltip", { for: this.buttonRef.waitForCurrent(), placement: 'right', showDelay: 1000 }, this.tooltip))));
     }

package/components/modal-content.js

@@ -10,7 +10,7 @@ const ModalContent = /*@__PURE__*/ proxyCustomElement(class ModalContent extends
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: 'a879639cc048dc4388ff5f324c6beaf928089480' }, h("slot", { key: 'b7d7d8afe947646464dd409bcc574cba40c9a1b3' })));
+        return (h(Host, { key: 'ae7d626442e1d32189d5811a76b9921e893a2708' }, h("slot", { key: '09c33581a65e4db3f54ee84f625bf5c601b0178c' })));
     }
     static get style() { return IxModalContentStyle0; }
 }, [1, "ix-modal-content"]);

package/components/modal-header.js

@@ -39,7 +39,7 @@ const ModalHeader = /*@__PURE__*/ proxyCustomElement(class ModalHeader extends H
         this.parentDialog.dismissModal();
     }
     render() {
-        return (h(Host, { key: 'ae262d966e9e69c5c7558190f61928b4c109643f' }, this.icon ? (h("ix-icon", { class: 'modal-icon', name: this.icon, color: this.iconColor })) : null, h("ix-typography", { key: '4ff8195c0b582e37527d793e1e32615cb190e0a5', variant: 'default-title' }, h("slot", { key: '10f9506941a2f34631520d7209612c3cf07dd431' })), !this.hideClose ? (h("ix-icon-button", { onClick: (event) => this.onCloseClick(event), ghost: true, icon: "close", class: 'modal-close' })) : null));
+        return (h(Host, { key: '330fd598a3b07d2f41c9f683923101f77d214fe5' }, this.icon ? (h("ix-icon", { class: 'modal-icon', name: this.icon, color: this.iconColor })) : null, h("ix-typography", { key: 'a07ec792401066c71a1f4d50aa318a38c3fbe0ee', variant: 'default-title' }, h("slot", { key: '9c1ba3358ad6efb9971ed896764441c1a3fc4a89' })), !this.hideClose ? (h("ix-icon-button", { onClick: (event) => this.onCloseClick(event), ghost: true, icon: "close", class: 'modal-close' })) : null));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/components/row.js

@@ -10,7 +10,7 @@ const Row = /*@__PURE__*/ proxyCustomElement(class Row extends HTMLElement {
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: '2466651a95ad4ca4c2871ee034342efb743fe6f5' }, h("slot", { key: 'd1bfd21c5948cc460601e570566d2b321b13b7ba' })));
+        return (h(Host, { key: '1ffd343609151d842c357f2e7663e4c772b8ef5a' }, h("slot", { key: 'f3c73ee49974fb8baa706a9b699fe703166f2f96' })));
     }
     static get style() { return IxRowStyle0; }
 }, [1, "ix-row"]);

package/components/select-item.js

@@ -32,6 +32,10 @@ const SelectItem = /*@__PURE__*/ proxyCustomElement(class SelectItem extends HTM
         this.selected = false;
         this.hover = false;
     }
+    /** @internal */
+    async getDropdownItemElement() {
+        return this.dropdownItem;
+    }
     /**
      * @internal
      * @param event
@@ -41,6 +45,9 @@ const SelectItem = /*@__PURE__*/ proxyCustomElement(class SelectItem extends HTM
         event === null || event === void 0 ? void 0 : event.stopPropagation();
         this.itemClick.emit(this.value);
     }
+    get dropdownItem() {
+        return this.hostElement.querySelector('ix-dropdown-item');
+    }
     componentDidRender() {
         if (this.value === undefined || this.value === null) {
             throw Error('ix-select-item must have a `value` property');
@@ -53,7 +60,7 @@ const SelectItem = /*@__PURE__*/ proxyCustomElement(class SelectItem extends HTM
         }));
     }
     render() {
-        return (h(Host, { key: 'ca61c042dedf75ce6c33406257b9a26072d75865' }, h("ix-dropdown-item", { key: 'ac5bb56f3d7368860379582e4faf1c594dfaeab2', class: {
+        return (h(Host, { key: '89b4b9f70f1157e728d82d981566d3528c96c2da' }, h("ix-dropdown-item", { key: '3d480e6d1d0a0969f50bf6925101819c8cae9a67', class: {
                 'select-item-checked': this.selected,
             }, checked: this.selected, label: this.label ? this.label : this.value, onItemClick: (e) => this.onItemClick(e) })));
     }
@@ -67,6 +74,7 @@ const SelectItem = /*@__PURE__*/ proxyCustomElement(class SelectItem extends HTM
         "value": [520],
         "selected": [4],
         "hover": [4],
+        "getDropdownItemElement": [64],
         "onItemClick": [64]
     }, undefined, {
         "label": ["labelChange"]

package/components/select-item.js.map

@@ -1 +1 @@
-{"file":"select-item.js","mappings":";;;AAAA;;;;;;;;MAQa,4BAA6B,SAAQ,WAGhD;IACA,YAAY,MAA8C;QACxD,KAAK,CAAC,4BAA4B,EAAE;YAClC,OAAO,EAAE,IAAI;YACb,MAAM;SACP,CAAC,CAAC;KACJ;;;ACjBH,MAAM,aAAa,GAAG,4TAA4T,CAAC;AACnV,2BAAe,aAAa;;MC0Bf,UAAU;;;;;;;;wBAmBF,KAAK;qBAKR,KAAK;;;;;;IAYrB,MAAM,WAAW,CAAC,KAA8C;QAC9D,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAc,EAAE,CAAC;QACxB,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,EAAE,CAAC;QAEzB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACjC;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,EAAE;YACnD,MAAM,KAAK,CAAC,6CAA6C,CAAC,CAAC;SAC5D;KACF;IAGD,WAAW,CAAC,QAAgB,EAAE,QAAgB;QAC5C,IAAI,CAAC,WAAW,CAAC,aAAa,CAC5B,IAAI,4BAA4B,CAAC;YAC/B,QAAQ,EAAE,QAAQ;YAClB,QAAQ,EAAE,QAAQ;SACnB,CAAC,CACH,CAAC;KACH;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,yEACE,KAAK,EAAE;gBACL,qBAAqB,EAAE,IAAI,CAAC,QAAQ;aACrC,EACD,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,EAC3C,WAAW,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GACrB,CACf,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/select-item/events.ts","src/components/select-item/select-item.scss?tag=ix-select-item&encapsulation=shadow","src/components/select-item/select-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nexport class IxSelectItemLabelChangeEvent extends CustomEvent<{\n  oldValue: string;\n  newValue: string;\n}> {\n  constructor(detail: { oldValue: string; newValue: string }) {\n    super('ix-select-item:labelChange', {\n      bubbles: true,\n      detail,\n    });\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n  display: block;\n  position: relative;\n\n  > ix-dropdown-item {\n    width: 100%;\n  }\n\n  ix-dropdown-item {\n    color: var(--theme-color-std-text);\n  }\n\n  .select-item-checked {\n    background-color: var(--theme-select-list-item--background--selected);\n    --ix-dropdown-item-checked-color: var(--theme-color-std-text);\n  }\n}\n\n:host(.d-none) {\n  display: none;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { IxSelectItemLabelChangeEvent } from './events';\n\n@Component({\n  tag: 'ix-select-item',\n  styleUrl: 'select-item.scss',\n  shadow: true,\n})\nexport class SelectItem {\n  @Element() hostElement: HTMLIxSelectItemElement;\n\n  /**\n   * Displayed name of the item\n   */\n  @Prop({ reflect: true }) label: string;\n\n  /**\n   * The value of the item.\n   * Important: The select component uses string values to handle selection and will call toString() on this value.\n   * Therefor a string should be passed to value to prevent unexpected behavior.\n   * @deprecated will be changed to type string with next major release (3.0.0)\n   */\n  @Prop({ reflect: true }) value!: any;\n\n  /**\n   * Flag indicating whether the item is selected\n   */\n  @Prop() selected = false;\n\n  /**\n   * @internal\n   */\n  @Prop() hover = false;\n\n  /**\n   * Item clicked\n   */\n  @Event() itemClick: EventEmitter<string>;\n\n  /**\n   * @internal\n   * @param event\n   */\n  @Method()\n  async onItemClick(event?: CustomEvent<HTMLIxDropdownItemElement>) {\n    event?.preventDefault();\n    event?.stopPropagation();\n\n    this.itemClick.emit(this.value);\n  }\n\n  componentDidRender() {\n    if (this.value === undefined || this.value === null) {\n      throw Error('ix-select-item must have a `value` property');\n    }\n  }\n\n  @Watch('label')\n  labelChange(newValue: string, oldValue: string) {\n    this.hostElement.dispatchEvent(\n      new IxSelectItemLabelChangeEvent({\n        newValue: newValue,\n        oldValue: oldValue,\n      })\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-dropdown-item\n          class={{\n            'select-item-checked': this.selected,\n          }}\n          checked={this.selected}\n          label={this.label ? this.label : this.value}\n          onItemClick={(e) => this.onItemClick(e)}\n        ></ix-dropdown-item>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"select-item.js","mappings":";;;AAAA;;;;;;;;MAQa,4BAA6B,SAAQ,WAGhD;IACA,YAAY,MAA8C;QACxD,KAAK,CAAC,4BAA4B,EAAE;YAClC,OAAO,EAAE,IAAI;YACb,MAAM;SACP,CAAC,CAAC;KACJ;;;ACjBH,MAAM,aAAa,GAAG,4TAA4T,CAAC;AACnV,2BAAe,aAAa;;MC2Bf,UAAU;;;;;;;;wBAmBF,KAAK;qBAKR,KAAK;;;IASrB,MAAM,sBAAsB;QAC1B,OAAO,IAAI,CAAC,YAAY,CAAC;KAC1B;;;;;IAOD,MAAM,WAAW,CAAC,KAA8C;QAC9D,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAc,EAAE,CAAC;QACxB,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,eAAe,EAAE,CAAC;QAEzB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACjC;IAED,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;KAC3D;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,EAAE;YACnD,MAAM,KAAK,CAAC,6CAA6C,CAAC,CAAC;SAC5D;KACF;IAGD,WAAW,CAAC,QAAgB,EAAE,QAAgB;QAC5C,IAAI,CAAC,WAAW,CAAC,aAAa,CAC5B,IAAI,4BAA4B,CAAC;YAC/B,QAAQ,EAAE,QAAQ;YAClB,QAAQ,EAAE,QAAQ;SACnB,CAAC,CACH,CAAC;KACH;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,yEACE,KAAK,EAAE;gBACL,qBAAqB,EAAE,IAAI,CAAC,QAAQ;aACrC,EACD,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,EAC3C,WAAW,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GACrB,CACf,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/select-item/events.ts","src/components/select-item/select-item.scss?tag=ix-select-item&encapsulation=shadow","src/components/select-item/select-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nexport class IxSelectItemLabelChangeEvent extends CustomEvent<{\n  oldValue: string;\n  newValue: string;\n}> {\n  constructor(detail: { oldValue: string; newValue: string }) {\n    super('ix-select-item:labelChange', {\n      bubbles: true,\n      detail,\n    });\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n  display: block;\n  position: relative;\n\n  > ix-dropdown-item {\n    width: 100%;\n  }\n\n  ix-dropdown-item {\n    color: var(--theme-color-std-text);\n  }\n\n  .select-item-checked {\n    background-color: var(--theme-select-list-item--background--selected);\n    --ix-dropdown-item-checked-color: var(--theme-color-std-text);\n  }\n}\n\n:host(.d-none) {\n  display: none;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { IxSelectItemLabelChangeEvent } from './events';\nimport { DropdownItemWrapper } from '../dropdown/dropdown-controller';\n\n@Component({\n  tag: 'ix-select-item',\n  styleUrl: 'select-item.scss',\n  shadow: true,\n})\nexport class SelectItem implements DropdownItemWrapper {\n  @Element() hostElement: HTMLIxSelectItemElement;\n\n  /**\n   * Displayed name of the item\n   */\n  @Prop({ reflect: true }) label: string;\n\n  /**\n   * The value of the item.\n   * Important: The select component uses string values to handle selection and will call toString() on this value.\n   * Therefor a string should be passed to value to prevent unexpected behavior.\n   * @deprecated will be changed to type string with next major release (3.0.0)\n   */\n  @Prop({ reflect: true }) value!: any;\n\n  /**\n   * Flag indicating whether the item is selected\n   */\n  @Prop() selected = false;\n\n  /**\n   * @internal\n   */\n  @Prop() hover = false;\n\n  /**\n   * Item clicked\n   */\n  @Event() itemClick: EventEmitter<string>;\n\n  /** @internal */\n  @Method()\n  async getDropdownItemElement(): Promise<HTMLIxDropdownItemElement> {\n    return this.dropdownItem;\n  }\n\n  /**\n   * @internal\n   * @param event\n   */\n  @Method()\n  async onItemClick(event?: CustomEvent<HTMLIxDropdownItemElement>) {\n    event?.preventDefault();\n    event?.stopPropagation();\n\n    this.itemClick.emit(this.value);\n  }\n\n  get dropdownItem() {\n    return this.hostElement.querySelector('ix-dropdown-item');\n  }\n\n  componentDidRender() {\n    if (this.value === undefined || this.value === null) {\n      throw Error('ix-select-item must have a `value` property');\n    }\n  }\n\n  @Watch('label')\n  labelChange(newValue: string, oldValue: string) {\n    this.hostElement.dispatchEvent(\n      new IxSelectItemLabelChangeEvent({\n        newValue: newValue,\n        oldValue: oldValue,\n      })\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-dropdown-item\n          class={{\n            'select-item-checked': this.selected,\n          }}\n          checked={this.selected}\n          label={this.label ? this.label : this.value}\n          onItemClick={(e) => this.onItemClick(e)}\n        ></ix-dropdown-item>\n      </Host>\n    );\n  }\n}\n"],"version":3}