@siemens/ix 2.4.1 → 2.6.0

package/dist/collection/components/kpi/kpi.css

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2024 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/kpi/kpi.js

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2024 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -33,13 +33,13 @@ export class Kpi {
         return tooltip;
     }
     render() {
-        return (h(Host, { key: 'd55ca486905d0294052dcb2ce5dca5e82a8c7566', title: this.getTooltipText(), tabindex: "1", class: {
+        return (h(Host, { key: 'a15aba9d140c89b2072909e2518c344da4c93a5d', title: this.getTooltipText(), tabindex: "1", class: {
                 stacked: this.orientation === 'vertical',
-            } }, h("div", { key: '99f29f60ed8257b14dd062d13813d2078ae5c8b0', class: {
+            } }, h("div", { key: '5116d6ee8bf39c59b5a75de087e819544e5d55d7', class: {
                 'kpi-container': true,
                 alarm: this.state === 'alarm',
                 warning: this.state === 'warning',
-            } }, h("span", { key: '49d9bbffb0b97df9dea86542347bb5defe46728e', class: "kpi-label" }, this.getStateIcon(), h("span", { key: '5947f6b00f33857cf93c1bb161734a6505b5cb3c', class: "kpi-label-text" }, this.label)), h("span", { key: '55a429623ac5bcf1e3884d5af539e03b8e51605a', class: "kpi-value-container" }, h("span", { key: '3569aac806ad75bb105290c55a14aa297d47662e', class: "kpi-value" }, this.value), this.unit ? h("span", { class: "kpi-unit" }, this.unit) : ''))));
+            } }, h("span", { key: '55034df17c563c3d11d8b04fbd09417dbc33aa39', class: "kpi-label" }, this.getStateIcon(), h("span", { key: '7034420124a2120271bbde7b36012de65aecb2e1', class: "kpi-label-text" }, this.label)), h("span", { key: '2985854b162f37b387f3f9d7a1a2ad07d42cd8bd', class: "kpi-value-container" }, h("span", { key: 'a3ef308e885ddd1c2b521a76afa2af8ea9a5562d', class: "kpi-value" }, this.value), this.unit ? h("span", { class: "kpi-unit" }, this.unit) : ''))));
     }
     static get is() { return "ix-kpi"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"kpi.js","sourceRoot":"","sources":["../../../src/components/kpi/kpi.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,GAAG;;;;;qBAmBmC,SAAS;2BAKT,YAAY;;IAErD,YAAY;QAClB,QAAQ,IAAI,CAAC,KAAK,EAAE,CAAC;YACnB,KAAK,OAAO;gBACV,OAAO,CACL,eACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAE,OAAO,EACb,IAAI,EAAC,IAAI,GACA,CACZ,CAAC;YAEJ,KAAK,SAAS;gBACZ,OAAO,CACL,eACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAE,SAAS,EACf,IAAI,EAAC,IAAI,GACA,CACZ,CAAC;YAEJ;gBACE,OAAO,EAAE,CAAC;QACd,CAAC;IACH,CAAC;IAEO,cAAc;QACpB,IAAI,OAAO,GAAG,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;QAE7C,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QAC5C,CAAC;QAED,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAC5B,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI,CAAC,WAAW,KAAK,UAAU;aACzC;YAED,4DACE,KAAK,EAAE;oBACL,eAAe,EAAE,IAAI;oBACrB,KAAK,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;oBAC7B,OAAO,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;iBAClC;gBAED,6DAAM,KAAK,EAAC,WAAW;oBACpB,IAAI,CAAC,YAAY,EAAE;oBACpB,6DAAM,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC3C;gBACP,6DAAM,KAAK,EAAC,qBAAqB;oBAC/B,6DAAM,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,KAAK,CAAQ;oBAC1C,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAM,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,IAAI,CAAQ,CAAC,CAAC,CAAC,EAAE,CACtD,CACH,CACD,CACR,CAAC;IACJ,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@Component({\n  tag: 'ix-kpi',\n  styleUrl: 'kpi.scss',\n  shadow: true,\n})\nexport class Kpi {\n  /**\n   *\n   */\n  @Prop() label: string;\n\n  /**\n   *\n   */\n  @Prop() value: string | number;\n\n  /**\n   *\n   */\n  @Prop() unit: string;\n\n  /**\n   *\n   */\n  @Prop() state: 'neutral' | 'warning' | 'alarm' = 'neutral';\n\n  /**\n   *\n   */\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  private getStateIcon() {\n    switch (this.state) {\n      case 'alarm':\n        return (\n          <ix-icon\n            color=\"kpi-display-icon--color\"\n            name={'alarm'}\n            size=\"16\"\n          ></ix-icon>\n        );\n\n      case 'warning':\n        return (\n          <ix-icon\n            color=\"kpi-display-icon--color\"\n            name={'warning'}\n            size=\"16\"\n          ></ix-icon>\n        );\n\n      default:\n        return '';\n    }\n  }\n\n  private getTooltipText() {\n    let tooltip = `${this.label}: ${this.value}`;\n\n    if (this.unit) {\n      tooltip = tooltip.concat(` ${this.unit}`);\n    }\n\n    return tooltip;\n  }\n\n  render() {\n    return (\n      <Host\n        title={this.getTooltipText()}\n        tabindex=\"1\"\n        class={{\n          stacked: this.orientation === 'vertical',\n        }}\n      >\n        <div\n          class={{\n            'kpi-container': true,\n            alarm: this.state === 'alarm',\n            warning: this.state === 'warning',\n          }}\n        >\n          <span class=\"kpi-label\">\n            {this.getStateIcon()}\n            <span class=\"kpi-label-text\">{this.label}</span>\n          </span>\n          <span class=\"kpi-value-container\">\n            <span class=\"kpi-value\">{this.value}</span>\n            {this.unit ? <span class=\"kpi-unit\">{this.unit}</span> : ''}\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"kpi.js","sourceRoot":"","sources":["../../../src/components/kpi/kpi.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,GAAG;;;;;qBAmBmC,SAAS;2BAKT,YAAY;;IAErD,YAAY;QAClB,QAAQ,IAAI,CAAC,KAAK,EAAE,CAAC;YACnB,KAAK,OAAO;gBACV,OAAO,CACL,eACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAE,OAAO,EACb,IAAI,EAAC,IAAI,GACA,CACZ,CAAC;YAEJ,KAAK,SAAS;gBACZ,OAAO,CACL,eACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAE,SAAS,EACf,IAAI,EAAC,IAAI,GACA,CACZ,CAAC;YAEJ;gBACE,OAAO,EAAE,CAAC;QACd,CAAC;IACH,CAAC;IAEO,cAAc;QACpB,IAAI,OAAO,GAAG,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;QAE7C,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QAC5C,CAAC;QAED,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAC5B,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI,CAAC,WAAW,KAAK,UAAU;aACzC;YAED,4DACE,KAAK,EAAE;oBACL,eAAe,EAAE,IAAI;oBACrB,KAAK,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;oBAC7B,OAAO,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;iBAClC;gBAED,6DAAM,KAAK,EAAC,WAAW;oBACpB,IAAI,CAAC,YAAY,EAAE;oBACpB,6DAAM,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC3C;gBACP,6DAAM,KAAK,EAAC,qBAAqB;oBAC/B,6DAAM,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,KAAK,CAAQ;oBAC1C,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAM,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,IAAI,CAAQ,CAAC,CAAC,CAAC,EAAE,CACtD,CACH,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 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@Component({\n  tag: 'ix-kpi',\n  styleUrl: 'kpi.scss',\n  shadow: true,\n})\nexport class Kpi {\n  /**\n   *\n   */\n  @Prop() label: string;\n\n  /**\n   *\n   */\n  @Prop() value: string | number;\n\n  /**\n   *\n   */\n  @Prop() unit: string;\n\n  /**\n   *\n   */\n  @Prop() state: 'neutral' | 'warning' | 'alarm' = 'neutral';\n\n  /**\n   *\n   */\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  private getStateIcon() {\n    switch (this.state) {\n      case 'alarm':\n        return (\n          <ix-icon\n            color=\"kpi-display-icon--color\"\n            name={'alarm'}\n            size=\"16\"\n          ></ix-icon>\n        );\n\n      case 'warning':\n        return (\n          <ix-icon\n            color=\"kpi-display-icon--color\"\n            name={'warning'}\n            size=\"16\"\n          ></ix-icon>\n        );\n\n      default:\n        return '';\n    }\n  }\n\n  private getTooltipText() {\n    let tooltip = `${this.label}: ${this.value}`;\n\n    if (this.unit) {\n      tooltip = tooltip.concat(` ${this.unit}`);\n    }\n\n    return tooltip;\n  }\n\n  render() {\n    return (\n      <Host\n        title={this.getTooltipText()}\n        tabindex=\"1\"\n        class={{\n          stacked: this.orientation === 'vertical',\n        }}\n      >\n        <div\n          class={{\n            'kpi-container': true,\n            alarm: this.state === 'alarm',\n            warning: this.state === 'warning',\n          }}\n        >\n          <span class=\"kpi-label\">\n            {this.getStateIcon()}\n            <span class=\"kpi-label-text\">{this.label}</span>\n          </span>\n          <span class=\"kpi-value-container\">\n            <span class=\"kpi-value\">{this.value}</span>\n            {this.unit ? <span class=\"kpi-unit\">{this.unit}</span> : ''}\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/layout-auto/layout-auto.css

@@ -0,0 +1,16 @@
+:host {
+  display: block;
+  position: relative;
+  margin: 0 0.75rem;
+  --ix-layout-grid-gap: 1.5rem;
+}
+:host .container {
+  display: flex;
+  align-items: stretch;
+  flex-wrap: wrap;
+  gap: var(--ix-layout-grid-gap);
+}
+:host ::slotted(*) {
+  flex-grow: 0;
+  flex-shrink: 0;
+}

package/dist/collection/components/layout-auto/layout-auto.js

@@ -0,0 +1,122 @@
+import { Host, h } from "@stencil/core";
+/**
+ * @since 2.6.0
+ */
+export class LayoutForm {
+    constructor() {
+        this.mediaQueryList = [];
+        this.observer = new MutationObserver(() => this.calculateGridTemplateColumns());
+        this.resizeObserver = new ResizeObserver(() => {
+            this.calculateGridTemplateColumns();
+        });
+        this.layout = [
+            { minWidth: '0', columns: 1 },
+            { minWidth: '48em', columns: 2 },
+        ];
+    }
+    connectedCallback() {
+        this.observer.observe(this.hostElement, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['data-colspan'],
+        });
+        this.resizeObserver.observe(this.hostElement);
+        this.calculateGridTemplateColumns();
+    }
+    componentWillLoad() {
+        this.calculateGridTemplateColumns();
+    }
+    disconnectedCallback() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+    }
+    updateMediaQueryList() {
+        this.mediaQueryList = [];
+        this.layout.forEach((layout) => {
+            const mediaQuery = window.matchMedia(`(min-width: ${layout.minWidth})`);
+            this.mediaQueryList.push({
+                mediaQuery,
+                layout,
+            });
+        });
+    }
+    parseNumber(number) {
+        if (!number) {
+            return 1;
+        }
+        const result = parseInt(number);
+        if (isNaN(result)) {
+            return 1;
+        }
+        return result;
+    }
+    calculateGridTemplateColumns() {
+        this.updateMediaQueryList();
+        let layoutColumns = 1;
+        let columnSpacing = 'var(--ix-layout-grid-gap)';
+        this.mediaQueryList.forEach((mediaQuery) => {
+            if (mediaQuery.mediaQuery.matches) {
+                layoutColumns = mediaQuery.layout.columns;
+            }
+        });
+        let column = 0;
+        Array.from(this.hostElement.children).forEach((child) => {
+            let colspan = this.parseNumber(child.getAttribute('data-colspan'));
+            colspan = Math.min(colspan, layoutColumns);
+            const childRatio = colspan / layoutColumns;
+            child.style.width = `calc(${childRatio * 99.9}% - ${1 - childRatio} * ${columnSpacing})`;
+            if (column + colspan > layoutColumns) {
+                column = 0;
+            }
+            column = (column + colspan) % layoutColumns;
+        });
+    }
+    render() {
+        return (h(Host, { key: '0dd50d7088ab95ce631e5d3888055691b0499e81' }, h("div", { key: '4fd6fb7902a4fbe3232178bf260dd7fe2babdf4b', class: "container" }, h("slot", { key: '4548597f8071865d8203100a0ecbdc5fcab91293' }))));
+    }
+    static get is() { return "ix-layout-auto"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["layout-auto.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["layout-auto.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "layout": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{\n    minWidth: string;\n    columns: number;\n  }[]",
+                    "resolved": "{ minWidth: string; columns: number; }[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the layout of the form."
+                },
+                "defaultValue": "[\n    { minWidth: '0', columns: 1 },\n    { minWidth: '48em', columns: 2 },\n  ]"
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "layout",
+                "methodName": "updateMediaQueryList"
+            }];
+    }
+}
+//# sourceMappingURL=layout-auto.js.map

package/dist/collection/components/layout-auto/layout-auto.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout-auto.js","sourceRoot":"","sources":["../../../src/components/layout-auto/layout-auto.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, Watch, h } from '@stencil/core';\nimport { IxComponent } from '../utils/internal';\n\n/**\n * @since 2.6.0\n */\n@Component({\n  tag: 'ix-layout-auto',\n  styleUrl: 'layout-auto.scss',\n  shadow: true,\n})\nexport class LayoutForm implements IxComponent {\n  @Element() hostElement!: HTMLIxLayoutAutoElement;\n\n  /**\n   * Defines the layout of the form.\n   */\n  @Prop() layout: {\n    minWidth: string;\n    columns: number;\n  }[] = [\n    { minWidth: '0', columns: 1 },\n    { minWidth: '48em', columns: 2 },\n  ];\n\n  private mediaQueryList: {\n    mediaQuery: MediaQueryList;\n    layout: {\n      minWidth: string;\n      columns: number;\n    };\n  }[] = [];\n\n  private readonly observer = new MutationObserver(() =>\n    this.calculateGridTemplateColumns()\n  );\n\n  private readonly resizeObserver = new ResizeObserver(() => {\n    this.calculateGridTemplateColumns();\n  });\n\n  connectedCallback(): void {\n    this.observer.observe(this.hostElement, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: ['data-colspan'],\n    });\n    this.resizeObserver.observe(this.hostElement);\n\n    this.calculateGridTemplateColumns();\n  }\n\n  componentWillLoad(): void | Promise<void> {\n    this.calculateGridTemplateColumns();\n  }\n\n  disconnectedCallback(): void {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  @Watch('layout')\n  updateMediaQueryList() {\n    this.mediaQueryList = [];\n    this.layout.forEach((layout) => {\n      const mediaQuery = window.matchMedia(`(min-width: ${layout.minWidth})`);\n      this.mediaQueryList.push({\n        mediaQuery,\n        layout,\n      });\n    });\n  }\n\n  private parseNumber(number: string | null) {\n    if (!number) {\n      return 1;\n    }\n\n    const result = parseInt(number);\n    if (isNaN(result)) {\n      return 1;\n    }\n\n    return result;\n  }\n\n  private calculateGridTemplateColumns() {\n    this.updateMediaQueryList();\n\n    let layoutColumns = 1;\n    let columnSpacing = 'var(--ix-layout-grid-gap)';\n\n    this.mediaQueryList.forEach((mediaQuery) => {\n      if (mediaQuery.mediaQuery.matches) {\n        layoutColumns = mediaQuery.layout.columns;\n      }\n    });\n\n    let column = 0;\n    Array.from(\n      this.hostElement.children as HTMLCollectionOf<HTMLElement>\n    ).forEach((child) => {\n      let colspan = this.parseNumber(child.getAttribute('data-colspan'));\n      colspan = Math.min(colspan, layoutColumns);\n      const childRatio = colspan / layoutColumns;\n\n      child.style.width = `calc(${childRatio * 99.9}% - ${\n        1 - childRatio\n      } * ${columnSpacing})`;\n\n      if (column + colspan > layoutColumns) {\n        column = 0;\n      }\n\n      column = (column + colspan) % layoutColumns;\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"container\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,21 @@
+/*
+ * SPDX-FileCopyrightText: 2024 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 {
+  --ix-layout-grid-gutter: 24px;
+  display: block;
+  flex: 1 1 0%;
+  width: 100%;
+  padding-left: calc(var(--ix-layout-grid-gutter) * 0.5);
+  padding-right: calc(var(--ix-layout-grid-gutter) * 0.5);
+}
+
+:host(.no-margin) {
+  padding-left: 0;
+  padding-right: 0;
+}

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

@@ -0,0 +1,98 @@
+/*
+ * SPDX-FileCopyrightText: 2024 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";
+/**
+ * @since 2.0.0
+ */
+export class LayoutGrid {
+    constructor() {
+        this.noMargin = false;
+        this.gap = '24';
+        this.columns = 12;
+    }
+    render() {
+        return (h(Host, { key: 'c94b508ccf7ff23d457bec9444d69eb97c9b46a2', class: {
+                'no-margin': this.noMargin,
+            }, style: {
+                '--ix-layout-grid-columns': `${this.columns}`,
+                '--ix-layout-grid-gutter': `${this.gap}px`,
+            } }, h("slot", { key: '5a8180b92db51b02dbc3ddd805fa3f2eacd886c0' })));
+    }
+    static get is() { return "ix-layout-grid"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["layout-grid.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["layout-grid.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "noMargin": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The grid will not have any horizontal padding"
+                },
+                "attribute": "no-margin",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "gap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'8' | '12' | '16' | '24'",
+                    "resolved": "\"12\" | \"16\" | \"24\" | \"8\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Grid gap"
+                },
+                "attribute": "gap",
+                "reflect": false,
+                "defaultValue": "'24'"
+            },
+            "columns": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Overwrite the default number of columns. Choose between 2 and 12 columns."
+                },
+                "attribute": "columns",
+                "reflect": false,
+                "defaultValue": "12"
+            }
+        };
+    }
+}
+//# sourceMappingURL=layout-grid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"layout-grid.js","sourceRoot":"","sources":["../../../src/components/layout-grid/layout-grid.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;GAEG;AAMH,MAAM,OAAO,UAAU;;wBAIF,KAAK;mBAKgB,IAAI;uBAK1B,EAAE;;IAEpB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI,CAAC,QAAQ;aAC3B,EACD,KAAK,EAAE;gBACL,0BAA0B,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE;gBAC7C,yBAAyB,EAAE,GAAG,IAAI,CAAC,GAAG,IAAI;aAC3C;YAED,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 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 * @since 2.0.0\n */\n@Component({\n  tag: 'ix-layout-grid',\n  styleUrl: 'layout-grid.scss',\n  shadow: true,\n})\nexport class LayoutGrid {\n  /**\n   * The grid will not have any horizontal padding\n   */\n  @Prop() noMargin = false;\n\n  /**\n   * Grid gap\n   */\n  @Prop() gap: '8' | '12' | '16' | '24' = '24';\n\n  /**\n   * Overwrite the default number of columns. Choose between 2 and 12 columns.\n   */\n  @Prop() columns = 12;\n\n  render() {\n    return (\n      <Host\n        class={{\n          'no-margin': this.noMargin,\n        }}\n        style={{\n          '--ix-layout-grid-columns': `${this.columns}`,\n          '--ix-layout-grid-gutter': `${this.gap}px`,\n        }}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/link-button/link-button.js

@@ -17,13 +17,13 @@ export class LinkButton {
         this.target = '_self';
     }
     render() {
-        return (h(Host, { key: 'c0753708c00f43909af85a98f619b407545a69a2' }, h("a", { key: 'a7935cfb13d2743192bd678bf99e7e2dc09657f5', title: this.url, tabindex: "0", class: {
+        return (h(Host, { key: '599582323c6ca9cfdbc9079e94ccac90dc42f87e' }, h("a", { key: '26a781d9d710fa6d3e16a00c9319d7007e4751ef', title: this.url, tabindex: "0", class: {
                 'link-button': true,
                 disabled: this.disabled,
-            }, href: this.disabled ? undefined : this.url, target: this.target }, h("ix-icon", { key: 'e18e4e6c7f69fce4cf7c9708f3ec18a14e825b3f', class: "icon", name: 'chevron-right-small', size: "16" }), h("div", { key: '20d6785d5ecd08978bdb8a58c0e11b85584143f8', class: {
+            }, href: this.disabled ? undefined : this.url, target: this.target }, h("ix-icon", { key: '58de8c25f49ff1d186e9c9b6329bbb3f8ca1c09f', class: "icon", name: 'chevron-right-small', size: "16" }), h("div", { key: 'd07d29e4a52ff43c71cf521c1db445a53e98de8f', class: {
                 link: true,
                 disabled: this.disabled,
-            } }, h("slot", { key: '6d5ac72219c3565dc5c3adec23b59e6d0bdf93a7' })))));
+            } }, h("slot", { key: 'ab9c2a95cf9f71c3227e9bca068d49124bd5dd8b' })))));
     }
     static get is() { return "ix-link-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-navigation/map-navigation.css

@@ -148,11 +148,11 @@
 }
 :host .map-nav-header .map-nav-header-brand {
   background-color: var(--theme-map-navigation-background);
-  display: flex;
-  align-items: center;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-bottom: 0.625rem;
   height: 100%;
   width: 100%;
-  padding: 0 1rem;
   --theme-app-header--color: var(--theme-map-navigation-header--color);
   --theme-app-header-logo--color: var(--theme-map-navigation-logo--color);
 }

package/dist/collection/components/map-navigation/map-navigation.js

@@ -155,11 +155,11 @@ export class MapNavigation {
         this.hasContentHeader = (nodes === null || nodes === void 0 ? void 0 : nodes.length) !== 0;
     }
     render() {
-        return (h(Host, { key: '65d980effdeeac98d92a0c8d150cf96d9b9beb3d' }, h("slot", { key: '822f13c097836e57452c453d9b45e4774d7394ed', name: "menu" }), h("div", { key: '8f58c729f86f0e3b6d6083b5f0f0fda28e74c9eb', class: "map-nav" }, h("div", { key: '0f979e624122ce789aa094bf428dc39414d66207', class: "map-nav-sidebar" }, h("div", { key: 'a8cf78610ff79460f00716f52968f18f0fc83859', class: "map-nav-header" }, h("ix-application-header", { key: '98c2b5e98691c1505879a3ed2d1f3cdba4c94a62', name: this.applicationName, class: "map-nav-header-brand" }, h("slot", { key: 'b9036cd5a8873b9562d58783264286bb74cf08f7', slot: "logo", name: "logo" }))), h("div", { key: '42a13b7c8ee93cf69b06c12a3fb600f740555d1b', class: "map-nav-sidebar-content" }, h("div", { key: 'd4e0218e43cabf84bd7faa2c38a7e17074982ba2', class: "map-nav-sidebar-static-content" }, h("div", { key: '0b1add8805f5b3d37a546d20fa6e99a1d6bf35ac', class: "map-nav-title" }, this.navigationTitle), this.hideContextMenu ? ('') : (h("ix-icon-button", { icon: 'context-menu', ghost: true, size: "24", variant: "secondary", onClick: (_) => this.contextMenuClick.emit() }))), h("div", { key: 'b2e15f627226c8d01e7f1e73f14d40ebb58e151d', class: "map-nav-sidebar-user-content" }, h("slot", { key: 'cb26bf448b02c54e46398d65b0361e453115c20d', name: "sidebar-content" })))), h("div", { key: '8fe42e8570256b4f09874100e2d34d323e22ac0d', class: "content" }, h("div", { key: '17a816d735d80ebca9e6cc7a7e9c6671e2e9a059', class: {
+        return (h(Host, { key: '9b4c4bb24f19945428477be04c10c6f80868ded0' }, h("slot", { key: '6f0db803a6755ed73737fe783e8d082a2df54f5b', name: "menu" }), h("div", { key: 'e8c578da79eed996626ed15e959dfc7c18675bfb', class: "map-nav" }, h("div", { key: 'fb834017ce2d372bc8ec93d16dd8c1975f8b6939', class: "map-nav-sidebar" }, h("div", { key: 'e0378fb0501f8e08b4c60d4051c8f0d1a72b7104', class: "map-nav-header" }, h("ix-application-header", { key: 'c03535cc7a7739e1a072a1687ab263f8a1c77d69', name: this.applicationName, class: "map-nav-header-brand" }, h("slot", { key: '9c4a8847d90dbdaf42bb9591b55680e547b1d52c', slot: "logo", name: "logo" }))), h("div", { key: '98b3542ea500a543322a84a640b839e2959cc0fe', class: "map-nav-sidebar-content" }, h("div", { key: 'a6d2f51e083a9e9b9d9839ea0b55090ee1354b42', class: "map-nav-sidebar-static-content" }, h("div", { key: '08a2f1f9c3c3730be3b5af9f6637cf4480461cda', class: "map-nav-title" }, this.navigationTitle), this.hideContextMenu ? ('') : (h("ix-icon-button", { icon: 'context-menu', ghost: true, size: "24", variant: "secondary", onClick: (_) => this.contextMenuClick.emit() }))), h("div", { key: 'b9f9fec616e9d53a5144d651c8f33cb65bd43d6b', class: "map-nav-sidebar-user-content" }, h("slot", { key: 'affb80bf56de7fab01f7c959d37f041cf8100fd2', name: "sidebar-content" })))), h("div", { key: 'ae33912f9c102c78d08c7e0a1e473ebbf4905a9c', class: "content" }, h("div", { key: '2385a7c87ded8cd7a1db225b3e45c16120b43aef', class: {
                 'map-nav-header-content': true,
                 'bg-2': true,
                 empty: !this.hasContentHeader,
-            } }, h("slot", { key: '734a74f600419d597f306638cbe97c5504a2e15d', name: "content-header", onSlotchange: (e) => this.checkHasContentHeader(e) })), h("main", { key: '76d831c62b3a1339e18ab4f4b77c2dd73b915118' }, h("slot", { key: '5ec164d85791363dc232b3861458446c2a9787dc' }), h("slot", { key: 'cc823b370d2b9f0f7151388ebedcd4958277422c', name: "overlay" }))))));
+            } }, h("slot", { key: 'e230b473f2729038bc75d6b97f7a1bb5dc7b8b8e', name: "content-header", onSlotchange: (e) => this.checkHasContentHeader(e) })), h("main", { key: '062163caaa4a2b61b48c2124d23d047041688ce2' }, h("slot", { key: '444718852cea947e7bf581321cae89f113c474b5' }), h("slot", { key: 'c2160f945e134d90db2820c5ba4505d85845e5d6', name: "overlay" }))))));
     }
     static get is() { return "ix-map-navigation"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-navigation-overlay/map-navigation-overlay.js

@@ -44,14 +44,14 @@ export class MapNavigationOverlay {
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: 'ba9761a6768f6e916af12c4cac2a45700a330516' }, h("div", { key: 'd7d8fbe16ed3146b8e2046d2b072ff0dea862afe', class: "overlay-header" }, h("div", { key: 'de34af360f2b336051fb532b08c579d30d3f6579', class: {
+        return (h(Host, { key: 'b563492ffa21ac174c57197db042bc89cd8c57be' }, h("div", { key: 'bb5b6da79e9d62e79d8b4cce1d80d25194185c2d', class: "overlay-header" }, h("div", { key: '84c295e8782c8a7eff3bfd74d765b51bb549ae8a', class: {
                 'color-indicator': true,
                 'd-none': ((_a = this.iconColor) !== null && _a !== void 0 ? _a : this.color) === undefined,
             }, style: {
                 'background-color': ((_b = this.iconColor) !== null && _b !== void 0 ? _b : this.color)
                     ? `var(--theme-${(_c = this.iconColor) !== null && _c !== void 0 ? _c : this.color})`
                     : '',
-            } }), h("div", { key: 'c7ed1f2c9274d805763837568a403cc9f2a0a6c9', class: "overlay-header-content" }, h("ix-icon", { key: '75ed428d1a2862edb18bb14459f02252d39d8ea4', size: "32", name: this.icon }), h("span", { key: 'ea903f87bf838d4ef2fce43e7453f2f7f98fbb57', class: "overlay-header-title", title: this.name }, this.name)), h("ix-icon-button", { key: 'f0f6c8b720f59dd7d589116fada723e2e0c7c7c0', class: "overlay-close", ghost: true, icon: 'close', size: "24", onClick: () => this.closeOverlay() })), h("slot", { key: 'b7cc3f4acc922c0ba629f444d756e083cc69d5dd' })));
+            } }), h("div", { key: '7387c721ea7eeeaca4313494b91d156003d32872', class: "overlay-header-content" }, h("ix-icon", { key: '051568dbe4f3be2de20487816624f32ec93d153c', size: "32", name: this.icon }), h("span", { key: '5e0ab71b0f168668bb4137c41cbbcb6c68f6614a', class: "overlay-header-title", title: this.name }, this.name)), h("ix-icon-button", { key: 'c6a820c3a5ed1b7a4b76894da5b4e35af385a1a1', class: "overlay-close", ghost: true, icon: 'close', size: "24", onClick: () => this.closeOverlay() })), h("slot", { key: '492577cbb69ff262b9cbfeb39a30cac628beb117' })));
     }
     static get is() { return "ix-map-navigation-overlay"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/menu/menu-expand-icon.css

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2024 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *

package/dist/collection/components/menu/menu-expand-icon.js

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2024 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2024 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -46,7 +46,7 @@ export class MenuExpandIcon {
         return this.getSmallScreenIcon();
     }
     render() {
-        return (h(Host, { key: 'c7240a676b21f75e3729f4d80d3c99879fdda313', class: {
+        return (h(Host, { key: '47eabfc90f05f809a8df541e3ae79f3f7d32bb5f', class: {
                 expanded: this.expanded,
             } }, this.getMenuIcon()));
     }

package/dist/collection/components/menu/menu-expand-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-expand-icon.js","sourceRoot":"","sources":["../../../src/components/menu/menu-expand-icon.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C;;GAEG;AAMH,MAAM,OAAO,cAAc;;2BAEK,QAAQ;wBAGF,KAAK;;sBAMxB,KAAK;;IAEtB,kBAAkB;QAChB,OAAO,CACL,cACE,KAAK,kCACA,gBAAgB,CACjB,WAAW,EACX,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,EACL,KAAK,CACN,KACD,oBAAoB,EAAE,IAAI,KAE5B,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,kBACxC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC;YAExC,WACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI;gBAEX,YAAM,KAAK,EAAC,aAAa,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,GAAQ;gBACnE,YAAM,KAAK,EAAC,aAAa,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,IAAI,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,GAAQ;gBACpE,YAAM,KAAK,EAAC,aAAa,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,IAAI,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,GAAQ,CAChE,CACC,CACV,CAAC;IACJ,CAAC;IAED,kBAAkB;QAChB,OAAO,CACL,sBACE,IAAI,EAAE,kBAAkB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAAE,EAC1D,KAAK,SACW,CACnB,CAAC;IACJ,CAAC;IAED,WAAW;QACT,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,OAAO,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACnC,CAAC;QAED,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,EAAE,CAAC;YAC7B,OAAO,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACnC,CAAC;QAED,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,EAAE,CAAC;YAC7B,OAAO,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACnC,CAAC;QAED,OAAO,IAAI,CAAC,kBAAkB,EAAE,CAAC;IACnC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,IAEA,IAAI,CAAC,WAAW,EAAE,CACd,CACR,CAAC;IACJ,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/*\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 '../button/base-button';\nimport { a11yBoolean } from '../utils/a11y';\nimport { Breakpoint } from '../utils/breakpoints';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'ix-menu-expand-icon',\n  styleUrl: './menu-expand-icon.scss',\n  shadow: true,\n})\nexport class MenuExpandIcon {\n  /** Accessibility label for the menu expand icon (MANDATORY) */\n  @Prop() ixAriaLabel: string = 'Expand';\n\n  /** Whether the menu expand icon displays the expanded state or not */\n  @Prop({ reflect: true }) expanded = false;\n\n  /** Controls which icon is displayed */\n  @Prop({ reflect: true }) breakpoint: Breakpoint;\n\n  /** Display as pinned */\n  @Prop() pinned = false;\n\n  getSmallScreenIcon() {\n    return (\n      <button\n        class={{\n          ...getButtonClasses(\n            'secondary',\n            false,\n            true,\n            true,\n            false,\n            false,\n            false\n          ),\n          'menu-expand-button': true,\n        }}\n        type=\"button\"\n        aria-label={this.ixAriaLabel ? this.ixAriaLabel : null}\n        aria-pressed={a11yBoolean(this.expanded)}\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\"\n        >\n          <rect class=\"line line-1\" x=\"2\" y=\"5\" width=\"20\" height=\"2\"></rect>\n          <rect class=\"line line-2\" x=\"2\" y=\"11\" width=\"13\" height=\"2\"></rect>\n          <rect class=\"line line-3\" x=\"2\" y=\"17\" width=\"20\" height=\"2\"></rect>\n        </svg>\n      </button>\n    );\n  }\n\n  getLargeScreenIcon() {\n    return (\n      <ix-icon-button\n        icon={`double-chevron-${this.expanded ? 'left' : 'right'}`}\n        ghost\n      ></ix-icon-button>\n    );\n  }\n\n  getMenuIcon() {\n    if (this.pinned) {\n      return this.getLargeScreenIcon();\n    }\n\n    if (this.breakpoint === 'md') {\n      return this.getLargeScreenIcon();\n    }\n\n    if (this.breakpoint === 'lg') {\n      return this.getLargeScreenIcon();\n    }\n\n    return this.getSmallScreenIcon();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.expanded,\n        }}\n      >\n        {this.getMenuIcon()}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"menu-expand-icon.js","sourceRoot":"","sources":["../../../src/components/menu/menu-expand-icon.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C;;GAEG;AAMH,MAAM,OAAO,cAAc;;2BAEK,QAAQ;wBAGF,KAAK;;sBAMxB,KAAK;;IAEtB,kBAAkB;QAChB,OAAO,CACL,cACE,KAAK,kCACA,gBAAgB,CACjB,WAAW,EACX,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,EACL,KAAK,CACN,KACD,oBAAoB,EAAE,IAAI,KAE5B,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,kBACxC,WAAW,CAAC,IAAI,CAAC,QAAQ,CAAC;YAExC,WACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI;gBAEX,YAAM,KAAK,EAAC,aAAa,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,GAAQ;gBACnE,YAAM,KAAK,EAAC,aAAa,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,IAAI,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,GAAQ;gBACpE,YAAM,KAAK,EAAC,aAAa,EAAC,CAAC,EAAC,GAAG,EAAC,CAAC,EAAC,IAAI,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,GAAG,GAAQ,CAChE,CACC,CACV,CAAC;IACJ,CAAC;IAED,kBAAkB;QAChB,OAAO,CACL,sBACE,IAAI,EAAE,kBAAkB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAAE,EAC1D,KAAK,SACW,CACnB,CAAC;IACJ,CAAC;IAED,WAAW;QACT,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,OAAO,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACnC,CAAC;QAED,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,EAAE,CAAC;YAC7B,OAAO,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACnC,CAAC;QAED,IAAI,IAAI,CAAC,UAAU,KAAK,IAAI,EAAE,CAAC;YAC7B,OAAO,IAAI,CAAC,kBAAkB,EAAE,CAAC;QACnC,CAAC;QAED,OAAO,IAAI,CAAC,kBAAkB,EAAE,CAAC;IACnC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,IAEA,IAAI,CAAC,WAAW,EAAE,CACd,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 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 * SPDX-FileCopyrightText: 2024 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 '../button/base-button';\nimport { a11yBoolean } from '../utils/a11y';\nimport { Breakpoint } from '../utils/breakpoints';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'ix-menu-expand-icon',\n  styleUrl: './menu-expand-icon.scss',\n  shadow: true,\n})\nexport class MenuExpandIcon {\n  /** Accessibility label for the menu expand icon (MANDATORY) */\n  @Prop() ixAriaLabel: string = 'Expand';\n\n  /** Whether the menu expand icon displays the expanded state or not */\n  @Prop({ reflect: true }) expanded = false;\n\n  /** Controls which icon is displayed */\n  @Prop({ reflect: true }) breakpoint: Breakpoint;\n\n  /** Display as pinned */\n  @Prop() pinned = false;\n\n  getSmallScreenIcon() {\n    return (\n      <button\n        class={{\n          ...getButtonClasses(\n            'secondary',\n            false,\n            true,\n            true,\n            false,\n            false,\n            false\n          ),\n          'menu-expand-button': true,\n        }}\n        type=\"button\"\n        aria-label={this.ixAriaLabel ? this.ixAriaLabel : null}\n        aria-pressed={a11yBoolean(this.expanded)}\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\"\n        >\n          <rect class=\"line line-1\" x=\"2\" y=\"5\" width=\"20\" height=\"2\"></rect>\n          <rect class=\"line line-2\" x=\"2\" y=\"11\" width=\"13\" height=\"2\"></rect>\n          <rect class=\"line line-3\" x=\"2\" y=\"17\" width=\"20\" height=\"2\"></rect>\n        </svg>\n      </button>\n    );\n  }\n\n  getLargeScreenIcon() {\n    return (\n      <ix-icon-button\n        icon={`double-chevron-${this.expanded ? 'left' : 'right'}`}\n        ghost\n      ></ix-icon-button>\n    );\n  }\n\n  getMenuIcon() {\n    if (this.pinned) {\n      return this.getLargeScreenIcon();\n    }\n\n    if (this.breakpoint === 'md') {\n      return this.getLargeScreenIcon();\n    }\n\n    if (this.breakpoint === 'lg') {\n      return this.getLargeScreenIcon();\n    }\n\n    return this.getSmallScreenIcon();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.expanded,\n        }}\n      >\n        {this.getMenuIcon()}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/menu/menu.css

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2024 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -1779,10 +1779,11 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  width: 3.25rem;
+  width: calc(3.25rem + var(--ix-application-menu-safe-area-left, 0rem));
   height: 100%;
-  padding-block-end: 1rem;
+  padding-block-end: calc(1rem + var(--ix-safe-area-inset-bottom, 0rem));
   overflow: hidden;
+  padding-left: var(--ix-application-menu-safe-area-left, 0rem);
   background-color: var(--theme-nav--background);
   transition: width var(--theme-default-time) ease-in-out;
 }