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

package/dist/siemens-ix/p-921c59c4.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as i,h as o,F as t,H as l,g as d}from"./p-f86a894a.js";import{a as r}from"./p-71206084.js";import{a}from"./p-36c0f378.js";const n=":host{display:flex;flex-direction:column;border-radius:var(--theme-blind--border-radius);overflow:hidden}: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 .blind-header-wrapper{position:relative;min-height:3rem;height:3rem;overflow:hidden}:host .blind-header-content{display:flex;position:relative;align-items:center;justify-content:flex-start;width:100%;height:100%;pointer-events:none;padding-left:0.5rem}:host .blind-header-title{display:flex;position:relative;align-items:center;flex-grow:1;margin-right:0.5rem}:host .blind-header{all:unset;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;position:absolute;top:0px;left:0px;pointer-events:all;padding-left:2.5rem;min-height:3rem;height:3rem;width:calc(100% - 2 * var(--theme-blind--border-thickness));border:solid var(--theme-blind--border-thickness) transparent;border-radius:var(--theme-blind--border-radius) var(--theme-blind--border-radius) 0 0;cursor:pointer}:host .blind-header:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-color-focus-bdr);outline:none}:host .blind-header-title-icon,:host .collapse-icon{margin-right:0.5rem}:host .blind-header-title-row{display:flex;flex-grow:1;overflow:hidden}:host .blind-header-title-col{display:inline-flex;align-items:center;width:calc(100% - 1rem);overflow:hidden}:host .blind-header-title-col:not(:first-of-type){justify-content:flex-end}:host ix-typography{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .blind-header-title-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline-end:0.5rem}:host .blind-header-title-sublabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:0.5rem}:host .blind-header-title{display:flex;align-items:center;flex-grow:1;height:100%;min-width:0}:host .blind-header-labels{display:inline-flex;flex-grow:1;min-width:0}:host .blind-content{display:block;padding:1rem;transition-property:padding;transition-duration:var(--theme-default-time);transition-timing-function:ease-in}:host .blind-content.hide{max-height:0;padding-top:0px;padding-bottom:0px}:host .header-actions{pointer-events:all;margin-left:auto}:host(.blind-alarm){background-color:var(--theme-blind-base--background)}:host(.blind-alarm) .blind-header{background-color:var(--theme-color-alarm)}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-alarm--hover)}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-alarm--active)}:host(.blind-alarm) .blind-header-title-label,:host(.blind-alarm) .blind-header-title-sublabel{color:var(--theme-color-alarm--contrast)}:host(.blind-critical){background-color:var(--theme-blind-base--background)}:host(.blind-critical) .blind-header{background-color:var(--theme-color-critical)}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-critical--hover)}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-critical) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-critical--active)}:host(.blind-critical) .blind-header-title-label,:host(.blind-critical) .blind-header-title-sublabel{color:var(--theme-color-critical--contrast)}:host(.blind-info){background-color:var(--theme-blind-base--background)}:host(.blind-info) .blind-header{background-color:var(--theme-color-info)}:host(.blind-info) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-info) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-info--hover)}:host(.blind-info) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-info) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-info) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-info--active)}:host(.blind-info) .blind-header-title-label,:host(.blind-info) .blind-header-title-sublabel{color:var(--theme-color-info--contrast)}:host(.blind-insight){background-color:var(--theme-blind-base--background)}:host(.blind-insight) .blind-header{background-color:var(--theme-color-insight)}:host(.blind-insight) .blind-header:not(.disabled):not(:disabled).hover,:host(.blind-insight) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host(.blind-insight) .blind-header:not(.disabled):not(:disabled).active,:host(.blind-insight) .blind-header:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host(.blind-insight) .blind-header-title-label{color:var(--theme-color-std-text)}:host(.blind-insight) .blind-header-title-sublabel{color:var(--theme-color-soft-text)}:host(.blind-neutral){background-color:var(--theme-blind-base--background)}:host(.blind-neutral) .blind-header{background-color:var(--theme-color-neutral)}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-neutral--hover)}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-neutral--active)}:host(.blind-neutral) .blind-header-title-label,:host(.blind-neutral) .blind-header-title-sublabel{color:var(--theme-color-neutral--contrast)}:host(.blind-notification){background-color:var(--theme-blind-base--background)}:host(.blind-notification) .blind-header{background-color:var(--theme-color-notification)}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-notification--hover)}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-notification) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-notification--active)}:host(.blind-notification) .blind-header-title-label,:host(.blind-notification) .blind-header-title-sublabel{color:var(--theme-color-notification--contrast)}:host(.blind-success){background-color:var(--theme-blind-base--background)}:host(.blind-success) .blind-header{background-color:var(--theme-color-success)}:host(.blind-success) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-success) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-success--hover)}:host(.blind-success) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-success) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-success) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-success--active)}:host(.blind-success) .blind-header-title-label,:host(.blind-success) .blind-header-title-sublabel{color:var(--theme-color-success--contrast)}:host(.blind-warning){background-color:var(--theme-blind-base--background)}:host(.blind-warning) .blind-header{background-color:var(--theme-color-warning)}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-warning--hover)}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-warning) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-warning--active)}:host(.blind-warning) .blind-header-title-label,:host(.blind-warning) .blind-header-title-sublabel{color:var(--theme-color-warning--contrast)}:host(.blind-primary){background-color:var(--theme-blind-base--background)}:host(.blind-primary) .blind-header{background-color:var(--theme-color-primary)}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-primary--hover)}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-primary) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-primary--active)}:host(.blind-primary) .blind-header-title-label,:host(.blind-primary) .blind-header-title-sublabel{color:var(--theme-color-primary--contrast)}:host(.blind-outline){border:solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color);border-color:var(--theme-color-soft-bdr)}:host(.blind-outline) .blind-header{background-color:var(--theme-color-ghost)}:host(.blind-outline) .blind-header:not(.disabled):not(:disabled).hover,:host(.blind-outline) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host(.blind-outline) .blind-header:not(.disabled):not(:disabled).active,:host(.blind-outline) .blind-header:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host(.blind-outline) .blind-header-title-label{color:var(--theme-color-std-text)}:host(.blind-outline) .blind-header-title-sublabel{color:var(--theme-color-soft-text)}";const s=n;let b=0;const h=class{constructor(o){e(this,o);this.collapsedChange=i(this,"collapsedChange",7);this.blindId=++b;this.collapsed=false;this.label=undefined;this.sublabel=undefined;this.icon=undefined;this.variant="insight"}onHeaderClick(){this.collapsed=!this.collapsed;this.collapsedChange.emit(this.collapsed)}componentDidLoad(){this.animateCollapse(this.collapsed)}get content(){return this.hostElement.shadowRoot.querySelector(".blind-content")}animation(e){this.animateCollapse(e)}animateCollapse(e){if(e){this.rotateChevronRight()}else{this.rotateChevronDown()}}rotateChevronDown(){r({targets:this.chevronRef,duration:150,easing:"easeInOutSine",rotateZ:90});r({targets:this.content,duration:150,easing:"easeInOutSine",opacity:1})}rotateChevronRight(){r({targets:this.chevronRef,duration:150,easing:"easeInOutSine",rotateZ:0});r({targets:this.content,duration:150,easing:"easeInOutSine",opacity:0})}render(){return o(l,{key:"5ec247be84e5612134ffec1e53730f61a214cd0b",class:{[`blind-${this.variant}`]:true}},o("div",{key:"abe3273f7a820cd6481d7f75a174e3c6c332b438",class:"blind-header-wrapper"},o("button",{key:"12a572e7145c435451a8a9cc89f66c50d58d3cca",class:{"blind-header":true,[`blind-${this.variant}`]:true,closed:this.collapsed},type:"button","aria-labelledby":`ix-blind-header-title-${this.blindId}`,"aria-controls":`ix-blind-content-section-${this.blindId}`,"aria-expanded":a(!this.collapsed),onClick:()=>this.onHeaderClick()},o("slot",{key:"11a9cc78537fac060310eeba7f57a147907e2a14",name:"custom-header"})),o("div",{key:"08abe64452f9841fc50951708ffdbb13f594e80b",class:"blind-header-content"},o("ix-icon",{key:"67a41dada571459470153b03247bc7f175c206de",class:"collapse-icon",name:"chevron-right-small",color:this.variant==="insight"||this.variant==="outline"?"color-primary":`color-${this.variant}--contrast`,ref:e=>this.chevronRef=e}),o("div",{key:"6a898defd05378868577745464956fd8ecc67472",class:"blind-header-title",id:`ix-blind-header-title-${this.blindId}`},this.label!==undefined?o(t,null,this.icon&&o("ix-icon",{class:"blind-header-title-icon",name:this.icon,color:this.variant==="insight"||this.variant==="outline"?"color-std-text":`color-${this.variant}--contrast`}),o("div",{class:"blind-header-title-row"},o("div",{class:"blind-header-title-col"},o("ix-typography",{title:this.label,format:"label-lg",bold:true},o("div",{class:"blind-header-title-label",title:this.label},this.label))),this.sublabel&&o("div",{class:"blind-header-title-col"},o("ix-typography",{title:this.sublabel},o("div",{class:"blind-header-title-sublabel"},this.sublabel)))),o("div",{class:"header-actions"},o("slot",{name:"header-actions"}))):null))),o("section",{key:"909fdaeec7732c55c81833e6f0212cea5b2174b0",id:`ix-blind-content-section-${this.blindId}`,"aria-labelledby":`ix-blind-header-title-${this.blindId}`},o("div",{key:"ace2f5a2269acc3d0c2c79a0cf31df6283038bec",class:{"blind-content":true,hide:this.collapsed}},!this.collapsed?o("slot",null):null)))}get hostElement(){return d(this)}static get watchers(){return{collapsed:["animation"]}}};h.style=s;export{h as ix_blind};
+//# sourceMappingURL=p-921c59c4.entry.js.map

package/dist/siemens-ix/{p-18a1c4dd.entry.js.map → p-921c59c4.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["blindCss","IxBlindStyle0","sequentialInstanceId","Blind","constructor","hostRef","this","blindId","onHeaderClick","collapsed","collapsedChange","emit","componentDidLoad","animateCollapse","content","hostElement","shadowRoot","querySelector","animation","isCollapsed","rotateChevronRight","rotateChevronDown","anime","targets","chevronRef","duration","easing","rotateZ","opacity","render","h","Host","key","class","variant","closed","type","a11yBoolean","onClick","name","color","ref","id","label","undefined","Fragment","icon","title","format","bold","sublabel","hide"],"sources":["src/components/blind/blind.scss?tag=ix-blind&encapsulation=shadow","src/components/blind/blind.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@mixin blind($variant: 'insight') {\n  :host(.blind-#{$variant}) {\n    @if $variant == 'outline' {\n      border: solid\n        var(--theme-blind--border-thickness)\n        var(--theme-blind-base--border-color);\n    }\n\n    .blind-header {\n      @if $variant == 'outline' {\n        background-color: var(--theme-color-ghost);\n      } @else {\n        background-color: var(--theme-color-#{$variant});\n      }\n\n      @if $variant == 'insight' or $variant == 'outline' {\n        @include ghost-hover-pressed;\n      } @else {\n        @include hover {\n          background-color: var(--theme-color-#{$variant}--hover);\n        }\n\n        @include active {\n          background-color: var(--theme-color-#{$variant}--active);\n        }\n      }\n    }\n\n    @if $variant == 'insight' or $variant == 'outline' {\n      .blind-header-title-label {\n        color: var(--theme-color-std-text);\n      }\n      .blind-header-title-sublabel {\n        color: var(--theme-color-soft-text);\n      }\n    } @else {\n      .blind-header-title-label,\n      .blind-header-title-sublabel {\n        color: var(--theme-color-#{$variant}--contrast);\n      }\n    }\n\n    @if $variant == 'outline' {\n      border-color: var(--theme-color-soft-bdr);\n    } @else {\n      background-color: var(--theme-blind-base--background);\n    }\n  }\n}\n\n:host {\n  @include ix-component;\n  display: flex;\n  flex-direction: column;\n  border-radius: var(--theme-blind--border-radius);\n  overflow: hidden;\n\n  .blind-header-wrapper {\n    position: relative;\n    min-height: 3rem;\n    height: 3rem;\n    overflow: hidden;\n  }\n\n  .blind-header-content {\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: flex-start;\n\n    width: 100%;\n    height: 100%;\n\n    pointer-events: none;\n    padding-left: 0.5rem;\n  }\n\n  .blind-header-title {\n    display: flex;\n    position: relative;\n    align-items: center;\n    flex-grow: 1;\n    margin-right: 0.5rem;\n  }\n\n  .blind-header {\n    all: unset;\n    @include ellipsis;\n\n    display: block;\n    position: absolute;\n\n    top: 0px;\n    left: 0px;\n\n    pointer-events: all;\n\n    padding-left: 2.5rem;\n    min-height: 3rem;\n    height: 3rem;\n    width: calc(100% - 2 * var(--theme-blind--border-thickness));\n    border: solid var(--theme-blind--border-thickness) transparent;\n    border-radius: var(--theme-blind--border-radius)\n      var(--theme-blind--border-radius) 0 0;\n    cursor: pointer;\n\n    @include focus-visible {\n      border-color: var(--theme-color-focus-bdr);\n      outline: none;\n    }\n  }\n\n  .blind-header-title-icon,\n  .collapse-icon {\n    margin-right: $small-space;\n  }\n\n  .blind-header-title-row {\n    display: flex;\n    flex-grow: 1;\n    overflow: hidden;\n  }\n\n  .blind-header-title-col {\n    display: inline-flex;\n    align-items: center;\n    width: calc(100% - 1rem);\n    overflow: hidden;\n  }\n\n  .blind-header-title-col:not(:first-of-type) {\n    justify-content: flex-end;\n  }\n  ix-typography {\n    flex-grow: 1;\n    @include ellipsis;\n  }\n\n  .blind-header-title-label {\n    @include ellipsis;\n    padding-inline-end: 0.5rem;\n  }\n\n  .blind-header-title-sublabel {\n    @include ellipsis;\n    padding-inline: 0.5rem;\n  }\n\n  .blind-header-title {\n    display: flex;\n    align-items: center;\n    flex-grow: 1;\n    height: 100%;\n    min-width: 0;\n  }\n\n  .blind-header-labels {\n    display: inline-flex;\n    flex-grow: 1;\n    min-width: 0;\n  }\n\n  .blind-content {\n    display: block;\n    padding: 1rem;\n    transition-property: padding;\n    transition-duration: var(--theme-default-time);\n    transition-timing-function: ease-in;\n\n    &.hide {\n      max-height: 0;\n      padding-top: 0px;\n      padding-bottom: 0px;\n    }\n  }\n\n  .header-actions {\n    pointer-events: all;\n    margin-left: auto;\n  }\n}\n\n$blind-variants: (\n  alarm,\n  critical,\n  info,\n  insight,\n  neutral,\n  notification,\n  success,\n  warning,\n  primary,\n  outline\n);\n\n@each $variant in $blind-variants {\n  @include blind($variant);\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  Fragment,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { CardVariant } from '../card/card';\nimport { a11yBoolean } from '../utils/a11y';\n\nexport type BlindVariant = CardVariant | 'outline';\n\nlet sequentialInstanceId = 0;\n\n@Component({\n  tag: 'ix-blind',\n  styleUrl: 'blind.scss',\n  shadow: true,\n})\nexport class Blind {\n  /**\n   * Collapsed state\n   */\n  @Prop({ mutable: true, reflect: true }) collapsed = false;\n\n  /**\n   * Label of blind\n   */\n  @Prop() label: string;\n\n  /**\n   * Secondary label inside blind header\n   * @since 2.0.0\n   */\n  @Prop() sublabel: string;\n\n  /**\n   * Optional icon to be displayed next to the header label\n   * @since 1.5.0\n   */\n  @Prop() icon: string;\n\n  /**\n   * Blind variant\n   * @since 2.0.0\n   */\n  @Prop() variant: BlindVariant = 'insight';\n\n  /**\n   * Collapsed state changed\n   */\n  @Event() collapsedChange: EventEmitter<boolean>;\n\n  @Element() hostElement!: HTMLIxBlindElement;\n\n  private chevronRef: HTMLElement;\n  private blindId = ++sequentialInstanceId;\n\n  constructor() {}\n\n  private onHeaderClick() {\n    this.collapsed = !this.collapsed;\n    this.collapsedChange.emit(this.collapsed);\n  }\n\n  componentDidLoad() {\n    this.animateCollapse(this.collapsed);\n  }\n\n  get content() {\n    return this.hostElement.shadowRoot.querySelector('.blind-content');\n  }\n\n  @Watch('collapsed')\n  animation(isCollapsed: boolean) {\n    this.animateCollapse(isCollapsed);\n  }\n\n  private animateCollapse(isCollapsed: boolean) {\n    if (isCollapsed) {\n      this.rotateChevronRight();\n    } else {\n      this.rotateChevronDown();\n    }\n  }\n\n  private rotateChevronDown() {\n    anime({\n      targets: this.chevronRef,\n      duration: 150,\n      easing: 'easeInOutSine',\n      rotateZ: 90,\n    });\n    anime({\n      targets: this.content,\n      duration: 150,\n      easing: 'easeInOutSine',\n      opacity: 1,\n    });\n  }\n\n  private rotateChevronRight() {\n    anime({\n      targets: this.chevronRef,\n      duration: 150,\n      easing: 'easeInOutSine',\n      rotateZ: 0,\n    });\n    anime({\n      targets: this.content,\n      duration: 150,\n      easing: 'easeInOutSine',\n      opacity: 0,\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          [`blind-${this.variant}`]: true,\n        }}\n      >\n        <div class={'blind-header-wrapper'}>\n          <button\n            class={{\n              'blind-header': true,\n              [`blind-${this.variant}`]: true,\n              closed: this.collapsed,\n            }}\n            type=\"button\"\n            aria-labelledby={`ix-blind-header-title-${this.blindId}`}\n            aria-controls={`ix-blind-content-section-${this.blindId}`}\n            aria-expanded={a11yBoolean(!this.collapsed)}\n            onClick={() => this.onHeaderClick()}\n          >\n            <slot name=\"custom-header\"></slot>\n          </button>\n\n          <div class={'blind-header-content'}>\n            <ix-icon\n              class=\"collapse-icon\"\n              name={'chevron-right-small'}\n              color={\n                this.variant === 'insight' || this.variant === 'outline'\n                  ? 'color-primary'\n                  : `color-${this.variant}--contrast`\n              }\n              ref={(ref) => (this.chevronRef = ref)}\n            ></ix-icon>\n            <div\n              class=\"blind-header-title\"\n              id={`ix-blind-header-title-${this.blindId}`}\n            >\n              {this.label !== undefined ? (\n                <Fragment>\n                  {this.icon && (\n                    <ix-icon\n                      class=\"blind-header-title-icon\"\n                      name={this.icon}\n                      color={\n                        this.variant === 'insight' || this.variant === 'outline'\n                          ? 'color-std-text'\n                          : `color-${this.variant}--contrast`\n                      }\n                    ></ix-icon>\n                  )}\n                  <div class={'blind-header-title-row'}>\n                    <div class=\"blind-header-title-col\">\n                      <ix-typography title={this.label} format=\"label-lg\" bold>\n                        <div\n                          class=\"blind-header-title-label\"\n                          title={this.label}\n                        >\n                          {this.label}\n                        </div>\n                      </ix-typography>\n                    </div>\n\n                    {this.sublabel && (\n                      <div class=\"blind-header-title-col\">\n                        <ix-typography title={this.sublabel}>\n                          <div class=\"blind-header-title-sublabel\">\n                            {this.sublabel}\n                          </div>\n                        </ix-typography>\n                      </div>\n                    )}\n                  </div>\n                  <div class=\"header-actions\">\n                    <slot name=\"header-actions\"></slot>\n                  </div>\n                </Fragment>\n              ) : null}\n            </div>\n          </div>\n        </div>\n        <section\n          id={`ix-blind-content-section-${this.blindId}`}\n          aria-labelledby={`ix-blind-header-title-${this.blindId}`}\n        >\n          <div\n            class={{\n              'blind-content': true,\n              hide: this.collapsed,\n            }}\n          >\n            {!this.collapsed ? <slot></slot> : null}\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n"],"mappings":"0IAAA,MAAMA,EAAW,qwUACjB,MAAAC,EAAeD,ECyBf,IAAIE,EAAuB,E,MAOdC,EAAK,MAuChB,WAAAC,CAAAC,G,2DAFQC,KAAAC,UAAYL,E,eAjCgC,M,8EAuBpB,S,CAcxB,aAAAM,GACNF,KAAKG,WAAaH,KAAKG,UACvBH,KAAKI,gBAAgBC,KAAKL,KAAKG,U,CAGjC,gBAAAG,GACEN,KAAKO,gBAAgBP,KAAKG,U,CAG5B,WAAIK,GACF,OAAOR,KAAKS,YAAYC,WAAWC,cAAc,iB,CAInD,SAAAC,CAAUC,GACRb,KAAKO,gBAAgBM,E,CAGf,eAAAN,CAAgBM,GACtB,GAAIA,EAAa,CACfb,KAAKc,oB,KACA,CACLd,KAAKe,mB,EAID,iBAAAA,GACNC,EAAM,CACJC,QAASjB,KAAKkB,WACdC,SAAU,IACVC,OAAQ,gBACRC,QAAS,KAEXL,EAAM,CACJC,QAASjB,KAAKQ,QACdW,SAAU,IACVC,OAAQ,gBACRE,QAAS,G,CAIL,kBAAAR,GACNE,EAAM,CACJC,QAASjB,KAAKkB,WACdC,SAAU,IACVC,OAAQ,gBACRC,QAAS,IAEXL,EAAM,CACJC,QAASjB,KAAKQ,QACdW,SAAU,IACVC,OAAQ,gBACRE,QAAS,G,CAIb,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,CAAC,SAAS3B,KAAK4B,WAAY,OAG7BJ,EAAA,OAAAE,IAAA,2CAAKC,MAAO,wBACVH,EAAA,UAAAE,IAAA,2CACEC,MAAO,CACL,eAAgB,KAChB,CAAC,SAAS3B,KAAK4B,WAAY,KAC3BC,OAAQ7B,KAAKG,WAEf2B,KAAK,SAAQ,kBACI,yBAAyB9B,KAAKC,UAAS,gBACzC,4BAA4BD,KAAKC,UAAS,gBAC1C8B,GAAa/B,KAAKG,WACjC6B,QAAS,IAAMhC,KAAKE,iBAEpBsB,EAAA,QAAAE,IAAA,2CAAMO,KAAK,mBAGbT,EAAA,OAAAE,IAAA,2CAAKC,MAAO,wBACVH,EAAA,WAAAE,IAAA,2CACEC,MAAM,gBACNM,KAAM,sBACNC,MACElC,KAAK4B,UAAY,WAAa5B,KAAK4B,UAAY,UAC3C,gBACA,SAAS5B,KAAK4B,oBAEpBO,IAAMA,GAASnC,KAAKkB,WAAaiB,IAEnCX,EAAA,OAAAE,IAAA,2CACEC,MAAM,qBACNS,GAAI,yBAAyBpC,KAAKC,WAEjCD,KAAKqC,QAAUC,UACdd,EAACe,EAAQ,KACNvC,KAAKwC,MACJhB,EAAA,WACEG,MAAM,0BACNM,KAAMjC,KAAKwC,KACXN,MACElC,KAAK4B,UAAY,WAAa5B,KAAK4B,UAAY,UAC3C,iBACA,SAAS5B,KAAK4B,sBAIxBJ,EAAA,OAAKG,MAAO,0BACVH,EAAA,OAAKG,MAAM,0BACTH,EAAA,iBAAeiB,MAAOzC,KAAKqC,MAAOK,OAAO,WAAWC,KAAI,MACtDnB,EAAA,OACEG,MAAM,2BACNc,MAAOzC,KAAKqC,OAEXrC,KAAKqC,SAKXrC,KAAK4C,UACJpB,EAAA,OAAKG,MAAM,0BACTH,EAAA,iBAAeiB,MAAOzC,KAAK4C,UACzBpB,EAAA,OAAKG,MAAM,+BACR3B,KAAK4C,aAMhBpB,EAAA,OAAKG,MAAM,kBACTH,EAAA,QAAMS,KAAK,qBAGb,QAIVT,EAAA,WAAAE,IAAA,2CACEU,GAAI,4BAA4BpC,KAAKC,UAAS,kBAC7B,yBAAyBD,KAAKC,WAE/CuB,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACL,gBAAiB,KACjBkB,KAAM7C,KAAKG,aAGXH,KAAKG,UAAYqB,EAAA,aAAgB,O"}
+{"version":3,"names":["blindCss","IxBlindStyle0","sequentialInstanceId","Blind","constructor","hostRef","this","blindId","onHeaderClick","collapsed","collapsedChange","emit","componentDidLoad","animateCollapse","content","hostElement","shadowRoot","querySelector","animation","isCollapsed","rotateChevronRight","rotateChevronDown","anime","targets","chevronRef","duration","easing","rotateZ","opacity","render","h","Host","key","class","variant","closed","type","a11yBoolean","onClick","name","color","ref","id","label","undefined","Fragment","icon","title","format","bold","sublabel","hide"],"sources":["src/components/blind/blind.scss?tag=ix-blind&encapsulation=shadow","src/components/blind/blind.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@mixin blind($variant: 'insight') {\n  :host(.blind-#{$variant}) {\n    @if $variant == 'outline' {\n      border: solid\n        var(--theme-blind--border-thickness)\n        var(--theme-blind-base--border-color);\n    }\n\n    .blind-header {\n      @if $variant == 'outline' {\n        background-color: var(--theme-color-ghost);\n      } @else {\n        background-color: var(--theme-color-#{$variant});\n      }\n\n      @if $variant == 'insight' or $variant == 'outline' {\n        @include ghost-hover-pressed;\n      } @else {\n        @include hover {\n          background-color: var(--theme-color-#{$variant}--hover);\n        }\n\n        @include active {\n          background-color: var(--theme-color-#{$variant}--active);\n        }\n      }\n    }\n\n    @if $variant == 'insight' or $variant == 'outline' {\n      .blind-header-title-label {\n        color: var(--theme-color-std-text);\n      }\n      .blind-header-title-sublabel {\n        color: var(--theme-color-soft-text);\n      }\n    } @else {\n      .blind-header-title-label,\n      .blind-header-title-sublabel {\n        color: var(--theme-color-#{$variant}--contrast);\n      }\n    }\n\n    @if $variant == 'outline' {\n      border-color: var(--theme-color-soft-bdr);\n    } @else {\n      background-color: var(--theme-blind-base--background);\n    }\n  }\n}\n\n:host {\n  @include ix-component;\n  display: flex;\n  flex-direction: column;\n  border-radius: var(--theme-blind--border-radius);\n  overflow: hidden;\n\n  .blind-header-wrapper {\n    position: relative;\n    min-height: 3rem;\n    height: 3rem;\n    overflow: hidden;\n  }\n\n  .blind-header-content {\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: flex-start;\n\n    width: 100%;\n    height: 100%;\n\n    pointer-events: none;\n    padding-left: 0.5rem;\n  }\n\n  .blind-header-title {\n    display: flex;\n    position: relative;\n    align-items: center;\n    flex-grow: 1;\n    margin-right: 0.5rem;\n  }\n\n  .blind-header {\n    all: unset;\n    @include ellipsis;\n\n    display: block;\n    position: absolute;\n\n    top: 0px;\n    left: 0px;\n\n    pointer-events: all;\n\n    padding-left: 2.5rem;\n    min-height: 3rem;\n    height: 3rem;\n    width: calc(100% - 2 * var(--theme-blind--border-thickness));\n    border: solid var(--theme-blind--border-thickness) transparent;\n    border-radius: var(--theme-blind--border-radius)\n      var(--theme-blind--border-radius) 0 0;\n    cursor: pointer;\n\n    @include focus-visible {\n      border-color: var(--theme-color-focus-bdr);\n      outline: none;\n    }\n  }\n\n  .blind-header-title-icon,\n  .collapse-icon {\n    margin-right: $small-space;\n  }\n\n  .blind-header-title-row {\n    display: flex;\n    flex-grow: 1;\n    overflow: hidden;\n  }\n\n  .blind-header-title-col {\n    display: inline-flex;\n    align-items: center;\n    width: calc(100% - 1rem);\n    overflow: hidden;\n  }\n\n  .blind-header-title-col:not(:first-of-type) {\n    justify-content: flex-end;\n  }\n  ix-typography {\n    flex-grow: 1;\n    @include ellipsis;\n  }\n\n  .blind-header-title-label {\n    @include ellipsis;\n    padding-inline-end: 0.5rem;\n  }\n\n  .blind-header-title-sublabel {\n    @include ellipsis;\n    padding-inline: 0.5rem;\n  }\n\n  .blind-header-title {\n    display: flex;\n    align-items: center;\n    flex-grow: 1;\n    height: 100%;\n    min-width: 0;\n  }\n\n  .blind-header-labels {\n    display: inline-flex;\n    flex-grow: 1;\n    min-width: 0;\n  }\n\n  .blind-content {\n    display: block;\n    padding: 1rem;\n    transition-property: padding;\n    transition-duration: var(--theme-default-time);\n    transition-timing-function: ease-in;\n\n    &.hide {\n      max-height: 0;\n      padding-top: 0px;\n      padding-bottom: 0px;\n    }\n  }\n\n  .header-actions {\n    pointer-events: all;\n    margin-left: auto;\n  }\n}\n\n$blind-variants: (\n  alarm,\n  critical,\n  info,\n  insight,\n  neutral,\n  notification,\n  success,\n  warning,\n  primary,\n  outline\n);\n\n@each $variant in $blind-variants {\n  @include blind($variant);\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  Fragment,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { CardVariant } from '../card/card';\nimport { a11yBoolean } from '../utils/a11y';\n\nexport type BlindVariant = CardVariant | 'outline';\n\nlet sequentialInstanceId = 0;\n\n@Component({\n  tag: 'ix-blind',\n  styleUrl: 'blind.scss',\n  shadow: true,\n})\nexport class Blind {\n  /**\n   * Collapsed state\n   */\n  @Prop({ mutable: true, reflect: true }) collapsed = false;\n\n  /**\n   * Label of blind\n   */\n  @Prop() label: string;\n\n  /**\n   * Secondary label inside blind header\n   * @since 2.0.0\n   */\n  @Prop() sublabel: string;\n\n  /**\n   * Optional icon to be displayed next to the header label\n   * @since 1.5.0\n   */\n  @Prop() icon: string;\n\n  /**\n   * Blind variant\n   * @since 2.0.0\n   */\n  @Prop() variant: BlindVariant = 'insight';\n\n  /**\n   * Collapsed state changed\n   */\n  @Event() collapsedChange: EventEmitter<boolean>;\n\n  @Element() hostElement!: HTMLIxBlindElement;\n\n  private chevronRef: HTMLElement;\n  private blindId = ++sequentialInstanceId;\n\n  constructor() {}\n\n  private onHeaderClick() {\n    this.collapsed = !this.collapsed;\n    this.collapsedChange.emit(this.collapsed);\n  }\n\n  componentDidLoad() {\n    this.animateCollapse(this.collapsed);\n  }\n\n  get content() {\n    return this.hostElement.shadowRoot.querySelector('.blind-content');\n  }\n\n  @Watch('collapsed')\n  animation(isCollapsed: boolean) {\n    this.animateCollapse(isCollapsed);\n  }\n\n  private animateCollapse(isCollapsed: boolean) {\n    if (isCollapsed) {\n      this.rotateChevronRight();\n    } else {\n      this.rotateChevronDown();\n    }\n  }\n\n  private rotateChevronDown() {\n    anime({\n      targets: this.chevronRef,\n      duration: 150,\n      easing: 'easeInOutSine',\n      rotateZ: 90,\n    });\n    anime({\n      targets: this.content,\n      duration: 150,\n      easing: 'easeInOutSine',\n      opacity: 1,\n    });\n  }\n\n  private rotateChevronRight() {\n    anime({\n      targets: this.chevronRef,\n      duration: 150,\n      easing: 'easeInOutSine',\n      rotateZ: 0,\n    });\n    anime({\n      targets: this.content,\n      duration: 150,\n      easing: 'easeInOutSine',\n      opacity: 0,\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          [`blind-${this.variant}`]: true,\n        }}\n      >\n        <div class={'blind-header-wrapper'}>\n          <button\n            class={{\n              'blind-header': true,\n              [`blind-${this.variant}`]: true,\n              closed: this.collapsed,\n            }}\n            type=\"button\"\n            aria-labelledby={`ix-blind-header-title-${this.blindId}`}\n            aria-controls={`ix-blind-content-section-${this.blindId}`}\n            aria-expanded={a11yBoolean(!this.collapsed)}\n            onClick={() => this.onHeaderClick()}\n          >\n            <slot name=\"custom-header\"></slot>\n          </button>\n\n          <div class={'blind-header-content'}>\n            <ix-icon\n              class=\"collapse-icon\"\n              name={'chevron-right-small'}\n              color={\n                this.variant === 'insight' || this.variant === 'outline'\n                  ? 'color-primary'\n                  : `color-${this.variant}--contrast`\n              }\n              ref={(ref) => (this.chevronRef = ref)}\n            ></ix-icon>\n            <div\n              class=\"blind-header-title\"\n              id={`ix-blind-header-title-${this.blindId}`}\n            >\n              {this.label !== undefined ? (\n                <Fragment>\n                  {this.icon && (\n                    <ix-icon\n                      class=\"blind-header-title-icon\"\n                      name={this.icon}\n                      color={\n                        this.variant === 'insight' || this.variant === 'outline'\n                          ? 'color-std-text'\n                          : `color-${this.variant}--contrast`\n                      }\n                    ></ix-icon>\n                  )}\n                  <div class={'blind-header-title-row'}>\n                    <div class=\"blind-header-title-col\">\n                      <ix-typography title={this.label} format=\"label-lg\" bold>\n                        <div\n                          class=\"blind-header-title-label\"\n                          title={this.label}\n                        >\n                          {this.label}\n                        </div>\n                      </ix-typography>\n                    </div>\n\n                    {this.sublabel && (\n                      <div class=\"blind-header-title-col\">\n                        <ix-typography title={this.sublabel}>\n                          <div class=\"blind-header-title-sublabel\">\n                            {this.sublabel}\n                          </div>\n                        </ix-typography>\n                      </div>\n                    )}\n                  </div>\n                  <div class=\"header-actions\">\n                    <slot name=\"header-actions\"></slot>\n                  </div>\n                </Fragment>\n              ) : null}\n            </div>\n          </div>\n        </div>\n        <section\n          id={`ix-blind-content-section-${this.blindId}`}\n          aria-labelledby={`ix-blind-header-title-${this.blindId}`}\n        >\n          <div\n            class={{\n              'blind-content': true,\n              hide: this.collapsed,\n            }}\n          >\n            {!this.collapsed ? <slot></slot> : null}\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n"],"mappings":"0IAAA,MAAMA,EAAW,i6UACjB,MAAAC,EAAeD,ECyBf,IAAIE,EAAuB,E,MAOdC,EAAK,MAuChB,WAAAC,CAAAC,G,2DAFQC,KAAAC,UAAYL,E,eAjCgC,M,8EAuBpB,S,CAcxB,aAAAM,GACNF,KAAKG,WAAaH,KAAKG,UACvBH,KAAKI,gBAAgBC,KAAKL,KAAKG,U,CAGjC,gBAAAG,GACEN,KAAKO,gBAAgBP,KAAKG,U,CAG5B,WAAIK,GACF,OAAOR,KAAKS,YAAYC,WAAWC,cAAc,iB,CAInD,SAAAC,CAAUC,GACRb,KAAKO,gBAAgBM,E,CAGf,eAAAN,CAAgBM,GACtB,GAAIA,EAAa,CACfb,KAAKc,oB,KACA,CACLd,KAAKe,mB,EAID,iBAAAA,GACNC,EAAM,CACJC,QAASjB,KAAKkB,WACdC,SAAU,IACVC,OAAQ,gBACRC,QAAS,KAEXL,EAAM,CACJC,QAASjB,KAAKQ,QACdW,SAAU,IACVC,OAAQ,gBACRE,QAAS,G,CAIL,kBAAAR,GACNE,EAAM,CACJC,QAASjB,KAAKkB,WACdC,SAAU,IACVC,OAAQ,gBACRC,QAAS,IAEXL,EAAM,CACJC,QAASjB,KAAKQ,QACdW,SAAU,IACVC,OAAQ,gBACRE,QAAS,G,CAIb,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,CAAC,SAAS3B,KAAK4B,WAAY,OAG7BJ,EAAA,OAAAE,IAAA,2CAAKC,MAAO,wBACVH,EAAA,UAAAE,IAAA,2CACEC,MAAO,CACL,eAAgB,KAChB,CAAC,SAAS3B,KAAK4B,WAAY,KAC3BC,OAAQ7B,KAAKG,WAEf2B,KAAK,SAAQ,kBACI,yBAAyB9B,KAAKC,UAAS,gBACzC,4BAA4BD,KAAKC,UAAS,gBAC1C8B,GAAa/B,KAAKG,WACjC6B,QAAS,IAAMhC,KAAKE,iBAEpBsB,EAAA,QAAAE,IAAA,2CAAMO,KAAK,mBAGbT,EAAA,OAAAE,IAAA,2CAAKC,MAAO,wBACVH,EAAA,WAAAE,IAAA,2CACEC,MAAM,gBACNM,KAAM,sBACNC,MACElC,KAAK4B,UAAY,WAAa5B,KAAK4B,UAAY,UAC3C,gBACA,SAAS5B,KAAK4B,oBAEpBO,IAAMA,GAASnC,KAAKkB,WAAaiB,IAEnCX,EAAA,OAAAE,IAAA,2CACEC,MAAM,qBACNS,GAAI,yBAAyBpC,KAAKC,WAEjCD,KAAKqC,QAAUC,UACdd,EAACe,EAAQ,KACNvC,KAAKwC,MACJhB,EAAA,WACEG,MAAM,0BACNM,KAAMjC,KAAKwC,KACXN,MACElC,KAAK4B,UAAY,WAAa5B,KAAK4B,UAAY,UAC3C,iBACA,SAAS5B,KAAK4B,sBAIxBJ,EAAA,OAAKG,MAAO,0BACVH,EAAA,OAAKG,MAAM,0BACTH,EAAA,iBAAeiB,MAAOzC,KAAKqC,MAAOK,OAAO,WAAWC,KAAI,MACtDnB,EAAA,OACEG,MAAM,2BACNc,MAAOzC,KAAKqC,OAEXrC,KAAKqC,SAKXrC,KAAK4C,UACJpB,EAAA,OAAKG,MAAM,0BACTH,EAAA,iBAAeiB,MAAOzC,KAAK4C,UACzBpB,EAAA,OAAKG,MAAM,+BACR3B,KAAK4C,aAMhBpB,EAAA,OAAKG,MAAM,kBACTH,EAAA,QAAMS,KAAK,qBAGb,QAIVT,EAAA,WAAAE,IAAA,2CACEU,GAAI,4BAA4BpC,KAAKC,UAAS,kBAC7B,yBAAyBD,KAAKC,WAE/CuB,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACL,gBAAiB,KACjBkB,KAAM7C,KAAKG,aAGXH,KAAKG,UAAYqB,EAAA,aAAgB,O"}

package/dist/siemens-ix/p-934ae9a0.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as o,H as i,g as s}from"./p-f86a894a.js";import{a as n}from"./p-71206084.js";const a=".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 r=a;const l=class{constructor(o){e(this,o);this.closeClick=t(this,"closeClick",7);this.name=undefined;this.icon=undefined;this.color=undefined;this.iconColor=undefined}componentWillLoad(){n({targets:this.hostElement,duration:l.slowTime,backdropFilter:[0,"blur(1rem)"],translateX:["-4rem",0],opacity:[0,1],easing:"easeOutSine",begin:()=>{this.hostElement.classList.remove("d-none")}})}closeOverlay(){n({targets:this.hostElement,duration:l.slowTime,backdropFilter:["blur(1rem)",0],translateX:[0,"-4rem"],opacity:[1,0],easing:"easeInSine",complete:()=>{this.closeClick.emit();this.hostElement.classList.add("d-none")}})}render(){var e,t,s;return o(i,{key:"b1b023f69478fa658fe6c6457b44bff7d7f66a03"},o("div",{key:"bf98a216738787c4261ec2ce5c209db8ba1d5ad5",class:"overlay-header"},o("div",{key:"c7d2ee22b69ead05685c2dcfb6a1fa44fe705ebc",class:{"color-indicator":true,"d-none":((e=this.iconColor)!==null&&e!==void 0?e:this.color)===undefined},style:{"background-color":((t=this.iconColor)!==null&&t!==void 0?t:this.color)?`var(--theme-${(s=this.iconColor)!==null&&s!==void 0?s:this.color})`:""}}),o("div",{key:"678acbdbc614fbcec69ff369022cddde35f333cd",class:"overlay-header-content"},o("ix-icon",{key:"dab435e3d35ec454cedda3655cd80eed04944fe7",size:"32",name:this.icon}),o("span",{key:"b11cf5b0492e88530932d511007a720fe9da9ad2",class:"overlay-header-title",title:this.name},this.name)),o("ix-icon-button",{key:"714196c353feb1d6cb0725bdaf53987bad98c3f5",class:"overlay-close",ghost:true,icon:"close",size:"24",onClick:()=>this.closeOverlay()})),o("slot",{key:"7a643aae77ee773125dec522a6410c2678cff878"}))}get hostElement(){return s(this)}};l.slowTime=500;l.style=r;export{l as ix_map_navigation_overlay};
+//# sourceMappingURL=p-934ae9a0.entry.js.map

package/dist/siemens-ix/{p-5f08da2c.entry.js.map → p-934ae9a0.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["mapNavigationOverlayCss","IxMapNavigationOverlayStyle0","MapNavigationOverlay","componentWillLoad","anime","targets","this","hostElement","duration","slowTime","backdropFilter","translateX","opacity","easing","begin","classList","remove","closeOverlay","complete","closeClick","emit","add","render","h","Host","key","class","_a","iconColor","color","undefined","style","_b","_c","size","name","icon","title","ghost","onClick"],"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"],"mappings":"oGAAA,MAAMA,EAA0B,khJAChC,MAAAC,EAAeD,E,MCwBFE,EAAoB,M,sJAiC/B,iBAAAC,GACEC,EAAM,CACJC,QAASC,KAAKC,YACdC,SAAUN,EAAqBO,SAC/BC,eAAgB,CAAC,EAAG,cACpBC,WAAY,CAAC,QAAS,GACtBC,QAAS,CAAC,EAAG,GACbC,OAAQ,cACRC,MAAO,KACLR,KAAKC,YAAYQ,UAAUC,OAAO,SAAS,G,CAKzC,YAAAC,GACNb,EAAM,CACJC,QAASC,KAAKC,YACdC,SAAUN,EAAqBO,SAC/BC,eAAgB,CAAC,aAAc,GAC/BC,WAAY,CAAC,EAAG,SAChBC,QAAS,CAAC,EAAG,GACbC,OAAQ,aACRK,SAAU,KACRZ,KAAKa,WAAWC,OAChBd,KAAKC,YAAYQ,UAAUM,IAAI,SAAS,G,CAK9C,MAAAC,G,UACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBACTH,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACL,kBAAmB,KACnB,WAAWC,EAAArB,KAAKsB,aAAS,MAAAD,SAAA,EAAAA,EAAIrB,KAAKuB,SAAWC,WAE/CC,MAAO,CACL,qBACEC,EAAA1B,KAAKsB,aAAS,MAAAI,SAAA,EAAAA,EAAI1B,KAAKuB,OACnB,gBAAeI,EAAA3B,KAAKsB,aAAS,MAAAK,SAAA,EAAAA,EAAI3B,KAAKuB,SACtC,MAGVN,EAAA,OAAAE,IAAA,2CAAKC,MAAM,0BACTH,EAAA,WAAAE,IAAA,2CAASS,KAAK,KAAKC,KAAM7B,KAAK8B,OAC9Bb,EAAA,QAAAE,IAAA,2CAAMC,MAAM,uBAAuBW,MAAO/B,KAAK6B,MAC5C7B,KAAK6B,OAGVZ,EAAA,kBAAAE,IAAA,2CACEC,MAAM,gBACNY,MAAK,KACLF,KAAM,QACNF,KAAK,KACLK,QAAS,IAAMjC,KAAKW,kBAIxBM,EAAA,QAAAE,IAAA,6C,oCA5FkBvB,EAAAO,SAAW,I"}
+{"version":3,"names":["mapNavigationOverlayCss","IxMapNavigationOverlayStyle0","MapNavigationOverlay","componentWillLoad","anime","targets","this","hostElement","duration","slowTime","backdropFilter","translateX","opacity","easing","begin","classList","remove","closeOverlay","complete","closeClick","emit","add","render","h","Host","key","class","_a","iconColor","color","undefined","style","_b","_c","size","name","icon","title","ghost","onClick"],"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"],"mappings":"oGAAA,MAAMA,EAA0B,8qJAChC,MAAAC,EAAeD,E,MCwBFE,EAAoB,M,sJAiC/B,iBAAAC,GACEC,EAAM,CACJC,QAASC,KAAKC,YACdC,SAAUN,EAAqBO,SAC/BC,eAAgB,CAAC,EAAG,cACpBC,WAAY,CAAC,QAAS,GACtBC,QAAS,CAAC,EAAG,GACbC,OAAQ,cACRC,MAAO,KACLR,KAAKC,YAAYQ,UAAUC,OAAO,SAAS,G,CAKzC,YAAAC,GACNb,EAAM,CACJC,QAASC,KAAKC,YACdC,SAAUN,EAAqBO,SAC/BC,eAAgB,CAAC,aAAc,GAC/BC,WAAY,CAAC,EAAG,SAChBC,QAAS,CAAC,EAAG,GACbC,OAAQ,aACRK,SAAU,KACRZ,KAAKa,WAAWC,OAChBd,KAAKC,YAAYQ,UAAUM,IAAI,SAAS,G,CAK9C,MAAAC,G,UACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBACTH,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACL,kBAAmB,KACnB,WAAWC,EAAArB,KAAKsB,aAAS,MAAAD,SAAA,EAAAA,EAAIrB,KAAKuB,SAAWC,WAE/CC,MAAO,CACL,qBACEC,EAAA1B,KAAKsB,aAAS,MAAAI,SAAA,EAAAA,EAAI1B,KAAKuB,OACnB,gBAAeI,EAAA3B,KAAKsB,aAAS,MAAAK,SAAA,EAAAA,EAAI3B,KAAKuB,SACtC,MAGVN,EAAA,OAAAE,IAAA,2CAAKC,MAAM,0BACTH,EAAA,WAAAE,IAAA,2CAASS,KAAK,KAAKC,KAAM7B,KAAK8B,OAC9Bb,EAAA,QAAAE,IAAA,2CAAMC,MAAM,uBAAuBW,MAAO/B,KAAK6B,MAC5C7B,KAAK6B,OAGVZ,EAAA,kBAAAE,IAAA,2CACEC,MAAM,gBACNY,MAAK,KACLF,KAAM,QACNF,KAAK,KACLK,QAAS,IAAMjC,KAAKW,kBAIxBM,EAAA,QAAAE,IAAA,6C,oCA5FkBvB,EAAAO,SAAW,I"}

package/dist/siemens-ix/{p-6e1fdc40.entry.js → p-9569e1a2.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as t,H as l}from"./p-26e9d40e.js";const a=":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 o=a;const n=class{constructor(t){e(this,t);this.icon=undefined;this.label=undefined;this.labelPosition="top";this.value=undefined}render(){return t(l,{key:"227f052645f548c6e1c19a925734bbd6066358e4",class:`keyValue keyValue--${this.labelPosition==="top"?"column":"row"}`},this.icon&&t("ix-icon",{name:this.icon,size:"24",class:"keyValue__icon"}),t("div",{key:"ffe1c46cf33671aeb701559b6da2ec5133099c94",class:"keyValue__content"},t("div",{key:"700543226c808d81d11c9d9bf69cf25c73825688",class:"content__label"},this.label),t("div",{key:"7e5b12f25fb6d9503947d6a7b200c7a3f962aee2",class:{content__value:true,"has-customValue":this.value===undefined}},this.value!==undefined?this.value:t("slot",{name:"custom-value"}))))}};n.style=o;export{n as ix_key_value};
-//# sourceMappingURL=p-6e1fdc40.entry.js.map
+import{r as e,h as t,H as a}from"./p-f86a894a.js";const l=":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 o=l;const n=class{constructor(t){e(this,t);this.icon=undefined;this.label=undefined;this.labelPosition="top";this.value=undefined}render(){return t(a,{key:"565b342bbcbd103c153df79ba4407c5be58e372a",class:`keyValue keyValue--${this.labelPosition==="top"?"column":"row"}`},this.icon&&t("ix-icon",{key:"884b129ce9171233352573ec412843f0d945bfaf",name:this.icon,size:"24",class:"keyValue__icon"}),t("div",{key:"76430d26876e5d3aca532df43e2b078a7a1f0e57",class:"keyValue__content"},t("div",{key:"79e43f1cf842c51619f83b802fe6358d64a0f16c",class:"content__label"},this.label),t("div",{key:"29a1b892cc777d7e16642e17fedd2b48ee307998",class:{content__value:true,"has-customValue":this.value===undefined}},this.value!==undefined?this.value:t("slot",{name:"custom-value"}))))}};n.style=o;export{n as ix_key_value};
+//# sourceMappingURL=p-9569e1a2.entry.js.map

package/dist/siemens-ix/{p-6e1fdc40.entry.js.map → p-9569e1a2.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["keyValueCss","IxKeyValueStyle0","KeyValue","render","h","Host","key","class","this","labelPosition","icon","name","size","label","content__value","value","undefined"],"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"],"mappings":"kDAAA,MAAMA,EAAc,6yCACpB,MAAAC,EAAeD,E,MCsBFE,EAAQ,M,qFAc4B,M,qBAO/C,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,sBACLC,KAAKC,gBAAkB,MAAQ,SAAW,SAG3CD,KAAKE,MACJN,EAAA,WAASO,KAAMH,KAAKE,KAAME,KAAK,KAAKL,MAAM,mBAE5CH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,qBACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBAAkBC,KAAKK,OAClCT,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACLO,eAAgB,KAChB,kBAAmBN,KAAKO,QAAUC,YAGnCR,KAAKO,QAAUC,UACdR,KAAU,MAEVJ,EAAA,QAAMO,KAAK,mB"}
+{"version":3,"names":["keyValueCss","IxKeyValueStyle0","KeyValue","render","h","Host","key","class","this","labelPosition","icon","name","size","label","content__value","value","undefined"],"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"],"mappings":"kDAAA,MAAMA,EAAc,6yCACpB,MAAAC,EAAeD,E,MCsBFE,EAAQ,M,qFAc4B,M,qBAO/C,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,sBACLC,KAAKC,gBAAkB,MAAQ,SAAW,SAG3CD,KAAKE,MACJN,EAAA,WAAAE,IAAA,2CAASK,KAAMH,KAAKE,KAAME,KAAK,KAAKL,MAAM,mBAE5CH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,qBACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBAAkBC,KAAKK,OAClCT,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACLO,eAAgB,KAChB,kBAAmBN,KAAKO,QAAUC,YAGnCR,KAAKO,QAAUC,UACdR,KAAU,MAEVJ,EAAA,QAAMO,KAAK,mB"}

package/dist/siemens-ix/p-97f475db.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as i,H as s}from"./p-f86a894a.js";import{a as o}from"./p-71206084.js";const r=":host{top:0;right:0;box-shadow:var(--theme-box-shadow-level-3);visibility:hidden;display:flex;position:absolute;flex-flow:column nowrap;justify-content:flex-start;align-items:center;max-height:100vh;min-height:1.5rem;background-color:var(--theme-color-1);border-radius:0.25rem;transition:all var(--theme-medium-time) ease-out}: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 .toggle{z-index:100;visibility:visible}:host .drawer-container.full-height{min-height:100%}:host .header{display:flex;position:relative;align-items:center;justify-content:flex-end;padding:0.5rem;width:100%;order:1}:host .header .header-content{flex-grow:1;margin-right:1rem}:host .content{position:relative;flex:1;flex-grow:1;order:2;height:100%;width:100%;overflow-y:auto}:host(.toggle){visibility:visible}";const a=r;const h=class{constructor(i){e(this,i);this.open=t(this,"open",7);this.drawerClose=t(this,"drawerClose",7);this.callback=this.clickedOutside.bind(this);this.show=false;this.closeOnClickOutside=true;this.fullHeight=false;this.minWidth=16;this.maxWidth=28;this.width=this.minWidth}onShowChanged(e){this.show=e!==undefined?e:!this.show;this.toggleDrawer(this.show)}async toggleDrawer(e){this.show=e!==undefined?e:!this.show;if(e){this.open.emit();this.slideInRight(this.divElement);setTimeout((()=>{window.addEventListener("mousedown",this.callback)}),300)}else{this.drawerClose.emit();this.slideOutRight(this.divElement);window.removeEventListener("mousedown",this.callback)}return Promise.resolve()}onCloseClicked(){this.show=false}clickedOutside(e){if(!this.closeOnClickOutside){return}const t=e.target;const i=t.closest("#div-container");const s=t.closest("#drawer-btn");if(e.target.type!=="button"&&i!==this.divElement&&t!==s){this.show=false}}slideOutRight(e){o({targets:e,duration:h.duration,translateX:[0,"16rem"],opacity:[1,0],easing:"easeInSine",complete:()=>{e.classList.add("d-none")}})}slideInRight(e){o({targets:e,duration:h.duration,translateX:["16rem",0],opacity:[0,1],easing:"easeOutSine",begin:()=>{e.classList.remove("d-none")}})}componentDidLoad(){this.onShowChanged(this.show)}render(){return i(s,{key:"be37a222f4696bcd58f5e82bca62d885192c2678",class:{"drawer-container":true,toggle:this.show,"full-height":this.fullHeight,"d-none":true},style:{width:this.width==="auto"?this.width:`${this.width}rem`,"min-width":`${this.minWidth}rem`,"max-width":`${this.maxWidth}rem`},ref:e=>this.divElement=e,"data-testid":"container",id:"div-container"},i("div",{key:"6d390a6aac80cc0685cea9d168e73a7bf89e00f0",class:"header"},i("div",{key:"d2f34f7ba0e6f180bbdd025d667552f6d88cc2fa",class:"header-content"},i("slot",{key:"492ed29a5a68c05576eba61a379462353c9bfcdb",name:"header"})),i("ix-icon-button",{key:"21d7593f713e459e29ad60ffcf23c9d6b8189a21",class:"close-button",icon:"close",size:"24",ghost:true,onClick:()=>this.onCloseClicked(),"data-testid":"close-button"})),i("div",{key:"388aed555e98aafa96710e3e66e736ebb5e571e3",class:"content"},i("slot",{key:"4d5a255950b41d2943f1978379fea38637807bc8"})))}static get watchers(){return{show:["onShowChanged"]}}};h.duration=300;h.style=a;export{h as ix_drawer};
+//# sourceMappingURL=p-97f475db.entry.js.map

package/dist/siemens-ix/{p-f23e0121.entry.js.map → p-97f475db.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["drawerCss","IxDrawerStyle0","Drawer","this","callback","clickedOutside","bind","minWidth","onShowChanged","newValue","show","undefined","toggleDrawer","open","emit","slideInRight","divElement","setTimeout","window","addEventListener","drawerClose","slideOutRight","removeEventListener","Promise","resolve","onCloseClicked","evt","closeOnClickOutside","target","closestElement","closest","btn","type","el","anime","targets","duration","translateX","opacity","easing","complete","classList","add","begin","remove","componentDidLoad","render","h","Host","key","class","toggle","fullHeight","style","width","maxWidth","ref","id","name","icon","size","ghost","onClick"],"sources":["src/components/drawer/drawer.scss?tag=ix-drawer&encapsulation=shadow","src/components/drawer/drawer.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/shadows';\n@import 'common-variables';\n\n:host {\n  @include ix-component;\n\n  top: 0;\n  right: 0;\n  @include box-shadow(3);\n\n  visibility: hidden;\n\n  display: flex;\n  position: absolute;\n  flex-flow: column nowrap;\n  justify-content: flex-start;\n  align-items: center;\n\n  max-height: 100vh;\n  min-height: $large-space;\n  background-color: var(--theme-color-1);\n  border-radius: $default-border-radius;\n\n  transition: all var(--theme-medium-time) ease-out;\n\n  .toggle {\n    z-index: 100;\n    visibility: visible;\n  }\n\n  .drawer-container.full-height {\n    min-height: 100%;\n  }\n\n  .header {\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: flex-end;\n    padding: 0.5rem;\n    width: 100%;\n    order: 1;\n\n    .header-content {\n      flex-grow: 1;\n      margin-right: $default-space;\n    }\n  }\n\n  .content {\n    position: relative;\n    flex: 1;\n    flex-grow: 1;\n    order: 2;\n    height: 100%;\n    width: 100%;\n    overflow-y: auto;\n  }\n}\n\n:host(.toggle) {\n  visibility: visible;\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  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\n\n@Component({\n  tag: 'ix-drawer',\n  styleUrl: 'drawer.scss',\n  shadow: true,\n})\nexport class Drawer {\n  /**\n   * Show or hide the drawer\n   */\n  @Prop({ mutable: true }) show = false;\n\n  /**\n   * Fired in case of an outside click during drawer showed state\n   */\n  @Prop() closeOnClickOutside = true;\n\n  /**\n   * Render the drawer with maximum height\n   */\n  @Prop() fullHeight = false;\n\n  /**\n   * Min width interpreted as REM\n   */\n  @Prop() minWidth = 16;\n\n  /**\n   * Max width interpreted as REM\n   */\n  @Prop() maxWidth = 28;\n\n  /**\n   * Width interpreted as REM if not set to 'auto'\n   */\n  @Prop() width: number | 'auto' = this.minWidth;\n\n  /**\n   * Fire event after drawer is open\n   */\n  @Event() open: EventEmitter;\n\n  /**\n   * Fire event after drawer is close\n   */\n  @Event() drawerClose: EventEmitter;\n\n  private static duration = 300;\n  private callback = this.clickedOutside.bind(this);\n  private divElement?: HTMLElement;\n\n  @Watch('show')\n  onShowChanged(newValue: boolean) {\n    this.show = newValue !== undefined ? newValue : !this.show;\n    this.toggleDrawer(this.show);\n  }\n\n  /**\n   * Toggle or define show state of drawer\n   * @param show Overwrite toggle state with boolean\n   */\n  @Method()\n  async toggleDrawer(show?: boolean): Promise<void> {\n    this.show = show !== undefined ? show : !this.show;\n\n    if (show) {\n      this.open.emit();\n      this.slideInRight(this.divElement);\n      setTimeout(() => {\n        window.addEventListener('mousedown', this.callback);\n      }, 300);\n    } else {\n      this.drawerClose.emit();\n      this.slideOutRight(this.divElement);\n      window.removeEventListener('mousedown', this.callback);\n    }\n\n    return Promise.resolve();\n  }\n\n  private onCloseClicked() {\n    this.show = false;\n  }\n\n  private clickedOutside(evt: any) {\n    if (!this.closeOnClickOutside) {\n      return;\n    }\n\n    const target = evt.target;\n    const closestElement = target.closest('#div-container');\n    const btn = target.closest('#drawer-btn');\n\n    if (\n      evt.target.type !== 'button' &&\n      closestElement !== this.divElement &&\n      target !== btn\n    ) {\n      this.show = false;\n    }\n  }\n\n  private slideOutRight(el: HTMLElement) {\n    anime({\n      targets: el,\n      duration: Drawer.duration,\n      translateX: [0, '16rem'],\n      opacity: [1, 0],\n      easing: 'easeInSine',\n      complete: () => {\n        el.classList.add('d-none');\n      },\n    });\n  }\n\n  private slideInRight(el: HTMLElement) {\n    anime({\n      targets: el,\n      duration: Drawer.duration,\n      translateX: ['16rem', 0],\n      opacity: [0, 1],\n      easing: 'easeOutSine',\n      begin: () => {\n        el.classList.remove('d-none');\n      },\n    });\n  }\n\n  componentDidLoad() {\n    this.onShowChanged(this.show);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'drawer-container': true,\n          toggle: this.show,\n          'full-height': this.fullHeight,\n          'd-none': true,\n        }}\n        style={{\n          width: this.width === 'auto' ? this.width : `${this.width}rem`,\n          'min-width': `${this.minWidth}rem`,\n          'max-width': `${this.maxWidth}rem`,\n        }}\n        ref={(el) => (this.divElement = el as HTMLElement)}\n        data-testid=\"container\"\n        id=\"div-container\"\n      >\n        <div class=\"header\">\n          <div class=\"header-content\">\n            <slot name=\"header\"></slot>\n          </div>\n          <ix-icon-button\n            class=\"close-button\"\n            icon={'close'}\n            size=\"24\"\n            ghost\n            onClick={() => this.onCloseClicked()}\n            data-testid=\"close-button\"\n          ></ix-icon-button>\n        </div>\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAY,k0CAClB,MAAAC,EAAeD,E,MCyBFE,EAAM,M,6FA0CTC,KAAAC,SAAWD,KAAKE,eAAeC,KAAKH,M,UAtCZ,M,yBAKF,K,gBAKT,M,cAKF,G,cAKA,G,WAKcA,KAAKI,Q,CAiBtC,aAAAC,CAAcC,GACZN,KAAKO,KAAOD,IAAaE,UAAYF,GAAYN,KAAKO,KACtDP,KAAKS,aAAaT,KAAKO,K,CAQzB,kBAAME,CAAaF,GACjBP,KAAKO,KAAOA,IAASC,UAAYD,GAAQP,KAAKO,KAE9C,GAAIA,EAAM,CACRP,KAAKU,KAAKC,OACVX,KAAKY,aAAaZ,KAAKa,YACvBC,YAAW,KACTC,OAAOC,iBAAiB,YAAahB,KAAKC,SAAS,GAClD,I,KACE,CACLD,KAAKiB,YAAYN,OACjBX,KAAKkB,cAAclB,KAAKa,YACxBE,OAAOI,oBAAoB,YAAanB,KAAKC,S,CAG/C,OAAOmB,QAAQC,S,CAGT,cAAAC,GACNtB,KAAKO,KAAO,K,CAGN,cAAAL,CAAeqB,GACrB,IAAKvB,KAAKwB,oBAAqB,CAC7B,M,CAGF,MAAMC,EAASF,EAAIE,OACnB,MAAMC,EAAiBD,EAAOE,QAAQ,kBACtC,MAAMC,EAAMH,EAAOE,QAAQ,eAE3B,GACEJ,EAAIE,OAAOI,OAAS,UACpBH,IAAmB1B,KAAKa,YACxBY,IAAWG,EACX,CACA5B,KAAKO,KAAO,K,EAIR,aAAAW,CAAcY,GACpBC,EAAM,CACJC,QAASF,EACTG,SAAUlC,EAAOkC,SACjBC,WAAY,CAAC,EAAG,SAChBC,QAAS,CAAC,EAAG,GACbC,OAAQ,aACRC,SAAU,KACRP,EAAGQ,UAAUC,IAAI,SAAS,G,CAKxB,YAAA3B,CAAakB,GACnBC,EAAM,CACJC,QAASF,EACTG,SAAUlC,EAAOkC,SACjBC,WAAY,CAAC,QAAS,GACtBC,QAAS,CAAC,EAAG,GACbC,OAAQ,cACRI,MAAO,KACLV,EAAGQ,UAAUG,OAAO,SAAS,G,CAKnC,gBAAAC,GACE1C,KAAKK,cAAcL,KAAKO,K,CAG1B,MAAAoC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,mBAAoB,KACpBC,OAAQhD,KAAKO,KACb,cAAeP,KAAKiD,WACpB,SAAU,MAEZC,MAAO,CACLC,MAAOnD,KAAKmD,QAAU,OAASnD,KAAKmD,MAAQ,GAAGnD,KAAKmD,WACpD,YAAa,GAAGnD,KAAKI,cACrB,YAAa,GAAGJ,KAAKoD,eAEvBC,IAAMvB,GAAQ9B,KAAKa,WAAaiB,EAAkB,cACtC,YACZwB,GAAG,iBAEHV,EAAA,OAAAE,IAAA,2CAAKC,MAAM,UACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBACTH,EAAA,QAAAE,IAAA,2CAAMS,KAAK,YAEbX,EAAA,kBAAAE,IAAA,2CACEC,MAAM,eACNS,KAAM,QACNC,KAAK,KACLC,MAAK,KACLC,QAAS,IAAM3D,KAAKsB,iBAAgB,cACxB,kBAGhBsB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,WACTH,EAAA,QAAAE,IAAA,8C,wDArHO/C,EAAAkC,SAAW,I"}
+{"version":3,"names":["drawerCss","IxDrawerStyle0","Drawer","this","callback","clickedOutside","bind","minWidth","onShowChanged","newValue","show","undefined","toggleDrawer","open","emit","slideInRight","divElement","setTimeout","window","addEventListener","drawerClose","slideOutRight","removeEventListener","Promise","resolve","onCloseClicked","evt","closeOnClickOutside","target","closestElement","closest","btn","type","el","anime","targets","duration","translateX","opacity","easing","complete","classList","add","begin","remove","componentDidLoad","render","h","Host","key","class","toggle","fullHeight","style","width","maxWidth","ref","id","name","icon","size","ghost","onClick"],"sources":["src/components/drawer/drawer.scss?tag=ix-drawer&encapsulation=shadow","src/components/drawer/drawer.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/shadows';\n@import 'common-variables';\n\n:host {\n  @include ix-component;\n\n  top: 0;\n  right: 0;\n  @include box-shadow(3);\n\n  visibility: hidden;\n\n  display: flex;\n  position: absolute;\n  flex-flow: column nowrap;\n  justify-content: flex-start;\n  align-items: center;\n\n  max-height: 100vh;\n  min-height: $large-space;\n  background-color: var(--theme-color-1);\n  border-radius: $default-border-radius;\n\n  transition: all var(--theme-medium-time) ease-out;\n\n  .toggle {\n    z-index: 100;\n    visibility: visible;\n  }\n\n  .drawer-container.full-height {\n    min-height: 100%;\n  }\n\n  .header {\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: flex-end;\n    padding: 0.5rem;\n    width: 100%;\n    order: 1;\n\n    .header-content {\n      flex-grow: 1;\n      margin-right: $default-space;\n    }\n  }\n\n  .content {\n    position: relative;\n    flex: 1;\n    flex-grow: 1;\n    order: 2;\n    height: 100%;\n    width: 100%;\n    overflow-y: auto;\n  }\n}\n\n:host(.toggle) {\n  visibility: visible;\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  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\n\n@Component({\n  tag: 'ix-drawer',\n  styleUrl: 'drawer.scss',\n  shadow: true,\n})\nexport class Drawer {\n  /**\n   * Show or hide the drawer\n   */\n  @Prop({ mutable: true }) show = false;\n\n  /**\n   * Fired in case of an outside click during drawer showed state\n   */\n  @Prop() closeOnClickOutside = true;\n\n  /**\n   * Render the drawer with maximum height\n   */\n  @Prop() fullHeight = false;\n\n  /**\n   * Min width interpreted as REM\n   */\n  @Prop() minWidth = 16;\n\n  /**\n   * Max width interpreted as REM\n   */\n  @Prop() maxWidth = 28;\n\n  /**\n   * Width interpreted as REM if not set to 'auto'\n   */\n  @Prop() width: number | 'auto' = this.minWidth;\n\n  /**\n   * Fire event after drawer is open\n   */\n  @Event() open: EventEmitter;\n\n  /**\n   * Fire event after drawer is close\n   */\n  @Event() drawerClose: EventEmitter;\n\n  private static duration = 300;\n  private callback = this.clickedOutside.bind(this);\n  private divElement?: HTMLElement;\n\n  @Watch('show')\n  onShowChanged(newValue: boolean) {\n    this.show = newValue !== undefined ? newValue : !this.show;\n    this.toggleDrawer(this.show);\n  }\n\n  /**\n   * Toggle or define show state of drawer\n   * @param show Overwrite toggle state with boolean\n   */\n  @Method()\n  async toggleDrawer(show?: boolean): Promise<void> {\n    this.show = show !== undefined ? show : !this.show;\n\n    if (show) {\n      this.open.emit();\n      this.slideInRight(this.divElement);\n      setTimeout(() => {\n        window.addEventListener('mousedown', this.callback);\n      }, 300);\n    } else {\n      this.drawerClose.emit();\n      this.slideOutRight(this.divElement);\n      window.removeEventListener('mousedown', this.callback);\n    }\n\n    return Promise.resolve();\n  }\n\n  private onCloseClicked() {\n    this.show = false;\n  }\n\n  private clickedOutside(evt: any) {\n    if (!this.closeOnClickOutside) {\n      return;\n    }\n\n    const target = evt.target;\n    const closestElement = target.closest('#div-container');\n    const btn = target.closest('#drawer-btn');\n\n    if (\n      evt.target.type !== 'button' &&\n      closestElement !== this.divElement &&\n      target !== btn\n    ) {\n      this.show = false;\n    }\n  }\n\n  private slideOutRight(el: HTMLElement) {\n    anime({\n      targets: el,\n      duration: Drawer.duration,\n      translateX: [0, '16rem'],\n      opacity: [1, 0],\n      easing: 'easeInSine',\n      complete: () => {\n        el.classList.add('d-none');\n      },\n    });\n  }\n\n  private slideInRight(el: HTMLElement) {\n    anime({\n      targets: el,\n      duration: Drawer.duration,\n      translateX: ['16rem', 0],\n      opacity: [0, 1],\n      easing: 'easeOutSine',\n      begin: () => {\n        el.classList.remove('d-none');\n      },\n    });\n  }\n\n  componentDidLoad() {\n    this.onShowChanged(this.show);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'drawer-container': true,\n          toggle: this.show,\n          'full-height': this.fullHeight,\n          'd-none': true,\n        }}\n        style={{\n          width: this.width === 'auto' ? this.width : `${this.width}rem`,\n          'min-width': `${this.minWidth}rem`,\n          'max-width': `${this.maxWidth}rem`,\n        }}\n        ref={(el) => (this.divElement = el as HTMLElement)}\n        data-testid=\"container\"\n        id=\"div-container\"\n      >\n        <div class=\"header\">\n          <div class=\"header-content\">\n            <slot name=\"header\"></slot>\n          </div>\n          <ix-icon-button\n            class=\"close-button\"\n            icon={'close'}\n            size=\"24\"\n            ghost\n            onClick={() => this.onCloseClicked()}\n            data-testid=\"close-button\"\n          ></ix-icon-button>\n        </div>\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAY,89CAClB,MAAAC,EAAeD,E,MCyBFE,EAAM,M,6FA0CTC,KAAAC,SAAWD,KAAKE,eAAeC,KAAKH,M,UAtCZ,M,yBAKF,K,gBAKT,M,cAKF,G,cAKA,G,WAKcA,KAAKI,Q,CAiBtC,aAAAC,CAAcC,GACZN,KAAKO,KAAOD,IAAaE,UAAYF,GAAYN,KAAKO,KACtDP,KAAKS,aAAaT,KAAKO,K,CAQzB,kBAAME,CAAaF,GACjBP,KAAKO,KAAOA,IAASC,UAAYD,GAAQP,KAAKO,KAE9C,GAAIA,EAAM,CACRP,KAAKU,KAAKC,OACVX,KAAKY,aAAaZ,KAAKa,YACvBC,YAAW,KACTC,OAAOC,iBAAiB,YAAahB,KAAKC,SAAS,GAClD,I,KACE,CACLD,KAAKiB,YAAYN,OACjBX,KAAKkB,cAAclB,KAAKa,YACxBE,OAAOI,oBAAoB,YAAanB,KAAKC,S,CAG/C,OAAOmB,QAAQC,S,CAGT,cAAAC,GACNtB,KAAKO,KAAO,K,CAGN,cAAAL,CAAeqB,GACrB,IAAKvB,KAAKwB,oBAAqB,CAC7B,M,CAGF,MAAMC,EAASF,EAAIE,OACnB,MAAMC,EAAiBD,EAAOE,QAAQ,kBACtC,MAAMC,EAAMH,EAAOE,QAAQ,eAE3B,GACEJ,EAAIE,OAAOI,OAAS,UACpBH,IAAmB1B,KAAKa,YACxBY,IAAWG,EACX,CACA5B,KAAKO,KAAO,K,EAIR,aAAAW,CAAcY,GACpBC,EAAM,CACJC,QAASF,EACTG,SAAUlC,EAAOkC,SACjBC,WAAY,CAAC,EAAG,SAChBC,QAAS,CAAC,EAAG,GACbC,OAAQ,aACRC,SAAU,KACRP,EAAGQ,UAAUC,IAAI,SAAS,G,CAKxB,YAAA3B,CAAakB,GACnBC,EAAM,CACJC,QAASF,EACTG,SAAUlC,EAAOkC,SACjBC,WAAY,CAAC,QAAS,GACtBC,QAAS,CAAC,EAAG,GACbC,OAAQ,cACRI,MAAO,KACLV,EAAGQ,UAAUG,OAAO,SAAS,G,CAKnC,gBAAAC,GACE1C,KAAKK,cAAcL,KAAKO,K,CAG1B,MAAAoC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,mBAAoB,KACpBC,OAAQhD,KAAKO,KACb,cAAeP,KAAKiD,WACpB,SAAU,MAEZC,MAAO,CACLC,MAAOnD,KAAKmD,QAAU,OAASnD,KAAKmD,MAAQ,GAAGnD,KAAKmD,WACpD,YAAa,GAAGnD,KAAKI,cACrB,YAAa,GAAGJ,KAAKoD,eAEvBC,IAAMvB,GAAQ9B,KAAKa,WAAaiB,EAAkB,cACtC,YACZwB,GAAG,iBAEHV,EAAA,OAAAE,IAAA,2CAAKC,MAAM,UACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBACTH,EAAA,QAAAE,IAAA,2CAAMS,KAAK,YAEbX,EAAA,kBAAAE,IAAA,2CACEC,MAAM,eACNS,KAAM,QACNC,KAAK,KACLC,MAAK,KACLC,QAAS,IAAM3D,KAAKsB,iBAAgB,cACxB,kBAGhBsB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,WACTH,EAAA,QAAAE,IAAA,8C,wDArHO/C,EAAAkC,SAAW,I"}

package/dist/siemens-ix/p-9840f086.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as o,H as r}from"./p-f86a894a.js";import{T as s}from"./p-c4749812.js";const e=":host{}: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}#toast-container>:not(:last-child){margin-block-end:1rem}.toast-container{display:block;position:fixed}.toast-container--top-right{right:1rem;top:2rem}.toast-container--bottom-right{right:1rem;bottom:2rem}";const a=e;const n=class{constructor(o){t(this,o);this.PREFIX_POSITION_CLASS="toast-container--";this.containerId="toast-container";this.containerClass="toast-container";this.position="bottom-right"}get hostContainer(){return new Promise((t=>{const o=setInterval((()=>{const r=document.getElementById(this.containerId);if(r){clearInterval(o);t(r)}}))}))}componentDidLoad(){if(!document.getElementById(this.containerId)){const t=document.createElement("div");t.id=this.containerId;t.classList.add(this.containerClass);t.classList.add(`${this.PREFIX_POSITION_CLASS}${this.position}`);document.body.appendChild(t)}}onPositionChange(t,o){const r=document.getElementById(this.containerId);r.classList.remove(`${this.PREFIX_POSITION_CLASS}${o}`);r.classList.add(`${this.PREFIX_POSITION_CLASS}${t}`)}async showToast(t){var o,r;const e=document.createElement("ix-toast");const a=new s;function n(t){e.remove();a.emit(t)}e.toastTitle=t.title;e.type=t.type;e.autoClose=(o=t.autoClose)!==null&&o!==void 0?o:true;e.autoCloseDelay=(r=t.autoCloseDelay)!==null&&r!==void 0?r:5e3;e.icon=t.icon;e.iconColor=t.iconColor;e.addEventListener("closeToast",(t=>{const{detail:o}=t;n(o)}));if(typeof t.message==="string"){e.innerText=t.message}else{e.appendChild(t.message)}(await this.hostContainer).appendChild(e);return{onClose:a,close:t=>{n(t)}}}render(){return o(r,{key:"7ed12499736b25361b54781a914704624361f413",class:{"toast-container--bottom-right":this.position==="bottom-right","toast-container--top-right":this.position==="top-right"}},o("slot",{key:"48a789d536cb007c2dc31d15615600cd0b51111d"}))}static get watchers(){return{position:["onPositionChange"]}}};n.style=a;export{n as ix_toast_container};
+//# sourceMappingURL=p-9840f086.entry.js.map

package/dist/siemens-ix/{p-84b3b311.entry.js.map → p-9840f086.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["toastContainerCss","IxToastContainerStyle0","ToastContainer","this","PREFIX_POSITION_CLASS","hostContainer","Promise","resolve","interval","setInterval","containerElement","document","getElementById","containerId","clearInterval","componentDidLoad","toastContainer","createElement","id","classList","add","containerClass","position","body","appendChild","onPositionChange","newPosition","oldPosition","remove","showToast","config","toast","onClose","TypedEvent","removeToast","result","emit","toastTitle","title","type","autoClose","_a","autoCloseDelay","_b","icon","iconColor","addEventListener","event","detail","message","innerText","close","render","h","Host","key","class"],"sources":["src/components/toast/styles/toast-container.scss?tag=ix-toast-container&encapsulation=shadow","src/components/toast/toast-container.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n}\n\n#toast-container {\n  > :not(:last-child) {\n    margin-block-end: $default-space;\n  }\n}\n\n.toast-container {\n  display: block;\n  position: fixed;\n}\n\n.toast-container--top-right {\n  right: 1rem;\n  top: 2rem;\n}\n\n.toast-container--bottom-right {\n  right: 1rem;\n  bottom: 2rem;\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, Method, Prop, Watch } from '@stencil/core';\nimport { TypedEvent } from '../utils/typed-event';\nimport { ToastConfig } from './toast-utils';\n\nexport type ShowToastResult = {\n  onClose: TypedEvent<any | undefined>;\n  close: (result?: any) => void;\n};\n\n@Component({\n  tag: 'ix-toast-container',\n  styleUrl: './styles/toast-container.scss',\n  shadow: true,\n})\nexport class ToastContainer {\n  /**\n   */\n  @Prop() containerId = 'toast-container';\n\n  /**\n   */\n  @Prop() containerClass = 'toast-container';\n\n  /**\n   */\n  @Prop() position: 'bottom-right' | 'top-right' = 'bottom-right';\n\n  private readonly PREFIX_POSITION_CLASS = 'toast-container--';\n\n  get hostContainer() {\n    return new Promise<HTMLElement>((resolve) => {\n      const interval = setInterval(() => {\n        const containerElement = document.getElementById(this.containerId);\n        if (containerElement) {\n          clearInterval(interval);\n          resolve(containerElement);\n        }\n      });\n    });\n  }\n\n  componentDidLoad() {\n    if (!document.getElementById(this.containerId)) {\n      const toastContainer = document.createElement('div');\n      toastContainer.id = this.containerId;\n      toastContainer.classList.add(this.containerClass);\n      toastContainer.classList.add(\n        `${this.PREFIX_POSITION_CLASS}${this.position}`\n      );\n      document.body.appendChild(toastContainer);\n    }\n  }\n\n  @Watch('position')\n  onPositionChange(newPosition: string, oldPosition: string) {\n    const toastContainer = document.getElementById(this.containerId);\n    toastContainer.classList.remove(\n      `${this.PREFIX_POSITION_CLASS}${oldPosition}`\n    );\n    toastContainer.classList.add(`${this.PREFIX_POSITION_CLASS}${newPosition}`);\n  }\n\n  /**\n   * Display a toast message\n   * @param config\n   */\n  @Method()\n  async showToast(config: ToastConfig): Promise<ShowToastResult> {\n    const toast = document.createElement('ix-toast');\n    const onClose = new TypedEvent<any | undefined>();\n\n    function removeToast(result?: any) {\n      toast.remove();\n      onClose.emit(result);\n    }\n\n    toast.toastTitle = config.title;\n    toast.type = config.type;\n    toast.autoClose = config.autoClose ?? true;\n    toast.autoCloseDelay = config.autoCloseDelay ?? 5000;\n    toast.icon = config.icon;\n    toast.iconColor = config.iconColor;\n    toast.addEventListener(\n      'closeToast',\n      (event: CustomEvent<any | undefined>) => {\n        const { detail } = event;\n        removeToast(detail);\n      }\n    );\n\n    if (typeof config.message === 'string') {\n      toast.innerText = config.message;\n    } else {\n      toast.appendChild(config.message);\n    }\n\n    (await this.hostContainer).appendChild(toast);\n\n    return {\n      onClose,\n      close: (result?: any) => {\n        removeToast(result);\n      },\n    };\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'toast-container--bottom-right': this.position === 'bottom-right',\n          'toast-container--top-right': this.position === 'top-right',\n        }}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sFAAA,MAAMA,EAAoB,mzBAC1B,MAAAC,EAAeD,E,MCsBFE,EAAc,M,yBAaRC,KAAAC,sBAAwB,oB,iBAVnB,kB,oBAIG,kB,cAIwB,c,CAIjD,iBAAIC,GACF,OAAO,IAAIC,SAAsBC,IAC/B,MAAMC,EAAWC,aAAY,KAC3B,MAAMC,EAAmBC,SAASC,eAAeT,KAAKU,aACtD,GAAIH,EAAkB,CACpBI,cAAcN,GACdD,EAAQG,E,IAEV,G,CAIN,gBAAAK,GACE,IAAKJ,SAASC,eAAeT,KAAKU,aAAc,CAC9C,MAAMG,EAAiBL,SAASM,cAAc,OAC9CD,EAAeE,GAAKf,KAAKU,YACzBG,EAAeG,UAAUC,IAAIjB,KAAKkB,gBAClCL,EAAeG,UAAUC,IACvB,GAAGjB,KAAKC,wBAAwBD,KAAKmB,YAEvCX,SAASY,KAAKC,YAAYR,E,EAK9B,gBAAAS,CAAiBC,EAAqBC,GACpC,MAAMX,EAAiBL,SAASC,eAAeT,KAAKU,aACpDG,EAAeG,UAAUS,OACvB,GAAGzB,KAAKC,wBAAwBuB,KAElCX,EAAeG,UAAUC,IAAI,GAAGjB,KAAKC,wBAAwBsB,I,CAQ/D,eAAMG,CAAUC,G,QACd,MAAMC,EAAQpB,SAASM,cAAc,YACrC,MAAMe,EAAU,IAAIC,EAEpB,SAASC,EAAYC,GACnBJ,EAAMH,SACNI,EAAQI,KAAKD,E,CAGfJ,EAAMM,WAAaP,EAAOQ,MAC1BP,EAAMQ,KAAOT,EAAOS,KACpBR,EAAMS,WAAYC,EAAAX,EAAOU,aAAS,MAAAC,SAAA,EAAAA,EAAI,KACtCV,EAAMW,gBAAiBC,EAAAb,EAAOY,kBAAc,MAAAC,SAAA,EAAAA,EAAI,IAChDZ,EAAMa,KAAOd,EAAOc,KACpBb,EAAMc,UAAYf,EAAOe,UACzBd,EAAMe,iBACJ,cACCC,IACC,MAAMC,OAAEA,GAAWD,EACnBb,EAAYc,EAAO,IAIvB,UAAWlB,EAAOmB,UAAY,SAAU,CACtClB,EAAMmB,UAAYpB,EAAOmB,O,KACpB,CACLlB,EAAMP,YAAYM,EAAOmB,Q,QAGpB9C,KAAKE,eAAemB,YAAYO,GAEvC,MAAO,CACLC,UACAmB,MAAQhB,IACND,EAAYC,EAAO,E,CAKzB,MAAAiB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,gCAAiCrD,KAAKmB,WAAa,eACnD,6BAA8BnB,KAAKmB,WAAa,cAGlD+B,EAAA,QAAAE,IAAA,6C"}
+{"version":3,"names":["toastContainerCss","IxToastContainerStyle0","ToastContainer","this","PREFIX_POSITION_CLASS","hostContainer","Promise","resolve","interval","setInterval","containerElement","document","getElementById","containerId","clearInterval","componentDidLoad","toastContainer","createElement","id","classList","add","containerClass","position","body","appendChild","onPositionChange","newPosition","oldPosition","remove","showToast","config","toast","onClose","TypedEvent","removeToast","result","emit","toastTitle","title","type","autoClose","_a","autoCloseDelay","_b","icon","iconColor","addEventListener","event","detail","message","innerText","close","render","h","Host","key","class"],"sources":["src/components/toast/styles/toast-container.scss?tag=ix-toast-container&encapsulation=shadow","src/components/toast/toast-container.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n}\n\n#toast-container {\n  > :not(:last-child) {\n    margin-block-end: $default-space;\n  }\n}\n\n.toast-container {\n  display: block;\n  position: fixed;\n}\n\n.toast-container--top-right {\n  right: 1rem;\n  top: 2rem;\n}\n\n.toast-container--bottom-right {\n  right: 1rem;\n  bottom: 2rem;\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, Method, Prop, Watch } from '@stencil/core';\nimport { TypedEvent } from '../utils/typed-event';\nimport { ToastConfig } from './toast-utils';\n\nexport type ShowToastResult = {\n  onClose: TypedEvent<any | undefined>;\n  close: (result?: any) => void;\n};\n\n@Component({\n  tag: 'ix-toast-container',\n  styleUrl: './styles/toast-container.scss',\n  shadow: true,\n})\nexport class ToastContainer {\n  /**\n   */\n  @Prop() containerId = 'toast-container';\n\n  /**\n   */\n  @Prop() containerClass = 'toast-container';\n\n  /**\n   */\n  @Prop() position: 'bottom-right' | 'top-right' = 'bottom-right';\n\n  private readonly PREFIX_POSITION_CLASS = 'toast-container--';\n\n  get hostContainer() {\n    return new Promise<HTMLElement>((resolve) => {\n      const interval = setInterval(() => {\n        const containerElement = document.getElementById(this.containerId);\n        if (containerElement) {\n          clearInterval(interval);\n          resolve(containerElement);\n        }\n      });\n    });\n  }\n\n  componentDidLoad() {\n    if (!document.getElementById(this.containerId)) {\n      const toastContainer = document.createElement('div');\n      toastContainer.id = this.containerId;\n      toastContainer.classList.add(this.containerClass);\n      toastContainer.classList.add(\n        `${this.PREFIX_POSITION_CLASS}${this.position}`\n      );\n      document.body.appendChild(toastContainer);\n    }\n  }\n\n  @Watch('position')\n  onPositionChange(newPosition: string, oldPosition: string) {\n    const toastContainer = document.getElementById(this.containerId);\n    toastContainer.classList.remove(\n      `${this.PREFIX_POSITION_CLASS}${oldPosition}`\n    );\n    toastContainer.classList.add(`${this.PREFIX_POSITION_CLASS}${newPosition}`);\n  }\n\n  /**\n   * Display a toast message\n   * @param config\n   */\n  @Method()\n  async showToast(config: ToastConfig): Promise<ShowToastResult> {\n    const toast = document.createElement('ix-toast');\n    const onClose = new TypedEvent<any | undefined>();\n\n    function removeToast(result?: any) {\n      toast.remove();\n      onClose.emit(result);\n    }\n\n    toast.toastTitle = config.title;\n    toast.type = config.type;\n    toast.autoClose = config.autoClose ?? true;\n    toast.autoCloseDelay = config.autoCloseDelay ?? 5000;\n    toast.icon = config.icon;\n    toast.iconColor = config.iconColor;\n    toast.addEventListener(\n      'closeToast',\n      (event: CustomEvent<any | undefined>) => {\n        const { detail } = event;\n        removeToast(detail);\n      }\n    );\n\n    if (typeof config.message === 'string') {\n      toast.innerText = config.message;\n    } else {\n      toast.appendChild(config.message);\n    }\n\n    (await this.hostContainer).appendChild(toast);\n\n    return {\n      onClose,\n      close: (result?: any) => {\n        removeToast(result);\n      },\n    };\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'toast-container--bottom-right': this.position === 'bottom-right',\n          'toast-container--top-right': this.position === 'top-right',\n        }}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sFAAA,MAAMA,EAAoB,+8BAC1B,MAAAC,EAAeD,E,MCsBFE,EAAc,M,yBAaRC,KAAAC,sBAAwB,oB,iBAVnB,kB,oBAIG,kB,cAIwB,c,CAIjD,iBAAIC,GACF,OAAO,IAAIC,SAAsBC,IAC/B,MAAMC,EAAWC,aAAY,KAC3B,MAAMC,EAAmBC,SAASC,eAAeT,KAAKU,aACtD,GAAIH,EAAkB,CACpBI,cAAcN,GACdD,EAAQG,E,IAEV,G,CAIN,gBAAAK,GACE,IAAKJ,SAASC,eAAeT,KAAKU,aAAc,CAC9C,MAAMG,EAAiBL,SAASM,cAAc,OAC9CD,EAAeE,GAAKf,KAAKU,YACzBG,EAAeG,UAAUC,IAAIjB,KAAKkB,gBAClCL,EAAeG,UAAUC,IACvB,GAAGjB,KAAKC,wBAAwBD,KAAKmB,YAEvCX,SAASY,KAAKC,YAAYR,E,EAK9B,gBAAAS,CAAiBC,EAAqBC,GACpC,MAAMX,EAAiBL,SAASC,eAAeT,KAAKU,aACpDG,EAAeG,UAAUS,OACvB,GAAGzB,KAAKC,wBAAwBuB,KAElCX,EAAeG,UAAUC,IAAI,GAAGjB,KAAKC,wBAAwBsB,I,CAQ/D,eAAMG,CAAUC,G,QACd,MAAMC,EAAQpB,SAASM,cAAc,YACrC,MAAMe,EAAU,IAAIC,EAEpB,SAASC,EAAYC,GACnBJ,EAAMH,SACNI,EAAQI,KAAKD,E,CAGfJ,EAAMM,WAAaP,EAAOQ,MAC1BP,EAAMQ,KAAOT,EAAOS,KACpBR,EAAMS,WAAYC,EAAAX,EAAOU,aAAS,MAAAC,SAAA,EAAAA,EAAI,KACtCV,EAAMW,gBAAiBC,EAAAb,EAAOY,kBAAc,MAAAC,SAAA,EAAAA,EAAI,IAChDZ,EAAMa,KAAOd,EAAOc,KACpBb,EAAMc,UAAYf,EAAOe,UACzBd,EAAMe,iBACJ,cACCC,IACC,MAAMC,OAAEA,GAAWD,EACnBb,EAAYc,EAAO,IAIvB,UAAWlB,EAAOmB,UAAY,SAAU,CACtClB,EAAMmB,UAAYpB,EAAOmB,O,KACpB,CACLlB,EAAMP,YAAYM,EAAOmB,Q,QAGpB9C,KAAKE,eAAemB,YAAYO,GAEvC,MAAO,CACLC,UACAmB,MAAQhB,IACND,EAAYC,EAAO,E,CAKzB,MAAAiB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,gCAAiCrD,KAAKmB,WAAa,eACnD,6BAA8BnB,KAAKmB,WAAa,cAGlD+B,EAAA,QAAAE,IAAA,6C"}

package/dist/siemens-ix/p-9cc0d11b.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as s,H as e,g as r}from"./p-f86a894a.js";import{g as i}from"./p-712e0ee0.js";const o=":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 a=o;const h=class{constructor(s){t(this,s);this.disabled=false;this.inputPaddingLeft=0;this.inputPaddingRight=0}get inputElement(){return this.hostElement.querySelector("input")}componentWillLoad(){var t;const{valid:s}=this.inputElement.validity;this.inputElement.addEventListener("valid",(()=>{this.onValidInput()}));this.inputElement.addEventListener("invalid",(()=>{this.onInvalidInput()}));this.inputElement.addEventListener("input",(()=>{this.startSlotChanged()}));(t=this.inputElement.form)===null||t===void 0?void 0:t.addEventListener("submit",(()=>{this.startSlotChanged()}));s?this.onValidInput():this.onInvalidInput();this.observer=new MutationObserver((()=>{this.slotChanged();this.startSlotChanged();this.endSlotChanged()}));this.observer.observe(this.hostElement,{subtree:true,childList:true,attributes:true,characterData:true})}componentDidRender(){this.prepareInputElement()}onValidInput(){this.startSlotChanged()}onInvalidInput(){this.startSlotChanged()}prepareInputElement(){if(this.inputElement){this.inputElement.style.width="100%";if(this.inputPaddingRight!==0){this.inputElement.style.paddingRight=this.inputPaddingRight+"px"}else{this.inputElement.style.paddingRight="0.5rem"}if(this.inputPaddingLeft!==0){this.inputElement.style.paddingLeft=this.inputPaddingLeft+"px"}else{this.inputElement.style.paddingLeft="0.5rem"}}else{console.warn('You used the ix-input-group without an input tag, e.g. <input class="form-control" />')}}slotChanged(){var t;this.disabled=(t=this.inputElement)===null||t===void 0?void 0:t.disabled}startSlotChanged(){const t=this.hostElement.shadowRoot.querySelector('slot[name="input-start"]');setTimeout((()=>{var s,e;const r=this.getChildrenWidth(t);if(r!==0){this.inputPaddingLeft=11+r}else{this.inputPaddingLeft=0}if(!this.inputElement){return}const i=!this.inputElement.validity.valid||this.inputElement.classList.contains("is-invalid");const o=((s=this.inputElement.form)===null||s===void 0?void 0:s.classList.contains("was-validated"))||((e=this.inputElement.form)===null||e===void 0?void 0:e.noValidate)===false;if(o&&i){const t=this.inputPaddingLeft!==0?this.inputPaddingLeft:7;this.inputElement.style.backgroundPosition=`left ${t}px center`;this.inputPaddingLeft+=26}}))}endSlotChanged(){const t=this.hostElement.shadowRoot.querySelector('slot[name="input-end"]');setTimeout((()=>{this.inputPaddingRight=15+this.getChildrenWidth(t)}))}getChildrenWidth(t){if(!t){return 0}const s=i(t);if(s.length===0){return 0}let e=0;s.forEach((t=>{e+=t.getBoundingClientRect().width}));return e}render(){return s(e,{key:"a632148f49a5084f9734bb7df674bb34f1e29726",class:{disabled:this.disabled}},s("div",{key:"9c6ea56818e6226a88bbd555a9f975804246c549",class:"group group-start"},s("slot",{key:"302da4742e1122fff59d5e2d13d062f3abeaea19",name:"input-start"})),s("slot",{key:"d0125d9c48d61188e83866b9cd8d628a3c0bfd8f"}),s("div",{key:"fbf242a8b2fb3febc195066bc3c2064506ff7788",class:"group group-end"},s("slot",{key:"dedfedc593c7c6425a32cd6f9448c7147495eb55",name:"input-end"})))}get hostElement(){return r(this)}};h.style=a;export{h as ix_input_group};
+//# sourceMappingURL=p-9cc0d11b.entry.js.map

package/dist/siemens-ix/{p-ed2ec72f.entry.js.map → p-9cc0d11b.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["inputGroupCss","IxInputGroupStyle0","InputGroup","inputElement","this","hostElement","querySelector","componentWillLoad","valid","validity","addEventListener","onValidInput","onInvalidInput","startSlotChanged","_a","form","observer","MutationObserver","slotChanged","endSlotChanged","observe","subtree","childList","attributes","characterData","componentDidRender","prepareInputElement","style","width","inputPaddingRight","paddingRight","inputPaddingLeft","paddingLeft","console","warn","disabled","slot","shadowRoot","setTimeout","startPadding","getChildrenWidth","isInputInvalid","classList","contains","formWasValidated","_b","noValidate","left","backgroundPosition","slotElement","endElements","getSlottedElements","length","forEach","element","getBoundingClientRect","render","h","Host","key","class","name"],"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"],"mappings":"6FAAA,MAAMA,EAAgB,ymCACtB,MAAAC,EAAeD,E,MCgBFE,EAAU,M,uCAGD,M,sBAEQ,E,uBACC,C,CAE7B,gBAAYC,GACV,OAAOC,KAAKC,YAAYC,cAAc,Q,CAKxC,iBAAAC,G,MACE,MAAMC,MAAEA,GAAUJ,KAAKD,aAAaM,SACpCL,KAAKD,aAAaO,iBAAiB,SAAS,KAC1CN,KAAKO,cAAc,IAErBP,KAAKD,aAAaO,iBAAiB,WAAW,KAC5CN,KAAKQ,gBAAgB,IAEvBR,KAAKD,aAAaO,iBAAiB,SAAS,KAC1CN,KAAKS,kBAAkB,KAGzBC,EAAAV,KAAKD,aAAaY,QAAI,MAAAD,SAAA,SAAAA,EAAEJ,iBAAiB,UAAU,KACjDN,KAAKS,kBAAkB,IAGzBL,EAAQJ,KAAKO,eAAiBP,KAAKQ,iBAEnCR,KAAKY,SAAW,IAAIC,kBAAiB,KACnCb,KAAKc,cACLd,KAAKS,mBACLT,KAAKe,gBAAgB,IAGvBf,KAAKY,SAASI,QAAQhB,KAAKC,YAAa,CACtCgB,QAAS,KACTC,UAAW,KACXC,WAAY,KACZC,cAAe,M,CAInB,kBAAAC,GACErB,KAAKsB,qB,CAGC,YAAAf,GACNP,KAAKS,kB,CAGC,cAAAD,GACNR,KAAKS,kB,CAGC,mBAAAa,GACN,GAAItB,KAAKD,aAAc,CACrBC,KAAKD,aAAawB,MAAMC,MAAQ,OAEhC,GAAIxB,KAAKyB,oBAAsB,EAAG,CAChCzB,KAAKD,aAAawB,MAAMG,aAAe1B,KAAKyB,kBAAoB,I,KAC3D,CACLzB,KAAKD,aAAawB,MAAMG,aAAe,Q,CAGzC,GAAI1B,KAAK2B,mBAAqB,EAAG,CAC/B3B,KAAKD,aAAawB,MAAMK,YAAc5B,KAAK2B,iBAAmB,I,KACzD,CACL3B,KAAKD,aAAawB,MAAMK,YAAc,Q,MAEnC,CACLC,QAAQC,KACN,wF,EAKE,WAAAhB,G,MACNd,KAAK+B,UAAWrB,EAAAV,KAAKD,gBAAY,MAAAW,SAAA,SAAAA,EAAEqB,Q,CAG7B,gBAAAtB,GACN,MAAMuB,EAAOhC,KAAKC,YAAYgC,WAAW/B,cACvC,4BAGFgC,YAAW,K,QACT,MAAMC,EAAenC,KAAKoC,iBAAiBJ,GAE3C,GAAIG,IAAiB,EAAG,CACtBnC,KAAK2B,iBAAmB,GAAKQ,C,KACxB,CACLnC,KAAK2B,iBAAmB,C,CAG1B,IAAK3B,KAAKD,aAAc,CACtB,M,CAGF,MAAMsC,GACHrC,KAAKD,aAAaM,SAASD,OAC5BJ,KAAKD,aAAauC,UAAUC,SAAS,cAEvC,MAAMC,IACJ9B,EAAAV,KAAKD,aAAaY,QAAI,MAAAD,SAAA,SAAAA,EAAE4B,UAAUC,SAAS,qBAC3CE,EAAAzC,KAAKD,aAAaY,QAAI,MAAA8B,SAAA,SAAAA,EAAEC,cAAe,MAEzC,GAAIF,GAAoBH,EAAgB,CACtC,MAAMM,EAAO3C,KAAK2B,mBAAqB,EAAI3B,KAAK2B,iBAAmB,EACnE3B,KAAKD,aAAawB,MAAMqB,mBAAqB,QAAQD,aACrD3C,KAAK2B,kBAAoB,E,KAKvB,cAAAZ,GACN,MAAMiB,EAAOhC,KAAKC,YAAYgC,WAAW/B,cACvC,0BAGFgC,YAAW,KACTlC,KAAKyB,kBAAoB,GAAKzB,KAAKoC,iBAAiBJ,EAAK,G,CAIrD,gBAAAI,CAAiBS,GACvB,IAAKA,EAAa,CAChB,OAAO,C,CAGT,MAAMC,EAAcC,EAAgCF,GACpD,GAAIC,EAAYE,SAAW,EAAG,CAC5B,OAAO,C,CAGT,IAAIxB,EAAQ,EAEZsB,EAAYG,SAASC,IACnB1B,GAAS0B,EAAQC,wBAAwB3B,KAAK,IAGhD,OAAOA,C,CAGT,MAAA4B,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,CAAEzB,SAAU/B,KAAK+B,WAC5BsB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,qBACTH,EAAA,QAAAE,IAAA,2CAAME,KAAK,iBAEbJ,EAAA,QAAAE,IAAA,6CACAF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,mBACTH,EAAA,QAAAE,IAAA,2CAAME,KAAK,e"}
+{"version":3,"names":["inputGroupCss","IxInputGroupStyle0","InputGroup","inputElement","this","hostElement","querySelector","componentWillLoad","valid","validity","addEventListener","onValidInput","onInvalidInput","startSlotChanged","_a","form","observer","MutationObserver","slotChanged","endSlotChanged","observe","subtree","childList","attributes","characterData","componentDidRender","prepareInputElement","style","width","inputPaddingRight","paddingRight","inputPaddingLeft","paddingLeft","console","warn","disabled","slot","shadowRoot","setTimeout","startPadding","getChildrenWidth","isInputInvalid","classList","contains","formWasValidated","_b","noValidate","left","backgroundPosition","slotElement","endElements","getSlottedElements","length","forEach","element","getBoundingClientRect","render","h","Host","key","class","name"],"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"],"mappings":"6FAAA,MAAMA,EAAgB,qwCACtB,MAAAC,EAAeD,E,MCgBFE,EAAU,M,uCAGD,M,sBAEQ,E,uBACC,C,CAE7B,gBAAYC,GACV,OAAOC,KAAKC,YAAYC,cAAc,Q,CAKxC,iBAAAC,G,MACE,MAAMC,MAAEA,GAAUJ,KAAKD,aAAaM,SACpCL,KAAKD,aAAaO,iBAAiB,SAAS,KAC1CN,KAAKO,cAAc,IAErBP,KAAKD,aAAaO,iBAAiB,WAAW,KAC5CN,KAAKQ,gBAAgB,IAEvBR,KAAKD,aAAaO,iBAAiB,SAAS,KAC1CN,KAAKS,kBAAkB,KAGzBC,EAAAV,KAAKD,aAAaY,QAAI,MAAAD,SAAA,SAAAA,EAAEJ,iBAAiB,UAAU,KACjDN,KAAKS,kBAAkB,IAGzBL,EAAQJ,KAAKO,eAAiBP,KAAKQ,iBAEnCR,KAAKY,SAAW,IAAIC,kBAAiB,KACnCb,KAAKc,cACLd,KAAKS,mBACLT,KAAKe,gBAAgB,IAGvBf,KAAKY,SAASI,QAAQhB,KAAKC,YAAa,CACtCgB,QAAS,KACTC,UAAW,KACXC,WAAY,KACZC,cAAe,M,CAInB,kBAAAC,GACErB,KAAKsB,qB,CAGC,YAAAf,GACNP,KAAKS,kB,CAGC,cAAAD,GACNR,KAAKS,kB,CAGC,mBAAAa,GACN,GAAItB,KAAKD,aAAc,CACrBC,KAAKD,aAAawB,MAAMC,MAAQ,OAEhC,GAAIxB,KAAKyB,oBAAsB,EAAG,CAChCzB,KAAKD,aAAawB,MAAMG,aAAe1B,KAAKyB,kBAAoB,I,KAC3D,CACLzB,KAAKD,aAAawB,MAAMG,aAAe,Q,CAGzC,GAAI1B,KAAK2B,mBAAqB,EAAG,CAC/B3B,KAAKD,aAAawB,MAAMK,YAAc5B,KAAK2B,iBAAmB,I,KACzD,CACL3B,KAAKD,aAAawB,MAAMK,YAAc,Q,MAEnC,CACLC,QAAQC,KACN,wF,EAKE,WAAAhB,G,MACNd,KAAK+B,UAAWrB,EAAAV,KAAKD,gBAAY,MAAAW,SAAA,SAAAA,EAAEqB,Q,CAG7B,gBAAAtB,GACN,MAAMuB,EAAOhC,KAAKC,YAAYgC,WAAW/B,cACvC,4BAGFgC,YAAW,K,QACT,MAAMC,EAAenC,KAAKoC,iBAAiBJ,GAE3C,GAAIG,IAAiB,EAAG,CACtBnC,KAAK2B,iBAAmB,GAAKQ,C,KACxB,CACLnC,KAAK2B,iBAAmB,C,CAG1B,IAAK3B,KAAKD,aAAc,CACtB,M,CAGF,MAAMsC,GACHrC,KAAKD,aAAaM,SAASD,OAC5BJ,KAAKD,aAAauC,UAAUC,SAAS,cAEvC,MAAMC,IACJ9B,EAAAV,KAAKD,aAAaY,QAAI,MAAAD,SAAA,SAAAA,EAAE4B,UAAUC,SAAS,qBAC3CE,EAAAzC,KAAKD,aAAaY,QAAI,MAAA8B,SAAA,SAAAA,EAAEC,cAAe,MAEzC,GAAIF,GAAoBH,EAAgB,CACtC,MAAMM,EAAO3C,KAAK2B,mBAAqB,EAAI3B,KAAK2B,iBAAmB,EACnE3B,KAAKD,aAAawB,MAAMqB,mBAAqB,QAAQD,aACrD3C,KAAK2B,kBAAoB,E,KAKvB,cAAAZ,GACN,MAAMiB,EAAOhC,KAAKC,YAAYgC,WAAW/B,cACvC,0BAGFgC,YAAW,KACTlC,KAAKyB,kBAAoB,GAAKzB,KAAKoC,iBAAiBJ,EAAK,G,CAIrD,gBAAAI,CAAiBS,GACvB,IAAKA,EAAa,CAChB,OAAO,C,CAGT,MAAMC,EAAcC,EAAgCF,GACpD,GAAIC,EAAYE,SAAW,EAAG,CAC5B,OAAO,C,CAGT,IAAIxB,EAAQ,EAEZsB,EAAYG,SAASC,IACnB1B,GAAS0B,EAAQC,wBAAwB3B,KAAK,IAGhD,OAAOA,C,CAGT,MAAA4B,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,CAAEzB,SAAU/B,KAAK+B,WAC5BsB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,qBACTH,EAAA,QAAAE,IAAA,2CAAME,KAAK,iBAEbJ,EAAA,QAAAE,IAAA,6CACAF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,mBACTH,EAAA,QAAAE,IAAA,2CAAME,KAAK,e"}

package/dist/siemens-ix/{p-493cb880.entry.js → p-9ec92185.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as a,h as e,H as n,g as i}from"./p-26e9d40e.js";import{a as o}from"./p-71206084.js";import{s as r}from"./p-0ca3528f.js";import{a as s,A as m}from"./p-7c36d3fa.js";import{a as c}from"./p-702f9349.js";import{m as f}from"./p-c146af8e.js";import{a as l}from"./p-360b158e.js";import{t as d}from"./p-1da901d5.js";import"./p-46a6cd9d.js";import"./p-6e6efb4c.js";import"./p-c4749812.js";import"./p-68a274e7.js";class p extends Event{constructor(t){super("application-sidebar-toggle",{bubbles:true,composed:true});this.force=t}}const u="/*!\n* animate.css - https://animate.style/\n* Version - 4.1.1\n* Licensed under the MIT license - http://opensource.org/licenses/MIT\n*\n* Copyright (c) 2020 Animate.css\n*/:root{--animate-duration:1s;--animate-delay:1s;--animate-repeat:1}.animate__animated{animation-duration:1s;animation-duration:var(--animate-duration);animation-fill-mode:both}.animate__animated.animate__infinite{animation-iteration-count:infinite}.animate__animated.animate__repeat-1{animation-iteration-count:1;animation-iteration-count:var(--animate-repeat)}.animate__animated.animate__repeat-2{animation-iteration-count:2;animation-iteration-count:calc(var(--animate-repeat) * 2)}.animate__animated.animate__repeat-3{animation-iteration-count:3;animation-iteration-count:calc(var(--animate-repeat) * 3)}.animate__animated.animate__delay-1s{animation-delay:1s;animation-delay:var(--animate-delay)}.animate__animated.animate__delay-2s{animation-delay:2s;animation-delay:calc(var(--animate-delay) * 2)}.animate__animated.animate__delay-3s{animation-delay:3s;animation-delay:calc(var(--animate-delay) * 3)}.animate__animated.animate__delay-4s{animation-delay:4s;animation-delay:calc(var(--animate-delay) * 4)}.animate__animated.animate__delay-5s{animation-delay:5s;animation-delay:calc(var(--animate-delay) * 5)}.animate__animated.animate__faster{animation-duration:0.5s;animation-duration:calc(var(--animate-duration) / 2)}.animate__animated.animate__fast{animation-duration:0.8s;animation-duration:calc(var(--animate-duration) * 0.8)}.animate__animated.animate__slow{animation-duration:2s;animation-duration:calc(var(--animate-duration) * 2)}.animate__animated.animate__slower{animation-duration:3s;animation-duration:calc(var(--animate-duration) * 3)}@media (prefers-reduced-motion: reduce), print{.animate__animated{animation-duration:1ms !important;transition-duration:1ms !important;animation-iteration-count:1 !important}.animate__animated[class*=Out]{opacity:0}}@keyframes bounce{0%,20%,53%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translateZ(0)}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0) scaleY(1.1)}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0) scaleY(1.05)}80%{transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translateZ(0) scaleY(0.95)}90%{transform:translate3d(0, -4px, 0) scaleY(1.02)}}.animate__bounce{animation-name:bounce;transform-origin:center bottom}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.animate__flash{animation-name:flash}@keyframes pulse{0%{transform:scaleX(1)}50%{transform:scale3d(1.05, 1.05, 1.05)}to{transform:scaleX(1)}}.animate__pulse{animation-name:pulse;animation-timing-function:ease-in-out}@keyframes rubberBand{0%{transform:scaleX(1)}30%{transform:scale3d(1.25, 0.75, 1)}40%{transform:scale3d(0.75, 1.25, 1)}50%{transform:scale3d(1.15, 0.85, 1)}65%{transform:scale3d(0.95, 1.05, 1)}75%{transform:scale3d(1.05, 0.95, 1)}to{transform:scaleX(1)}}.animate__rubberBand{animation-name:rubberBand}@keyframes shakeX{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(-10px, 0, 0)}20%,40%,60%,80%{transform:translate3d(10px, 0, 0)}}.animate__shakeX{animation-name:shakeX}@keyframes shakeY{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(0, -10px, 0)}20%,40%,60%,80%{transform:translate3d(0, 10px, 0)}}.animate__shakeY{animation-name:shakeY}@keyframes headShake{0%{transform:translateX(0)}6.5%{transform:translateX(-6px) rotateY(-9deg)}18.5%{transform:translateX(5px) rotateY(7deg)}31.5%{transform:translateX(-3px) rotateY(-5deg)}43.5%{transform:translateX(2px) rotateY(3deg)}50%{transform:translateX(0)}}.animate__headShake{animation-timing-function:ease-in-out;animation-name:headShake}@keyframes swing{20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}to{transform:rotate(0deg)}}.animate__swing{transform-origin:top center;animation-name:swing}@keyframes tada{0%{transform:scaleX(1)}10%,20%{transform:scale3d(0.9, 0.9, 0.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale3d(1.1, 1.1, 1.1) rotate(3deg)}40%,60%,80%{transform:scale3d(1.1, 1.1, 1.1) rotate(-3deg)}to{transform:scaleX(1)}}.animate__tada{animation-name:tada}@keyframes wobble{0%{transform:translateZ(0)}15%{transform:translate3d(-25%, 0, 0) rotate(-5deg)}30%{transform:translate3d(20%, 0, 0) rotate(3deg)}45%{transform:translate3d(-15%, 0, 0) rotate(-3deg)}60%{transform:translate3d(10%, 0, 0) rotate(2deg)}75%{transform:translate3d(-5%, 0, 0) rotate(-1deg)}to{transform:translateZ(0)}}.animate__wobble{animation-name:wobble}@keyframes jello{0%,11.1%,to{transform:translateZ(0)}22.2%{transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{transform:skewX(6.25deg) skewY(6.25deg)}44.4%{transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{transform:skewX(-0.78125deg) skewY(-0.78125deg)}77.7%{transform:skewX(0.390625deg) skewY(0.390625deg)}88.8%{transform:skewX(-0.1953125deg) skewY(-0.1953125deg)}}.animate__jello{animation-name:jello;transform-origin:center}@keyframes heartBeat{0%{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}42%{transform:scale(1.3)}70%{transform:scale(1)}}.animate__heartBeat{animation-name:heartBeat;animation-duration:1.3s;animation-duration:calc(var(--animate-duration) * 1.3);animation-timing-function:ease-in-out}@keyframes backInDown{0%{transform:translateY(-1200px) scale(0.7);opacity:0.7}80%{transform:translateY(0) scale(0.7);opacity:0.7}to{transform:scale(1);opacity:1}}.animate__backInDown{animation-name:backInDown}@keyframes backInLeft{0%{transform:translateX(-2000px) scale(0.7);opacity:0.7}80%{transform:translateX(0) scale(0.7);opacity:0.7}to{transform:scale(1);opacity:1}}.animate__backInLeft{animation-name:backInLeft}@keyframes backInRight{0%{transform:translateX(2000px) scale(0.7);opacity:0.7}80%{transform:translateX(0) scale(0.7);opacity:0.7}to{transform:scale(1);opacity:1}}.animate__backInRight{animation-name:backInRight}@keyframes backInUp{0%{transform:translateY(1200px) scale(0.7);opacity:0.7}80%{transform:translateY(0) scale(0.7);opacity:0.7}to{transform:scale(1);opacity:1}}.animate__backInUp{animation-name:backInUp}@keyframes backOutDown{0%{transform:scale(1);opacity:1}20%{transform:translateY(0) scale(0.7);opacity:0.7}to{transform:translateY(700px) scale(0.7);opacity:0.7}}.animate__backOutDown{animation-name:backOutDown}@keyframes backOutLeft{0%{transform:scale(1);opacity:1}20%{transform:translateX(0) scale(0.7);opacity:0.7}to{transform:translateX(-2000px) scale(0.7);opacity:0.7}}.animate__backOutLeft{animation-name:backOutLeft}@keyframes backOutRight{0%{transform:scale(1);opacity:1}20%{transform:translateX(0) scale(0.7);opacity:0.7}to{transform:translateX(2000px) scale(0.7);opacity:0.7}}.animate__backOutRight{animation-name:backOutRight}@keyframes backOutUp{0%{transform:scale(1);opacity:1}20%{transform:translateY(0) scale(0.7);opacity:0.7}to{transform:translateY(-700px) scale(0.7);opacity:0.7}}.animate__backOutUp{animation-name:backOutUp}@keyframes bounceIn{0%,20%,40%,60%,80%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}20%{transform:scale3d(1.1, 1.1, 1.1)}40%{transform:scale3d(0.9, 0.9, 0.9)}60%{opacity:1;transform:scale3d(1.03, 1.03, 1.03)}80%{transform:scale3d(0.97, 0.97, 0.97)}to{opacity:1;transform:scaleX(1)}}.animate__bounceIn{animation-duration:0.75s;animation-duration:calc(var(--animate-duration) * 0.75);animation-name:bounceIn}@keyframes bounceInDown{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:translate3d(0, -3000px, 0) scaleY(3)}60%{opacity:1;transform:translate3d(0, 25px, 0) scaleY(0.9)}75%{transform:translate3d(0, -10px, 0) scaleY(0.95)}90%{transform:translate3d(0, 5px, 0) scaleY(0.985)}to{transform:translateZ(0)}}.animate__bounceInDown{animation-name:bounceInDown}@keyframes bounceInLeft{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:translate3d(-3000px, 0, 0) scaleX(3)}60%{opacity:1;transform:translate3d(25px, 0, 0) scaleX(1)}75%{transform:translate3d(-10px, 0, 0) scaleX(0.98)}90%{transform:translate3d(5px, 0, 0) scaleX(0.995)}to{transform:translateZ(0)}}.animate__bounceInLeft{animation-name:bounceInLeft}@keyframes bounceInRight{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:translate3d(3000px, 0, 0) scaleX(3)}60%{opacity:1;transform:translate3d(-25px, 0, 0) scaleX(1)}75%{transform:translate3d(10px, 0, 0) scaleX(0.98)}90%{transform:translate3d(-5px, 0, 0) scaleX(0.995)}to{transform:translateZ(0)}}.animate__bounceInRight{animation-name:bounceInRight}@keyframes bounceInUp{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:translate3d(0, 3000px, 0) scaleY(5)}60%{opacity:1;transform:translate3d(0, -20px, 0) scaleY(0.9)}75%{transform:translate3d(0, 10px, 0) scaleY(0.95)}90%{transform:translate3d(0, -5px, 0) scaleY(0.985)}to{transform:translateZ(0)}}.animate__bounceInUp{animation-name:bounceInUp}@keyframes bounceOut{20%{transform:scale3d(0.9, 0.9, 0.9)}50%,55%{opacity:1;transform:scale3d(1.1, 1.1, 1.1)}to{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}}.animate__bounceOut{animation-duration:0.75s;animation-duration:calc(var(--animate-duration) * 0.75);animation-name:bounceOut}@keyframes bounceOutDown{20%{transform:translate3d(0, 10px, 0) scaleY(0.985)}40%,45%{opacity:1;transform:translate3d(0, -20px, 0) scaleY(0.9)}to{opacity:0;transform:translate3d(0, 2000px, 0) scaleY(3)}}.animate__bounceOutDown{animation-name:bounceOutDown}@keyframes bounceOutLeft{20%{opacity:1;transform:translate3d(20px, 0, 0) scaleX(0.9)}to{opacity:0;transform:translate3d(-2000px, 0, 0) scaleX(2)}}.animate__bounceOutLeft{animation-name:bounceOutLeft}@keyframes bounceOutRight{20%{opacity:1;transform:translate3d(-20px, 0, 0) scaleX(0.9)}to{opacity:0;transform:translate3d(2000px, 0, 0) scaleX(2)}}.animate__bounceOutRight{animation-name:bounceOutRight}@keyframes bounceOutUp{20%{transform:translate3d(0, -10px, 0) scaleY(0.985)}40%,45%{opacity:1;transform:translate3d(0, 20px, 0) scaleY(0.9)}to{opacity:0;transform:translate3d(0, -2000px, 0) scaleY(3)}}.animate__bounceOutUp{animation-name:bounceOutUp}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.animate__fadeIn{animation-name:fadeIn}@keyframes fadeInDown{0%{opacity:0;transform:translate3d(0, -100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInDown{animation-name:fadeInDown}@keyframes fadeInDownBig{0%{opacity:0;transform:translate3d(0, -2000px, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInDownBig{animation-name:fadeInDownBig}@keyframes fadeInLeft{0%{opacity:0;transform:translate3d(-100%, 0, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInLeft{animation-name:fadeInLeft}@keyframes fadeInLeftBig{0%{opacity:0;transform:translate3d(-2000px, 0, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInLeftBig{animation-name:fadeInLeftBig}@keyframes fadeInRight{0%{opacity:0;transform:translate3d(100%, 0, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInRight{animation-name:fadeInRight}@keyframes fadeInRightBig{0%{opacity:0;transform:translate3d(2000px, 0, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInRightBig{animation-name:fadeInRightBig}@keyframes fadeInUp{0%{opacity:0;transform:translate3d(0, 100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInUp{animation-name:fadeInUp}@keyframes fadeInUpBig{0%{opacity:0;transform:translate3d(0, 2000px, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInUpBig{animation-name:fadeInUpBig}@keyframes fadeInTopLeft{0%{opacity:0;transform:translate3d(-100%, -100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInTopLeft{animation-name:fadeInTopLeft}@keyframes fadeInTopRight{0%{opacity:0;transform:translate3d(100%, -100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInTopRight{animation-name:fadeInTopRight}@keyframes fadeInBottomLeft{0%{opacity:0;transform:translate3d(-100%, 100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInBottomLeft{animation-name:fadeInBottomLeft}@keyframes fadeInBottomRight{0%{opacity:0;transform:translate3d(100%, 100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInBottomRight{animation-name:fadeInBottomRight}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.animate__fadeOut{animation-name:fadeOut}@keyframes fadeOutDown{0%{opacity:1}to{opacity:0;transform:translate3d(0, 100%, 0)}}.animate__fadeOutDown{animation-name:fadeOutDown}@keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;transform:translate3d(0, 2000px, 0)}}.animate__fadeOutDownBig{animation-name:fadeOutDownBig}@keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;transform:translate3d(-100%, 0, 0)}}.animate__fadeOutLeft{animation-name:fadeOutLeft}@keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;transform:translate3d(-2000px, 0, 0)}}.animate__fadeOutLeftBig{animation-name:fadeOutLeftBig}@keyframes fadeOutRight{0%{opacity:1}to{opacity:0;transform:translate3d(100%, 0, 0)}}.animate__fadeOutRight{animation-name:fadeOutRight}@keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;transform:translate3d(2000px, 0, 0)}}.animate__fadeOutRightBig{animation-name:fadeOutRightBig}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;transform:translate3d(0, -100%, 0)}}.animate__fadeOutUp{animation-name:fadeOutUp}@keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;transform:translate3d(0, -2000px, 0)}}.animate__fadeOutUpBig{animation-name:fadeOutUpBig}@keyframes fadeOutTopLeft{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(-100%, -100%, 0)}}.animate__fadeOutTopLeft{animation-name:fadeOutTopLeft}@keyframes fadeOutTopRight{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(100%, -100%, 0)}}.animate__fadeOutTopRight{animation-name:fadeOutTopRight}@keyframes fadeOutBottomRight{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(100%, 100%, 0)}}.animate__fadeOutBottomRight{animation-name:fadeOutBottomRight}@keyframes fadeOutBottomLeft{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(-100%, 100%, 0)}}.animate__fadeOutBottomLeft{animation-name:fadeOutBottomLeft}@keyframes flip{0%{transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);animation-timing-function:ease-out}40%{transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);animation-timing-function:ease-out}50%{transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);animation-timing-function:ease-in}80%{transform:perspective(400px) scale3d(0.95, 0.95, 0.95) translateZ(0) rotateY(0deg);animation-timing-function:ease-in}to{transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);animation-timing-function:ease-in}}.animate__animated.animate__flip{backface-visibility:visible;animation-name:flip}@keyframes flipInX{0%{transform:perspective(400px) rotateX(90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateX(-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotateX(10deg);opacity:1}80%{transform:perspective(400px) rotateX(-5deg)}to{transform:perspective(400px)}}.animate__flipInX{backface-visibility:visible !important;animation-name:flipInX}@keyframes flipInY{0%{transform:perspective(400px) rotateY(90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateY(-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotateY(10deg);opacity:1}80%{transform:perspective(400px) rotateY(-5deg)}to{transform:perspective(400px)}}.animate__flipInY{backface-visibility:visible !important;animation-name:flipInY}@keyframes flipOutX{0%{transform:perspective(400px)}30%{transform:perspective(400px) rotateX(-20deg);opacity:1}to{transform:perspective(400px) rotateX(90deg);opacity:0}}.animate__flipOutX{animation-duration:0.75s;animation-duration:calc(var(--animate-duration) * 0.75);animation-name:flipOutX;backface-visibility:visible !important}@keyframes flipOutY{0%{transform:perspective(400px)}30%{transform:perspective(400px) rotateY(-15deg);opacity:1}to{transform:perspective(400px) rotateY(90deg);opacity:0}}.animate__flipOutY{animation-duration:0.75s;animation-duration:calc(var(--animate-duration) * 0.75);backface-visibility:visible !important;animation-name:flipOutY}@keyframes lightSpeedInRight{0%{transform:translate3d(100%, 0, 0) skewX(-30deg);opacity:0}60%{transform:skewX(20deg);opacity:1}80%{transform:skewX(-5deg)}to{transform:translateZ(0)}}.animate__lightSpeedInRight{animation-name:lightSpeedInRight;animation-timing-function:ease-out}@keyframes lightSpeedInLeft{0%{transform:translate3d(-100%, 0, 0) skewX(30deg);opacity:0}60%{transform:skewX(-20deg);opacity:1}80%{transform:skewX(5deg)}to{transform:translateZ(0)}}.animate__lightSpeedInLeft{animation-name:lightSpeedInLeft;animation-timing-function:ease-out}@keyframes lightSpeedOutRight{0%{opacity:1}to{transform:translate3d(100%, 0, 0) skewX(30deg);opacity:0}}.animate__lightSpeedOutRight{animation-name:lightSpeedOutRight;animation-timing-function:ease-in}@keyframes lightSpeedOutLeft{0%{opacity:1}to{transform:translate3d(-100%, 0, 0) skewX(-30deg);opacity:0}}.animate__lightSpeedOutLeft{animation-name:lightSpeedOutLeft;animation-timing-function:ease-in}@keyframes rotateIn{0%{transform:rotate(-200deg);opacity:0}to{transform:translateZ(0);opacity:1}}.animate__rotateIn{animation-name:rotateIn;transform-origin:center}@keyframes rotateInDownLeft{0%{transform:rotate(-45deg);opacity:0}to{transform:translateZ(0);opacity:1}}.animate__rotateInDownLeft{animation-name:rotateInDownLeft;transform-origin:left bottom}@keyframes rotateInDownRight{0%{transform:rotate(45deg);opacity:0}to{transform:translateZ(0);opacity:1}}.animate__rotateInDownRight{animation-name:rotateInDownRight;transform-origin:right bottom}@keyframes rotateInUpLeft{0%{transform:rotate(45deg);opacity:0}to{transform:translateZ(0);opacity:1}}.animate__rotateInUpLeft{animation-name:rotateInUpLeft;transform-origin:left bottom}@keyframes rotateInUpRight{0%{transform:rotate(-90deg);opacity:0}to{transform:translateZ(0);opacity:1}}.animate__rotateInUpRight{animation-name:rotateInUpRight;transform-origin:right bottom}@keyframes rotateOut{0%{opacity:1}to{transform:rotate(200deg);opacity:0}}.animate__rotateOut{animation-name:rotateOut;transform-origin:center}@keyframes rotateOutDownLeft{0%{opacity:1}to{transform:rotate(45deg);opacity:0}}.animate__rotateOutDownLeft{animation-name:rotateOutDownLeft;transform-origin:left bottom}@keyframes rotateOutDownRight{0%{opacity:1}to{transform:rotate(-45deg);opacity:0}}.animate__rotateOutDownRight{animation-name:rotateOutDownRight;transform-origin:right bottom}@keyframes rotateOutUpLeft{0%{opacity:1}to{transform:rotate(-45deg);opacity:0}}.animate__rotateOutUpLeft{animation-name:rotateOutUpLeft;transform-origin:left bottom}@keyframes rotateOutUpRight{0%{opacity:1}to{transform:rotate(90deg);opacity:0}}.animate__rotateOutUpRight{animation-name:rotateOutUpRight;transform-origin:right bottom}@keyframes hinge{0%{animation-timing-function:ease-in-out}20%,60%{transform:rotate(80deg);animation-timing-function:ease-in-out}40%,80%{transform:rotate(60deg);animation-timing-function:ease-in-out;opacity:1}to{transform:translate3d(0, 700px, 0);opacity:0}}.animate__hinge{animation-duration:2s;animation-duration:calc(var(--animate-duration) * 2);animation-name:hinge;transform-origin:top left}@keyframes jackInTheBox{0%{opacity:0;transform:scale(0.1) rotate(30deg);transform-origin:center bottom}50%{transform:rotate(-10deg)}70%{transform:rotate(3deg)}to{opacity:1;transform:scale(1)}}.animate__jackInTheBox{animation-name:jackInTheBox}@keyframes rollIn{0%{opacity:0;transform:translate3d(-100%, 0, 0) rotate(-120deg)}to{opacity:1;transform:translateZ(0)}}.animate__rollIn{animation-name:rollIn}@keyframes rollOut{0%{opacity:1}to{opacity:0;transform:translate3d(100%, 0, 0) rotate(120deg)}}.animate__rollOut{animation-name:rollOut}@keyframes zoomIn{0%{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}50%{opacity:1}}.animate__zoomIn{animation-name:zoomIn}@keyframes zoomInDown{0%{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomInDown{animation-name:zoomInDown}@keyframes zoomInLeft{0%{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomInLeft{animation-name:zoomInLeft}@keyframes zoomInRight{0%{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomInRight{animation-name:zoomInRight}@keyframes zoomInUp{0%{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomInUp{animation-name:zoomInUp}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}to{opacity:0}}.animate__zoomOut{animation-name:zoomOut}@keyframes zoomOutDown{40%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}to{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomOutDown{animation-name:zoomOutDown;transform-origin:center bottom}@keyframes zoomOutLeft{40%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0)}to{opacity:0;transform:scale(0.1) translate3d(-2000px, 0, 0)}}.animate__zoomOutLeft{animation-name:zoomOutLeft;transform-origin:left center}@keyframes zoomOutRight{40%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0)}to{opacity:0;transform:scale(0.1) translate3d(2000px, 0, 0)}}.animate__zoomOutRight{animation-name:zoomOutRight;transform-origin:right center}@keyframes zoomOutUp{40%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}to{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomOutUp{animation-name:zoomOutUp;transform-origin:center bottom}@keyframes slideInDown{0%{transform:translate3d(0, -100%, 0);visibility:visible}to{transform:translateZ(0)}}.animate__slideInDown{animation-name:slideInDown}@keyframes slideInLeft{0%{transform:translate3d(-100%, 0, 0);visibility:visible}to{transform:translateZ(0)}}.animate__slideInLeft{animation-name:slideInLeft}@keyframes slideInRight{0%{transform:translate3d(100%, 0, 0);visibility:visible}to{transform:translateZ(0)}}.animate__slideInRight{animation-name:slideInRight}@keyframes slideInUp{0%{transform:translate3d(0, 100%, 0);visibility:visible}to{transform:translateZ(0)}}.animate__slideInUp{animation-name:slideInUp}@keyframes slideOutDown{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0, 100%, 0)}}.animate__slideOutDown{animation-name:slideOutDown}@keyframes slideOutLeft{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(-100%, 0, 0)}}.animate__slideOutLeft{animation-name:slideOutLeft}@keyframes slideOutRight{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(100%, 0, 0)}}.animate__slideOutRight{animation-name:slideOutRight}@keyframes slideOutUp{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0, -100%, 0)}}.animate__slideOutUp{animation-name:slideOutUp}:host{display:flex;flex-direction:row;position:absolute;height:100%;min-height:-moz-min-content;min-height:min-content;z-index:var(--theme-z-index-sticky);width:auto;bottom: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 .tabs{height:100%;position:relative;overflow-y:auto;pointer-events:all;-ms-overflow-style:none;scrollbar-width:inherit}:host .tabs::-webkit-scrollbar{display:none}:host .show-scrollbar{scrollbar-width:inherit}:host .show-scrollbar::-webkit-scrollbar{display:inherit}:host .tabs-shadow-container{overflow:hidden;display:block;position:relative;margin-bottom:0.75rem}:host .tabs--shadow{opacity:0;position:absolute;width:100%;height:0.625rem;background:linear-gradient(var(--theme-color-shadow-1), transparent);pointer-events:none;z-index:var(--theme-z-index-sticky);transition:opacity var(--theme-default-time)}:host .tabs--shadow-top{top:0;background:linear-gradient(var(--theme-color-shadow-1), transparent)}:host .tabs--shadow-bottom{bottom:0;background:linear-gradient(transparent, var(--theme-color-shadow-1))}:host .tabs--shadow--show{opacity:1}:host .menu{display:flex;flex-direction:column;position:relative;width:3.25rem;height:100%;padding-block-end:1rem;overflow:hidden;background-color:var(--theme-nav--background);transition:width var(--theme-default-time) ease-in-out}:host .menu.expanded{box-shadow:var(--theme-navigation--box-shadow)}:host .menu-overlay{display:none;position:absolute;width:calc(100vw - 3.25rem);height:100%;left:3.25rem;z-index:-1;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);background-color:var(--theme-sidebar-overlay-blur);transition:left var(--theme-default-time) ease-in-out}:host .menu-overlay.visible{display:block}:host .menu.expanded{width:16rem}:host .menu-overlay.expanded{width:calc(100vw - 16rem);left:16rem}:host .menu-overlay-container{display:contents}:host .menu-avatar{max-height:3rem}:host .avatar{margin-bottom:2rem}:host #cui-imprint .cui-imprint-product-name{margin-bottom:1rem}:host #cui-imprint .cui-imprint-product-description{margin-bottom:2rem}:host #cui-imprint .cui-imprint-link-container{display:flex;align-items:center}:host .bottom-tab-divider{margin-top:auto}:host .menu-buttons{margin:0.5rem 0 0 0.625rem}:host .menu-buttons>:last-child{margin-bottom:1rem}:host(.breakpoint-sm) .menu:not(.expanded){width:0}:host(.breakpoint-sm) .menu-overlay{left:0;width:100vw}:host(.breakpoint-lg){position:relative}:host(.breakpoint-lg) .menu.expanded{box-shadow:none}:host ::slotted(a[href]){all:unset}";const h=u;const b=class{constructor(e){t(this,e);this.expandChange=a(this,"expandChange",7);this.mapExpandChange=a(this,"mapExpandChange",7);this.isTransitionDisabled=false;this.isVisible=t=>{var a,e;return t.style.display!=="none"&&((e=(a=t.parentElement)===null||a===void 0?void 0:a.parentElement)===null||e===void 0?void 0:e.style.display)!=="none"};this.showSettings=false;this.showAbout=false;this.enableToggleTheme=false;this.enableSettings=true;this.enableMapExpand=false;this.applicationName=undefined;this.applicationDescription="";this.maxVisibleMenuItems=9;this.i18nExpandSidebar="Expand sidebar";this.expand=false;this.startExpanded=false;this.pinned=false;this.i18nLegal="About & legal information";this.i18nSettings="Settings";this.i18nToggleTheme="Toggle theme";this.i18nExpand=" Expand";this.i18nCollapse="Collapse";this.showPinned=false;this.mapExpand=true;this.activeTab=undefined;this.breakpoint="lg";this.itemsScrollShadowTop=false;this.itemsScrollShadowBottom=false;this.applicationLayoutContext=undefined}pinnedChange(t){var a;if(((a=this.applicationLayoutContext)===null||a===void 0?void 0:a.host)==="map-navigation"){console.warn("ix-map-navigation does not support pinning of the menu");return}this.setPinned(this.pinned);if(t){c.disableBreakpointDetection();c.setBreakpoint("lg");return}c.enableBreakpointDetection()}get popoverArea(){return this.hostElement.shadowRoot.querySelector("#popover-area")}get menu(){return this.hostElement.shadowRoot.querySelector(".menu")}get menuItemsContainer(){return this.menu.querySelector(".tabs")}get overlayContainer(){return this.hostElement.shadowRoot.querySelector(".menu-overlay")}get menuItems(){return Array.from(this.hostElement.querySelectorAll('ix-menu-item:not(.internal-tab):not(.home-tab):not(.bottom-tab):not([slot="bottom"])')).filter(this.isVisible)}get menuBottomItems(){return Array.from(this.hostElement.querySelectorAll("ix-menu-item.bottom-tab:not(.internal-tab):not(.home-tab)")).filter(this.isVisible)}get homeTab(){return this.hostElement.querySelector("ix-menu-item.home-tab")}get moreItemsDropdown(){return this.hostElement.shadowRoot.querySelector(".internal-tab ix-dropdown")}get isMoreItemsDropdownEmpty(){return this.hostElement.shadowRoot.querySelectorAll(".internal-tab ix-dropdown .appended").length===0}get moreItemsDropdownItems(){return this.hostElement.shadowRoot.querySelectorAll(".internal-tab ix-dropdown ix-menu-item")}get activeMoreTabContainer(){return this.hostElement.shadowRoot.querySelector(".active-more-tab")}get activeMoreTab(){return this.hostElement.shadowRoot.querySelector(".active-more-tab ix-menu-item")}get aboutPopoverContainer(){return this.hostElement.querySelector(".about-news")}get aboutNewsPopover(){var t;return(t=document.querySelector("ix-menu-about-news"))!==null&&t!==void 0?t:this.hostElement.querySelector("ix-menu-about-news")}get aboutTab(){return this.hostElement.shadowRoot.querySelector("#aboutAndLegal")}get about(){return this.hostElement.querySelector("ix-menu-about")}get settings(){return this.hostElement.querySelector("ix-menu-settings")}get isSettingsEmpty(){return Array.from(this.hostElement.shadowRoot.querySelectorAll("ix-menu-settings-item")).length===0}get tabsContainer(){return this.hostElement}componentDidLoad(){requestAnimationFrame((()=>{this.handleOverflowIndicator()}));if(this.pinned){this.pinnedChange(this.pinned)}}componentWillLoad(){s(this.hostElement,m,(t=>{this.applicationLayoutContext=t;if(t.hideHeader===true){this.onBreakpointChange("md");return}this.onBreakpointChange(c.breakpoint)}),true);f.register(this.hostElement);c.onChange.on((t=>this.onBreakpointChange(t)));this.onBreakpointChange(c.breakpoint,true)}componentWillRender(){this.appendTabs()}componentDidRender(){this.appendFragments()}setPinned(t){this.showPinned=t;f.setIsPinned(t)}onBreakpointChange(t,a=false){var e;if(!this.applicationLayoutContext&&t==="sm"){return}if(((e=this.applicationLayoutContext)===null||e===void 0?void 0:e.host)==="map-navigation"){this.breakpoint="md";return}if(!this.applicationLayoutContext){return}if(this.applicationLayoutContext.hideHeader&&t==="sm"){return}this.setPinned(t==="lg");if(a||t!==this.breakpoint)this.toggleMenu(t==="lg"&&this.startExpanded);this.breakpoint=t}appendFragments(){this.appendAboutNewsPopover()}resetActiveTab(){this.activeTab=null}appendTabs(){this.activeTab=null}getAboutPopoverVerticalPosition(){const t=12;const a=6;const e=this.aboutTab.getBoundingClientRect();const n=window.innerHeight-(e.bottom-e.height/2+t/2+a);return l(n)}appendAboutNewsPopover(){var t;if(!this.aboutNewsPopover){return}this.aboutNewsPopover.style.bottom=this.getAboutPopoverVerticalPosition();if(!((t=this.popoverArea)===null||t===void 0?void 0:t.contains(this.aboutNewsPopover))){const t=()=>{var t;if(((t=this.aboutNewsPopover)===null||t===void 0?void 0:t.aboutItemLabel)&&this.about){this.about.activeTabLabel=this.aboutNewsPopover.aboutItemLabel;this.toggleAbout(true)}};this.aboutNewsPopover.addEventListener("showMore",t.bind(this));document.body.appendChild(this.aboutNewsPopover)}}async toggleMapExpand(t){if(t!==undefined){this.mapExpand=t}else{this.mapExpand=!this.mapExpand}}async toggleMenu(t){if(t!==undefined){this.expand=t}else{this.expand=!this.expand}if(this.aboutNewsPopover){this.aboutNewsPopover.expanded=this.expand}this.expandChange.emit(this.expand);this.isTransitionDisabled=false;this.checkTransition();if(this.breakpoint=="sm"&&this.expand){setTimeout((()=>{this.handleOverflowIndicator()}),100)}}checkTransition(){const t=this.overlayContainer;if(!t){return}if(this.isTransitionDisabled){t.style.transitionProperty="left"}else{t.style.transitionProperty="all"}}isOverlayVisible(){return this.showAbout||this.showSettings}async toggleSettings(t){if(!this.settings){return}if(!this.isOverlayVisible()){this.animateOverlayFadeIn()}if(t){this.resetOverlay();this.showSettings=t;this.settings.show=this.showSettings}else{this.onOverlayClose()}}async toggleAbout(t){if(!this.about){return}if(!this.isOverlayVisible()){this.animateOverlayFadeIn()}if(t){this.resetOverlay();this.showAbout=t;this.about.show=this.showAbout}else{this.onOverlayClose()}}resetOverlay(){this.showSettings=false;this.showAbout=false;if(this.settings){this.settings.show=false}if(this.about){this.about.show=false}}getCollapseText(){return this.mapExpand?this.i18nCollapse:this.i18nExpand}getCollapseIcon(){return this.mapExpand?"navigation-left":"navigation-right"}isMenuItemClicked(t){if(t.target instanceof HTMLElement){return t.target.tagName==="IX-MENU-ITEM"}return false}handleOverflowIndicator(){const{clientHeight:t,scrollTop:a,scrollHeight:e}=this.menuItemsContainer;this.itemsScrollShadowTop=a>0;this.itemsScrollShadowBottom=Math.round(a+t)<e}onOverlayClose(){this.animateOverlayFadeOut((()=>{this.resetOverlay()}))}animateOverlayFadeIn(){requestAnimationFrame((()=>{o({targets:this.overlayContainer,duration:300,backdropFilter:[0,"blur(1rem)"],translateX:["-4rem",0],opacity:[0,1],easing:"easeInSine",begin:()=>{if(this.showPinned){return}this.toggleMenu(false)}})}))}animateOverlayFadeOut(t){requestAnimationFrame((()=>{o({targets:this.overlayContainer,duration:300,backdropFilter:["blur(1rem)",0],translateX:[0,"-4rem"],opacity:[1,0],easing:"easeInSine",complete:()=>t()})}))}onMenuItemsClick(t){if(this.isMenuItemClicked(t)){if(!this.showPinned){this.toggleMenu(false)}this.onOverlayClose()}}isHiddenFromViewport(){return this.breakpoint==="sm"&&this.expand===false}sidebarToggle(){this.mapExpandChange.emit(this.mapExpand);this.hostElement.dispatchEvent(new p(this.mapExpand))}render(){var t;return e(n,{key:"04381993d2b3de312e2d2cf9960e4674f817d112",class:{expanded:this.expand,[`breakpoint-${this.breakpoint}`]:true},slot:"menu"},e("aside",{key:"03991cabbeb7fbc4ed620e2cc65739127c76c2e5",class:{menu:true,expanded:this.expand},onClick:()=>{this.resetActiveTab()}},e("div",{key:"db75ed295b5d528f63a557168acc87dbb0f9f7cc",class:"menu-buttons"},this.breakpoint!=="sm"&&e("ix-menu-expand-icon",{breakpoint:this.breakpoint,expanded:this.expand,pinned:this.pinned,class:"menu-expand-icon",ixAriaLabel:this.i18nExpandSidebar,onClick:async()=>this.toggleMenu()}),this.breakpoint==="sm"&&this.applicationLayoutContext.appSwitchConfig&&e("ix-icon-button",{onClick:()=>r(this.applicationLayoutContext.appSwitchConfig),icon:"apps",ghost:true})),e("div",{key:"2720ecc044b969dce2c30ce4caebc337a2c14fdf",id:"menu-tabs",style:{display:"contents"},onClick:t=>this.onMenuItemsClick(t)},e("div",{key:"41cf30c3ff12c6bc4b6cbee1b7ac6e38e0591a8e",class:"tabs-shadow-container"},e("div",{key:"1ab4dfeb9512cd11553c3cf957f499cb3f3f0874",class:{"tabs--shadow":true,"tabs--shadow-top":true,"tabs--shadow--show":this.itemsScrollShadowTop}}),e("div",{key:"13b064b021d8cc95748336a09b2abe102c43255c",class:{tabs:true,"show-scrollbar":this.expand},onScroll:()=>this.handleOverflowIndicator()},e("div",{key:"56b8bdaaf62dcb141c05ac3f0d85f212280ae3be",class:"menu-avatar"},e("slot",{key:"71558d01cc5c4402daffa2a14565f9413f86eb38",name:"ix-menu-avatar"})),e("slot",{key:"a9769cfeafc4a704ef6bd5b3ba8a067599c1d0eb",name:"home"}),this.breakpoint!=="sm"||!this.isHiddenFromViewport()?e("slot",null):null),e("div",{key:"1207b0712c13e075944db84015646e80c36384cf",class:{"tabs--shadow":true,"tabs--shadow-bottom":true,"tabs--shadow--show":this.itemsScrollShadowBottom}}))),e("div",{key:"bf3b36fd14b0845c50c554fa3a160165fcb7cb4a",class:"bottom-tab-divider"}),this.settings?e("ix-menu-item",{disabled:this.isHiddenFromViewport(),id:"settings",class:{"internal-tab":true,"bottom-tab":true,active:this.showSettings},icon:"cogwheel",onClick:async()=>this.toggleSettings(!this.showSettings),label:this.i18nSettings}):null,e("div",{key:"5f99b7ec1100e5de40c95b5650445041da2bfbba",onClick:t=>this.onMenuItemsClick(t)},e("slot",{key:"bcd9a4884f37c69f7fa0f4d69dffd68a1bacdc74",name:"bottom"})),e("div",{key:"34aa6532f783481f5b5bf701eb5307a3d921f56c",id:"popover-area"}),this.about?e("ix-menu-item",{disabled:this.isHiddenFromViewport(),id:"aboutAndLegal",class:{"internal-tab":true,"bottom-tab":true,active:this.showAbout},icon:"info",onClick:async()=>this.toggleAbout(!this.showAbout),label:this.i18nLegal}):null,this.enableToggleTheme?e("ix-menu-item",{disabled:this.isHiddenFromViewport(),id:"toggleTheme",onClick:()=>d.toggleMode(),class:"internal-tab bottom-tab",icon:"light-dark",label:this.i18nToggleTheme}):null,this.enableMapExpand||((t=this.applicationLayoutContext)===null||t===void 0?void 0:t.sidebar)?e("ix-menu-item",{disabled:this.isHiddenFromViewport(),id:"menu-collapse",onClick:()=>this.sidebarToggle(),class:"internal-tab bottom-tab",icon:`${this.getCollapseIcon()}`,label:this.getCollapseText()}):null),e("div",{key:"f2a0d3399711c429a21e8a837262962248e7afb2",class:{"menu-overlay":true,visible:this.isOverlayVisible(),expanded:this.expand},onTransitionEnd:()=>{this.isTransitionDisabled=true;this.checkTransition()}},e("div",{key:"5ef1eb888423aff73f80020644a44a019734b9c0",class:"menu-overlay-container"},this.showSettings?e("slot",{name:"ix-menu-settings"}):null),e("div",{key:"c949d27796756f38872045c3bfec206f5c2b8c85",class:"menu-overlay-container"},this.showAbout?e("slot",{name:"ix-menu-about"}):null)))}get hostElement(){return i(this)}static get watchers(){return{pinned:["pinnedChange"]}}};b.style=h;export{b as ix_menu};
-//# sourceMappingURL=p-493cb880.entry.js.map
+import{r as t,c as a,h as e,H as n,g as i}from"./p-f86a894a.js";import{a as o}from"./p-71206084.js";import{s as r}from"./p-0ca3528f.js";import{a as s,A as m}from"./p-7c36d3fa.js";import{a as c}from"./p-702f9349.js";import{m as f}from"./p-c146af8e.js";import{a as l}from"./p-360b158e.js";import{t as d}from"./p-1da901d5.js";import"./p-46a6cd9d.js";import"./p-6e6efb4c.js";import"./p-c4749812.js";import"./p-68a274e7.js";class p extends Event{constructor(t){super("application-sidebar-toggle",{bubbles:true,composed:true});this.force=t}}const u="/*!\n* animate.css - https://animate.style/\n* Version - 4.1.1\n* Licensed under the MIT license - http://opensource.org/licenses/MIT\n*\n* Copyright (c) 2020 Animate.css\n*/:root{--animate-duration:1s;--animate-delay:1s;--animate-repeat:1}.animate__animated{animation-duration:1s;animation-duration:var(--animate-duration);animation-fill-mode:both}.animate__animated.animate__infinite{animation-iteration-count:infinite}.animate__animated.animate__repeat-1{animation-iteration-count:1;animation-iteration-count:var(--animate-repeat)}.animate__animated.animate__repeat-2{animation-iteration-count:2;animation-iteration-count:calc(var(--animate-repeat) * 2)}.animate__animated.animate__repeat-3{animation-iteration-count:3;animation-iteration-count:calc(var(--animate-repeat) * 3)}.animate__animated.animate__delay-1s{animation-delay:1s;animation-delay:var(--animate-delay)}.animate__animated.animate__delay-2s{animation-delay:2s;animation-delay:calc(var(--animate-delay) * 2)}.animate__animated.animate__delay-3s{animation-delay:3s;animation-delay:calc(var(--animate-delay) * 3)}.animate__animated.animate__delay-4s{animation-delay:4s;animation-delay:calc(var(--animate-delay) * 4)}.animate__animated.animate__delay-5s{animation-delay:5s;animation-delay:calc(var(--animate-delay) * 5)}.animate__animated.animate__faster{animation-duration:0.5s;animation-duration:calc(var(--animate-duration) / 2)}.animate__animated.animate__fast{animation-duration:0.8s;animation-duration:calc(var(--animate-duration) * 0.8)}.animate__animated.animate__slow{animation-duration:2s;animation-duration:calc(var(--animate-duration) * 2)}.animate__animated.animate__slower{animation-duration:3s;animation-duration:calc(var(--animate-duration) * 3)}@media (prefers-reduced-motion: reduce), print{.animate__animated{animation-duration:1ms !important;transition-duration:1ms !important;animation-iteration-count:1 !important}.animate__animated[class*=Out]{opacity:0}}@keyframes bounce{0%,20%,53%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translateZ(0)}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0) scaleY(1.1)}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0) scaleY(1.05)}80%{transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translateZ(0) scaleY(0.95)}90%{transform:translate3d(0, -4px, 0) scaleY(1.02)}}.animate__bounce{animation-name:bounce;transform-origin:center bottom}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.animate__flash{animation-name:flash}@keyframes pulse{0%{transform:scaleX(1)}50%{transform:scale3d(1.05, 1.05, 1.05)}to{transform:scaleX(1)}}.animate__pulse{animation-name:pulse;animation-timing-function:ease-in-out}@keyframes rubberBand{0%{transform:scaleX(1)}30%{transform:scale3d(1.25, 0.75, 1)}40%{transform:scale3d(0.75, 1.25, 1)}50%{transform:scale3d(1.15, 0.85, 1)}65%{transform:scale3d(0.95, 1.05, 1)}75%{transform:scale3d(1.05, 0.95, 1)}to{transform:scaleX(1)}}.animate__rubberBand{animation-name:rubberBand}@keyframes shakeX{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(-10px, 0, 0)}20%,40%,60%,80%{transform:translate3d(10px, 0, 0)}}.animate__shakeX{animation-name:shakeX}@keyframes shakeY{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(0, -10px, 0)}20%,40%,60%,80%{transform:translate3d(0, 10px, 0)}}.animate__shakeY{animation-name:shakeY}@keyframes headShake{0%{transform:translateX(0)}6.5%{transform:translateX(-6px) rotateY(-9deg)}18.5%{transform:translateX(5px) rotateY(7deg)}31.5%{transform:translateX(-3px) rotateY(-5deg)}43.5%{transform:translateX(2px) rotateY(3deg)}50%{transform:translateX(0)}}.animate__headShake{animation-timing-function:ease-in-out;animation-name:headShake}@keyframes swing{20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}to{transform:rotate(0deg)}}.animate__swing{transform-origin:top center;animation-name:swing}@keyframes tada{0%{transform:scaleX(1)}10%,20%{transform:scale3d(0.9, 0.9, 0.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale3d(1.1, 1.1, 1.1) rotate(3deg)}40%,60%,80%{transform:scale3d(1.1, 1.1, 1.1) rotate(-3deg)}to{transform:scaleX(1)}}.animate__tada{animation-name:tada}@keyframes wobble{0%{transform:translateZ(0)}15%{transform:translate3d(-25%, 0, 0) rotate(-5deg)}30%{transform:translate3d(20%, 0, 0) rotate(3deg)}45%{transform:translate3d(-15%, 0, 0) rotate(-3deg)}60%{transform:translate3d(10%, 0, 0) rotate(2deg)}75%{transform:translate3d(-5%, 0, 0) rotate(-1deg)}to{transform:translateZ(0)}}.animate__wobble{animation-name:wobble}@keyframes jello{0%,11.1%,to{transform:translateZ(0)}22.2%{transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{transform:skewX(6.25deg) skewY(6.25deg)}44.4%{transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{transform:skewX(-0.78125deg) skewY(-0.78125deg)}77.7%{transform:skewX(0.390625deg) skewY(0.390625deg)}88.8%{transform:skewX(-0.1953125deg) skewY(-0.1953125deg)}}.animate__jello{animation-name:jello;transform-origin:center}@keyframes heartBeat{0%{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}42%{transform:scale(1.3)}70%{transform:scale(1)}}.animate__heartBeat{animation-name:heartBeat;animation-duration:1.3s;animation-duration:calc(var(--animate-duration) * 1.3);animation-timing-function:ease-in-out}@keyframes backInDown{0%{transform:translateY(-1200px) scale(0.7);opacity:0.7}80%{transform:translateY(0) scale(0.7);opacity:0.7}to{transform:scale(1);opacity:1}}.animate__backInDown{animation-name:backInDown}@keyframes backInLeft{0%{transform:translateX(-2000px) scale(0.7);opacity:0.7}80%{transform:translateX(0) scale(0.7);opacity:0.7}to{transform:scale(1);opacity:1}}.animate__backInLeft{animation-name:backInLeft}@keyframes backInRight{0%{transform:translateX(2000px) scale(0.7);opacity:0.7}80%{transform:translateX(0) scale(0.7);opacity:0.7}to{transform:scale(1);opacity:1}}.animate__backInRight{animation-name:backInRight}@keyframes backInUp{0%{transform:translateY(1200px) scale(0.7);opacity:0.7}80%{transform:translateY(0) scale(0.7);opacity:0.7}to{transform:scale(1);opacity:1}}.animate__backInUp{animation-name:backInUp}@keyframes backOutDown{0%{transform:scale(1);opacity:1}20%{transform:translateY(0) scale(0.7);opacity:0.7}to{transform:translateY(700px) scale(0.7);opacity:0.7}}.animate__backOutDown{animation-name:backOutDown}@keyframes backOutLeft{0%{transform:scale(1);opacity:1}20%{transform:translateX(0) scale(0.7);opacity:0.7}to{transform:translateX(-2000px) scale(0.7);opacity:0.7}}.animate__backOutLeft{animation-name:backOutLeft}@keyframes backOutRight{0%{transform:scale(1);opacity:1}20%{transform:translateX(0) scale(0.7);opacity:0.7}to{transform:translateX(2000px) scale(0.7);opacity:0.7}}.animate__backOutRight{animation-name:backOutRight}@keyframes backOutUp{0%{transform:scale(1);opacity:1}20%{transform:translateY(0) scale(0.7);opacity:0.7}to{transform:translateY(-700px) scale(0.7);opacity:0.7}}.animate__backOutUp{animation-name:backOutUp}@keyframes bounceIn{0%,20%,40%,60%,80%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}20%{transform:scale3d(1.1, 1.1, 1.1)}40%{transform:scale3d(0.9, 0.9, 0.9)}60%{opacity:1;transform:scale3d(1.03, 1.03, 1.03)}80%{transform:scale3d(0.97, 0.97, 0.97)}to{opacity:1;transform:scaleX(1)}}.animate__bounceIn{animation-duration:0.75s;animation-duration:calc(var(--animate-duration) * 0.75);animation-name:bounceIn}@keyframes bounceInDown{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:translate3d(0, -3000px, 0) scaleY(3)}60%{opacity:1;transform:translate3d(0, 25px, 0) scaleY(0.9)}75%{transform:translate3d(0, -10px, 0) scaleY(0.95)}90%{transform:translate3d(0, 5px, 0) scaleY(0.985)}to{transform:translateZ(0)}}.animate__bounceInDown{animation-name:bounceInDown}@keyframes bounceInLeft{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:translate3d(-3000px, 0, 0) scaleX(3)}60%{opacity:1;transform:translate3d(25px, 0, 0) scaleX(1)}75%{transform:translate3d(-10px, 0, 0) scaleX(0.98)}90%{transform:translate3d(5px, 0, 0) scaleX(0.995)}to{transform:translateZ(0)}}.animate__bounceInLeft{animation-name:bounceInLeft}@keyframes bounceInRight{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:translate3d(3000px, 0, 0) scaleX(3)}60%{opacity:1;transform:translate3d(-25px, 0, 0) scaleX(1)}75%{transform:translate3d(10px, 0, 0) scaleX(0.98)}90%{transform:translate3d(-5px, 0, 0) scaleX(0.995)}to{transform:translateZ(0)}}.animate__bounceInRight{animation-name:bounceInRight}@keyframes bounceInUp{0%,60%,75%,90%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1)}0%{opacity:0;transform:translate3d(0, 3000px, 0) scaleY(5)}60%{opacity:1;transform:translate3d(0, -20px, 0) scaleY(0.9)}75%{transform:translate3d(0, 10px, 0) scaleY(0.95)}90%{transform:translate3d(0, -5px, 0) scaleY(0.985)}to{transform:translateZ(0)}}.animate__bounceInUp{animation-name:bounceInUp}@keyframes bounceOut{20%{transform:scale3d(0.9, 0.9, 0.9)}50%,55%{opacity:1;transform:scale3d(1.1, 1.1, 1.1)}to{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}}.animate__bounceOut{animation-duration:0.75s;animation-duration:calc(var(--animate-duration) * 0.75);animation-name:bounceOut}@keyframes bounceOutDown{20%{transform:translate3d(0, 10px, 0) scaleY(0.985)}40%,45%{opacity:1;transform:translate3d(0, -20px, 0) scaleY(0.9)}to{opacity:0;transform:translate3d(0, 2000px, 0) scaleY(3)}}.animate__bounceOutDown{animation-name:bounceOutDown}@keyframes bounceOutLeft{20%{opacity:1;transform:translate3d(20px, 0, 0) scaleX(0.9)}to{opacity:0;transform:translate3d(-2000px, 0, 0) scaleX(2)}}.animate__bounceOutLeft{animation-name:bounceOutLeft}@keyframes bounceOutRight{20%{opacity:1;transform:translate3d(-20px, 0, 0) scaleX(0.9)}to{opacity:0;transform:translate3d(2000px, 0, 0) scaleX(2)}}.animate__bounceOutRight{animation-name:bounceOutRight}@keyframes bounceOutUp{20%{transform:translate3d(0, -10px, 0) scaleY(0.985)}40%,45%{opacity:1;transform:translate3d(0, 20px, 0) scaleY(0.9)}to{opacity:0;transform:translate3d(0, -2000px, 0) scaleY(3)}}.animate__bounceOutUp{animation-name:bounceOutUp}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.animate__fadeIn{animation-name:fadeIn}@keyframes fadeInDown{0%{opacity:0;transform:translate3d(0, -100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInDown{animation-name:fadeInDown}@keyframes fadeInDownBig{0%{opacity:0;transform:translate3d(0, -2000px, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInDownBig{animation-name:fadeInDownBig}@keyframes fadeInLeft{0%{opacity:0;transform:translate3d(-100%, 0, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInLeft{animation-name:fadeInLeft}@keyframes fadeInLeftBig{0%{opacity:0;transform:translate3d(-2000px, 0, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInLeftBig{animation-name:fadeInLeftBig}@keyframes fadeInRight{0%{opacity:0;transform:translate3d(100%, 0, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInRight{animation-name:fadeInRight}@keyframes fadeInRightBig{0%{opacity:0;transform:translate3d(2000px, 0, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInRightBig{animation-name:fadeInRightBig}@keyframes fadeInUp{0%{opacity:0;transform:translate3d(0, 100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInUp{animation-name:fadeInUp}@keyframes fadeInUpBig{0%{opacity:0;transform:translate3d(0, 2000px, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInUpBig{animation-name:fadeInUpBig}@keyframes fadeInTopLeft{0%{opacity:0;transform:translate3d(-100%, -100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInTopLeft{animation-name:fadeInTopLeft}@keyframes fadeInTopRight{0%{opacity:0;transform:translate3d(100%, -100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInTopRight{animation-name:fadeInTopRight}@keyframes fadeInBottomLeft{0%{opacity:0;transform:translate3d(-100%, 100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInBottomLeft{animation-name:fadeInBottomLeft}@keyframes fadeInBottomRight{0%{opacity:0;transform:translate3d(100%, 100%, 0)}to{opacity:1;transform:translateZ(0)}}.animate__fadeInBottomRight{animation-name:fadeInBottomRight}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.animate__fadeOut{animation-name:fadeOut}@keyframes fadeOutDown{0%{opacity:1}to{opacity:0;transform:translate3d(0, 100%, 0)}}.animate__fadeOutDown{animation-name:fadeOutDown}@keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;transform:translate3d(0, 2000px, 0)}}.animate__fadeOutDownBig{animation-name:fadeOutDownBig}@keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;transform:translate3d(-100%, 0, 0)}}.animate__fadeOutLeft{animation-name:fadeOutLeft}@keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;transform:translate3d(-2000px, 0, 0)}}.animate__fadeOutLeftBig{animation-name:fadeOutLeftBig}@keyframes fadeOutRight{0%{opacity:1}to{opacity:0;transform:translate3d(100%, 0, 0)}}.animate__fadeOutRight{animation-name:fadeOutRight}@keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;transform:translate3d(2000px, 0, 0)}}.animate__fadeOutRightBig{animation-name:fadeOutRightBig}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;transform:translate3d(0, -100%, 0)}}.animate__fadeOutUp{animation-name:fadeOutUp}@keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;transform:translate3d(0, -2000px, 0)}}.animate__fadeOutUpBig{animation-name:fadeOutUpBig}@keyframes fadeOutTopLeft{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(-100%, -100%, 0)}}.animate__fadeOutTopLeft{animation-name:fadeOutTopLeft}@keyframes fadeOutTopRight{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(100%, -100%, 0)}}.animate__fadeOutTopRight{animation-name:fadeOutTopRight}@keyframes fadeOutBottomRight{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(100%, 100%, 0)}}.animate__fadeOutBottomRight{animation-name:fadeOutBottomRight}@keyframes fadeOutBottomLeft{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(-100%, 100%, 0)}}.animate__fadeOutBottomLeft{animation-name:fadeOutBottomLeft}@keyframes flip{0%{transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);animation-timing-function:ease-out}40%{transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);animation-timing-function:ease-out}50%{transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);animation-timing-function:ease-in}80%{transform:perspective(400px) scale3d(0.95, 0.95, 0.95) translateZ(0) rotateY(0deg);animation-timing-function:ease-in}to{transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);animation-timing-function:ease-in}}.animate__animated.animate__flip{backface-visibility:visible;animation-name:flip}@keyframes flipInX{0%{transform:perspective(400px) rotateX(90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateX(-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotateX(10deg);opacity:1}80%{transform:perspective(400px) rotateX(-5deg)}to{transform:perspective(400px)}}.animate__flipInX{backface-visibility:visible !important;animation-name:flipInX}@keyframes flipInY{0%{transform:perspective(400px) rotateY(90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateY(-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotateY(10deg);opacity:1}80%{transform:perspective(400px) rotateY(-5deg)}to{transform:perspective(400px)}}.animate__flipInY{backface-visibility:visible !important;animation-name:flipInY}@keyframes flipOutX{0%{transform:perspective(400px)}30%{transform:perspective(400px) rotateX(-20deg);opacity:1}to{transform:perspective(400px) rotateX(90deg);opacity:0}}.animate__flipOutX{animation-duration:0.75s;animation-duration:calc(var(--animate-duration) * 0.75);animation-name:flipOutX;backface-visibility:visible !important}@keyframes flipOutY{0%{transform:perspective(400px)}30%{transform:perspective(400px) rotateY(-15deg);opacity:1}to{transform:perspective(400px) rotateY(90deg);opacity:0}}.animate__flipOutY{animation-duration:0.75s;animation-duration:calc(var(--animate-duration) * 0.75);backface-visibility:visible !important;animation-name:flipOutY}@keyframes lightSpeedInRight{0%{transform:translate3d(100%, 0, 0) skewX(-30deg);opacity:0}60%{transform:skewX(20deg);opacity:1}80%{transform:skewX(-5deg)}to{transform:translateZ(0)}}.animate__lightSpeedInRight{animation-name:lightSpeedInRight;animation-timing-function:ease-out}@keyframes lightSpeedInLeft{0%{transform:translate3d(-100%, 0, 0) skewX(30deg);opacity:0}60%{transform:skewX(-20deg);opacity:1}80%{transform:skewX(5deg)}to{transform:translateZ(0)}}.animate__lightSpeedInLeft{animation-name:lightSpeedInLeft;animation-timing-function:ease-out}@keyframes lightSpeedOutRight{0%{opacity:1}to{transform:translate3d(100%, 0, 0) skewX(30deg);opacity:0}}.animate__lightSpeedOutRight{animation-name:lightSpeedOutRight;animation-timing-function:ease-in}@keyframes lightSpeedOutLeft{0%{opacity:1}to{transform:translate3d(-100%, 0, 0) skewX(-30deg);opacity:0}}.animate__lightSpeedOutLeft{animation-name:lightSpeedOutLeft;animation-timing-function:ease-in}@keyframes rotateIn{0%{transform:rotate(-200deg);opacity:0}to{transform:translateZ(0);opacity:1}}.animate__rotateIn{animation-name:rotateIn;transform-origin:center}@keyframes rotateInDownLeft{0%{transform:rotate(-45deg);opacity:0}to{transform:translateZ(0);opacity:1}}.animate__rotateInDownLeft{animation-name:rotateInDownLeft;transform-origin:left bottom}@keyframes rotateInDownRight{0%{transform:rotate(45deg);opacity:0}to{transform:translateZ(0);opacity:1}}.animate__rotateInDownRight{animation-name:rotateInDownRight;transform-origin:right bottom}@keyframes rotateInUpLeft{0%{transform:rotate(45deg);opacity:0}to{transform:translateZ(0);opacity:1}}.animate__rotateInUpLeft{animation-name:rotateInUpLeft;transform-origin:left bottom}@keyframes rotateInUpRight{0%{transform:rotate(-90deg);opacity:0}to{transform:translateZ(0);opacity:1}}.animate__rotateInUpRight{animation-name:rotateInUpRight;transform-origin:right bottom}@keyframes rotateOut{0%{opacity:1}to{transform:rotate(200deg);opacity:0}}.animate__rotateOut{animation-name:rotateOut;transform-origin:center}@keyframes rotateOutDownLeft{0%{opacity:1}to{transform:rotate(45deg);opacity:0}}.animate__rotateOutDownLeft{animation-name:rotateOutDownLeft;transform-origin:left bottom}@keyframes rotateOutDownRight{0%{opacity:1}to{transform:rotate(-45deg);opacity:0}}.animate__rotateOutDownRight{animation-name:rotateOutDownRight;transform-origin:right bottom}@keyframes rotateOutUpLeft{0%{opacity:1}to{transform:rotate(-45deg);opacity:0}}.animate__rotateOutUpLeft{animation-name:rotateOutUpLeft;transform-origin:left bottom}@keyframes rotateOutUpRight{0%{opacity:1}to{transform:rotate(90deg);opacity:0}}.animate__rotateOutUpRight{animation-name:rotateOutUpRight;transform-origin:right bottom}@keyframes hinge{0%{animation-timing-function:ease-in-out}20%,60%{transform:rotate(80deg);animation-timing-function:ease-in-out}40%,80%{transform:rotate(60deg);animation-timing-function:ease-in-out;opacity:1}to{transform:translate3d(0, 700px, 0);opacity:0}}.animate__hinge{animation-duration:2s;animation-duration:calc(var(--animate-duration) * 2);animation-name:hinge;transform-origin:top left}@keyframes jackInTheBox{0%{opacity:0;transform:scale(0.1) rotate(30deg);transform-origin:center bottom}50%{transform:rotate(-10deg)}70%{transform:rotate(3deg)}to{opacity:1;transform:scale(1)}}.animate__jackInTheBox{animation-name:jackInTheBox}@keyframes rollIn{0%{opacity:0;transform:translate3d(-100%, 0, 0) rotate(-120deg)}to{opacity:1;transform:translateZ(0)}}.animate__rollIn{animation-name:rollIn}@keyframes rollOut{0%{opacity:1}to{opacity:0;transform:translate3d(100%, 0, 0) rotate(120deg)}}.animate__rollOut{animation-name:rollOut}@keyframes zoomIn{0%{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}50%{opacity:1}}.animate__zoomIn{animation-name:zoomIn}@keyframes zoomInDown{0%{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomInDown{animation-name:zoomInDown}@keyframes zoomInLeft{0%{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomInLeft{animation-name:zoomInLeft}@keyframes zoomInRight{0%{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomInRight{animation-name:zoomInRight}@keyframes zoomInUp{0%{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}60%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomInUp{animation-name:zoomInUp}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;transform:scale3d(0.3, 0.3, 0.3)}to{opacity:0}}.animate__zoomOut{animation-name:zoomOut}@keyframes zoomOutDown{40%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}to{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomOutDown{animation-name:zoomOutDown;transform-origin:center bottom}@keyframes zoomOutLeft{40%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0)}to{opacity:0;transform:scale(0.1) translate3d(-2000px, 0, 0)}}.animate__zoomOutLeft{animation-name:zoomOutLeft;transform-origin:left center}@keyframes zoomOutRight{40%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0)}to{opacity:0;transform:scale(0.1) translate3d(2000px, 0, 0)}}.animate__zoomOutRight{animation-name:zoomOutRight;transform-origin:right center}@keyframes zoomOutUp{40%{opacity:1;transform:scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);animation-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19)}to{opacity:0;transform:scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);animation-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1)}}.animate__zoomOutUp{animation-name:zoomOutUp;transform-origin:center bottom}@keyframes slideInDown{0%{transform:translate3d(0, -100%, 0);visibility:visible}to{transform:translateZ(0)}}.animate__slideInDown{animation-name:slideInDown}@keyframes slideInLeft{0%{transform:translate3d(-100%, 0, 0);visibility:visible}to{transform:translateZ(0)}}.animate__slideInLeft{animation-name:slideInLeft}@keyframes slideInRight{0%{transform:translate3d(100%, 0, 0);visibility:visible}to{transform:translateZ(0)}}.animate__slideInRight{animation-name:slideInRight}@keyframes slideInUp{0%{transform:translate3d(0, 100%, 0);visibility:visible}to{transform:translateZ(0)}}.animate__slideInUp{animation-name:slideInUp}@keyframes slideOutDown{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0, 100%, 0)}}.animate__slideOutDown{animation-name:slideOutDown}@keyframes slideOutLeft{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(-100%, 0, 0)}}.animate__slideOutLeft{animation-name:slideOutLeft}@keyframes slideOutRight{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(100%, 0, 0)}}.animate__slideOutRight{animation-name:slideOutRight}@keyframes slideOutUp{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0, -100%, 0)}}.animate__slideOutUp{animation-name:slideOutUp}:host{display:flex;flex-direction:row;position:absolute;height:100%;min-height:-moz-min-content;min-height:min-content;z-index:var(--theme-z-index-sticky);width:auto;bottom: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 .tabs{height:100%;position:relative;overflow-y:auto;pointer-events:all;-ms-overflow-style:none;scrollbar-width:none}:host .tabs::-webkit-scrollbar{display:none}:host .show-scrollbar{scrollbar-width:inherit}:host .show-scrollbar::-webkit-scrollbar{display:inherit}:host .tabs-shadow-container{overflow:hidden;display:block;position:relative;margin-bottom:0.75rem}:host .tabs--shadow{opacity:0;position:absolute;width:100%;height:0.625rem;background:linear-gradient(var(--theme-color-shadow-1), transparent);pointer-events:none;z-index:var(--theme-z-index-sticky);transition:opacity var(--theme-default-time)}:host .tabs--shadow-top{top:0;background:linear-gradient(var(--theme-color-shadow-1), transparent)}:host .tabs--shadow-bottom{bottom:0;background:linear-gradient(transparent, var(--theme-color-shadow-1))}:host .tabs--shadow--show{opacity:1}:host .menu{display:flex;flex-direction:column;position:relative;width:3.25rem;height:100%;padding-block-end:1rem;overflow:hidden;background-color:var(--theme-nav--background);transition:width var(--theme-default-time) ease-in-out}:host .menu.expanded{box-shadow:var(--theme-navigation--box-shadow)}:host .menu-overlay{display:none;position:absolute;width:calc(100vw - 3.25rem);height:100%;left:3.25rem;z-index:-1;-webkit-backdrop-filter:blur(1rem);backdrop-filter:blur(1rem);background-color:var(--theme-sidebar-overlay-blur);transition:left var(--theme-default-time) ease-in-out}:host .menu-overlay.visible{display:block}:host .menu.expanded{width:16rem}:host .menu-overlay.expanded{width:calc(100vw - 16rem);left:16rem}:host .menu-overlay-container{display:contents}:host .menu-avatar{max-height:3rem}:host .avatar{margin-bottom:2rem}:host #cui-imprint .cui-imprint-product-name{margin-bottom:1rem}:host #cui-imprint .cui-imprint-product-description{margin-bottom:2rem}:host #cui-imprint .cui-imprint-link-container{display:flex;align-items:center}:host .bottom-tab-divider{margin-top:auto}:host .menu-buttons{margin:0.5rem 0 0 0.625rem}:host .menu-buttons>:last-child{margin-bottom:1rem}:host(.breakpoint-sm) .menu:not(.expanded){width:0}:host(.breakpoint-sm) .menu-overlay{left:0;width:100vw}:host(.breakpoint-lg){position:relative}:host(.breakpoint-lg) .menu.expanded{box-shadow:none}:host ::slotted(a[href]){all:unset}";const h=u;const b=class{constructor(e){t(this,e);this.expandChange=a(this,"expandChange",7);this.mapExpandChange=a(this,"mapExpandChange",7);this.isTransitionDisabled=false;this.isVisible=t=>{var a,e;return t.style.display!=="none"&&((e=(a=t.parentElement)===null||a===void 0?void 0:a.parentElement)===null||e===void 0?void 0:e.style.display)!=="none"};this.showSettings=false;this.showAbout=false;this.enableToggleTheme=false;this.enableSettings=true;this.enableMapExpand=false;this.applicationName=undefined;this.applicationDescription="";this.maxVisibleMenuItems=9;this.i18nExpandSidebar="Expand sidebar";this.expand=false;this.startExpanded=false;this.pinned=false;this.i18nLegal="About & legal information";this.i18nSettings="Settings";this.i18nToggleTheme="Toggle theme";this.i18nExpand=" Expand";this.i18nCollapse="Collapse";this.showPinned=false;this.mapExpand=true;this.activeTab=undefined;this.breakpoint="lg";this.itemsScrollShadowTop=false;this.itemsScrollShadowBottom=false;this.applicationLayoutContext=undefined}pinnedChange(t){var a;if(((a=this.applicationLayoutContext)===null||a===void 0?void 0:a.host)==="map-navigation"){console.warn("ix-map-navigation does not support pinning of the menu");return}this.setPinned(this.pinned);if(t){c.disableBreakpointDetection();c.setBreakpoint("lg");return}c.enableBreakpointDetection()}get popoverArea(){return this.hostElement.shadowRoot.querySelector("#popover-area")}get menu(){return this.hostElement.shadowRoot.querySelector(".menu")}get menuItemsContainer(){return this.menu.querySelector(".tabs")}get overlayContainer(){return this.hostElement.shadowRoot.querySelector(".menu-overlay")}get menuItems(){return Array.from(this.hostElement.querySelectorAll('ix-menu-item:not(.internal-tab):not(.home-tab):not(.bottom-tab):not([slot="bottom"])')).filter(this.isVisible)}get menuBottomItems(){return Array.from(this.hostElement.querySelectorAll("ix-menu-item.bottom-tab:not(.internal-tab):not(.home-tab)")).filter(this.isVisible)}get homeTab(){return this.hostElement.querySelector("ix-menu-item.home-tab")}get moreItemsDropdown(){return this.hostElement.shadowRoot.querySelector(".internal-tab ix-dropdown")}get isMoreItemsDropdownEmpty(){return this.hostElement.shadowRoot.querySelectorAll(".internal-tab ix-dropdown .appended").length===0}get moreItemsDropdownItems(){return this.hostElement.shadowRoot.querySelectorAll(".internal-tab ix-dropdown ix-menu-item")}get activeMoreTabContainer(){return this.hostElement.shadowRoot.querySelector(".active-more-tab")}get activeMoreTab(){return this.hostElement.shadowRoot.querySelector(".active-more-tab ix-menu-item")}get aboutPopoverContainer(){return this.hostElement.querySelector(".about-news")}get aboutNewsPopover(){var t;return(t=document.querySelector("ix-menu-about-news"))!==null&&t!==void 0?t:this.hostElement.querySelector("ix-menu-about-news")}get aboutTab(){return this.hostElement.shadowRoot.querySelector("#aboutAndLegal")}get about(){return this.hostElement.querySelector("ix-menu-about")}get settings(){return this.hostElement.querySelector("ix-menu-settings")}get isSettingsEmpty(){return Array.from(this.hostElement.shadowRoot.querySelectorAll("ix-menu-settings-item")).length===0}get tabsContainer(){return this.hostElement}componentDidLoad(){requestAnimationFrame((()=>{this.handleOverflowIndicator()}));if(this.pinned){this.pinnedChange(this.pinned)}}componentWillLoad(){s(this.hostElement,m,(t=>{this.applicationLayoutContext=t;if(t.hideHeader===true){this.onBreakpointChange("md");return}this.onBreakpointChange(c.breakpoint)}),true);f.register(this.hostElement);c.onChange.on((t=>this.onBreakpointChange(t)));this.onBreakpointChange(c.breakpoint,true)}componentWillRender(){this.appendTabs()}componentDidRender(){this.appendFragments()}setPinned(t){this.showPinned=t;f.setIsPinned(t)}onBreakpointChange(t,a=false){var e;if(!this.applicationLayoutContext&&t==="sm"){return}if(((e=this.applicationLayoutContext)===null||e===void 0?void 0:e.host)==="map-navigation"){this.breakpoint="md";return}if(!this.applicationLayoutContext){return}if(this.applicationLayoutContext.hideHeader&&t==="sm"){return}this.setPinned(t==="lg");if(a||t!==this.breakpoint)this.toggleMenu(t==="lg"&&this.startExpanded);this.breakpoint=t}appendFragments(){this.appendAboutNewsPopover()}resetActiveTab(){this.activeTab=null}appendTabs(){this.activeTab=null}getAboutPopoverVerticalPosition(){const t=12;const a=6;const e=this.aboutTab.getBoundingClientRect();const n=window.innerHeight-(e.bottom-e.height/2+t/2+a);return l(n)}appendAboutNewsPopover(){var t;if(!this.aboutNewsPopover){return}this.aboutNewsPopover.style.bottom=this.getAboutPopoverVerticalPosition();if(!((t=this.popoverArea)===null||t===void 0?void 0:t.contains(this.aboutNewsPopover))){const t=()=>{var t;if(((t=this.aboutNewsPopover)===null||t===void 0?void 0:t.aboutItemLabel)&&this.about){this.about.activeTabLabel=this.aboutNewsPopover.aboutItemLabel;this.toggleAbout(true)}};this.aboutNewsPopover.addEventListener("showMore",t.bind(this));document.body.appendChild(this.aboutNewsPopover)}}async toggleMapExpand(t){if(t!==undefined){this.mapExpand=t}else{this.mapExpand=!this.mapExpand}}async toggleMenu(t){if(t!==undefined){this.expand=t}else{this.expand=!this.expand}if(this.aboutNewsPopover){this.aboutNewsPopover.expanded=this.expand}this.expandChange.emit(this.expand);this.isTransitionDisabled=false;this.checkTransition();if(this.breakpoint=="sm"&&this.expand){setTimeout((()=>{this.handleOverflowIndicator()}),100)}}checkTransition(){const t=this.overlayContainer;if(!t){return}if(this.isTransitionDisabled){t.style.transitionProperty="left"}else{t.style.transitionProperty="all"}}isOverlayVisible(){return this.showAbout||this.showSettings}async toggleSettings(t){if(!this.settings){return}if(!this.isOverlayVisible()){this.animateOverlayFadeIn()}if(t){this.resetOverlay();this.showSettings=t;this.settings.show=this.showSettings}else{this.onOverlayClose()}}async toggleAbout(t){if(!this.about){return}if(!this.isOverlayVisible()){this.animateOverlayFadeIn()}if(t){this.resetOverlay();this.showAbout=t;this.about.show=this.showAbout}else{this.onOverlayClose()}}resetOverlay(){this.showSettings=false;this.showAbout=false;if(this.settings){this.settings.show=false}if(this.about){this.about.show=false}}getCollapseText(){return this.mapExpand?this.i18nCollapse:this.i18nExpand}getCollapseIcon(){return this.mapExpand?"navigation-left":"navigation-right"}isMenuItemClicked(t){if(t.target instanceof HTMLElement){return t.target.tagName==="IX-MENU-ITEM"}return false}handleOverflowIndicator(){const{clientHeight:t,scrollTop:a,scrollHeight:e}=this.menuItemsContainer;this.itemsScrollShadowTop=a>0;this.itemsScrollShadowBottom=Math.round(a+t)<e}onOverlayClose(){this.animateOverlayFadeOut((()=>{this.resetOverlay()}))}animateOverlayFadeIn(){requestAnimationFrame((()=>{o({targets:this.overlayContainer,duration:300,backdropFilter:[0,"blur(1rem)"],translateX:["-4rem",0],opacity:[0,1],easing:"easeInSine",begin:()=>{if(this.showPinned){return}this.toggleMenu(false)}})}))}animateOverlayFadeOut(t){requestAnimationFrame((()=>{o({targets:this.overlayContainer,duration:300,backdropFilter:["blur(1rem)",0],translateX:[0,"-4rem"],opacity:[1,0],easing:"easeInSine",complete:()=>t()})}))}onMenuItemsClick(t){if(this.isMenuItemClicked(t)){if(!this.showPinned){this.toggleMenu(false)}this.onOverlayClose()}}isHiddenFromViewport(){return this.breakpoint==="sm"&&this.expand===false}sidebarToggle(){this.mapExpandChange.emit(this.mapExpand);this.hostElement.dispatchEvent(new p(this.mapExpand))}render(){var t;return e(n,{key:"e7defd239740aa843f696425e1bf6190a88e6e1e",class:{expanded:this.expand,[`breakpoint-${this.breakpoint}`]:true},slot:"menu"},e("aside",{key:"06cd01136edc2e3361258e3b9d4c3f87e1fa5ae1",class:{menu:true,expanded:this.expand},onClick:()=>{this.resetActiveTab()}},e("div",{key:"fc10b144e65ab5bec270d2b26baa459684771e34",class:"menu-buttons"},this.breakpoint!=="sm"&&e("ix-menu-expand-icon",{key:"dbb35885770c179ca73220582f30c2a086b8cea6",breakpoint:this.breakpoint,expanded:this.expand,pinned:this.pinned,class:"menu-expand-icon",ixAriaLabel:this.i18nExpandSidebar,onClick:async()=>this.toggleMenu()}),this.breakpoint==="sm"&&this.applicationLayoutContext.appSwitchConfig&&e("ix-icon-button",{key:"7aeb35fb2b7ccbdd96e7ae1fdb0321faf597c3a7",onClick:()=>r(this.applicationLayoutContext.appSwitchConfig),icon:"apps",ghost:true})),e("div",{key:"10125d245ff0c0a643a0772655f07f5ca695486c",id:"menu-tabs",style:{display:"contents"},onClick:t=>this.onMenuItemsClick(t)},e("div",{key:"75d98f79a5c68a33a18c712d3eb0a1ee0323d13f",class:"tabs-shadow-container"},e("div",{key:"b80168bc19865f29458869b61861fe548b87ead9",class:{"tabs--shadow":true,"tabs--shadow-top":true,"tabs--shadow--show":this.itemsScrollShadowTop}}),e("div",{key:"42999103b37d261996352e994a73b85fca1172b8",class:{tabs:true,"show-scrollbar":this.expand},onScroll:()=>this.handleOverflowIndicator()},e("div",{key:"9fc2fb36030cbe331114a1ad51d80ae2e2f5aa03",class:"menu-avatar"},e("slot",{key:"5fd4c7d5f73e016e6be2d30f56852b5c7a5097a3",name:"ix-menu-avatar"})),e("slot",{key:"8a9212742968c99fb71fe5ebc102fb8a0a5a2d69",name:"home"}),this.breakpoint!=="sm"||!this.isHiddenFromViewport()?e("slot",null):null),e("div",{key:"2a2db4c5ba3a820211a7e011a1b9b85509840b4d",class:{"tabs--shadow":true,"tabs--shadow-bottom":true,"tabs--shadow--show":this.itemsScrollShadowBottom}}))),e("div",{key:"17bdfc3b3fcf103028532e7449e1fcef984cca55",class:"bottom-tab-divider"}),this.settings?e("ix-menu-item",{disabled:this.isHiddenFromViewport(),id:"settings",class:{"internal-tab":true,"bottom-tab":true,active:this.showSettings},icon:"cogwheel",onClick:async()=>this.toggleSettings(!this.showSettings),label:this.i18nSettings}):null,e("div",{key:"e5bb42c938621a916d9acc0b9a9c250dff917444",onClick:t=>this.onMenuItemsClick(t)},e("slot",{key:"32d4dfdc9676e6fe79d6b860cf26e37df95883d5",name:"bottom"})),e("div",{key:"cfc8c621fbc09946ee3990e4f11ae6cd4064a45c",id:"popover-area"}),this.about?e("ix-menu-item",{disabled:this.isHiddenFromViewport(),id:"aboutAndLegal",class:{"internal-tab":true,"bottom-tab":true,active:this.showAbout},icon:"info",onClick:async()=>this.toggleAbout(!this.showAbout),label:this.i18nLegal}):null,this.enableToggleTheme?e("ix-menu-item",{disabled:this.isHiddenFromViewport(),id:"toggleTheme",onClick:()=>d.toggleMode(),class:"internal-tab bottom-tab",icon:"light-dark",label:this.i18nToggleTheme}):null,this.enableMapExpand||((t=this.applicationLayoutContext)===null||t===void 0?void 0:t.sidebar)?e("ix-menu-item",{disabled:this.isHiddenFromViewport(),id:"menu-collapse",onClick:()=>this.sidebarToggle(),class:"internal-tab bottom-tab",icon:`${this.getCollapseIcon()}`,label:this.getCollapseText()}):null),e("div",{key:"cea5ee338101b0c15273fa853bab20f3d96347e0",class:{"menu-overlay":true,visible:this.isOverlayVisible(),expanded:this.expand},onTransitionEnd:()=>{this.isTransitionDisabled=true;this.checkTransition()}},e("div",{key:"fddd5046935bd954af9e06984b297ec79ed268f1",class:"menu-overlay-container"},this.showSettings?e("slot",{name:"ix-menu-settings"}):null),e("div",{key:"7a23750be2d0ae1b26dcf183403eb57d4b7856f3",class:"menu-overlay-container"},this.showAbout?e("slot",{name:"ix-menu-about"}):null)))}get hostElement(){return i(this)}static get watchers(){return{pinned:["pinnedChange"]}}};b.style=h;export{b as ix_menu};
+//# sourceMappingURL=p-9ec92185.entry.js.map