@siemens/ix 2.1.1 → 2.1.2

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

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

package/dist/cjs/ix-validation-tooltip.cjs.entry.js

@@ -133,13 +133,13 @@ const ValidationTooltip = class {
     }
     render() {
         var _a, _b;
-        return (index.h(index.Host, { key: '2adabc09b27adab332a05e06f95f778e635db7cf' }, index.h("slot", { key: '9737aa1f46813f88404c5a80eaf0b8e1c6b166c4' }), index.h("div", { key: '6be2cd8f7c24bd7c3ddc42218ca0b70d3c56dc0a', role: "tooltip", style: {
+        return (index.h(index.Host, { key: '67aacf7f22d2d165674ab78c2f590c54abe33420' }, index.h("slot", { key: 'e0c33f6e04e6ce11caeb8dba4318214699de0f4c' }), index.h("div", { key: '3c5d508386e333a2ca50dc5bfe6ab59375c60e37', 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, index.h("slot", { key: '228c539e4447ce9a4c89ffe584f9b712ccaa1924', name: "tooltip-message" }), index.h("div", { key: 'cdbaf18c6c2033b9b03e33b4e5826309f504df14', id: "arrow" }))));
+            }, class: "validation-tooltip text-default" }, this.message, index.h("slot", { key: '8e87f49c00ea3916fd83a3b7e69b996311197dcb', name: "tooltip-message" }), index.h("div", { key: '1bd0d2d368cb7cb0fa113605522fff53831f2c35', id: "arrow" }))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ix-workflow-step.cjs.entry.js

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

package/dist/cjs/ix-workflow-steps.cjs.entry.js

@@ -71,7 +71,7 @@ const WorkflowSteps = class {
         this.updateSteps();
     }
     render() {
-        return (index.h(index.Host, { key: '0df56c84cde310027e181c8fd5d8c9dd4f5c9451' }, index.h("div", { key: '2f82dfc3689d431ac06586f673895b9c36799847', class: { steps: true, vertical: this.vertical } }, index.h("slot", { key: 'c22421b7917f1d61bc2624979bee8b8804cc8aa3' }))));
+        return (index.h(index.Host, { key: 'f142d00b7e556dc24442861edded53c090d3a2bb' }, index.h("div", { key: 'c5681d900c92023bff93b1d102fb5002da1d7a04', class: { steps: true, vertical: this.vertical } }, index.h("slot", { key: '866edb3dbeba5853bb4fdf1b764ff6f689002b5e' }))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/{menu-tabs-fc-b6a9af97.js → menu-tabs-fc-30a1b06b.js}

@@ -61,7 +61,7 @@ const MenuSettings = class {
         index.forceUpdate(this.el);
     }
     render() {
-        return index.h(MenuTabs, { key: 'a2691ce375c764745c7b364ac8d09e280869c86d', context: this });
+        return index.h(MenuTabs, { key: '81cb8883f4cdcf08c1d6005c634cfe9d44fde8e2', context: this });
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -102,4 +102,4 @@ exports.MenuTabs = MenuTabs;
 exports.initialize = initialize;
 exports.setTab = setTab;
 
-//# sourceMappingURL=menu-tabs-fc-b6a9af97.js.map
+//# sourceMappingURL=menu-tabs-fc-30a1b06b.js.map

package/dist/cjs/{menu-tabs-fc-b6a9af97.js.map → menu-tabs-fc-30a1b06b.js.map}

@@ -1 +1 @@
-{"file":"menu-tabs-fc-b6a9af97.js","mappings":"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","names":["forceUpdate","h","Host"],"sources":["src/components/utils/menu-tabs/menu-tabs-utils.ts","src/components/menu-settings/menu-settings.scss?tag=ix-menu-settings&encapsulation=shadow","src/components/menu-settings/menu-settings.tsx","src/components/utils/menu-tabs/menu-tabs-fc.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 */\n\nimport { MenuAbout } from 'src/components/menu-about/menu-about';\nimport { MenuSettings } from 'src/components/menu-settings/menu-settings';\n\nfunction getItems(\n  context: MenuSettings | MenuAbout\n): HTMLIxMenuSettingsItemElement[] | HTMLIxMenuAboutItemElement[] {\n  return Array.from(\n    context.el.querySelectorAll(\n      context instanceof MenuSettings\n        ? 'ix-menu-settings-item'\n        : 'ix-menu-about-item'\n    )\n  );\n}\n\nexport function setTab(context: MenuSettings | MenuAbout, label: string) {\n  context.activeTabLabel = label;\n  context.items.forEach((i) => {\n    i.style.display = 'none';\n    if (i.label === context.activeTabLabel) {\n      i.style.display = 'block';\n    }\n  });\n}\n\nexport function initialize(context: MenuSettings | MenuAbout) {\n  context.items = getItems(context);\n\n  if (context.items.length) {\n    setTab(context, context.activeTabLabel || context.items[0].label);\n  }\n\n  context.items.forEach((item) => {\n    item.addEventListener('labelChange', (e: CustomEvent) => {\n      context.items = getItems(context);\n\n      if (e.detail.oldLabel === context.activeTabLabel) {\n        context.activeTabLabel = e.detail.newLabel;\n      }\n    });\n  });\n}\n\nexport interface CustomLabelChangeEvent {\n  name: string;\n  oldLabel: string;\n  newLabel: string;\n}\n\nexport interface CustomCloseEvent {\n  nativeEvent: MouseEvent;\n  name: string;\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@import 'common-variables';\n@import 'legacy/fonts';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: block;\n  background-color: var(--theme-nav-overlay--background);\n  padding: $medium-space $default-space $default-space $x-large-space;\n  flex-grow: 1;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n\n  .settings-header {\n    display: flex;\n    justify-content: space-between;\n    flex-direction: row;\n    align-items: center;\n    height: $x-large-space;\n    margin-bottom: $small-space;\n\n    h2 {\n      color: var(--theme-nav-overlay-header--color);\n      margin-bottom: 1rem;\n    }\n  }\n\n  ix-tabs {\n    margin-bottom: 1.5rem;\n  }\n\n  .settings-tabs {\n    margin-bottom: $large-space;\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\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  forceUpdate,\n  h,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { MenuTabs } from '../utils/menu-tabs/menu-tabs-fc';\nimport {\n  CustomCloseEvent,\n  initialize,\n  setTab,\n} from '../utils/menu-tabs/menu-tabs-utils';\n\n@Component({\n  tag: 'ix-menu-settings',\n  styleUrl: 'menu-settings.scss',\n  shadow: true,\n})\nexport class MenuSettings {\n  @Element() el!: HTMLIxMenuSettingsElement;\n\n  /**\n   * Active tab\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable\n  @Prop({ mutable: true }) activeTabLabel: string;\n\n  /**\n   * Label of first tab\n   */\n  @Prop() label = 'Settings';\n\n  /**\n   * Internal\n   */\n  @Prop() show = false;\n\n  /**\n   * Popover closed\n   */\n  @Event() close: EventEmitter<CustomCloseEvent>;\n\n  @State() items: HTMLIxMenuSettingsItemElement[];\n\n  @Watch('activeTabLabel')\n  updateTab(label: string) {\n    setTab(this, label);\n  }\n\n  componentWillLoad() {\n    initialize(this);\n  }\n\n  componentDidLoad() {\n    forceUpdate(this.el);\n  }\n\n  render() {\n    return <MenuTabs context={this} />;\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\nimport { FunctionalComponent, h, Host } from '@stencil/core';\nimport { MenuAbout } from 'src/components/menu-about/menu-about';\nimport { MenuSettings } from 'src/components/menu-settings/menu-settings';\nimport { setTab } from './menu-tabs-utils';\n\ninterface MenuTabsProps {\n  context: MenuSettings | MenuAbout;\n}\n\nconst getTabItems = (context: MenuSettings | MenuAbout) => {\n  return context.items.map(({ label }) => {\n    return (\n      <ix-tab-item\n        selected={label === context.activeTabLabel}\n        onClick={() => setTab(context, label)}\n      >\n        {label}\n      </ix-tab-item>\n    );\n  });\n};\n\nexport const MenuTabs: FunctionalComponent<MenuTabsProps> = ({ context }) => (\n  <Host\n    slot={\n      context instanceof MenuSettings ? 'ix-menu-settings' : 'ix-menu-about'\n    }\n    class={{\n      show: context.show,\n    }}\n  >\n    <div\n      class={\n        context instanceof MenuSettings ? 'settings-header' : 'about-header'\n      }\n    >\n      <h2 class=\"text-h2\">{context.label}</h2>\n      <ix-icon-button\n        ghost\n        size=\"24\"\n        icon={'close'}\n        onClick={(e) =>\n          context.close.emit({\n            name:\n              context instanceof MenuSettings\n                ? 'ix-menu-settings'\n                : 'ix-menu-about',\n            nativeEvent: e,\n          })\n        }\n      ></ix-icon-button>\n    </div>\n    <ix-tabs>{getTabItems(context)}</ix-tabs>\n    <slot></slot>\n  </Host>\n);\n"],"version":3}
+{"file":"menu-tabs-fc-30a1b06b.js","mappings":"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","names":["forceUpdate","h","Host"],"sources":["src/components/utils/menu-tabs/menu-tabs-utils.ts","src/components/menu-settings/menu-settings.scss?tag=ix-menu-settings&encapsulation=shadow","src/components/menu-settings/menu-settings.tsx","src/components/utils/menu-tabs/menu-tabs-fc.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 */\n\nimport { MenuAbout } from 'src/components/menu-about/menu-about';\nimport { MenuSettings } from 'src/components/menu-settings/menu-settings';\n\nfunction getItems(\n  context: MenuSettings | MenuAbout\n): HTMLIxMenuSettingsItemElement[] | HTMLIxMenuAboutItemElement[] {\n  return Array.from(\n    context.el.querySelectorAll(\n      context instanceof MenuSettings\n        ? 'ix-menu-settings-item'\n        : 'ix-menu-about-item'\n    )\n  );\n}\n\nexport function setTab(context: MenuSettings | MenuAbout, label: string) {\n  context.activeTabLabel = label;\n  context.items.forEach((i) => {\n    i.style.display = 'none';\n    if (i.label === context.activeTabLabel) {\n      i.style.display = 'block';\n    }\n  });\n}\n\nexport function initialize(context: MenuSettings | MenuAbout) {\n  context.items = getItems(context);\n\n  if (context.items.length) {\n    setTab(context, context.activeTabLabel || context.items[0].label);\n  }\n\n  context.items.forEach((item) => {\n    item.addEventListener('labelChange', (e: CustomEvent) => {\n      context.items = getItems(context);\n\n      if (e.detail.oldLabel === context.activeTabLabel) {\n        context.activeTabLabel = e.detail.newLabel;\n      }\n    });\n  });\n}\n\nexport interface CustomLabelChangeEvent {\n  name: string;\n  oldLabel: string;\n  newLabel: string;\n}\n\nexport interface CustomCloseEvent {\n  nativeEvent: MouseEvent;\n  name: string;\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@import 'common-variables';\n@import 'legacy/fonts';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: block;\n  background-color: var(--theme-nav-overlay--background);\n  padding: $medium-space $default-space $default-space $x-large-space;\n  flex-grow: 1;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n\n  .settings-header {\n    display: flex;\n    justify-content: space-between;\n    flex-direction: row;\n    align-items: center;\n    height: $x-large-space;\n    margin-bottom: $small-space;\n\n    h2 {\n      color: var(--theme-nav-overlay-header--color);\n      margin-bottom: 1rem;\n    }\n  }\n\n  ix-tabs {\n    margin-bottom: 1.5rem;\n  }\n\n  .settings-tabs {\n    margin-bottom: $large-space;\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\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  forceUpdate,\n  h,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { MenuTabs } from '../utils/menu-tabs/menu-tabs-fc';\nimport {\n  CustomCloseEvent,\n  initialize,\n  setTab,\n} from '../utils/menu-tabs/menu-tabs-utils';\n\n@Component({\n  tag: 'ix-menu-settings',\n  styleUrl: 'menu-settings.scss',\n  shadow: true,\n})\nexport class MenuSettings {\n  @Element() el!: HTMLIxMenuSettingsElement;\n\n  /**\n   * Active tab\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable\n  @Prop({ mutable: true }) activeTabLabel: string;\n\n  /**\n   * Label of first tab\n   */\n  @Prop() label = 'Settings';\n\n  /**\n   * Internal\n   */\n  @Prop() show = false;\n\n  /**\n   * Popover closed\n   */\n  @Event() close: EventEmitter<CustomCloseEvent>;\n\n  @State() items: HTMLIxMenuSettingsItemElement[];\n\n  @Watch('activeTabLabel')\n  updateTab(label: string) {\n    setTab(this, label);\n  }\n\n  componentWillLoad() {\n    initialize(this);\n  }\n\n  componentDidLoad() {\n    forceUpdate(this.el);\n  }\n\n  render() {\n    return <MenuTabs context={this} />;\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\nimport { FunctionalComponent, h, Host } from '@stencil/core';\nimport { MenuAbout } from 'src/components/menu-about/menu-about';\nimport { MenuSettings } from 'src/components/menu-settings/menu-settings';\nimport { setTab } from './menu-tabs-utils';\n\ninterface MenuTabsProps {\n  context: MenuSettings | MenuAbout;\n}\n\nconst getTabItems = (context: MenuSettings | MenuAbout) => {\n  return context.items.map(({ label }) => {\n    return (\n      <ix-tab-item\n        selected={label === context.activeTabLabel}\n        onClick={() => setTab(context, label)}\n      >\n        {label}\n      </ix-tab-item>\n    );\n  });\n};\n\nexport const MenuTabs: FunctionalComponent<MenuTabsProps> = ({ context }) => (\n  <Host\n    slot={\n      context instanceof MenuSettings ? 'ix-menu-settings' : 'ix-menu-about'\n    }\n    class={{\n      show: context.show,\n    }}\n  >\n    <div\n      class={\n        context instanceof MenuSettings ? 'settings-header' : 'about-header'\n      }\n    >\n      <h2 class=\"text-h2\">{context.label}</h2>\n      <ix-icon-button\n        ghost\n        size=\"24\"\n        icon={'close'}\n        onClick={(e) =>\n          context.close.emit({\n            name:\n              context instanceof MenuSettings\n                ? 'ix-menu-settings'\n                : 'ix-menu-about',\n            nativeEvent: e,\n          })\n        }\n      ></ix-icon-button>\n    </div>\n    <ix-tabs>{getTabItems(context)}</ix-tabs>\n    <slot></slot>\n  </Host>\n);\n"],"version":3}

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

@@ -93,12 +93,12 @@ export class Application {
         });
     }
     render() {
-        return (h(Host, { key: '5611ad541df7672a749f3042f7accf1bc0f4fea3', "data-role": "", class: {
+        return (h(Host, { key: 'c617c1c5634cc4e151ad45bfec3be602619df7bb', "data-role": "", class: {
                 [`breakpoint-${this.breakpoint}`]: true,
-            } }, h("slot", { key: 'b8600e40c99555bae7055b6a4894df57a7d49026', name: "application-header" }), h("div", { key: 'ad71a6e9d05034a173b16075b4343b5244c40e98', class: "application" }, h("slot", { key: '6ae1d4a193cc858529efbb0a06421ecf5437224a', name: "menu" }), h("aside", { key: '06a2517aae4b8e0edc4ede14f03b87e9960a39a3', class: {
+            } }, h("slot", { key: '7dd298629e5d825957cc5caf15be3726e0487374', name: "application-header" }), h("div", { key: '41da1f0707c6f6723e33a50f4c45cda28bed9e77', class: "application" }, h("slot", { key: '7d2b838c6193af2fc357befb1c15cd6870d85841', name: "menu" }), h("aside", { key: '73ce757bc32176170b51cf95013b13f5594c0eb2', class: {
                 'application-sidebar': true,
                 slotted: this.applicationSidebarSlotted,
-            }, onClick: () => this.onContentClick() }, h("slot", { key: '77d253b74578d2392718dcb26ed16c52a60e93ae', name: "application-sidebar", onSlotchange: () => (this.applicationSidebarSlotted = hasSlottedElements(this.applicationSidebarSlot)) })), h("main", { key: '34861c56227c6adce9503099d2b1a7a66bfbafa6', class: "content", onClick: () => this.onContentClick() }, h("slot", { key: '55b324f84d53c0a8a2a49cdcf49b940131ec7ea9' })))));
+            }, onClick: () => this.onContentClick() }, h("slot", { key: '8361978e6d5cdccae60544290253175e27e00b54', name: "application-sidebar", onSlotchange: () => (this.applicationSidebarSlotted = hasSlottedElements(this.applicationSidebarSlot)) })), h("main", { key: 'cbce05cd33d05f8f6a4e7cf7e7f8582e560da0d6', class: "content", onClick: () => this.onContentClick() }, h("slot", { key: 'd3a7f19add2a6cf2f976c9be1b8688fa5e997e48' })))));
     }
     static get is() { return "ix-application"; }
     static get encapsulation() { return "shadow"; }

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

@@ -95,12 +95,12 @@ export class ApplicationHeader {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'b572496c016318e8a9d6e6e8db7b9de61abb3861', class: { [`breakpoint-${this.breakpoint}`]: true }, slot: "application-header" }, this.breakpoint === 'sm' && this.suppressResponsive === false && (h("ix-burger-menu", { onClick: () => this.onMenuClick(), expanded: this.menuExpanded })), ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig) &&
+        return (h(Host, { key: '5434362f681c6d6d67b1eaf5e5ebc993e578f8e9', class: { [`breakpoint-${this.breakpoint}`]: true }, slot: "application-header" }, this.breakpoint === 'sm' && this.suppressResponsive === false && (h("ix-burger-menu", { onClick: () => this.onMenuClick(), expanded: this.menuExpanded })), ((_a = this.applicationLayoutContext) === null || _a === void 0 ? void 0 : _a.appSwitchConfig) &&
             this.breakpoint !== 'sm' &&
-            this.suppressResponsive === false && (h("ix-icon-button", { onClick: () => this.showAppSwitch(), icon: "apps", ghost: true, class: "app-switch" })), h("div", { key: '6882fe0ae0d6653ef42c0e58dc65fb92d03ab4ea', class: "logo" }, h("slot", { key: '77d7b96f98d629e08dc5bc3e4338b703bbe1e2a6', name: "logo" })), h("div", { key: '84e0f79f501266f0d0b220f87aaa4a7aab8dc659', class: "name" }, this.name), h("div", { key: '2fae6ae95a4696765a3421ccc002e3e9efa6fbd6', class: "content" }, this.breakpoint === 'sm' ? (h(Fragment, null, h("ix-icon-button", { class: {
+            this.suppressResponsive === false && (h("ix-icon-button", { onClick: () => this.showAppSwitch(), icon: "apps", ghost: true, class: "app-switch" })), h("div", { key: '2a40f871e8359d2ad378546773c8ec1b583d1684', class: "logo" }, h("slot", { key: 'd53fb161f6accdbdd92c7455e0a81faab242054d', name: "logo" })), h("div", { key: '1244da8ee7ddbec82df90f6204948939dc67079c', class: "name" }, this.name), h("div", { key: '7a1256fba0480dba4e42da20f55c268b88422a99', class: "content" }, this.breakpoint === 'sm' ? (h(Fragment, null, h("ix-icon-button", { class: {
                 ['context-menu']: true,
                 ['context-menu-visible']: this.hasSlottedElements,
-            }, "data-context-menu": true, icon: "more-menu", ghost: true }), h("ix-dropdown", { "data-overflow-dropdown": true, class: "dropdown", discoverAllSubmenus: true, trigger: this.resolveContextMenuButton() }, h("div", { class: "dropdown-content" }, h("slot", { onSlotchange: () => this.updateIsSlottedContent() }))))) : (h("slot", { onSlotchange: () => this.updateIsSlottedContent() })), h("slot", { key: 'd9f22375761d77beb0fc038195c06d0e23297d31', name: "ix-application-header-avatar" }))));
+            }, "data-context-menu": true, icon: "more-menu", ghost: true }), h("ix-dropdown", { "data-overflow-dropdown": true, class: "dropdown", discoverAllSubmenus: true, trigger: this.resolveContextMenuButton() }, h("div", { class: "dropdown-content" }, h("slot", { onSlotchange: () => this.updateIsSlottedContent() }))))) : (h("slot", { onSlotchange: () => this.updateIsSlottedContent() })), h("slot", { key: '6732e9899c977bdd6301b75efce7687ca5a0bf4c', name: "ix-application-header-avatar" }))));
     }
     static get is() { return "ix-application-header"; }
     static get encapsulation() { return "shadow"; }

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"; }