@siemens/ix 0.0.0-20240522074328 → 0.0.0-pr-1318-20240627080522

package/dist/cjs/ix-icon-toggle-button.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ix-icon-toggle-button.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,mBAAmB,GAAG,yytBAAyytB,CAAC;AACt0tB,iCAAe,mBAAmB;;MC+BrB,gBAAgB;;;;uBAKM,WAAW;uBAK1B,KAAK;qBAKP,KAAK;;uBAUH,KAAK;oBAKY,IAAI;wBAKH,KAAK;uBAKd,KAAK;;IASxB,2BAA2B;QACjC,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,KAAK,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;KACnE;IAEO,gBAAgB;QACtB,OAAO,CAAC,IAAI,CACV,yHAAyH,CAC1H,CAAC;KACH;IAGD,eAAe;QACb,IAAI,IAAI,CAAC,2BAA2B,EAAE,EAAE;YACtC,IAAI,CAAC,gBAAgB,EAAE,CAAC;SACzB;KACF;IAGD,aAAa;QACX,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAGD,eAAe;QACb,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,gBAAgB;QACd,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAEO,qBAAqB;QAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACxC;IAEO,gBAAgB;QACtB,OAAO;YACL,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;SAClC,CAAC;KACH;IAED,MAAM;QACJ,MAAM,eAAe,GAAoB;YACvC,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,IAAI;YACd,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,IAAI,CAAC,OAAO;YACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;YACvC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,QAAQ,EAAE,IAAI,CAAC,IAAI;YACnB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,MAAM,IAAI,CAAC,qBAAqB,EAAE;YAC3C,IAAI,EAAE,QAAQ;YACd,cAAc,EAAE;gBACd,cAAc,EAAEA,gBAAW,CAAC,IAAI,CAAC,OAAO,CAAC;aAC1C;YACD,YAAY,kBACV,aAAa,EAAE,IAAI,IAChB,IAAI,CAAC,gBAAgB,EAAE,CAC3B;SACF,CAAC;QACF,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAE1D,QACEC,QAACC,UAAI,qDACH,KAAK,kCACA,IAAI,CAAC,gBAAgB,EAAE,KAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,OAGzCD,QAACE,6BAAc,qEAAK,eAAe,EAAmB,CACjD,EACP;KACH;;;;;;;;;;;;","names":["a11yBoolean","h","Host","BaseIconButton"],"sources":["src/components/icon-toggle-button/icon-toggle-button.scss?tag=ix-icon-toggle-button&encapsulation=shadow","src/components/icon-toggle-button/icon-toggle-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 '../icon-button/icon-button-mixin.scss';\n\n@include base-icon-button;\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  Watch,\n} from '@stencil/core';\nimport { BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\nimport { a11yBoolean } from '../utils/a11y';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-icon-toggle-button',\n  shadow: true,\n  styleUrl: './icon-toggle-button.scss',\n})\nexport class IconToggleButton {\n  /**\n   * Button variant.\n   * Important: Variant 'primary' can only be combined with either outline or ghost.\n   */\n  @Prop() variant: ButtonVariant = 'secondary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Icon name\n   */\n  @Prop() icon: string;\n\n  /**\n   * Show button as pressed\n   */\n  @Prop() pressed = false;\n\n  /**\n   * Size of icon in button\n   */\n  @Prop() size: '24' | '16' | '12' = '24';\n\n  /**\n   * Disable the button\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Loading button\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * Pressed change event\n   */\n  @Event() pressedChange: EventEmitter<boolean>;\n\n  @Element() hostElement: HTMLIxIconToggleButtonElement;\n\n  private isIllegalToggleButtonConfig() {\n    return this.variant === 'primary' && (this.outline || this.ghost);\n  }\n\n  private logIllegalConfig() {\n    console.warn(\n      'iX toggle button with illegal configuration detected. Variant \"primary\" can only be combined with \"outline\" or \"ghost\".'\n    );\n  }\n\n  @Watch('variant')\n  onVariantChange() {\n    if (this.isIllegalToggleButtonConfig()) {\n      this.logIllegalConfig();\n    }\n  }\n\n  @Watch('ghost')\n  onGhostChange() {\n    this.onVariantChange();\n  }\n\n  @Watch('outline')\n  onOutlineChange() {\n    this.onVariantChange();\n  }\n\n  componentDidLoad() {\n    this.onVariantChange();\n  }\n\n  private dispatchPressedChange() {\n    this.pressedChange.emit(!this.pressed);\n  }\n\n  private getIconSizeClass() {\n    return {\n      'btn-icon-12': this.size === '12',\n      'btn-icon-16': this.size === '16',\n      'btn-icon-32': this.size === '24',\n    };\n  }\n\n  render() {\n    const baseButtonProps: BaseButtonProps = {\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      iconOnly: true,\n      iconOval: false,\n      selected: this.pressed,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      iconSize: this.size,\n      loading: this.loading,\n      onClick: () => this.dispatchPressedChange(),\n      type: 'button',\n      ariaAttributes: {\n        'aria-pressed': a11yBoolean(this.pressed),\n      },\n      extraClasses: {\n        'icon-button': true,\n        ...this.getIconSizeClass(),\n      },\n    };\n    console.log(baseButtonProps, this.disabled, this.loading);\n\n    return (\n      <Host\n        class={{\n          ...this.getIconSizeClass(),\n          disabled: this.disabled || this.loading,\n        }}\n      >\n        <BaseIconButton {...baseButtonProps}></BaseIconButton>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-icon-toggle-button.entry.cjs.js","mappings":";;;;;;;;;AAAA,MAAM,mBAAmB,GAAG,2luBAA2luB,CAAC;AACxnuB,iCAAe,mBAAmB;;MC+BrB,gBAAgB;;;;uBAKM,WAAW;uBAK1B,KAAK;qBAKP,KAAK;;uBAUH,KAAK;oBAKY,IAAI;wBAKH,KAAK;uBAKd,KAAK;;IASxB,2BAA2B;QACjC,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,KAAK,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;KACnE;IAEO,gBAAgB;QACtB,OAAO,CAAC,IAAI,CACV,yHAAyH,CAC1H,CAAC;KACH;IAGD,eAAe;QACb,IAAI,IAAI,CAAC,2BAA2B,EAAE,EAAE;YACtC,IAAI,CAAC,gBAAgB,EAAE,CAAC;SACzB;KACF;IAGD,aAAa;QACX,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAGD,eAAe;QACb,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,gBAAgB;QACd,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAEO,qBAAqB;QAC3B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACxC;IAEO,gBAAgB;QACtB,OAAO;YACL,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;SAClC,CAAC;KACH;IAED,MAAM;QACJ,MAAM,eAAe,GAAoB;YACvC,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,IAAI;YACd,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,IAAI,CAAC,OAAO;YACtB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;YACvC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,QAAQ,EAAE,IAAI,CAAC,IAAI;YACnB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,MAAM,IAAI,CAAC,qBAAqB,EAAE;YAC3C,IAAI,EAAE,QAAQ;YACd,cAAc,EAAE;gBACd,cAAc,EAAEA,gBAAW,CAAC,IAAI,CAAC,OAAO,CAAC;aAC1C;YACD,YAAY,kBACV,aAAa,EAAE,IAAI,IAChB,IAAI,CAAC,gBAAgB,EAAE,CAC3B;SACF,CAAC;QACF,OAAO,CAAC,GAAG,CAAC,eAAe,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAE1D,QACEC,QAACC,UAAI,qDACH,KAAK,kCACA,IAAI,CAAC,gBAAgB,EAAE,KAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,OAGzCD,QAACE,6BAAc,qEAAK,eAAe,EAAmB,CACjD,EACP;KACH;;;;;;;;;;;;","names":["a11yBoolean","h","Host","BaseIconButton"],"sources":["src/components/icon-toggle-button/icon-toggle-button.scss?tag=ix-icon-toggle-button&encapsulation=shadow","src/components/icon-toggle-button/icon-toggle-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 '../icon-button/icon-button-mixin.scss';\n\n@include base-icon-button;\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  Watch,\n} from '@stencil/core';\nimport { BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\nimport { a11yBoolean } from '../utils/a11y';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-icon-toggle-button',\n  shadow: true,\n  styleUrl: './icon-toggle-button.scss',\n})\nexport class IconToggleButton {\n  /**\n   * Button variant.\n   * Important: Variant 'primary' can only be combined with either outline or ghost.\n   */\n  @Prop() variant: ButtonVariant = 'secondary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Icon name\n   */\n  @Prop() icon: string;\n\n  /**\n   * Show button as pressed\n   */\n  @Prop() pressed = false;\n\n  /**\n   * Size of icon in button\n   */\n  @Prop() size: '24' | '16' | '12' = '24';\n\n  /**\n   * Disable the button\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Loading button\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * Pressed change event\n   */\n  @Event() pressedChange: EventEmitter<boolean>;\n\n  @Element() hostElement: HTMLIxIconToggleButtonElement;\n\n  private isIllegalToggleButtonConfig() {\n    return this.variant === 'primary' && (this.outline || this.ghost);\n  }\n\n  private logIllegalConfig() {\n    console.warn(\n      'iX toggle button with illegal configuration detected. Variant \"primary\" can only be combined with \"outline\" or \"ghost\".'\n    );\n  }\n\n  @Watch('variant')\n  onVariantChange() {\n    if (this.isIllegalToggleButtonConfig()) {\n      this.logIllegalConfig();\n    }\n  }\n\n  @Watch('ghost')\n  onGhostChange() {\n    this.onVariantChange();\n  }\n\n  @Watch('outline')\n  onOutlineChange() {\n    this.onVariantChange();\n  }\n\n  componentDidLoad() {\n    this.onVariantChange();\n  }\n\n  private dispatchPressedChange() {\n    this.pressedChange.emit(!this.pressed);\n  }\n\n  private getIconSizeClass() {\n    return {\n      'btn-icon-12': this.size === '12',\n      'btn-icon-16': this.size === '16',\n      'btn-icon-32': this.size === '24',\n    };\n  }\n\n  render() {\n    const baseButtonProps: BaseButtonProps = {\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      iconOnly: true,\n      iconOval: false,\n      selected: this.pressed,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      iconSize: this.size,\n      loading: this.loading,\n      onClick: () => this.dispatchPressedChange(),\n      type: 'button',\n      ariaAttributes: {\n        'aria-pressed': a11yBoolean(this.pressed),\n      },\n      extraClasses: {\n        'icon-button': true,\n        ...this.getIconSizeClass(),\n      },\n    };\n    console.log(baseButtonProps, this.disabled, this.loading);\n\n    return (\n      <Host\n        class={{\n          ...this.getIconSizeClass(),\n          disabled: this.disabled || this.loading,\n        }}\n      >\n        <BaseIconButton {...baseButtonProps}></BaseIconButton>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c6f0ac73.js');
+const index = require('./index-0f6297c8.js');
 const shadowDom = require('./shadow-dom-73f9d553.js');
 
-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.5rem;color:var(--theme-color-soft-text)}:host .group-end{right:0px;height:2rem;margin-right:0.5rem;color:var(--theme-color-soft-text)}:host ::slotted(*){display:flex}:host(.disabled){pointer-events:none}:host(.disabled) .group-start ::slotted(*),:host(.disabled) .group-end ::slotted(*){opacity:0.4 !important}";
+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}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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.5rem;color:var(--theme-color-soft-text)}:host .group-end{right:0px;height:2rem;margin-right:0.5rem;color:var(--theme-color-soft-text)}:host ::slotted(*){display:flex}:host(.disabled){pointer-events:none}:host(.disabled) .group-start ::slotted(*),:host(.disabled) .group-end ::slotted(*){opacity:0.4 !important}";
 const IxInputGroupStyle0 = inputGroupCss;
 
 const InputGroup = class {
@@ -125,7 +125,7 @@ const InputGroup = class {
         return width;
     }
     render() {
-        return (index.h(index.Host, { key: '32aef634c699370147d06d110ecf4bfee619f657', class: { disabled: this.disabled } }, index.h("div", { key: '285517df8b9cb66cc63de951bd9146ca4dd0d098', class: "group group-start" }, index.h("slot", { key: '79af98dc6dd8352c768d5eb14346f39f88978bac', name: "input-start" })), index.h("slot", { key: '070682be2e58879ec9b1d2adeac9031b75d52a14' }), index.h("div", { key: 'f9d0fdbdafe8a23d23e4ce11e2b0c07dfbeda159', class: "group group-end" }, index.h("slot", { key: '02c882edae38c3fd655ab1abe82abd9f016bb09c', name: "input-end" }))));
+        return (index.h(index.Host, { key: 'a632148f49a5084f9734bb7df674bb34f1e29726', class: { disabled: this.disabled } }, index.h("div", { key: '9c6ea56818e6226a88bbd555a9f975804246c549', class: "group group-start" }, index.h("slot", { key: '302da4742e1122fff59d5e2d13d062f3abeaea19', name: "input-start" })), index.h("slot", { key: 'd0125d9c48d61188e83866b9cd8d628a3c0bfd8f' }), index.h("div", { key: 'fbf242a8b2fb3febc195066bc3c2064506ff7788', class: "group group-end" }, index.h("slot", { key: 'dedfedc593c7c6425a32cd6f9448c7147495eb55', name: "input-end" }))));
     }
     get hostElement() { return index.getElement(this); }
 };

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

@@ -1 +1 @@
-{"file":"ix-input-group.entry.cjs.js","mappings":"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","names":["getSlottedElements","h","Host"],"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@import 'mixins/shadow-dom/host-disabled';\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.5rem;\n    color: var(--theme-color-soft-text);\n  }\n\n  .group-end {\n    right: 0px;\n    height: 2rem;\n    margin-right: 0.5rem;\n    color: var(--theme-color-soft-text);\n  }\n\n  ::slotted(*) {\n    display: flex;\n  }\n}\n\n@include host-disabled {\n  .group-start,\n  .group-end {\n    ::slotted(*) {\n      opacity: 0.4 !important;\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, 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() disabled = false;\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  private observer: MutationObserver;\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    this.observer = new MutationObserver(() => {\n      this.slotChanged();\n      this.startSlotChanged();\n      this.endSlotChanged();\n    });\n\n    this.observer.observe(this.hostElement, {\n      subtree: true,\n      childList: true,\n      attributes: true,\n      characterData: true,\n    });\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 = '0.5rem';\n      }\n\n      if (this.inputPaddingLeft !== 0) {\n        this.inputElement.style.paddingLeft = this.inputPaddingLeft + 'px';\n      } else {\n        this.inputElement.style.paddingLeft = '0.5rem';\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 slotChanged() {\n    this.disabled = this.inputElement?.disabled;\n  }\n\n  private startSlotChanged() {\n    const slot = this.hostElement.shadowRoot.querySelector(\n      'slot[name=\"input-start\"]'\n    );\n\n    setTimeout(() => {\n      const startPadding = this.getChildrenWidth(slot);\n\n      if (startPadding !== 0) {\n        this.inputPaddingLeft = 11 + startPadding;\n      } else {\n        this.inputPaddingLeft = 0;\n      }\n\n      if (!this.inputElement) {\n        return;\n      }\n\n      const isInputInvalid =\n        !this.inputElement.validity.valid ||\n        this.inputElement.classList.contains('is-invalid');\n\n      const formWasValidated =\n        this.inputElement.form?.classList.contains('was-validated') ||\n        this.inputElement.form?.noValidate === false;\n\n      if (formWasValidated && isInputInvalid) {\n        const left = this.inputPaddingLeft !== 0 ? this.inputPaddingLeft : 7;\n        this.inputElement.style.backgroundPosition = `left ${left}px center`;\n        this.inputPaddingLeft += 26;\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 class={{ disabled: this.disabled }}>\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.cjs.js","mappings":"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","names":["getSlottedElements","h","Host"],"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@import 'mixins/shadow-dom/host-disabled';\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.5rem;\n    color: var(--theme-color-soft-text);\n  }\n\n  .group-end {\n    right: 0px;\n    height: 2rem;\n    margin-right: 0.5rem;\n    color: var(--theme-color-soft-text);\n  }\n\n  ::slotted(*) {\n    display: flex;\n  }\n}\n\n@include host-disabled {\n  .group-start,\n  .group-end {\n    ::slotted(*) {\n      opacity: 0.4 !important;\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, 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() disabled = false;\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  private observer: MutationObserver;\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    this.observer = new MutationObserver(() => {\n      this.slotChanged();\n      this.startSlotChanged();\n      this.endSlotChanged();\n    });\n\n    this.observer.observe(this.hostElement, {\n      subtree: true,\n      childList: true,\n      attributes: true,\n      characterData: true,\n    });\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 = '0.5rem';\n      }\n\n      if (this.inputPaddingLeft !== 0) {\n        this.inputElement.style.paddingLeft = this.inputPaddingLeft + 'px';\n      } else {\n        this.inputElement.style.paddingLeft = '0.5rem';\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 slotChanged() {\n    this.disabled = this.inputElement?.disabled;\n  }\n\n  private startSlotChanged() {\n    const slot = this.hostElement.shadowRoot.querySelector(\n      'slot[name=\"input-start\"]'\n    );\n\n    setTimeout(() => {\n      const startPadding = this.getChildrenWidth(slot);\n\n      if (startPadding !== 0) {\n        this.inputPaddingLeft = 11 + startPadding;\n      } else {\n        this.inputPaddingLeft = 0;\n      }\n\n      if (!this.inputElement) {\n        return;\n      }\n\n      const isInputInvalid =\n        !this.inputElement.validity.valid ||\n        this.inputElement.classList.contains('is-invalid');\n\n      const formWasValidated =\n        this.inputElement.form?.classList.contains('was-validated') ||\n        this.inputElement.form?.noValidate === false;\n\n      if (formWasValidated && isInputInvalid) {\n        const left = this.inputPaddingLeft !== 0 ? this.inputPaddingLeft : 7;\n        this.inputElement.style.backgroundPosition = `left ${left}px center`;\n        this.inputPaddingLeft += 26;\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 class={{ disabled: this.disabled }}>\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}

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c6f0ac73.js');
+const index = require('./index-0f6297c8.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)}";
 const IxKeyValueListStyle0 = keyValueListCss;
@@ -13,7 +13,7 @@ const KeyValueList = class {
         this.striped = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '754310ec87f8ab82d3cddc18beea932d72136d73', class: { keyValueList: true, 'keyValueList--striped': this.striped } }, index.h("slot", { key: '2dc0039fc53a720330b1e9b175ff668b72dd80f6' })));
+        return (index.h(index.Host, { key: 'a6bfe9662c156c88f601640f9a52ba1859eb271e', class: { keyValueList: true, 'keyValueList--striped': this.striped } }, index.h("slot", { key: 'e028a1377bdffc7d1cab8614fba854c0e34b1fa0' })));
     }
 };
 KeyValueList.style = IxKeyValueListStyle0;

package/dist/cjs/ix-key-value.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c6f0ac73.js');
+const index = require('./index-0f6297c8.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;flex-grow:1;align-items:flex-start}:host(.keyValue) .keyValue__content,:host(.keyValue) .keyValue__content .content__label,:host(.keyValue) .keyValue__content .content__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}:host(.keyValue) .keyValue__content .content__label{color:var(--theme-color-soft-text)}:host(.keyValue) .keyValue__content .content__value{width:100%}: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}";
 const IxKeyValueStyle0 = keyValueCss;
@@ -16,7 +16,7 @@ const KeyValue = class {
         this.value = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '227f052645f548c6e1c19a925734bbd6066358e4', class: `keyValue keyValue--${this.labelPosition === 'top' ? 'column' : 'row'}` }, this.icon && (index.h("ix-icon", { name: this.icon, size: "24", class: "keyValue__icon" })), index.h("div", { key: 'ffe1c46cf33671aeb701559b6da2ec5133099c94', class: "keyValue__content" }, index.h("div", { key: '700543226c808d81d11c9d9bf69cf25c73825688', class: "content__label" }, this.label), index.h("div", { key: '7e5b12f25fb6d9503947d6a7b200c7a3f962aee2', class: {
+        return (index.h(index.Host, { key: '565b342bbcbd103c153df79ba4407c5be58e372a', class: `keyValue keyValue--${this.labelPosition === 'top' ? 'column' : 'row'}` }, this.icon && (index.h("ix-icon", { key: '884b129ce9171233352573ec412843f0d945bfaf', name: this.icon, size: "24", class: "keyValue__icon" })), index.h("div", { key: '76430d26876e5d3aca532df43e2b078a7a1f0e57', class: "keyValue__content" }, index.h("div", { key: '79e43f1cf842c51619f83b802fe6358d64a0f16c', class: "content__label" }, this.label), index.h("div", { key: '29a1b892cc777d7e16642e17fedd2b48ee307998', class: {
                 content__value: true,
                 'has-customValue': this.value === undefined,
             } }, this.value !== undefined ? (this.value) : (index.h("slot", { name: "custom-value" }))))));

package/dist/cjs/ix-key-value.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ix-key-value.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,4yCAA4yC,CAAC;AACj0C,yBAAe,WAAW;;MCsBb,QAAQ;;;;;6BAc4B,KAAK;;;IAOpD,MAAM;QACJ,QACEA,QAACC,UAAI,qDACH,KAAK,EAAE,sBACL,IAAI,CAAC,aAAa,KAAK,KAAK,GAAG,QAAQ,GAAG,KAC5C,EAAE,IAED,IAAI,CAAC,IAAI,KACRD,qBAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,gBAAgB,GAAW,CACtE,EACDA,kEAAK,KAAK,EAAC,mBAAmB,IAC5BA,kEAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAO,EAC9CA,kEACE,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,iBAAiB,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;aAC5C,IAEA,IAAI,CAAC,KAAK,KAAK,SAAS,IACvB,IAAI,CAAC,KAAK,KAEVA,kBAAM,IAAI,EAAC,cAAc,GAAQ,CAClC,CACG,CACF,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/key-value/key-value.scss?tag=ix-key-value&encapsulation=shadow","src/components/key-value/key-value.tsx"],"sourcesContent":["@import 'common-variables';\n@import 'mixins/text-truncation';\n\n:host(.keyValue) {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: $default-space;\n\n  .keyValue__icon {\n    padding: $tiny-space 0;\n  }\n\n  .keyValue__content {\n    display: flex;\n    flex-grow: 1;\n    align-items: flex-start;\n\n    &,\n    .content__label,\n    .content__value {\n      @include ellipsis;\n      max-width: 100%;\n    }\n\n    .content__label {\n      color: var(--theme-color-soft-text);\n    }\n\n    .content__value {\n      width: 100%;\n    }\n  }\n}\n\n:host(.keyValue.keyValue--column) {\n  padding: $small-space 0;\n  border-bottom: 1px solid var(--theme-color-soft-bdr);\n\n  .keyValue__content {\n    flex-direction: column;\n\n    .content__label,\n    .content__value:not(.has-customValue) {\n      padding: 2px 0;\n    }\n  }\n}\n\n:host(.keyValue.keyValue--row) {\n  padding: $tiny-space 0;\n\n  .keyValue__content {\n    flex-direction: row;\n    gap: $default-space;\n    align-items: center;\n\n    .content__label,\n    .content__value:not(.has-customValue) {\n      padding: 6px 0;\n    }\n\n    .content__label {\n      min-width: 8rem;\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\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"],"version":3}
+{"file":"ix-key-value.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,4yCAA4yC,CAAC;AACj0C,yBAAe,WAAW;;MCsBb,QAAQ;;;;;6BAc4B,KAAK;;;IAOpD,MAAM;QACJ,QACEA,QAACC,UAAI,qDACH,KAAK,EAAE,sBACL,IAAI,CAAC,aAAa,KAAK,KAAK,GAAG,QAAQ,GAAG,KAC5C,EAAE,IAED,IAAI,CAAC,IAAI,KACRD,sEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,gBAAgB,GAAW,CACtE,EACDA,kEAAK,KAAK,EAAC,mBAAmB,IAC5BA,kEAAK,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAO,EAC9CA,kEACE,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,iBAAiB,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;aAC5C,IAEA,IAAI,CAAC,KAAK,KAAK,SAAS,IACvB,IAAI,CAAC,KAAK,KAEVA,kBAAM,IAAI,EAAC,cAAc,GAAQ,CAClC,CACG,CACF,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/key-value/key-value.scss?tag=ix-key-value&encapsulation=shadow","src/components/key-value/key-value.tsx"],"sourcesContent":["@import 'common-variables';\n@import 'mixins/text-truncation';\n\n:host(.keyValue) {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: $default-space;\n\n  .keyValue__icon {\n    padding: $tiny-space 0;\n  }\n\n  .keyValue__content {\n    display: flex;\n    flex-grow: 1;\n    align-items: flex-start;\n\n    &,\n    .content__label,\n    .content__value {\n      @include ellipsis;\n      max-width: 100%;\n    }\n\n    .content__label {\n      color: var(--theme-color-soft-text);\n    }\n\n    .content__value {\n      width: 100%;\n    }\n  }\n}\n\n:host(.keyValue.keyValue--column) {\n  padding: $small-space 0;\n  border-bottom: 1px solid var(--theme-color-soft-bdr);\n\n  .keyValue__content {\n    flex-direction: column;\n\n    .content__label,\n    .content__value:not(.has-customValue) {\n      padding: 2px 0;\n    }\n  }\n}\n\n:host(.keyValue.keyValue--row) {\n  padding: $tiny-space 0;\n\n  .keyValue__content {\n    flex-direction: row;\n    gap: $default-space;\n    align-items: center;\n\n    .content__label,\n    .content__value:not(.has-customValue) {\n      padding: 6px 0;\n    }\n\n    .content__label {\n      min-width: 8rem;\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\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"],"version":3}

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c6f0ac73.js');
+const index = require('./index-0f6297c8.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 ::-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%;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{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{margin-inline-start:0.5rem;color:var(--theme-kpi-display-units--color)}:host .kpi-container .kpi-label,:host .kpi-container .kpi-unit{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 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}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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%;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{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{margin-inline-start:0.5rem;color:var(--theme-kpi-display-units--color)}:host .kpi-container .kpi-label,:host .kpi-container .kpi-unit{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 IxKpiStyle0 = kpiCss;
 
 const Kpi = class {
@@ -34,13 +34,13 @@ const Kpi = class {
         return tooltip;
     }
     render() {
-        return (index.h(index.Host, { key: 'd6ad8fb6abdd54276ed4d6e99602abc765b7224d', title: this.getTooltipText(), tabindex: "1", class: {
+        return (index.h(index.Host, { key: '7f1d8bcbc35516dcde7fda85571fd79082049bfc', title: this.getTooltipText(), tabindex: "1", class: {
                 stacked: this.orientation === 'vertical',
-            } }, index.h("div", { key: 'c42c84ed0f27a7b1bd083bb4fb7b424a54e2f892', class: {
+            } }, index.h("div", { key: 'e68bde8404bfc305862eb6e5b05d9d091aceaf0a', class: {
                 'kpi-container': true,
                 alarm: this.state === 'alarm',
                 warning: this.state === 'warning',
-            } }, index.h("span", { key: 'fdd055e5a2b67ef84a77c6cef50f728506793f3f', class: "kpi-label" }, this.getStateIcon(), index.h("span", { key: '9fb3820732fdc053135215cf3e39df0fb7ec90cc', class: "kpi-label-text" }, this.label)), index.h("span", { key: 'e4856bfd98c838a15fc28e28754899d36007e778', class: "kpi-value-container" }, index.h("span", { key: 'e8757664f1480828a940d17be00822bbfa7e4c39', class: "kpi-value" }, this.value), this.unit ? index.h("span", { class: "kpi-unit" }, this.unit) : ''))));
+            } }, index.h("span", { key: 'c967f529b0810e87818e6b243df6e8e108247a93', class: "kpi-label" }, this.getStateIcon(), index.h("span", { key: '07e375c681b3f784bb4b83b47018557746957bc2', class: "kpi-label-text" }, this.label)), index.h("span", { key: 'afa38edb472781931448bb7be0345861766cf5d4', class: "kpi-value-container" }, index.h("span", { key: '93d25eb40e95165ef9a38b79765bea26f850f84b', class: "kpi-value" }, this.value), this.unit ? index.h("span", { class: "kpi-unit" }, this.unit) : ''))));
     }
 };
 Kpi.style = IxKpiStyle0;

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

@@ -1 +1 @@
-{"file":"ix-kpi.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,MAAM,GAAG,42EAA42E,CAAC;AAC53E,oBAAe,MAAM;;MCeR,GAAG;;;;;;qBAmBmC,SAAS;2BAKT,YAAY;;IAErD,YAAY;QAClB,QAAQ,IAAI,CAAC,KAAK;YAChB,KAAK,OAAO;gBACV,QACEA,qBACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAE,OAAO,EACb,IAAI,EAAC,IAAI,GACA,EACX;YAEJ,KAAK,SAAS;gBACZ,QACEA,qBACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAE,SAAS,EACf,IAAI,EAAC,IAAI,GACA,EACX;YAEJ;gBACE,OAAO,EAAE,CAAC;SACb;KACF;IAEO,cAAc;QACpB,IAAI,OAAO,GAAG,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;QAE7C,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;SAC3C;QAED,OAAO,OAAO,CAAC;KAChB;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,qDACH,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAC5B,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI,CAAC,WAAW,KAAK,UAAU;aACzC,IAEDD,kEACE,KAAK,EAAE;gBACL,eAAe,EAAE,IAAI;gBACrB,KAAK,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;gBAC7B,OAAO,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;aAClC,IAEDA,mEAAM,KAAK,EAAC,WAAW,IACpB,IAAI,CAAC,YAAY,EAAE,EACpBA,mEAAM,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC3C,EACPA,mEAAM,KAAK,EAAC,qBAAqB,IAC/BA,mEAAM,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,KAAK,CAAQ,EAC1C,IAAI,CAAC,IAAI,GAAGA,kBAAM,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,IAAI,CAAQ,GAAG,EAAE,CACtD,CACH,CACD,EACP;KACH;;;;;;","names":["h","Host"],"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}
+{"file":"ix-kpi.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,MAAM,GAAG,wgFAAwgF,CAAC;AACxhF,oBAAe,MAAM;;MCeR,GAAG;;;;;;qBAmBmC,SAAS;2BAKT,YAAY;;IAErD,YAAY;QAClB,QAAQ,IAAI,CAAC,KAAK;YAChB,KAAK,OAAO;gBACV,QACEA,qBACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAE,OAAO,EACb,IAAI,EAAC,IAAI,GACA,EACX;YAEJ,KAAK,SAAS;gBACZ,QACEA,qBACE,KAAK,EAAC,yBAAyB,EAC/B,IAAI,EAAE,SAAS,EACf,IAAI,EAAC,IAAI,GACA,EACX;YAEJ;gBACE,OAAO,EAAE,CAAC;SACb;KACF;IAEO,cAAc;QACpB,IAAI,OAAO,GAAG,GAAG,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;QAE7C,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;SAC3C;QAED,OAAO,OAAO,CAAC;KAChB;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,qDACH,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAC5B,QAAQ,EAAC,GAAG,EACZ,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI,CAAC,WAAW,KAAK,UAAU;aACzC,IAEDD,kEACE,KAAK,EAAE;gBACL,eAAe,EAAE,IAAI;gBACrB,KAAK,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;gBAC7B,OAAO,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;aAClC,IAEDA,mEAAM,KAAK,EAAC,WAAW,IACpB,IAAI,CAAC,YAAY,EAAE,EACpBA,mEAAM,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC3C,EACPA,mEAAM,KAAK,EAAC,qBAAqB,IAC/BA,mEAAM,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,KAAK,CAAQ,EAC1C,IAAI,CAAC,IAAI,GAAGA,kBAAM,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,IAAI,CAAQ,GAAG,EAAE,CACtD,CACH,CACD,EACP;KACH;;;;;;","names":["h","Host"],"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/cjs/ix-layout-form.cjs.entry.js

@@ -0,0 +1,94 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-0f6297c8.js');
+
+const layoutFormCss = ":host{display:block;position:relative;margin:0 0.5rem}:host .container{display:flex;align-items:stretch;flex-wrap:wrap;gap:0.5rem}:host ::slotted(*){flex-grow:0;flex-shrink:0}";
+const IxLayoutFormStyle0 = layoutFormCss;
+
+const LayoutForm = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.mediaQueryList = [];
+        this.observer = new MutationObserver(() => this.calculateGridTemplateColumns());
+        this.resizeObserver = new ResizeObserver(() => {
+            this.calculateGridTemplateColumns();
+        });
+        this.layout = [
+            { minWidth: '0', columns: 1 },
+            { minWidth: '35rem', columns: 2 },
+        ];
+        this.gridTemplateColumns = undefined;
+    }
+    connectedCallback() {
+        this.observer.observe(this.hostElement, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['data-colspan'],
+        });
+        this.resizeObserver.observe(this.hostElement);
+        this.updateMediaQueryList();
+    }
+    componentWillLoad() {
+        this.calculateGridTemplateColumns();
+    }
+    disconnectedCallback() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+    }
+    updateMediaQueryList() {
+        this.mediaQueryList = [];
+        this.layout.forEach((layout) => {
+            const mediaQuery = window.matchMedia(`(min-width: ${layout.minWidth})`);
+            this.mediaQueryList.push({
+                mediaQuery,
+                layout,
+            });
+        });
+    }
+    parseNumber(number) {
+        if (!number) {
+            return 1;
+        }
+        const result = parseInt(number);
+        if (isNaN(result)) {
+            return 1;
+        }
+        return result;
+    }
+    calculateGridTemplateColumns() {
+        let layoutColumns = 1;
+        let columnSpacing = '0.5rem';
+        this.mediaQueryList.forEach((mediaQuery) => {
+            if (mediaQuery.mediaQuery.matches) {
+                layoutColumns = mediaQuery.layout.columns;
+            }
+        });
+        Array.from(this.hostElement.children).forEach((child) => {
+            let colspan = this.parseNumber(child.getAttribute('data-colspan'));
+            colspan = Math.min(colspan, layoutColumns);
+            const childRatio = colspan / layoutColumns;
+            child.style.width = `calc(${childRatio * 99.9}% - ${1 - childRatio} * ${columnSpacing})`;
+        });
+    }
+    render() {
+        return (index.h(index.Host, { key: 'd2fa4c6a9f79d88482f665cd46bc96dfe8536535' }, index.h("div", { key: '32c2e2f039e5545b039d073200f1575aafe2b625', class: "container", style: {
+                gridTemplateColumns: this.gridTemplateColumns,
+            } }, index.h("slot", { key: '59930603690b5d72f584817f0e0e3a44e423ca6e' }))));
+    }
+    get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "layout": ["updateMediaQueryList"]
+    }; }
+};
+LayoutForm.style = IxLayoutFormStyle0;
+
+exports.ix_layout_form = LayoutForm;
+
+//# sourceMappingURL=ix-layout-form.cjs.entry.js.map

package/dist/cjs/ix-layout-form.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ix-layout-form.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/layout-form/layout-form.scss?tag=ix-layout-form&encapsulation=shadow","src/components/layout-form/layout-form.tsx"],"sourcesContent":[":host {\n  display: block;\n  position: relative;\n\n  margin: 0 0.5rem;\n\n  .container {\n    display: flex;\n    align-items: stretch;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n  }\n\n  ::slotted(*) {\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n}\n","import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { IxComponent } from '../utils/internal';\n\n@Component({\n  tag: 'ix-layout-form',\n  styleUrl: 'layout-form.scss',\n  shadow: true,\n})\nexport class LayoutForm implements IxComponent {\n  @Element() hostElement!: HTMLIxLayoutFormElement;\n\n  /**\n   * Defines the layout of the form.\n   */\n  @Prop() layout: {\n    minWidth: string;\n    columns: number;\n  }[] = [\n    { minWidth: '0', columns: 1 },\n    { minWidth: '35rem', columns: 2 },\n  ];\n\n  @State() gridTemplateColumns?: string;\n\n  private mediaQueryList: {\n    mediaQuery: MediaQueryList;\n    layout: {\n      minWidth: string;\n      columns: number;\n    };\n  }[] = [];\n\n  private observer = new MutationObserver(() =>\n    this.calculateGridTemplateColumns()\n  );\n\n  private resizeObserver = new ResizeObserver(() => {\n    this.calculateGridTemplateColumns();\n  });\n\n  connectedCallback(): void {\n    this.observer.observe(this.hostElement, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: ['data-colspan'],\n    });\n    this.resizeObserver.observe(this.hostElement);\n\n    this.updateMediaQueryList();\n  }\n\n  componentWillLoad(): void | Promise<void> {\n    this.calculateGridTemplateColumns();\n  }\n\n  disconnectedCallback(): void {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  @Watch('layout')\n  updateMediaQueryList() {\n    this.mediaQueryList = [];\n    this.layout.forEach((layout) => {\n      const mediaQuery = window.matchMedia(`(min-width: ${layout.minWidth})`);\n      this.mediaQueryList.push({\n        mediaQuery,\n        layout,\n      });\n    });\n  }\n\n  private parseNumber(number: string | null) {\n    if (!number) {\n      return 1;\n    }\n\n    const result = parseInt(number);\n    if (isNaN(result)) {\n      return 1;\n    }\n\n    return result;\n  }\n\n  private calculateGridTemplateColumns() {\n    let layoutColumns = 1;\n    let columnSpacing = '0.5rem';\n\n    this.mediaQueryList.forEach((mediaQuery) => {\n      if (mediaQuery.mediaQuery.matches) {\n        layoutColumns = mediaQuery.layout.columns;\n      }\n    });\n\n    let column = 0;\n    Array.from(this.hostElement.children).forEach((child: HTMLElement) => {\n      let colspan = this.parseNumber(child.getAttribute('data-colspan'));\n      colspan = Math.min(colspan, layoutColumns);\n      const childRatio = colspan / layoutColumns;\n\n      child.style.width = `calc(${childRatio * 99.9}% - ${\n        1 - childRatio\n      } * ${columnSpacing})`;\n\n      if (column + colspan > layoutColumns) {\n        column = 0;\n      }\n\n      column = (column + colspan) % layoutColumns;\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class=\"container\"\n          style={{\n            gridTemplateColumns: this.gridTemplateColumns,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c6f0ac73.js');
+const index = require('./index-0f6297c8.js');
 
 const linkButtonCss = ".btn{display:inline-flex;align-items:center;justify-content:center;height:2rem;font-size:0.875rem;font-weight:700;transition:var(--theme-default-time);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 IxLinkButtonStyle0 = linkButtonCss;
@@ -15,13 +15,13 @@ const LinkButton = class {
         this.target = '_self';
     }
     render() {
-        return (index.h(index.Host, { key: '0308562a5da54b5dbc6e5fff61ff5c40458220a4' }, index.h("a", { key: '31312e87d8ec1a6876d0f9f0d119ec5a99e3d7df', title: this.url, tabindex: "0", class: {
+        return (index.h(index.Host, { key: '389f113b4cc2287e9967a4dfab74f08cde025b55' }, index.h("a", { key: '4f50ef3e1e331ffdebb8d4b7c79f18d32f682490', title: this.url, tabindex: "0", class: {
                 'link-button': true,
                 disabled: this.disabled,
-            }, href: this.disabled ? undefined : this.url, target: this.target }, index.h("ix-icon", { key: 'f2f046c1695abcb7ab6c5aae112c78cd9ef4163d', class: "icon", name: 'chevron-right-small', size: "16" }), index.h("div", { key: '04a4a97aa51211e18a585c74aff33b9cd5ed6bc1', class: {
+            }, href: this.disabled ? undefined : this.url, target: this.target }, index.h("ix-icon", { key: '10e9351e9f4fe2afc048d5ea6aed2127bb8c509e', class: "icon", name: 'chevron-right-small', size: "16" }), index.h("div", { key: '38a14f8d696ddf2d3bf438d9b14d997f320a444d', class: {
                 link: true,
                 disabled: this.disabled,
-            } }, index.h("slot", { key: 'a1d09c078e9a4a63ca06a4bbc65c8b8d3e8e1e89' })))));
+            } }, index.h("slot", { key: '7241dc0ba6e2d8a990e6269f998cc15f98e5101b' })))));
     }
 };
 LinkButton.style = IxLinkButtonStyle0;

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c6f0ac73.js');
+const index = require('./index-0f6297c8.js');
 const anime_es = require('./anime.es-e2814360.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{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);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{margin-inline-start:auto;margin-inline-end:1rem}:host .d-none{display:none}:host(.d-none){display:none}";
+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}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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{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);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{margin-inline-start:auto;margin-inline-end:1rem}:host .d-none{display:none}:host(.d-none){display:none}";
 const IxMapNavigationOverlayStyle0 = mapNavigationOverlayCss;
 
 const MapNavigationOverlay = class {
@@ -46,14 +46,14 @@ const MapNavigationOverlay = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: 'c992b5ea02d714ebf9ca9b567c5047d74dc588c7' }, index.h("div", { key: '6b2312354d083296f7c2daca376d82bd33f50b29', class: "overlay-header" }, index.h("div", { key: 'be432f47e376532f48a5408f4f080c2a30af9f9c', class: {
+        return (index.h(index.Host, { key: 'b1b023f69478fa658fe6c6457b44bff7d7f66a03' }, index.h("div", { key: 'bf98a216738787c4261ec2ce5c209db8ba1d5ad5', class: "overlay-header" }, index.h("div", { key: 'c7d2ee22b69ead05685c2dcfb6a1fa44fe705ebc', class: {
                 'color-indicator': true,
                 'd-none': ((_a = this.iconColor) !== null && _a !== void 0 ? _a : this.color) === undefined,
             }, style: {
                 'background-color': ((_b = this.iconColor) !== null && _b !== void 0 ? _b : this.color)
                     ? `var(--theme-${(_c = this.iconColor) !== null && _c !== void 0 ? _c : this.color})`
                     : '',
-            } }), index.h("div", { key: '41fe4514c4076704cdad94ccef438401ff7f4e41', class: "overlay-header-content" }, index.h("ix-icon", { key: '815d0df9d50aa9dd91ccd094a7801c215c0f3f7e', size: "32", name: this.icon }), index.h("span", { key: '670420d4703b65b39c9b0dc4d9031fadb73934da', class: "overlay-header-title", title: this.name }, this.name)), index.h("ix-icon-button", { key: '3ef17d0836b665787e22f6e9da0e14ccecc15d52', class: "overlay-close", ghost: true, icon: 'close', size: "24", onClick: () => this.closeOverlay() })), index.h("slot", { key: '4328f4ab00517bc4de787fc45117c14afc309efb' })));
+            } }), index.h("div", { key: '678acbdbc614fbcec69ff369022cddde35f333cd', class: "overlay-header-content" }, index.h("ix-icon", { key: 'dab435e3d35ec454cedda3655cd80eed04944fe7', size: "32", name: this.icon }), index.h("span", { key: 'b11cf5b0492e88530932d511007a720fe9da9ad2', class: "overlay-header-title", title: this.name }, this.name)), index.h("ix-icon-button", { key: '714196c353feb1d6cb0725bdaf53987bad98c3f5', class: "overlay-close", ghost: true, icon: 'close', size: "24", onClick: () => this.closeOverlay() })), index.h("slot", { key: '7a643aae77ee773125dec522a6410c2678cff878' })));
     }
     get hostElement() { return index.getElement(this); }
 };

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

@@ -1 +1 @@
-{"file":"ix-map-navigation-overlay.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,uBAAuB,GAAG,ihJAAihJ,CAAC;AACljJ,qCAAe,uBAAuB;;MCwBzB,oBAAoB;;;;;;;;;IAiC/B,iBAAiB;QACfA,cAAK,CAAC;YACJ,OAAO,EAAE,IAAI,CAAC,WAAW;YACzB,QAAQ,EAAE,oBAAoB,CAAC,QAAQ;YACvC,cAAc,EAAE,CAAC,CAAC,EAAE,YAAY,CAAC;YACjC,UAAU,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC;YACxB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;YACf,MAAM,EAAE,aAAa;YACrB,KAAK,EAAE;gBACL,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;aAC7C;SACF,CAAC,CAAC;KACJ;IAEO,YAAY;QAClBA,cAAK,CAAC;YACJ,OAAO,EAAE,IAAI,CAAC,WAAW;YACzB,QAAQ,EAAE,oBAAoB,CAAC,QAAQ;YACvC,cAAc,EAAE,CAAC,YAAY,EAAE,CAAC,CAAC;YACjC,UAAU,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC;YACxB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;YACf,MAAM,EAAE,YAAY;YACpB,QAAQ,EAAE;gBACR,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;gBACvB,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;aAC1C;SACF,CAAC,CAAC;KACJ;IAED,MAAM;;QACJ,QACEC,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAC,gBAAgB,IACzBA,kEACE,KAAK,EAAE;gBACL,iBAAiB,EAAE,IAAI;gBACvB,QAAQ,EAAE,CAAC,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK,MAAM,SAAS;aACvD,EACD,KAAK,EAAE;gBACL,kBAAkB,EAChB,CAAA,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK;sBACxB,eAAe,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK,GAAG;sBAC9C,EAAE;aACT,GACI,EACPA,kEAAK,KAAK,EAAC,wBAAwB,IACjCA,sEAAS,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,EAC9CA,mEAAM,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAE,IAAI,CAAC,IAAI,IAChD,IAAI,CAAC,IAAI,CACL,CACH,EACNA,6EACE,KAAK,EAAC,eAAe,EACrB,KAAK,QACL,IAAI,EAAE,OAAO,EACb,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,GAClB,CACd,EAENA,oEAAa,CACR,EACP;KACH;;;AA/FuB,6BAAQ,GAAG,GAAH,CAAO;;;;;","names":["anime","h","Host"],"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   * @deprecated since 2.1.0. Use `icon-color`\n   */\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  @Prop() color: string;\n\n  /**\n   * Color of icon\n   */\n  @Prop() iconColor: 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.iconColor ?? this.color) === undefined,\n            }}\n            style={{\n              'background-color':\n                this.iconColor ?? this.color\n                  ? `var(--theme-${this.iconColor ?? 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}
+{"file":"ix-map-navigation-overlay.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,uBAAuB,GAAG,6qJAA6qJ,CAAC;AAC9sJ,qCAAe,uBAAuB;;MCwBzB,oBAAoB;;;;;;;;;IAiC/B,iBAAiB;QACfA,cAAK,CAAC;YACJ,OAAO,EAAE,IAAI,CAAC,WAAW;YACzB,QAAQ,EAAE,oBAAoB,CAAC,QAAQ;YACvC,cAAc,EAAE,CAAC,CAAC,EAAE,YAAY,CAAC;YACjC,UAAU,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC;YACxB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;YACf,MAAM,EAAE,aAAa;YACrB,KAAK,EAAE;gBACL,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;aAC7C;SACF,CAAC,CAAC;KACJ;IAEO,YAAY;QAClBA,cAAK,CAAC;YACJ,OAAO,EAAE,IAAI,CAAC,WAAW;YACzB,QAAQ,EAAE,oBAAoB,CAAC,QAAQ;YACvC,cAAc,EAAE,CAAC,YAAY,EAAE,CAAC,CAAC;YACjC,UAAU,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC;YACxB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;YACf,MAAM,EAAE,YAAY;YACpB,QAAQ,EAAE;gBACR,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;gBACvB,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;aAC1C;SACF,CAAC,CAAC;KACJ;IAED,MAAM;;QACJ,QACEC,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAC,gBAAgB,IACzBA,kEACE,KAAK,EAAE;gBACL,iBAAiB,EAAE,IAAI;gBACvB,QAAQ,EAAE,CAAC,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK,MAAM,SAAS;aACvD,EACD,KAAK,EAAE;gBACL,kBAAkB,EAChB,CAAA,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK;sBACxB,eAAe,MAAA,IAAI,CAAC,SAAS,mCAAI,IAAI,CAAC,KAAK,GAAG;sBAC9C,EAAE;aACT,GACI,EACPA,kEAAK,KAAK,EAAC,wBAAwB,IACjCA,sEAAS,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAY,EAC9CA,mEAAM,KAAK,EAAC,sBAAsB,EAAC,KAAK,EAAE,IAAI,CAAC,IAAI,IAChD,IAAI,CAAC,IAAI,CACL,CACH,EACNA,6EACE,KAAK,EAAC,eAAe,EACrB,KAAK,QACL,IAAI,EAAE,OAAO,EACb,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,GAClB,CACd,EAENA,oEAAa,CACR,EACP;KACH;;;AA/FuB,6BAAQ,GAAG,GAAH,CAAO;;;;;","names":["anime","h","Host"],"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   * @deprecated since 2.1.0. Use `icon-color`\n   */\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  @Prop() color: string;\n\n  /**\n   * Color of icon\n   */\n  @Prop() iconColor: 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.iconColor ?? this.color) === undefined,\n            }}\n            style={{\n              'background-color':\n                this.iconColor ?? this.color\n                  ? `var(--theme-${this.iconColor ?? 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}

package/dist/cjs/ix-map-navigation.cjs.entry.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-c6f0ac73.js');
+const index = require('./index-0f6297c8.js');
 const anime_es = require('./anime.es-e2814360.js');
 const context = require('./context-98f4a0b3.js');
 require('./typed-event-8032c0c0.js');
 
-const mapNavigationCss = ":host{display:flex;position:relative;width:100%;height:100%}: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 .map-nav{display:flex;margin-left:3.25rem;position:relative;height:100%;flex-grow:1;overflow:hidden}:host .map-nav-sidebar{display:flex;flex-direction:column;align-items:center;width:29.75rem;max-width:29.75rem;min-width:29.75rem;height:100%;left:4rem;background-color:var(--theme-map-navigation--background);border-inline-end:0.125rem solid var(--theme-map-navigation-separator--background);z-index:99}:host .map-nav-sidebar-content{align-items:center;position:relative;overflow:auto;height:100%;width:100%}:host .map-nav-sidebar-content .map-nav-sidebar-static-content{-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);display:flex;justify-content:space-between;margin-top:0.437rem;margin-bottom:0.812rem;margin-left:1rem;margin-right:1rem}:host .map-nav-header{display:flex;position:relative;align-items:center;height:3.5rem;min-height:3.5rem;width:100%}:host .map-nav-header .map-nav-header-brand{background-color:var(--theme-map-navigation-background);display:flex;align-items:center;height:100%;width:100%;padding:0 1rem;--theme-app-header--color:var(--theme-map-navigation-header--color);--theme-app-header-logo--color:var(--theme-map-navigation-logo--color)}:host .map-nav-header .map-nav-header-brand button{margin-left:1rem}:host .map-nav-header-content{display:flex;height:3.5rem;align-items:center;overflow:hidden;padding:0 1rem}:host .map-nav-header-content.empty{height:0}:host .map-nav-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);display:flex;align-items:center;flex-grow:1}:host .content{display:block;flex-grow:1;position:relative;height:100%;overflow:hidden;z-index:calc(var(--theme-z-index-sticky) - 1)}:host ::slotted(ix-menu){position:absolute}";
+const mapNavigationCss = ":host{display:flex;position:relative;width:100%;height:100%}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}: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 .map-nav{display:flex;margin-left:3.25rem;position:relative;height:100%;flex-grow:1;overflow:hidden}:host .map-nav-sidebar{display:flex;flex-direction:column;align-items:center;width:29.75rem;max-width:29.75rem;min-width:29.75rem;height:100%;left:4rem;background-color:var(--theme-map-navigation--background);border-inline-end:0.125rem solid var(--theme-map-navigation-separator--background);z-index:99}:host .map-nav-sidebar-content{align-items:center;position:relative;overflow:auto;height:100%;width:100%}:host .map-nav-sidebar-content .map-nav-sidebar-static-content{-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);display:flex;justify-content:space-between;margin-top:0.437rem;margin-bottom:0.812rem;margin-left:1rem;margin-right:1rem}:host .map-nav-header{display:flex;position:relative;align-items:center;height:3.5rem;min-height:3.5rem;width:100%}:host .map-nav-header .map-nav-header-brand{background-color:var(--theme-map-navigation-background);display:flex;align-items:center;height:100%;width:100%;padding:0 1rem;--theme-app-header--color:var(--theme-map-navigation-header--color);--theme-app-header-logo--color:var(--theme-map-navigation-logo--color)}:host .map-nav-header .map-nav-header-brand button{margin-left:1rem}:host .map-nav-header-content{display:flex;height:3.5rem;align-items:center;overflow:hidden;padding:0 1rem}:host .map-nav-header-content.empty{height:0}:host .map-nav-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);display:flex;align-items:center;flex-grow:1}:host .content{display:block;flex-grow:1;position:relative;height:100%;overflow:hidden;z-index:calc(var(--theme-z-index-sticky) - 1)}:host ::slotted(ix-menu){position:absolute}";
 const IxMapNavigationStyle0 = mapNavigationCss;
 
 const MapNavigation = class {
@@ -158,11 +158,11 @@ const MapNavigation = class {
         this.hasContentHeader = (nodes === null || nodes === void 0 ? void 0 : nodes.length) !== 0;
     }
     render() {
-        return (index.h(index.Host, { key: '2946dcb874fe6142c5e46fc0e631528f9c252acd' }, index.h("slot", { key: '1dade6736fb8ca41922269af3613069109e0f7e1', name: "menu" }), index.h("div", { key: 'ebf94a90f8d8bc250f50e3b6b81ab9529403ced4', class: "map-nav" }, index.h("div", { key: 'ca6e3fb3f7222e415a2c3b0a0485852e0d24eb27', class: "map-nav-sidebar" }, index.h("div", { key: 'eedd75c6ed28651eb0dacc304c2a6bb74a3acb48', class: "map-nav-header" }, index.h("ix-application-header", { key: '29c589f85db676ffd91bb12488e70de7e2e4dbe1', name: this.applicationName, class: "map-nav-header-brand" }, index.h("slot", { key: 'c19497c92151dffa74f57177b67b4ba4e0927598', slot: "logo", name: "logo" }))), index.h("div", { key: '4b3f49c7a748481ba6644748cf81b97346a93e86', class: "map-nav-sidebar-content" }, index.h("div", { key: '2f3ae2b3b2b82259c9d50f84446b3c3b9187595e', class: "map-nav-sidebar-static-content" }, index.h("div", { key: '55256b8072af12003597c805c5b79e5996326199', class: "map-nav-title" }, this.navigationTitle), this.hideContextMenu ? ('') : (index.h("ix-icon-button", { icon: 'context-menu', ghost: true, size: "24", variant: "secondary", onClick: (_) => this.contextMenuClick.emit() }))), index.h("div", { key: 'fb536c51269368ac94db2464fa040992c1bfb272', class: "map-nav-sidebar-user-content" }, index.h("slot", { key: '46a3481ffdb3b1fd94dbcb3e4100d36abd3ec800', name: "sidebar-content" })))), index.h("div", { key: '68e57564835c8813e97a6a5ca27bb6560744b635', class: "content" }, index.h("div", { key: '51fe8de82f713940d867a5d369a4e9c520f8a13b', class: {
+        return (index.h(index.Host, { key: 'd4732f320cef195fd71fcbd9cac4efa9d47d62b7' }, index.h("slot", { key: 'd89d067a69a0dc395473a37a350fde3373fd0ad8', name: "menu" }), index.h("div", { key: '0d82e970de98c5ed5cee50dd1e5c12254c1d1ec8', class: "map-nav" }, index.h("div", { key: '651974e052b845a105dc0c2da24d2aeb32f19153', class: "map-nav-sidebar" }, index.h("div", { key: 'ddd61f170fc617eb7f6ebc7d15bd7302afe2f499', class: "map-nav-header" }, index.h("ix-application-header", { key: '1a7a9dc0086e3154d1d9f47f53333de2b72f0cb2', name: this.applicationName, class: "map-nav-header-brand" }, index.h("slot", { key: 'c0298ae4799751bcca1f576409fa8804018fa01f', slot: "logo", name: "logo" }))), index.h("div", { key: 'a74e511549005ebf76418632a66704fb3f0ac53b', class: "map-nav-sidebar-content" }, index.h("div", { key: '6ab0f9f636be4b5341ee60228f942c9f188edf0f', class: "map-nav-sidebar-static-content" }, index.h("div", { key: 'd31102ac7b3e338a3d0d5eb8c2056093ea35f3c1', class: "map-nav-title" }, this.navigationTitle), this.hideContextMenu ? ('') : (index.h("ix-icon-button", { icon: 'context-menu', ghost: true, size: "24", variant: "secondary", onClick: (_) => this.contextMenuClick.emit() }))), index.h("div", { key: '1e3e148d42813f499abed125afe8f87f83e15f07', class: "map-nav-sidebar-user-content" }, index.h("slot", { key: '77c8448972889f71ea084ff3eb4ab511f3ce4e61', name: "sidebar-content" })))), index.h("div", { key: '7b91060048aa1c326b4c45dbc919c7576f41133a', class: "content" }, index.h("div", { key: '07b4cd1aadb0e24cc4fbb97ca3ea4763cce102bd', class: {
                 'map-nav-header-content': true,
                 'bg-2': true,
                 empty: !this.hasContentHeader,
-            } }, index.h("slot", { key: 'bb2fd5b5bb1577353c85780fa3f285702f1d224e', name: "content-header", onSlotchange: (e) => this.checkHasContentHeader(e) })), index.h("main", { key: '2735c1d81e97f98b9a9e5652ee7d281e233a21a6' }, index.h("slot", { key: '830e9656af5d9e46e0d39202abd82ad9fe1ce7fa' }), index.h("slot", { key: '7bf4f8bce525e3572acdeb08a852e029e7f5cd09', name: "overlay" }))))));
+            } }, index.h("slot", { key: 'fec68f39d08a4509be7611c2a62b1b9daff93980', name: "content-header", onSlotchange: (e) => this.checkHasContentHeader(e) })), index.h("main", { key: 'e5f4c7145bce662d0f9d4c1ca33663b7eacd138e' }, index.h("slot", { key: 'ba1298d913a0b0395ce7ecb9c309d21d3057a1f2' }), index.h("slot", { key: '31f07289d03e8408e4f197869a8cba4d50ac3129', name: "overlay" }))))));
     }
     get hostElement() { return index.getElement(this); }
 };