@siemens/ix 2.0.0-beta.0 → 2.0.0

package/dist/collection/components/col/col.css

@@ -0,0 +1,66 @@
+/*
+ * 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 {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+  position: relative;
+  flex-basis: 0;
+  flex-grow: 1;
+  width: 100%;
+  max-width: 100%;
+  min-height: 1px;
+  padding: calc(var(--ix-layout-grid-gutter) * 0.5);
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
+}

package/dist/collection/components/col/col.js

@@ -0,0 +1,189 @@
+/*
+ * 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.
+ */
+import { forceUpdate, h, Host } from '@stencil/core';
+import { matchBreakpoint } from '../utils/breakpoints';
+/**
+ * @since 2.0.0
+ */
+export class Col {
+  constructor() {
+    this.size = undefined;
+    this.sizeSm = undefined;
+    this.sizeMd = undefined;
+    this.sizeLg = undefined;
+  }
+  onResize() {
+    forceUpdate(this);
+  }
+  getSize(breakpoint) {
+    if (breakpoint === '') {
+      return this.size;
+    }
+    if (breakpoint === 'sm') {
+      return this.sizeSm;
+    }
+    if (breakpoint === 'md') {
+      return this.sizeMd;
+    }
+    if (breakpoint === 'lg') {
+      return this.sizeLg;
+    }
+  }
+  getColumnSize() {
+    let size;
+    Col.Breakpoints.forEach((breakpoint) => {
+      const isMediaQueryActive = breakpoint !== '' ? matchBreakpoint(breakpoint) : true;
+      if (!isMediaQueryActive) {
+        return;
+      }
+      const currentSize = this.getSize(breakpoint);
+      if (currentSize) {
+        size = currentSize;
+      }
+    });
+    return size;
+  }
+  getColumnSizeStyling() {
+    const size = this.getColumnSize();
+    if (!size) {
+      return;
+    }
+    if (size === 'auto') {
+      return {
+        flex: '0 0 auto',
+        width: 'auto',
+        'max-width': 'auto',
+      };
+    }
+    const colSize = `calc(calc(${size} / var(--ix-layout-grid-columns)) * 100%)`;
+    return {
+      flex: `0 0 ${colSize}`,
+      width: `${colSize}`,
+      'max-width': `${colSize}`,
+    };
+  }
+  render() {
+    return (h(Host, { style: Object.assign({}, this.getColumnSizeStyling()) }, h("slot", null)));
+  }
+  static get is() { return "ix-col"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["col.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["col.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ColumnSize",
+          "resolved": "\"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"auto\"",
+          "references": {
+            "ColumnSize": {
+              "location": "local",
+              "path": "/__w/ix/ix/packages/core/src/components/col/col.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Size of the column"
+        },
+        "attribute": "size",
+        "reflect": false
+      },
+      "sizeSm": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ColumnSize",
+          "resolved": "\"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"auto\"",
+          "references": {
+            "ColumnSize": {
+              "location": "local",
+              "path": "/__w/ix/ix/packages/core/src/components/col/col.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Size of the column for sm screens"
+        },
+        "attribute": "size-sm",
+        "reflect": false
+      },
+      "sizeMd": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ColumnSize",
+          "resolved": "\"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"auto\"",
+          "references": {
+            "ColumnSize": {
+              "location": "local",
+              "path": "/__w/ix/ix/packages/core/src/components/col/col.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Size of the column for md screens"
+        },
+        "attribute": "size-md",
+        "reflect": false
+      },
+      "sizeLg": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ColumnSize",
+          "resolved": "\"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\" | \"auto\"",
+          "references": {
+            "ColumnSize": {
+              "location": "local",
+              "path": "/__w/ix/ix/packages/core/src/components/col/col.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Size of the column for lg screens"
+        },
+        "attribute": "size-lg",
+        "reflect": false
+      }
+    };
+  }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "onResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}
+Col.Breakpoints = ['', 'sm', 'md', 'lg'];
+//# sourceMappingURL=col.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"col.js","sourceRoot":"","sources":["../../../src/components/col/col.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC9E,OAAO,EAAc,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAmBnE;;GAEG;AAMH,MAAM,OAAO,GAAG;;;;;;;EAwBd,QAAQ;IACN,WAAW,CAAC,IAAI,CAAC,CAAC;EACpB,CAAC;EAEO,OAAO,CAAC,UAA0B;IACxC,IAAI,UAAU,KAAK,EAAE,EAAE;MACrB,OAAO,IAAI,CAAC,IAAI,CAAC;KAClB;IAED,IAAI,UAAU,KAAK,IAAI,EAAE;MACvB,OAAO,IAAI,CAAC,MAAM,CAAC;KACpB;IAED,IAAI,UAAU,KAAK,IAAI,EAAE;MACvB,OAAO,IAAI,CAAC,MAAM,CAAC;KACpB;IAED,IAAI,UAAU,KAAK,IAAI,EAAE;MACvB,OAAO,IAAI,CAAC,MAAM,CAAC;KACpB;EACH,CAAC;EAEO,aAAa;IACnB,IAAI,IAAgB,CAAC;IACrB,GAAG,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,UAAU,EAAE,EAAE;MACrC,MAAM,kBAAkB,GACtB,UAAU,KAAK,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;MAEzD,IAAI,CAAC,kBAAkB,EAAE;QACvB,OAAO;OACR;MAED,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;MAE7C,IAAI,WAAW,EAAE;QACf,IAAI,GAAG,WAAW,CAAC;OACpB;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,IAAI,CAAC;EACd,CAAC;EAEO,oBAAoB;IAC1B,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;IAElC,IAAI,CAAC,IAAI,EAAE;MACT,OAAO;KACR;IAED,IAAI,IAAI,KAAK,MAAM,EAAE;MACnB,OAAO;QACL,IAAI,EAAE,UAAU;QAChB,KAAK,EAAE,MAAM;QACb,WAAW,EAAE,MAAM;OACpB,CAAC;KACH;IAED,MAAM,OAAO,GAAG,aAAa,IAAI,2CAA2C,CAAC;IAE7E,OAAO;MACL,IAAI,EAAE,OAAO,OAAO,EAAE;MACtB,KAAK,EAAE,GAAG,OAAO,EAAE;MACnB,WAAW,EAAE,GAAG,OAAO,EAAE;KAC1B,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,oBACA,IAAI,CAAC,oBAAoB,EAAE;MAGhC,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAnGM,eAAW,GAAqB,CAAC,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC","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, forceUpdate, h, Host, Listen, Prop } from '@stencil/core';\nimport { Breakpoint, matchBreakpoint } from '../utils/breakpoints';\n\ntype GridBreakpoint = Breakpoint | '';\n\nexport type ColumnSize =\n  | '1'\n  | '2'\n  | '3'\n  | '4'\n  | '5'\n  | '6'\n  | '7'\n  | '8'\n  | '9'\n  | '10'\n  | '11'\n  | '12'\n  | 'auto';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-col',\n  styleUrl: 'col.scss',\n  shadow: true,\n})\nexport class Col {\n  static Breakpoints: GridBreakpoint[] = ['', 'sm', 'md', 'lg'];\n\n  /**\n   * Size of the column\n   */\n  @Prop() size?: ColumnSize;\n\n  /**\n   * Size of the column for sm screens\n   */\n  @Prop() sizeSm?: ColumnSize;\n\n  /**\n   * Size of the column for md screens\n   */\n  @Prop() sizeMd?: ColumnSize;\n\n  /**\n   * Size of the column for lg screens\n   */\n  @Prop() sizeLg?: ColumnSize;\n\n  @Listen('resize', { target: 'window' })\n  onResize() {\n    forceUpdate(this);\n  }\n\n  private getSize(breakpoint: GridBreakpoint) {\n    if (breakpoint === '') {\n      return this.size;\n    }\n\n    if (breakpoint === 'sm') {\n      return this.sizeSm;\n    }\n\n    if (breakpoint === 'md') {\n      return this.sizeMd;\n    }\n\n    if (breakpoint === 'lg') {\n      return this.sizeLg;\n    }\n  }\n\n  private getColumnSize() {\n    let size: ColumnSize;\n    Col.Breakpoints.forEach((breakpoint) => {\n      const isMediaQueryActive =\n        breakpoint !== '' ? matchBreakpoint(breakpoint) : true;\n\n      if (!isMediaQueryActive) {\n        return;\n      }\n\n      const currentSize = this.getSize(breakpoint);\n\n      if (currentSize) {\n        size = currentSize;\n      }\n    });\n\n    return size;\n  }\n\n  private getColumnSizeStyling() {\n    const size = this.getColumnSize();\n\n    if (!size) {\n      return;\n    }\n\n    if (size === 'auto') {\n      return {\n        flex: '0 0 auto',\n        width: 'auto',\n        'max-width': 'auto',\n      };\n    }\n\n    const colSize = `calc(calc(${size} / var(--ix-layout-grid-columns)) * 100%)`;\n\n    return {\n      flex: `0 0 ${colSize}`,\n      width: `${colSize}`,\n      'max-width': `${colSize}`,\n    };\n  }\n\n  render() {\n    return (\n      <Host\n        style={{\n          ...this.getColumnSizeStyling(),\n        }}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,75 @@
+/*
+ * 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 {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  padding: 1.5rem 0rem 0.25rem 2rem;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
+}
+:host .content {
+  flex-grow: 1;
+  overflow: auto;
+  padding-right: 1.5rem;
+}
+:host .content-header.slotted {
+  margin-bottom: 1rem;
+  padding-right: 1.5rem;
+}

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

@@ -0,0 +1,46 @@
+/*
+ * 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.
+ */
+import { h, Host } from '@stencil/core';
+import { hasSlottedElements } from '../utils/shadow-dom';
+/** @internal */
+export class Content {
+  constructor() {
+    this.isContentHeaderSlotted = false;
+  }
+  get contentHeaderSlot() {
+    return this.hostElement.shadowRoot.querySelector('.content-header slot');
+  }
+  render() {
+    return (h(Host, null, h("div", { class: {
+        'content-header': true,
+        slotted: this.isContentHeaderSlotted,
+      } }, h("slot", { name: "header", onSlotchange: () => {
+        this.isContentHeaderSlotted = hasSlottedElements(this.contentHeaderSlot);
+      } })), h("div", { class: "content" }, h("slot", null))));
+  }
+  static get is() { return "ix-content"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["content.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["content.css"]
+    };
+  }
+  static get states() {
+    return {
+      "isContentHeaderSlotted": {}
+    };
+  }
+  static get elementRef() { return "hostElement"; }
+}
+//# sourceMappingURL=content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"content.js","sourceRoot":"","sources":["../../../src/components/content/content.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAEzD,gBAAgB;AAMhB,MAAM,OAAO,OAAO;;kCAGgB,KAAK;;EAEvC,IAAI,iBAAiB;IACnB,OAAO,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CAC9C,sBAAsB,CACJ,CAAC;EACvB,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WACE,KAAK,EAAE;UACL,gBAAgB,EAAE,IAAI;UACtB,OAAO,EAAE,IAAI,CAAC,sBAAsB;SACrC;QAED,YACE,IAAI,EAAC,QAAQ,EACb,YAAY,EAAE,GAAG,EAAE;YACjB,IAAI,CAAC,sBAAsB,GAAG,kBAAkB,CAC9C,IAAI,CAAC,iBAAiB,CACvB,CAAC;UACJ,CAAC,GACK,CACJ;MACN,WAAK,KAAK,EAAC,SAAS;QAClB,eAAa,CACT,CACD,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, Element, h, Host, State } from '@stencil/core';\nimport { hasSlottedElements } from '../utils/shadow-dom';\n\n/** @internal */\n@Component({\n  tag: 'ix-content',\n  styleUrl: 'content.scss',\n  shadow: true,\n})\nexport class Content {\n  @Element() hostElement!: HTMLIxContentElement;\n\n  @State() isContentHeaderSlotted = false;\n\n  get contentHeaderSlot() {\n    return this.hostElement.shadowRoot.querySelector(\n      '.content-header slot'\n    ) as HTMLSlotElement;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'content-header': true,\n            slotted: this.isContentHeaderSlotted,\n          }}\n        >\n          <slot\n            name=\"header\"\n            onSlotchange={() => {\n              this.isContentHeaderSlotted = hasSlottedElements(\n                this.contentHeaderSlot\n              );\n            }}\n          ></slot>\n        </div>\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -15,7 +15,7 @@ export class ContentHeader {
     this.hasBackButton = false;
   }
   render() {
-    return (h(Host, null, this.hasBackButton ? (h("ix-icon-button", { class: 'backButton', variant: "primary", icon: "arrow-left", ghost: true, onClick: () => this.backButtonClick.emit() })) : null, h("div", { class: "titleGroup" }, h("ix-typography", { variant: this.variant === 'secondary' ? 'large-single' : 'h2' }, this.headerTitle), this.headerSubtitle !== undefined ? (h("ix-typography", { variant: 'caption', color: 'soft', class: "subtitle" }, this.headerSubtitle)) : null), h("div", { class: "buttons" }, h("slot", null))));
+    return (h(Host, null, this.hasBackButton ? (h("ix-icon-button", { class: 'backButton', variant: "primary", icon: 'arrow-left', ghost: true, onClick: () => this.backButtonClick.emit() })) : null, h("div", { class: "titleGroup" }, h("ix-typography", { variant: this.variant === 'secondary' ? 'large-single' : 'h2' }, this.headerTitle), this.headerSubtitle !== undefined ? (h("ix-typography", { variant: 'caption', color: 'soft', class: "subtitle" }, this.headerSubtitle)) : null), h("div", { class: "buttons" }, h("slot", null))));
   }
   static get is() { return "ix-content-header"; }
   static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"content-header.js","sourceRoot":"","sources":["../../../src/components/content-header/content-header.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAS9E,MAAM,OAAO,aAAa;;mBAIgB,SAAS;;0BAUJ,SAAS;yBAKrB,KAAK;;EAOtC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACF,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CACpB,sBACE,KAAK,EAAE,YAAY,EACnB,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,YAAY,EACjB,KAAK,EAAE,IAAI,EACX,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,GAC1B,CACnB,CAAC,CAAC,CAAC,IAAI;MAER,WAAK,KAAK,EAAC,YAAY;QACrB,qBACE,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,IAE5D,IAAI,CAAC,WAAW,CACH;QACf,IAAI,CAAC,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,CACnC,qBAAe,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAC,UAAU,IAC/D,IAAI,CAAC,cAAc,CACN,CACjB,CAAC,CAAC,CAAC,IAAI,CACJ;MACN,WAAK,KAAK,EAAC,SAAS;QAClB,eAAQ,CACJ,CACD,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, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type ContentHeaderVariant = 'primary' | 'secondary';\n\n@Component({\n  tag: 'ix-content-header',\n  styleUrl: 'content-header.scss',\n  shadow: true,\n})\nexport class ContentHeader {\n  /**\n   * Variant of content header\n   */\n  @Prop() variant: ContentHeaderVariant = 'primary';\n\n  /**\n   * Title of Header\n   */\n  @Prop() headerTitle: string;\n\n  /**\n   * Subtitle of Header\n   */\n  @Prop() headerSubtitle: string | undefined = undefined;\n\n  /**\n   * Display a back button\n   */\n  @Prop() hasBackButton: boolean = false;\n\n  /**\n   * Triggered when back button is clicked\n   */\n  @Event() backButtonClick: EventEmitter<void>;\n\n  render() {\n    return (\n      <Host>\n        {this.hasBackButton ? (\n          <ix-icon-button\n            class={'backButton'}\n            variant=\"primary\"\n            icon=\"arrow-left\"\n            ghost={true}\n            onClick={() => this.backButtonClick.emit()}\n          ></ix-icon-button>\n        ) : null}\n\n        <div class=\"titleGroup\">\n          <ix-typography\n            variant={this.variant === 'secondary' ? 'large-single' : 'h2'}\n          >\n            {this.headerTitle}\n          </ix-typography>\n          {this.headerSubtitle !== undefined ? (\n            <ix-typography variant={'caption'} color={'soft'} class=\"subtitle\">\n              {this.headerSubtitle}\n            </ix-typography>\n          ) : null}\n        </div>\n        <div class=\"buttons\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"content-header.js","sourceRoot":"","sources":["../../../src/components/content-header/content-header.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAS9E,MAAM,OAAO,aAAa;;mBAIgB,SAAS;;0BAUJ,SAAS;yBAKrB,KAAK;;EAOtC,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACF,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CACpB,sBACE,KAAK,EAAE,YAAY,EACnB,OAAO,EAAC,SAAS,EACjB,IAAI,EAAE,YAAY,EAClB,KAAK,EAAE,IAAI,EACX,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,GAC1B,CACnB,CAAC,CAAC,CAAC,IAAI;MAER,WAAK,KAAK,EAAC,YAAY;QACrB,qBACE,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,IAE5D,IAAI,CAAC,WAAW,CACH;QACf,IAAI,CAAC,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,CACnC,qBAAe,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAC,UAAU,IAC/D,IAAI,CAAC,cAAc,CACN,CACjB,CAAC,CAAC,CAAC,IAAI,CACJ;MACN,WAAK,KAAK,EAAC,SAAS;QAClB,eAAQ,CACJ,CACD,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, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type ContentHeaderVariant = 'primary' | 'secondary';\n\n@Component({\n  tag: 'ix-content-header',\n  styleUrl: 'content-header.scss',\n  shadow: true,\n})\nexport class ContentHeader {\n  /**\n   * Variant of content header\n   */\n  @Prop() variant: ContentHeaderVariant = 'primary';\n\n  /**\n   * Title of Header\n   */\n  @Prop() headerTitle: string;\n\n  /**\n   * Subtitle of Header\n   */\n  @Prop() headerSubtitle: string | undefined = undefined;\n\n  /**\n   * Display a back button\n   */\n  @Prop() hasBackButton: boolean = false;\n\n  /**\n   * Triggered when back button is clicked\n   */\n  @Event() backButtonClick: EventEmitter<void>;\n\n  render() {\n    return (\n      <Host>\n        {this.hasBackButton ? (\n          <ix-icon-button\n            class={'backButton'}\n            variant=\"primary\"\n            icon={'arrow-left'}\n            ghost={true}\n            onClick={() => this.backButtonClick.emit()}\n          ></ix-icon-button>\n        ) : null}\n\n        <div class=\"titleGroup\">\n          <ix-typography\n            variant={this.variant === 'secondary' ? 'large-single' : 'h2'}\n          >\n            {this.headerTitle}\n          </ix-typography>\n          {this.headerSubtitle !== undefined ? (\n            <ix-typography variant={'caption'} color={'soft'} class=\"subtitle\">\n              {this.headerSubtitle}\n            </ix-typography>\n          ) : null}\n        </div>\n        <div class=\"buttons\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/css-grid/builder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"builder.js","sourceRoot":"","sources":["../../../src/components/css-grid/builder.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,UAAU,eAAe,CAAC,aAAyB;EACvD,IAAI,cAAc,GAAG,EAAE,CAAC;EAExB,aAAa,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;IAC5B,cAAc,IAAI,GAAG,CAAC;IACtB,cAAc,GAAG,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE;MACrC,OAAO,GAAG,EAAE,IAAI,EAAE,EAAE,CAAC;IACvB,CAAC,EAAE,cAAc,CAAC,CAAC;IACnB,cAAc,IAAI,KAAK,CAAC;EAC1B,CAAC,CAAC,CAAC;EAEH,OAAO,cAAc,CAAC;AACxB,CAAC","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 */\nexport function templateBuilder(inputTemplate: string[][]) {\n  let templateString = '';\n\n  inputTemplate.forEach((row) => {\n    templateString += '\"';\n    templateString = row.reduce((pV, cV) => {\n      return `${pV} ${cV}`;\n    }, templateString);\n    templateString += '\"\\n';\n  });\n\n  return templateString;\n}\n"]}

package/dist/collection/components/css-grid/css-grid-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-grid-item.js","sourceRoot":"","sources":["../../../src/components/css-grid/css-grid-item.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;GAEG;AAMH,MAAM,OAAO,WAAW;;;;EAMtB,MAAM;IACJ,MAAM,KAAK,GAAG,EAAE,CAAC;IACjB,KAAK,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;IAEnC,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,KAAK;MAChB,eAAa,CACR,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';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'ix-css-grid-item',\n  styleUrl: 'css-grid-item.scss',\n  shadow: true,\n})\nexport class CssGridItem {\n  /**\n   * Grid item name\n   */\n  @Prop() itemName: string;\n\n  render() {\n    const style = {};\n    style['grid-area'] = this.itemName;\n\n    return (\n      <Host style={style}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/css-grid/css-grid.js

@@ -0,0 +1,123 @@
+/*
+ * 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.
+ */
+import { h, Host } from '@stencil/core';
+import { templateBuilder } from './builder';
+const smQuery = 'only screen and (max-width: 576px)';
+const mdQuery = 'only screen and (max-width: 768px)';
+const lgQuery = 'only screen and (max-width: 992px)';
+const mediaQueryCollection = [
+  { name: 'sm', query: smQuery },
+  { name: 'md', query: mdQuery },
+  { name: 'lg', query: lgQuery },
+];
+/**
+ * @internal
+ */
+export class CssGrid {
+  constructor() {
+    this.disposeMediaQueryListener = [];
+    this.mediaQueries = [];
+    this.templates = undefined;
+    this.currentTemplate = undefined;
+  }
+  componentWillRender() {
+    this.mediaQueries = mediaQueryCollection.map((query) => {
+      const mediaQuery = window.matchMedia(query.query);
+      const callback = () => {
+        this.applyTemplate();
+      };
+      this.disposeMediaQueryListener.push(callback);
+      mediaQuery.addEventListener('change', callback);
+      return Object.assign(Object.assign({}, query), { mediaQuery });
+    });
+    this.applyTemplate();
+  }
+  disconnectedCallback() {
+    this.mediaQueries.forEach((mq, index) => {
+      mq.mediaQuery.removeEventListener('change', this.disposeMediaQueryListener[index]);
+    });
+  }
+  findNextTemplate(type) {
+    const typeIndex = this.mediaQueries.findIndex((mq) => mq.name === type);
+    const nextTemplate = this.templates[this.mediaQueries[typeIndex + 1].name];
+    if (!nextTemplate) {
+      return this.findNextTemplate(this.mediaQueries[typeIndex + 1].name);
+    }
+    return nextTemplate;
+  }
+  applyTemplate() {
+    let active = this.mediaQueries.find((mq) => mq.mediaQuery.matches);
+    if (!active) {
+      active = this.mediaQueries[this.mediaQueries.length - 1];
+    }
+    const template = this.templates[active.name];
+    if (template) {
+      this.currentTemplate = template;
+    }
+    else {
+      this.currentTemplate = this.findNextTemplate(active.name);
+    }
+  }
+  render() {
+    var _a;
+    const style = {};
+    if (((_a = this.currentTemplate) === null || _a === void 0 ? void 0 : _a.length) !== 0) {
+      style['grid-template-areas'] = templateBuilder(this.currentTemplate);
+    }
+    return (h(Host, { style: style }, h("slot", null)));
+  }
+  static get is() { return "ix-css-grid"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["css-grid.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["css-grid.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "templates": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Partial<Record<CssGridTemplateType, string[][]>>",
+          "resolved": "{ sm?: string[][]; md?: string[][]; lg?: string[][]; }",
+          "references": {
+            "Partial": {
+              "location": "global"
+            },
+            "Record": {
+              "location": "global"
+            },
+            "CssGridTemplateType": {
+              "location": "local",
+              "path": "/__w/ix/ix/packages/core/src/components/css-grid/css-grid.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define css grid template"
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "currentTemplate": {}
+    };
+  }
+}
+//# sourceMappingURL=css-grid.js.map

package/dist/collection/components/css-grid/css-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-grid.js","sourceRoot":"","sources":["../../../src/components/css-grid/css-grid.tsx"],"names":[],"mappings":"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","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop, State } from '@stencil/core';\nimport { templateBuilder } from './builder';\n\nconst smQuery = 'only screen and (max-width: 576px)';\nconst mdQuery = 'only screen and (max-width: 768px)';\nconst lgQuery = 'only screen and (max-width: 992px)';\n\nexport type CssGridTemplateType = 'sm' | 'md' | 'lg';\n\nconst mediaQueryCollection: Array<{\n  name: CssGridTemplateType;\n  query: string;\n}> = [\n  { name: 'sm', query: smQuery },\n  { name: 'md', query: mdQuery },\n  { name: 'lg', query: lgQuery },\n];\n\n/**\n * @internal\n */\n@Component({\n  tag: 'ix-css-grid',\n  styleUrl: 'css-grid.scss',\n  shadow: true,\n})\nexport class CssGrid {\n  /**\n   * Define css grid template\n   */\n  @Prop() templates: Partial<Record<CssGridTemplateType, string[][]>>;\n\n  @State() currentTemplate: string[][];\n\n  private disposeMediaQueryListener: ((event: MediaQueryListEvent) => void)[] =\n    [];\n  private mediaQueries: {\n    mediaQuery: MediaQueryList;\n    name: CssGridTemplateType;\n    query: string;\n  }[] = [];\n\n  componentWillRender() {\n    this.mediaQueries = mediaQueryCollection.map((query) => {\n      const mediaQuery = window.matchMedia(query.query);\n\n      const callback = () => {\n        this.applyTemplate();\n      };\n      this.disposeMediaQueryListener.push(callback);\n      mediaQuery.addEventListener('change', callback);\n\n      return {\n        ...query,\n        mediaQuery,\n      };\n    });\n\n    this.applyTemplate();\n  }\n\n  disconnectedCallback() {\n    this.mediaQueries.forEach((mq, index) => {\n      mq.mediaQuery.removeEventListener(\n        'change',\n        this.disposeMediaQueryListener[index]\n      );\n    });\n  }\n\n  private findNextTemplate(type: CssGridTemplateType) {\n    const typeIndex = this.mediaQueries.findIndex((mq) => mq.name === type);\n    const nextTemplate = this.templates[this.mediaQueries[typeIndex + 1].name];\n    if (!nextTemplate) {\n      return this.findNextTemplate(this.mediaQueries[typeIndex + 1].name);\n    }\n    return nextTemplate;\n  }\n\n  private applyTemplate() {\n    let active = this.mediaQueries.find((mq) => mq.mediaQuery.matches);\n\n    if (!active) {\n      active = this.mediaQueries[this.mediaQueries.length - 1];\n    }\n\n    const template = this.templates[active.name];\n\n    if (template) {\n      this.currentTemplate = template;\n    } else {\n      this.currentTemplate = this.findNextTemplate(active.name);\n    }\n  }\n\n  render() {\n    const style = {};\n    if (this.currentTemplate?.length !== 0) {\n      style['grid-template-areas'] = templateBuilder(this.currentTemplate);\n    }\n    return (\n      <Host style={style}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/date-picker/date-picker.css

@@ -26,11 +26,52 @@
  * 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 {
+  /* width */
+  /* Track */
+  /* Handle */
+  /* Handle on hover */
+  display: block;
+  position: relative;
+  width: 22rem;
+}
 :host *,
 :host *::after,
 :host *::before {
   box-sizing: border-box;
 }
+:host ::-webkit-scrollbar-button {
+  display: none;
+}
+:host ::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+:host ::-webkit-scrollbar-track {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-track--background);
+}
+:host ::-webkit-scrollbar-track:hover {
+  background: var(--theme-scrollbar-track--background--hover);
+}
+:host ::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: var(--theme-scrollbar-thumb--background);
+}
+:host ::-webkit-scrollbar-thumb:hover {
+  background: var(--theme-scrollbar-thumb--background--hover);
+}
+:host ::-webkit-scrollbar-corner {
+  display: none;
+}
 :host .header {
   display: flex;
   align-items: center;

package/dist/collection/components/date-picker/date-picker.js

@@ -283,16 +283,16 @@ export class DatePicker {
     };
   }
   render() {
-    return (h(Host, null, h("ix-date-time-card", { individual: this.individual, corners: this.corners }, h("div", { class: "header", slot: "header" }, h("ix-icon-button", { onClick: () => this.changeMonth(-1), ghost: true, icon: "chevron-left", variant: "primary", class: "arrows" }), h("div", { class: "selector" }, h("ix-button", { ghost: true, ref: (ref) => (this.dropdownButtonRef = ref) }, h("span", { class: "fontSize capitalize" }, this.monthNames[this.monthValue - 1], " ", this.yearValue)), h("ix-dropdown", { class: "dropdown", trigger: this.dropdownButtonRef, placement: "bottom-start" }, h("div", { class: "wrapper" }, h("div", { class: "overflow", onScroll: () => this.infiniteScrollYears(), ref: (ref) => (this.yearContainerRef = ref) }, this.years.map((year) => (h("div", { key: year, class: { arrowYear: true }, onClick: (event) => this.selectTempYear(event, year) }, h("ix-icon", { class: {
+    return (h(Host, null, h("ix-date-time-card", { individual: this.individual, corners: this.corners }, h("div", { class: "header", slot: "header" }, h("ix-icon-button", { onClick: () => this.changeMonth(-1), ghost: true, icon: 'chevron-left', variant: "primary", class: "arrows" }), h("div", { class: "selector" }, h("ix-button", { ghost: true, ref: (ref) => (this.dropdownButtonRef = ref) }, h("span", { class: "fontSize capitalize" }, this.monthNames[this.monthValue - 1], " ", this.yearValue)), h("ix-dropdown", { class: "dropdown", trigger: this.dropdownButtonRef, placement: "bottom-start" }, h("div", { class: "wrapper" }, h("div", { class: "overflow", onScroll: () => this.infiniteScrollYears(), ref: (ref) => (this.yearContainerRef = ref) }, this.years.map((year) => (h("div", { key: year, class: { arrowYear: true }, onClick: (event) => this.selectTempYear(event, year) }, h("ix-icon", { class: {
         hidden: this.tempYear !== year,
         arrowPosition: true,
-      }, name: "chevron-right", size: "12" }), h("div", { style: { 'min-width': 'max-content' } }, `${year}`))))), h("div", { class: "overflow" }, this.monthNames.map((month, index) => (h("div", { key: month, class: {
+      }, name: 'chevron-right', size: "12" }), h("div", { style: { 'min-width': 'max-content' } }, `${year}`))))), h("div", { class: "overflow" }, this.monthNames.map((month, index) => (h("div", { key: month, class: {
         arrowYear: true,
         selected: this.tempMonth - 1 === index,
       }, onClick: () => this.selectMonth((index + 1)) }, h("ix-icon", { class: {
         hidden: this.tempMonth - 1 !== index,
         checkPosition: true,
-      }, name: "single-check", size: "16" }), h("div", null, h("span", { class: { capitalize: true, monthMargin: true } }, `${month} ${this.tempYear}`))))))))), h("ix-icon-button", { onClick: () => this.changeMonth(1), ghost: true, icon: "chevron-right", variant: "primary", class: "arrows" })), h("div", { class: "grid" }, h("div", { class: "calendar-item week-day" }), this.dayNames.map((name) => (h("div", { key: name, class: "calendar-item week-day" }, name.slice(0, 3)))), this.calendar.map((week) => {
+      }, name: 'single-check', size: "16" }), h("div", null, h("span", { class: { capitalize: true, monthMargin: true } }, `${month} ${this.tempYear}`))))))))), h("ix-icon-button", { onClick: () => this.changeMonth(1), ghost: true, icon: 'chevron-right', variant: "primary", class: "arrows" })), h("div", { class: "grid" }, h("div", { class: "calendar-item week-day" }), this.dayNames.map((name) => (h("div", { key: name, class: "calendar-item week-day" }, name.slice(0, 3)))), this.calendar.map((week) => {
       return (h(Fragment, null, h("div", { class: "calendar-item week-number" }, week[0]), week[1].map((day) => (h("div", { key: day, class: this.getDayClasses(day), onClick: () => this.selectDay(day) }, day)))));
     })), h("div", { class: { button: true, hidden: !this.individual || !this.range } }, h("ix-button", { onClick: () => this.onDone() }, this.textSelectDate)))));
   }
@@ -300,7 +300,7 @@ export class DatePicker {
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["date-picker.scss"]
+      "$": ["./date-picker.scss"]
     };
   }
   static get styleUrls() {