@siemens/ix 0.0.0-pr-2155-20250929074944 → 0.0.0-pr-2166-20251001083917

package/dist/esm/ix-avatar_2.entry.js

@@ -83,7 +83,7 @@ const MenuAvatarItem = class {
         return this.dropdownItemRef.waitForCurrent();
     }
     render() {
-        return (h("ix-dropdown-item", { key: '97bff4f37686e2e6613c8283595d918eac13a161', ref: this.dropdownItemRef, icon: this.icon, label: this.label, onClick: (e) => this.itemClick.emit(e) }));
+        return (h("ix-dropdown-item", { key: '0851cb95fed3e8ba0a3c5714072e387b1b30cce7', ref: this.dropdownItemRef, icon: this.icon, label: this.label, onClick: (e) => this.itemClick.emit(e) }));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/ix-basic-navigation.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-DGODjp4O.js';
 import { u as useContextProvider, A as ApplicationLayoutContext } from './context-CKM5pVsv.js';
-import { a as applicationLayoutService } from './service-ktcE7NzB.js';
+import { a as applicationLayoutService } from './service-Da0kv8hS.js';
 import { m as menuController } from './menu-service-BMvtckRa.js';
 import './typed-event-BdCnOrqW.js';
 import './breakpoints-D_Hmobxf.js';

package/dist/esm/ix-breadcrumb-item.entry.js

@@ -18,11 +18,11 @@ const BreadcrumbItem = class {
          */
         this.target = '_self';
         /**@internal */
-        this.ghost = true;
+        this.subtle = false;
         /**@internal */
-        this.visible = true;
+        this.invisible = false;
         /**@internal */
-        this.showChevron = true;
+        this.hideChevron = false;
         /** @internal */
         this.isDropdownTrigger = false;
     }
@@ -46,7 +46,7 @@ const BreadcrumbItem = class {
     }
     render() {
         const props = {
-            variant: this.ghost ? 'tertiary' : 'subtle-primary',
+            variant: this.subtle ? 'subtle-primary' : 'tertiary',
             iconOnly: false,
             iconOval: false,
             disabled: false,
@@ -64,12 +64,12 @@ const BreadcrumbItem = class {
             target: this.target,
             rel: this.rel,
         };
-        if (!this.visible) {
+        if (this.invisible) {
             return h(Host, { class: 'invisible' });
         }
         return (h(Host, { class: {
-                'hide-chevron': !this.showChevron,
-            }, onClick: () => this.itemClick.emit(this.label) }, h("li", null, h(BaseButton, Object.assign({}, props, { afterContent: h(Fragment, null, this.showChevron ? (h("ix-icon", { name: iconChevronRightSmall, size: "16", class: 'chevron' })) : null) }), this.label, h("slot", null)))));
+                'hide-chevron': this.hideChevron,
+            }, onClick: () => this.itemClick.emit(this.label) }, h("li", null, h(BaseButton, Object.assign({}, props, { afterContent: h(Fragment, null, !this.hideChevron && (h("ix-icon", { name: iconChevronRightSmall, size: "16", class: 'chevron' }))) }), this.label, h("slot", null)))));
     }
     get hostElement() { return getElement(this); }
 };

package/dist/esm/ix-breadcrumb-item.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-breadcrumb-item.entry.js","sources":["src/components/breadcrumb-item/breadcrumb-item.scss?tag=ix-breadcrumb-item&encapsulation=shadow","src/components/breadcrumb-item/breadcrumb-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@use 'mixins/shadow-dom/component';\n@use '../button/button-mixin';\n@use '../button/button';\n\n@include button-mixin.all-btn-variants;\n\n:host {\n  display: flex;\n  position: relative;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  margin-right: 0.25rem;\n  max-width: 15rem;\n  min-width: 0;\n\n  @include component.ix-component;\n\n  li {\n    display: contents;\n  }\n\n  .btn {\n    pointer-events: all;\n    width: fit-content;\n    padding-right: 0;\n    padding-left: 0.25rem;\n  }\n\n  .chevron {\n    pointer-events: none;\n    margin-left: 0.5rem;\n    margin-right: 0rem;\n    color: var(--theme-color-soft-text);\n  }\n\n  ::slotted(a[href]) {\n    text-decoration: none !important;\n  }\n\n  ::slotted(a[href]:active) {\n    text-decoration: none !important;\n  }\n}\n\n:host(:last-child) {\n  .btn:not(.dropdown-trigger) {\n    color: var(--theme-color-soft-text);\n  }\n}\n\n:host(.hide-chevron) {\n  cursor: default;\n\n  .btn {\n    padding-right: 0.5rem;\n    pointer-events: none;\n  }\n}\n\n:host(.invisible) {\n  display: none;\n}\n\n:host(:focus-visible) {\n  outline: none;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { animate } from 'animejs';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { a11yHostAttributes } from '../utils/a11y';\nimport { iconChevronRightSmall } from '@siemens/ix-icons/icons';\nimport Animation from '../utils/animation';\nimport { AnchorInterface, AnchorTarget } from '../button/button.interface';\n\n@Component({\n  tag: 'ix-breadcrumb-item',\n  styleUrl: 'breadcrumb-item.scss',\n  shadow: true,\n})\nexport class BreadcrumbItem implements AnchorInterface {\n  @Element() hostElement!: HTMLIxBreadcrumbItemElement;\n\n  /**\n   * ARIA label for the button\n   * Will be set as aria-label for the nested HTML button element\n   *\n   * @since 3.2.0\n   */\n  @Prop() ariaLabelButton?: string;\n\n  /**\n   * Breadcrumb label\n   */\n  @Prop() label?: string;\n\n  /**\n   * Icon to be displayed next ot the label\n   */\n  @Prop() icon?: string;\n\n  /**\n   * URL for the button link. When provided, the button will render as an anchor tag.\n   *\n   * @since 4.0.0\n   */\n  @Prop() href?: string;\n\n  /**\n   * Specifies where to open the linked document when href is provided.\n   *\n   * @since 4.0.0\n   */\n  @Prop() target?: AnchorTarget = '_self';\n\n  /**\n   * Specifies the relationship between the current document and the linked document when href is provided.\n   *\n   * @since 4.0.0\n   */\n  @Prop() rel?: string;\n\n  /**@internal */\n  @Prop() ghost: boolean = true;\n\n  /**@internal */\n  @Prop() visible = true;\n\n  /**@internal */\n  @Prop() showChevron = true;\n\n  /** @internal */\n  @Prop() isDropdownTrigger = false;\n\n  /**@internal */\n  @Event() itemClick!: EventEmitter<string>;\n\n  @State() a11y: any;\n\n  componentDidLoad() {\n    this.animationFadeIn();\n  }\n\n  componentWillLoad() {\n    this.a11y = a11yHostAttributes(this.hostElement, [\n      'aria-describedby',\n      'aria-controls',\n      'aria-expanded',\n    ]);\n  }\n\n  animationFadeIn() {\n    animate(this.hostElement, {\n      duration: Animation.defaultTime,\n      opacity: [0, 1],\n      translateX: ['-100%', '0%'],\n      easing: 'linear',\n    });\n  }\n\n  render() {\n    const props: BaseButtonProps = {\n      variant: this.ghost ? 'tertiary' : 'subtle-primary',\n      iconOnly: false,\n      iconOval: false,\n      disabled: false,\n      icon: this.icon,\n      iconSize: '16',\n      loading: false,\n      selected: false,\n      type: 'button',\n      tabIndex:\n        this.hostElement.tabIndex !== -1 ? this.hostElement.tabIndex : 0,\n      extraClasses: {\n        'dropdown-trigger': this.isDropdownTrigger,\n      },\n      ariaAttributes: { ...this.a11y, 'aria-label': this.ariaLabelButton },\n      href: this.href,\n      target: this.target,\n      rel: this.rel,\n    };\n\n    if (!this.visible) {\n      return <Host class={'invisible'}></Host>;\n    }\n\n    return (\n      <Host\n        class={{\n          'hide-chevron': !this.showChevron,\n        }}\n        onClick={() => this.itemClick.emit(this.label)}\n      >\n        <li>\n          <BaseButton\n            {...props}\n            afterContent={\n              <Fragment>\n                {this.showChevron ? (\n                  <ix-icon\n                    name={iconChevronRightSmall}\n                    size=\"16\"\n                    class={'chevron'}\n                  ></ix-icon>\n                ) : null}\n              </Fragment>\n            }\n          >\n            {this.label}\n            <slot></slot>\n          </BaseButton>\n        </li>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;;;;;AAAA,MAAM,iBAAiB,GAAG,k/wDAAk/wD;;MCgC//wD,cAAc,GAAA,MAAA;AAL3B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAiCE;;;;AAIG;AACK,QAAA,IAAM,CAAA,MAAA,GAAkB,OAAO;;AAU/B,QAAA,IAAK,CAAA,KAAA,GAAY,IAAI;;AAGrB,QAAA,IAAO,CAAA,OAAA,GAAG,IAAI;;AAGd,QAAA,IAAW,CAAA,WAAA,GAAG,IAAI;;AAGlB,QAAA,IAAiB,CAAA,iBAAA,GAAG,KAAK;AAmFlC;IA5EC,gBAAgB,GAAA;QACd,IAAI,CAAC,eAAe,EAAE;;IAGxB,iBAAiB,GAAA;QACf,IAAI,CAAC,IAAI,GAAG,kBAAkB,CAAC,IAAI,CAAC,WAAW,EAAE;YAC/C,kBAAkB;YAClB,eAAe;YACf,eAAe;AAChB,SAAA,CAAC;;IAGJ,eAAe,GAAA;AACb,QAAA,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;YACxB,QAAQ,EAAE,SAAS,CAAC,WAAW;AAC/B,YAAA,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AACf,YAAA,UAAU,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC;AAC3B,YAAA,MAAM,EAAE,QAAQ;AACjB,SAAA,CAAC;;IAGJ,MAAM,GAAA;AACJ,QAAA,MAAM,KAAK,GAAoB;YAC7B,OAAO,EAAE,IAAI,CAAC,KAAK,GAAG,UAAU,GAAG,gBAAgB;AACnD,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,QAAQ,EAAE,KAAK;YACf,IAAI,EAAE,IAAI,CAAC,IAAI;AACf,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,OAAO,EAAE,KAAK;AACd,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,IAAI,EAAE,QAAQ;YACd,QAAQ,EACN,IAAI,CAAC,WAAW,CAAC,QAAQ,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,CAAC;AAClE,YAAA,YAAY,EAAE;gBACZ,kBAAkB,EAAE,IAAI,CAAC,iBAAiB;AAC3C,aAAA;YACD,cAAc,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAO,IAAI,CAAC,IAAI,CAAA,EAAA,EAAE,YAAY,EAAE,IAAI,CAAC,eAAe,EAAE,CAAA;YACpE,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,GAAG,EAAE,IAAI,CAAC,GAAG;SACd;AAED,QAAA,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACjB,OAAO,EAAC,IAAI,EAAA,EAAC,KAAK,EAAE,WAAW,GAAS;;AAG1C,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EACH,KAAK,EAAE;AACL,gBAAA,cAAc,EAAE,CAAC,IAAI,CAAC,WAAW;aAClC,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,EAAA,EAE9C,CAAA,CAAA,IAAA,EAAA,IAAA,EACE,CAAA,CAAC,UAAU,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACL,KAAK,EAAA,EACT,YAAY,EACV,CAAA,CAAC,QAAQ,EAAA,IAAA,EACN,IAAI,CAAC,WAAW,IACf,CAAA,CAAA,SAAA,EAAA,EACE,IAAI,EAAE,qBAAqB,EAC3B,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,SAAS,GACP,IACT,IAAI,CACC,EAAA,CAAA,EAGZ,IAAI,CAAC,KAAK,EACX,CAAA,CAAA,MAAA,EAAA,IAAA,CAAa,CACF,CACV,CACA;;;;;;;;"}
+{"version":3,"file":"ix-breadcrumb-item.entry.js","sources":["src/components/breadcrumb-item/breadcrumb-item.scss?tag=ix-breadcrumb-item&encapsulation=shadow","src/components/breadcrumb-item/breadcrumb-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@use 'mixins/shadow-dom/component';\n@use '../button/button-mixin';\n@use '../button/button';\n\n@include button-mixin.all-btn-variants;\n\n:host {\n  display: flex;\n  position: relative;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  margin-right: 0.25rem;\n  max-width: 15rem;\n  min-width: 0;\n\n  @include component.ix-component;\n\n  li {\n    display: contents;\n  }\n\n  .btn {\n    pointer-events: all;\n    width: fit-content;\n    padding-right: 0;\n    padding-left: 0.25rem;\n  }\n\n  .chevron {\n    pointer-events: none;\n    margin-left: 0.5rem;\n    margin-right: 0rem;\n    color: var(--theme-color-soft-text);\n  }\n\n  ::slotted(a[href]) {\n    text-decoration: none !important;\n  }\n\n  ::slotted(a[href]:active) {\n    text-decoration: none !important;\n  }\n}\n\n:host(:last-child) {\n  .btn:not(.dropdown-trigger) {\n    color: var(--theme-color-soft-text);\n  }\n}\n\n:host(.hide-chevron) {\n  cursor: default;\n\n  .btn {\n    padding-right: 0.5rem;\n    pointer-events: none;\n  }\n}\n\n:host(.invisible) {\n  display: none;\n}\n\n:host(:focus-visible) {\n  outline: none;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { animate } from 'animejs';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { a11yHostAttributes } from '../utils/a11y';\nimport { iconChevronRightSmall } from '@siemens/ix-icons/icons';\nimport Animation from '../utils/animation';\nimport { AnchorInterface, AnchorTarget } from '../button/button.interface';\n\n@Component({\n  tag: 'ix-breadcrumb-item',\n  styleUrl: 'breadcrumb-item.scss',\n  shadow: true,\n})\nexport class BreadcrumbItem implements AnchorInterface {\n  @Element() hostElement!: HTMLIxBreadcrumbItemElement;\n\n  /**\n   * ARIA label for the button\n   * Will be set as aria-label for the nested HTML button element\n   *\n   * @since 3.2.0\n   */\n  @Prop() ariaLabelButton?: string;\n\n  /**\n   * Breadcrumb label\n   */\n  @Prop() label?: string;\n\n  /**\n   * Icon to be displayed next ot the label\n   */\n  @Prop() icon?: string;\n\n  /**\n   * URL for the button link. When provided, the button will render as an anchor tag.\n   *\n   * @since 4.0.0\n   */\n  @Prop() href?: string;\n\n  /**\n   * Specifies where to open the linked document when href is provided.\n   *\n   * @since 4.0.0\n   */\n  @Prop() target?: AnchorTarget = '_self';\n\n  /**\n   * Specifies the relationship between the current document and the linked document when href is provided.\n   *\n   * @since 4.0.0\n   */\n  @Prop() rel?: string;\n\n  /**@internal */\n  @Prop() subtle: boolean = false;\n\n  /**@internal */\n  @Prop() invisible = false;\n\n  /**@internal */\n  @Prop() hideChevron = false;\n\n  /** @internal */\n  @Prop() isDropdownTrigger = false;\n\n  /**@internal */\n  @Event() itemClick!: EventEmitter<string>;\n\n  @State() a11y: any;\n\n  componentDidLoad() {\n    this.animationFadeIn();\n  }\n\n  componentWillLoad() {\n    this.a11y = a11yHostAttributes(this.hostElement, [\n      'aria-describedby',\n      'aria-controls',\n      'aria-expanded',\n    ]);\n  }\n\n  animationFadeIn() {\n    animate(this.hostElement, {\n      duration: Animation.defaultTime,\n      opacity: [0, 1],\n      translateX: ['-100%', '0%'],\n      easing: 'linear',\n    });\n  }\n\n  render() {\n    const props: BaseButtonProps = {\n      variant: this.subtle ? 'subtle-primary' : 'tertiary',\n      iconOnly: false,\n      iconOval: false,\n      disabled: false,\n      icon: this.icon,\n      iconSize: '16',\n      loading: false,\n      selected: false,\n      type: 'button',\n      tabIndex:\n        this.hostElement.tabIndex !== -1 ? this.hostElement.tabIndex : 0,\n      extraClasses: {\n        'dropdown-trigger': this.isDropdownTrigger,\n      },\n      ariaAttributes: { ...this.a11y, 'aria-label': this.ariaLabelButton },\n      href: this.href,\n      target: this.target,\n      rel: this.rel,\n    };\n\n    if (this.invisible) {\n      return <Host class={'invisible'}></Host>;\n    }\n\n    return (\n      <Host\n        class={{\n          'hide-chevron': this.hideChevron,\n        }}\n        onClick={() => this.itemClick.emit(this.label)}\n      >\n        <li>\n          <BaseButton\n            {...props}\n            afterContent={\n              <Fragment>\n                {!this.hideChevron && (\n                  <ix-icon\n                    name={iconChevronRightSmall}\n                    size=\"16\"\n                    class={'chevron'}\n                  ></ix-icon>\n                )}\n              </Fragment>\n            }\n          >\n            {this.label}\n            <slot></slot>\n          </BaseButton>\n        </li>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;;;;;AAAA,MAAM,iBAAiB,GAAG,k/wDAAk/wD;;MCgC//wD,cAAc,GAAA,MAAA;AAL3B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAiCE;;;;AAIG;AACK,QAAA,IAAM,CAAA,MAAA,GAAkB,OAAO;;AAU/B,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;;AAGvB,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;;AAGjB,QAAA,IAAW,CAAA,WAAA,GAAG,KAAK;;AAGnB,QAAA,IAAiB,CAAA,iBAAA,GAAG,KAAK;AAmFlC;IA5EC,gBAAgB,GAAA;QACd,IAAI,CAAC,eAAe,EAAE;;IAGxB,iBAAiB,GAAA;QACf,IAAI,CAAC,IAAI,GAAG,kBAAkB,CAAC,IAAI,CAAC,WAAW,EAAE;YAC/C,kBAAkB;YAClB,eAAe;YACf,eAAe;AAChB,SAAA,CAAC;;IAGJ,eAAe,GAAA;AACb,QAAA,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;YACxB,QAAQ,EAAE,SAAS,CAAC,WAAW;AAC/B,YAAA,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AACf,YAAA,UAAU,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC;AAC3B,YAAA,MAAM,EAAE,QAAQ;AACjB,SAAA,CAAC;;IAGJ,MAAM,GAAA;AACJ,QAAA,MAAM,KAAK,GAAoB;YAC7B,OAAO,EAAE,IAAI,CAAC,MAAM,GAAG,gBAAgB,GAAG,UAAU;AACpD,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,QAAQ,EAAE,KAAK;YACf,IAAI,EAAE,IAAI,CAAC,IAAI;AACf,YAAA,QAAQ,EAAE,IAAI;AACd,YAAA,OAAO,EAAE,KAAK;AACd,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,IAAI,EAAE,QAAQ;YACd,QAAQ,EACN,IAAI,CAAC,WAAW,CAAC,QAAQ,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,GAAG,CAAC;AAClE,YAAA,YAAY,EAAE;gBACZ,kBAAkB,EAAE,IAAI,CAAC,iBAAiB;AAC3C,aAAA;YACD,cAAc,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAAO,IAAI,CAAC,IAAI,CAAA,EAAA,EAAE,YAAY,EAAE,IAAI,CAAC,eAAe,EAAE,CAAA;YACpE,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,GAAG,EAAE,IAAI,CAAC,GAAG;SACd;AAED,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;YAClB,OAAO,EAAC,IAAI,EAAA,EAAC,KAAK,EAAE,WAAW,GAAS;;AAG1C,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EACH,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI,CAAC,WAAW;AACjC,aAAA,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,EAAA,EAE9C,CAAA,CAAA,IAAA,EAAA,IAAA,EACE,CAAA,CAAC,UAAU,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACL,KAAK,EAAA,EACT,YAAY,EACV,CAAC,CAAA,QAAQ,EACN,IAAA,EAAA,CAAC,IAAI,CAAC,WAAW,KAChB,CAAA,CAAA,SAAA,EAAA,EACE,IAAI,EAAE,qBAAqB,EAC3B,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,SAAS,EAAA,CACP,CACZ,CACQ,EAAA,CAAA,EAGZ,IAAI,CAAC,KAAK,EACX,CAAA,CAAA,MAAA,EAAA,IAAA,CAAa,CACF,CACV,CACA;;;;;;;;"}

package/dist/esm/ix-breadcrumb.entry.js

@@ -25,7 +25,7 @@ const Breadcrumb = class {
         /**
          * Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)
          */
-        this.ghost = true;
+        this.subtle = false;
         /**
          * Accessibility label for the dropdown button (ellipsis icon) used to access the dropdown list
          * with conditionally hidden previous items
@@ -62,8 +62,8 @@ const Breadcrumb = class {
         const updatedItems = this.getItems();
         updatedItems.forEach((bc, index) => {
             const shouldShowDropdown = this.nextItems.length !== 0 && updatedItems.length - 1 === index;
-            bc.ghost = this.ghost;
-            bc.showChevron = updatedItems.length - 1 !== index || shouldShowDropdown;
+            bc.subtle = this.subtle;
+            bc.hideChevron = updatedItems.length - 1 !== index || !shouldShowDropdown;
             bc.isDropdownTrigger = shouldShowDropdown;
             if (shouldShowDropdown) {
                 this.nextButtonRef(bc);
@@ -71,7 +71,7 @@ const Breadcrumb = class {
             if (updatedItems.length < this.visibleItemCount) {
                 return;
             }
-            bc.visible = index >= updatedItems.length - this.visibleItemCount;
+            bc.invisible = index < updatedItems.length - this.visibleItemCount;
         });
         this.items = updatedItems;
     }
@@ -81,7 +81,7 @@ const Breadcrumb = class {
     render() {
         var _a, _b, _c, _d;
         const a11y = a11yHostAttributes(this.hostElement);
-        return (h(Host, { key: 'cd3fb633db6e273763b650dee6cf699190f9c66c' }, h("ix-dropdown", { key: '4bb90841a1e65c3c43a5897cd3b7baffa304df6e', 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: '12f8783a3a970031434ab062dba6ced47c167570' }, h("ix-dropdown", { key: 'c3d871fa0f8cdc9cb49f5449de13f599452ba323', id: this.previousDropdownId, "aria-label": this.ariaLabelPreviousButton, trigger: ((_a = this.items) === null || _a === void 0 ? void 0 : _a.length) > this.visibleItemCount
                 ? this.previousButtonRef.waitForCurrent()
                 : undefined, onShowChanged: ({ detail }) => {
                 this.isPreviousDropdownExpanded = detail;
@@ -98,7 +98,7 @@ const Breadcrumb = class {
             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: this.previousButtonRef, 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: '153d49ef29065bcc78cb3b06a1bcc6341b028cca', class: "crumb-items", "aria-label": (_c = a11y['aria-label']) !== null && _c !== void 0 ? _c : 'breadcrumbs' }, h("ol", { key: '1d7dcd947a111b74dcee6779968b52f63e36c984' }, h("slot", { key: 'c9d8ac0c01834d40d2ca1d3acfbb323d04954669' }))), h("ix-dropdown", { key: 'ba8cb0f0ffd45556b76be3e65d45c742ab2312ed', trigger: this.nextButtonRef.waitForCurrent() }, (_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: this.previousButtonRef, 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: '076d1d44094bbd01bce51daf92bc8ad28f93f224', class: "crumb-items", "aria-label": (_c = a11y['aria-label']) !== null && _c !== void 0 ? _c : 'breadcrumbs' }, h("ol", { key: 'edd1719a74b337e52d6f2e30d7ea7040ef2c1640' }, h("slot", { key: '8ec35c7e353630c9d9ba4839c6d33b7e68a25e74' }))), h("ix-dropdown", { key: '8750f9d8b51762d5a2fc4303e4c34f048383f8fd', trigger: this.nextButtonRef.waitForCurrent() }, (_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/esm/ix-breadcrumb.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-breadcrumb.entry.js","sources":["src/components/breadcrumb/breadcrumb.scss?tag=ix-breadcrumb&encapsulation=shadow","src/components/breadcrumb/breadcrumb.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@use './common-variables' as vars;\n@use 'mixins/hover';\n@use 'mixins/text-truncation';\n@use 'mixins/shadow-dom/component';\n\n:host {\n  display: flex;\n  justify-content: flex-start;\n  height: 2.5rem;\n  align-items: center;\n  background-color: transparent;\n  overflow: hidden;\n\n  @include component.ix-component;\n\n  .previous-button {\n    width: 3rem;\n    min-width: 0px;\n  }\n\n  .crumb-dropdown {\n    overflow: visible;\n  }\n\n  .remove-anchor::after {\n    display: none;\n  }\n\n  .more-text {\n    display: flex;\n\n    .more-text-ellipsis {\n      width: 1rem;\n      display: inline-block;\n      font-weight: vars.$font-weight-bold;\n    }\n\n    ix-icon {\n      // line-height: unset; --> Note: 'line-height' can't be applied due to shadow DOM encapsulation at ix-icon\n      // using padding-top to achieve same position as before\n      padding-top: 2px;\n    }\n  }\n\n  nav,\n  ol,\n  .crumb-items {\n    display: contents;\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  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { a11yBoolean, a11yHostAttributes } from '../utils/a11y';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { makeRef } from '../utils/make-ref';\n\nlet sequenceId = 0;\nconst createId = (prefix: string = 'breadcrumb-') => {\n  return `${prefix}-${sequenceId++}`;\n};\n\n@Component({\n  tag: 'ix-breadcrumb',\n  styleUrl: 'breadcrumb.scss',\n  shadow: true,\n})\nexport class Breadcrumb {\n  @Element() hostElement!: HTMLIxBreadcrumbElement;\n\n  /**\n   * Excess items will get hidden inside of dropdown\n   */\n  @Prop() visibleItemCount = 9;\n\n  /**\n   * Items will be accessible through a dropdown\n   */\n  @Prop() nextItems: string[] = [];\n  @Watch('nextItems')\n  onNextItemsChange() {\n    this.onChildMutation();\n  }\n\n  /**\n   * Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)\n   */\n  @Prop() ghost = true;\n\n  /**\n   * Accessibility label for the dropdown button (ellipsis icon) used to access the dropdown list\n   * with conditionally hidden previous items\n   */\n  @Prop() ariaLabelPreviousButton = 'previous';\n\n  /**\n   * Crumb item clicked event\n   */\n  @Event() itemClick!: EventEmitter<string>;\n\n  /**\n   * Next item clicked event\n   */\n  @Event() nextClick!: EventEmitter<{ event: UIEvent; item: string }>;\n\n  private readonly previousButtonRef = makeRef<HTMLIxBreadcrumbItemElement>();\n  private readonly nextButtonRef = makeRef<HTMLElement>();\n\n  @State() items: HTMLIxBreadcrumbItemElement[] = [];\n  @State() isPreviousDropdownExpanded = false;\n\n  private mutationObserver?: MutationObserver;\n\n  private previousButtonId = createId();\n  private previousDropdownId = createId();\n\n  private onItemClick(item: string) {\n    this.itemClick.emit(item);\n  }\n\n  componentDidLoad() {\n    this.mutationObserver = createMutationObserver(() =>\n      this.onChildMutation()\n    );\n\n    this.mutationObserver.observe(this.hostElement, {\n      subtree: true,\n      childList: true,\n    });\n  }\n\n  componentWillLoad() {\n    this.onChildMutation();\n  }\n\n  disconnectedCallback() {\n    this.mutationObserver?.disconnect();\n  }\n\n  private async onChildMutation() {\n    const updatedItems = this.getItems();\n\n    updatedItems.forEach((bc, index) => {\n      const shouldShowDropdown =\n        this.nextItems.length !== 0 && updatedItems.length - 1 === index;\n\n      bc.ghost = this.ghost;\n      bc.showChevron = updatedItems.length - 1 !== index || shouldShowDropdown;\n      bc.isDropdownTrigger = shouldShowDropdown;\n\n      if (shouldShowDropdown) {\n        this.nextButtonRef(bc);\n      }\n\n      if (updatedItems.length < this.visibleItemCount) {\n        return;\n      }\n\n      bc.visible = index >= updatedItems.length - this.visibleItemCount;\n    });\n\n    this.items = updatedItems;\n  }\n\n  private getItems() {\n    return Array.from(this.hostElement.querySelectorAll('ix-breadcrumb-item'));\n  }\n\n  render() {\n    const a11y = a11yHostAttributes(this.hostElement);\n    return (\n      <Host>\n        <ix-dropdown\n          id={this.previousDropdownId}\n          aria-label={this.ariaLabelPreviousButton}\n          trigger={\n            this.items?.length > this.visibleItemCount\n              ? this.previousButtonRef.waitForCurrent()\n              : undefined\n          }\n          onShowChanged={({ detail }) => {\n            this.isPreviousDropdownExpanded = detail;\n\n            const previousButton = this.hostElement.shadowRoot!.getElementById(\n              this.previousButtonId\n            );\n\n            // Need to force update previous button to change `aria-expanded`\n            if (previousButton) {\n              forceUpdate(previousButton);\n            }\n          }}\n        >\n          {this.items\n            .slice(0, this.items.length - this.visibleItemCount)\n            .map((item) => {\n              const label = item.label ?? item.innerText;\n\n              return (\n                <ix-dropdown-item\n                  label={label}\n                  onClick={() => {\n                    this.onItemClick(label);\n                  }}\n                  onItemClick={(event) => event.stopPropagation()}\n                ></ix-dropdown-item>\n              );\n            })}\n        </ix-dropdown>\n        {this.items?.length > this.visibleItemCount ? (\n          <ix-breadcrumb-item\n            id={this.previousButtonId}\n            ref={this.previousButtonRef}\n            label=\"...\"\n            tabIndex={1}\n            onItemClick={(event) => event.stopPropagation()}\n            aria-describedby={this.previousDropdownId}\n            aria-controls={this.previousDropdownId}\n            aria-expanded={a11yBoolean(this.isPreviousDropdownExpanded)}\n            class={'previous-button'}\n          ></ix-breadcrumb-item>\n        ) : null}\n        <nav\n          class=\"crumb-items\"\n          aria-label={a11y['aria-label'] ?? 'breadcrumbs'}\n        >\n          <ol>\n            <slot></slot>\n          </ol>\n        </nav>\n        <ix-dropdown trigger={this.nextButtonRef.waitForCurrent()}>\n          {this.nextItems?.map((item) => (\n            <ix-dropdown-item\n              label={item}\n              onClick={(e) => {\n                this.nextClick.emit({\n                  event: e,\n                  item,\n                });\n              }}\n              onItemClick={(event) => event.stopPropagation()}\n            ></ix-dropdown-item>\n          ))}\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ix-breadcrumb.entry.js","sources":["src/components/breadcrumb/breadcrumb.scss?tag=ix-breadcrumb&encapsulation=shadow","src/components/breadcrumb/breadcrumb.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@use './common-variables' as vars;\n@use 'mixins/hover';\n@use 'mixins/text-truncation';\n@use 'mixins/shadow-dom/component';\n\n:host {\n  display: flex;\n  justify-content: flex-start;\n  height: 2.5rem;\n  align-items: center;\n  background-color: transparent;\n  overflow: hidden;\n\n  @include component.ix-component;\n\n  .previous-button {\n    width: 3rem;\n    min-width: 0px;\n  }\n\n  .crumb-dropdown {\n    overflow: visible;\n  }\n\n  .remove-anchor::after {\n    display: none;\n  }\n\n  .more-text {\n    display: flex;\n\n    .more-text-ellipsis {\n      width: 1rem;\n      display: inline-block;\n      font-weight: vars.$font-weight-bold;\n    }\n\n    ix-icon {\n      // line-height: unset; --> Note: 'line-height' can't be applied due to shadow DOM encapsulation at ix-icon\n      // using padding-top to achieve same position as before\n      padding-top: 2px;\n    }\n  }\n\n  nav,\n  ol,\n  .crumb-items {\n    display: contents;\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  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { a11yBoolean, a11yHostAttributes } from '../utils/a11y';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { makeRef } from '../utils/make-ref';\n\nlet sequenceId = 0;\nconst createId = (prefix: string = 'breadcrumb-') => {\n  return `${prefix}-${sequenceId++}`;\n};\n\n@Component({\n  tag: 'ix-breadcrumb',\n  styleUrl: 'breadcrumb.scss',\n  shadow: true,\n})\nexport class Breadcrumb {\n  @Element() hostElement!: HTMLIxBreadcrumbElement;\n\n  /**\n   * Excess items will get hidden inside of dropdown\n   */\n  @Prop() visibleItemCount = 9;\n\n  /**\n   * Items will be accessible through a dropdown\n   */\n  @Prop() nextItems: string[] = [];\n  @Watch('nextItems')\n  onNextItemsChange() {\n    this.onChildMutation();\n  }\n\n  /**\n   * Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)\n   */\n  @Prop() subtle = false;\n\n  /**\n   * Accessibility label for the dropdown button (ellipsis icon) used to access the dropdown list\n   * with conditionally hidden previous items\n   */\n  @Prop() ariaLabelPreviousButton = 'previous';\n\n  /**\n   * Crumb item clicked event\n   */\n  @Event() itemClick!: EventEmitter<string>;\n\n  /**\n   * Next item clicked event\n   */\n  @Event() nextClick!: EventEmitter<{ event: UIEvent; item: string }>;\n\n  private readonly previousButtonRef = makeRef<HTMLIxBreadcrumbItemElement>();\n  private readonly nextButtonRef = makeRef<HTMLElement>();\n\n  @State() items: HTMLIxBreadcrumbItemElement[] = [];\n  @State() isPreviousDropdownExpanded = false;\n\n  private mutationObserver?: MutationObserver;\n\n  private previousButtonId = createId();\n  private previousDropdownId = createId();\n\n  private onItemClick(item: string) {\n    this.itemClick.emit(item);\n  }\n\n  componentDidLoad() {\n    this.mutationObserver = createMutationObserver(() =>\n      this.onChildMutation()\n    );\n\n    this.mutationObserver.observe(this.hostElement, {\n      subtree: true,\n      childList: true,\n    });\n  }\n\n  componentWillLoad() {\n    this.onChildMutation();\n  }\n\n  disconnectedCallback() {\n    this.mutationObserver?.disconnect();\n  }\n\n  private async onChildMutation() {\n    const updatedItems = this.getItems();\n\n    updatedItems.forEach((bc, index) => {\n      const shouldShowDropdown =\n        this.nextItems.length !== 0 && updatedItems.length - 1 === index;\n\n      bc.subtle = this.subtle;\n      bc.hideChevron = updatedItems.length - 1 !== index || !shouldShowDropdown;\n      bc.isDropdownTrigger = shouldShowDropdown;\n\n      if (shouldShowDropdown) {\n        this.nextButtonRef(bc);\n      }\n\n      if (updatedItems.length < this.visibleItemCount) {\n        return;\n      }\n\n      bc.invisible = index < updatedItems.length - this.visibleItemCount;\n    });\n\n    this.items = updatedItems;\n  }\n\n  private getItems() {\n    return Array.from(this.hostElement.querySelectorAll('ix-breadcrumb-item'));\n  }\n\n  render() {\n    const a11y = a11yHostAttributes(this.hostElement);\n    return (\n      <Host>\n        <ix-dropdown\n          id={this.previousDropdownId}\n          aria-label={this.ariaLabelPreviousButton}\n          trigger={\n            this.items?.length > this.visibleItemCount\n              ? this.previousButtonRef.waitForCurrent()\n              : undefined\n          }\n          onShowChanged={({ detail }) => {\n            this.isPreviousDropdownExpanded = detail;\n\n            const previousButton = this.hostElement.shadowRoot!.getElementById(\n              this.previousButtonId\n            );\n\n            // Need to force update previous button to change `aria-expanded`\n            if (previousButton) {\n              forceUpdate(previousButton);\n            }\n          }}\n        >\n          {this.items\n            .slice(0, this.items.length - this.visibleItemCount)\n            .map((item) => {\n              const label = item.label ?? item.innerText;\n\n              return (\n                <ix-dropdown-item\n                  label={label}\n                  onClick={() => {\n                    this.onItemClick(label);\n                  }}\n                  onItemClick={(event) => event.stopPropagation()}\n                ></ix-dropdown-item>\n              );\n            })}\n        </ix-dropdown>\n        {this.items?.length > this.visibleItemCount ? (\n          <ix-breadcrumb-item\n            id={this.previousButtonId}\n            ref={this.previousButtonRef}\n            label=\"...\"\n            tabIndex={1}\n            onItemClick={(event) => event.stopPropagation()}\n            aria-describedby={this.previousDropdownId}\n            aria-controls={this.previousDropdownId}\n            aria-expanded={a11yBoolean(this.isPreviousDropdownExpanded)}\n            class={'previous-button'}\n          ></ix-breadcrumb-item>\n        ) : null}\n        <nav\n          class=\"crumb-items\"\n          aria-label={a11y['aria-label'] ?? 'breadcrumbs'}\n        >\n          <ol>\n            <slot></slot>\n          </ol>\n        </nav>\n        <ix-dropdown trigger={this.nextButtonRef.waitForCurrent()}>\n          {this.nextItems?.map((item) => (\n            <ix-dropdown-item\n              label={item}\n              onClick={(e) => {\n                this.nextClick.emit({\n                  event: e,\n                  item,\n                });\n              }}\n              onItemClick={(event) => event.stopPropagation()}\n            ></ix-dropdown-item>\n          ))}\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/ix-card-list.entry.js

@@ -162,16 +162,16 @@ const CardList = class {
         }
     }
     render() {
-        return (h(Host, { key: '24928c2456c3823567af36ee4cee653e83701f44' }, h(CardListTitle, { key: '958a9dbb219eda7df70c3049ada48281de096e26', isCollapsed: this.collapse, label: this.label, showAllLabel: this.i18nShowAll, showAllCounter: this.showAllCount === undefined
+        return (h(Host, { key: '0ea1452be92d5b2de585b7fbcb1b872fd4d58974' }, h(CardListTitle, { key: '56f8e679e46885b2019dd1c2acb09270a820ccae', 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), hideShowAll: this.hideShowAll }), h("div", { key: '7a543496658701aceadf21c4b48a307788193eb4', class: {
+                : this.showAllCount, onClick: () => this.onCardListVisibilityToggle(), onShowAllClick: (e) => this.onShowAllClick(e), hideShowAll: this.hideShowAll }), h("div", { key: '19948560fdc32722316db928f265889b3ccd1db8', class: {
                 CardList__Overflow: true,
-            }, style: this.computeMaskLayer() }, h("div", { key: 'b46cebc7ddbb173d63d06f81147b612c2e2a140e', class: {
+            }, style: this.computeMaskLayer() }, h("div", { key: '8064717801d3389a5293c3a00a5bf87702096109', 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: '137e6930ffe0094140771ce69bfefc05367c9d79', onSlotchange: () => this.changeVisibilityOfSlotChildren() }), this.isShowMoreCardVisible() ? (h("ix-card", { class: {
+            }, onScroll: () => this.onCardListScroll() }, h("slot", { key: 'ac6d044003c53fcbee03dc945e7e9c926f0fef07', onSlotchange: () => this.changeVisibilityOfSlotChildren() }), this.isShowMoreCardVisible() ? (h("ix-card", { class: {
                 Show__All__Card: true,
             }, onClick: (event) => this.showMoreCardClick.emit({
                 nativeEvent: event,

package/dist/esm/ix-card-list.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-card-list.entry.js","sources":["src/components/card-list/card-list.scss?tag=ix-card-list&encapsulation=shadow","src/components/card-list/card-list.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@use 'mixins/shadow-dom/component';\n\n$CardList__Title__Height: 1.5rem;\n\n:host {\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  align-items: flex-start;\n  margin: 0.5rem;\n\n  @include component.ix-component;\n\n  .CardList_Title {\n    display: flex;\n    position: relative;\n    height: $CardList__Title__Height;\n    align-items: center;\n    width: 100%;\n    margin-bottom: 1rem;\n\n    &__Label {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n  }\n\n  .CardList__Title__Button {\n    margin-right: 1rem;\n    transition: var(--theme-default-time) transform ease-in-out;\n  }\n\n  .CardList__Title__Button__Collapsed {\n    transform: rotate(-90deg);\n  }\n\n  .CardList__Title__Show__All {\n    align-self: center;\n    margin-left: auto;\n    margin-right: 0px;\n    flex-shrink: 0;\n  }\n\n  .CardList__Content {\n    display: flex;\n    position: relative;\n    height: calc(100% - #{$CardList__Title__Height});\n    width: 100%;\n    gap: 1.5rem;\n    transition: var(--theme-default-time) ease-in-out;\n    overflow: auto;\n  }\n\n  .CardList__Content__Collapsed {\n    min-height: 0px;\n    max-height: 0px;\n    overflow: hidden;\n    opacity: 0;\n  }\n\n  .CardList__Style__Flexbox__Scroll {\n    flex-wrap: wrap;\n  }\n\n  .CardList__Style__Infinite__Scroll {\n    flex-wrap: nowrap;\n\n    -ms-overflow-style: none;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .CardList__Overflow {\n    display: block;\n    position: relative;\n    height: 100%;\n    width: 100%;\n    pointer-events: all;\n    mask-image: var(--ix-card-list-overflow, none);\n  }\n\n  .Show__All__Card {\n    display: flex;\n    position: relative;\n\n    align-self: flex-start;\n    justify-self: center;\n\n    max-width: 11.25rem;\n    min-width: 11.25rem;\n    width: 11.25rem;\n\n    min-height: 11.25rem;\n    max-height: 11.25rem;\n    height: 11.25rem;\n\n    --ix-card-border-color: var(--theme-color-primary);\n    color: var(--theme-color-primary);\n  }\n\n  .CardList__Style__Infinite__Scroll .Show__All__Card {\n    margin-top: 2.375rem;\n  }\n\n  .CardList__Style__Flexbox__Scroll .Show__All__Card {\n    margin-bottom: 2.375rem;\n  }\n\n  .Show__All__Card:hover {\n    background-color: var(--theme-color-ghost--hover);\n  }\n\n  .Show__All__Card:active {\n    background-color: var(--theme-color-ghost--active);\n  }\n\n  .Show__All__Card__Content {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100%;\n  }\n\n  .Show__All__Card__Icon {\n    display: flex;\n    position: absolute;\n    height: 4rem;\n    width: 4rem;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .Show__All__Card__Text {\n    margin-bottom: 0px;\n    margin-top: auto;\n  }\n}\n\n::slotted(.display-none) {\n  display: none !important;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { iconChevronDown, iconMoreMenu } from '@siemens/ix-icons/icons';\n\nfunction CardListTitle(props: {\n  label?: string;\n  ariaLabelExpandButton?: string;\n  isCollapsed: boolean;\n  onClick: (e: MouseEvent) => void;\n  onShowAllClick: (e: MouseEvent) => void;\n  showAllLabel: string;\n  showAllCounter: number;\n  hideShowAll: boolean;\n}) {\n  if (!props.label) {\n    return null;\n  }\n\n  return (\n    <div class=\"CardList_Title\">\n      <ix-icon-button\n        variant=\"tertiary\"\n        icon={iconChevronDown}\n        onClick={props.onClick}\n        iconColor=\"color-primary\"\n        class={{\n          CardList__Title__Button: true,\n          CardList__Title__Button__Collapsed: props.isCollapsed,\n        }}\n        aria-label={props.ariaLabelExpandButton}\n      ></ix-icon-button>\n      <ix-typography class=\"CardList_Title__Label\" format=\"body-lg\">\n        {props.label}\n      </ix-typography>\n      {!props.hideShowAll && (\n        <ix-button\n          class=\"CardList__Title__Show__All\"\n          variant=\"tertiary\"\n          onClick={props.onShowAllClick}\n        >\n          <span>{props.showAllLabel}</span>\n          <span>\n            {!isNaN(props.showAllCounter) ? ` (${props.showAllCounter})` : null}\n          </span>\n        </ix-button>\n      )}\n    </div>\n  );\n}\n\n@Component({\n  tag: 'ix-card-list',\n  styleUrl: 'card-list.scss',\n  shadow: true,\n})\nexport class CardList {\n  /**\n   * ARIA label for the card's expand button.\n   * Will be set as aria-label on the nested HTML button element\n   *\n   * @since 3.2.0\n   */\n  @Prop() ariaLabelExpandButton?: string;\n\n  /**\n   * Name the card list\n   */\n  @Prop() label?: string;\n\n  /**\n   * Collapse the list\n   */\n  @Prop({ mutable: true }) collapse = false;\n\n  /**\n   * List style\n   */\n  @Prop() listStyle: 'stack' | 'scroll' = 'stack';\n\n  /**\n   * Maximal visible cards\n   *\n   * @internal\n   */\n  @Prop() maxVisibleCards = 12;\n\n  /**\n   * Overwrite the default show all count.\n   * */\n  @Prop() showAllCount?: number;\n\n  /**\n   * Suppress the overflow handling of child elements\n   */\n  @Prop() suppressOverflowHandling = false;\n\n  /**\n   * Hide the show all button\n   */\n  @Prop() hideShowAll = false;\n\n  /**\n   * i18n Show all button\n   */\n  @Prop() i18nShowAll = 'Show all';\n\n  /**\n   * i18n More cards available\n   */\n  @Prop() i18nMoreCards = 'There are more cards available';\n\n  /**\n   * Fire event when the collapse state is changed by the user\n   */\n  @Event() collapseChanged!: EventEmitter<boolean>;\n\n  /**\n   * Fire event when the collapse state is changed by the user\n   */\n  @Event() showAllClick!: EventEmitter<{\n    nativeEvent: MouseEvent;\n  }>;\n\n  /**\n   * Fire event when the show more card is clicked.\n   */\n  @Event() showMoreCardClick!: EventEmitter<{\n    nativeEvent: MouseEvent;\n  }>;\n\n  @Element() hostElement!: HTMLIxCardListElement;\n\n  @State() private hasOverflowingElements = false;\n  @State() private numberOfOverflowingElements = 0;\n  @State() private numberOfAllChildElements = 0;\n  @State() private leftScrollDistance = 0;\n  @State() private rightScrollDistance = 0;\n\n  private observer?: MutationObserver;\n\n  private onCardListVisibilityToggle() {\n    this.collapse = !this.collapse;\n    this.collapseChanged.emit(this.collapse);\n  }\n\n  private onShowAllClick(event: MouseEvent) {\n    this.showAllClick.emit({\n      nativeEvent: event,\n    });\n  }\n\n  private getListChildren() {\n    const slot = this.hostElement.shadowRoot!.querySelector(\n      '.CardList__Content > slot'\n    ) as HTMLSlotElement;\n    return slot.assignedElements({ flatten: true });\n  }\n\n  private changeVisibilityOfSlotChildren() {\n    const childElements = this.getListChildren();\n    childElements.forEach((element, index) => {\n      if (element instanceof HTMLElement) {\n        if (index > this.maxVisibleCards - 1) {\n          element.classList.add('display-none');\n          return;\n        }\n        element.classList.remove('display-none');\n      }\n    });\n    this.hasOverflowingElements = childElements.length > this.maxVisibleCards;\n    this.numberOfOverflowingElements =\n      childElements.length - this.maxVisibleCards;\n\n    this.numberOfAllChildElements = childElements.length;\n    this.detectOverflow();\n  }\n\n  private registerOverflowHandler() {\n    this.observer = createMutationObserver(() => {\n      this.changeVisibilityOfSlotChildren();\n    });\n\n    this.observer.observe(\n      this.hostElement.shadowRoot!.querySelector('.CardList__Content')!,\n      {\n        childList: true,\n        subtree: true,\n      }\n    );\n\n    requestAnimationFrame(() => {\n      this.changeVisibilityOfSlotChildren();\n    });\n  }\n\n  private shouldHandleOverflow() {\n    if (this.suppressOverflowHandling) {\n      return false;\n    }\n    if (this.listStyle === 'stack' || this.listStyle === 'scroll') {\n      return true;\n    }\n  }\n\n  private get listElement() {\n    return this.hostElement.shadowRoot!.querySelector('.CardList__Content');\n  }\n\n  private onCardListScroll() {\n    this.detectOverflow();\n  }\n\n  private isShowMoreCardVisible() {\n    return (\n      this.suppressOverflowHandling === false && this.hasOverflowingElements\n    );\n  }\n\n  private getOpacityFromScrollDistance(distance: number) {\n    if (!this.listElement) {\n      return 0;\n    }\n\n    if (distance === 0) {\n      return 0;\n    }\n\n    if (distance > 100) {\n      return 1;\n    }\n\n    return distance / 100;\n  }\n\n  private computeMaskLayer() {\n    const maxOverflowWidth = 80;\n    const maskLayer = `linear-gradient(\n      90deg,\n      transparent 0px,\n      black ${\n        maxOverflowWidth *\n        (this.getOpacityFromScrollDistance(this.leftScrollDistance) > 0 ? 1 : 0)\n      }px,\n      black calc(100% - ${\n        maxOverflowWidth *\n        (this.getOpacityFromScrollDistance(this.rightScrollDistance) > 0\n          ? 1\n          : 0)\n      }px),\n      transparent 100%\n    )`;\n    return {\n      '--ix-card-list-overflow': maskLayer,\n    };\n  }\n\n  @Listen('resize', { target: 'window' })\n  private detectOverflow() {\n    if (!this.listElement) {\n      return;\n    }\n    const { clientWidth, scrollWidth, scrollLeft } = this.listElement;\n\n    this.leftScrollDistance = scrollLeft;\n    this.rightScrollDistance = scrollWidth - scrollLeft - clientWidth;\n  }\n\n  componentDidLoad() {\n    if (this.shouldHandleOverflow()) {\n      this.registerOverflowHandler();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <CardListTitle\n          isCollapsed={this.collapse}\n          label={this.label}\n          showAllLabel={this.i18nShowAll}\n          showAllCounter={\n            this.showAllCount === undefined\n              ? this.numberOfAllChildElements\n              : this.showAllCount\n          }\n          onClick={() => this.onCardListVisibilityToggle()}\n          onShowAllClick={(e) => this.onShowAllClick(e)}\n          hideShowAll={this.hideShowAll}\n        ></CardListTitle>\n        <div\n          class={{\n            CardList__Overflow: true,\n          }}\n          style={this.computeMaskLayer()}\n        >\n          <div\n            class={{\n              CardList__Content: true,\n              CardList__Content__Collapsed: this.collapse,\n              CardList__Style__Flexbox__Scroll: this.listStyle === 'stack',\n              CardList__Style__Infinite__Scroll: this.listStyle === 'scroll',\n            }}\n            onScroll={() => this.onCardListScroll()}\n          >\n            <slot\n              onSlotchange={() => this.changeVisibilityOfSlotChildren()}\n            ></slot>\n            {this.isShowMoreCardVisible() ? (\n              <ix-card\n                class={{\n                  Show__All__Card: true,\n                }}\n                onClick={(event) =>\n                  this.showMoreCardClick.emit({\n                    nativeEvent: event,\n                  })\n                }\n              >\n                <ix-card-content>\n                  <div class=\"Show__All__Card__Content\">\n                    <ix-icon\n                      name={iconMoreMenu}\n                      size={'32'}\n                      class={'Show__All__Card__Icon'}\n                    ></ix-icon>\n                    <span class=\"Show__All__Card__Text\">\n                      {this.i18nMoreCards} ({this.numberOfOverflowingElements})\n                    </span>\n                  </div>\n                </ix-card-content>\n              </ix-card>\n            ) : null}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;;AAAA,MAAM,WAAW,GAAG,m7FAAm7F;;ACcv8F,SAAS,aAAa,CAAC,KAStB,EAAA;AACC,IAAA,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;AAChB,QAAA,OAAO,IAAI;;AAGb,IAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAA,CAAA,gBAAA,EAAA,EACE,OAAO,EAAC,UAAU,EAClB,IAAI,EAAE,eAAe,EACrB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,SAAS,EAAC,eAAe,EACzB,KAAK,EAAE;AACL,YAAA,uBAAuB,EAAE,IAAI;YAC7B,kCAAkC,EAAE,KAAK,CAAC,WAAW;SACtD,EACW,YAAA,EAAA,KAAK,CAAC,qBAAqB,EACvB,CAAA,EAClB,CAAe,CAAA,eAAA,EAAA,EAAA,KAAK,EAAC,uBAAuB,EAAC,MAAM,EAAC,SAAS,EAC1D,EAAA,KAAK,CAAC,KAAK,CACE,EACf,CAAC,KAAK,CAAC,WAAW,KACjB,CAAA,CAAA,WAAA,EAAA,EACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,KAAK,CAAC,cAAc,EAAA,EAE7B,CAAO,CAAA,MAAA,EAAA,IAAA,EAAA,KAAK,CAAC,YAAY,CAAQ,EACjC,CACG,CAAA,MAAA,EAAA,IAAA,EAAA,CAAC,KAAK,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,KAAK,KAAK,CAAC,cAAc,CAAG,CAAA,CAAA,GAAG,IAAI,CAC9D,CACG,CACb,CACG;AAEV;MAOa,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;AAmBE;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAEzC;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAAuB,OAAO;AAE/C;;;;AAIG;AACK,QAAA,IAAe,CAAA,eAAA,GAAG,EAAE;AAO5B;;AAEG;AACK,QAAA,IAAwB,CAAA,wBAAA,GAAG,KAAK;AAExC;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAG,KAAK;AAE3B;;AAEG;AACK,QAAA,IAAW,CAAA,WAAA,GAAG,UAAU;AAEhC;;AAEG;AACK,QAAA,IAAa,CAAA,aAAA,GAAG,gCAAgC;AAuBvC,QAAA,IAAsB,CAAA,sBAAA,GAAG,KAAK;AAC9B,QAAA,IAA2B,CAAA,2BAAA,GAAG,CAAC;AAC/B,QAAA,IAAwB,CAAA,wBAAA,GAAG,CAAC;AAC5B,QAAA,IAAkB,CAAA,kBAAA,GAAG,CAAC;AACtB,QAAA,IAAmB,CAAA,mBAAA,GAAG,CAAC;AA+MzC;IA3MS,0BAA0B,GAAA;AAChC,QAAA,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ;QAC9B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;;AAGlC,IAAA,cAAc,CAAC,KAAiB,EAAA;AACtC,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;AACrB,YAAA,WAAW,EAAE,KAAK;AACnB,SAAA,CAAC;;IAGI,eAAe,GAAA;AACrB,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,aAAa,CACrD,2BAA2B,CACT;QACpB,OAAO,IAAI,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;;IAGzC,8BAA8B,GAAA;AACpC,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,eAAe,EAAE;QAC5C,aAAa,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,KAAK,KAAI;AACvC,YAAA,IAAI,OAAO,YAAY,WAAW,EAAE;gBAClC,IAAI,KAAK,GAAG,IAAI,CAAC,eAAe,GAAG,CAAC,EAAE;AACpC,oBAAA,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC;oBACrC;;AAEF,gBAAA,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,cAAc,CAAC;;AAE5C,SAAC,CAAC;QACF,IAAI,CAAC,sBAAsB,GAAG,aAAa,CAAC,MAAM,GAAG,IAAI,CAAC,eAAe;AACzE,QAAA,IAAI,CAAC,2BAA2B;AAC9B,YAAA,aAAa,CAAC,MAAM,GAAG,IAAI,CAAC,eAAe;AAE7C,QAAA,IAAI,CAAC,wBAAwB,GAAG,aAAa,CAAC,MAAM;QACpD,IAAI,CAAC,cAAc,EAAE;;IAGf,uBAAuB,GAAA;AAC7B,QAAA,IAAI,CAAC,QAAQ,GAAG,sBAAsB,CAAC,MAAK;YAC1C,IAAI,CAAC,8BAA8B,EAAE;AACvC,SAAC,CAAC;AAEF,QAAA,IAAI,CAAC,QAAQ,CAAC,OAAO,CACnB,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,aAAa,CAAC,oBAAoB,CAAE,EACjE;AACE,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,OAAO,EAAE,IAAI;AACd,SAAA,CACF;QAED,qBAAqB,CAAC,MAAK;YACzB,IAAI,CAAC,8BAA8B,EAAE;AACvC,SAAC,CAAC;;IAGI,oBAAoB,GAAA;AAC1B,QAAA,IAAI,IAAI,CAAC,wBAAwB,EAAE;AACjC,YAAA,OAAO,KAAK;;AAEd,QAAA,IAAI,IAAI,CAAC,SAAS,KAAK,OAAO,IAAI,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE;AAC7D,YAAA,OAAO,IAAI;;;AAIf,IAAA,IAAY,WAAW,GAAA;QACrB,OAAO,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,aAAa,CAAC,oBAAoB,CAAC;;IAGjE,gBAAgB,GAAA;QACtB,IAAI,CAAC,cAAc,EAAE;;IAGf,qBAAqB,GAAA;QAC3B,QACE,IAAI,CAAC,wBAAwB,KAAK,KAAK,IAAI,IAAI,CAAC,sBAAsB;;AAIlE,IAAA,4BAA4B,CAAC,QAAgB,EAAA;AACnD,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;AACrB,YAAA,OAAO,CAAC;;AAGV,QAAA,IAAI,QAAQ,KAAK,CAAC,EAAE;AAClB,YAAA,OAAO,CAAC;;AAGV,QAAA,IAAI,QAAQ,GAAG,GAAG,EAAE;AAClB,YAAA,OAAO,CAAC;;QAGV,OAAO,QAAQ,GAAG,GAAG;;IAGf,gBAAgB,GAAA;QACtB,MAAM,gBAAgB,GAAG,EAAE;AAC3B,QAAA,MAAM,SAAS,GAAG,CAAA;;;cAId,gBAAgB;AAChB,aAAC,IAAI,CAAC,4BAA4B,CAAC,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CACzE,CAAA;0BAEE,gBAAgB;aACf,IAAI,CAAC,4BAA4B,CAAC,IAAI,CAAC,mBAAmB,CAAC,GAAG;AAC7D,kBAAE;kBACA,CAAC,CACP,CAAA;;MAEA;QACF,OAAO;AACL,YAAA,yBAAyB,EAAE,SAAS;SACrC;;IAIK,cAAc,GAAA;AACpB,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB;;QAEF,MAAM,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,WAAW;AAEjE,QAAA,IAAI,CAAC,kBAAkB,GAAG,UAAU;QACpC,IAAI,CAAC,mBAAmB,GAAG,WAAW,GAAG,UAAU,GAAG,WAAW;;IAGnE,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,oBAAoB,EAAE,EAAE;YAC/B,IAAI,CAAC,uBAAuB,EAAE;;;IAIlC,oBAAoB,GAAA;AAClB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE;;;IAI9B,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAC,CAAA,aAAa,EACZ,EAAA,GAAA,EAAA,0CAAA,EAAA,WAAW,EAAE,IAAI,CAAC,QAAQ,EAC1B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,YAAY,EAAE,IAAI,CAAC,WAAW,EAC9B,cAAc,EACZ,IAAI,CAAC,YAAY,KAAK;kBAClB,IAAI,CAAC;kBACL,IAAI,CAAC,YAAY,EAEvB,OAAO,EAAE,MAAM,IAAI,CAAC,0BAA0B,EAAE,EAChD,cAAc,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAC7C,WAAW,EAAE,IAAI,CAAC,WAAW,EACd,CAAA,EACjB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,kBAAkB,EAAE,IAAI;AACzB,aAAA,EACD,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,EAAA,EAE9B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,iBAAiB,EAAE,IAAI;gBACvB,4BAA4B,EAAE,IAAI,CAAC,QAAQ;AAC3C,gBAAA,gCAAgC,EAAE,IAAI,CAAC,SAAS,KAAK,OAAO;AAC5D,gBAAA,iCAAiC,EAAE,IAAI,CAAC,SAAS,KAAK,QAAQ;aAC/D,EACD,QAAQ,EAAE,MAAM,IAAI,CAAC,gBAAgB,EAAE,EAAA,EAEvC,CACE,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAY,EAAE,MAAM,IAAI,CAAC,8BAA8B,EAAE,EACnD,CAAA,EACP,IAAI,CAAC,qBAAqB,EAAE,IAC3B,CACE,CAAA,SAAA,EAAA,EAAA,KAAK,EAAE;AACL,gBAAA,eAAe,EAAE,IAAI;AACtB,aAAA,EACD,OAAO,EAAE,CAAC,KAAK,KACb,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;AAC1B,gBAAA,WAAW,EAAE,KAAK;AACnB,aAAA,CAAC,EAAA,EAGJ,CAAA,CAAA,iBAAA,EAAA,IAAA,EACE,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACnC,CACE,CAAA,SAAA,EAAA,EAAA,IAAI,EAAE,YAAY,EAClB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,uBAAuB,EACrB,CAAA,EACX,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,IAAI,CAAC,aAAa,QAAI,IAAI,CAAC,2BAA2B,MAClD,CACH,CACU,CACV,IACR,IAAI,CACJ,CACF,CACD;;;;;;;;"}
+{"version":3,"file":"ix-card-list.entry.js","sources":["src/components/card-list/card-list.scss?tag=ix-card-list&encapsulation=shadow","src/components/card-list/card-list.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@use 'mixins/shadow-dom/component';\n\n$CardList__Title__Height: 1.5rem;\n\n:host {\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  align-items: flex-start;\n  margin: 0.5rem;\n\n  @include component.ix-component;\n\n  .CardList_Title {\n    display: flex;\n    position: relative;\n    height: $CardList__Title__Height;\n    align-items: center;\n    width: 100%;\n    margin-bottom: 1rem;\n\n    &__Label {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n  }\n\n  .CardList__Title__Button {\n    margin-right: 1rem;\n    transition: var(--theme-default-time) transform ease-in-out;\n  }\n\n  .CardList__Title__Button__Collapsed {\n    transform: rotate(-90deg);\n  }\n\n  .CardList__Title__Show__All {\n    align-self: center;\n    margin-left: auto;\n    margin-right: 0px;\n    flex-shrink: 0;\n  }\n\n  .CardList__Content {\n    display: flex;\n    position: relative;\n    height: calc(100% - #{$CardList__Title__Height});\n    width: 100%;\n    gap: 1.5rem;\n    transition: var(--theme-default-time) ease-in-out;\n    overflow: auto;\n  }\n\n  .CardList__Content__Collapsed {\n    min-height: 0px;\n    max-height: 0px;\n    overflow: hidden;\n    opacity: 0;\n  }\n\n  .CardList__Style__Flexbox__Scroll {\n    flex-wrap: wrap;\n  }\n\n  .CardList__Style__Infinite__Scroll {\n    flex-wrap: nowrap;\n\n    -ms-overflow-style: none;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .CardList__Overflow {\n    display: block;\n    position: relative;\n    height: 100%;\n    width: 100%;\n    pointer-events: all;\n    mask-image: var(--ix-card-list-overflow, none);\n  }\n\n  .Show__All__Card {\n    display: flex;\n    position: relative;\n\n    align-self: flex-start;\n    justify-self: center;\n\n    max-width: 11.25rem;\n    min-width: 11.25rem;\n    width: 11.25rem;\n\n    min-height: 11.25rem;\n    max-height: 11.25rem;\n    height: 11.25rem;\n\n    --ix-card-border-color: var(--theme-color-primary);\n    color: var(--theme-color-primary);\n  }\n\n  .CardList__Style__Infinite__Scroll .Show__All__Card {\n    margin-top: 2.375rem;\n  }\n\n  .CardList__Style__Flexbox__Scroll .Show__All__Card {\n    margin-bottom: 2.375rem;\n  }\n\n  .Show__All__Card:hover {\n    background-color: var(--theme-color-ghost--hover);\n  }\n\n  .Show__All__Card:active {\n    background-color: var(--theme-color-ghost--active);\n  }\n\n  .Show__All__Card__Content {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100%;\n  }\n\n  .Show__All__Card__Icon {\n    display: flex;\n    position: absolute;\n    height: 4rem;\n    width: 4rem;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .Show__All__Card__Text {\n    margin-bottom: 0px;\n    margin-top: auto;\n  }\n}\n\n::slotted(.display-none) {\n  display: none !important;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { iconChevronDown, iconMoreMenu } from '@siemens/ix-icons/icons';\n\nfunction CardListTitle(props: {\n  label?: string;\n  ariaLabelExpandButton?: string;\n  isCollapsed: boolean;\n  onClick: (e: MouseEvent) => void;\n  onShowAllClick: (e: MouseEvent) => void;\n  showAllLabel: string;\n  showAllCounter: number;\n  hideShowAll: boolean;\n}) {\n  if (!props.label) {\n    return null;\n  }\n\n  return (\n    <div class=\"CardList_Title\">\n      <ix-icon-button\n        variant=\"tertiary\"\n        icon={iconChevronDown}\n        onClick={props.onClick}\n        iconColor=\"color-primary\"\n        class={{\n          CardList__Title__Button: true,\n          CardList__Title__Button__Collapsed: props.isCollapsed,\n        }}\n        aria-label={props.ariaLabelExpandButton}\n      ></ix-icon-button>\n      <ix-typography class=\"CardList_Title__Label\" format=\"body-lg\">\n        {props.label}\n      </ix-typography>\n      {!props.hideShowAll && (\n        <ix-button\n          class=\"CardList__Title__Show__All\"\n          variant=\"tertiary\"\n          onClick={props.onShowAllClick}\n        >\n          <span>{props.showAllLabel}</span>\n          <span>\n            {!isNaN(props.showAllCounter) ? ` (${props.showAllCounter})` : null}\n          </span>\n        </ix-button>\n      )}\n    </div>\n  );\n}\n\n@Component({\n  tag: 'ix-card-list',\n  styleUrl: 'card-list.scss',\n  shadow: true,\n})\nexport class CardList {\n  /**\n   * ARIA label for the card's expand button.\n   * Will be set as aria-label on the nested HTML button element\n   *\n   * @since 3.2.0\n   */\n  @Prop() ariaLabelExpandButton?: string;\n\n  /**\n   * Name the card list\n   */\n  @Prop() label?: string;\n\n  /**\n   * Collapse the list\n   */\n  @Prop({ mutable: true }) collapse = false;\n\n  /**\n   * List style\n   */\n  @Prop() listStyle: 'stack' | 'scroll' = 'stack';\n\n  /**\n   * Maximal visible cards\n   *\n   * @internal\n   */\n  @Prop() maxVisibleCards = 12;\n\n  /**\n   * Overwrite the default show all count.\n   * */\n  @Prop() showAllCount?: number;\n\n  /**\n   * Suppress the overflow handling of child elements\n   */\n  @Prop() suppressOverflowHandling = false;\n\n  /**\n   * Hide the show all button\n   */\n  @Prop() hideShowAll = false;\n\n  /**\n   * i18n Show all button\n   */\n  @Prop({ attribute: 'i18n-show-all' }) i18nShowAll = 'Show all';\n\n  /**\n   * i18n More cards available\n   */\n  @Prop({ attribute: 'i18n-more-cards' }) i18nMoreCards =\n    'There are more cards available';\n\n  /**\n   * Fire event when the collapse state is changed by the user\n   */\n  @Event() collapseChanged!: EventEmitter<boolean>;\n\n  /**\n   * Fire event when the collapse state is changed by the user\n   */\n  @Event() showAllClick!: EventEmitter<{\n    nativeEvent: MouseEvent;\n  }>;\n\n  /**\n   * Fire event when the show more card is clicked.\n   */\n  @Event() showMoreCardClick!: EventEmitter<{\n    nativeEvent: MouseEvent;\n  }>;\n\n  @Element() hostElement!: HTMLIxCardListElement;\n\n  @State() private hasOverflowingElements = false;\n  @State() private numberOfOverflowingElements = 0;\n  @State() private numberOfAllChildElements = 0;\n  @State() private leftScrollDistance = 0;\n  @State() private rightScrollDistance = 0;\n\n  private observer?: MutationObserver;\n\n  private onCardListVisibilityToggle() {\n    this.collapse = !this.collapse;\n    this.collapseChanged.emit(this.collapse);\n  }\n\n  private onShowAllClick(event: MouseEvent) {\n    this.showAllClick.emit({\n      nativeEvent: event,\n    });\n  }\n\n  private getListChildren() {\n    const slot = this.hostElement.shadowRoot!.querySelector(\n      '.CardList__Content > slot'\n    ) as HTMLSlotElement;\n    return slot.assignedElements({ flatten: true });\n  }\n\n  private changeVisibilityOfSlotChildren() {\n    const childElements = this.getListChildren();\n    childElements.forEach((element, index) => {\n      if (element instanceof HTMLElement) {\n        if (index > this.maxVisibleCards - 1) {\n          element.classList.add('display-none');\n          return;\n        }\n        element.classList.remove('display-none');\n      }\n    });\n    this.hasOverflowingElements = childElements.length > this.maxVisibleCards;\n    this.numberOfOverflowingElements =\n      childElements.length - this.maxVisibleCards;\n\n    this.numberOfAllChildElements = childElements.length;\n    this.detectOverflow();\n  }\n\n  private registerOverflowHandler() {\n    this.observer = createMutationObserver(() => {\n      this.changeVisibilityOfSlotChildren();\n    });\n\n    this.observer.observe(\n      this.hostElement.shadowRoot!.querySelector('.CardList__Content')!,\n      {\n        childList: true,\n        subtree: true,\n      }\n    );\n\n    requestAnimationFrame(() => {\n      this.changeVisibilityOfSlotChildren();\n    });\n  }\n\n  private shouldHandleOverflow() {\n    if (this.suppressOverflowHandling) {\n      return false;\n    }\n    if (this.listStyle === 'stack' || this.listStyle === 'scroll') {\n      return true;\n    }\n  }\n\n  private get listElement() {\n    return this.hostElement.shadowRoot!.querySelector('.CardList__Content');\n  }\n\n  private onCardListScroll() {\n    this.detectOverflow();\n  }\n\n  private isShowMoreCardVisible() {\n    return (\n      this.suppressOverflowHandling === false && this.hasOverflowingElements\n    );\n  }\n\n  private getOpacityFromScrollDistance(distance: number) {\n    if (!this.listElement) {\n      return 0;\n    }\n\n    if (distance === 0) {\n      return 0;\n    }\n\n    if (distance > 100) {\n      return 1;\n    }\n\n    return distance / 100;\n  }\n\n  private computeMaskLayer() {\n    const maxOverflowWidth = 80;\n    const maskLayer = `linear-gradient(\n      90deg,\n      transparent 0px,\n      black ${\n        maxOverflowWidth *\n        (this.getOpacityFromScrollDistance(this.leftScrollDistance) > 0 ? 1 : 0)\n      }px,\n      black calc(100% - ${\n        maxOverflowWidth *\n        (this.getOpacityFromScrollDistance(this.rightScrollDistance) > 0\n          ? 1\n          : 0)\n      }px),\n      transparent 100%\n    )`;\n    return {\n      '--ix-card-list-overflow': maskLayer,\n    };\n  }\n\n  @Listen('resize', { target: 'window' })\n  private detectOverflow() {\n    if (!this.listElement) {\n      return;\n    }\n    const { clientWidth, scrollWidth, scrollLeft } = this.listElement;\n\n    this.leftScrollDistance = scrollLeft;\n    this.rightScrollDistance = scrollWidth - scrollLeft - clientWidth;\n  }\n\n  componentDidLoad() {\n    if (this.shouldHandleOverflow()) {\n      this.registerOverflowHandler();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <CardListTitle\n          isCollapsed={this.collapse}\n          label={this.label}\n          showAllLabel={this.i18nShowAll}\n          showAllCounter={\n            this.showAllCount === undefined\n              ? this.numberOfAllChildElements\n              : this.showAllCount\n          }\n          onClick={() => this.onCardListVisibilityToggle()}\n          onShowAllClick={(e) => this.onShowAllClick(e)}\n          hideShowAll={this.hideShowAll}\n        ></CardListTitle>\n        <div\n          class={{\n            CardList__Overflow: true,\n          }}\n          style={this.computeMaskLayer()}\n        >\n          <div\n            class={{\n              CardList__Content: true,\n              CardList__Content__Collapsed: this.collapse,\n              CardList__Style__Flexbox__Scroll: this.listStyle === 'stack',\n              CardList__Style__Infinite__Scroll: this.listStyle === 'scroll',\n            }}\n            onScroll={() => this.onCardListScroll()}\n          >\n            <slot\n              onSlotchange={() => this.changeVisibilityOfSlotChildren()}\n            ></slot>\n            {this.isShowMoreCardVisible() ? (\n              <ix-card\n                class={{\n                  Show__All__Card: true,\n                }}\n                onClick={(event) =>\n                  this.showMoreCardClick.emit({\n                    nativeEvent: event,\n                  })\n                }\n              >\n                <ix-card-content>\n                  <div class=\"Show__All__Card__Content\">\n                    <ix-icon\n                      name={iconMoreMenu}\n                      size={'32'}\n                      class={'Show__All__Card__Icon'}\n                    ></ix-icon>\n                    <span class=\"Show__All__Card__Text\">\n                      {this.i18nMoreCards} ({this.numberOfOverflowingElements})\n                    </span>\n                  </div>\n                </ix-card-content>\n              </ix-card>\n            ) : null}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/ix-category-filter.entry.js

@@ -45,22 +45,16 @@ const CategoryFilter = class {
          */
         this.hideIcon = false;
         /**
-         * If set to true, allows that a single category can be set more than once.
-         * An already set category will not appear in the category dropdown if set to false.
-         *
-         * Defaults to true
-         */
-        this.repeatCategories = true;
-        /**
-         * @internal For debugging purposes only!
+         * If set to true, prevents that a single category can be set more than once.
+         * An already set category will not appear in the category dropdown if set to true.
          */
-        this.tmpDisableScrollIntoView = true;
+        this.uniqueCategories = false;
         /**
          * i18n
          */
         this.labelCategories = 'Categories';
         /**
-         * i18n
+         * i18n label for 'Filter by text'
          */
         this.i18nPlainText = 'Filter by text';
     }
@@ -314,7 +308,7 @@ const CategoryFilter = class {
         this.emitFilterEvent();
     }
     filterMultiples(value) {
-        if (this.repeatCategories) {
+        if (!this.uniqueCategories) {
             return true;
         }
         const isCategoryAlreadySet = this.filterTokens.find((token) => token.id === value);
@@ -460,9 +454,7 @@ const CategoryFilter = class {
     componentDidRender() {
         var _a, _b;
         if (this.isScrollStateDirty) {
-            if (!this.tmpDisableScrollIntoView) {
-                (_b = (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.scrollIntoView();
-            }
+            (_b = (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.scrollIntoView();
             this.isScrollStateDirty = false;
         }
     }
@@ -504,19 +496,19 @@ const CategoryFilter = class {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: 'f9440f389259e19514ffa98a88ccb27131dbb7d1' }, h("form", { key: 'c4613c63f246a88feda56778a8d02c154d5d4947', ref: (el) => (this.formElement = el) }, h("div", { key: '1f3710d4b10c45f88c16708485171740f95ad7b2', "read-only": this.readonly, class: {
+        return (h(Host, { key: 'c067de370164a717112829f8be82ac8d786d7622' }, h("form", { key: '2cd185f59a209029a1184790488eb472a8456cbb', ref: (el) => (this.formElement = el) }, h("div", { key: '5d0eed2dacde6318ebe516becdc41b785908c864', "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: 'b9325f36c0524729b7f03f782692e8dafe1b4496', color: this.getIconColor(), class: { 'display-none': this.hideIcon }, name: (_a = this.icon) !== null && _a !== void 0 ? _a : iconSearch, size: "16" }), h("div", { key: 'b4dc6e8254acf84678cc6a9eab591f5af3f67bf6', class: "token-container" }, h("div", { key: '4c2670b652f23533275d4fe011d313f63e23e047', class: "list-unstyled" }, this.filterTokens.map((value, index) => (h("span", { key: value.toString(), class: {
+            } }, h("ix-icon", { key: 'ec27370c08d6882c85f29dafb7c9cbf2655cbacf', color: this.getIconColor(), class: { 'display-none': this.hideIcon }, name: (_a = this.icon) !== null && _a !== void 0 ? _a : iconSearch, size: "16" }), h("div", { key: '277a47c6cc91d6b631c01ae4b3f8f21cca29943e', class: "token-container" }, h("div", { key: 'c086102952499cbd43ae910d745be5ef0aa44e40', class: "list-unstyled" }, this.filterTokens.map((value, index) => (h("span", { 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("span", { class: {
                 'category-preview': true,
                 'display-none': this.category === '',
-            } }, (_b = this.categories[this.category]) === null || _b === void 0 ? void 0 : _b.label)), h("input", Object.assign({ key: 'b25e2a1f6bb30f4bae27a11abe6fa2dd1206fb2c', class: {
+            } }, (_b = this.categories[this.category]) === null || _b === void 0 ? void 0 : _b.label)), h("input", Object.assign({ key: '7f2bdc80da327d2c40f7031259618131a391bd7c', class: {
                 'text-input': true,
                 'hide-placeholder': this.readonly || this.disabled || this.category !== '',
             }, autocomplete: "off", name: "category-filter-input", disabled: this.disabled, readonly: this.readonly, ref: this.textInput, type: "text", placeholder: this.placeholder }, this.a11yAttributes, { "aria-label": this.ariaLabelFilterInput })))), !this.readonly && !this.disabled && this.getResetButton())), this.disabled || this.readonly ? ('') : (h("ix-dropdown", { show: this.showDropdown, closeBehavior: "outside", offset: { mainAxis: 2 }, anchor: (_c = this.textInput) === null || _c === void 0 ? void 0 : _c.waitForCurrent(), trigger: this.hostElement, header: this.getDropdownHeader() }, this.renderDropdownContent()))));