@siemens/ix 2.1.2-beta.0 → 2.1.2

package/dist/collection/components/application-header/application-switch-modal/application-switch-modal.js

@@ -43,7 +43,7 @@ export class ApplicationSwitchModal {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: '5d6291e4a6172e0cff21c7871e41e4859c6c6e0f' }, h("ix-modal-header", { key: '8b20c113bdfcbe1ba507d424382c36391d197171', icon: "apps" }, ((_a = this.config) === null || _a === void 0 ? void 0 : _a.i18nAppSwitch) || 'Switch to application'), h("ix-modal-content", { key: '4f919cdf34694c21948af2a3a5b2044a05a2b883', class: "content" }, h("div", { key: '0daf620107484d477b06fc98f4aee721e87bbd53', class: "content-apps" }, (!this.config || ((_b = this.config) === null || _b === void 0 ? void 0 : _b.apps.length) === 0) && (h("div", { class: "loading" }, h("ix-spinner", { size: "medium", variant: "primary" }), h("span", null, ((_c = this.config) === null || _c === void 0 ? void 0 : _c.i18nLoadingApps) ||
+        return (h(Host, { key: 'df1550915fff21de5c0a40acdf24a096a5105d2b' }, h("ix-modal-header", { key: '217d8f2bb79e07c411db00b633648beeb72149f0', icon: "apps" }, ((_a = this.config) === null || _a === void 0 ? void 0 : _a.i18nAppSwitch) || 'Switch to application'), h("ix-modal-content", { key: '0f1001891265ff7d9cd5826ba91479cf8a487ef6', class: "content" }, h("div", { key: '47d718ff45970bd5bba3641f8785899df9e26e50', class: "content-apps" }, (!this.config || ((_b = this.config) === null || _b === void 0 ? void 0 : _b.apps.length) === 0) && (h("div", { class: "loading" }, h("ix-spinner", { size: "medium", variant: "primary" }), h("span", null, ((_c = this.config) === null || _c === void 0 ? void 0 : _c.i18nLoadingApps) ||
             'Loading available applications...'))), (_d = this.config) === null || _d === void 0 ? void 0 :
             _d.apps.map((appEntry) => {
                 var _a;

package/dist/collection/components/application-sidebar/application-sidebar.js

@@ -35,7 +35,7 @@ export class ApplicationSidebar {
         anime(animation);
     }
     render() {
-        return (h(Host, { key: '3c17bcc10e4e795c42d0627dc6e8158b2a651b54', slot: "application-sidebar", class: {
+        return (h(Host, { key: 'f91894976e33362b3d92be367a22d8be0c8a6c1f', slot: "application-sidebar", class: {
                 visible: this.visible,
             } }, this.visible ? h("slot", null) : null));
     }

package/dist/collection/components/avatar/avatar.css

@@ -112,14 +112,14 @@
   min-height: 2rem;
   min-width: 2rem;
   border-radius: 100px;
-  background-color: var(--theme-color-component-3);
-  color: var(--theme-color-std-text);
+  background-color: var(--theme-avatar--background);
+  color: var(--theme-avatar--color);
 }
 :host .avatar #avatar-path-background {
   fill: var(--theme-avatar--background);
 }
 :host .avatar #avatar-path-person {
-  fill: var(--theme-color-4);
+  fill: var(--theme-avatar--color);
 }
 
 :host .user-info {

package/dist/collection/components/basic-navigation/basic-navigation.js

@@ -72,10 +72,10 @@ export class BasicNavigation {
         (_a = this.modeDisposable) === null || _a === void 0 ? void 0 : _a.dispose();
     }
     render() {
-        return (h(Host, { key: '3e6b368ef4a4c3bdd39aa1e80488d2e7e1d9123c', "data-role": "", class: {
+        return (h(Host, { key: '35083d5a514a69bc03be9de1a1c2641d9ed187ad', "data-role": "", class: {
                 'hide-header': this.hideHeader,
                 [`breakpoint-${this.breakpoint}`]: true,
-            } }, !this.hideHeader ? (h("ix-application-header", { name: this.applicationName }, h("slot", { name: "logo", slot: "logo" }))) : null, h("div", { key: '811974c45d6dc7a132b6ed7377185b73c82b673e', class: "navigation-content" }, h("slot", { key: '3f5d0dc41d204ff8e291dda99a4567e01cfd4755', name: "menu" }), h("div", { key: 'f187a0a7d16b362875296227a28a8df5a99cf94c', class: "content", onClick: () => this.onContentClick() }, h("slot", { key: 'd18cd7a7ea3c2dc289b07a3d3e0a27e19844ba10' })))));
+            } }, !this.hideHeader ? (h("ix-application-header", { name: this.applicationName }, h("slot", { name: "logo", slot: "logo" }))) : null, h("div", { key: 'e9ff6a0ea8655afccc66259da206632e035b52a2', class: "navigation-content" }, h("slot", { key: '0809719c5650e73c7d801dbd588dacfe4e24e8cb', name: "menu" }), h("div", { key: '3a56100cd7300c1b7b6e8076b7f5dd5f2c5ae3f4', class: "content", onClick: () => this.onContentClick() }, h("slot", { key: '8b14107e0aeee94534cfdf6cd1cf971f1dadb814' })))));
     }
     static get is() { return "ix-basic-navigation"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/breadcrumb/breadcrumb.js

@@ -69,7 +69,7 @@ export class Breadcrumb {
     render() {
         var _a, _b, _c, _d;
         const a11y = a11yHostAttributes(this.hostElement);
-        return (h(Host, { key: '3a5d431706ed4ef549411908c3155fb3101c5909' }, h("ix-dropdown", { key: '6b0646e46f9e2e47f763a2fd88a2b58273fa4c01', id: this.previousDropdownId, "aria-label": this.ariaLabelPreviousButton, trigger: ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > this.visibleItemCount
+        return (h(Host, { key: 'd4a7d70b996b0e613a05a53896aedcaf786cb05b' }, h("ix-dropdown", { key: '545dd5b645297725ef8b58c2619ebff9cdc0b0c1', id: this.previousDropdownId, "aria-label": this.ariaLabelPreviousButton, trigger: ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > this.visibleItemCount
                 ? this.previousButtonRef
                 : null, onShowChanged: ({ detail }) => {
                 this.isPreviousDropdownExpanded = detail;
@@ -86,7 +86,7 @@ export class Breadcrumb {
             return (h("ix-dropdown-item", { label: label, onClick: () => {
                     this.onItemClick(label);
                 }, onItemClick: (event) => event.stopPropagation() }));
-        })), ((_b = this.items) === null || _b === void 0 ? void 0 : _b.length) > this.visibleItemCount ? (h("ix-breadcrumb-item", { id: this.previousButtonId, ref: (ref) => (this.previousButtonRef = ref), label: "...", tabIndex: 1, onItemClick: (event) => event.stopPropagation(), "aria-describedby": this.previousDropdownId, "aria-controls": this.previousDropdownId, "aria-expanded": a11yBoolean(this.isPreviousDropdownExpanded), class: 'previous-button' })) : null, h("nav", { key: '8951ec43c5cc5a3241344f0a2dbf8cceee266f61', class: "crumb-items", "aria-label": (_c = a11y['aria-label']) !== null && _c !== void 0 ? _c : 'breadcrumbs' }, h("ol", { key: '9d53557b3fcad33cd0f85f1009cf1cd517d2c6a8' }, h("slot", { key: '24b98536fb99e10cfc33947130e572b52bd42218' }))), h("ix-dropdown", { key: '1a00f517f4a8837401e4873f30ba044d84f2fb74', trigger: this.nextButtonRef }, (_d = this.nextItems) === null || _d === void 0 ? void 0 : _d.map((item) => (h("ix-dropdown-item", { label: item, onClick: (e) => {
+        })), ((_b = this.items) === null || _b === void 0 ? void 0 : _b.length) > this.visibleItemCount ? (h("ix-breadcrumb-item", { id: this.previousButtonId, ref: (ref) => (this.previousButtonRef = ref), label: "...", tabIndex: 1, onItemClick: (event) => event.stopPropagation(), "aria-describedby": this.previousDropdownId, "aria-controls": this.previousDropdownId, "aria-expanded": a11yBoolean(this.isPreviousDropdownExpanded), class: 'previous-button' })) : null, h("nav", { key: 'e3e3162f385bd64ddde0671c3bb6fe084ca32714', class: "crumb-items", "aria-label": (_c = a11y['aria-label']) !== null && _c !== void 0 ? _c : 'breadcrumbs' }, h("ol", { key: 'ba7a37c3a9124efa24ea6ac3ddfe5a146d6cc5a1' }, h("slot", { key: 'b4b30cf5e41c4583ea6fbbdb372f79d167f859c9' }))), h("ix-dropdown", { key: 'aa20745609c9110ebed70439c26bf214f3386710', trigger: this.nextButtonRef }, (_d = this.nextItems) === null || _d === void 0 ? void 0 : _d.map((item) => (h("ix-dropdown-item", { label: item, onClick: (e) => {
                 this.nextClick.emit({
                     event: e,
                     item,

package/dist/collection/components/card-content/card-content.js

@@ -4,7 +4,7 @@ import { h, Host } from "@stencil/core";
  */
 export class CardContent {
     render() {
-        return (h(Host, { key: 'ee46815485376b646616fe68d59f5057438e91f5' }, h("slot", { key: '4fe9415fb686a5700a81ce5a9584ceebd441d67d' })));
+        return (h(Host, { key: '7351d9d0c2ac7e3bb3ff04f7327876f3c118eede' }, h("slot", { key: 'ae6747bb0d3204fcb78bb26d763a04a090424fc5' })));
     }
     static get is() { return "ix-card-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card-list/card-list.js

@@ -132,16 +132,16 @@ export class CardList {
         }
     }
     render() {
-        return (h(Host, { key: 'c328d27069ea738a47d5887b8fc92026eb41ed41' }, h(CardListTitle, { key: '846c7c0a11d45da394795bec62a345daa1c44cf0', isCollapsed: this.collapse, label: this.label, showAllLabel: this.i18nShowAll, showAllCounter: this.showAllCount === undefined
+        return (h(Host, { key: 'f64f7bbef5fef7491fd79ff4a8925d30d69fc452' }, h(CardListTitle, { key: '7e0d6992d039649ed38115d0434f1192231c6ee5', isCollapsed: this.collapse, label: this.label, showAllLabel: this.i18nShowAll, showAllCounter: this.showAllCount === undefined
                 ? this.numberOfAllChildElements
-                : this.showAllCount, onClick: () => this.onCardListVisibilityToggle(), onShowAllClick: (e) => this.onShowAllClick(e) }), h("div", { key: '56889ca9212e46c12653179c8a981b2e43277231', class: {
+                : this.showAllCount, onClick: () => this.onCardListVisibilityToggle(), onShowAllClick: (e) => this.onShowAllClick(e) }), h("div", { key: '3e586bcc0ce83077ca1f63a999d0c34580eb66c9', class: {
                 CardList__Overflow: true,
-            }, style: this.computeMaskLayer() }, h("div", { key: '9befdceda0ca5ba093f170e3e0e4e58ddbd06113', class: {
+            }, style: this.computeMaskLayer() }, h("div", { key: '2575c1d6679112d96e48e8c120b2d62c24cc8629', class: {
                 CardList__Content: true,
                 CardList__Content__Collapsed: this.collapse,
                 CardList__Style__Flexbox__Scroll: this.listStyle === 'stack',
                 CardList__Style__Infinite__Scroll: this.listStyle === 'scroll',
-            }, onScroll: () => this.onCardListScroll() }, h("slot", { key: '36c242f6e1400a7e0258b005b5a558db5c9fe210', onSlotchange: () => this.changeVisibilityOfSlotChildren() }), this.isShowMoreCardVisible() ? (h("ix-card", { class: {
+            }, onScroll: () => this.onCardListScroll() }, h("slot", { key: '55f3065336c58ee56dbe24e959f81406173a6589', onSlotchange: () => this.changeVisibilityOfSlotChildren() }), this.isShowMoreCardVisible() ? (h("ix-card", { class: {
                 Show__All__Card: true,
             }, onClick: (event) => this.showMoreCardClick.emit({
                 nativeEvent: event,

package/dist/collection/components/card-title/card-title.js

@@ -6,7 +6,7 @@ import { h, Host } from "@stencil/core";
  */
 export class CardHeader {
     render() {
-        return (h(Host, { key: '0d6fb3a5e4d91a6ca36e670dd6840a430fd5bf80' }, h("slot", { key: '18f10b373eace5c4cf7102a8a5eca93402f67884' }), h("div", { key: '19bacf432aef00963c20c3f54abe458717df03c8', class: "title-actions" }, h("slot", { key: 'bd52f42b05e873163be38840453d9564e17b03a9', name: "title-actions" }))));
+        return (h(Host, { key: 'becda7afe606335391887cbf616a679a79ca23f8' }, h("slot", { key: '81d4200983e9288ae910d6e9bbf4ec8f107ed4b9' }), h("div", { key: 'e5894f17b9fdc84e70631bd03751d613f8e9ecf0', class: "title-actions" }, h("slot", { key: '30b969a1a99f9b411f6bfcee4ea5fcfc4c1f73b7', name: "title-actions" }))));
     }
     static get is() { return "ix-card-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/category-filter/category-filter.js

@@ -376,19 +376,19 @@ export class CategoryFilter {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'ff8f35254d719a554f582dbad8997f7e4d6bf431' }, h("form", { key: '944b24fb6296fc8dfdcb3ac2dd1a1508c681ee6c', ref: (el) => (this.formElement = el) }, h("div", { key: 'a56bd235da22554a3cd9c4b0c86545ba0f408ac3', "read-only": this.readonly, class: {
+        return (h(Host, { key: 'bb1895ca71c8872520aa91537892b08bc44e8799' }, h("form", { key: '724c3f8b7344ff2a8d6dbc978328c1c40e9f4c86', ref: (el) => (this.formElement = el) }, h("div", { key: 'ce61f09afc88a407e8af9ab5de8d70df614c99c7', "read-only": this.readonly, class: {
                 'input-container': true,
                 disabled: this.disabled,
                 focus: this.hasFocus,
                 readonly: this.readonly,
                 'no-icon': this.hideIcon,
-            } }, h("ix-icon", { key: '07c42a0cc02e6ff7c8846addc59a9c473c993c97', color: this.getIconColor(), class: { 'd-none': this.hideIcon }, name: this.icon, size: "16" }), h("div", { key: '3a8f5cef5a49a7075f725ac209d16e6d9c8f03b0', class: "token-container" }, h("ul", { key: '50a8aa2fc77f5423b33922a2358a33de6dc80514', class: "list-unstyled" }, this.filterTokens.map((value, index) => (h("li", { key: value.toString(), class: {
+            } }, h("ix-icon", { key: 'c051a2ba705082c534c441997138d0a7681d9483', color: this.getIconColor(), class: { 'd-none': this.hideIcon }, name: this.icon, size: "16" }), h("div", { key: '11adfdb0d008ff35dbe1022bc8cdac5b04024cdf', class: "token-container" }, h("ul", { key: 'c9a892b1ac2757c9117eaf957548624184af0f83', class: "list-unstyled" }, this.filterTokens.map((value, index) => (h("li", { key: value.toString(), class: {
                 animate__animated: true,
                 animate__fadein: true,
             } }, h("ix-filter-chip", { disabled: this.disabled, readonly: this.readonly, onClick: (e) => e.stopPropagation(), onCloseClick: () => this.removeToken(index) }, this.getFilterChipLabel(value))))), this.categories === undefined ? ('') : (h("li", { class: {
                 'category-preview': true,
                 'd-none': this.category === undefined,
-            } }, (_a = this.categories[this.category]) === null || _a === void 0 ? void 0 : _a.label)), h("input", { key: '2980bcf4313e8163bc5ae521f152081641d0744d', class: {
+            } }, (_a = this.categories[this.category]) === null || _a === void 0 ? void 0 : _a.label)), h("input", { key: '9b8af2d470dbd7c9fe6d7d34717c7678317bed4b', class: {
                 'text-input': true,
                 'hide-placeholder': this.readonly ||
                     this.disabled ||

package/dist/collection/components/chip/chip.js

@@ -37,11 +37,11 @@ export class Chip {
                 [this.outline ? 'borderColor' : 'backgroundColor']: this.background,
             };
         }
-        return (h(Host, { key: '3e588faae52b42310628ebc15aa3077000a1472b', tabIndex: "-1", title: this.el.textContent, style: this.variant === 'custom'
+        return (h(Host, { key: '04ad48738af21d85310e4b6e81b509ff748740fe', tabIndex: "-1", title: this.el.textContent, style: this.variant === 'custom'
                 ? {
                     '--ix-icon-button-color': (_b = this.chipColor) !== null && _b !== void 0 ? _b : this.color,
                 }
-                : {} }, h("div", { key: '74de055f087c03d1dae868c9b4e87dfd384c913a', style: Object.assign({}, customStyle), class: {
+                : {} }, h("div", { key: 'fcb2c6a534fee6a075505632524db05ea6214611', style: Object.assign({}, customStyle), class: {
                 container: true,
                 outline: this.outline,
                 inactive: isInactive,
@@ -55,10 +55,10 @@ export class Chip {
                 custom: this.variant === 'custom',
                 closable: this.closable,
                 icon: !!this.icon,
-            } }, h("ix-icon", { key: '7ba32fadaa20fe15ad08df0597455259537b5be7', class: {
+            } }, h("ix-icon", { key: '8177db5d16f03117e3397a99c4f364bff48b063b', class: {
                 'with-icon': true,
                 hidden: !this.icon,
-            }, name: this.icon, size: '24' }), h("span", { key: '0cb6855897a94a1c10068235e18a0b5e7a8e3a3f', class: "slot-container" }, h("slot", { key: '95a0e66db38f6a2c47615b05b0149184669e5546' })), isInactive === false && this.closable ? this.getCloseButton() : null)));
+            }, name: this.icon, size: '24' }), h("span", { key: 'f1f0f6b22b92951ce0b1b5c81b1071ad4a3c6165', class: "slot-container" }, h("slot", { key: '59087cf16d54288ef6dc324520f0f43b84108166' })), isInactive === false && this.closable ? this.getCloseButton() : null)));
     }
     static get is() { return "ix-chip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/content/content.js

@@ -20,12 +20,12 @@ export class Content {
         return this.hostElement.shadowRoot.querySelector('.content-header slot');
     }
     render() {
-        return (h(Host, { key: 'ef69e746551d1799ac549a40d5bf993e20b947e8' }, h("div", { key: 'd5f0f5ef0dd67769ac59d4efa17e746bd2af3d8f', class: {
+        return (h(Host, { key: '85ecfecc47910592c3e5633e8f21ca6e2bf98b68' }, h("div", { key: '5856277dbd6d05054a0c0083ae8ba9496e127cf5', class: {
                 'content-header': true,
                 slotted: this.isContentHeaderSlotted,
-            } }, h("slot", { key: '2a7a54ca49a946ba2043d48e93311095aa5a1696', name: "header", onSlotchange: () => {
+            } }, h("slot", { key: 'b5989ea440740b99deef634be6b30cb5b443d18b', name: "header", onSlotchange: () => {
                 this.isContentHeaderSlotted = hasSlottedElements(this.contentHeaderSlot);
-            } })), h("div", { key: '43bfdf4ae39781a58ca3b6f4d9981841d37ff347', class: "content" }, h("slot", { key: '88d53f6d9c324182af7e8e0c341910ff5fd04cb1' }))));
+            } })), h("div", { key: 'b4eea60b710cd2a2cf188c2125a91a33b4fca82f', class: "content" }, h("slot", { key: 'b739a3016884b29e41b1975b76121511c9f35f2a' }))));
     }
     static get is() { return "ix-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/css-grid/css-grid-item.js

@@ -17,7 +17,7 @@ export class CssGridItem {
     render() {
         const style = {};
         style['grid-area'] = this.itemName;
-        return (h(Host, { key: '2f048d51f62508a7f07bca1537a3d5b132a456ca', style: style }, h("slot", { key: '9e1ba33a62542da9789e19bfca6fa9c4a31ee692' })));
+        return (h(Host, { key: 'e5f4a0cda7624d07672ff6892f55ab8d7d8faf8d', style: style }, h("slot", { key: '962c12dd575e9f5d81b51259ad973616ae200515' })));
     }
     static get is() { return "ix-css-grid-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/date-dropdown/date-dropdown.css

@@ -82,6 +82,9 @@
     border-right: var(--theme-x-weak-bdr-2);
   }
 }
+:host ix-button {
+  width: 100%;
+}
 :host .max-height {
   max-height: -moz-max-content;
   max-height: max-content;

package/dist/collection/components/date-dropdown/date-dropdown.js

@@ -124,21 +124,21 @@ export class DateDropdown {
         return option.label;
     }
     render() {
-        var _a, _b;
-        return (h(Host, { key: '587a80ff64848ac3072ae04a27573f83e1e11fd8' }, h("ix-button", { key: '6fa079d6960402455bcb6b097c459efc77e08d6e', "data-date-dropdown-trigger": true, variant: "primary", icon: "history", ref: (ref) => (this.triggerRef = ref), class: "button-width" }, this.getButtonLabel()), h("ix-dropdown", { key: 'dc9435a7533f1dc4d227ec12807f3d13d60161bf', "data-date-dropdown": true, class: "min-width max-height", trigger: this.triggerRef, "close-behavior": "outside", placement: "bottom-start", onShowChanged: ({ detail: show }) => {
+        var _a, _b, _c;
+        return (h(Host, { key: '587a80ff64848ac3072ae04a27573f83e1e11fd8' }, h("ix-button", { key: '54dce5bf9e30572642386c16c7f18e69e55f3fd1', "data-date-dropdown-trigger": true, variant: "primary", icon: "history", ref: (ref) => (this.triggerRef = ref) }, this.getButtonLabel()), h("ix-dropdown", { key: '4292a46172362908d80a49874b0e4a62ae0461e9', "data-date-dropdown": true, class: "min-width max-height", trigger: this.triggerRef, "close-behavior": "outside", placement: "bottom-start", onShowChanged: ({ detail: show }) => {
                 if (!show &&
                     this.selectedDateRangeId === 'custom' &&
                     this.datePickerTouched) {
                     this.onDateSelect(this.currentRangeValue);
                 }
-            } }, h("ix-layout-grid", { key: 'efb1071081dbf2e2a2f913af3c2e7d3ce78aa060', "no-margin": "true" }, h("ix-row", { key: '7c06508000770f55ff36057a8dae7b6e4b9404f4' }, h("ix-col", { key: 'ba2ea4063475d9bab8d1790991f7ef8564db9b23', class: {
+            } }, h("ix-layout-grid", { key: '9d92b3fd14fb2546fe9f6b588e048ad9048ed99e', "no-margin": "true" }, h("ix-row", { key: 'ea35e1f9c8df2f1bed99dff82ffcf57206864d47' }, ((_a = this.dateRangeOptions) === null || _a === void 0 ? void 0 : _a.length) > 1 && (h("ix-col", { class: {
                 'no-margin': true,
                 'border-right': this.selectedDateRangeId === 'custom',
-            } }, this.dateRangeOptions.map((dateRangeOption) => (h("ix-dropdown-item", { label: dateRangeOption.label, onClick: () => this.onRangeListSelect(dateRangeOption.id), checked: this.selectedDateRangeId === dateRangeOption.id }))), h("div", { key: 'caca9bcebaa6d232b69142762318874e1caa5f75', hidden: !this.customRangeAllowed }, h("ix-dropdown-item", { key: 'cd086f353be43158775857cd14b61057b1302e34', label: this.i18nCustomItem, checked: this.selectedDateRangeId === 'custom', onClick: () => this.onRangeListSelect('custom') }))), h("ix-col", { key: '8c21ecaaadec975b347848af14f4b63713a14026', class: "no-margin" }, this.selectedDateRangeId === 'custom' && (h(Fragment, null, h("ix-date-picker", { standaloneAppearance: false, onDateChange: (e) => {
+            } }, this.dateRangeOptions.map((dateRangeOption) => (h("ix-dropdown-item", { label: dateRangeOption.label, onClick: () => this.onRangeListSelect(dateRangeOption.id), checked: this.selectedDateRangeId === dateRangeOption.id }))), h("div", { hidden: !this.customRangeAllowed }, h("ix-dropdown-item", { label: this.i18nCustomItem, checked: this.selectedDateRangeId === 'custom', onClick: () => this.onRangeListSelect('custom') })))), h("ix-col", { key: '39d788b4f948826461facbf8f0510d871416a2a3', class: "no-margin" }, this.selectedDateRangeId === 'custom' && (h(Fragment, null, h("ix-date-picker", { standaloneAppearance: false, onDateChange: (e) => {
                 e.stopPropagation();
                 this.currentRangeValue = Object.assign(Object.assign({}, e.detail), { id: 'custom' });
                 this.datePickerTouched = true;
-            }, onDateRangeChange: (e) => e.stopPropagation(), format: this.format, range: this.range, from: this.from || ((_a = this.currentRangeValue) === null || _a === void 0 ? void 0 : _a.from), to: this.to || ((_b = this.currentRangeValue) === null || _b === void 0 ? void 0 : _b.to), minDate: this.minDate, maxDate: this.maxDate, today: this.today }), h("div", { class: "pull-right" }, h("ix-button", { onClick: () => {
+            }, onDateRangeChange: (e) => e.stopPropagation(), format: this.format, range: this.range, from: this.from || ((_b = this.currentRangeValue) === null || _b === void 0 ? void 0 : _b.from), to: this.to || ((_c = this.currentRangeValue) === null || _c === void 0 ? void 0 : _c.to), minDate: this.minDate, maxDate: this.maxDate, today: this.today }), h("div", { class: "pull-right" }, h("ix-button", { onClick: () => {
                 this.onDateSelect(this.currentRangeValue);
             } }, this.i18nDone))))))))));
     }

package/dist/collection/components/date-dropdown/date-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-dropdown.js","sourceRoot":"","sources":["../../../src/components/date-dropdown/date-dropdown.tsx"],"names":[],"mappings":"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","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 */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { DateTime } from 'luxon';\n\nexport type DateDropdownOption = {\n  id: string;\n  label: string;\n  from: string;\n  to: string;\n};\n\nexport type DateRangeChangeEvent = {\n  id: string;\n  from: string;\n  to: string;\n};\n\n/**\n * @since 2.1.0\n */\n@Component({\n  tag: 'ix-date-dropdown',\n  styleUrl: 'date-dropdown.scss',\n  shadow: true,\n})\nexport class DateDropdown {\n  @Element() hostElement: HTMLIxDateDropdownElement;\n\n  /**\n   * Date format string.\n   * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.\n   */\n  @Prop() format = 'yyyy/LL/dd';\n\n  /**\n   * If true a range of dates can be selected.\n   */\n  @Prop() range = true;\n\n  /**\n   * Picker date. If the picker is in range mode this property is the start date.\n   * If set to `null` no default start date will be pre-selected.\n   *\n   * Format is based on `format`\n   */\n  @Prop() from: string;\n\n  /**\n   * Picker date. If the picker is in range mode this property is the end date.\n   * If the picker is not in range mode leave this value `null`\n   *\n   * Format is based on `format`\n   */\n  @Prop() to: string;\n\n  /**\n   * The earliest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   */\n  @Prop() minDate: string;\n\n  /**\n   * The latest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   */\n  @Prop() maxDate: string;\n\n  /**\n   * Used to set the initial select date range as well as the button name,\n   * if not set or no according date range label is found, nothing will be selected\n   */\n  @Prop() dateRangeId = 'custom';\n  @Watch('dateRangeId')\n  @Watch('to')\n  @Watch('from')\n  onDateRangeIdChange() {\n    this.onRangeListSelect(this.dateRangeId);\n    this.onDateSelect({\n      from: this.currentRangeValue.from,\n      to: this.currentRangeValue.to,\n      id: this.currentRangeValue.id,\n    });\n  }\n\n  /**\n   * Controls whether the user is allowed to pick custom date ranges in the component.\n   * When set to 'true', the user can select a custom date range using the date picker.\n   * When set to 'false', only predefined time date ranges are available for selection.\n   */\n  @Prop() customRangeAllowed = true;\n\n  /**\n   * An array of predefined date range options for the date picker.\n   * Each option is an object with a label describing the range and a function\n   * that returns the start and end dates of the range as a DateRangeOption object.\n   *\n   * Example format:\n   *   {\n   *     id: 'some unique id',\n   *     label: 'Name of the range',\n   *     from: undefined, to: '2023/03/29'\n   *   },\n   *   // ... other predefined date range options ...\n   */\n  @Prop() dateRangeOptions: DateDropdownOption[] = [];\n  @Watch('dateRangeOptions')\n  onDateRangeOptionsChange() {\n    this.initialize();\n    this.onDateRangeIdChange();\n  }\n\n  /**\n   * Text for custom dropdown item. Will be used for translation.\n   */\n  @Prop({ attribute: 'i18n-custom-item' }) i18nCustomItem = 'Custom...';\n\n  /**\n   * Text for the done button. Will be used for translation.\n   */\n  @Prop({ attribute: 'i18n-done' }) i18nDone = 'Done';\n\n  /**\n   * Text for the done button. Will be used for translation.\n   */\n  @Prop({ attribute: 'i18n-no-range' }) i18nNoRange = 'No range set';\n\n  /** @internal */\n  @Prop() today = DateTime.now().toISO();\n\n  /**\n   * EventEmitter for date range change events.\n   *\n   * This event is emitted when the date range changes within the component.\n   * The event payload contains information about the selected date range.\n   */\n  @Event() private dateRangeChange: EventEmitter<DateRangeChangeEvent>;\n\n  @State() private selectedDateRangeId: 'custom' | (string & {});\n  @State() private currentRangeValue: {\n    from: string;\n    to: string;\n    id: string;\n  };\n  @State() private triggerRef: HTMLElement;\n\n  private datePickerTouched = false;\n\n  componentWillLoad() {\n    this.initialize();\n    this.setDateRangeSelection(this.dateRangeId);\n  }\n\n  /**\n   * Retrieves the currently selected date range from the component.\n   * This method returns the selected date range as a `DateChangeEvent` object.\n   */\n  @Method()\n  public async getDateRange(): Promise<DateRangeChangeEvent> {\n    return this.currentRangeValue;\n  }\n\n  private initialize() {\n    const isCustomRange =\n      this.dateRangeId === 'custom' ||\n      (!this.dateRangeId && !!this.from && !!this.to);\n\n    if (isCustomRange && this.customRangeAllowed) {\n      this.selectedDateRangeId = 'custom';\n      this.currentRangeValue = {\n        id: this.selectedDateRangeId,\n        from: this.from,\n        to: this.to,\n      };\n\n      return;\n    }\n    const isValidConfiguration = !isCustomRange && !this.from;\n    if (!isValidConfiguration) {\n      console.warn(\n        '\"from\" and \"range-date-id\" is provided this is an invalid combination. Using \"custom\".'\n      );\n\n      this.selectedDateRangeId = 'custom';\n      this.currentRangeValue = {\n        id: this.selectedDateRangeId,\n        from: this.from,\n        to: this.to,\n      };\n\n      return;\n    }\n  }\n\n  private onDateSelect(\n    rangeValue: { from: string; to: string; id: string },\n    preserveDropdown = true\n  ) {\n    this.dateRangeChange.emit(rangeValue);\n\n    if (preserveDropdown) {\n      this.closeDropdown();\n    }\n\n    this.datePickerTouched = false;\n  }\n\n  private onRangeListSelect(id: string) {\n    if (this.setDateRangeSelection(id)) {\n      this.onDateSelect(this.currentRangeValue);\n    }\n  }\n\n  private setDateRangeSelection(id: string) {\n    this.selectedDateRangeId = id;\n    const option = this.dateRangeOptions.find((range) => range.id === id);\n\n    if (option) {\n      this.currentRangeValue = option;\n    }\n\n    return option;\n  }\n\n  private closeDropdown() {\n    this.hostElement.shadowRoot.querySelector('ix-dropdown').show = false;\n  }\n\n  private getButtonLabel() {\n    if (this.selectedDateRangeId === 'custom' && this.currentRangeValue?.from) {\n      let range = this.currentRangeValue.from;\n\n      if (this.currentRangeValue.to) {\n        range += ` - ${this.currentRangeValue.to}`;\n      }\n\n      return range;\n    }\n\n    if (!this.selectedDateRangeId) {\n      return this.i18nNoRange;\n    }\n\n    if (!this.dateRangeOptions || this.dateRangeOptions?.length === 0) {\n      return this.i18nNoRange;\n    }\n\n    const option = this.dateRangeOptions.find(\n      (option) => option.id === this.selectedDateRangeId\n    );\n\n    if (!option) {\n      console.error(\n        `Cannot find range option with id ${this.selectedDateRangeId}`\n      );\n      return this.i18nNoRange;\n    }\n\n    return option.label;\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-button\n          data-date-dropdown-trigger\n          variant=\"primary\"\n          icon=\"history\"\n          ref={(ref) => (this.triggerRef = ref)}\n          class=\"button-width\"\n        >\n          {this.getButtonLabel()}\n        </ix-button>\n        <ix-dropdown\n          data-date-dropdown\n          class=\"min-width max-height\"\n          trigger={this.triggerRef}\n          close-behavior=\"outside\"\n          placement=\"bottom-start\"\n          onShowChanged={({ detail: show }) => {\n            if (\n              !show &&\n              this.selectedDateRangeId === 'custom' &&\n              this.datePickerTouched\n            ) {\n              this.onDateSelect(this.currentRangeValue);\n            }\n          }}\n        >\n          <ix-layout-grid no-margin=\"true\">\n            <ix-row>\n              <ix-col\n                class={{\n                  'no-margin': true,\n                  'border-right': this.selectedDateRangeId === 'custom',\n                }}\n              >\n                {this.dateRangeOptions.map((dateRangeOption) => (\n                  <ix-dropdown-item\n                    label={dateRangeOption.label}\n                    onClick={() => this.onRangeListSelect(dateRangeOption.id)}\n                    checked={this.selectedDateRangeId === dateRangeOption.id}\n                  ></ix-dropdown-item>\n                ))}\n                <div hidden={!this.customRangeAllowed}>\n                  <ix-dropdown-item\n                    label={this.i18nCustomItem}\n                    checked={this.selectedDateRangeId === 'custom'}\n                    onClick={() => this.onRangeListSelect('custom')}\n                  ></ix-dropdown-item>\n                </div>\n              </ix-col>\n              <ix-col class=\"no-margin\">\n                {this.selectedDateRangeId === 'custom' && (\n                  <Fragment>\n                    <ix-date-picker\n                      standaloneAppearance={false}\n                      onDateChange={(e) => {\n                        e.stopPropagation();\n                        this.currentRangeValue = {\n                          ...e.detail,\n                          id: 'custom',\n                        };\n                        this.datePickerTouched = true;\n                      }}\n                      onDateRangeChange={(e) => e.stopPropagation()}\n                      format={this.format}\n                      range={this.range}\n                      from={this.from || this.currentRangeValue?.from}\n                      to={this.to || this.currentRangeValue?.to}\n                      minDate={this.minDate}\n                      maxDate={this.maxDate}\n                      today={this.today}\n                    ></ix-date-picker>\n                    <div class=\"pull-right\">\n                      <ix-button\n                        onClick={() => {\n                          this.onDateSelect(this.currentRangeValue);\n                        }}\n                      >\n                        {this.i18nDone}\n                      </ix-button>\n                    </div>\n                  </Fragment>\n                )}\n              </ix-col>\n            </ix-row>\n          </ix-layout-grid>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"date-dropdown.js","sourceRoot":"","sources":["../../../src/components/date-dropdown/date-dropdown.tsx"],"names":[],"mappings":"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","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 */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { DateTime } from 'luxon';\n\nexport type DateDropdownOption = {\n  id: string;\n  label: string;\n  from: string;\n  to: string;\n};\n\nexport type DateRangeChangeEvent = {\n  id: string;\n  from: string;\n  to: string;\n};\n\n/**\n * @since 2.1.0\n */\n@Component({\n  tag: 'ix-date-dropdown',\n  styleUrl: 'date-dropdown.scss',\n  shadow: true,\n})\nexport class DateDropdown {\n  @Element() hostElement: HTMLIxDateDropdownElement;\n\n  /**\n   * Date format string.\n   * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.\n   */\n  @Prop() format = 'yyyy/LL/dd';\n\n  /**\n   * If true a range of dates can be selected.\n   */\n  @Prop() range = true;\n\n  /**\n   * Picker date. If the picker is in range mode this property is the start date.\n   * If set to `null` no default start date will be pre-selected.\n   *\n   * Format is based on `format`\n   */\n  @Prop() from: string;\n\n  /**\n   * Picker date. If the picker is in range mode this property is the end date.\n   * If the picker is not in range mode leave this value `null`\n   *\n   * Format is based on `format`\n   */\n  @Prop() to: string;\n\n  /**\n   * The earliest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   */\n  @Prop() minDate: string;\n\n  /**\n   * The latest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   */\n  @Prop() maxDate: string;\n\n  /**\n   * Used to set the initial select date range as well as the button name,\n   * if not set or no according date range label is found, nothing will be selected\n   */\n  @Prop() dateRangeId = 'custom';\n  @Watch('dateRangeId')\n  @Watch('to')\n  @Watch('from')\n  onDateRangeIdChange() {\n    this.onRangeListSelect(this.dateRangeId);\n    this.onDateSelect({\n      from: this.currentRangeValue.from,\n      to: this.currentRangeValue.to,\n      id: this.currentRangeValue.id,\n    });\n  }\n\n  /**\n   * Controls whether the user is allowed to pick custom date ranges in the component.\n   * When set to 'true', the user can select a custom date range using the date picker.\n   * When set to 'false', only predefined time date ranges are available for selection.\n   */\n  @Prop() customRangeAllowed = true;\n\n  /**\n   * An array of predefined date range options for the date picker.\n   * Each option is an object with a label describing the range and a function\n   * that returns the start and end dates of the range as a DateRangeOption object.\n   *\n   * Example format:\n   *   {\n   *     id: 'some unique id',\n   *     label: 'Name of the range',\n   *     from: undefined, to: '2023/03/29'\n   *   },\n   *   // ... other predefined date range options ...\n   */\n  @Prop() dateRangeOptions: DateDropdownOption[] = [];\n  @Watch('dateRangeOptions')\n  onDateRangeOptionsChange() {\n    this.initialize();\n    this.onDateRangeIdChange();\n  }\n\n  /**\n   * Text for custom dropdown item. Will be used for translation.\n   */\n  @Prop({ attribute: 'i18n-custom-item' }) i18nCustomItem = 'Custom...';\n\n  /**\n   * Text for the done button. Will be used for translation.\n   */\n  @Prop({ attribute: 'i18n-done' }) i18nDone = 'Done';\n\n  /**\n   * Text for the done button. Will be used for translation.\n   */\n  @Prop({ attribute: 'i18n-no-range' }) i18nNoRange = 'No range set';\n\n  /** @internal */\n  @Prop() today = DateTime.now().toISO();\n\n  /**\n   * EventEmitter for date range change events.\n   *\n   * This event is emitted when the date range changes within the component.\n   * The event payload contains information about the selected date range.\n   */\n  @Event() private dateRangeChange: EventEmitter<DateRangeChangeEvent>;\n\n  @State() private selectedDateRangeId: 'custom' | (string & {});\n  @State() private currentRangeValue: {\n    from: string;\n    to: string;\n    id: string;\n  };\n  @State() private triggerRef: HTMLElement;\n\n  private datePickerTouched = false;\n\n  componentWillLoad() {\n    this.initialize();\n    this.setDateRangeSelection(this.dateRangeId);\n  }\n\n  /**\n   * Retrieves the currently selected date range from the component.\n   * This method returns the selected date range as a `DateChangeEvent` object.\n   */\n  @Method()\n  public async getDateRange(): Promise<DateRangeChangeEvent> {\n    return this.currentRangeValue;\n  }\n\n  private initialize() {\n    const isCustomRange =\n      this.dateRangeId === 'custom' ||\n      (!this.dateRangeId && !!this.from && !!this.to);\n\n    if (isCustomRange && this.customRangeAllowed) {\n      this.selectedDateRangeId = 'custom';\n      this.currentRangeValue = {\n        id: this.selectedDateRangeId,\n        from: this.from,\n        to: this.to,\n      };\n\n      return;\n    }\n    const isValidConfiguration = !isCustomRange && !this.from;\n    if (!isValidConfiguration) {\n      console.warn(\n        '\"from\" and \"range-date-id\" is provided this is an invalid combination. Using \"custom\".'\n      );\n\n      this.selectedDateRangeId = 'custom';\n      this.currentRangeValue = {\n        id: this.selectedDateRangeId,\n        from: this.from,\n        to: this.to,\n      };\n\n      return;\n    }\n  }\n\n  private onDateSelect(\n    rangeValue: { from: string; to: string; id: string },\n    preserveDropdown = true\n  ) {\n    this.dateRangeChange.emit(rangeValue);\n\n    if (preserveDropdown) {\n      this.closeDropdown();\n    }\n\n    this.datePickerTouched = false;\n  }\n\n  private onRangeListSelect(id: string) {\n    if (this.setDateRangeSelection(id)) {\n      this.onDateSelect(this.currentRangeValue);\n    }\n  }\n\n  private setDateRangeSelection(id: string) {\n    this.selectedDateRangeId = id;\n    const option = this.dateRangeOptions.find((range) => range.id === id);\n\n    if (option) {\n      this.currentRangeValue = option;\n    }\n\n    return option;\n  }\n\n  private closeDropdown() {\n    this.hostElement.shadowRoot.querySelector('ix-dropdown').show = false;\n  }\n\n  private getButtonLabel() {\n    if (this.selectedDateRangeId === 'custom' && this.currentRangeValue?.from) {\n      let range = this.currentRangeValue.from;\n\n      if (this.currentRangeValue.to) {\n        range += ` - ${this.currentRangeValue.to}`;\n      }\n\n      return range;\n    }\n\n    if (!this.selectedDateRangeId) {\n      return this.i18nNoRange;\n    }\n\n    if (!this.dateRangeOptions || this.dateRangeOptions?.length === 0) {\n      return this.i18nNoRange;\n    }\n\n    const option = this.dateRangeOptions.find(\n      (option) => option.id === this.selectedDateRangeId\n    );\n\n    if (!option) {\n      console.error(\n        `Cannot find range option with id ${this.selectedDateRangeId}`\n      );\n      return this.i18nNoRange;\n    }\n\n    return option.label;\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-button\n          data-date-dropdown-trigger\n          variant=\"primary\"\n          icon=\"history\"\n          ref={(ref) => (this.triggerRef = ref)}\n        >\n          {this.getButtonLabel()}\n        </ix-button>\n        <ix-dropdown\n          data-date-dropdown\n          class=\"min-width max-height\"\n          trigger={this.triggerRef}\n          close-behavior=\"outside\"\n          placement=\"bottom-start\"\n          onShowChanged={({ detail: show }) => {\n            if (\n              !show &&\n              this.selectedDateRangeId === 'custom' &&\n              this.datePickerTouched\n            ) {\n              this.onDateSelect(this.currentRangeValue);\n            }\n          }}\n        >\n          <ix-layout-grid no-margin=\"true\">\n            <ix-row>\n              {this.dateRangeOptions?.length > 1 && (\n                <ix-col\n                  class={{\n                    'no-margin': true,\n                    'border-right': this.selectedDateRangeId === 'custom',\n                  }}\n                >\n                  {this.dateRangeOptions.map((dateRangeOption) => (\n                    <ix-dropdown-item\n                      label={dateRangeOption.label}\n                      onClick={() => this.onRangeListSelect(dateRangeOption.id)}\n                      checked={this.selectedDateRangeId === dateRangeOption.id}\n                    ></ix-dropdown-item>\n                  ))}\n                  <div hidden={!this.customRangeAllowed}>\n                    <ix-dropdown-item\n                      label={this.i18nCustomItem}\n                      checked={this.selectedDateRangeId === 'custom'}\n                      onClick={() => this.onRangeListSelect('custom')}\n                    ></ix-dropdown-item>\n                  </div>\n                </ix-col>\n              )}\n              <ix-col class=\"no-margin\">\n                {this.selectedDateRangeId === 'custom' && (\n                  <Fragment>\n                    <ix-date-picker\n                      standaloneAppearance={false}\n                      onDateChange={(e) => {\n                        e.stopPropagation();\n                        this.currentRangeValue = {\n                          ...e.detail,\n                          id: 'custom',\n                        };\n                        this.datePickerTouched = true;\n                      }}\n                      onDateRangeChange={(e) => e.stopPropagation()}\n                      format={this.format}\n                      range={this.range}\n                      from={this.from || this.currentRangeValue?.from}\n                      to={this.to || this.currentRangeValue?.to}\n                      minDate={this.minDate}\n                      maxDate={this.maxDate}\n                      today={this.today}\n                    ></ix-date-picker>\n                    <div class=\"pull-right\">\n                      <ix-button\n                        onClick={() => {\n                          this.onDateSelect(this.currentRangeValue);\n                        }}\n                      >\n                        {this.i18nDone}\n                      </ix-button>\n                    </div>\n                  </Fragment>\n                )}\n              </ix-col>\n            </ix-row>\n          </ix-layout-grid>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/date-picker/date-picker.js

@@ -427,7 +427,7 @@ export class DatePicker {
         return rows;
     }
     render() {
-        return (h(Host, { key: '2c5ad0c39f7cf3d7aa3f011b07ac702dda92feec' }, h("ix-date-time-card", { key: '0b5ae54b95fe9413e0371fda97ee969d86545e88', corners: this.corners, standaloneAppearance: this.standaloneAppearance }, h("div", { key: 'c478e154a404d446e08f92b976a8d0a0a609478b', class: "header", slot: "header" }, h("ix-icon-button", { key: 'bf132d6fe6b30dbbb20fabdff58f87dcfbfe968c', onClick: () => this.changeToAdjacentMonth(-1), ghost: true, icon: "chevron-left", variant: "primary", class: "arrows" }), h("div", { key: 'c0d285050b60f64a03e1e45d74a7d126ae641f47', class: "selector" }, h("ix-button", { key: '0018693b7e6b499e6ba6e11f4249b09655aadace', ghost: true, ref: (ref) => (this.dropdownButtonRef = ref) }, h("span", { key: '2a3b593d336151ac8a827317e8c5803f7b100f77', class: "fontSize capitalize" }, this.monthNames[this.selectedMonth], " ", this.selectedYear)), h("ix-dropdown", { key: '48f2c219caeaad751520d8a13da2ba8bbe159964', class: "dropdown", trigger: this.dropdownButtonRef, placement: "bottom-start" }, h("div", { key: '04cff2f94fc1334ef85dfb9ff6216b8ad408ea60', class: "wrapper" }, h("div", { key: '0f7e2f3461291f4fba9bfb20ff9c7be741a91185', class: "overflow", onScroll: () => this.infiniteScrollYears(), ref: (ref) => (this.yearContainerRef = ref) }, this.renderYears()), h("div", { key: '7822b1929014167197d57d03514a9c95859d1e60', class: "overflow" }, this.monthNames.map((month, index) => (h("div", { key: month, ref: (ref) => {
+        return (h(Host, { key: '5b6747c0dbf6528e3bf90742097d2e0209142fd5' }, h("ix-date-time-card", { key: 'd332e24012edeb64548ded39f0ce2a3e8f8e7870', corners: this.corners, standaloneAppearance: this.standaloneAppearance }, h("div", { key: '50ed2f6798cc2958d0f84f68d254f36fb5082d62', class: "header", slot: "header" }, h("ix-icon-button", { key: '619533c4c94783d4507e1497fde743ea3c7550d3', onClick: () => this.changeToAdjacentMonth(-1), ghost: true, icon: "chevron-left", variant: "primary", class: "arrows" }), h("div", { key: '3148bd3bd051fc93328b44d1d7a7e16065dba634', class: "selector" }, h("ix-button", { key: 'b09d8cc88e2062b161777104e44fa8f9498b8b20', ghost: true, ref: (ref) => (this.dropdownButtonRef = ref) }, h("span", { key: 'c3370f2ac962a70d669b164e7a6bd7459de4b6f2', class: "fontSize capitalize" }, this.monthNames[this.selectedMonth], " ", this.selectedYear)), h("ix-dropdown", { key: 'd6133ae1820335323ae2babe9b588ac3d16b4b4e', class: "dropdown", trigger: this.dropdownButtonRef, placement: "bottom-start" }, h("div", { key: '8a58e9cfa6fb6e6900ca788316241a0dc8010803', class: "wrapper" }, h("div", { key: '26107292f53cdb1a7ed5c62d4ea59a21b8df5851', class: "overflow", onScroll: () => this.infiniteScrollYears(), ref: (ref) => (this.yearContainerRef = ref) }, this.renderYears()), h("div", { key: '34e699c477a19b235bdf7046129e282f29d8fb61', class: "overflow" }, this.monthNames.map((month, index) => (h("div", { key: month, ref: (ref) => {
                 if (month === this.monthNames[0]) {
                     this.firstMonthRef = ref;
                 }
@@ -441,12 +441,12 @@ export class DatePicker {
                 hidden: this.tempYear !== this.selectedYear ||
                     this.tempMonth !== index,
                 checkPosition: true,
-            }, name: "single-check", size: "16" }), h("div", null, h("span", { class: "capitalize monthMargin" }, `${month} ${this.tempYear}`))))))))), h("ix-icon-button", { key: 'f5c953e74f7439cd70066cc9b6787d9b9fbeaa5d', onClick: () => this.changeToAdjacentMonth(1), ghost: true, icon: "chevron-right", variant: "primary", class: "arrows" })), h("div", { key: 'd7f3fc09add9a2fc9e8a064a6aafb3ac32d92a2c', class: "grid" }, h("div", { key: 'e58f89a1f9a1a4a2558f82f9d6b0b6b4966a008d', class: "calendar-item week-day" }), this.dayNames.map((name) => (h("div", { key: name, class: "calendar-item week-day" }, name.slice(0, 3)))), this.calendar.map((week) => {
+            }, name: "single-check", size: "16" }), h("div", null, h("span", { class: "capitalize monthMargin" }, `${month} ${this.tempYear}`))))))))), h("ix-icon-button", { key: '34c2a37167375cde6225edc49a8c7b914d1d7588', onClick: () => this.changeToAdjacentMonth(1), ghost: true, icon: "chevron-right", variant: "primary", class: "arrows" })), h("div", { key: 'd1df9bdbd51a3fc776ffd1b47074f411070f9863', class: "grid" }, h("div", { key: 'e303bb7a4b7526396cc4026385e6a501671ac008', class: "calendar-item week-day" }), this.dayNames.map((name) => (h("div", { key: name, class: "calendar-item week-day" }, name.slice(0, 3)))), this.calendar.map((week) => {
             return (h(Fragment, null, h("div", { class: "calendar-item week-number" }, week.weekNumber), week.dayNumbers.map((day) => (h("div", { key: day, id: `day-cell-${day}`, "date-calender-day": true, class: this.getDayClasses(day), onClick: () => this.selectDay(day), onKeyUp: (e) => e.key === 'Enter' && this.selectDay(day), tabIndex: day === this.focusedDay ? 0 : -1, onFocus: () => this.onDayFocus(), onBlur: () => this.onDayBlur() }, day)))));
-        })), h("div", { key: '1bf25be4a2a5872bf374130155efaddc35c55f23', class: {
+        })), h("div", { key: '58b7b297f63253238dd66d70bc8cf6420df0c449', class: {
                 button: true,
                 hidden: !this.range || !this.standaloneAppearance,
-            } }, h("ix-button", { key: '38fcb3335664b6c2a4c10d6379e0717cffae163d', onClick: () => this.onDone() }, this.textSelectDate || this.i18nDone)))));
+            } }, h("ix-button", { key: 'df9f68bcb06ffbb1b9ed0439336eaf5361b606de', onClick: () => this.onDone() }, this.textSelectDate || this.i18nDone)))));
     }
     static get is() { return "ix-date-picker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/date-time-card/date-time-card.js

@@ -28,7 +28,7 @@ export class DateTimeCard {
         };
     }
     render() {
-        return (h(Host, { key: 'be249cc33523ab05fcea91c285a828d42803530c' }, h("div", { key: '3a4389a7bf5e5ec46622ddae68a14d121a1cad97', class: this.cardClasses() }, h("div", { key: '711acb2cd8a3a78046bc800e7c6ead60a0ad1b1f', class: "header" }, h("slot", { key: '72dd5f1b4c27869449729395a2dd9fe73b81d2b8', name: "header" })), h("div", { key: 'cc763fd99e776b0e8fa4b5615d92c51a556e0ee8', class: "separator" }), h("div", { key: '3654550d4f9fa01bbd79d0c8666116ed645ae495', class: "content" }, h("slot", { key: 'b2e03f699d22bedc7a586ec2f1be3bce3497d82f' })))));
+        return (h(Host, { key: 'f8ed1e43427e1723f5015a550c2cc9a110bee2b2' }, h("div", { key: 'f29905676e209d12e851fb8991e60d28cf7153bb', class: this.cardClasses() }, h("div", { key: '4e34b58cb52dddd372fda6713bdd41d612612f96', class: "header" }, h("slot", { key: 'c31d602a45866159181c20a3674cd18c5679052f', name: "header" })), h("div", { key: '5d86be7a1b70d75246bf07cda2898bc3ee768ca5', class: "separator" }), h("div", { key: '3d3e38bff5d56f06e88ef654e6f621ee3ffc8b9c', class: "content" }, h("slot", { key: 'c8a3b2a6ef2f7260ee0a8a16f5ee8c5eda1d9db6' })))));
     }
     static get is() { return "ix-date-time-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/datetime-picker/datetime-picker.js

@@ -52,7 +52,7 @@ export class DatetimePicker {
         this.timeChange.emit(time);
     }
     render() {
-        return (h(Host, { key: '7aa5e453963c62a4c168f2897f5408363f5c3d20' }, h("ix-layout-grid", { key: '5f47e5e23adb80a89591a1a2aeaa59531b963f1c', class: "no-padding" }, h("ix-row", { key: '8bd9fc26a2ccfae88142350ca76a0ef203ffaaa9' }, h("ix-col", { key: 'f2dc175c68cfaa2659680ca0c57af20f727aee2b', class: "no-padding" }, h("ix-date-picker", { key: 'a8712aad46e1c4f642ad0d0f1c1da865c1b111b1', ref: (ref) => (this.datePickerElement = ref), corners: "left", range: this.range, onDateChange: (event) => this.onDateChange(event), from: this.from, to: this.to, format: this.dateFormat, minDate: this.minDate, maxDate: this.maxDate, weekStartIndex: this.weekStartIndex, standaloneAppearance: false, locale: this.locale })), h("ix-col", { key: 'ad944278fd9b15feeec3f3cb87b159c02a9e3ea1', class: "no-padding" }, h("ix-time-picker", { key: 'aea360fe3436838190a32722498b4085a7cc2014', class: "min-width", ref: (ref) => (this.timePickerElement = ref), corners: "right", standaloneAppearance: false, showHour: this.showHour, showMinutes: this.showMinutes, showSeconds: this.showSeconds, onTimeChange: (event) => this.onTimeChange(event), format: this.timeFormat, time: this.time }))), h("ix-row", { key: 'cdfc9c5611a06d928503e1c97a32eabca8db1c91' }, h("ix-col", { key: 'f1d139a978e450241f14a6907f708404c44f2596' }, h("ix-button", { key: 'd79116b7084cffcde9705908d0ed174fc988f829', class: "btn-select-date btn-md-width", onClick: () => this.onDone() }, this.textSelectDate || this.i18nDone))))));
+        return (h(Host, { key: '83ee67741b982fbf3a6191c04fa3edbbdb6e6f44' }, h("ix-layout-grid", { key: 'f5f2c66badc930b769638f8f087058b51e44aca7', class: "no-padding" }, h("ix-row", { key: '15361bfa7b0cba0688507273601701160016d69b' }, h("ix-col", { key: 'c4d1d8a41b939e7970277d7a8d9a1c68db7bfa91', class: "no-padding" }, h("ix-date-picker", { key: '77bc6717428ef6fd131cd364b15b5e62a79e8f7f', ref: (ref) => (this.datePickerElement = ref), corners: "left", range: this.range, onDateChange: (event) => this.onDateChange(event), from: this.from, to: this.to, format: this.dateFormat, minDate: this.minDate, maxDate: this.maxDate, weekStartIndex: this.weekStartIndex, standaloneAppearance: false, locale: this.locale })), h("ix-col", { key: '52d25a39e84d6e0bc35bfe2159c368d2611570c3', class: "no-padding" }, h("ix-time-picker", { key: 'c19954e799ec9a0f5afb7df35472e58911ea7209', class: "min-width", ref: (ref) => (this.timePickerElement = ref), corners: "right", standaloneAppearance: false, showHour: this.showHour, showMinutes: this.showMinutes, showSeconds: this.showSeconds, onTimeChange: (event) => this.onTimeChange(event), format: this.timeFormat, time: this.time }))), h("ix-row", { key: 'cc6b061a09a9e3b8e06d7acd6bfe801dc884cc92' }, h("ix-col", { key: '86d98b8b9d25f0d77707c7104ed3b53efed3fd04' }, h("ix-button", { key: '5e843ec14cc32176420a8304779e7563117af40d', class: "btn-select-date btn-md-width", onClick: () => this.onDone() }, this.textSelectDate || this.i18nDone))))));
     }
     static get is() { return "ix-datetime-picker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/divider/divider.js

@@ -12,7 +12,7 @@ import { h, Host } from "@stencil/core";
  */
 export class Divider {
     render() {
-        return h(Host, { key: 'a12f752ef0fa741ad16068b425293e9ba39d21c8' });
+        return h(Host, { key: '77aba5256230ceae62d44788f8b3c5e882fe5e80' });
     }
     static get is() { return "ix-divider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/drawer/drawer.js

@@ -86,7 +86,7 @@ export class Drawer {
         this.onShowChanged(this.show);
     }
     render() {
-        return (h(Host, { key: '91fc9415b70a8ee79f85dcf40fef3ccb9cbb20c9', class: {
+        return (h(Host, { key: 'e62222323c1b4c58abef1702618873c3856405de', class: {
                 'drawer-container': true,
                 toggle: this.show,
                 'full-height': this.fullHeight,
@@ -95,7 +95,7 @@ export class Drawer {
                 width: this.width === 'auto' ? this.width : `${this.width}rem`,
                 'min-width': `${this.minWidth}rem`,
                 'max-width': `${this.maxWidth}rem`,
-            }, ref: (el) => (this.divElement = el), "data-testid": "container", id: "div-container" }, h("div", { key: 'b773ea537ab6410433b6af3f7d57f96070a8f462', class: "header" }, h("div", { key: 'd032e1d8af587f872f61aaae3630aa0b03a99993', class: "header-content" }, h("slot", { key: '8d1c3b9819ed60666dff64386bd87d60d880bb13', name: "header" })), h("ix-icon-button", { key: 'b73baa2dea5c23cab77fc05e9506faf0424135c6', class: "close-button", icon: 'close', size: "24", ghost: true, onClick: () => this.onCloseClicked(), "data-testid": "close-button" })), h("div", { key: '8b838c388ca39c900245896b5912ed769b63bae6', class: "content" }, h("slot", { key: '08ba8b51e00558a0063430d32d300e347b09a310' }))));
+            }, ref: (el) => (this.divElement = el), "data-testid": "container", id: "div-container" }, h("div", { key: 'add6dc645923e78ea4aab5a5119900ffb77f84e2', class: "header" }, h("div", { key: 'e173f66d20de86d73957e68ba58049d9fd5694f2', class: "header-content" }, h("slot", { key: '8c3fcccd355f8648ef1bd2367c764d3360805ffb', name: "header" })), h("ix-icon-button", { key: '4ca6c7513df414120a6f7f4164cb8cfed84992fe', class: "close-button", icon: 'close', size: "24", ghost: true, onClick: () => this.onCloseClicked(), "data-testid": "close-button" })), h("div", { key: '95fb535fc3fe56ff7731d00d849fd4d93b61d31a', class: "content" }, h("slot", { key: '44f5d0a2b5d4c876c67c4db047653d63550e5ac2' }))));
     }
     static get is() { return "ix-drawer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown/dropdown.js

@@ -256,7 +256,7 @@ export class Dropdown {
         this.applyDropdownPosition();
     }
     render() {
-        return (h(Host, { key: '704bc3d7987061a7b9835263d45ee11f753ba71b', "data-ix-dropdown": this.localUId, ref: (ref) => (this.dropdownRef = ref), class: {
+        return (h(Host, { key: '238292e4c3d58cb76a31d55701e12768e6dac3e7', "data-ix-dropdown": this.localUId, ref: (ref) => (this.dropdownRef = ref), class: {
                 'dropdown-menu': true,
                 show: this.show,
                 overflow: true,
@@ -264,7 +264,7 @@ export class Dropdown {
                 margin: '0',
                 minWidth: '0px',
                 position: this.positioningStrategy,
-            }, role: "list", onClick: (event) => this.onDropdownClick(event) }, h("div", { key: '5e0c4a15d72372573f992b86774d52bfa64c72c8', style: { display: 'contents' } }, this.header && h("div", { class: "dropdown-header" }, this.header), h("slot", { key: 'f182bef9568ab69d49a5fb2d2fbccfdd05041c80' }))));
+            }, role: "list", onClick: (event) => this.onDropdownClick(event) }, h("div", { key: 'c7ae3b8f704c5b80742920d9375267f77813330f', style: { display: 'contents' } }, this.header && h("div", { class: "dropdown-header" }, this.header), h("slot", { key: '982197ccab46e37c8651eb6937f93b6441880fe2' }))));
     }
     static get is() { return "ix-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown-button/dropdown-button.js

@@ -34,11 +34,11 @@ export class DropdownButton {
             } }));
     }
     render() {
-        return (h(Host, { key: '8930487c4b37d245f7fb9828c5028136e50ac81b', class: {
+        return (h(Host, { key: '4a18eaa51a9defa9a50aa2d4008176640d94fd5a', class: {
                 disabled: this.disabled,
             }, ref: (ref) => {
                 this.dropdownAnchor = ref;
-            } }, h("div", { key: 'ea5caa3aac82f89ece0f569345f10b8afe995e44', class: "dropdown-button" }, this.label ? (h("ix-button", { variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled, alignment: "start" }, h("div", { class: 'content' }, this.icon ? (h("ix-icon", { name: this.icon, size: "24", class: 'dropdown-icon' })) : null, h("div", { class: 'button-label' }, this.label), h("ix-icon", { name: 'chevron-down-small', size: "24" })))) : (h("div", null, h("ix-icon-button", { icon: this.icon, variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled }), this.getTriangle()))), h("ix-dropdown", { key: '744ebec47c4658921d5a57f0165f6a7c95ed32e8', class: "dropdown", trigger: this.dropdownAnchor, placement: this.placement, closeBehavior: this.closeBehavior }, h("slot", { key: '438133ed750034c6a94cab0921c06cdf74c7b79e' }))));
+            } }, h("div", { key: '2e967b92d073f88609f31d90cafd6b5455930560', class: "dropdown-button" }, this.label ? (h("ix-button", { variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled, alignment: "start" }, h("div", { class: 'content' }, this.icon ? (h("ix-icon", { name: this.icon, size: "24", class: 'dropdown-icon' })) : null, h("div", { class: 'button-label' }, this.label), h("ix-icon", { name: 'chevron-down-small', size: "24" })))) : (h("div", null, h("ix-icon-button", { icon: this.icon, variant: this.variant, outline: this.outline, ghost: this.ghost, disabled: this.disabled }), this.getTriangle()))), h("ix-dropdown", { key: '1477ef9b47c696f1ab705f0973b6ba20228975b2', class: "dropdown", trigger: this.dropdownAnchor, placement: this.placement, closeBehavior: this.closeBehavior }, h("slot", { key: '137db0e0b45d8e5f370346620782007c3b28f7f7' }))));
     }
     static get is() { return "ix-dropdown-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown-header/dropdown-header.js

@@ -15,7 +15,7 @@ export class DropdownHeader {
         this.label = undefined;
     }
     render() {
-        return (h(Host, { key: '9b48e23d908cf0cc9f47822f9e25adacc878165d' }, h("ix-typography", { key: 'd89842c74ad80c00e696b0ca5d5a02d4eb646c3c', class: 'category-text', variant: 'default-title' }, this.label)));
+        return (h(Host, { key: 'fa3daed3c42026d56472617e8011daf26a6a0143' }, h("ix-typography", { key: 'd5b713244e69d78221498344e435c0fe08c06b26', class: 'category-text', variant: 'default-title' }, this.label)));
     }
     static get is() { return "ix-dropdown-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown-item/dropdown-item.js

@@ -33,15 +33,15 @@ export class DropdownItem {
             this.icon !== undefined);
     }
     render() {
-        return (h(Host, { key: 'd0961e924032ae68a9413214e4d1ab295c938507', class: {
+        return (h(Host, { key: '3882c42ff856b85402ec8fbcd366832993a2d50b', class: {
                 hover: this.hover,
                 'icon-only': this.isIconOnly(),
                 disabled: this.disabled,
                 submenu: this.isSubMenu,
-            }, role: "listitem" }, h("button", { key: '798221fee0673bad5791f7823a0316217890d744', type: "button", tabIndex: 0, class: {
+            }, role: "listitem" }, h("button", { key: '18957e0107f55aed30e6cecfa6bfbe02c456a850', type: "button", tabIndex: 0, class: {
                 'dropdown-item': true,
                 'no-checked-field': this.suppressChecked,
-            }, onClick: () => this.emitItemClick() }, !this.suppressChecked ? (h("div", { class: "dropdown-item-checked" }, this.checked ? (h("ix-icon", { class: "checkmark", name: 'single-check', size: "16" })) : null)) : null, this.icon ? (h("ix-icon", { class: "dropdown-item-icon", name: this.icon })) : null, h("div", { key: '590a12e0a50264cb5367a94c23d2641f4adc2b82', class: "dropdown-item-text" }, this.label, h("slot", { key: 'dcbeb64fc42ff9ef4a21e2dbec9eb843e09f658c' })), this.isSubMenu ? (h("ix-icon", { name: 'chevron-right-small', class: 'submenu-icon' })) : null)));
+            }, onClick: () => this.emitItemClick() }, !this.suppressChecked ? (h("div", { class: "dropdown-item-checked" }, this.checked ? (h("ix-icon", { class: "checkmark", name: 'single-check', size: "16" })) : null)) : null, this.icon ? (h("ix-icon", { class: "dropdown-item-icon", name: this.icon })) : null, h("div", { key: '94d506721e5e4b776e447bdfc678bce32811081c', class: "dropdown-item-text" }, this.label, h("slot", { key: 'ca6d981217740a41bce4bf024ed1f4c1bed2d915' })), this.isSubMenu ? (h("ix-icon", { name: 'chevron-right-small', class: 'submenu-icon' })) : null)));
     }
     static get is() { return "ix-dropdown-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown-quick-actions/dropdown-quick-actions.js

@@ -12,7 +12,7 @@ import { h, Host } from "@stencil/core";
  */
 export class DropdownQuickActions {
     render() {
-        return (h(Host, { key: '6fc1f482e9e43fd2e70535c7f2bb7786fc59e305' }, h("slot", { key: 'd8a06e975f6498b7735159e09a29e8d715a1ff99' })));
+        return (h(Host, { key: '4276b052d998fa436597a67bc7df4b5f4dac79e7' }, h("slot", { key: 'fe99c816c933c10d45fdb93acfadf23938ffa1ae' })));
     }
     static get is() { return "ix-dropdown-quick-actions"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/empty-state/empty-state.js

@@ -19,7 +19,7 @@ export class EmptyState {
         this.action = undefined;
     }
     render() {
-        return (h(Host, { key: '79259f06912559cfdc060adbd8af1841b6743d5d', class: `emptyState emptyState--${this.layout}` }, this.icon && (h("div", { class: "emptyState__icon" }, h("ix-icon", { name: this.icon, size: this.layout === 'large' ? '32' : '32', color: "color-soft-text" }))), h("div", { key: 'f9665e695a8d12c6ed0c07f66a1a9e46c87ee99e', class: "emptyState__content" }, h("div", { key: '073f23f872bc5c761679e29951824b1b5123991d', class: "content__label" }, h("ix-typography", { key: 'a3dd46861fe229b04905c4bb1be31f549e3d4c3b', variant: this.layout === 'large' ? 'display-large' : 'default' }, this.header), this.subHeader && (h("div", { class: "label__subHeader" }, this.subHeader))), this.action && (h("div", { class: "content__action" }, h("ix-button", { onClick: () => this.actionClick.emit() }, this.action))))));
+        return (h(Host, { key: '05758725d4d8effa0b61ae90189bea0556576bf5', class: `emptyState emptyState--${this.layout}` }, this.icon && (h("div", { class: "emptyState__icon" }, h("ix-icon", { name: this.icon, size: this.layout === 'large' ? '32' : '32', color: "color-soft-text" }))), h("div", { key: '443bdba623c0a05f224a113e27de4fa281c27563', class: "emptyState__content" }, h("div", { key: 'df17e2f2ca3c227bde9af9bbfbd25c8593b93472', class: "content__label" }, h("ix-typography", { key: '9a9d096c9676dd62d8ccf78f67e05f98d4abd761', variant: this.layout === 'large' ? 'display-large' : 'default' }, this.header), this.subHeader && (h("div", { class: "label__subHeader" }, this.subHeader))), this.action && (h("div", { class: "content__action" }, h("ix-button", { onClick: () => this.actionClick.emit() }, this.action))))));
     }
     static get is() { return "ix-empty-state"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/event-list/event-list.js

@@ -104,11 +104,11 @@ export class EventList {
         });
     }
     render() {
-        return (h(Host, { key: '6bc5d62a320af1a618b976d7a745dd1da08d5e0b', class: {
+        return (h(Host, { key: '89be0fbb595cea7d39e50feedb367108c2a206bb', class: {
                 'item-size-s': this.itemHeight === 'S',
                 'item-size-l': this.itemHeight === 'L',
                 compact: this.compact,
-            } }, h("ul", { key: 'ae28f0ca948651a677b6eff296043d9fe68f84f6' }, h("slot", { key: '3e5aaa7d87e8c72a2e83a8b086060ec86ab4fa30' }))));
+            } }, h("ul", { key: '1e14d4602a221795448e7216c0952b29af06c522' }, h("slot", { key: '5c55793caf21fb2f76f7019b7813a75b9746b180' }))));
     }
     static get is() { return "ix-event-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/event-list-item/event-list-item.js

@@ -28,16 +28,16 @@ export class EventListItem {
                 ? `var(${this.color})`
                 : `var(--theme-${this.color})`;
         }
-        return (h(Host, { key: 'ed92a7e8394856c074b51ebed8189e99fe1e29a2', class: {
+        return (h(Host, { key: '3e25c77fbee09f5cbd02c5ad5e449ea4eb63ddbb', class: {
                 disabled: this.disabled,
-            } }, h("div", { key: 'b4a23c2bc24a9589b019c5f27db2c66e3becf6ef', class: {
+            } }, h("div", { key: 'ef165d8f55102f0c3f308782389e5c2cccae782e', class: {
                 'event-list-item': true,
                 selected: this.selected,
                 disabled: this.disabled,
-            } }, h("div", { key: '1d04c7f035c233c2d9076626cc5a117404d6a135', class: `indicator ${!((_c = this.itemColor) !== null && _c !== void 0 ? _c : this.color) ? 'indicator-empty' : ''}`, style: {
+            } }, h("div", { key: '5a9f0d1af17820bab17fb8d1cefffdcd0ee1b02a', class: `indicator ${!((_c = this.itemColor) !== null && _c !== void 0 ? _c : this.color) ? 'indicator-empty' : ''}`, style: {
                 'background-color': ((_d = this.itemColor) !== null && _d !== void 0 ? _d : this.color) ? color : 'inherit',
                 opacity: `${this.disabled ? 0.4 : 1}`,
-            } }), h("div", { key: '930d5297013c14fff5494f70b5679fd63240ccb8', class: "event-list-item-container" }, h("div", { key: 'bf5e074f3beb0ac61df18aa15efd62baa8320aba', class: "event-content" }, h("slot", { key: 'ce0730f3c2cbb9d89a36abe041c6a3e5780434a1' })), this.chevron && (h("ix-icon", { name: 'chevron-right', size: "16", class: "chevron-icon" }))))));
+            } }), h("div", { key: '0bc498d396328ac8e7a4543339d1ff6c362fd19e', class: "event-list-item-container" }, h("div", { key: '6f57320d0c1c43222527a455bdea9193b53524fb', class: "event-content" }, h("slot", { key: '15cee1c7afade0bb0fe0112bfba54c7fe70d8e1e' })), this.chevron && (h("ix-icon", { name: 'chevron-right', size: "16", class: "chevron-icon" }))))));
     }
     static get is() { return "ix-event-list-item"; }
     static get encapsulation() { return "shadow"; }