@siemens/ix 0.0.0-pr-1974-20250627114851 → 0.0.0-pr-1974-20250627142646

package/components/ix-breadcrumb.js

@@ -0,0 +1,169 @@
+import { p as proxyCustomElement, H, e as createEvent, h, f as forceUpdate, d as Host } from './p-BuJ6BWIi.js';
+import { b as a11yHostAttributes, a as a11yBoolean } from './p-Bb7pDeaQ.js';
+import { c as createMutationObserver } from './p-CX81WQtk.js';
+import { m as makeRef } from './p-bcj7UEIC.js';
+import { d as defineCustomElement$5 } from './p-DkGdSI6e.js';
+import { d as defineCustomElement$4 } from './p-Cut5OrRw.js';
+import { d as defineCustomElement$3 } from './p-TNoCM8Wi.js';
+import { d as defineCustomElement$2 } from './p-BygLxZIM.js';
+
+const breadcrumbCss = ":host{display:flex;justify-content:flex-start;height:2.5rem;align-items:center;background-color:transparent;overflow:hidden}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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}:host .previous-button{width:3rem;min-width:0px}:host .crumb-dropdown{overflow:visible}:host .remove-anchor::after{display:none}:host .more-text{display:flex}:host .more-text .more-text-ellipsis{width:1rem;display:inline-block;font-weight:700}:host .more-text ix-icon{padding-top:2px}:host nav,:host ol,:host .crumb-items{display:contents}";
+
+let sequenceId = 0;
+const createId = (prefix = 'breadcrumb-') => {
+    return `${prefix}-${sequenceId++}`;
+};
+const Breadcrumb = /*@__PURE__*/ proxyCustomElement(class Breadcrumb extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.itemClick = createEvent(this, "itemClick", 7);
+        this.nextClick = createEvent(this, "nextClick", 7);
+        /**
+         * Excess items will get hidden inside of dropdown
+         */
+        this.visibleItemCount = 9;
+        /**
+         * Items will be accessible through a dropdown
+         */
+        this.nextItems = [];
+        /**
+         * Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)
+         */
+        this.ghost = true;
+        /**
+         * Accessibility label for the dropdown button (ellipsis icon) used to access the dropdown list
+         * with conditionally hidden previous items
+         */
+        this.ariaLabelPreviousButton = 'previous';
+        this.previousButtonRef = makeRef();
+        this.nextButtonRef = makeRef();
+        this.items = [];
+        this.isPreviousDropdownExpanded = false;
+        this.previousButtonId = createId();
+        this.previousDropdownId = createId();
+    }
+    onNextItemsChange() {
+        this.onChildMutation();
+    }
+    onItemClick(item) {
+        this.itemClick.emit(item);
+    }
+    componentDidLoad() {
+        this.mutationObserver = createMutationObserver(() => this.onChildMutation());
+        this.mutationObserver.observe(this.hostElement, {
+            subtree: true,
+            childList: true,
+        });
+    }
+    componentWillLoad() {
+        this.onChildMutation();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    async onChildMutation() {
+        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.isDropdownTrigger = shouldShowDropdown;
+            if (shouldShowDropdown) {
+                this.nextButtonRef(bc);
+            }
+            if (updatedItems.length < this.visibleItemCount) {
+                return;
+            }
+            bc.visible = index >= updatedItems.length - this.visibleItemCount;
+        });
+        this.items = updatedItems;
+    }
+    getItems() {
+        return Array.from(this.hostElement.querySelectorAll('ix-breadcrumb-item'));
+    }
+    render() {
+        var _a, _b, _c, _d;
+        const a11y = a11yHostAttributes(this.hostElement);
+        return (h(Host, { key: '4a6b862b1db0e8e7849061463f139be7c4639fcd' }, h("ix-dropdown", { key: '8cef2dff858029949dfea14b4a77c0c00e8a3efa', 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;
+                const previousButton = this.hostElement.shadowRoot.getElementById(this.previousButtonId);
+                // Need to force update previous button to change `aria-expanded`
+                if (previousButton) {
+                    forceUpdate(previousButton);
+                }
+            } }, this.items
+            .slice(0, this.items.length - this.visibleItemCount)
+            .map((item) => {
+            var _a;
+            const label = (_a = item.label) !== null && _a !== void 0 ? _a : item.innerText;
+            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: '8112c1329362ff4ffe1d689d6b20ae550888dcba', class: "crumb-items", "aria-label": (_c = a11y['aria-label']) !== null && _c !== void 0 ? _c : 'breadcrumbs' }, h("ol", { key: '2db2e27473f900774d18b7ef1466adad55aadf79' }, h("slot", { key: '506d6a2a60cf265768e84b17f135260a6e063158' }))), h("ix-dropdown", { key: 'bae2ef6fb599375c20b534a4a58fa15582f51460', 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,
+                });
+            }, onItemClick: (event) => event.stopPropagation() }))))));
+    }
+    get hostElement() { return this; }
+    static get watchers() { return {
+        "nextItems": ["onNextItemsChange"]
+    }; }
+    static get style() { return breadcrumbCss; }
+}, [1, "ix-breadcrumb", {
+        "visibleItemCount": [2, "visible-item-count"],
+        "nextItems": [16, "next-items"],
+        "ghost": [4],
+        "ariaLabelPreviousButton": [1, "aria-label-previous-button"],
+        "items": [32],
+        "isPreviousDropdownExpanded": [32]
+    }, undefined, {
+        "nextItems": ["onNextItemsChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-breadcrumb", "ix-breadcrumb-item", "ix-dropdown", "ix-dropdown-item", "ix-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-breadcrumb":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Breadcrumb);
+            }
+            break;
+        case "ix-breadcrumb-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ix-dropdown":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ix-dropdown-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ix-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const IxBreadcrumb = Breadcrumb;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxBreadcrumb, defineCustomElement };
+//# sourceMappingURL=ix-breadcrumb.js.map
+
+//# sourceMappingURL=ix-breadcrumb.js.map

package/components/ix-breadcrumb.js.map

@@ -0,0 +1 @@
+{"file":"ix-breadcrumb.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"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@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\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  .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: $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"],"version":3}

package/components/ix-button.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxButton extends Components.IxButton, HTMLElement {}
+export const IxButton: {
+    prototype: IxButton;
+    new (): IxButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ix-button.js

@@ -0,0 +1,9 @@
+import { B as Button, d as defineCustomElement$1 } from './p-CvvOe8xV.js';
+
+const IxButton = Button;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxButton, defineCustomElement };
+//# sourceMappingURL=ix-button.js.map
+
+//# sourceMappingURL=ix-button.js.map

package/components/ix-button.js.map

@@ -0,0 +1 @@
+{"file":"ix-button.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/components/ix-card-accordion.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxCardAccordion extends Components.IxCardAccordion, HTMLElement {}
+export const IxCardAccordion: {
+    prototype: IxCardAccordion;
+    new (): IxCardAccordion;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ix-card-accordion.js

@@ -0,0 +1,9 @@
+import { C as CardAccordion, d as defineCustomElement$1 } from './p-BP-8cvOJ.js';
+
+const IxCardAccordion = CardAccordion;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxCardAccordion, defineCustomElement };
+//# sourceMappingURL=ix-card-accordion.js.map
+
+//# sourceMappingURL=ix-card-accordion.js.map

package/components/ix-card-accordion.js.map

@@ -0,0 +1 @@
+{"file":"ix-card-accordion.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/components/ix-card-content.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxCardContent extends Components.IxCardContent, HTMLElement {}
+export const IxCardContent: {
+    prototype: IxCardContent;
+    new (): IxCardContent;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ix-card-content.js

@@ -0,0 +1,9 @@
+import { C as CardContent, d as defineCustomElement$1 } from './p-B3duqvjW.js';
+
+const IxCardContent = CardContent;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxCardContent, defineCustomElement };
+//# sourceMappingURL=ix-card-content.js.map
+
+//# sourceMappingURL=ix-card-content.js.map

package/components/ix-card-content.js.map

@@ -0,0 +1 @@
+{"file":"ix-card-content.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/components/ix-card-list.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxCardList extends Components.IxCardList, HTMLElement {}
+export const IxCardList: {
+    prototype: IxCardList;
+    new (): IxCardList;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ix-card-list.js

@@ -0,0 +1,256 @@
+import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-BuJ6BWIi.js';
+import { c as createMutationObserver } from './p-CX81WQtk.js';
+import { c as iconMoreMenu, d as iconChevronDown } from './p-CGwHQeMX.js';
+import { d as defineCustomElement$7 } from './p-CvvOe8xV.js';
+import { d as defineCustomElement$6 } from './p-tH4n038Z.js';
+import { d as defineCustomElement$5 } from './p-B3duqvjW.js';
+import { d as defineCustomElement$4 } from './p-BXjBChze.js';
+import { d as defineCustomElement$3 } from './p-BygLxZIM.js';
+import { d as defineCustomElement$2 } from './p-DyMgW0fR.js';
+
+const cardListCss = ":host{display:flex;position:relative;flex-direction:column;align-items:flex-start;margin:0.5rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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}:host .CardList_Title{display:flex;position:relative;height:1.5rem;align-items:center;width:100%;margin-bottom:1rem}:host .CardList_Title__Label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .CardList__Title__Button{margin-right:1rem;transition:var(--theme-default-time) transform ease-in-out}:host .CardList__Title__Button__Collapsed{transform:rotate(-90deg)}:host .CardList__Title__Show__All{align-self:center;margin-left:auto;margin-right:0px;flex-shrink:0}:host .CardList__Content{display:flex;position:relative;height:calc(100% - 1.5rem);width:100%;gap:1.5rem;transition:var(--theme-default-time) ease-in-out;overflow:auto}:host .CardList__Content__Collapsed{min-height:0px;max-height:0px;overflow:hidden;opacity:0}:host .CardList__Style__Flexbox__Scroll{flex-wrap:wrap}:host .CardList__Style__Infinite__Scroll{flex-wrap:nowrap;-ms-overflow-style:none;scrollbar-width:none}:host .CardList__Style__Infinite__Scroll::-webkit-scrollbar{display:none}:host .CardList__Overflow{display:block;position:relative;height:100%;width:100%;pointer-events:all;-webkit-mask-image:var(--ix-card-list-overflow, none);mask-image:var(--ix-card-list-overflow, none)}:host .Show__All__Card{display:flex;position:relative;align-self:flex-start;justify-self:center;max-width:11.25rem;min-width:11.25rem;width:11.25rem;min-height:11.25rem;max-height:11.25rem;height:11.25rem;--ix-card-border-color:var(--theme-color-primary);color:var(--theme-color-primary)}:host .CardList__Style__Infinite__Scroll .Show__All__Card{margin-top:2.375rem}:host .CardList__Style__Flexbox__Scroll .Show__All__Card{margin-bottom:2.375rem}:host .Show__All__Card:hover{background-color:var(--theme-color-ghost--hover)}:host .Show__All__Card:active{background-color:var(--theme-color-ghost--active)}:host .Show__All__Card__Content{display:flex;justify-content:center;align-items:center;height:100%}:host .Show__All__Card__Icon{display:flex;position:absolute;height:4rem;width:4rem;justify-content:center;align-items:center}:host .Show__All__Card__Text{margin-bottom:0px;margin-top:auto}::slotted(.display-none){display:none !important}";
+
+function CardListTitle(props) {
+    if (!props.label) {
+        return null;
+    }
+    return (h("div", { class: "CardList_Title" }, h("ix-icon-button", { ghost: true, icon: iconChevronDown, onClick: props.onClick, iconColor: "color-primary", class: {
+            CardList__Title__Button: true,
+            CardList__Title__Button__Collapsed: props.isCollapsed,
+        } }), h("ix-typography", { class: "CardList_Title__Label", format: "body-lg" }, props.label), !props.hideShowAll && (h("ix-button", { class: "CardList__Title__Show__All", ghost: true, onClick: props.onShowAllClick }, h("span", null, props.showAllLabel), h("span", null, !isNaN(props.showAllCounter) ? ` (${props.showAllCounter})` : null)))));
+}
+const CardList = /*@__PURE__*/ proxyCustomElement(class CardList extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.collapseChanged = createEvent(this, "collapseChanged", 7);
+        this.showAllClick = createEvent(this, "showAllClick", 7);
+        this.showMoreCardClick = createEvent(this, "showMoreCardClick", 7);
+        /**
+         * Collapse the list
+         */
+        this.collapse = false;
+        /**
+         * List style
+         */
+        this.listStyle = 'stack';
+        /**
+         * Maximal visible cards
+         *
+         * @internal
+         */
+        this.maxVisibleCards = 12;
+        /**
+         * Suppress the overflow handling of child elements
+         */
+        this.suppressOverflowHandling = false;
+        /**
+         * Hide the show all button
+         */
+        this.hideShowAll = false;
+        /**
+         * i18n Show all button
+         */
+        this.i18nShowAll = 'Show all';
+        /**
+         * i18n More cards available
+         */
+        this.i18nMoreCards = 'There are more cards available';
+        this.hasOverflowingElements = false;
+        this.numberOfOverflowingElements = 0;
+        this.numberOfAllChildElements = 0;
+        this.leftScrollDistance = 0;
+        this.rightScrollDistance = 0;
+    }
+    onCardListVisibilityToggle() {
+        this.collapse = !this.collapse;
+        this.collapseChanged.emit(this.collapse);
+    }
+    onShowAllClick(event) {
+        this.showAllClick.emit({
+            nativeEvent: event,
+        });
+    }
+    getListChildren() {
+        const slot = this.hostElement.shadowRoot.querySelector('.CardList__Content > slot');
+        return slot.assignedElements({ flatten: true });
+    }
+    changeVisibilityOfSlotChildren() {
+        const childElements = this.getListChildren();
+        childElements.forEach((element, index) => {
+            if (element instanceof H) {
+                if (index > this.maxVisibleCards - 1) {
+                    element.classList.add('display-none');
+                    return;
+                }
+                element.classList.remove('display-none');
+            }
+        });
+        this.hasOverflowingElements = childElements.length > this.maxVisibleCards;
+        this.numberOfOverflowingElements =
+            childElements.length - this.maxVisibleCards;
+        this.numberOfAllChildElements = childElements.length;
+        this.detectOverflow();
+    }
+    registerOverflowHandler() {
+        this.observer = createMutationObserver(() => {
+            this.changeVisibilityOfSlotChildren();
+        });
+        this.observer.observe(this.hostElement.shadowRoot.querySelector('.CardList__Content'), {
+            childList: true,
+            subtree: true,
+        });
+        requestAnimationFrame(() => {
+            this.changeVisibilityOfSlotChildren();
+        });
+    }
+    shouldHandleOverflow() {
+        if (this.suppressOverflowHandling) {
+            return false;
+        }
+        if (this.listStyle === 'stack' || this.listStyle === 'scroll') {
+            return true;
+        }
+    }
+    get listElement() {
+        return this.hostElement.shadowRoot.querySelector('.CardList__Content');
+    }
+    onCardListScroll() {
+        this.detectOverflow();
+    }
+    isShowMoreCardVisible() {
+        return (this.suppressOverflowHandling === false && this.hasOverflowingElements);
+    }
+    getOpacityFromScrollDistance(distance) {
+        if (!this.listElement) {
+            return 0;
+        }
+        if (distance === 0) {
+            return 0;
+        }
+        if (distance > 100) {
+            return 1;
+        }
+        return distance / 100;
+    }
+    computeMaskLayer() {
+        const maxOverflowWidth = 80;
+        const maskLayer = `linear-gradient(
+      90deg,
+      transparent 0px,
+      black ${maxOverflowWidth *
+            (this.getOpacityFromScrollDistance(this.leftScrollDistance) > 0 ? 1 : 0)}px,
+      black calc(100% - ${maxOverflowWidth *
+            (this.getOpacityFromScrollDistance(this.rightScrollDistance) > 0
+                ? 1
+                : 0)}px),
+      transparent 100%
+    )`;
+        return {
+            '--ix-card-list-overflow': maskLayer,
+        };
+    }
+    detectOverflow() {
+        if (!this.listElement) {
+            return;
+        }
+        const { clientWidth, scrollWidth, scrollLeft } = this.listElement;
+        this.leftScrollDistance = scrollLeft;
+        this.rightScrollDistance = scrollWidth - scrollLeft - clientWidth;
+    }
+    componentDidLoad() {
+        if (this.shouldHandleOverflow()) {
+            this.registerOverflowHandler();
+        }
+    }
+    disconnectedCallback() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+    }
+    render() {
+        return (h(Host, { key: 'd7259ff82ceca3598f38522414b6e73b15686b48' }, h(CardListTitle, { key: '2de645a7bf9859e64ebefc8d9a42580d19adf898', 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: '6b7e7893b1a83f167485af9e10a549ecfb7fca10', class: {
+                CardList__Overflow: true,
+            }, style: this.computeMaskLayer() }, h("div", { key: '0627f7fa7cd2a606877995198d8ee8dc74144b87', 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: '7b9ccc49e435e65d2a72076d5843d338d844a742', onSlotchange: () => this.changeVisibilityOfSlotChildren() }), this.isShowMoreCardVisible() ? (h("ix-card", { class: {
+                Show__All__Card: true,
+            }, onClick: (event) => this.showMoreCardClick.emit({
+                nativeEvent: event,
+            }) }, h("ix-card-content", null, h("div", { class: "Show__All__Card__Content" }, h("ix-icon", { name: iconMoreMenu, size: '32', class: 'Show__All__Card__Icon' }), h("span", { class: "Show__All__Card__Text" }, this.i18nMoreCards, " (", this.numberOfOverflowingElements, ")"))))) : null))));
+    }
+    get hostElement() { return this; }
+    static get style() { return cardListCss; }
+}, [1, "ix-card-list", {
+        "label": [1],
+        "collapse": [1028],
+        "listStyle": [1, "list-style"],
+        "maxVisibleCards": [2, "max-visible-cards"],
+        "showAllCount": [2, "show-all-count"],
+        "suppressOverflowHandling": [4, "suppress-overflow-handling"],
+        "hideShowAll": [4, "hide-show-all"],
+        "i18nShowAll": [1, "i-1-8n-show-all"],
+        "i18nMoreCards": [1, "i-1-8n-more-cards"],
+        "hasOverflowingElements": [32],
+        "numberOfOverflowingElements": [32],
+        "numberOfAllChildElements": [32],
+        "leftScrollDistance": [32],
+        "rightScrollDistance": [32]
+    }, [[9, "resize", "detectOverflow"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-card-list", "ix-button", "ix-card", "ix-card-content", "ix-icon-button", "ix-spinner", "ix-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-card-list":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CardList);
+            }
+            break;
+        case "ix-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "ix-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "ix-card-content":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ix-icon-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ix-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ix-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const IxCardList = CardList;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxCardList, defineCustomElement };
+//# sourceMappingURL=ix-card-list.js.map
+
+//# sourceMappingURL=ix-card-list.js.map

package/components/ix-card-list.js.map

@@ -0,0 +1 @@
+{"file":"ix-card-list.js","mappings":";;;;;;;;;;AAAA,MAAM,WAAW,GAAG,u5FAAu5F;;ACc36F,SAAS,aAAa,CAAC,KAQtB,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,KAAK,EACL,IAAA,EAAA,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;AACtD,SAAA,EACe,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,iBACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EACL,IAAA,EAAA,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,CAAA,EAAA,EAAK,KAAK,CAAC,cAAc,GAAG,GAAG,IAAI,CAC9D,CACG,CACb,CACG;AAEV;MAOa,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,GAAA;;;;;;;AAWE;;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,YAAYA,CAAW,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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@import 'mixins/shadow-dom/component';\n\n$CardList__Title__Height: 1.5rem;\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  align-items: flex-start;\n  margin: 0.5rem;\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  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        ghost\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      ></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          ghost\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   * 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"],"version":3}

package/components/ix-card-title.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxCardTitle extends Components.IxCardTitle, HTMLElement {}
+export const IxCardTitle: {
+    prototype: IxCardTitle;
+    new (): IxCardTitle;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ix-card-title.js

@@ -0,0 +1,9 @@
+import { C as CardHeader, d as defineCustomElement$1 } from './p-G0biE2Kx.js';
+
+const IxCardTitle = CardHeader;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxCardTitle, defineCustomElement };
+//# sourceMappingURL=ix-card-title.js.map
+
+//# sourceMappingURL=ix-card-title.js.map

package/components/ix-card-title.js.map

@@ -0,0 +1 @@
+{"file":"ix-card-title.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/components/ix-card.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface IxCard extends Components.IxCard, HTMLElement {}
+export const IxCard: {
+    prototype: IxCard;
+    new (): IxCard;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ix-card.js

@@ -0,0 +1,9 @@
+import { C as Card, d as defineCustomElement$1 } from './p-tH4n038Z.js';
+
+const IxCard = Card;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxCard, defineCustomElement };
+//# sourceMappingURL=ix-card.js.map
+
+//# sourceMappingURL=ix-card.js.map

package/components/ix-card.js.map

@@ -0,0 +1 @@
+{"file":"ix-card.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}