@siemens/ix 2.0.0-beta.0 → 2.0.0

package/dist/esm/ix-input-group.entry.js

@@ -1,35 +1,106 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-7334ee80.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-eb0be730.js';
+import { g as getSlottedElements } from './shadow-dom-b9df3d9b.js';
 
-const inputGroupCss = ".sc-ix-input-group-h{position:relative;display:flex;flex-wrap:wrap;align-items:stretch;width:100%}.sc-ix-input-group-h .group.sc-ix-input-group{display:flex;position:absolute;align-items:center;height:100%}.sc-ix-input-group-h .group-start.sc-ix-input-group{left:0px;height:2rem}.sc-ix-input-group-h .group-end.sc-ix-input-group{right:0px;height:2rem}.sc-ix-input-group-h .sc-ix-input-group-s>*{display:flex}";
+const inputGroupCss = ":host{position:relative;display:flex;width:100%;flex-wrap:wrap;align-items:stretch}: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 .group{display:flex;position:absolute;align-items:center;height:100%}:host .group-start{left:0px;height:2rem;margin-left:0.375rem;color:var(--theme-color-soft-text)}:host .group-end{right:0px;height:2rem;margin-right:0.375rem;color:var(--theme-color-soft-text)}:host ::slotted(*){display:flex}";
 
 const InputGroup = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.inputPaddingLeft = 0;
+    this.inputPaddingRight = 0;
   }
-  componentDidRender() {
-    let paddingRight = 15;
-    let paddingLeft = 15;
-    this.host.querySelectorAll('[slot="input-end"]').forEach((item) => {
-      item.classList.add('input-group-label');
-      paddingRight += item.getBoundingClientRect().width;
+  get inputElement() {
+    return this.hostElement.querySelector('input');
+  }
+  componentWillLoad() {
+    var _a;
+    const { valid } = this.inputElement.validity;
+    this.inputElement.addEventListener('valid', () => {
+      this.onValidInput();
+    });
+    this.inputElement.addEventListener('invalid', () => {
+      this.onInvalidInput();
     });
-    this.host.querySelectorAll('[slot="input-start"]').forEach((item) => {
-      item.classList.add('input-group-label');
-      paddingLeft += item.getBoundingClientRect().width;
+    this.inputElement.addEventListener('input', () => {
+      this.startSlotChanged();
     });
-    const inputElement = this.host.querySelector('input.form-control');
-    if (inputElement) {
-      inputElement.style.paddingRight = paddingRight + 'px';
-      inputElement.style.paddingLeft = paddingLeft + 'px';
+    (_a = this.inputElement.form) === null || _a === void 0 ? void 0 : _a.addEventListener('submit', () => {
+      this.startSlotChanged();
+    });
+    valid ? this.onValidInput() : this.onInvalidInput();
+  }
+  componentDidRender() {
+    this.prepareInputElement();
+  }
+  onValidInput() {
+    this.startSlotChanged();
+  }
+  onInvalidInput() {
+    this.startSlotChanged();
+  }
+  prepareInputElement() {
+    if (this.inputElement) {
+      this.inputElement.style.width = '100%';
+      if (this.inputPaddingRight !== 0) {
+        this.inputElement.style.paddingRight = this.inputPaddingRight + 'px';
+      }
+      else {
+        this.inputElement.style.paddingRight = 'none';
+      }
+      if (this.inputPaddingLeft !== 0) {
+        this.inputElement.style.paddingLeft = this.inputPaddingLeft + 'px';
+      }
+      else {
+        this.inputElement.style.paddingLeft = 'none';
+      }
     }
     else {
-      console.warn('You used the ix-input-group without an input-tag, e.g. <input class="form-control" />');
+      console.warn('You used the ix-input-group without an input tag, e.g. <input class="form-control" />');
     }
   }
+  startSlotChanged() {
+    const slot = this.hostElement.shadowRoot.querySelector('slot[name="input-start"]');
+    setTimeout(() => {
+      var _a, _b;
+      const startPadding = this.getChildrenWidth(slot);
+      if (startPadding !== 0) {
+        this.inputPaddingLeft = 15 + startPadding;
+      }
+      if (!this.inputElement) {
+        return;
+      }
+      if ((((_a = this.inputElement.form) === null || _a === void 0 ? void 0 : _a.classList.contains('was-validated')) ||
+        ((_b = this.inputElement.form) === null || _b === void 0 ? void 0 : _b.noValidate) === false) &&
+        !this.inputElement.validity.valid) {
+        this.inputElement.style.backgroundPositionX = `${this.inputPaddingLeft}px`;
+        this.inputPaddingLeft += 32;
+      }
+    });
+  }
+  endSlotChanged() {
+    const slot = this.hostElement.shadowRoot.querySelector('slot[name="input-end"]');
+    setTimeout(() => {
+      this.inputPaddingRight = 15 + this.getChildrenWidth(slot);
+    });
+  }
+  getChildrenWidth(slotElement) {
+    if (!slotElement) {
+      return 0;
+    }
+    const endElements = getSlottedElements(slotElement);
+    if (endElements.length === 0) {
+      return 0;
+    }
+    let width = 0;
+    endElements.forEach((element) => {
+      width += element.getBoundingClientRect().width;
+    });
+    return width;
+  }
   render() {
-    return (h(Host, null, h("div", { class: "group group-start" }, h("slot", { name: "input-start" })), h("slot", null), h("div", { class: "group group-end" }, h("slot", { name: "input-end" }))));
+    return (h(Host, null, h("div", { class: "group group-start" }, h("slot", { name: "input-start", onSlotchange: () => this.startSlotChanged() })), h("slot", null), h("div", { class: "group group-end" }, h("slot", { name: "input-end", onSlotchange: () => this.endSlotChanged() }))));
   }
-  get host() { return getElement(this); }
+  get hostElement() { return getElement(this); }
 };
 InputGroup.style = inputGroupCss;
 

package/dist/esm/ix-input-group.entry.js.map

@@ -1 +1 @@
-{"file":"ix-input-group.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,0ZAA0Z;;MCgBna,UAAU;;;;EAGrB,kBAAkB;IAChB,IAAI,YAAY,GAAG,EAAE,CAAC;IACtB,IAAI,WAAW,GAAG,EAAE,CAAC;IACrB,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI;MAC5D,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;MACxC,YAAY,IAAI,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;KACpD,CAAC,CAAC;IAEH,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,sBAAsB,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI;MAC9D,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;MACxC,WAAW,IAAI,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;KACnD,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAC1C,oBAAoB,CACD,CAAC;IAEtB,IAAI,YAAY,EAAE;MAChB,YAAY,CAAC,KAAK,CAAC,YAAY,GAAG,YAAY,GAAG,IAAI,CAAC;MACtD,YAAY,CAAC,KAAK,CAAC,WAAW,GAAG,WAAW,GAAG,IAAI,CAAC;KACrD;SAAM;MACL,OAAO,CAAC,IAAI,CACV,uFAAuF,CACxF,CAAC;KACH;GACF;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,mBAAmB,IAC5B,YAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,EACN,eAAa,EACb,WAAK,KAAK,EAAC,iBAAiB,IAC1B,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B,CACD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/input-group/input-group.scss?tag=ix-input-group&encapsulation=scoped","./src/components/input-group/input-group.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: stretch;\n  width: 100%;\n\n  .group {\n    display: flex;\n    position: absolute;\n    align-items: center;\n    height: 100%;\n  }\n\n  .group-start {\n    left: 0px;\n    height: 2rem;\n  }\n\n  .group-end {\n    right: 0px;\n    height: 2rem;\n  }\n\n  ::slotted(*) {\n    display: flex;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'ix-input-group',\n  styleUrl: 'input-group.scss',\n  scoped: true,\n})\nexport class InputGroup {\n  @Element() host!: HTMLIxInputGroupElement;\n\n  componentDidRender() {\n    let paddingRight = 15;\n    let paddingLeft = 15;\n    this.host.querySelectorAll('[slot=\"input-end\"]').forEach((item) => {\n      item.classList.add('input-group-label');\n      paddingRight += item.getBoundingClientRect().width;\n    });\n\n    this.host.querySelectorAll('[slot=\"input-start\"]').forEach((item) => {\n      item.classList.add('input-group-label');\n      paddingLeft += item.getBoundingClientRect().width;\n    });\n\n    const inputElement = this.host.querySelector(\n      'input.form-control'\n    ) as HTMLInputElement;\n\n    if (inputElement) {\n      inputElement.style.paddingRight = paddingRight + 'px';\n      inputElement.style.paddingLeft = paddingLeft + 'px';\n    } else {\n      console.warn(\n        'You used the ix-input-group without an input-tag, e.g. <input class=\"form-control\" />'\n      );\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"group group-start\">\n          <slot name=\"input-start\"></slot>\n        </div>\n        <slot></slot>\n        <div class=\"group group-end\">\n          <slot name=\"input-end\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-input-group.entry.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,49BAA49B;;MCiBr+B,UAAU;;;4BAGO,CAAC;6BACA,CAAC;;EAE9B,IAAY,YAAY;IACtB,OAAO,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,OAAO,CAAqB,CAAC;GACpE;EAED,iBAAiB;;IACf,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;IAC7C,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,OAAO,EAAE;MAC1C,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB,CAAC,CAAC;IACH,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,SAAS,EAAE;MAC5C,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB,CAAC,CAAC;IACH,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,OAAO,EAAE;MAC1C,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB,CAAC,CAAC;IAEH,MAAA,IAAI,CAAC,YAAY,CAAC,IAAI,0CAAE,gBAAgB,CAAC,QAAQ,EAAE;MACjD,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB,CAAC,CAAC;IAEH,KAAK,GAAG,IAAI,CAAC,YAAY,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;GACrD;EAED,kBAAkB;IAChB,IAAI,CAAC,mBAAmB,EAAE,CAAC;GAC5B;EAEO,YAAY;IAClB,IAAI,CAAC,gBAAgB,EAAE,CAAC;GACzB;EAEO,cAAc;IACpB,IAAI,CAAC,gBAAgB,EAAE,CAAC;GACzB;EAEO,mBAAmB;IACzB,IAAI,IAAI,CAAC,YAAY,EAAE;MACrB,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;MAEvC,IAAI,IAAI,CAAC,iBAAiB,KAAK,CAAC,EAAE;QAChC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;OACtE;WAAM;QACL,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,YAAY,GAAG,MAAM,CAAC;OAC/C;MAED,IAAI,IAAI,CAAC,gBAAgB,KAAK,CAAC,EAAE;QAC/B,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;OACpE;WAAM;QACL,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,WAAW,GAAG,MAAM,CAAC;OAC9C;KACF;SAAM;MACL,OAAO,CAAC,IAAI,CACV,uFAAuF,CACxF,CAAC;KACH;GACF;EAEO,gBAAgB;IACtB,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CACpD,0BAA0B,CAC3B,CAAC;IACF,UAAU,CAAC;;MACT,MAAM,YAAY,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;MAEjD,IAAI,YAAY,KAAK,CAAC,EAAE;QACtB,IAAI,CAAC,gBAAgB,GAAG,EAAE,GAAG,YAAY,CAAC;OAC3C;MAED,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;QACtB,OAAO;OACR;MAED,IACE,CAAC,CAAA,MAAA,IAAI,CAAC,YAAY,CAAC,IAAI,0CAAE,SAAS,CAAC,QAAQ,CAAC,eAAe,CAAC;QAC1D,CAAA,MAAA,IAAI,CAAC,YAAY,CAAC,IAAI,0CAAE,UAAU,MAAK,KAAK;QAC9C,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,KAAK,EACjC;QACA,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,mBAAmB,GAAG,GAAG,IAAI,CAAC,gBAAgB,IAAI,CAAC;QAC3E,IAAI,CAAC,gBAAgB,IAAI,EAAE,CAAC;OAC7B;KACF,CAAC,CAAC;GACJ;EAEO,cAAc;IACpB,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,aAAa,CACpD,wBAAwB,CACzB,CAAC;IAEF,UAAU,CAAC;MACT,IAAI,CAAC,iBAAiB,GAAG,EAAE,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;KAC3D,CAAC,CAAC;GACJ;EAEO,gBAAgB,CAAC,WAAoB;IAC3C,IAAI,CAAC,WAAW,EAAE;MAChB,OAAO,CAAC,CAAC;KACV;IAED,MAAM,WAAW,GAAG,kBAAkB,CAAc,WAAW,CAAC,CAAC;IACjE,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE;MAC5B,OAAO,CAAC,CAAC;KACV;IAED,IAAI,KAAK,GAAG,CAAC,CAAC;IAEd,WAAW,CAAC,OAAO,CAAC,CAAC,OAAO;MAC1B,KAAK,IAAI,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;KAChD,CAAC,CAAC;IAEH,OAAO,KAAK,CAAC;GACd;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,mBAAmB,IAC5B,YACE,IAAI,EAAC,aAAa,EAClB,YAAY,EAAE,MAAM,IAAI,CAAC,gBAAgB,EAAE,GACrC,CACJ,EACN,eAAa,EACb,WAAK,KAAK,EAAC,iBAAiB,IAC1B,YACE,IAAI,EAAC,WAAW,EAChB,YAAY,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,GACnC,CACJ,CACD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/input-group/input-group.scss?tag=ix-input-group&encapsulation=shadow","./src/components/input-group/input-group.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  position: relative;\n  display: flex;\n  width: 100%;\n  flex-wrap: wrap;\n  align-items: stretch;\n\n  .group {\n    display: flex;\n    position: absolute;\n    align-items: center;\n    height: 100%;\n  }\n\n  .group-start {\n    left: 0px;\n    height: 2rem;\n    margin-left: 0.375rem;\n    color: var(--theme-color-soft-text);\n  }\n\n  .group-end {\n    right: 0px;\n    height: 2rem;\n    margin-right: 0.375rem;\n    color: var(--theme-color-soft-text);\n  }\n\n  ::slotted(*) {\n    display: flex;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, State } from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n  tag: 'ix-input-group',\n  styleUrl: 'input-group.scss',\n  shadow: true,\n})\nexport class InputGroup {\n  @Element() hostElement!: HTMLIxInputGroupElement;\n\n  @State() inputPaddingLeft = 0;\n  @State() inputPaddingRight = 0;\n\n  private get inputElement() {\n    return this.hostElement.querySelector('input') as HTMLInputElement;\n  }\n\n  componentWillLoad() {\n    const { valid } = this.inputElement.validity;\n    this.inputElement.addEventListener('valid', () => {\n      this.onValidInput();\n    });\n    this.inputElement.addEventListener('invalid', () => {\n      this.onInvalidInput();\n    });\n    this.inputElement.addEventListener('input', () => {\n      this.startSlotChanged();\n    });\n\n    this.inputElement.form?.addEventListener('submit', () => {\n      this.startSlotChanged();\n    });\n\n    valid ? this.onValidInput() : this.onInvalidInput();\n  }\n\n  componentDidRender() {\n    this.prepareInputElement();\n  }\n\n  private onValidInput() {\n    this.startSlotChanged();\n  }\n\n  private onInvalidInput() {\n    this.startSlotChanged();\n  }\n\n  private prepareInputElement() {\n    if (this.inputElement) {\n      this.inputElement.style.width = '100%';\n\n      if (this.inputPaddingRight !== 0) {\n        this.inputElement.style.paddingRight = this.inputPaddingRight + 'px';\n      } else {\n        this.inputElement.style.paddingRight = 'none';\n      }\n\n      if (this.inputPaddingLeft !== 0) {\n        this.inputElement.style.paddingLeft = this.inputPaddingLeft + 'px';\n      } else {\n        this.inputElement.style.paddingLeft = 'none';\n      }\n    } else {\n      console.warn(\n        'You used the ix-input-group without an input tag, e.g. <input class=\"form-control\" />'\n      );\n    }\n  }\n\n  private startSlotChanged() {\n    const slot = this.hostElement.shadowRoot.querySelector(\n      'slot[name=\"input-start\"]'\n    );\n    setTimeout(() => {\n      const startPadding = this.getChildrenWidth(slot);\n\n      if (startPadding !== 0) {\n        this.inputPaddingLeft = 15 + startPadding;\n      }\n\n      if (!this.inputElement) {\n        return;\n      }\n\n      if (\n        (this.inputElement.form?.classList.contains('was-validated') ||\n          this.inputElement.form?.noValidate === false) &&\n        !this.inputElement.validity.valid\n      ) {\n        this.inputElement.style.backgroundPositionX = `${this.inputPaddingLeft}px`;\n        this.inputPaddingLeft += 32;\n      }\n    });\n  }\n\n  private endSlotChanged() {\n    const slot = this.hostElement.shadowRoot.querySelector(\n      'slot[name=\"input-end\"]'\n    );\n\n    setTimeout(() => {\n      this.inputPaddingRight = 15 + this.getChildrenWidth(slot);\n    });\n  }\n\n  private getChildrenWidth(slotElement: Element) {\n    if (!slotElement) {\n      return 0;\n    }\n\n    const endElements = getSlottedElements<HTMLElement>(slotElement);\n    if (endElements.length === 0) {\n      return 0;\n    }\n\n    let width = 0;\n\n    endElements.forEach((element) => {\n      width += element.getBoundingClientRect().width;\n    });\n\n    return width;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"group group-start\">\n          <slot\n            name=\"input-start\"\n            onSlotchange={() => this.startSlotChanged()}\n          ></slot>\n        </div>\n        <slot></slot>\n        <div class=\"group group-end\">\n          <slot\n            name=\"input-end\"\n            onSlotchange={() => this.endSlotChanged()}\n          ></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ix-key-value-list.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-7334ee80.js';
+import { r as registerInstance, h, H as Host } from './index-eb0be730.js';
 
 const keyValueListCss = ":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/esm/ix-key-value.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-7334ee80.js';
+import { r as registerInstance, h, H as Host } from './index-eb0be730.js';
 
 const keyValueCss = ":host(.keyValue){display:flex;flex-direction:row;align-items:center;gap:1rem}:host(.keyValue) .keyValue__icon{padding:0.25rem 0}:host(.keyValue) .keyValue__content{display:flex;align-items:flex-start}:host(.keyValue) .keyValue__content .content__label{color:var(--theme-color-soft-text)}:host(.keyValue.keyValue--column){padding:0.5rem 0;border-bottom:1px solid var(--theme-color-soft-bdr)}:host(.keyValue.keyValue--column) .keyValue__content{flex-direction:column}:host(.keyValue.keyValue--column) .keyValue__content .content__label,:host(.keyValue.keyValue--column) .keyValue__content .content__value:not(.has-customValue){padding:2px 0}:host(.keyValue.keyValue--row){padding:0.25rem 0}:host(.keyValue.keyValue--row) .keyValue__content{flex-direction:row;gap:1rem;align-items:center}:host(.keyValue.keyValue--row) .keyValue__content .content__label,:host(.keyValue.keyValue--row) .keyValue__content .content__value:not(.has-customValue){padding:6px 0}:host(.keyValue.keyValue--row) .keyValue__content .content__label{min-width:8rem}";
 

package/dist/esm/ix-kpi.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-7334ee80.js';
+import { r as registerInstance, h, H as Host } from './index-eb0be730.js';
 
-const kpiCss = ":host{display:flex;flex-grow:1;height:2.5rem;border-radius:var(--theme-kpi--border-radius);padding:0.375rem 0.25rem;min-width:0}:host *,:host *::after,:host *::before{box-sizing:border-box}:host span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .kpi-container{display:flex;height:100%;width:100%;-webkit-border-after:2px solid grey;border-block-end:2px solid grey}:host .kpi-container.alarm{border-block-end-color:var(--theme-color-alarm)}:host .kpi-container.warning{border-block-end-color:var(--theme-color-warning)}:host .kpi-container .kpi-label{display:flex;align-items:center;color:var(--theme-kpi-display-label--color);flex-grow:1;flex-shrink:9999}:host .kpi-container .kpi-label ix-icon{-webkit-margin-end:0.25rem;margin-inline-end:0.25rem}:host .kpi-container .kpi-value-container{display:flex;align-items:flex-end}:host .kpi-container .kpi-value{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text);color:var(--theme-kpi-display-value--color)}:host .kpi-container .kpi-unit{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem;color:var(--theme-kpi-display-units--color)}:host .kpi-container .kpi-label,:host .kpi-container .kpi-unit{-webkit-margin-before:0.125rem;margin-block-start:0.125rem}:host:not(.disabled):not(:disabled){cursor:pointer}:host:not(.disabled):not(:disabled):hover{background-color:var(--theme-kpi-display--background--hover)}:host:not(.disabled):not(:disabled){cursor:pointer}:host:not(.disabled):not(:disabled):active{background-color:var(--theme-kpi-display--background--active)}: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}";
+const kpiCss = ":host{display:flex;flex-grow:1;height:2.5rem;border-radius:var(--theme-kpi--border-radius);padding:0.375rem 0.25rem;min-width:0}: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 span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .kpi-container{display:flex;height:100%;width:100%;-webkit-border-after:2px solid grey;border-block-end:2px solid grey}:host .kpi-container.alarm{border-block-end-color:var(--theme-color-alarm)}:host .kpi-container.warning{border-block-end-color:var(--theme-color-warning)}:host .kpi-container .kpi-label{display:flex;align-items:center;color:var(--theme-kpi-display-label--color);flex-grow:1;flex-shrink:9999}:host .kpi-container .kpi-label ix-icon{-webkit-margin-end:0.25rem;margin-inline-end:0.25rem}:host .kpi-container .kpi-value-container{display:flex;align-items:flex-end}:host .kpi-container .kpi-value{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text);color:var(--theme-kpi-display-value--color)}:host .kpi-container .kpi-unit{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem;color:var(--theme-kpi-display-units--color)}:host .kpi-container .kpi-label,:host .kpi-container .kpi-unit{-webkit-margin-before:0.125rem;margin-block-start:0.125rem}:host:not(.disabled):not(:disabled){cursor:pointer}:host:not(.disabled):not(:disabled):hover{background-color:var(--theme-kpi-display--background--hover)}:host:not(.disabled):not(:disabled){cursor:pointer}:host:not(.disabled):not(:disabled):active,:host:not(.disabled):not(:disabled).active{background-color:var(--theme-kpi-display--background--active)}: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}";
 
 const Kpi = class {
   constructor(hostRef) {
@@ -14,9 +14,9 @@ const Kpi = class {
   getStateIcon() {
     switch (this.state) {
       case 'alarm':
-        return (h("ix-icon", { color: "kpi-display-icon--color", name: "alarm", size: "16" }));
+        return (h("ix-icon", { color: "kpi-display-icon--color", name: 'alarm', size: "16" }));
       case 'warning':
-        return (h("ix-icon", { color: "kpi-display-icon--color", name: "warning", size: "16" }));
+        return (h("ix-icon", { color: "kpi-display-icon--color", name: 'warning', size: "16" }));
       default:
         return '';
     }

package/dist/esm/ix-kpi.entry.js.map

@@ -1 +1 @@
-{"file":"ix-kpi.entry.js","mappings":";;AAAA,MAAM,MAAM,GAAG,45DAA45D;;MCgB95D,GAAG;;;;;;iBAmBmC,SAAS;uBAKT,YAAY;;EAErD,YAAY;IAClB,QAAQ,IAAI,CAAC,KAAK;MAChB,KAAK,OAAO;QACV,QACE,eACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,IAAI,GACA,EACX;MAEJ,KAAK,SAAS;QACZ,QACE,eACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAC,SAAS,EACd,IAAI,EAAC,IAAI,GACA,EACX;MAEJ;QACE,OAAO,EAAE,CAAC;KACb;GACF;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;GAChB;EAED,MAAM;IACJ,QACE,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,IAED,WACE,KAAK,EAAE;QACL,eAAe,EAAE,IAAI;QACrB,KAAK,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;QAC7B,OAAO,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;OAClC,IAED,YAAM,KAAK,EAAC,WAAW,IACpB,IAAI,CAAC,YAAY,EAAE,EACpB,YAAM,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC3C,EACP,YAAM,KAAK,EAAC,qBAAqB,IAC/B,YAAM,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,KAAK,CAAQ,EAC1C,IAAI,CAAC,IAAI,GAAG,YAAM,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,IAAI,CAAQ,GAAG,EAAE,CACtD,CACH,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/kpi/kpi.scss?tag=ix-kpi&encapsulation=shadow","./src/components/kpi/kpi.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  flex-grow: 1;\n  height: $large-control-height;\n  border-radius: var(--theme-kpi--border-radius);\n  padding: 0.375rem $tiny-space;\n  min-width: 0;\n\n  span {\n    @include ellipsis;\n  }\n\n  .kpi-container {\n    display: flex;\n    height: 100%;\n    width: 100%;\n    border-block-end: 2px solid grey;\n\n    &.alarm {\n      border-block-end-color: var(--theme-color-alarm);\n    }\n\n    &.warning {\n      border-block-end-color: var(--theme-color-warning);\n    }\n\n    .kpi-label {\n      display: flex;\n      align-items: center;\n      color: var(--theme-kpi-display-label--color);\n      flex-grow: 1;\n      flex-shrink: 9999;\n\n      ix-icon {\n        margin-inline-end: $tiny-space;\n      }\n    }\n\n    .kpi-value-container {\n      display: flex;\n      align-items: flex-end;\n    }\n\n    .kpi-value {\n      @include text-xl;\n\n      color: var(--theme-kpi-display-value--color);\n    }\n\n    .kpi-unit {\n      margin-inline-start: $small-space;\n      color: var(--theme-kpi-display-units--color);\n    }\n\n    .kpi-label,\n    .kpi-unit {\n      margin-block-start: 0.125rem;\n    }\n  }\n\n  @include hover {\n    background-color: var(--theme-kpi-display--background--hover);\n  }\n\n  @include active {\n    background-color: var(--theme-kpi-display--background--active);\n  }\n\n  @include focus-visible {\n    outline: 1px solid var(--focus--border-color);\n  }\n}\n\n:host(.stacked) {\n  height: 3.75rem;\n\n  .kpi-container {\n    justify-content: center;\n    flex-wrap: wrap;\n\n    .kpi-label {\n      width: 100%;\n      justify-content: center;\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { 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":"ix-kpi.entry.js","mappings":";;AAAA,MAAM,MAAM,GAAG,s+EAAs+E;;MCgBx+E,GAAG;;;;;;iBAmBmC,SAAS;uBAKT,YAAY;;EAErD,YAAY;IAClB,QAAQ,IAAI,CAAC,KAAK;MAChB,KAAK,OAAO;QACV,QACE,eACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAE,OAAO,EACb,IAAI,EAAC,IAAI,GACA,EACX;MAEJ,KAAK,SAAS;QACZ,QACE,eACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAE,SAAS,EACf,IAAI,EAAC,IAAI,GACA,EACX;MAEJ;QACE,OAAO,EAAE,CAAC;KACb;GACF;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;GAChB;EAED,MAAM;IACJ,QACE,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,IAED,WACE,KAAK,EAAE;QACL,eAAe,EAAE,IAAI;QACrB,KAAK,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;QAC7B,OAAO,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;OAClC,IAED,YAAM,KAAK,EAAC,WAAW,IACpB,IAAI,CAAC,YAAY,EAAE,EACpB,YAAM,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC3C,EACP,YAAM,KAAK,EAAC,qBAAqB,IAC/B,YAAM,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,KAAK,CAAQ,EAC1C,IAAI,CAAC,IAAI,GAAG,YAAM,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,IAAI,CAAQ,GAAG,EAAE,CACtD,CACH,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/kpi/kpi.scss?tag=ix-kpi&encapsulation=shadow","./src/components/kpi/kpi.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'legacy/mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  flex-grow: 1;\n  height: $large-control-height;\n  border-radius: var(--theme-kpi--border-radius);\n  padding: 0.375rem $tiny-space;\n  min-width: 0;\n\n  span {\n    @include ellipsis;\n  }\n\n  .kpi-container {\n    display: flex;\n    height: 100%;\n    width: 100%;\n    border-block-end: 2px solid grey;\n\n    &.alarm {\n      border-block-end-color: var(--theme-color-alarm);\n    }\n\n    &.warning {\n      border-block-end-color: var(--theme-color-warning);\n    }\n\n    .kpi-label {\n      display: flex;\n      align-items: center;\n      color: var(--theme-kpi-display-label--color);\n      flex-grow: 1;\n      flex-shrink: 9999;\n\n      ix-icon {\n        margin-inline-end: $tiny-space;\n      }\n    }\n\n    .kpi-value-container {\n      display: flex;\n      align-items: flex-end;\n    }\n\n    .kpi-value {\n      @include text-xl;\n\n      color: var(--theme-kpi-display-value--color);\n    }\n\n    .kpi-unit {\n      margin-inline-start: $small-space;\n      color: var(--theme-kpi-display-units--color);\n    }\n\n    .kpi-label,\n    .kpi-unit {\n      margin-block-start: 0.125rem;\n    }\n  }\n\n  @include hover {\n    background-color: var(--theme-kpi-display--background--hover);\n  }\n\n  @include active {\n    background-color: var(--theme-kpi-display--background--active);\n  }\n\n  @include focus-visible {\n    outline: 1px solid var(--focus--border-color);\n  }\n}\n\n:host(.stacked) {\n  height: 3.75rem;\n\n  .kpi-container {\n    justify-content: center;\n    flex-wrap: wrap;\n\n    .kpi-label {\n      width: 100%;\n      justify-content: center;\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { 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}

package/dist/esm/ix-layout-grid.entry.js

@@ -0,0 +1,25 @@
+import { r as registerInstance, h, H as Host } from './index-eb0be730.js';
+
+const layoutGridCss = ":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}";
+
+const LayoutGrid = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.noMargin = false;
+    this.gap = '24';
+    this.columns = 12;
+  }
+  render() {
+    return (h(Host, { class: {
+        'no-margin': this.noMargin,
+      }, style: {
+        '--ix-layout-grid-columns': `${this.columns}`,
+        '--ix-layout-grid-gutter': `${this.gap}px`,
+      } }, h("slot", null)));
+  }
+};
+LayoutGrid.style = layoutGridCss;
+
+export { LayoutGrid as ix_layout_grid };
+
+//# sourceMappingURL=ix-layout-grid.entry.js.map

package/dist/esm/ix-layout-grid.entry.js.map

@@ -0,0 +1 @@
+{"file":"ix-layout-grid.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,wOAAwO;;MCmBjP,UAAU;;;oBAIF,KAAK;eAKgB,IAAI;mBAK1B,EAAE;;EAEpB,MAAM;IACJ,QACE,EAAC,IAAI,IACH,KAAK,EAAE;QACL,WAAW,EAAE,IAAI,CAAC,QAAQ;OAC3B,EACD,KAAK,EAAE;QACL,0BAA0B,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE;QAC7C,yBAAyB,EAAE,GAAG,IAAI,CAAC,GAAG,IAAI;OAC3C,IAED,eAAa,CACR,EACP;GACH;;;;;;","names":[],"sources":["./src/components/grid/layout-grid.scss?tag=ix-layout-grid&encapsulation=shadow","./src/components/grid/layout-grid.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n:host {\n  --ix-layout-grid-gutter: 24px;\n\n  display: block;\n  flex: 1 1 0%;\n  width: 100%;\n\n  padding-left: calc(var(--ix-layout-grid-gutter) * 0.5);\n  padding-right: calc(var(--ix-layout-grid-gutter) * 0.5);\n}\n\n:host(.no-margin) {\n  padding-left: 0;\n  padding-right: 0;\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';\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"],"version":3}

package/dist/esm/ix-link-button.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-7334ee80.js';
+import { r as registerInstance, h, H as Host } from './index-eb0be730.js';
 
-const linkButtonCss = ".btn{display:inline-flex;align-items:center;justify-content:center;height:2rem;font-size:0.875rem;font-weight:700;transition:150ms;padding:0 0.5rem;min-width:5rem;gap:0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn .glyph{margin-right:0.25rem;font-weight:400}.btn:focus-visible,.btn.focus{box-shadow:none}.btn-primary{border-radius:var(--theme-btn--border-radius)}.btn-primary,.btn-primary.focus,.btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}.btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-primary.selected{background-color:var(--theme-btn-primary--background--selected)}.btn-primary.hover,.btn-primary:hover{border-color:var(--theme-btn-primary--border-color--hover) !important;background-color:var(--theme-btn-primary--background--hover) !important;color:var(--theme-btn-primary--color--hover) !important}.btn-primary.selected.hover,.btn-primary.selected:hover{background-color:var(--theme-btn-primary--background--selected-hover);color:var(--theme-btn-primary--color--selected-hover)}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{border-color:var(--theme-btn-primary--border-color--active) !important;background-color:var(--theme-btn-primary--background--active) !important;color:var(--theme-btn-primary--color--active) !important}.btn-primary.selected:not(:disabled):not(.disabled):active,.btn-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-primary.selected.dropdown-toggle{background-color:var(--theme-btn-primary--background--selected-active);color:var(--theme-btn-primary--color--selected-active)}.btn-primary.disabled,.btn-primary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}.btn-outline-primary{border-radius:var(--theme-btn--border-radius)}.btn-outline-primary,.btn-outline-primary.focus,.btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);--ix-button-color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}.btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-outline-primary.selected{background-color:var(--theme-btn-outline-primary--background--selected)}.btn-outline-primary.hover,.btn-outline-primary:hover{border-color:var(--theme-btn-outline-primary--border-color--hover) !important;background-color:var(--theme-btn-outline-primary--background--hover) !important;color:var(--theme-btn-outline-primary--color--hover) !important}.btn-outline-primary.selected.hover,.btn-outline-primary.selected:hover{background-color:var(--theme-btn-outline-primary--background--selected-hover);color:var(--theme-btn-outline-primary--color--selected-hover)}.btn-outline-primary:not(:disabled):not(.disabled):active,.btn-outline-primary:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.dropdown-toggle{border-color:var(--theme-btn-outline-primary--border-color--active) !important;background-color:var(--theme-btn-outline-primary--background--active) !important;color:var(--theme-btn-outline-primary--color--active) !important}.btn-outline-primary.selected:not(:disabled):not(.disabled):active,.btn-outline-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.selected.dropdown-toggle{background-color:var(--theme-btn-outline-primary--background--selected-active);color:var(--theme-btn-outline-primary--color--selected-active)}.btn-outline-primary.disabled,.btn-outline-primary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-primary--color--disabled)}.btn-invisible-primary{border-radius:var(--theme-btn--border-radius);--bs-btn-border-width:0px;--bs-btn-active-border-color:none}.btn-invisible-primary,.btn-invisible-primary.focus,.btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}.btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-invisible-primary.selected{background-color:var(--theme-btn-invisible-primary--background--selected)}.btn-invisible-primary.hover,.btn-invisible-primary:hover{background-color:var(--theme-btn-invisible-primary--background--hover) !important;color:var(--theme-btn-invisible-primary--color--hover) !important}.btn-invisible-primary.selected.hover,.btn-invisible-primary.selected:hover{background-color:var(--theme-btn-invisible-primary--background--selected-hover);color:var(--theme-btn-invisible-primary--color--selected-hover)}.btn-invisible-primary:not(:disabled):not(.disabled):active,.btn-invisible-primary:not(:disabled):not(.disabled).active,.show>.btn-invisible-primary.dropdown-toggle{background-color:var(--theme-btn-invisible-primary--background--active) !important;color:var(--theme-btn-invisible-primary--color--active) !important}.btn-invisible-primary.selected:not(:disabled):not(.disabled):active,.btn-invisible-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-invisible-primary.selected.dropdown-toggle{background-color:var(--theme-btn-invisible-primary--background--selected-active);color:var(--theme-btn-invisible-primary--color--selected-active)}.btn-invisible-primary.disabled,.btn-invisible-primary:disabled{pointer-events:none;cursor:initial;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-primary--color--disabled)}.btn-secondary{border-radius:var(--theme-btn--border-radius)}.btn-secondary,.btn-secondary.focus,.btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}.btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-secondary.selected{background-color:var(--theme-btn-secondary--background--selected)}.btn-secondary.hover,.btn-secondary:hover{border-color:var(--theme-btn-secondary--border-color--hover) !important;background-color:var(--theme-btn-secondary--background--hover) !important;color:var(--theme-btn-secondary--color--hover) !important}.btn-secondary.selected.hover,.btn-secondary.selected:hover{background-color:var(--theme-btn-secondary--background--selected-hover);color:var(--theme-btn-secondary--color--selected-hover)}.btn-secondary:not(:disabled):not(.disabled):active,.btn-secondary:not(:disabled):not(.disabled).active,.show>.btn-secondary.dropdown-toggle{border-color:var(--theme-btn-secondary--border-color--active) !important;background-color:var(--theme-btn-secondary--background--active) !important;color:var(--theme-btn-secondary--color--active) !important}.btn-secondary.selected:not(:disabled):not(.disabled):active,.btn-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-secondary.selected.dropdown-toggle{background-color:var(--theme-btn-secondary--background--selected-active);color:var(--theme-btn-secondary--color--selected-active)}.btn-secondary.disabled,.btn-secondary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}.btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}.btn-outline-secondary,.btn-outline-secondary.focus,.btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);--ix-button-color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}.btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-outline-secondary.selected{background-color:var(--theme-btn-outline-secondary--background--selected)}.btn-outline-secondary.hover,.btn-outline-secondary:hover{border-color:var(--theme-btn-outline-secondary--border-color--hover) !important;background-color:var(--theme-btn-outline-secondary--background--hover) !important;color:var(--theme-btn-outline-secondary--color--hover) !important}.btn-outline-secondary.selected.hover,.btn-outline-secondary.selected:hover{background-color:var(--theme-btn-outline-secondary--background--selected-hover);color:var(--theme-btn-outline-secondary--color--selected-hover)}.btn-outline-secondary:not(:disabled):not(.disabled):active,.btn-outline-secondary:not(:disabled):not(.disabled).active,.show>.btn-outline-secondary.dropdown-toggle{border-color:var(--theme-btn-outline-secondary--border-color--active) !important;background-color:var(--theme-btn-outline-secondary--background--active) !important;color:var(--theme-btn-outline-secondary--color--active) !important}.btn-outline-secondary.selected:not(:disabled):not(.disabled):active,.btn-outline-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-outline-secondary.selected.dropdown-toggle{background-color:var(--theme-btn-outline-secondary--background--selected-active);color:var(--theme-btn-outline-secondary--color--selected-active)}.btn-outline-secondary.disabled,.btn-outline-secondary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-secondary--color--disabled)}.btn-invisible-secondary{border-radius:var(--theme-btn--border-radius);--bs-btn-border-width:0px;--bs-btn-active-border-color:none}.btn-invisible-secondary,.btn-invisible-secondary.focus,.btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);--ix-button-color:var(--theme-btn-invisible-secondary--color);border-color:transparent}.btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-invisible-secondary.selected{background-color:var(--theme-btn-invisible-secondary--background--selected)}.btn-invisible-secondary.hover,.btn-invisible-secondary:hover{background-color:var(--theme-btn-invisible-secondary--background--hover) !important;color:var(--theme-btn-invisible-secondary--color--hover) !important}.btn-invisible-secondary.selected.hover,.btn-invisible-secondary.selected:hover{background-color:var(--theme-btn-invisible-secondary--background--selected-hover);color:var(--theme-btn-invisible-secondary--color--selected-hover)}.btn-invisible-secondary:not(:disabled):not(.disabled):active,.btn-invisible-secondary:not(:disabled):not(.disabled).active,.show>.btn-invisible-secondary.dropdown-toggle{background-color:var(--theme-btn-invisible-secondary--background--active) !important;color:var(--theme-btn-invisible-secondary--color--active) !important}.btn-invisible-secondary.selected:not(:disabled):not(.disabled):active,.btn-invisible-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-invisible-secondary.selected.dropdown-toggle{background-color:var(--theme-btn-invisible-secondary--background--selected-active);color:var(--theme-btn-invisible-secondary--color--selected-active)}.btn-invisible-secondary.disabled,.btn-invisible-secondary:disabled{pointer-events:none;cursor:initial;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}.btn-oval,.btn-icon{min-width:2rem;width:2rem}.btn-oval .glyph,.btn-icon .glyph{margin-right:0}.btn-oval{border-radius:6.25rem;width:2rem}.btn-icon-xs,.btn-icon-12{height:1rem;width:1rem;min-width:1rem;min-height:1rem}.btn-icon-s,.btn-icon-16{height:1.5rem;width:1.5rem;min-width:1.5rem;min-height:1.5rem}.btn-icon-32{height:2rem;width:2rem;min-width:2rem;min-height:2rem}:host{display:inline-flex;height:2rem;font-size:0.875rem;font-weight:400;min-width:2rem}:host .link-button{display:inline-flex;position:relative;width:100%;padding:0 0.25rem 0 0;align-items:center;justify-content:center;background-color:transparent;color:var(--theme-color-primary);cursor:pointer;text-decoration:none}:host .link-button .link{display:block;position:relative;width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host .link-button:not(.disabled):not(:disabled){cursor:pointer}:host .link-button:not(.disabled):not(:disabled):hover{color:var(--theme-color-dynamic--hover)}:host .link-button:not(.disabled):not(:disabled):hover .link{text-decoration:underline;text-underline-offset:0.2rem}:host .link-button:not(.disabled):not(:disabled){cursor:pointer}:host .link-button:not(.disabled):not(:disabled):active{color:var(--theme-color-dynamic--active)}:host .link-button:not(.disabled):not(:disabled):active .link{text-decoration:underline;text-underline-offset:0.2rem}:host .link-button.disabled{cursor:default;color:var(--theme-color-weak-text)}:host .link-button a{all:unset}:host :focus-visible{outline:1px solid var(--theme-color-focus-bdr)}";
+const linkButtonCss = ".btn{display:inline-flex;align-items:center;justify-content:center;height:2rem;font-size:0.875rem;font-weight:700;transition:150ms;padding:0 0.5rem;min-width:5rem;gap:0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn .glyph{margin-right:0.25rem;font-weight:400}.btn:focus-visible,.btn.focus{box-shadow:none}.btn-primary{border-radius:var(--theme-btn--border-radius)}.btn-primary,.btn-primary.focus,.btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}.btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-primary.hover,.btn-primary:hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}.btn-primary.selected.hover,.btn-primary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-primary:not(:disabled):not(.disabled):active,.btn-primary:not(:disabled):not(.disabled).active,.show>.btn-primary.dropdown-toggle{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}.btn-primary.selected:not(:disabled):not(.disabled):active,.btn-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-primary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-primary.disabled,.btn-primary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}.btn-outline-primary{border-radius:var(--theme-btn--border-radius)}.btn-outline-primary,.btn-outline-primary.focus,.btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);--ix-button-color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}.btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-outline-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-outline-primary.hover,.btn-outline-primary:hover{border-color:var(--theme-btn-outline-primary--border-color--hover);background-color:var(--theme-btn-outline-primary--background--hover);color:var(--theme-btn-outline-primary--color--hover)}.btn-outline-primary.selected.hover,.btn-outline-primary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-outline-primary:not(:disabled):not(.disabled):active,.btn-outline-primary:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.dropdown-toggle{border-color:var(--theme-btn-outline-primary--border-color--active);background-color:var(--theme-btn-outline-primary--background--active);color:var(--theme-btn-outline-primary--color--active)}.btn-outline-primary.selected:not(:disabled):not(.disabled):active,.btn-outline-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-outline-primary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-outline-primary.disabled,.btn-outline-primary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-primary--color--disabled)}.btn-invisible-primary{border-radius:var(--theme-btn--border-radius);--bs-btn-border-width:0px;--bs-btn-active-border-color:none}.btn-invisible-primary,.btn-invisible-primary.focus,.btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}.btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-invisible-primary.hover,.btn-invisible-primary:hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}.btn-invisible-primary.selected.hover,.btn-invisible-primary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-invisible-primary:not(:disabled):not(.disabled):active,.btn-invisible-primary:not(:disabled):not(.disabled).active,.show>.btn-invisible-primary.dropdown-toggle{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}.btn-invisible-primary.selected:not(:disabled):not(.disabled):active,.btn-invisible-primary.selected:not(:disabled):not(.disabled).active,.show>.btn-invisible-primary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-invisible-primary.disabled,.btn-invisible-primary:disabled{pointer-events:none;cursor:initial;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-primary--color--disabled)}.btn-secondary{border-radius:var(--theme-btn--border-radius)}.btn-secondary,.btn-secondary.focus,.btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}.btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-secondary.hover,.btn-secondary:hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}.btn-secondary.selected.hover,.btn-secondary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-secondary:not(:disabled):not(.disabled):active,.btn-secondary:not(:disabled):not(.disabled).active,.show>.btn-secondary.dropdown-toggle{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}.btn-secondary.selected:not(:disabled):not(.disabled):active,.btn-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-secondary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-secondary.disabled,.btn-secondary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}.btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}.btn-outline-secondary,.btn-outline-secondary.focus,.btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);--ix-button-color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}.btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-outline-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-outline-secondary.hover,.btn-outline-secondary:hover{border-color:var(--theme-btn-outline-secondary--border-color--hover);background-color:var(--theme-btn-outline-secondary--background--hover);color:var(--theme-btn-outline-secondary--color--hover)}.btn-outline-secondary.selected.hover,.btn-outline-secondary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-outline-secondary:not(:disabled):not(.disabled):active,.btn-outline-secondary:not(:disabled):not(.disabled).active,.show>.btn-outline-secondary.dropdown-toggle{border-color:var(--theme-btn-outline-secondary--border-color--active);background-color:var(--theme-btn-outline-secondary--background--active);color:var(--theme-btn-outline-secondary--color--active)}.btn-outline-secondary.selected:not(:disabled):not(.disabled):active,.btn-outline-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-outline-secondary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-outline-secondary.disabled,.btn-outline-secondary:disabled{pointer-events:none;cursor:initial;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-secondary--color--disabled)}.btn-invisible-secondary{border-radius:var(--theme-btn--border-radius);--bs-btn-border-width:0px;--bs-btn-active-border-color:none}.btn-invisible-secondary,.btn-invisible-secondary.focus,.btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);--ix-button-color:var(--theme-btn-invisible-secondary--color);border-color:transparent}.btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}.btn-invisible-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}.btn-invisible-secondary.hover,.btn-invisible-secondary:hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}.btn-invisible-secondary.selected.hover,.btn-invisible-secondary.selected:hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}.btn-invisible-secondary:not(:disabled):not(.disabled):active,.btn-invisible-secondary:not(:disabled):not(.disabled).active,.show>.btn-invisible-secondary.dropdown-toggle{background-color:var(--theme-btn-invisible-secondary--background--active);color:var(--theme-btn-invisible-secondary--color--active)}.btn-invisible-secondary.selected:not(:disabled):not(.disabled):active,.btn-invisible-secondary.selected:not(:disabled):not(.disabled).active,.show>.btn-invisible-secondary.selected.dropdown-toggle{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}.btn-invisible-secondary.disabled,.btn-invisible-secondary:disabled{pointer-events:none;cursor:initial;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}.btn-oval,.btn-icon{min-width:2rem;width:2rem}.btn-oval .glyph,.btn-icon .glyph{margin-right:0}.btn-oval{border-radius:6.25rem;width:2rem}.btn-icon-xs,.btn-icon-12{height:1rem;width:1rem;min-width:1rem;min-height:1rem}.btn-icon-s,.btn-icon-16{height:1.5rem;width:1.5rem;min-width:1.5rem;min-height:1.5rem}.btn-icon-32{height:2rem;width:2rem;min-width:2rem;min-height:2rem}:host{display:inline-flex;height:2rem;font-size:0.875rem;font-weight:400;min-width:2rem}:host .link-button{display:inline-flex;position:relative;width:100%;padding:0 0.25rem 0 0;align-items:center;justify-content:center;background-color:transparent;color:var(--theme-color-primary);cursor:pointer;text-decoration:none}:host .link-button .link{display:block;position:relative;width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host .link-button:not(.disabled):not(:disabled){cursor:pointer}:host .link-button:not(.disabled):not(:disabled):hover{color:var(--theme-color-dynamic--hover)}:host .link-button:not(.disabled):not(:disabled):hover .link{text-decoration:underline;text-underline-offset:0.2rem}:host .link-button:not(.disabled):not(:disabled){cursor:pointer}:host .link-button:not(.disabled):not(:disabled):active,:host .link-button:not(.disabled):not(:disabled).active{color:var(--theme-color-dynamic--active)}:host .link-button:not(.disabled):not(:disabled):active .link,:host .link-button:not(.disabled):not(:disabled).active .link{text-decoration:underline;text-underline-offset:0.2rem}:host .link-button.disabled{cursor:default;color:var(--theme-color-weak-text)}:host .link-button a{all:unset}:host :focus-visible{outline:1px solid var(--theme-color-focus-bdr)}";
 
 const LinkButton = class {
   constructor(hostRef) {
@@ -13,7 +13,7 @@ const LinkButton = class {
     return (h(Host, null, h("a", { title: this.url, tabindex: "0", class: {
         'link-button': true,
         disabled: this.disabled,
-      }, href: this.disabled ? undefined : this.url, target: this.target }, h("ix-icon", { class: "icon", name: "chevron-right-small", size: "16" }), h("div", { class: {
+      }, href: this.disabled ? undefined : this.url, target: this.target }, h("ix-icon", { class: "icon", name: 'chevron-right-small', size: "16" }), h("div", { class: {
         link: true,
         disabled: this.disabled,
       } }, h("slot", null)))));

package/dist/esm/ix-link-button.entry.js.map

@@ -1 +1 @@
-{"file":"ix-link-button.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,s8cAAs8c;;MCmB/8c,UAAU;;;oBAIF,KAAK;;kBAYkC,OAAO;;EAEjE,MAAM;IACJ,QACE,EAAC,IAAI,QACH,SACE,KAAK,EAAE,IAAI,CAAC,GAAG,EACf,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,EACD,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAC,GAAG,EAC1C,MAAM,EAAE,IAAI,CAAC,MAAM,IAEnB,eAAS,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,qBAAqB,EAAC,IAAI,EAAC,IAAI,GAAW,EACrE,WACE,KAAK,EAAE;QACL,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAED,eAAa,CACT,CACJ,CACC,EACP;GACH;;;;;;","names":[],"sources":["./src/components/link-button/link-button.scss?tag=ix-link-button&encapsulation=shadow","./src/components/link-button/link-button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import './components/buttons';\n@import 'mixins/hover';\n\n:host {\n  display: inline-flex;\n  height: $x-large-space;\n  font-size: $font-size-default;\n  font-weight: $font-weight-normal;\n  min-width: $x-large-space;\n\n  .link-button {\n    display: inline-flex;\n    position: relative;\n    width: 100%;\n    padding: 0 $tiny-space 0 0;\n    align-items: center;\n    justify-content: center;\n    background-color: transparent;\n    color: var(--theme-color-primary);\n    cursor: pointer;\n    text-decoration: none;\n\n    .link {\n      display: block;\n      position: relative;\n      width: 100%;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      overflow: hidden;\n    }\n\n    @include hover {\n      color: var(--theme-color-dynamic--hover);\n\n      .link {\n        text-decoration: underline;\n        text-underline-offset: 0.2rem;\n      }\n    }\n\n    @include active {\n      color: var(--theme-color-dynamic--active);\n\n      .link {\n        text-decoration: underline;\n        text-underline-offset: 0.2rem;\n      }\n    }\n\n    &.disabled {\n      cursor: default;\n      color: var(--theme-color-weak-text);\n    }\n\n    a {\n      all: unset;\n    }\n  }\n\n  :focus-visible {\n    outline: 1px solid var(--theme-color-focus-bdr);\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-link-button',\n  styleUrl: 'link-button.scss',\n  shadow: true,\n})\nexport class LinkButton {\n  /**\n   * Disable the link button\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Url for the link button\n   */\n  @Prop() url: string;\n\n  /**\n   * Specifies where to open the link\n   *\n   * https://www.w3schools.com/html/html_links.asp\n   */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  render() {\n    return (\n      <Host>\n        <a\n          title={this.url}\n          tabindex=\"0\"\n          class={{\n            'link-button': true,\n            disabled: this.disabled,\n          }}\n          href={this.disabled ? undefined : this.url}\n          target={this.target}\n        >\n          <ix-icon class=\"icon\" name=\"chevron-right-small\" size=\"16\"></ix-icon>\n          <div\n            class={{\n              link: true,\n              disabled: this.disabled,\n            }}\n          >\n            <slot></slot>\n          </div>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-link-button.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,svbAAsvb;;MCmB/vb,UAAU;;;oBAIF,KAAK;;kBAYkC,OAAO;;EAEjE,MAAM;IACJ,QACE,EAAC,IAAI,QACH,SACE,KAAK,EAAE,IAAI,CAAC,GAAG,EACf,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,EACD,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAC,GAAG,EAC1C,MAAM,EAAE,IAAI,CAAC,MAAM,IAEnB,eACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAE,qBAAqB,EAC3B,IAAI,EAAC,IAAI,GACA,EACX,WACE,KAAK,EAAE;QACL,IAAI,EAAE,IAAI;QACV,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,IAED,eAAa,CACT,CACJ,CACC,EACP;GACH;;;;;;","names":[],"sources":["./src/components/link-button/link-button.scss?tag=ix-link-button&encapsulation=shadow","./src/components/link-button/link-button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'legacy/components/buttons';\n@import 'mixins/hover';\n\n:host {\n  display: inline-flex;\n  height: $x-large-space;\n  font-size: $font-size-default;\n  font-weight: $font-weight-normal;\n  min-width: $x-large-space;\n\n  .link-button {\n    display: inline-flex;\n    position: relative;\n    width: 100%;\n    padding: 0 $tiny-space 0 0;\n    align-items: center;\n    justify-content: center;\n    background-color: transparent;\n    color: var(--theme-color-primary);\n    cursor: pointer;\n    text-decoration: none;\n\n    .link {\n      display: block;\n      position: relative;\n      width: 100%;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      overflow: hidden;\n    }\n\n    @include hover {\n      color: var(--theme-color-dynamic--hover);\n\n      .link {\n        text-decoration: underline;\n        text-underline-offset: 0.2rem;\n      }\n    }\n\n    @include active {\n      color: var(--theme-color-dynamic--active);\n\n      .link {\n        text-decoration: underline;\n        text-underline-offset: 0.2rem;\n      }\n    }\n\n    &.disabled {\n      cursor: default;\n      color: var(--theme-color-weak-text);\n    }\n\n    a {\n      all: unset;\n    }\n  }\n\n  :focus-visible {\n    outline: 1px solid var(--theme-color-focus-bdr);\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-link-button',\n  styleUrl: 'link-button.scss',\n  shadow: true,\n})\nexport class LinkButton {\n  /**\n   * Disable the link button\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Url for the link button\n   */\n  @Prop() url: string;\n\n  /**\n   * Specifies where to open the link\n   *\n   * https://www.w3schools.com/html/html_links.asp\n   */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  render() {\n    return (\n      <Host>\n        <a\n          title={this.url}\n          tabindex=\"0\"\n          class={{\n            'link-button': true,\n            disabled: this.disabled,\n          }}\n          href={this.disabled ? undefined : this.url}\n          target={this.target}\n        >\n          <ix-icon\n            class=\"icon\"\n            name={'chevron-right-small'}\n            size=\"16\"\n          ></ix-icon>\n          <div\n            class={{\n              link: true,\n              disabled: this.disabled,\n            }}\n          >\n            <slot></slot>\n          </div>\n        </a>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ix-map-navigation-overlay.entry.js

@@ -0,0 +1,58 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-eb0be730.js';
+import { a as anime } from './anime.es-185e9087.js';
+
+const mapNavigationOverlayCss = ".text-xs{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text)}.text-s{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text)}.text-default{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text)}.text-default-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-title-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text)}.text-l{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text)}.text-l-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-title-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text)}.text-h2{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text)}.text-xl{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text)}a{color:var(--theme-color-primary)}:host{position:absolute;width:100%;height:100%;z-index:2;top:0;left:0;background-color:var(--theme-overlay--background)}: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 .overlay-header{display:flex;position:relative;justify-content:flex-start;align-items:center;height:3.5rem;background-color:var(--theme-overlay-header--background)}:host .overlay-header-content{display:flex;align-items:center;min-width:0}:host .overlay-header-content ix-icon{-webkit-margin-start:1rem;margin-inline-start:1rem;color:var(--theme-overlay-header--color)}:host .overlay-header-content .overlay-header-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--theme-overlay-header--color);-webkit-margin-start:1rem;margin-inline-start:1rem}:host .color-indicator{display:inline-block;position:relative;width:0.5rem;height:100%;background-color:var(--theme-color-neutral)}:host .overlay-close{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:1rem;margin-inline-end:1rem}:host .d-none{display:none}:host(.d-none){display:none}";
+
+const MapNavigationOverlay = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.closeClick = createEvent(this, "closeClick", 7);
+    this.name = undefined;
+    this.icon = undefined;
+    this.color = undefined;
+  }
+  componentWillLoad() {
+    anime({
+      targets: this.hostElement,
+      duration: MapNavigationOverlay.slowTime,
+      backdropFilter: [0, 'blur(1rem)'],
+      translateX: ['-4rem', 0],
+      opacity: [0, 1],
+      easing: 'easeOutSine',
+      begin: () => {
+        this.hostElement.classList.remove('d-none');
+      },
+    });
+  }
+  closeOverlay() {
+    anime({
+      targets: this.hostElement,
+      duration: MapNavigationOverlay.slowTime,
+      backdropFilter: ['blur(1rem)', 0],
+      translateX: [0, '-4rem'],
+      opacity: [1, 0],
+      easing: 'easeInSine',
+      complete: () => {
+        this.closeClick.emit();
+        this.hostElement.classList.add('d-none');
+      },
+    });
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "overlay-header" }, h("div", { class: {
+        'color-indicator': true,
+        'd-none': this.color === 'undefined' || this.color === undefined,
+      }, style: {
+        'background-color': this.color
+          ? `var(--theme-${this.color})`
+          : '',
+      } }), h("div", { class: "overlay-header-content" }, h("ix-icon", { size: "32", name: this.icon }), h("span", { class: "overlay-header-title", title: this.name }, this.name)), h("ix-icon-button", { class: "overlay-close", ghost: true, icon: 'close', size: "24", onClick: () => this.closeOverlay() })), h("slot", null)));
+  }
+  get hostElement() { return getElement(this); }
+};
+MapNavigationOverlay.slowTime = 500;
+MapNavigationOverlay.style = mapNavigationOverlayCss;
+
+export { MapNavigationOverlay as ix_map_navigation_overlay };
+
+//# sourceMappingURL=ix-map-navigation-overlay.entry.js.map

package/dist/esm/ix-map-navigation-overlay.entry.js.map

@@ -0,0 +1 @@
+{"file":"ix-map-navigation-overlay.entry.js","mappings":";;;AAAA,MAAM,uBAAuB,GAAG,unJAAunJ;;MCyB1oJ,oBAAoB;;;;;;;;EAyB/B,iBAAiB;IACf,KAAK,CAAC;MACJ,OAAO,EAAE,IAAI,CAAC,WAAW;MACzB,QAAQ,EAAE,oBAAoB,CAAC,QAAQ;MACvC,cAAc,EAAE,CAAC,CAAC,EAAE,YAAY,CAAC;MACjC,UAAU,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC;MACxB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,MAAM,EAAE,aAAa;MACrB,KAAK,EAAE;QACL,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;OAC7C;KACF,CAAC,CAAC;GACJ;EAEO,YAAY;IAClB,KAAK,CAAC;MACJ,OAAO,EAAE,IAAI,CAAC,WAAW;MACzB,QAAQ,EAAE,oBAAoB,CAAC,QAAQ;MACvC,cAAc,EAAE,CAAC,YAAY,EAAE,CAAC,CAAC;MACjC,UAAU,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC;MACxB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,MAAM,EAAE,YAAY;MACpB,QAAQ,EAAE;QACR,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;QACvB,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;OAC1C;KACF,CAAC,CAAC;GACJ;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAC,gBAAgB,IACzB,WACE,KAAK,EAAE;QACL,iBAAiB,EAAE,IAAI;QACvB,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,WAAW,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS;OACjE,EACD,KAAK,EAAE;QACL,kBAAkB,EAAE,IAAI,CAAC,KAAK;YAC1B,eAAe,IAAI,CAAC,KAAK,GAAG;YAC5B,EAAE;OACP,GACI,EACP,WAAK,KAAK,EAAC,wBAAwB,IACjC,eAAS,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,EAC9C,YAAM,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAE,IAAI,CAAC,IAAI,IAChD,IAAI,CAAC,IAAI,CACL,CACH,EACN,sBACE,KAAK,EAAC,eAAe,EACrB,KAAK,QACL,IAAI,EAAE,OAAO,EACb,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,GAClB,CACd,EAEN,eAAa,CACR,EACP;GACH;;;AAtFuB,6BAAQ,GAAG,GAAG,CAAC;;;;;","names":[],"sources":["./src/components/map-navigation-overlay/map-navigation-overlay.scss?tag=ix-map-navigation-overlay&encapsulation=shadow","./src/components/map-navigation-overlay/map-navigation-overlay.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n@import 'common-variables';\n@import 'legacy/fonts';\n@import 'mixins/text-truncation';\n\n:host {\n  @include ix-component;\n\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: 2;\n  top: 0;\n  left: 0;\n\n  background-color: var(--theme-overlay--background);\n\n  .overlay-header {\n    display: flex;\n    position: relative;\n    justify-content: flex-start;\n    align-items: center;\n    height: 3.5rem;\n\n    background-color: var(--theme-overlay-header--background);\n  }\n\n  .overlay-header-content {\n    display: flex;\n    align-items: center;\n    min-width: 0;\n\n    ix-icon {\n      margin-inline-start: $default-space;\n      color: var(--theme-overlay-header--color);\n    }\n\n    .overlay-header-title {\n      @include text-h2;\n      @include ellipsis;\n      color: var(--theme-overlay-header--color);\n      margin-inline-start: $default-space;\n    }\n  }\n\n  .color-indicator {\n    display: inline-block;\n    position: relative;\n    width: $small-space;\n    height: 100%;\n    background-color: var(--theme-color-neutral);\n  }\n\n  .overlay-close {\n    margin-inline-start: auto;\n    margin-inline-end: $default-space;\n  }\n\n  .d-none {\n    display: none;\n  }\n}\n\n:host(.d-none) {\n  display: none;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\nimport anime from 'animejs';\n\n@Component({\n  tag: 'ix-map-navigation-overlay',\n  styleUrl: 'map-navigation-overlay.scss',\n  shadow: true,\n})\nexport class MapNavigationOverlay {\n  private static readonly slowTime = 500;\n\n  @Element() hostElement: HTMLIxMapNavigationOverlayElement;\n\n  /**\n   * Title of overlay\n   */\n  @Prop() name: string;\n\n  /**\n   * Icon of overlay\n   */\n  @Prop() icon: string;\n\n  /**\n   * Color of icon\n   */\n  @Prop() color: string;\n\n  /**\n   * Event closed\n   */\n  @Event() closeClick: EventEmitter;\n\n  componentWillLoad() {\n    anime({\n      targets: this.hostElement,\n      duration: MapNavigationOverlay.slowTime,\n      backdropFilter: [0, 'blur(1rem)'],\n      translateX: ['-4rem', 0],\n      opacity: [0, 1],\n      easing: 'easeOutSine',\n      begin: () => {\n        this.hostElement.classList.remove('d-none');\n      },\n    });\n  }\n\n  private closeOverlay() {\n    anime({\n      targets: this.hostElement,\n      duration: MapNavigationOverlay.slowTime,\n      backdropFilter: ['blur(1rem)', 0],\n      translateX: [0, '-4rem'],\n      opacity: [1, 0],\n      easing: 'easeInSine',\n      complete: () => {\n        this.closeClick.emit();\n        this.hostElement.classList.add('d-none');\n      },\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"overlay-header\">\n          <div\n            class={{\n              'color-indicator': true,\n              'd-none': this.color === 'undefined' || this.color === undefined,\n            }}\n            style={{\n              'background-color': this.color\n                ? `var(--theme-${this.color})`\n                : '',\n            }}\n          ></div>\n          <div class=\"overlay-header-content\">\n            <ix-icon size=\"32\" name={this.icon}></ix-icon>\n            <span class=\"overlay-header-title\" title={this.name}>\n              {this.name}\n            </span>\n          </div>\n          <ix-icon-button\n            class=\"overlay-close\"\n            ghost\n            icon={'close'}\n            size=\"24\"\n            onClick={() => this.closeOverlay()}\n          ></ix-icon-button>\n        </div>\n\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}