@siemens/ix 1.5.0-beta.4 → 1.6.0

package/dist/collection/components/key-value/key-value.js

@@ -0,0 +1,119 @@
+/*
+ * 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';
+/**
+ * @slot custom-value - Optional custom value at key value instead of text value
+ *
+ * @since 1.6.0
+ */
+export class KeyValue {
+  constructor() {
+    this.icon = undefined;
+    this.label = undefined;
+    this.labelPosition = 'top';
+    this.value = undefined;
+  }
+  render() {
+    return (h(Host, { class: `keyValue keyValue--${this.labelPosition === 'top' ? 'column' : 'row'}` }, this.icon && (h("ix-icon", { name: this.icon, size: "24", class: "keyValue__icon" })), h("div", { class: "keyValue__content" }, h("div", { class: "content__label" }, this.label), h("div", { class: {
+        content__value: true,
+        'has-customValue': this.value === undefined,
+      } }, this.value !== undefined ? (this.value) : (h("slot", { name: "custom-value" }))))));
+  }
+  static get is() { return "ix-key-value"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["key-value.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["key-value.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Optional key value icon"
+        },
+        "attribute": "icon",
+        "reflect": false
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Key value label"
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "labelPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "KeyValueLabelPosition",
+          "resolved": "\"left\" | \"top\"",
+          "references": {
+            "KeyValueLabelPosition": {
+              "location": "local",
+              "path": "/__w/ix/ix/packages/core/src/components/key-value/key-value.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Optional key value label position - 'top' or 'left'"
+        },
+        "attribute": "label-position",
+        "reflect": false,
+        "defaultValue": "'top'"
+      },
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Optional key value text value"
+        },
+        "attribute": "value",
+        "reflect": false
+      }
+    };
+  }
+}
+//# sourceMappingURL=key-value.js.map

package/dist/collection/components/key-value/key-value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"key-value.js","sourceRoot":"","sources":["../../../src/components/key-value/key-value.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAIzD;;;;GAIG;AAMH,MAAM,OAAO,QAAQ;;;;yBAc4B,KAAK;;;EAOpD,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE,sBACL,IAAI,CAAC,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAC5C,EAAE;MAED,IAAI,CAAC,IAAI,IAAI,CACZ,eAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,gBAAgB,GAAW,CACtE;MACD,WAAK,KAAK,EAAC,mBAAmB;QAC5B,WAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAO;QAC9C,WACE,KAAK,EAAE;YACL,cAAc,EAAE,IAAI;YACpB,iBAAiB,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;WAC5C,IAEA,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CAC1B,IAAI,CAAC,KAAK,CACX,CAAC,CAAC,CAAC,CACF,YAAM,IAAI,EAAC,cAAc,GAAQ,CAClC,CACG,CACF,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, h, Host, Prop } from '@stencil/core';\n\nexport type KeyValueLabelPosition = 'top' | 'left';\n\n/**\n * @slot custom-value - Optional custom value at key value instead of text value\n *\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-key-value',\n  styleUrl: 'key-value.scss',\n  shadow: true,\n})\nexport class KeyValue {\n  /**\n   * Optional key value icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Key value label\n   */\n  @Prop() label!: string;\n\n  /**\n   * Optional key value label position - 'top' or 'left'\n   */\n  @Prop() labelPosition: KeyValueLabelPosition = 'top';\n\n  /**\n   * Optional key value text value\n   */\n  @Prop() value: string;\n\n  render() {\n    return (\n      <Host\n        class={`keyValue keyValue--${\n          this.labelPosition === 'top' ? 'column' : 'row'\n        }`}\n      >\n        {this.icon && (\n          <ix-icon name={this.icon} size=\"24\" class=\"keyValue__icon\"></ix-icon>\n        )}\n        <div class=\"keyValue__content\">\n          <div class=\"content__label\">{this.label}</div>\n          <div\n            class={{\n              content__value: true,\n              'has-customValue': this.value === undefined,\n            }}\n          >\n            {this.value !== undefined ? (\n              this.value\n            ) : (\n              <slot name=\"custom-value\"></slot>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/key-value-list/key-value-list.css

@@ -0,0 +1,7 @@
+:host(.keyValueList) ::slotted(ix-key-value) {
+  border-bottom: 1px solid var(--theme-color-weak-bdr);
+}
+
+:host(.keyValueList.keyValueList--striped) ::slotted(ix-key-value:nth-child(odd)) {
+  background: var(--theme-color-ghost-alt);
+}

package/dist/collection/components/key-value-list/key-value-list.js

@@ -0,0 +1,54 @@
+/*
+ * 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';
+/**
+ * @since 1.6.0
+ */
+export class KeyValueList {
+  constructor() {
+    this.striped = undefined;
+  }
+  render() {
+    return (h(Host, { class: { keyValueList: true, 'keyValueList--striped': this.striped } }, h("slot", null)));
+  }
+  static get is() { return "ix-key-value-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["key-value-list.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["key-value-list.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "striped": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Optional striped key value list style"
+        },
+        "attribute": "striped",
+        "reflect": false
+      }
+    };
+  }
+}
+//# sourceMappingURL=key-value-list.js.map

package/dist/collection/components/key-value-list/key-value-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"key-value-list.js","sourceRoot":"","sources":["../../../src/components/key-value-list/key-value-list.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEzD;;GAEG;AAMH,MAAM,OAAO,YAAY;;;;EAMvB,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,uBAAuB,EAAE,IAAI,CAAC,OAAO,EAAE;MAEpE,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 * @since 1.6.0\n */\n@Component({\n  tag: 'ix-key-value-list',\n  styleUrl: 'key-value-list.scss',\n  shadow: true,\n})\nexport class KeyValueList {\n  /**\n   * Optional striped key value list style\n   */\n  @Prop() striped: boolean;\n\n  render() {\n    return (\n      <Host\n        class={{ keyValueList: true, 'keyValueList--striped': this.striped }}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -42,6 +42,14 @@
  * 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;
   flex-grow: 1;
@@ -50,6 +58,11 @@
   padding: 0.375rem 0.25rem;
   min-width: 0;
 }
+:host *,
+:host *::after,
+:host *::before {
+  box-sizing: border-box;
+}
 :host span {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -103,17 +116,6 @@
   -webkit-margin-before: 0.125rem;
           margin-block-start: 0.125rem;
 }
-:host.stacked {
-  height: 3.75rem;
-}
-:host.stacked .kpi-container {
-  justify-content: center;
-  flex-wrap: wrap;
-}
-:host.stacked .kpi-container .kpi-label {
-  width: 100%;
-  justify-content: center;
-}
 :host:not(.disabled):not(:disabled) {
   cursor: pointer;
 }
@@ -128,4 +130,16 @@
 }
 :host:not(.disabled):not(:disabled):focus-visible {
   outline: 1px solid var(--focus--border-color);
+}
+
+:host(.stacked) {
+  height: 3.75rem;
+}
+:host(.stacked) .kpi-container {
+  justify-content: center;
+  flex-wrap: wrap;
+}
+:host(.stacked) .kpi-container .kpi-label {
+  width: 100%;
+  justify-content: center;
 }

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

@@ -42,7 +42,7 @@ export class Kpi {
       } }, h("span", { class: "kpi-label" }, this.getStateIcon(), h("span", { class: "kpi-label-text" }, this.label)), h("span", { class: "kpi-value-container" }, h("span", { class: "kpi-value" }, this.value), this.unit ? h("span", { class: "kpi-unit" }, this.unit) : ''))));
   }
   static get is() { return "ix-kpi"; }
-  static get encapsulation() { return "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["kpi.scss"]

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;;;;;iBAmBmC,SAAS;uBAKT,YAAY;;EAErD,YAAY;IAClB,QAAQ,IAAI,CAAC,KAAK,EAAE;MAClB,KAAK,OAAO;QACV,OAAO,CACL,eACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,IAAI,GACA,CACZ,CAAC;MAEJ,KAAK,SAAS;QACZ,OAAO,CACL,eACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,IAAI,GACA,CACZ,CAAC;MAEJ;QACE,OAAO,EAAE,CAAC;KACb;EACH,CAAC;EAEO,cAAc;IACpB,IAAI,OAAO,GAAG,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;IAE7C,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;KAC3C;IAED,OAAO,OAAO,CAAC;EACjB,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAC5B,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE;QACL,OAAO,EAAE,IAAI,CAAC,WAAW,KAAK,UAAU;OACzC;MAED,WACE,KAAK,EAAE;UACL,eAAe,EAAE,IAAI;UACrB,KAAK,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;UAC7B,OAAO,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;SAClC;QAED,YAAM,KAAK,EAAC,WAAW;UACpB,IAAI,CAAC,YAAY,EAAE;UACpB,YAAM,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC3C;QACP,YAAM,KAAK,EAAC,qBAAqB;UAC/B,YAAM,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,KAAK,CAAQ;UAC1C,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAM,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,IAAI,CAAQ,CAAC,CAAC,CAAC,EAAE,CACtD,CACH,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, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-kpi',\n  styleUrl: 'kpi.scss',\n  scoped: 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;;;;;iBAmBmC,SAAS;uBAKT,YAAY;;EAErD,YAAY;IAClB,QAAQ,IAAI,CAAC,KAAK,EAAE;MAClB,KAAK,OAAO;QACV,OAAO,CACL,eACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,IAAI,GACA,CACZ,CAAC;MAEJ,KAAK,SAAS;QACZ,OAAO,CACL,eACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,IAAI,GACA,CACZ,CAAC;MAEJ;QACE,OAAO,EAAE,CAAC;KACb;EACH,CAAC;EAEO,cAAc;IACpB,IAAI,OAAO,GAAG,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;IAE7C,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;KAC3C;IAED,OAAO,OAAO,CAAC;EACjB,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAC5B,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE;QACL,OAAO,EAAE,IAAI,CAAC,WAAW,KAAK,UAAU;OACzC;MAED,WACE,KAAK,EAAE;UACL,eAAe,EAAE,IAAI;UACrB,KAAK,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;UAC7B,OAAO,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;SAClC;QAED,YAAM,KAAK,EAAC,WAAW;UACpB,IAAI,CAAC,YAAY,EAAE;UACpB,YAAM,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC3C;QACP,YAAM,KAAK,EAAC,qBAAqB;UAC/B,YAAM,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,KAAK,CAAQ;UAC1C,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAM,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,IAAI,CAAQ,CAAC,CAAC,CAAC,EAAE,CACtD,CACH,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, 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/css-grid/builder.js

@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+export function templateBuilder(inputTemplate) {
+  let templateString = '';
+  inputTemplate.forEach((row) => {
+    templateString += '"';
+    templateString = row.reduce((pV, cV) => {
+      return `${pV} ${cV}`;
+    }, templateString);
+    templateString += '"\n';
+  });
+  return templateString;
+}
+//# sourceMappingURL=builder.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"builder.js","sourceRoot":"","sources":["../../../../src/components/layout/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/layout/css-grid/css-grid-item.css

@@ -0,0 +1,16 @@
+/*
+ * 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: block;
+  position: relative;
+}
+:host ::slotted(*) {
+  height: 100%;
+  width: 100%;
+}

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

@@ -0,0 +1,56 @@
+/*
+ * 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';
+/**
+ * @internal
+ */
+export class CssGridItem {
+  constructor() {
+    this.itemName = undefined;
+  }
+  render() {
+    const style = {};
+    style['grid-area'] = this.itemName;
+    return (h(Host, { style: style }, h("slot", null)));
+  }
+  static get is() { return "ix-css-grid-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["css-grid-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["css-grid-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "itemName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Grid item name"
+        },
+        "attribute": "item-name",
+        "reflect": false
+      }
+    };
+  }
+}
+//# sourceMappingURL=css-grid-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"css-grid-item.js","sourceRoot":"","sources":["../../../../src/components/layout/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/{icon/icon.css → layout/css-grid/css-grid.css}

@@ -19,27 +19,9 @@
 /* Line heights */
 /* Animation timings */
 :host {
-  display: inline-flex;
-  height: 1.5rem;
-  width: 1.5rem;
-  color: var(--theme-color-std-text);
-}
-:host i {
-  color: inherit;
-  transition: color 150ms;
-}
-
-:host(.size-12) {
-  height: 0.75rem;
-  width: 0.75rem;
-}
-
-:host(.size-16) {
-  height: 1rem;
-  width: 1rem;
-}
-
-:host(.size-32) {
-  height: 2rem;
-  width: 2rem;
+  display: grid;
+  position: relative;
+  row-gap: 1.5rem;
+  -moz-column-gap: 1.5rem;
+       column-gap: 1.5rem;
 }

package/dist/collection/components/layout/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/layout/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/layout/css-grid/css-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-grid.js","sourceRoot":"","sources":["../../../../src/components/layout/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/map-navigation/map-navigation.css

@@ -42,7 +42,7 @@
 }
 :host .map-nav {
   display: flex;
-  margin-left: 4rem;
+  margin-left: 3.25rem;
   position: relative;
   height: 100%;
   flex-grow: 1;

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

@@ -39,24 +39,30 @@ export class MapNavigation {
     this.menu.addEventListener('mapExpandChange', (event) => {
       const state = !event.detail;
       this.toggleSidebar(state);
-      this.menu.toggleMapExpand(state);
     });
     this.menu.enableMapExpand = true;
   }
-  toggleSidebar(show) {
+  /**
+   * Change the visibility of the sidebar
+   *
+   * @param show new visibility state
+   * @since 1.6.0
+   */
+  async toggleSidebar(show) {
     if (show !== undefined) {
       this.isSidebarOpen = show;
     }
     else {
       this.isSidebarOpen = !this.isSidebarOpen;
     }
-    if (show) {
+    if (this.isSidebarOpen) {
       this.openSidebar();
     }
     else {
       this.closeSidebar();
     }
     this.navigationToggled.emit(this.isSidebarOpen);
+    this.menu.toggleMapExpand(this.isSidebarOpen);
   }
   closeSidebar() {
     anime({
@@ -245,6 +251,34 @@ export class MapNavigation {
   }
   static get methods() {
     return {
+      "toggleSidebar": {
+        "complexType": {
+          "signature": "(show?: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "show new visibility state"
+                }],
+              "text": "new visibility state"
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Change the visibility of the sidebar",
+          "tags": [{
+              "name": "param",
+              "text": "show new visibility state"
+            }, {
+              "name": "since",
+              "text": "1.6.0"
+            }]
+        }
+      },
       "openOverlay": {
         "complexType": {
           "signature": "(name: string, component: HTMLElement, icon?: string, color?: string) => Promise<void>",