@siemens/ix 2.1.2-beta.0 → 2.1.2

package/components/application-header.js

@@ -94,12 +94,12 @@ const ApplicationHeader = /*@__PURE__*/ proxyCustomElement(class ApplicationHead
     }
     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" }))));
     }
     get hostElement() { return this; }
     static get style() { return IxApplicationHeaderStyle0; }

package/components/avatar.js

@@ -6,7 +6,7 @@ import { d as defineCustomElement$3 } from './dropdown.js';
 import { d as defineCustomElement$2 } from './spinner.js';
 import { d as defineCustomElement$1 } from './typography.js';
 
-const avatarCss = ":host{display:flex;position:relative;width:-moz-fit-content;width:fit-content}:host .avatar{display:flex;align-items:center}:host .avatar>.avatar-image{height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px}:host .avatar>.avatar-initials{display:flex;align-items:center;justify-content:center;height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px;background-color:var(--theme-color-component-3);color:var(--theme-color-std-text)}:host .avatar #avatar-path-background{fill:var(--theme-avatar--background)}:host .avatar #avatar-path-person{fill:var(--theme-color-4)}:host .user-info{display:flex;flex-direction:row;position:relative;height:2.5rem;padding:1rem;width:12.75rem;min-width:12.75rem;max-width:12.75rem;gap:1rem}:host .user-info .avatar{width:2rem;pointer-events:none}:host .user-info .user{display:flex;position:relative;flex-direction:column;justify-content:center;max-width:10rem;width:100%;overflow:hidden}:host .user-info .username{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .user-info .extra{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host(.avatar-button) button{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem;padding:0px;border-radius:100px !important}:host(.avatar-button) .btn-invisible-primary{border-radius:var(--theme-btn--border-radius)}:host(.avatar-button) .btn-invisible-primary,:host(.avatar-button) .btn-invisible-primary.focus,:host(.avatar-button) .btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host(.avatar-button) .btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled):active,:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled):active,:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}:host(.avatar-button) li{transform:scale(0.8)}";
+const avatarCss = ":host{display:flex;position:relative;width:-moz-fit-content;width:fit-content}:host .avatar{display:flex;align-items:center}:host .avatar>.avatar-image{height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px}:host .avatar>.avatar-initials{display:flex;align-items:center;justify-content:center;height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px;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-avatar--color)}:host .user-info{display:flex;flex-direction:row;position:relative;height:2.5rem;padding:1rem;width:12.75rem;min-width:12.75rem;max-width:12.75rem;gap:1rem}:host .user-info .avatar{width:2rem;pointer-events:none}:host .user-info .user{display:flex;position:relative;flex-direction:column;justify-content:center;max-width:10rem;width:100%;overflow:hidden}:host .user-info .username{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .user-info .extra{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host(.avatar-button) button{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem;padding:0px;border-radius:100px !important}:host(.avatar-button) .btn-invisible-primary{border-radius:var(--theme-btn--border-radius)}:host(.avatar-button) .btn-invisible-primary,:host(.avatar-button) .btn-invisible-primary.focus,:host(.avatar-button) .btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host(.avatar-button) .btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled):active,:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled):active,:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}:host(.avatar-button) li{transform:scale(0.8)}";
 const IxAvatarStyle0 = avatarCss;
 
 function DefaultAvatar(props) {

package/components/avatar.js.map

@@ -1 +1 @@
-{"file":"avatar.js","mappings":"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","names":[],"sources":["src/components/avatar/avatar.scss?tag=ix-avatar&encapsulation=shadow","src/components/avatar/avatar.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\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/hover';\n@import './../button/button-mixin';\n\n:host {\n  display: flex;\n  position: relative;\n  width: fit-content;\n\n  .avatar {\n    display: flex;\n    align-items: center;\n\n    > .avatar-image {\n      height: 2rem;\n      width: 2rem;\n      min-height: 2rem;\n      min-width: 2rem;\n      border-radius: 100px;\n    }\n\n    > .avatar-initials {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 2rem;\n      width: 2rem;\n      min-height: 2rem;\n      min-width: 2rem;\n      border-radius: 100px;\n      background-color: var(--theme-color-component-3);\n      color: var(--theme-color-std-text);\n    }\n\n    #avatar-path-background {\n      fill: var(--theme-avatar--background);\n    }\n\n    #avatar-path-person {\n      fill: var(--theme-color-4);\n    }\n  }\n}\n\n:host {\n  .user-info {\n    display: flex;\n    flex-direction: row;\n    position: relative;\n    height: 2.5rem;\n    padding: 1rem;\n    width: 12.75rem;\n    min-width: 12.75rem;\n    max-width: 12.75rem;\n\n    gap: 1rem;\n\n    .avatar {\n      width: 2rem;\n      pointer-events: none;\n    }\n\n    .user {\n      display: flex;\n      position: relative;\n      flex-direction: column;\n      justify-content: center;\n      max-width: 10rem;\n      width: 100%;\n      overflow: hidden;\n    }\n\n    .username {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .extra {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n}\n\n:host(.avatar-button) {\n  button {\n    @include btn-base;\n    padding: 0px;\n\n    border-radius: 100px !important;\n  }\n\n  @include btn-base-variant('invisible-primary', false);\n\n  li {\n    transform: scale(0.8);\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  Fragment,\n  h,\n  Host,\n  Prop,\n  readTask,\n  State,\n} from '@stencil/core';\nimport { BaseButton } from '../button/base-button';\nimport { closestElement, hasSlottedElements } from '../utils/shadow-dom';\n\nfunction DefaultAvatar(props: { initials?: string }) {\n  const { initials } = props;\n\n  if (initials) {\n    return <div class={'avatar-initials'}>{initials}</div>;\n  }\n\n  return (\n    <svg\n      class={'avatar-image'}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n      viewBox=\"0 0 32 32\"\n    >\n      <g fill=\"none\" fill-rule=\"evenodd\">\n        <path\n          id=\"avatar-path-background\"\n          d=\"M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n          16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z\"\n        />\n        <path\n          id=\"avatar-path-person\"\n          d=\"M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n        6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n        9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n        6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z\"\n        />\n      </g>\n    </svg>\n  );\n}\n\nfunction AvatarImage(props: { image: string; initials: string }) {\n  return (\n    <li class=\"avatar\">\n      {props.image ? (\n        <img src={props.image} class=\"avatar-image\"></img>\n      ) : (\n        <DefaultAvatar initials={props.initials} />\n      )}\n    </li>\n  );\n}\n\nfunction UserInfo(props: {\n  image: string;\n  initials: string;\n  userName: string;\n  extra: string;\n}) {\n  return (\n    <Fragment>\n      <div class=\"user-info\" onClick={(event) => event.preventDefault()}>\n        <AvatarImage image={props.image} initials={props.initials} />\n        <div class=\"user\">\n          <div class=\"username\">{props.userName}</div>\n          {props.extra && (\n            <ix-typography class=\"extra\" color={'soft'}>\n              {props.extra}\n            </ix-typography>\n          )}\n        </div>\n      </div>\n    </Fragment>\n  );\n}\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-avatar',\n  styleUrl: 'avatar.scss',\n  shadow: true,\n})\nexport class Avatar {\n  @Element() hostElement: HTMLIxAvatarElement;\n\n  /**\n   * Display an avatar image\n   *\n   */\n  @Prop() image: string;\n\n  /**\n   * Display the initials of the user. Will be overwritten by image\n   *\n   */\n  @Prop() initials: string;\n\n  /**\n   * If set an info card displaying the username will be placed inside the dropdown.\n   * Note: Only working if avatar is part of the ix-application-header\n   *\n   * @since 2.1.0\n   */\n  @Prop() username: string;\n\n  /**\n   * Optional description text that will be displayed underneath the username.\n   * Note: Only working if avatar is part of the ix-application-header\n   *\n   * @since 2.1.0\n   */\n  @Prop() extra: string;\n\n  @State() isClosestApplicationHeader = false;\n  @State() hasSlottedElements = false;\n\n  private slotElement: HTMLSlotElement;\n\n  componentWillLoad() {\n    const closest = closestElement('ix-application-header', this.hostElement);\n    this.isClosestApplicationHeader = closest !== null;\n  }\n\n  private slottedChanged() {\n    this.hasSlottedElements = hasSlottedElements(this.slotElement);\n  }\n\n  private resolveAvatarTrigger() {\n    return new Promise<HTMLElement>((resolve) => {\n      readTask(() =>\n        resolve(this.hostElement.shadowRoot.querySelector('button'))\n      );\n    });\n  }\n\n  render() {\n    if (this.isClosestApplicationHeader) {\n      return (\n        <Host slot=\"ix-application-header-avatar\" class={'avatar-button'}>\n          <BaseButton\n            disabled={false}\n            ghost={true}\n            iconOval={false}\n            icon={undefined}\n            iconOnly={false}\n            loading={false}\n            outline={false}\n            selected={false}\n            type=\"button\"\n            variant=\"primary\"\n          >\n            <AvatarImage image={this.image} initials={this.initials} />\n          </BaseButton>\n          <ix-dropdown\n            trigger={this.resolveAvatarTrigger()}\n            class=\"avatar-dropdown\"\n          >\n            {this.username && (\n              <Fragment>\n                <UserInfo\n                  extra={this.extra}\n                  image={this.image}\n                  initials={this.initials}\n                  userName={this.username}\n                />\n                {this.hasSlottedElements && <ix-divider></ix-divider>}\n              </Fragment>\n            )}\n            <slot\n              onSlotchange={() => this.slottedChanged()}\n              ref={(ref: HTMLSlotElement) => (this.slotElement = ref)}\n            ></slot>\n          </ix-dropdown>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <AvatarImage image={this.image} initials={this.initials} />\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"avatar.js","mappings":"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","names":[],"sources":["src/components/avatar/avatar.scss?tag=ix-avatar&encapsulation=shadow","src/components/avatar/avatar.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\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/hover';\n@import './../button/button-mixin';\n\n:host {\n  display: flex;\n  position: relative;\n  width: fit-content;\n\n  .avatar {\n    display: flex;\n    align-items: center;\n\n    > .avatar-image {\n      height: 2rem;\n      width: 2rem;\n      min-height: 2rem;\n      min-width: 2rem;\n      border-radius: 100px;\n    }\n\n    > .avatar-initials {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 2rem;\n      width: 2rem;\n      min-height: 2rem;\n      min-width: 2rem;\n      border-radius: 100px;\n      background-color: var(--theme-avatar--background);\n      color: var(--theme-avatar--color);\n    }\n\n    #avatar-path-background {\n      fill: var(--theme-avatar--background);\n    }\n\n    #avatar-path-person {\n      fill:var(--theme-avatar--color);\n    }\n  }\n}\n\n:host {\n  .user-info {\n    display: flex;\n    flex-direction: row;\n    position: relative;\n    height: 2.5rem;\n    padding: 1rem;\n    width: 12.75rem;\n    min-width: 12.75rem;\n    max-width: 12.75rem;\n\n    gap: 1rem;\n\n    .avatar {\n      width: 2rem;\n      pointer-events: none;\n    }\n\n    .user {\n      display: flex;\n      position: relative;\n      flex-direction: column;\n      justify-content: center;\n      max-width: 10rem;\n      width: 100%;\n      overflow: hidden;\n    }\n\n    .username {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .extra {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n}\n\n:host(.avatar-button) {\n  button {\n    @include btn-base;\n    padding: 0px;\n\n    border-radius: 100px !important;\n  }\n\n  @include btn-base-variant('invisible-primary', false);\n\n  li {\n    transform: scale(0.8);\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  Fragment,\n  h,\n  Host,\n  Prop,\n  readTask,\n  State,\n} from '@stencil/core';\nimport { BaseButton } from '../button/base-button';\nimport { closestElement, hasSlottedElements } from '../utils/shadow-dom';\n\nfunction DefaultAvatar(props: { initials?: string }) {\n  const { initials } = props;\n\n  if (initials) {\n    return <div class={'avatar-initials'}>{initials}</div>;\n  }\n\n  return (\n    <svg\n      class={'avatar-image'}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n      viewBox=\"0 0 32 32\"\n    >\n      <g fill=\"none\" fill-rule=\"evenodd\">\n        <path\n          id=\"avatar-path-background\"\n          d=\"M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n          16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z\"\n        />\n        <path\n          id=\"avatar-path-person\"\n          d=\"M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n        6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n        9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n        6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z\"\n        />\n      </g>\n    </svg>\n  );\n}\n\nfunction AvatarImage(props: { image: string; initials: string }) {\n  return (\n    <li class=\"avatar\">\n      {props.image ? (\n        <img src={props.image} class=\"avatar-image\"></img>\n      ) : (\n        <DefaultAvatar initials={props.initials} />\n      )}\n    </li>\n  );\n}\n\nfunction UserInfo(props: {\n  image: string;\n  initials: string;\n  userName: string;\n  extra: string;\n}) {\n  return (\n    <Fragment>\n      <div class=\"user-info\" onClick={(event) => event.preventDefault()}>\n        <AvatarImage image={props.image} initials={props.initials} />\n        <div class=\"user\">\n          <div class=\"username\">{props.userName}</div>\n          {props.extra && (\n            <ix-typography class=\"extra\" color={'soft'}>\n              {props.extra}\n            </ix-typography>\n          )}\n        </div>\n      </div>\n    </Fragment>\n  );\n}\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-avatar',\n  styleUrl: 'avatar.scss',\n  shadow: true,\n})\nexport class Avatar {\n  @Element() hostElement: HTMLIxAvatarElement;\n\n  /**\n   * Display an avatar image\n   *\n   */\n  @Prop() image: string;\n\n  /**\n   * Display the initials of the user. Will be overwritten by image\n   *\n   */\n  @Prop() initials: string;\n\n  /**\n   * If set an info card displaying the username will be placed inside the dropdown.\n   * Note: Only working if avatar is part of the ix-application-header\n   *\n   * @since 2.1.0\n   */\n  @Prop() username: string;\n\n  /**\n   * Optional description text that will be displayed underneath the username.\n   * Note: Only working if avatar is part of the ix-application-header\n   *\n   * @since 2.1.0\n   */\n  @Prop() extra: string;\n\n  @State() isClosestApplicationHeader = false;\n  @State() hasSlottedElements = false;\n\n  private slotElement: HTMLSlotElement;\n\n  componentWillLoad() {\n    const closest = closestElement('ix-application-header', this.hostElement);\n    this.isClosestApplicationHeader = closest !== null;\n  }\n\n  private slottedChanged() {\n    this.hasSlottedElements = hasSlottedElements(this.slotElement);\n  }\n\n  private resolveAvatarTrigger() {\n    return new Promise<HTMLElement>((resolve) => {\n      readTask(() =>\n        resolve(this.hostElement.shadowRoot.querySelector('button'))\n      );\n    });\n  }\n\n  render() {\n    if (this.isClosestApplicationHeader) {\n      return (\n        <Host slot=\"ix-application-header-avatar\" class={'avatar-button'}>\n          <BaseButton\n            disabled={false}\n            ghost={true}\n            iconOval={false}\n            icon={undefined}\n            iconOnly={false}\n            loading={false}\n            outline={false}\n            selected={false}\n            type=\"button\"\n            variant=\"primary\"\n          >\n            <AvatarImage image={this.image} initials={this.initials} />\n          </BaseButton>\n          <ix-dropdown\n            trigger={this.resolveAvatarTrigger()}\n            class=\"avatar-dropdown\"\n          >\n            {this.username && (\n              <Fragment>\n                <UserInfo\n                  extra={this.extra}\n                  image={this.image}\n                  initials={this.initials}\n                  userName={this.username}\n                />\n                {this.hasSlottedElements && <ix-divider></ix-divider>}\n              </Fragment>\n            )}\n            <slot\n              onSlotchange={() => this.slottedChanged()}\n              ref={(ref: HTMLSlotElement) => (this.slotElement = ref)}\n            ></slot>\n          </ix-dropdown>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <AvatarImage image={this.image} initials={this.initials} />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/burger-menu.js

@@ -17,7 +17,7 @@ const BurgerMenu = /*@__PURE__*/ proxyCustomElement(class BurgerMenu extends HTM
         this.pinned = false;
     }
     render() {
-        return (h(Host, { key: '4e7e34d73d70225b42dfdab7529786e9a86a1931', class: {
+        return (h(Host, { key: 'abeece1a04e139ac724db7f84642d98e04184997', class: {
                 expanded: this.expanded,
             } }, this.pinned ? (h("ix-icon-button", { icon: `double-chevron-${this.expanded ? 'left' : 'right'}`, ghost: true })) : (h("button", { class: Object.assign(Object.assign({}, getButtonClasses('secondary', false, true, true, false, false, false)), { 'burger-menu-button': true }), type: "button", "aria-label": this.ixAriaLabel ? this.ixAriaLabel : null, "aria-pressed": a11yBoolean(this.expanded) }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24", height: "24" }, h("rect", { class: "line line-1", x: "2", y: "5", width: "20", height: "2" }), h("rect", { class: "line line-2", x: "2", y: "11", width: "13", height: "2" }), h("rect", { class: "line line-3", x: "2", y: "17", width: "20", height: "2" }))))));
     }

package/components/card-content.js

@@ -10,7 +10,7 @@ const CardContent = /*@__PURE__*/ proxyCustomElement(class CardContent extends H
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: 'ee46815485376b646616fe68d59f5057438e91f5' }, h("slot", { key: '4fe9415fb686a5700a81ce5a9584ceebd441d67d' })));
+        return (h(Host, { key: '7351d9d0c2ac7e3bb3ff04f7327876f3c118eede' }, h("slot", { key: 'ae6747bb0d3204fcb78bb26d763a04a090424fc5' })));
     }
     static get style() { return IxCardContentStyle0; }
 }, [1, "ix-card-content"]);

package/components/card-title.js

@@ -10,7 +10,7 @@ const CardHeader = /*@__PURE__*/ proxyCustomElement(class CardHeader extends HTM
         this.__attachShadow();
     }
     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 style() { return IxCardTitleStyle0; }
 }, [1, "ix-card-title"]);

package/components/date-picker.js

@@ -443,7 +443,7 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
         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;
                 }
@@ -457,12 +457,12 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
                 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)))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/components/date-time-card.js

@@ -24,7 +24,7 @@ const DateTimeCard = /*@__PURE__*/ proxyCustomElement(class DateTimeCard extends
         };
     }
     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 style() { return IxDateTimeCardStyle0; }
 }, [1, "ix-date-time-card", {

package/components/divider.js

@@ -10,7 +10,7 @@ const Divider = /*@__PURE__*/ proxyCustomElement(class Divider extends HTMLEleme
         this.__attachShadow();
     }
     render() {
-        return h(Host, { key: 'a12f752ef0fa741ad16068b425293e9ba39d21c8' });
+        return h(Host, { key: '77aba5256230ceae62d44788f8b3c5e882fe5e80' });
     }
     static get style() { return IxDividerStyle0; }
 }, [1, "ix-divider"]);

package/components/dropdown-item.js

@@ -33,15 +33,15 @@ const DropdownItem = /*@__PURE__*/ proxyCustomElement(class DropdownItem extends
             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)));
     }
     get hostElement() { return this; }
     static get style() { return IxDropdownItemStyle0; }

package/components/dropdown.js

@@ -378,7 +378,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
         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,
@@ -386,7 +386,7 @@ const Dropdown = /*@__PURE__*/ proxyCustomElement(class Dropdown extends HTMLEle
                 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' }))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/components/filter-chip.js

@@ -20,7 +20,7 @@ const FilterChip = /*@__PURE__*/ proxyCustomElement(class FilterChip extends HTM
         this.closeClick.emit();
     }
     render() {
-        return (h(Host, { key: '828da5a62ec5accc6b74cff38e4bfcf51de94c98', class: { disabled: this.disabled, readonly: this.readonly }, title: this.el.textContent }, h("div", { key: '8aba552ef0dee8349ab558d77db21a2c22f76f8f', class: "slot-container" }, h("slot", { key: 'a81343d2a06faf7bd6c5ca2522d40af99ee589ca' })), !this.disabled && !this.readonly ? (h("ix-icon-button", { ghost: true, oval: true, icon: 'close-small', size: "16", tabindex: this.disabled ? -1 : 0, variant: "primary", disabled: this.disabled, onClick: (e) => this.onCloseClick(e) })) : null));
+        return (h(Host, { key: '10df51e34656ed3b7b18e9f2a07a59c18784a3d1', class: { disabled: this.disabled, readonly: this.readonly }, title: this.el.textContent }, h("div", { key: '5a94912e2c22cbddb984b28ba0126f31c1e20165', class: "slot-container" }, h("slot", { key: '0fdc94729908b9c3a040667318dcc18d300e4176' })), !this.disabled && !this.readonly ? (h("ix-icon-button", { ghost: true, oval: true, icon: 'close-small', size: "16", tabindex: this.disabled ? -1 : 0, variant: "primary", disabled: this.disabled, onClick: (e) => this.onCloseClick(e) })) : null));
     }
     get el() { return this; }
     static get style() { return IxFilterChipStyle0; }

package/components/group-context-menu.js

@@ -38,7 +38,7 @@ const GroupContextMenu = /*@__PURE__*/ proxyCustomElement(class GroupContextMenu
         this.configureDropdown(dropdownElement, triggerElement);
     }
     render() {
-        return (h(Host, { key: '7b561df4adbe4906b1f4dbc4c50fab9788ec30c9' }, h("ix-icon-button", { key: '602b724690fb58e3261710002ef95fff2ef28c25', class: { hide: !this.showContextMenu }, size: "24", ghost: true, icon: 'context-menu' }), h("slot", { key: '0d42add312838be530623029430bc1007ba08a5a', onSlotchange: () => this.onSlotChange() })));
+        return (h(Host, { key: 'f709297153c95aae9ae99750d6eef9bb93b6e93b' }, h("ix-icon-button", { key: 'da299782cd2d0fbf3da4ffebedbd69f3a5f24bf9', class: { hide: !this.showContextMenu }, size: "24", ghost: true, icon: 'context-menu' }), h("slot", { key: '8557ba5e78f8098a9defdf3f966e83046522c2ae', onSlotchange: () => this.onSlotChange() })));
     }
     get hostElement() { return this; }
     static get style() { return IxGroupContextMenuStyle0; }

package/components/group-item.js

@@ -24,10 +24,10 @@ const GroupItem = /*@__PURE__*/ proxyCustomElement(class GroupItem extends HTMLE
         this.selectedChanged.emit(this.hostElement);
     }
     render() {
-        return (h(Host, { key: '7cfbff33c26c7dbd32d0d3616b115bf876026beb', class: {
+        return (h(Host, { key: '510249c40eb513c0cad7ad186f94311e86b99c1c', class: {
                 selected: this.selected && !this.suppressSelection,
                 'suppress-selection': this.suppressSelection,
-            } }, h("button", { key: 'e6c9e6094dd24a417f49f18aceb32b6504f83f6b', tabindex: this.focusable ? 0 : -1 }, h("div", { key: '9c736883c42fc5d39f36f9fbb6c39d01624ba8ed', class: "group-entry-selection-indicator" }), this.icon ? h("ix-icon", { size: "16", name: this.icon }) : null, this.text ? (h("span", { class: "group-entry-text" }, h("span", { title: this.text }, this.text))) : null, this.secondaryText ? (h("span", { class: "group-entry-text-secondary" }, h("span", { title: this.secondaryText }, this.secondaryText))) : null, h("slot", { key: '770f048023b4ecca5302d7d11162ed4670e8db16' }))));
+            } }, h("button", { key: '58314b961969fc828b490a251eb3fc991b332356', tabindex: this.focusable ? 0 : -1 }, h("div", { key: '3b643550562e7368c87e4b6443a51902f63da7d5', class: "group-entry-selection-indicator" }), this.icon ? h("ix-icon", { size: "16", name: this.icon }) : null, this.text ? (h("span", { class: "group-entry-text" }, h("span", { title: this.text }, this.text))) : null, this.secondaryText ? (h("span", { class: "group-entry-text-secondary" }, h("span", { title: this.secondaryText }, this.secondaryText))) : null, h("slot", { key: '1314f12170969fd85675165af10b1bff1048f8a5' }))));
     }
     get hostElement() { return this; }
     static get style() { return IxGroupItemStyle0; }

package/components/icon-button.js

@@ -69,7 +69,7 @@ const IconButton = /*@__PURE__*/ proxyCustomElement(class IconButton extends HTM
             type: this.type,
             extraClasses: this.getIconSizeClass(),
         };
-        return (h(Host, { key: '7da24896eae7dce5de64057e70c6d996681d60b7', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, h(BaseIconButton, Object.assign({ key: '067f21e0afca8fb01ea374d60fe51560ec203228' }, baseButtonProps))));
+        return (h(Host, { key: '2990b79a4d4b413e844a3c2ab4b0a4604464eeeb', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, h(BaseIconButton, Object.assign({ key: 'a2983c635bf15e0d7a866d17309be343d78e9aa6' }, baseButtonProps))));
     }
     get hostElement() { return this; }
     static get style() { return IxIconButtonStyle0; }

package/components/ix-application-sidebar.js

@@ -33,7 +33,7 @@ const ApplicationSidebar = /*@__PURE__*/ proxyCustomElement(class ApplicationSid
         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/components/ix-application-switch-modal.js

@@ -47,7 +47,7 @@ const ApplicationSwitchModal = /*@__PURE__*/ proxyCustomElement(class Applicatio
     }
     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/components/ix-application.js

@@ -88,12 +88,12 @@ const Application = /*@__PURE__*/ proxyCustomElement(class Application extends H
         });
     }
     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' })))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/components/ix-basic-navigation.js

@@ -75,10 +75,10 @@ const BasicNavigation = /*@__PURE__*/ proxyCustomElement(class BasicNavigation e
         (_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' })))));
     }
     get hostElement() { return this; }
     static get watchers() { return {

package/components/ix-breadcrumb.js

@@ -74,7 +74,7 @@ const Breadcrumb = /*@__PURE__*/ proxyCustomElement(class Breadcrumb extends HTM
     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;
@@ -91,7 +91,7 @@ const Breadcrumb = /*@__PURE__*/ proxyCustomElement(class Breadcrumb extends HTM
             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/components/ix-card-list.js

@@ -145,16 +145,16 @@ const CardList = /*@__PURE__*/ proxyCustomElement(class CardList extends HTMLEle
         }
     }
     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/components/ix-category-filter.js

@@ -381,19 +381,19 @@ const CategoryFilter = /*@__PURE__*/ proxyCustomElement(class CategoryFilter ext
     }
     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/components/ix-chip.js

@@ -39,11 +39,11 @@ const Chip = /*@__PURE__*/ proxyCustomElement(class Chip extends HTMLElement {
                 [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,
@@ -57,10 +57,10 @@ const Chip = /*@__PURE__*/ proxyCustomElement(class Chip extends HTMLElement {
                 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)));
     }
     get el() { return this; }
     static get style() { return IxChipStyle0; }

package/components/ix-content.js

@@ -15,12 +15,12 @@ const Content = /*@__PURE__*/ proxyCustomElement(class Content extends HTMLEleme
         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' }))));
     }
     get hostElement() { return this; }
     static get style() { return IxContentStyle0; }

package/components/ix-css-grid-item.js

@@ -13,7 +13,7 @@ const CssGridItem = /*@__PURE__*/ proxyCustomElement(class CssGridItem extends H
     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 style() { return IxCssGridItemStyle0; }
 }, [1, "ix-css-grid-item", {

package/components/ix-date-dropdown.js

@@ -11,7 +11,7 @@ import { d as defineCustomElement$4 } from './layout-grid.js';
 import { d as defineCustomElement$3 } from './row.js';
 import { d as defineCustomElement$2 } from './spinner.js';
 
-const dateDropdownCss = ":host{display:inline-block;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}@media (max-width: 48em){:host .min-width{width:-moz-min-content;width:min-content}}@media (min-width: 48em){:host .border-right{border-right:var(--theme-x-weak-bdr-2)}}:host .max-height{max-height:-moz-max-content;max-height:max-content}:host .no-margin{margin:0;padding:0}:host .pull-right{float:right;padding:0.25rem 1rem}";
+const dateDropdownCss = ":host{display:inline-block;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}@media (max-width: 48em){:host .min-width{width:-moz-min-content;width:min-content}}@media (min-width: 48em){:host .border-right{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}:host .no-margin{margin:0;padding:0}:host .pull-right{float:right;padding:0.25rem 1rem}";
 const IxDateDropdownStyle0 = dateDropdownCss;
 
 const DateDropdown = /*@__PURE__*/ proxyCustomElement(class DateDropdown extends HTMLElement {
@@ -131,21 +131,21 @@ const DateDropdown = /*@__PURE__*/ proxyCustomElement(class DateDropdown extends
         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))))))))));
     }