@siemens/ix 1.5.0 → 1.6.0

package/dist/collection/components/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AASjD,MAAM,OAAO,MAAM;;mBAIgB,SAAS;mBAKxB,KAAK;qBAOH,KAAK;iBAKT,KAAK;oBAKF,KAAK;oBAKY,KAAK;gBAKL,QAAQ;;EAE5C,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB;MAED,cACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,gBAAgB,CACrB,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,EAC5B,KAAK,EACL,KAAK,EACL,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,QAAQ,CACd;QAED,eAAa,CACN,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\nimport { getButtonClasses } from './base-button';\n\nexport type ButtonVariant = 'Primary' | 'Secondary';\n\n@Component({\n  tag: 'ix-button',\n  scoped: true,\n  styleUrl: './button.scss',\n})\nexport class Button {\n  /**\n   * Button varaint\n   */\n  @Prop() variant: ButtonVariant = 'Primary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Invisible button\n   *\n   * @deprecated use ghost property\n   */\n  @Prop() invisible = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Show button as selected. Should be used with outline or ghost\n   */\n  @Prop() selected = false;\n\n  /**\n   * Disable the button\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Type of the button\n   */\n  @Prop() type: 'button' | 'submit' = 'button';\n\n  render() {\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n      >\n        <button\n          type={this.type}\n          class={getButtonClasses(\n            this.variant,\n            this.outline,\n            this.ghost || this.invisible,\n            false,\n            false,\n            this.selected,\n            this.disabled\n          )}\n        >\n          <slot></slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AASjD,MAAM,OAAO,MAAM;;mBAIgB,SAAS;mBAKxB,KAAK;qBAOH,KAAK;iBAKT,KAAK;oBAKF,KAAK;oBAKY,KAAK;gBAKL,QAAQ;;EAE5C,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB;MAED,cACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,gBAAgB,CACrB,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,EAC5B,KAAK,EACL,KAAK,EACL,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,QAAQ,CACd;QAED,eAAa,CACN,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\nimport { getButtonClasses } from './base-button';\n\nexport type ButtonVariant = 'Primary' | 'Secondary';\n\n@Component({\n  tag: 'ix-button',\n  shadow: true,\n  styleUrl: './button.scss',\n})\nexport class Button {\n  /**\n   * Button variant\n   */\n  @Prop() variant: ButtonVariant = 'Primary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Invisible button\n   *\n   * @deprecated use ghost property\n   */\n  @Prop() invisible = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Show button as selected. Should be used with outline or ghost\n   */\n  @Prop() selected = false;\n\n  /**\n   * Disable the button\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Type of the button\n   */\n  @Prop() type: 'button' | 'submit' = 'button';\n\n  render() {\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n      >\n        <button\n          type={this.type}\n          class={getButtonClasses(\n            this.variant,\n            this.outline,\n            this.ghost || this.invisible,\n            false,\n            false,\n            this.selected,\n            this.disabled\n          )}\n        >\n          <slot></slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/card/card.css

@@ -0,0 +1,92 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+:host {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: flex-start;
+  overflow: hidden;
+  width: 20rem;
+  border: 1px solid var(--ix-card-border-color, var(--theme-color-soft-bdr));
+  border-radius: var(--theme-default-border-radius);
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host .card-content {
+  display: block;
+  position: relative;
+  flex-shrink: 0;
+  flex-grow: 1;
+  width: 100%;
+  padding: 1rem 1rem;
+  height: calc(100% - 2rem);
+  background-color: var(--ix-card-background, transparent);
+  border-top-left-radius: var(--theme-default-border-radius);
+  border-top-right-radius: var(--theme-default-border-radius);
+}
+:host .card-footer {
+  display: flex;
+  position: relative;
+  width: 100%;
+}
+
+:host(.card-insight) {
+  --ix-card-background: transparent;
+  --ix-card-border-color: var(--theme-color-soft-bdr);
+}
+
+:host(.card-notification) {
+  --ix-card-background: var(--theme-color-component-1);
+}
+
+:host(.card-alarm) {
+  --ix-card-background: var(--theme-color-alarm);
+  color: var(--theme-color-alarm--contrast);
+}
+
+:host(.card-critical) {
+  --ix-card-background: var(--theme-color-critical);
+  color: var(--theme-color-critical--contrast);
+}
+
+:host(.card-warning) {
+  --ix-card-background: var(--theme-color-warning);
+  color: var(--theme-color-warning--contrast);
+}
+
+:host(.card-success) {
+  --ix-card-background: var(--theme-color-success);
+  color: var(--theme-color-success--contrast);
+}
+
+:host(.card-info) {
+  --ix-card-background: var(--theme-color-info);
+  color: var(--theme-color-info--contrast);
+}
+
+:host(.card-neutral) {
+  --ix-card-background: var(--theme-color-neutral);
+  color: var(--theme-color-neutral--contrast);
+}
+
+:host(:not(.card-insight)) {
+  --ix-card-border-color: transparent;
+}

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

@@ -0,0 +1,53 @@
+import { h, Host } from '@stencil/core';
+/**
+ * @since 1.6.0
+ */
+export class Card {
+  constructor() {
+    this.variant = 'insight';
+  }
+  render() {
+    return (h(Host, { class: `card-${this.variant}` }, h("div", { class: "card-content" }, h("slot", null)), h("div", { class: "card-footer" }, h("slot", { name: "card-accordion" }))));
+  }
+  static get is() { return "ix-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["card.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["card.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "CardVariant",
+          "resolved": "\"alarm\" | \"critical\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"success\" | \"warning\"",
+          "references": {
+            "CardVariant": {
+              "location": "local",
+              "path": "/__w/ix/ix/packages/core/src/components/card/card.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Card variant"
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "'insight'"
+      }
+    };
+  }
+  static get elementRef() { return "hostElement"; }
+}
+//# sourceMappingURL=card.js.map

package/dist/collection/components/card/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card/card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAYlE;;GAEG;AAMH,MAAM,OAAO,IAAI;;mBAMgB,SAAS;;EAExC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,QAAQ,IAAI,CAAC,OAAO,EAAE;MACjC,WAAK,KAAK,EAAC,cAAc;QACvB,eAAa,CACT;MACN,WAAK,KAAK,EAAC,aAAa;QACtB,YAAM,IAAI,EAAC,gBAAgB,GAAQ,CAC/B,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nexport type CardVariant =\n  | 'insight'\n  | 'notification'\n  | 'alarm'\n  | 'critical'\n  | 'warning'\n  | 'info'\n  | 'neutral'\n  | 'success';\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card',\n  styleUrl: 'card.scss',\n  shadow: true,\n})\nexport class Card {\n  @Element() hostElement: HTMLIxCardElement;\n\n  /**\n   * Card variant\n   */\n  @Prop() variant: CardVariant = 'insight';\n\n  render() {\n    return (\n      <Host class={`card-${this.variant}`}>\n        <div class=\"card-content\">\n          <slot></slot>\n        </div>\n        <div class=\"card-footer\">\n          <slot name=\"card-accordion\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/card-accordion/card-accordion.css

@@ -0,0 +1,121 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+:host {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  width: 100%;
+  height: 2.5rem;
+  max-height: 2.5rem;
+  transition: var(--theme-default-time) ease-in-out;
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host .expand-action {
+  all: unset;
+  display: flex;
+  position: relative;
+  -webkit-appearance: button;
+     -moz-appearance: button;
+          appearance: button;
+  height: 2.5rem;
+  width: 100%;
+  background-color: var(--theme-color-component-1);
+  align-items: center;
+  justify-content: flex-start;
+}
+:host .expand-action:not(.disabled):not(:disabled).hover, :host .expand-action:not(.disabled):not(:disabled):hover {
+  background-color: var(--theme-ghost--background--hover);
+}
+:host .expand-action:not(.disabled):not(:disabled).active, :host .expand-action:not(.disabled):not(:disabled):active {
+  background-color: var(--theme-ghost--background--active);
+}
+:host .expand-action:not(.disabled):not(:disabled):focus-visible {
+  outline: 1px solid var(--theme-color-focus-bdr);
+  outline-offset: var(--theme-btn--focus--outline-offset);
+}
+:host .expand-action::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: var(--ix-card-background);
+  z-index: -1;
+}
+:host .expand-action:not(.show),
+:host .expand-action:not(.show)::before {
+  border-bottom-left-radius: var(--theme-default-border-radius);
+  border-bottom-right-radius: var(--theme-default-border-radius);
+}
+:host .expand-icon {
+  margin-left: 0.5rem;
+  transition: var(--theme-default-time) transform ease-in-out;
+}
+:host .expand-icon.show {
+  transform: rotate(90deg);
+}
+:host .expand-content {
+  display: flex;
+  flex-direction: column;
+  opacity: 0;
+  position: absolute;
+  top: 2.5rem;
+  transition: var(--theme-default-time) ease-in-out;
+  width: 100%;
+  height: 0;
+  max-height: 20rem;
+  background-color: var(--theme-color-component-1);
+}
+:host .expand-content.show {
+  height: 15rem;
+  opacity: 1;
+}
+:host .expand-content.show .expand-content-body {
+  display: none;
+  overflow: hidden;
+}
+:host .expand-content.show .expand-content-body {
+  display: block;
+  overflow: auto;
+}
+:host .expand-content-footer {
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 1rem;
+  margin-top: auto;
+  margin-bottom: 0px;
+  background-color: var(--theme-color-component-1);
+  border-bottom-left-radius: var(--theme-default-border-radius);
+  border-bottom-right-radius: var(--theme-default-border-radius);
+}
+
+:host(.show) {
+  height: calc(15rem + 2.5rem);
+  max-height: calc(15rem + 2.5rem);
+}

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

@@ -0,0 +1,94 @@
+import { h, Host, } from '@stencil/core';
+let accordionControlId = 0;
+const getAriaControlsId = (prefix = 'expand-content') => {
+  return [prefix, accordionControlId++].join('-');
+};
+/**
+ * @since 1.6.0
+ */
+export class CardAccordion {
+  constructor() {
+    this.expandContent = false;
+  }
+  get expandedContent() {
+    return this.hostElement.shadowRoot.querySelector('.expand-content');
+  }
+  onExpandActionClick(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.expandContent = !this.expandContent;
+    this.accordionExpand.emit({
+      expand: this.expandContent,
+      nativeEvent: event,
+    });
+    if (this.expandContent) {
+      this.scrollExpandedContentIntoView();
+    }
+  }
+  scrollExpandedContentIntoView() {
+    setTimeout(() => {
+      const rect = this.expandedContent.getBoundingClientRect();
+      if (rect.bottom > window.innerHeight) {
+        this.hostElement.shadowRoot
+          .querySelector('.expand-content')
+          .scrollIntoView(false);
+      }
+    }, 150);
+  }
+  render() {
+    return (h(Host, { slot: "card-accordion", class: {
+        show: this.expandContent,
+      } }, h("button", { tabIndex: 0, class: { 'expand-action': true, show: this.expandContent }, onClick: (event) => this.onExpandActionClick(event), role: "button", type: "button", "aria-expanded": this.expandContent, "aria-controls": getAriaControlsId() }, h("ix-icon", { name: "chevron-right-small", class: {
+        'expand-icon': true,
+        show: this.expandContent,
+      } })), h("div", { class: {
+        'expand-content': true,
+        show: this.expandContent,
+      } }, h("div", { class: 'expand-content-body' }, h("slot", null)), h("div", { class: 'expand-content-footer' }))));
+  }
+  static get is() { return "ix-card-accordion"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["card-accordion.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["card-accordion.css"]
+    };
+  }
+  static get states() {
+    return {
+      "expandContent": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "accordionExpand",
+        "name": "accordionExpand",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "CardAccordionExpandChangeEvent",
+          "resolved": "{ expand: boolean; nativeEvent: Event; }",
+          "references": {
+            "CardAccordionExpandChangeEvent": {
+              "location": "local",
+              "path": "/__w/ix/ix/packages/core/src/components/card-accordion/card-accordion.tsx"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "hostElement"; }
+}
+//# sourceMappingURL=card-accordion.js.map

package/dist/collection/components/card-accordion/card-accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-accordion.js","sourceRoot":"","sources":["../../../src/components/card-accordion/card-accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB,IAAI,kBAAkB,GAAG,CAAC,CAAC;AAC3B,MAAM,iBAAiB,GAAG,CAAC,SAAiB,gBAAgB,EAAE,EAAE;EAC9D,OAAO,CAAC,MAAM,EAAE,kBAAkB,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAClD,CAAC,CAAC;AAOF;;GAEG;AAMH,MAAM,OAAO,aAAa;;yBAQC,KAAK;;EAE9B,IAAI,eAAe;IACjB,OAAO,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;EACtE,CAAC;EAED,mBAAmB,CAAC,KAAY;IAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,KAAK,CAAC,eAAe,EAAE,CAAC;IACxB,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;IACzC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;MACxB,MAAM,EAAE,IAAI,CAAC,aAAa;MAC1B,WAAW,EAAE,KAAK;KACnB,CAAC,CAAC;IAEH,IAAI,IAAI,CAAC,aAAa,EAAE;MACtB,IAAI,CAAC,6BAA6B,EAAE,CAAC;KACtC;EACH,CAAC;EAEO,6BAA6B;IACnC,UAAU,CAAC,GAAG,EAAE;MACd,MAAM,IAAI,GAAG,IAAI,CAAC,eAAe,CAAC,qBAAqB,EAAE,CAAC;MAC1D,IAAI,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,WAAW,EAAE;QACpC,IAAI,CAAC,WAAW,CAAC,UAAU;WACxB,aAAa,CAAC,iBAAiB,CAAC;WAChC,cAAc,CAAC,KAAK,CAAC,CAAC;OAC1B;IACH,CAAC,EAAE,GAAG,CAAC,CAAC;EACV,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,IAAI,EAAC,gBAAgB,EACrB,KAAK,EAAE;QACL,IAAI,EAAE,IAAI,CAAC,aAAa;OACzB;MAED,cACE,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,aAAa,EAAE,EAC1D,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,EACnD,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,aAAa,mBAClB,iBAAiB,EAAE;QAElC,eACE,IAAI,EAAC,qBAAqB,EAC1B,KAAK,EAAE;YACL,aAAa,EAAE,IAAI;YACnB,IAAI,EAAE,IAAI,CAAC,aAAa;WACzB,GACQ,CACJ;MACT,WACE,KAAK,EAAE;UACL,gBAAgB,EAAE,IAAI;UACtB,IAAI,EAAE,IAAI,CAAC,aAAa;SACzB;QAED,WAAK,KAAK,EAAE,qBAAqB;UAC/B,eAAa,CACT;QACN,WAAK,KAAK,EAAE,uBAAuB,GAAQ,CACvC,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  State,\n} from '@stencil/core';\n\nlet accordionControlId = 0;\nconst getAriaControlsId = (prefix: string = 'expand-content') => {\n  return [prefix, accordionControlId++].join('-');\n};\n\nexport type CardAccordionExpandChangeEvent = {\n  expand: boolean;\n  nativeEvent: Event;\n};\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-accordion',\n  styleUrl: 'card-accordion.scss',\n  shadow: true,\n})\nexport class CardAccordion {\n  @Element() hostElement: HTMLIxCardAccordionElement;\n\n  /**\n   * @internal\n   */\n  @Event() accordionExpand: EventEmitter<CardAccordionExpandChangeEvent>;\n\n  @State() expandContent = false;\n\n  get expandedContent() {\n    return this.hostElement.shadowRoot.querySelector('.expand-content');\n  }\n\n  onExpandActionClick(event: Event) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.expandContent = !this.expandContent;\n    this.accordionExpand.emit({\n      expand: this.expandContent,\n      nativeEvent: event,\n    });\n\n    if (this.expandContent) {\n      this.scrollExpandedContentIntoView();\n    }\n  }\n\n  private scrollExpandedContentIntoView() {\n    setTimeout(() => {\n      const rect = this.expandedContent.getBoundingClientRect();\n      if (rect.bottom > window.innerHeight) {\n        this.hostElement.shadowRoot\n          .querySelector('.expand-content')\n          .scrollIntoView(false);\n      }\n    }, 150);\n  }\n\n  render() {\n    return (\n      <Host\n        slot=\"card-accordion\"\n        class={{\n          show: this.expandContent,\n        }}\n      >\n        <button\n          tabIndex={0}\n          class={{ 'expand-action': true, show: this.expandContent }}\n          onClick={(event) => this.onExpandActionClick(event)}\n          role=\"button\"\n          type=\"button\"\n          aria-expanded={this.expandContent}\n          aria-controls={getAriaControlsId()}\n        >\n          <ix-icon\n            name=\"chevron-right-small\"\n            class={{\n              'expand-icon': true,\n              show: this.expandContent,\n            }}\n          ></ix-icon>\n        </button>\n        <div\n          class={{\n            'expand-content': true,\n            show: this.expandContent,\n          }}\n        >\n          <div class={'expand-content-body'}>\n            <slot></slot>\n          </div>\n          <div class={'expand-content-footer'}></div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,29 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+:host {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+  height: 100%;
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}

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

@@ -0,0 +1,22 @@
+import { h, Host } from '@stencil/core';
+/**
+ * @since 1.6.0
+ */
+export class CardContent {
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  static get is() { return "ix-card-content"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["card-content.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["card-content.css"]
+    };
+  }
+}
+//# sourceMappingURL=card-content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card-content.js","sourceRoot":"","sources":["../../../src/components/card-content/card-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;GAEG;AAMH,MAAM,OAAO,WAAW;EACtB,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host } from '@stencil/core';\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-content',\n  styleUrl: 'card-content.scss',\n  shadow: true,\n})\nexport class CardContent {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,127 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+: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 .CardList_Title {
+  display: flex;
+  position: relative;
+  height: 1.5rem;
+  align-items: center;
+  width: 100%;
+  margin-bottom: 0.5rem;
+}
+: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;
+}
+: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;
+}
+:host .Show__All__Card__Icon {
+  display: flex;
+  position: absolute;
+  height: 4rem;
+  width: 4rem;
+  justify-content: center;
+  align-items: center;
+  transform: scale(2);
+}
+:host .Show__All__Card__Text {
+  margin-bottom: 0px;
+  margin-top: auto;
+}