@siemens/ix 2.0.0-beta.1 → 2.0.0

package/dist/siemens-ix/p-da133606.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["expandingSearchCss","ExpandingSearch","expandInput","setTimeout","this","focusTextInput","expanded","collapseInput","isFieldChanged","clearInput","value","onChange","e","target","valueChange","emit","constructor","hostRef","bind","_a","textInput","focus","clearClicked","render","h","Host","class","fullWidth","size","icon","ghost","variant","onClick","tabindex","color","hasFocus","undefined","collapsed","input","ref","el","placeholder","type","onBlur","onFocus","onInput"],"sources":["./src/components/expanding-search/expanding-search.scss?tag=ix-expanding-search&encapsulation=shadow","./src/components/expanding-search/expanding-search.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 'common-variables';\n@import 'legacy/components/forms';\n@import 'mixins/shadow-dom/component';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n$container-width: 11.5625rem;\n\n:host {\n  @include ix-component;\n\n  display: inline-flex;\n  width: auto;\n  height: $x-large-space;\n  align-items: center;\n  justify-content: space-between;\n  position: relative;\n\n  .input-container {\n    transition: all 0.3s ease-in-out;\n  }\n\n  input {\n    box-shadow: var(--theme-input--box-shadow);\n    cursor: auto !important;\n    width: 100%;\n  }\n\n  .expanded {\n    width: $container-width;\n\n    &.fullWidth {\n      width: 100%;\n    }\n  }\n\n  .collapsed {\n    width: $large-space;\n    border: none;\n  }\n\n  /*collapsed view*/\n  .btn-search-icon {\n    align-self: center;\n    margin: auto;\n    position: relative;\n  }\n\n  .btn-search {\n    display: flex;\n    max-width: $x-large-space;\n    max-height: $x-large-space;\n    border-radius: var(--theme-input--border-radius);\n    transition: all 0.15s ease-in-out;\n    z-index: 1;\n    align-items: center;\n    position: relative;\n    border: none;\n\n    @include hover {\n      border-color: transparent;\n    }\n\n    @include active {\n      border-color: transparent;\n    }\n\n    @include focus {\n      outline: none;\n    }\n\n    @include focus-visible {\n      outline: var(--focus--border-color);\n      outline-width: 1px;\n      outline-style: solid;\n    }\n  }\n\n  .btn-search.btn-search--expanded {\n    margin-left: 0.25rem;\n    pointer-events: none;\n  }\n\n  .btn-search:active {\n    width: $x-large-space;\n    height: $x-large-space;\n    border-radius: var(--theme-input--border-radius);\n    border: var(--theme-std-bdr-1) !important;\n  }\n\n  /*expanded view*/\n  .input-container {\n    display: flex;\n    position: absolute;\n    align-items: center;\n    flex-wrap: nowrap;\n  }\n\n  .btn-clear {\n    position: absolute;\n    border-radius: var(--theme-input--border-radius);\n    right: 0px;\n    margin-right: 0.25rem;\n  }\n\n  .input {\n    padding-left: $x-large-space !important;\n    padding-right: 2.5rem !important;\n  }\n\n  .opacity-before {\n    opacity: 0;\n  }\n\n  .opacity-after {\n    opacity: 1;\n  }\n}\n\n:host(.right-position) {\n  width: $container-width !important;\n}\n\n:host(.right-position.fullWidth) {\n  width: 100% !important;\n\n  .fullWidth {\n    width: 100% !important;\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 {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-expanding-search',\n  styleUrl: 'expanding-search.scss',\n  shadow: true,\n})\nexport class ExpandingSearch {\n  /**\n   * Search icon\n   */\n  @Prop() icon = 'search';\n\n  /**\n   * Placeholder text\n   */\n  @Prop() placeholder = 'Enter text here';\n\n  /**\n   * Default value\n   */\n  @Prop({ mutable: true }) value = '';\n\n  /**\n   * If true the search field will fill all available horizontal space of it's parent container when expanded.\n   * @since 1.6.0\n   */\n  @Prop() fullWidth = false;\n\n  @State() isFieldChanged = false;\n  @State() expanded = false;\n  @State() hasFocus = false;\n\n  /**\n   * Value changed\n   */\n  @Event() valueChange: EventEmitter<string>;\n\n  private expandInput() {\n    setTimeout(this.focusTextInput, 300);\n    this.expanded = true;\n  }\n\n  private collapseInput() {\n    if (!this.isFieldChanged && this.expanded) {\n      this.expanded = false;\n    }\n  }\n\n  private clearInput() {\n    this.value = '';\n    this.isFieldChanged = false;\n  }\n\n  private onChange(e: InputEvent) {\n    this.value = (e.target as HTMLInputElement).value;\n    if (this.isFieldChanged && this.value === '') {\n      this.isFieldChanged = false;\n    } else {\n      this.isFieldChanged = true;\n    }\n\n    this.valueChange.emit(this.value);\n  }\n\n  private textInput?: HTMLInputElement;\n\n  constructor() {\n    this.focusTextInput = this.focusTextInput.bind(this);\n  }\n\n  private focusTextInput() {\n    this.textInput?.focus();\n  }\n\n  private clearClicked() {\n    this.clearInput();\n    this.textInput?.focus();\n    this.valueChange.emit(this.value);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.expanded,\n          'right-position': this.expanded,\n          fullWidth: this.fullWidth,\n        }}\n      >\n        <ix-icon-button\n          size={this.expanded ? '16' : '24'}\n          icon={this.icon}\n          ghost\n          variant=\"primary\"\n          data-testid=\"button\"\n          onClick={() => this.expandInput()}\n          tabindex={this.expanded ? -1 : 0}\n          color={this.hasFocus ? 'input-search-icon--color--focus' : undefined}\n          class={{\n            'btn-search': true,\n            'btn-search--expanded': this.expanded,\n          }}\n        ></ix-icon-button>\n\n        <div\n          class={{\n            expanded: this.expanded,\n            fullWidth: this.fullWidth,\n            collapsed: !this.expanded,\n            'disable-pointer': !this.expanded,\n            'input-container': true,\n          }}\n          data-testid=\"input-wrapper\"\n        >\n          <input\n            class={{\n              'form-control': true,\n              input: this.expanded,\n              'disable-pointer': !this.expanded,\n              'opacity-before': !this.expanded,\n              'opacity-after': this.expanded,\n            }}\n            ref={(el) => (this.textInput = el)}\n            data-testid=\"input\"\n            placeholder={this.placeholder}\n            type=\"text\"\n            value={this.value}\n            onBlur={() => {\n              this.collapseInput();\n              this.hasFocus = false;\n            }}\n            onFocus={() => (this.hasFocus = true)}\n            onInput={(e: InputEvent) => this.onChange(e)}\n            tabindex={this.expanded ? 0 : -1}\n          />\n\n          {this.isFieldChanged ? (\n            <ix-icon-button\n              class=\"btn-clear\"\n              icon=\"clear\"\n              ghost={true}\n              size=\"16\"\n              data-testid=\"clear-button\"\n              onClick={() => this.clearClicked()}\n            />\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAqB,mqT,MCwBdC,EAAe,MA+BlBC,cACNC,WAAWC,KAAKC,eAAgB,KAChCD,KAAKE,SAAW,I,CAGVC,gBACN,IAAKH,KAAKI,gBAAkBJ,KAAKE,SAAU,CACzCF,KAAKE,SAAW,K,EAIZG,aACNL,KAAKM,MAAQ,GACbN,KAAKI,eAAiB,K,CAGhBG,SAASC,GACfR,KAAKM,MAASE,EAAEC,OAA4BH,MAC5C,GAAIN,KAAKI,gBAAkBJ,KAAKM,QAAU,GAAI,CAC5CN,KAAKI,eAAiB,K,KACjB,CACLJ,KAAKI,eAAiB,I,CAGxBJ,KAAKU,YAAYC,KAAKX,KAAKM,M,CAK7BM,YAAAC,G,6DAxDe,S,iBAKO,kB,WAKW,G,eAMb,M,oBAEM,M,cACN,M,cACA,MAqClBb,KAAKC,eAAiBD,KAAKC,eAAea,KAAKd,K,CAGzCC,iB,OACNc,EAAAf,KAAKgB,aAAS,MAAAD,SAAA,SAAAA,EAAEE,O,CAGVC,e,MACNlB,KAAKK,cACLU,EAAAf,KAAKgB,aAAS,MAAAD,SAAA,SAAAA,EAAEE,QAChBjB,KAAKU,YAAYC,KAAKX,KAAKM,M,CAG7Ba,SACE,OACEC,EAACC,EAAI,CACHC,MAAO,CACLpB,SAAUF,KAAKE,SACf,iBAAkBF,KAAKE,SACvBqB,UAAWvB,KAAKuB,YAGlBH,EAAA,kBACEI,KAAMxB,KAAKE,SAAW,KAAO,KAC7BuB,KAAMzB,KAAKyB,KACXC,MAAK,KACLC,QAAQ,UAAS,cACL,SACZC,QAAS,IAAM5B,KAAKF,cACpB+B,SAAU7B,KAAKE,UAAY,EAAI,EAC/B4B,MAAO9B,KAAK+B,SAAW,kCAAoCC,UAC3DV,MAAO,CACL,aAAc,KACd,uBAAwBtB,KAAKE,YAIjCkB,EAAA,OACEE,MAAO,CACLpB,SAAUF,KAAKE,SACfqB,UAAWvB,KAAKuB,UAChBU,WAAYjC,KAAKE,SACjB,mBAAoBF,KAAKE,SACzB,kBAAmB,MACpB,cACW,iBAEZkB,EAAA,SACEE,MAAO,CACL,eAAgB,KAChBY,MAAOlC,KAAKE,SACZ,mBAAoBF,KAAKE,SACzB,kBAAmBF,KAAKE,SACxB,gBAAiBF,KAAKE,UAExBiC,IAAMC,GAAQpC,KAAKgB,UAAYoB,EAAG,cACtB,QACZC,YAAarC,KAAKqC,YAClBC,KAAK,OACLhC,MAAON,KAAKM,MACZiC,OAAQ,KACNvC,KAAKG,gBACLH,KAAK+B,SAAW,KAAK,EAEvBS,QAAS,IAAOxC,KAAK+B,SAAW,KAChCU,QAAUjC,GAAkBR,KAAKO,SAASC,GAC1CqB,SAAU7B,KAAKE,SAAW,GAAK,IAGhCF,KAAKI,eACJgB,EAAA,kBACEE,MAAM,YACNG,KAAK,QACLC,MAAO,KACPF,KAAK,KAAI,cACG,eACZI,QAAS,IAAM5B,KAAKkB,iBAEpB,M"}
+{"version":3,"names":["expandingSearchCss","ExpandingSearch","expandInput","setTimeout","this","focusTextInput","expanded","collapseInput","isFieldChanged","clearInput","value","onChange","e","target","valueChange","emit","constructor","hostRef","bind","_a","textInput","focus","clearClicked","render","h","Host","class","fullWidth","size","icon","ghost","variant","onClick","tabindex","color","hasFocus","undefined","collapsed","input","ref","el","placeholder","type","onBlur","onFocus","onInput"],"sources":["./src/components/expanding-search/expanding-search.scss?tag=ix-expanding-search&encapsulation=shadow","./src/components/expanding-search/expanding-search.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 'common-variables';\n@import 'legacy/components/forms';\n@import 'mixins/shadow-dom/component';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n$container-width: 11.5625rem;\n\n:host {\n  @include ix-component;\n\n  display: inline-flex;\n  width: auto;\n  height: $x-large-space;\n  align-items: center;\n  justify-content: space-between;\n  position: relative;\n\n  .input-container {\n    transition: all 0.3s ease-in-out;\n  }\n\n  input {\n    box-shadow: var(--theme-input--box-shadow);\n    cursor: auto !important;\n    width: 100%;\n  }\n\n  .expanded {\n    width: $container-width;\n\n    &.fullWidth {\n      width: 100%;\n    }\n  }\n\n  .collapsed {\n    width: $large-space;\n    border: none;\n  }\n\n  /*collapsed view*/\n  .btn-search-icon {\n    align-self: center;\n    margin: auto;\n    position: relative;\n  }\n\n  .btn-search {\n    display: flex;\n    max-width: $x-large-space;\n    max-height: $x-large-space;\n    border-radius: var(--theme-input--border-radius);\n    transition: all 0.15s ease-in-out;\n    z-index: 1;\n    align-items: center;\n    position: relative;\n    border: none;\n\n    @include hover {\n      border-color: transparent;\n    }\n\n    @include active {\n      border-color: transparent;\n    }\n\n    @include focus {\n      outline: none;\n    }\n\n    @include focus-visible {\n      outline: var(--focus--border-color);\n      outline-width: 1px;\n      outline-style: solid;\n    }\n  }\n\n  .btn-search.btn-search--expanded {\n    margin-left: 0.25rem;\n    pointer-events: none;\n  }\n\n  .btn-search:active {\n    width: $x-large-space;\n    height: $x-large-space;\n    border-radius: var(--theme-input--border-radius);\n    border: var(--theme-std-bdr-1) !important;\n  }\n\n  /*expanded view*/\n  .input-container {\n    display: flex;\n    position: absolute;\n    align-items: center;\n    flex-wrap: nowrap;\n  }\n\n  .btn-clear {\n    position: absolute;\n    border-radius: var(--theme-input--border-radius);\n    right: 0px;\n    margin-right: 0.25rem;\n  }\n\n  .input {\n    padding-left: $x-large-space !important;\n    padding-right: 2.5rem !important;\n  }\n\n  .opacity-before {\n    opacity: 0;\n  }\n\n  .opacity-after {\n    opacity: 1;\n  }\n}\n\n:host(.right-position) {\n  width: $container-width !important;\n}\n\n:host(.right-position.fullWidth) {\n  width: 100% !important;\n\n  .fullWidth {\n    width: 100% !important;\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 {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-expanding-search',\n  styleUrl: 'expanding-search.scss',\n  shadow: true,\n})\nexport class ExpandingSearch {\n  /**\n   * Search icon\n   */\n  @Prop() icon = 'search';\n\n  /**\n   * Placeholder text\n   */\n  @Prop() placeholder = 'Enter text here';\n\n  /**\n   * Default value\n   */\n  @Prop({ mutable: true }) value = '';\n\n  /**\n   * If true the search field will fill all available horizontal space of it's parent container when expanded.\n   * @since 1.6.0\n   */\n  @Prop() fullWidth = false;\n\n  @State() isFieldChanged = false;\n  @State() expanded = false;\n  @State() hasFocus = false;\n\n  /**\n   * Value changed\n   */\n  @Event() valueChange: EventEmitter<string>;\n\n  private expandInput() {\n    setTimeout(this.focusTextInput, 300);\n    this.expanded = true;\n  }\n\n  private collapseInput() {\n    if (!this.isFieldChanged && this.expanded) {\n      this.expanded = false;\n    }\n  }\n\n  private clearInput() {\n    this.value = '';\n    this.isFieldChanged = false;\n  }\n\n  private onChange(e: InputEvent) {\n    this.value = (e.target as HTMLInputElement).value;\n    if (this.isFieldChanged && this.value === '') {\n      this.isFieldChanged = false;\n    } else {\n      this.isFieldChanged = true;\n    }\n\n    this.valueChange.emit(this.value);\n  }\n\n  private textInput?: HTMLInputElement;\n\n  constructor() {\n    this.focusTextInput = this.focusTextInput.bind(this);\n  }\n\n  private focusTextInput() {\n    this.textInput?.focus();\n  }\n\n  private clearClicked() {\n    this.clearInput();\n    this.textInput?.focus();\n    this.valueChange.emit(this.value);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.expanded,\n          'right-position': this.expanded,\n          fullWidth: this.fullWidth,\n        }}\n      >\n        <ix-icon-button\n          size={this.expanded ? '16' : '24'}\n          icon={this.icon}\n          ghost\n          variant=\"primary\"\n          data-testid=\"button\"\n          onClick={() => this.expandInput()}\n          tabindex={this.expanded ? -1 : 0}\n          color={this.hasFocus ? 'input-search-icon--color--focus' : undefined}\n          class={{\n            'btn-search': true,\n            'btn-search--expanded': this.expanded,\n          }}\n        ></ix-icon-button>\n\n        <div\n          class={{\n            expanded: this.expanded,\n            fullWidth: this.fullWidth,\n            collapsed: !this.expanded,\n            'disable-pointer': !this.expanded,\n            'input-container': true,\n          }}\n          data-testid=\"input-wrapper\"\n        >\n          <input\n            class={{\n              'form-control': true,\n              input: this.expanded,\n              'disable-pointer': !this.expanded,\n              'opacity-before': !this.expanded,\n              'opacity-after': this.expanded,\n            }}\n            ref={(el) => (this.textInput = el)}\n            data-testid=\"input\"\n            placeholder={this.placeholder}\n            type=\"text\"\n            value={this.value}\n            onBlur={() => {\n              this.collapseInput();\n              this.hasFocus = false;\n            }}\n            onFocus={() => (this.hasFocus = true)}\n            onInput={(e: InputEvent) => this.onChange(e)}\n            tabindex={this.expanded ? 0 : -1}\n          />\n\n          {this.isFieldChanged ? (\n            <ix-icon-button\n              class=\"btn-clear\"\n              icon={'clear'}\n              ghost={true}\n              size=\"16\"\n              data-testid=\"clear-button\"\n              onClick={() => this.clearClicked()}\n            />\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAqB,mqT,MCwBdC,EAAe,MA+BlBC,cACNC,WAAWC,KAAKC,eAAgB,KAChCD,KAAKE,SAAW,I,CAGVC,gBACN,IAAKH,KAAKI,gBAAkBJ,KAAKE,SAAU,CACzCF,KAAKE,SAAW,K,EAIZG,aACNL,KAAKM,MAAQ,GACbN,KAAKI,eAAiB,K,CAGhBG,SAASC,GACfR,KAAKM,MAASE,EAAEC,OAA4BH,MAC5C,GAAIN,KAAKI,gBAAkBJ,KAAKM,QAAU,GAAI,CAC5CN,KAAKI,eAAiB,K,KACjB,CACLJ,KAAKI,eAAiB,I,CAGxBJ,KAAKU,YAAYC,KAAKX,KAAKM,M,CAK7BM,YAAAC,G,6DAxDe,S,iBAKO,kB,WAKW,G,eAMb,M,oBAEM,M,cACN,M,cACA,MAqClBb,KAAKC,eAAiBD,KAAKC,eAAea,KAAKd,K,CAGzCC,iB,OACNc,EAAAf,KAAKgB,aAAS,MAAAD,SAAA,SAAAA,EAAEE,O,CAGVC,e,MACNlB,KAAKK,cACLU,EAAAf,KAAKgB,aAAS,MAAAD,SAAA,SAAAA,EAAEE,QAChBjB,KAAKU,YAAYC,KAAKX,KAAKM,M,CAG7Ba,SACE,OACEC,EAACC,EAAI,CACHC,MAAO,CACLpB,SAAUF,KAAKE,SACf,iBAAkBF,KAAKE,SACvBqB,UAAWvB,KAAKuB,YAGlBH,EAAA,kBACEI,KAAMxB,KAAKE,SAAW,KAAO,KAC7BuB,KAAMzB,KAAKyB,KACXC,MAAK,KACLC,QAAQ,UAAS,cACL,SACZC,QAAS,IAAM5B,KAAKF,cACpB+B,SAAU7B,KAAKE,UAAY,EAAI,EAC/B4B,MAAO9B,KAAK+B,SAAW,kCAAoCC,UAC3DV,MAAO,CACL,aAAc,KACd,uBAAwBtB,KAAKE,YAIjCkB,EAAA,OACEE,MAAO,CACLpB,SAAUF,KAAKE,SACfqB,UAAWvB,KAAKuB,UAChBU,WAAYjC,KAAKE,SACjB,mBAAoBF,KAAKE,SACzB,kBAAmB,MACpB,cACW,iBAEZkB,EAAA,SACEE,MAAO,CACL,eAAgB,KAChBY,MAAOlC,KAAKE,SACZ,mBAAoBF,KAAKE,SACzB,kBAAmBF,KAAKE,SACxB,gBAAiBF,KAAKE,UAExBiC,IAAMC,GAAQpC,KAAKgB,UAAYoB,EAAG,cACtB,QACZC,YAAarC,KAAKqC,YAClBC,KAAK,OACLhC,MAAON,KAAKM,MACZiC,OAAQ,KACNvC,KAAKG,gBACLH,KAAK+B,SAAW,KAAK,EAEvBS,QAAS,IAAOxC,KAAK+B,SAAW,KAChCU,QAAUjC,GAAkBR,KAAKO,SAASC,GAC1CqB,SAAU7B,KAAKE,SAAW,GAAK,IAGhCF,KAAKI,eACJgB,EAAA,kBACEE,MAAM,YACNG,KAAM,QACNC,MAAO,KACPF,KAAK,KAAI,cACG,eACZI,QAAS,IAAM5B,KAAKkB,iBAEpB,M"}

package/dist/siemens-ix/p-dcb957d8.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as a,h as e,H as n,g as i}from"./p-76a509c7.js";import{a as o}from"./p-810b5232.js";import{a as r,A as s}from"./p-85f39bd4.js";import{a as m,m as l}from"./p-5d172daa.js";import{a as c}from"./p-21aa3602.js";import{t as f}from"./p-9a05ac00.js";import"./p-9ee41861.js";import"./p-20e12c7e.js";class d extends Event{constructor(t){super("application-sidebar-toggle",{bubbles:true,composed:true});this.force=t}}const p="/*!\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{-webkit-backface-visibility:visible;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{-webkit-backface-visibility:visible !important;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{-webkit-backface-visibility:visible !important;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;-webkit-backface-visibility:visible !important;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);-webkit-backface-visibility:visible !important;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:22.75rem;z-index:var(--theme-z-index-sticky);width:auto;bottom:0px}: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:none}:host .tabs::-webkit-scrollbar{display:none}:host .tabs-shadow-container{overflow:hidden;display:block;position:relative;margin-bottom:2rem}: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:0px;background:linear-gradient(var(--theme-color-shadow-1), transparent)}:host .tabs--shadow-bottom{bottom:0px;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%;-webkit-padding-after:1rem;padding-block-end:1rem;overflow:hidden;background-color:var(--theme-nav--background);transition:width var(--animate-duration) ease-in-out}:host .menu.expanded{box-shadow:var(--theme-navigation--box-shadow)}:host .menu .burger-menu{margin:0.75rem 0 1rem 0.35rem}: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(--animate-duration) 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(.breakpoint-sm) .menu:not(.expanded){width:0}:host(.breakpoint-sm) .menu{padding-top:2rem}:host(.breakpoint-sm) .menu .burger-menu{display:none}:host(.breakpoint-sm) .menu-overlay{left:0px;width:100vw}:host(.breakpoint-lg){position:relative}:host(.breakpoint-lg) .menu.expanded{box-shadow:none}:host ::slotted(a[href]){all:unset}";const u=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.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){m.disableBreakpointDetection();m.setBreakpoint("lg");return}m.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(){r(this.hostElement,s,(t=>{this.applicationLayoutContext=t;if(t.hideHeader===true){this.onBreakpointChange("md");return}this.onBreakpointChange(m.breakpoint)}),true);l.register(this.hostElement);m.onChange.on((t=>this.onBreakpointChange(t)));this.onBreakpointChange(m.breakpoint)}componentWillRender(){this.appendTabs()}componentDidRender(){this.appendFragments()}setPinned(t){this.showPinned=t;l.setIsPinned(t)}onBreakpointChange(t){var a;if(!this.applicationLayoutContext&&t==="sm"){return}if(((a=this.applicationLayoutContext)===null||a===void 0?void 0:a.host)==="map-navigation"){this.breakpoint="md";return}if(!this.applicationLayoutContext){return}if(this.applicationLayoutContext.hideHeader&&t==="sm"){return}this.breakpoint=t;if(this.breakpoint==="lg"){this.setPinned(true);this.toggleMenu(true);return}this.setPinned(false);this.toggleMenu(false)}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 c(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()}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 d(this.mapExpand))}render(){var t;return e(n,{class:{expanded:this.expand,[`breakpoint-${this.breakpoint}`]:true},slot:"menu"},e("aside",{class:{menu:true,expanded:this.expand},onClick:()=>{this.resetActiveTab()}},e("ix-burger-menu",{onClick:async()=>this.toggleMenu(),expanded:this.expand,ixAriaLabel:this.i18nExpandSidebar,pinned:this.showPinned,class:{"burger-menu":true}}),e("div",{class:"menu-avatar"},e("slot",{name:"ix-menu-avatar"})),e("div",{id:"menu-tabs",style:{display:"contents"},onClick:t=>this.onMenuItemsClick(t)},e("div",{class:"tabs-top"},e("slot",{name:"home"})),e("div",{class:"tabs-shadow-container"},e("div",{class:{"tabs--shadow":true,"tabs--shadow-top":true,"tabs--shadow--show":this.itemsScrollShadowTop}}),e("div",{class:"tabs",onScroll:()=>this.handleOverflowIndicator()},this.breakpoint!=="sm"||!this.isHiddenFromViewport()?e("slot",null):null),e("div",{class:{"tabs--shadow":true,"tabs--shadow-bottom":true,"tabs--shadow--show":this.itemsScrollShadowBottom}}))),e("div",{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)},this.i18nSettings):null,e("div",{onClick:t=>this.onMenuItemsClick(t)},e("slot",{name:"bottom"})),e("div",{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)},this.i18nLegal):null,this.enableToggleTheme?e("ix-menu-item",{disabled:this.isHiddenFromViewport(),id:"toggleTheme",onClick:()=>f.toggleMode(),class:"internal-tab bottom-tab",icon:"bulb"},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()}`},this.getCollapseText()):null),e("div",{class:{"menu-overlay":true,visible:this.isOverlayVisible(),expanded:this.expand},onTransitionEnd:()=>{this.isTransitionDisabled=true;this.checkTransition()}},e("div",{class:"menu-overlay-container"},this.showSettings?e("slot",{name:"ix-menu-settings"}):null),e("div",{class:"menu-overlay-container"},this.showAbout?e("slot",{name:"ix-menu-about"}):null)))}get hostElement(){return i(this)}static get watchers(){return{pinned:["pinnedChange"]}}};u.style=p;export{u as ix_menu};
+//# sourceMappingURL=p-dcb957d8.entry.js.map

package/dist/siemens-ix/p-dcb957d8.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ApplicationSidebarToggleEvent","Event","constructor","force","super","bubbles","composed","this","menuCss","Menu","isTransitionDisabled","isVisible","elm","style","display","_b","_a","parentElement","pinnedChange","newPinned","applicationLayoutContext","host","console","warn","setPinned","pinned","applicationLayoutService","disableBreakpointDetection","setBreakpoint","enableBreakpointDetection","popoverArea","hostElement","shadowRoot","querySelector","menu","menuItemsContainer","overlayContainer","menuItems","Array","from","querySelectorAll","filter","menuBottomItems","homeTab","moreItemsDropdown","isMoreItemsDropdownEmpty","length","moreItemsDropdownItems","activeMoreTabContainer","activeMoreTab","aboutPopoverContainer","aboutNewsPopover","document","aboutTab","about","settings","isSettingsEmpty","tabsContainer","componentDidLoad","requestAnimationFrame","handleOverflowIndicator","componentWillLoad","useContextConsumer","ApplicationLayoutContext","ctx","hideHeader","onBreakpointChange","breakpoint","menuController","register","onChange","on","componentWillRender","appendTabs","componentDidRender","appendFragments","showPinned","setIsPinned","mode","toggleMenu","appendAboutNewsPopover","resetActiveTab","activeTab","getAboutPopoverVerticalPosition","heightArrow","offsetArrow","rectAbout","getBoundingClientRect","offset","window","innerHeight","bottom","height","convertToRemString","contains","showMore","aboutItemLabel","activeTabLabel","toggleAbout","addEventListener","bind","body","appendChild","async","show","undefined","mapExpand","expand","expanded","expandChange","emit","checkTransition","container","transitionProperty","isOverlayVisible","showAbout","showSettings","animateOverlayFadeIn","resetOverlay","onOverlayClose","getCollapseText","i18nCollapse","i18nExpand","getCollapseIcon","isMenuItemClicked","event","target","HTMLElement","tagName","clientHeight","scrollTop","scrollHeight","itemsScrollShadowTop","itemsScrollShadowBottom","Math","round","animateOverlayFadeOut","anime","targets","duration","backdropFilter","translateX","opacity","easing","begin","onComplete","complete","onMenuItemsClick","isHiddenFromViewport","sidebarToggle","mapExpandChange","dispatchEvent","render","h","Host","class","slot","onClick","ixAriaLabel","i18nExpandSidebar","name","id","e","onScroll","disabled","active","icon","toggleSettings","i18nSettings","i18nLegal","enableToggleTheme","themeSwitcher","toggleMode","i18nToggleTheme","enableMapExpand","sidebar","visible","onTransitionEnd"],"sources":["./src/components/application-sidebar/events.ts","./src/components/menu/menu.scss?tag=ix-menu&encapsulation=shadow","./src/components/menu/menu.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\nexport class ApplicationSidebarToggleEvent extends Event {\n  public constructor(public readonly force?: boolean) {\n    super('application-sidebar-toggle', { bubbles: true, composed: true });\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\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n@import '~animate.css/animate.min';\n\n$menu-expanded-width: 16rem;\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  flex-direction: row;\n  position: absolute;\n  height: 100%;\n  min-height: 22.75rem;\n  z-index: var(--theme-z-index-sticky);\n  width: auto;\n\n  bottom: 0px;\n\n  .tabs {\n    height: 100%;\n    position: relative;\n    overflow-y: auto;\n    pointer-events: all;\n\n    -ms-overflow-style: none;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .tabs-shadow-container {\n    overflow: hidden;\n    display: block;\n    position: relative;\n    margin-bottom: 2rem;\n  }\n\n  .tabs--shadow {\n    opacity: 0;\n    position: absolute;\n    width: 100%;\n    height: 0.625rem;\n\n    background: linear-gradient(var(--theme-color-shadow-1), transparent);\n    pointer-events: none;\n    z-index: var(--theme-z-index-sticky);\n\n    transition: opacity var(--theme-default-time);\n  }\n  .tabs--shadow-top {\n    top: 0px;\n    background: linear-gradient(var(--theme-color-shadow-1), transparent);\n  }\n\n  .tabs--shadow-bottom {\n    bottom: 0px;\n    background: linear-gradient(transparent, var(--theme-color-shadow-1));\n  }\n\n  .tabs--shadow--show {\n    opacity: 1;\n  }\n\n  .menu {\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    width: 3.25rem;\n    height: 100%;\n    padding-block-end: 1rem;\n    overflow: hidden;\n\n    &.expanded {\n      box-shadow: var(--theme-navigation--box-shadow);\n    }\n\n    background-color: var(--theme-nav--background);\n    transition: width var(--animate-duration) ease-in-out;\n\n    .burger-menu {\n      margin: 0.75rem 0 1rem 0.35rem;\n    }\n  }\n\n  .menu-overlay {\n    display: none;\n    position: absolute;\n    width: calc(100vw - 3.25rem);\n    height: 100%;\n    left: 3.25rem;\n    z-index: -1;\n    backdrop-filter: blur(1rem);\n    background-color: var(--theme-sidebar-overlay-blur);\n    transition: left var(--animate-duration) ease-in-out;\n  }\n\n  .menu-overlay.visible {\n    display: block;\n  }\n\n  .menu.expanded {\n    width: $menu-expanded-width;\n  }\n\n  .menu-overlay.expanded {\n    width: calc(100vw - $menu-expanded-width);\n    left: $menu-expanded-width;\n  }\n\n  .menu-overlay-container {\n    display: contents;\n  }\n\n  .menu-avatar {\n    max-height: 3rem;\n  }\n\n  .avatar {\n    margin-bottom: 2rem;\n  }\n\n  #cui-imprint {\n    .cui-imprint-product-name {\n      margin-bottom: $default-space;\n    }\n\n    .cui-imprint-product-description {\n      margin-bottom: $x-large-space;\n    }\n\n    .cui-imprint-link-container {\n      display: flex;\n      align-items: center;\n    }\n  }\n\n  .bottom-tab-divider {\n    margin-top: auto;\n  }\n}\n\n:host(.breakpoint-sm) {\n  .menu:not(.expanded) {\n    width: 0;\n  }\n\n  .menu {\n    padding-top: 2rem;\n  }\n\n  .menu .burger-menu {\n    display: none;\n  }\n\n  .menu-overlay {\n    left: 0px;\n    width: 100vw;\n  }\n}\n\n:host(.breakpoint-lg) {\n  position: relative;\n\n  .menu.expanded {\n    box-shadow: none;\n  }\n}\n\n:host {\n  ::slotted(a[href]) {\n    all: unset;\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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { ApplicationSidebarToggleEvent } from '../application-sidebar/events';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { applicationLayoutService } from '../utils/application-layout/service';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextType, useContextConsumer } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { convertToRemString } from '../utils/rwd.util';\nimport { themeSwitcher } from '../utils/theme-switcher';\n\n@Component({\n  tag: 'ix-menu',\n  styleUrl: 'menu.scss',\n  shadow: true,\n})\nexport class Menu {\n  @Element() hostElement!: HTMLIxMenuElement;\n\n  /**\n   * Is settings tab visible\n   */\n  @Prop({ mutable: true }) showSettings = false;\n\n  /**\n   * Is about tab visible\n   */\n  @Prop({ mutable: true }) showAbout = false;\n\n  /**\n   * Show toggle between light and dark variant. Only if the provided theme have implemented both!\n   */\n  @Prop() enableToggleTheme = false;\n\n  /**\n   * Is settings tab is visible\n   */\n  @Prop() enableSettings = true;\n\n  /**\n   * Internal\n   */\n  @Prop() enableMapExpand = false;\n\n  /**\n   * Should only be set if you use ix-menu standalone\n   */\n  @Prop() applicationName: string;\n\n  /**\n   * Should only be set if you use ix-menu standalone\n   */\n  @Prop() applicationDescription = '';\n\n  /**\n   * Maximum number of menu items to show in case enough vertical space is available.\n   * Extra menu items will be collapsed to 'show more' menu item.\n   */\n  @Prop() maxVisibleMenuItems = 9;\n\n  /**\n   * Accessibility i18n label for the burger menu of the sidebar\n   */\n  @Prop() i18nExpandSidebar = 'Expand sidebar';\n\n  /**\n   */\n  @Prop({ mutable: true, reflect: true }) expand = false;\n\n  /**\n   * Menu stays pinned to the left\n   */\n  @Prop() pinned = false;\n  @Watch('pinned')\n  pinnedChange(newPinned: boolean) {\n    if (this.applicationLayoutContext?.host === 'map-navigation') {\n      console.warn('ix-map-navigation does not support pinning of the menu');\n      return;\n    }\n    this.setPinned(this.pinned);\n    if (newPinned) {\n      applicationLayoutService.disableBreakpointDetection();\n      applicationLayoutService.setBreakpoint('lg');\n      return;\n    }\n\n    applicationLayoutService.enableBreakpointDetection();\n  }\n\n  /**\n   */\n  @Prop() i18nLegal = 'About & legal information';\n\n  /**\n   */\n  @Prop() i18nSettings = 'Settings';\n\n  /**\n   */\n  @Prop() i18nToggleTheme = 'Toggle theme';\n\n  /**\n   */\n  @Prop() i18nExpand = ' Expand';\n\n  /**\n   */\n  @Prop() i18nCollapse = 'Collapse';\n\n  /**\n   * Menu expanded\n   */\n  @Event() expandChange: EventEmitter<boolean>;\n\n  /**\n   * Map Sidebar expanded\n   */\n  @Event() mapExpandChange: EventEmitter<boolean>;\n\n  @State() showPinned = false;\n  @State() mapExpand = true;\n  @State() activeTab: HTMLIxMenuItemElement | null;\n  @State() breakpoint: Breakpoint = 'lg';\n  @State() itemsScrollShadowTop = false;\n  @State() itemsScrollShadowBottom = false;\n  @State() applicationLayoutContext: ContextType<\n    typeof ApplicationLayoutContext\n  >;\n  private isTransitionDisabled = false;\n\n  // FBC IAM workaround #488\n  private readonly isVisible = (elm: HTMLElement) => {\n    return (\n      elm.style.display !== 'none' &&\n      elm.parentElement?.parentElement?.style.display !== 'none'\n    );\n  };\n\n  get popoverArea() {\n    return this.hostElement.shadowRoot!.querySelector('#popover-area');\n  }\n\n  get menu() {\n    return this.hostElement.shadowRoot!.querySelector('.menu');\n  }\n\n  get menuItemsContainer(): HTMLDivElement {\n    return this.menu!.querySelector('.tabs')!;\n  }\n\n  get overlayContainer() {\n    return this.hostElement.shadowRoot.querySelector(\n      '.menu-overlay'\n    ) as HTMLDivElement;\n  }\n\n  get menuItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll(\n        'ix-menu-item:not(.internal-tab):not(.home-tab):not(.bottom-tab):not([slot=\"bottom\"])'\n      )\n    ).filter(this.isVisible);\n  }\n\n  get menuBottomItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll(\n        'ix-menu-item.bottom-tab:not(.internal-tab):not(.home-tab)'\n      )\n    ).filter(this.isVisible);\n  }\n\n  get homeTab() {\n    return this.hostElement.querySelector('ix-menu-item.home-tab');\n  }\n\n  get moreItemsDropdown(): HTMLElement {\n    return this.hostElement.shadowRoot!.querySelector(\n      '.internal-tab ix-dropdown'\n    )!;\n  }\n\n  get isMoreItemsDropdownEmpty(): boolean {\n    return (\n      this.hostElement.shadowRoot!.querySelectorAll(\n        '.internal-tab ix-dropdown .appended'\n      ).length === 0\n    );\n  }\n\n  get moreItemsDropdownItems() {\n    return this.hostElement.shadowRoot!.querySelectorAll(\n      '.internal-tab ix-dropdown ix-menu-item'\n    );\n  }\n\n  get activeMoreTabContainer() {\n    return this.hostElement.shadowRoot!.querySelector('.active-more-tab');\n  }\n\n  get activeMoreTab() {\n    return this.hostElement.shadowRoot!.querySelector(\n      '.active-more-tab ix-menu-item'\n    );\n  }\n\n  get aboutPopoverContainer(): HTMLElement {\n    return this.hostElement.querySelector('.about-news')!;\n  }\n\n  get aboutNewsPopover(): HTMLIxMenuAboutNewsElement {\n    return (\n      document.querySelector('ix-menu-about-news') ??\n      this.hostElement.querySelector('ix-menu-about-news')!\n    );\n  }\n\n  get aboutTab(): HTMLElement {\n    return this.hostElement.shadowRoot!.querySelector('#aboutAndLegal');\n  }\n\n  get about(): HTMLIxMenuAboutElement | null {\n    return this.hostElement.querySelector('ix-menu-about');\n  }\n\n  get settings(): HTMLIxMenuSettingsElement | null {\n    return this.hostElement.querySelector('ix-menu-settings');\n  }\n\n  get isSettingsEmpty(): boolean {\n    return (\n      Array.from(\n        this.hostElement.shadowRoot!.querySelectorAll('ix-menu-settings-item')\n      ).length === 0\n    );\n  }\n\n  get tabsContainer() {\n    return this.hostElement;\n  }\n\n  componentDidLoad() {\n    requestAnimationFrame(() => {\n      this.handleOverflowIndicator();\n    });\n\n    if (this.pinned) {\n      this.pinnedChange(this.pinned);\n    }\n  }\n\n  componentWillLoad() {\n    useContextConsumer(\n      this.hostElement,\n      ApplicationLayoutContext,\n      (ctx) => {\n        this.applicationLayoutContext = ctx;\n        if (ctx.hideHeader === true) {\n          this.onBreakpointChange('md');\n          return;\n        }\n\n        this.onBreakpointChange(applicationLayoutService.breakpoint);\n      },\n      true\n    );\n\n    menuController.register(this.hostElement);\n    applicationLayoutService.onChange.on((breakpoint) =>\n      this.onBreakpointChange(breakpoint)\n    );\n    this.onBreakpointChange(applicationLayoutService.breakpoint);\n  }\n\n  componentWillRender() {\n    this.appendTabs();\n  }\n\n  componentDidRender() {\n    this.appendFragments();\n  }\n\n  private setPinned(pinned: boolean) {\n    this.showPinned = pinned;\n    menuController.setIsPinned(pinned);\n  }\n\n  private onBreakpointChange(mode: Breakpoint) {\n    if (!this.applicationLayoutContext && mode === 'sm') {\n      return;\n    }\n    if (this.applicationLayoutContext?.host === 'map-navigation') {\n      this.breakpoint = 'md';\n      return;\n    }\n    if (!this.applicationLayoutContext) {\n      return;\n    }\n\n    if (this.applicationLayoutContext.hideHeader && mode === 'sm') {\n      return;\n    }\n\n    this.breakpoint = mode;\n\n    if (this.breakpoint === 'lg') {\n      this.setPinned(true);\n      this.toggleMenu(true);\n      return;\n    }\n\n    this.setPinned(false);\n    this.toggleMenu(false);\n  }\n\n  private appendFragments() {\n    this.appendAboutNewsPopover();\n  }\n\n  private resetActiveTab() {\n    this.activeTab = null;\n  }\n\n  private appendTabs() {\n    this.activeTab = null;\n  }\n\n  private getAboutPopoverVerticalPosition() {\n    const heightArrow = 12;\n    const offsetArrow = 6;\n    const rectAbout = this.aboutTab.getBoundingClientRect();\n    const offset =\n      window.innerHeight -\n      (rectAbout.bottom - rectAbout.height / 2 + heightArrow / 2 + offsetArrow);\n    return convertToRemString(offset);\n  }\n\n  private appendAboutNewsPopover() {\n    if (!this.aboutNewsPopover) {\n      return;\n    }\n\n    this.aboutNewsPopover.style.bottom = this.getAboutPopoverVerticalPosition();\n\n    if (!this.popoverArea?.contains(this.aboutNewsPopover)) {\n      const showMore = () => {\n        if (this.aboutNewsPopover?.aboutItemLabel && this.about) {\n          this.about.activeTabLabel = this.aboutNewsPopover.aboutItemLabel;\n          this.toggleAbout(true);\n        }\n      };\n\n      this.aboutNewsPopover.addEventListener('showMore', showMore.bind(this));\n      document.body.appendChild(this.aboutNewsPopover);\n    }\n  }\n\n  /**\n   * Toggle map sidebar expand\n   * @param show\n   */\n  @Method()\n  async toggleMapExpand(show?: boolean) {\n    if (show !== undefined) {\n      this.mapExpand = show;\n    } else {\n      this.mapExpand = !this.mapExpand;\n    }\n  }\n\n  /**\n   * Toggle menu\n   * @param show\n   */\n  @Method()\n  async toggleMenu(show?: boolean) {\n    if (show !== undefined) {\n      this.expand = show;\n    } else {\n      this.expand = !this.expand;\n    }\n\n    if (this.aboutNewsPopover) {\n      this.aboutNewsPopover.expanded = this.expand;\n    }\n\n    this.expandChange.emit(this.expand);\n\n    this.isTransitionDisabled = false;\n    this.checkTransition();\n  }\n\n  /**\n   * Disable transition of overlay while menu animation is running.\n   */\n  private checkTransition() {\n    const container = this.overlayContainer;\n\n    if (!container) {\n      return;\n    }\n\n    if (this.isTransitionDisabled) {\n      container.style.transitionProperty = 'left';\n    } else {\n      container.style.transitionProperty = 'all';\n    }\n  }\n\n  private isOverlayVisible() {\n    return this.showAbout || this.showSettings;\n  }\n\n  /**\n   * Toggle Settings tabs\n   * @param show\n   */\n  @Method()\n  async toggleSettings(show: boolean) {\n    if (!this.settings) {\n      return;\n    }\n\n    if (!this.isOverlayVisible()) {\n      this.animateOverlayFadeIn();\n    }\n\n    if (show) {\n      this.resetOverlay();\n      this.showSettings = show;\n      this.settings.show = this.showSettings;\n    } else {\n      this.onOverlayClose();\n    }\n  }\n\n  /**\n   * Toggle About tabs\n   * @param show\n   */\n  @Method()\n  async toggleAbout(show: boolean) {\n    if (!this.about) {\n      return;\n    }\n\n    if (!this.isOverlayVisible()) {\n      this.animateOverlayFadeIn();\n    }\n\n    if (show) {\n      this.resetOverlay();\n      this.showAbout = show;\n      this.about.show = this.showAbout;\n    } else {\n      this.onOverlayClose();\n    }\n  }\n\n  private resetOverlay() {\n    this.showSettings = false;\n    this.showAbout = false;\n\n    if (this.settings) {\n      this.settings.show = false;\n    }\n\n    if (this.about) {\n      this.about.show = false;\n    }\n  }\n\n  private getCollapseText() {\n    return this.mapExpand ? this.i18nCollapse : this.i18nExpand;\n  }\n\n  private getCollapseIcon() {\n    return this.mapExpand ? 'navigation-left' : 'navigation-right';\n  }\n\n  private isMenuItemClicked(event: Event) {\n    if (event.target instanceof HTMLElement) {\n      return event.target.tagName === 'IX-MENU-ITEM';\n    }\n\n    return false;\n  }\n\n  @Listen('resize', { target: 'window' })\n  private handleOverflowIndicator() {\n    const { clientHeight, scrollTop, scrollHeight } = this.menuItemsContainer;\n    this.itemsScrollShadowTop = scrollTop > 0;\n    this.itemsScrollShadowBottom =\n      Math.round(scrollTop + clientHeight) < scrollHeight;\n  }\n\n  @Listen('close')\n  onOverlayClose() {\n    this.animateOverlayFadeOut(() => {\n      this.resetOverlay();\n    });\n  }\n\n  private animateOverlayFadeIn() {\n    requestAnimationFrame(() => {\n      anime({\n        targets: this.overlayContainer,\n        duration: 300,\n        backdropFilter: [0, 'blur(1rem)'],\n        translateX: ['-4rem', 0],\n        opacity: [0, 1],\n        easing: 'easeInSine',\n        begin: () => {\n          if (this.showPinned) {\n            return;\n          }\n\n          this.toggleMenu(false);\n        },\n      });\n    });\n  }\n\n  private animateOverlayFadeOut(onComplete: Function) {\n    requestAnimationFrame(() => {\n      anime({\n        targets: this.overlayContainer,\n        duration: 300,\n        backdropFilter: ['blur(1rem)', 0],\n        translateX: [0, '-4rem'],\n        opacity: [1, 0],\n        easing: 'easeInSine',\n        complete: () => onComplete(),\n      });\n    });\n  }\n\n  private onMenuItemsClick(event: Event) {\n    if (this.isMenuItemClicked(event)) {\n      if (!this.showPinned) {\n        this.toggleMenu(false);\n      }\n      this.onOverlayClose();\n    }\n  }\n\n  private isHiddenFromViewport() {\n    return this.breakpoint === 'sm' && this.expand === false;\n  }\n\n  private sidebarToggle() {\n    this.mapExpandChange.emit(this.mapExpand);\n\n    this.hostElement.dispatchEvent(\n      new ApplicationSidebarToggleEvent(this.mapExpand)\n    );\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.expand,\n          [`breakpoint-${this.breakpoint}`]: true,\n        }}\n        slot=\"menu\"\n      >\n        <aside\n          class={{\n            menu: true,\n            expanded: this.expand,\n          }}\n          onClick={() => {\n            this.resetActiveTab();\n          }}\n        >\n          <ix-burger-menu\n            onClick={async () => this.toggleMenu()}\n            expanded={this.expand}\n            ixAriaLabel={this.i18nExpandSidebar}\n            pinned={this.showPinned}\n            class={{\n              'burger-menu': true,\n            }}\n          ></ix-burger-menu>\n          <div class=\"menu-avatar\">\n            <slot name=\"ix-menu-avatar\"></slot>\n          </div>\n\n          <div\n            id=\"menu-tabs\"\n            style={{\n              display: 'contents',\n            }}\n            onClick={(e) => this.onMenuItemsClick(e)}\n          >\n            <div class=\"tabs-top\">\n              <slot name=\"home\"></slot>\n            </div>\n            <div class=\"tabs-shadow-container\">\n              <div\n                class={{\n                  'tabs--shadow': true,\n                  'tabs--shadow-top': true,\n                  'tabs--shadow--show': this.itemsScrollShadowTop,\n                }}\n              ></div>\n              <div class=\"tabs\" onScroll={() => this.handleOverflowIndicator()}>\n                {this.breakpoint !== 'sm' || !this.isHiddenFromViewport() ? (\n                  <slot></slot>\n                ) : null}\n              </div>\n              <div\n                class={{\n                  'tabs--shadow': true,\n                  'tabs--shadow-bottom': true,\n                  'tabs--shadow--show': this.itemsScrollShadowBottom,\n                }}\n              ></div>\n            </div>\n          </div>\n          <div class=\"bottom-tab-divider\"></div>\n          {this.settings ? (\n            <ix-menu-item\n              disabled={this.isHiddenFromViewport()}\n              id=\"settings\"\n              class={{\n                'internal-tab': true,\n                'bottom-tab': true,\n                active: this.showSettings,\n              }}\n              icon={'cogwheel'}\n              onClick={async () => this.toggleSettings(!this.showSettings)}\n            >\n              {this.i18nSettings}\n            </ix-menu-item>\n          ) : null}\n          <div onClick={(e) => this.onMenuItemsClick(e)}>\n            <slot name=\"bottom\"></slot>\n          </div>\n\n          <div id=\"popover-area\"></div>\n          {this.about ? (\n            <ix-menu-item\n              disabled={this.isHiddenFromViewport()}\n              id=\"aboutAndLegal\"\n              class={{\n                'internal-tab': true,\n                'bottom-tab': true,\n                active: this.showAbout,\n              }}\n              icon={'info'}\n              onClick={async () => this.toggleAbout(!this.showAbout)}\n            >\n              {this.i18nLegal}\n            </ix-menu-item>\n          ) : null}\n          {this.enableToggleTheme ? (\n            <ix-menu-item\n              disabled={this.isHiddenFromViewport()}\n              id=\"toggleTheme\"\n              onClick={() => themeSwitcher.toggleMode()}\n              class=\"internal-tab bottom-tab\"\n              icon={'bulb'}\n            >\n              {this.i18nToggleTheme}\n            </ix-menu-item>\n          ) : null}\n          {this.enableMapExpand || this.applicationLayoutContext?.sidebar ? (\n            <ix-menu-item\n              disabled={this.isHiddenFromViewport()}\n              id=\"menu-collapse\"\n              onClick={() => this.sidebarToggle()}\n              class=\"internal-tab bottom-tab\"\n              icon={`${this.getCollapseIcon()}`}\n            >\n              {this.getCollapseText()}\n            </ix-menu-item>\n          ) : null}\n        </aside>\n        <div\n          class={{\n            'menu-overlay': true,\n            visible: this.isOverlayVisible(),\n            expanded: this.expand,\n          }}\n          onTransitionEnd={() => {\n            this.isTransitionDisabled = true;\n            this.checkTransition();\n          }}\n        >\n          <div class={'menu-overlay-container'}>\n            {this.showSettings ? <slot name=\"ix-menu-settings\"></slot> : null}\n          </div>\n          <div class={'menu-overlay-container'}>\n            {this.showAbout ? <slot name=\"ix-menu-about\"></slot> : null}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/siemens-ix/p-dd2fb887.entry.js

@@ -0,0 +1,2 @@
+import{r as o,c as r,h as t,H as e}from"./p-76a509c7.js";const s=":host{--margin:0.5rem;display:block;position:fixed;width:20rem;height:auto;background-color:var(--theme-color-1);border:var(--theme-weak-bdr-1);border-radius:0.25rem;padding:1rem;left:3.4rem;z-index:10000;transition:left var(--animate-duration);margin-left:var(--margin) !important;box-shadow:var(--theme-box-shadow-level-4)}: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 .banner-container{position:absolute;top:0.0625rem;left:1rem}:host .banner-container svg{position:absolute;height:3.625rem;width:3rem}:host .banner-container svg polygon{fill:var(--theme-color-primary)}:host .banner-container ix-icon{margin:0.5rem;position:absolute;z-index:1}:host .cui-popover-news-header{margin-bottom:2.5rem;margin-left:4rem;margin-top:-0.25rem}:host .popover-body{color:var(--theme-color-std-text)}:host .cui-popover-news-footer{display:flex;justify-content:flex-end;margin-top:1rem}:host ix-icon-button{top:0.5rem;right:0.5rem;position:absolute}:host #arrow{position:absolute;width:0.5rem;height:0.5rem;background-color:var(--theme-color-1);border-left:var(--theme-weak-bdr-1);border-bottom:var(--theme-weak-bdr-1);transform:translateX(calc(var(--margin) * -1 - 0.8rem)) rotateZ(45deg)}:host(.expanded){left:calc(3.4rem + 12.7rem)}:host(.show){display:none}";const a=class{constructor(t){o(this,t);this.showMore=r(this,"showMore",7);this.closePopover=r(this,"closePopover",7);this.show=false;this.label=undefined;this.i18nShowMore="Show more";this.aboutItemLabel=undefined;this.offsetBottom=0;this.expanded=false}render(){return t(e,{class:{expanded:this.expanded,show:!this.show}},t("div",{class:"banner-container"},t("ix-icon",{color:"color-inv-contrast-text",name:"shout",size:"32"}),t("svg",{viewBox:"0 0 48 56",xmlns:"http://www.w3.org/2000/svg"},t("polygon",{points:"0 0 48 0 48 56 24 48 0 56"}))),t("div",{class:"cui-popover-news-header"},t("ix-typography",{variant:"default-title-single"},this.label)),t("ix-icon-button",{size:"24",icon:"close-small",ghost:true,onClick:()=>{this.show=false;this.closePopover.emit()}}),t("slot",null),this.aboutItemLabel?t("div",{class:"cui-popover-news-footer"},t("ix-button",{variant:"primary",onClick:o=>{this.show=false;this.showMore.emit(o)}},this.i18nShowMore)):null,t("div",{id:"arrow"}))}};a.style=s;export{a as ix_menu_about_news};
+//# sourceMappingURL=p-dd2fb887.entry.js.map

package/dist/siemens-ix/p-dd2fb887.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["menuAboutNewsCss","MenuAboutNews","render","h","Host","class","expanded","this","show","color","name","size","viewBox","xmlns","points","variant","label","icon","ghost","onClick","closePopover","emit","aboutItemLabel","e","showMore","i18nShowMore","id"],"sources":["./src/components/menu-about-news/menu-about-news.scss?tag=ix-menu-about-news&encapsulation=shadow","./src/components/menu-about-news/menu-about-news.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/shadows';\n@import 'mixins/shadow-dom/component';\n$left: 3.4rem;\n\n:host {\n  @include ix-component;\n\n  --margin: 0.5rem;\n\n  display: block;\n  position: fixed;\n  width: 20rem;\n  height: auto;\n  background-color: var(--theme-color-1);\n  border: var(--theme-weak-bdr-1);\n  border-radius: $default-border-radius;\n  padding: 1rem;\n  left: $left;\n  z-index: 10000;\n  transition: left var(--animate-duration);\n\n  margin-left: var(--margin) !important;\n\n  @include box-shadow(4);\n\n  .banner-container {\n    position: absolute;\n    top: 0.0625rem;\n    left: $default-space;\n\n    svg {\n      position: absolute;\n      height: 3.625rem;\n      width: 3rem;\n\n      polygon {\n        fill: var(--theme-color-primary);\n      }\n    }\n\n    ix-icon {\n      margin: $small-space;\n      position: absolute;\n      z-index: 1;\n    }\n  }\n\n  .cui-popover-news-header {\n    margin-bottom: 2.5rem;\n    margin-left: 4rem;\n    margin-top: -$tiny-space;\n  }\n\n  .popover-body {\n    color: var(--theme-color-std-text);\n  }\n\n  .cui-popover-news-footer {\n    display: flex;\n    justify-content: flex-end;\n    margin-top: 1rem;\n  }\n\n  ix-icon-button {\n    top: $small-space;\n    right: $small-space;\n    position: absolute;\n  }\n\n  #arrow {\n    position: absolute;\n    width: 0.5rem;\n    height: 0.5rem;\n    background-color: var(--theme-color-1);\n    border-left: var(--theme-weak-bdr-1);\n    border-bottom: var(--theme-weak-bdr-1);\n    transform: translateX(calc(var(--margin) * -1 - 0.8rem)) rotateZ(45deg);\n  }\n}\n\n:host(.expanded) {\n  left: calc(#{$left} + 12.7rem);\n}\n\n:host(.show) {\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 { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-about-news',\n  styleUrl: 'menu-about-news.scss',\n  shadow: true,\n})\nexport class MenuAboutNews {\n  /**\n   * Show about news\n   */\n  @Prop({ mutable: true, reflect: true }) show = false;\n\n  /**\n   * Title of the about news\n   */\n  @Prop() label: string;\n\n  /**\n   *\n   */\n  @Prop() i18nShowMore = 'Show more';\n\n  /**\n   * Subtitle of the about news\n   */\n  @Prop() aboutItemLabel: string;\n\n  /**\n   * Bottom offset\n   */\n  @Prop() offsetBottom = 0;\n\n  /**\n   * Show More button is pressed\n   */\n  @Event() showMore: EventEmitter<MouseEvent>;\n\n  /**\n   * Popover closed\n   */\n  @Event() closePopover: EventEmitter<void>;\n\n  /**\n   * Internal\n   */\n  @Prop() expanded = false;\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.expanded,\n          show: !this.show,\n        }}\n      >\n        <div class=\"banner-container\">\n          <ix-icon\n            color=\"color-inv-contrast-text\"\n            name={'shout'}\n            size=\"32\"\n          ></ix-icon>\n          <svg viewBox=\"0 0 48 56\" xmlns=\"http://www.w3.org/2000/svg\">\n            <polygon points=\"0 0 48 0 48 56 24 48 0 56\" />\n          </svg>\n        </div>\n\n        <div class=\"cui-popover-news-header\">\n          <ix-typography variant=\"default-title-single\">\n            {this.label}\n          </ix-typography>\n        </div>\n\n        <ix-icon-button\n          size=\"24\"\n          icon={'close-small'}\n          ghost\n          onClick={() => {\n            this.show = false;\n            this.closePopover.emit();\n          }}\n        ></ix-icon-button>\n        <slot></slot>\n        {this.aboutItemLabel ? (\n          <div class=\"cui-popover-news-footer\">\n            <ix-button\n              variant=\"primary\"\n              onClick={(e) => {\n                this.show = false;\n                this.showMore.emit(e);\n              }}\n            >\n              {this.i18nShowMore}\n            </ix-button>\n          </div>\n        ) : null}\n        <div id=\"arrow\"></div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAmB,wxD,MCgBZC,EAAa,M,iHAIuB,M,uCAUxB,Y,gDAUA,E,cAeJ,K,CAEnBC,SACE,OACEC,EAACC,EAAI,CACHC,MAAO,CACLC,SAAUC,KAAKD,SACfE,MAAOD,KAAKC,OAGdL,EAAA,OAAKE,MAAM,oBACTF,EAAA,WACEM,MAAM,0BACNC,KAAM,QACNC,KAAK,OAEPR,EAAA,OAAKS,QAAQ,YAAYC,MAAM,8BAC7BV,EAAA,WAASW,OAAO,gCAIpBX,EAAA,OAAKE,MAAM,2BACTF,EAAA,iBAAeY,QAAQ,wBACpBR,KAAKS,QAIVb,EAAA,kBACEQ,KAAK,KACLM,KAAM,cACNC,MAAK,KACLC,QAAS,KACPZ,KAAKC,KAAO,MACZD,KAAKa,aAAaC,MAAM,IAG5BlB,EAAA,aACCI,KAAKe,eACJnB,EAAA,OAAKE,MAAM,2BACTF,EAAA,aACEY,QAAQ,UACRI,QAAUI,IACRhB,KAAKC,KAAO,MACZD,KAAKiB,SAASH,KAAKE,EAAE,GAGtBhB,KAAKkB,eAGR,KACJtB,EAAA,OAAKuB,GAAG,U"}

package/dist/siemens-ix/p-e5beabf4.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as o,h as e,H as a,g as n}from"./p-76a509c7.js";const r=':host{display:flex;position:relative;flex-direction:column;width:100%;transition:var(--theme-default-time) ease-in-out}: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 .expand-action{all:unset;display:flex;position:relative;-webkit-appearance:button;-moz-appearance:button;appearance:button;height:2.5rem;width:100%;background-color:var(--theme-color-component-1);align-items:center;justify-content:flex-start}:host .expand-action:not(.disabled):not(:disabled).hover,:host .expand-action:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host .expand-action:not(.disabled):not(:disabled).active,:host .expand-action:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host .expand-action:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .expand-action::before{content:"";position:absolute;width:100%;height:100%;background-color:var(--ix-card-background);z-index:-1}:host .expand-action:not(.show),:host .expand-action:not(.show)::before{border-bottom-left-radius:var(--theme-default-border-radius);border-bottom-right-radius:var(--theme-default-border-radius)}:host .expand-icon{margin-left:0.5rem;transition:var(--theme-default-time) transform ease-in-out}:host .expand-icon.show{transform:rotate(90deg)}:host .expand-content{display:grid;position:relative;grid-template-rows:0fr;transition:var(--theme-default-time) ease-in-out;width:100%;max-height:14.75rem;opacity:0;background-color:var(--theme-color-component-1)}:host .expand-content.show{grid-template-rows:14.75rem;opacity:1}:host .expand-content-inner{position:relative;height:100%;overflow:hidden}:host .expand-content.show .expand-content-body{display:none;overflow:hidden;color:var(--theme-color-std-text)}:host .expand-content.show .expand-content-body{display:block;overflow:auto;height:calc(100% - 1rem)}:host .expand-content-footer{display:block;position:relative;width:100%;height:1rem;margin-top:auto;margin-bottom:0px;background-color:var(--theme-color-component-1);border-bottom-left-radius:var(--theme-default-border-radius);border-bottom-right-radius:var(--theme-default-border-radius)}';let i=0;const s=(t="expand-content")=>[t,i++].join("-");const d=class{constructor(e){t(this,e);this.accordionExpand=o(this,"accordionExpand",7);this.expandContent=false}get expandedContent(){return this.hostElement.shadowRoot.querySelector(".expand-content")}onExpandActionClick(t){t.preventDefault();t.stopPropagation();this.expandContent=!this.expandContent;this.accordionExpand.emit({expand:this.expandContent,nativeEvent:t});if(this.expandContent){this.scrollExpandedContentIntoView()}}scrollExpandedContentIntoView(){setTimeout((()=>{const t=this.expandedContent.getBoundingClientRect();if(t.bottom>window.innerHeight){this.hostElement.shadowRoot.querySelector(".expand-content").scrollIntoView(false)}}),150)}render(){return e(a,{slot:"card-accordion"},e("button",{tabIndex:0,class:{"expand-action":true,show:this.expandContent},onClick:t=>this.onExpandActionClick(t),role:"button",type:"button","aria-expanded":this.expandContent,"aria-controls":s()},e("ix-icon",{name:"chevron-right-small",class:{"expand-icon":true,show:this.expandContent}})),e("div",{class:{"expand-content":true,show:this.expandContent}},e("div",{class:"expand-content-inner"},e("div",{class:"expand-content-body"},e("slot",null)),e("div",{class:"expand-content-footer"}))))}get hostElement(){return n(this)}};d.style=r;const c=":host{display:flex;position:relative;flex-direction:row;align-items:center;margin-top:0.25rem;margin-bottom:0.5rem;gap:1rem;width:100%}:host .title-actions{display:flex;position:relative;flex-direction:row;gap:0.25rem;margin-left:auto;margin-right:0px}";const l=class{constructor(o){t(this,o)}render(){return e(a,null,e("slot",null),e("div",{class:"title-actions"},e("slot",{name:"title-actions"})))}};l.style=c;export{d as ix_card_accordion,l as ix_card_title};
+//# sourceMappingURL=p-e5beabf4.entry.js.map

package/dist/siemens-ix/p-e5beabf4.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cardAccordionCss","accordionControlId","getAriaControlsId","prefix","join","CardAccordion","expandedContent","this","hostElement","shadowRoot","querySelector","onExpandActionClick","event","preventDefault","stopPropagation","expandContent","accordionExpand","emit","expand","nativeEvent","scrollExpandedContentIntoView","setTimeout","rect","getBoundingClientRect","bottom","window","innerHeight","scrollIntoView","render","h","Host","slot","tabIndex","class","show","onClick","role","type","name","cardTitleCss","CardHeader"],"sources":["./src/components/card-accordion/card-accordion.scss?tag=ix-card-accordion&encapsulation=shadow","./src/components/card-accordion/card-accordion.tsx","./src/components/card-title/card-title.scss?tag=ix-card-title&encapsulation=shadow","./src/components/card-title/card-title.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/hover';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  width: 100%;\n  transition: var(--theme-default-time) ease-in-out;\n\n  .expand-action {\n    all: unset;\n    display: flex;\n    position: relative;\n\n    appearance: button;\n\n    height: 2.5rem;\n    width: 100%;\n\n    background-color: var(--theme-color-component-1);\n    align-items: center;\n    justify-content: flex-start;\n    @include ghost-hover-pressed();\n\n    @include focus-visible {\n      outline: 1px solid var(--theme-color-focus-bdr);\n      outline-offset: var(--theme-btn--focus--outline-offset);\n    }\n  }\n\n  .expand-action::before {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    background-color: var(--ix-card-background);\n    z-index: -1;\n  }\n\n  .expand-action:not(.show),\n  .expand-action:not(.show)::before {\n    border-bottom-left-radius: var(--theme-default-border-radius);\n    border-bottom-right-radius: var(--theme-default-border-radius);\n  }\n\n  .expand-icon {\n    margin-left: 0.5rem;\n    transition: var(--theme-default-time) transform ease-in-out;\n  }\n\n  .expand-icon.show {\n    transform: rotate(90deg);\n  }\n\n  .expand-content {\n    display: grid;\n    position: relative;\n    grid-template-rows: 0fr;\n    transition: var(--theme-default-time) ease-in-out;\n    width: 100%;\n    max-height: 14.75rem;\n    opacity: 0;\n    background-color: var(--theme-color-component-1);\n  }\n\n  .expand-content.show {\n    grid-template-rows: 14.75rem;\n    opacity: 1;\n  }\n\n  .expand-content-inner {\n    position: relative;\n    height: 100%;\n    overflow: hidden;\n  }\n\n  .expand-content.show .expand-content-body {\n    display: none;\n    overflow: hidden;\n    color: var(--theme-color-std-text);\n  }\n\n  .expand-content.show .expand-content-body {\n    display: block;\n    overflow: auto;\n    height: calc(100% - 1rem);\n  }\n\n  .expand-content-footer {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 1rem;\n\n    margin-top: auto;\n    margin-bottom: 0px;\n\n    background-color: var(--theme-color-component-1);\n    border-bottom-left-radius: var(--theme-default-border-radius);\n    border-bottom-right-radius: var(--theme-default-border-radius);\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  State,\n} from '@stencil/core';\n\nlet accordionControlId = 0;\nconst getAriaControlsId = (prefix: string = 'expand-content') => {\n  return [prefix, accordionControlId++].join('-');\n};\n\nexport type CardAccordionExpandChangeEvent = {\n  expand: boolean;\n  nativeEvent: Event;\n};\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-accordion',\n  styleUrl: 'card-accordion.scss',\n  shadow: true,\n})\nexport class CardAccordion {\n  @Element() hostElement: HTMLIxCardAccordionElement;\n\n  /**\n   * @internal\n   */\n  @Event() accordionExpand: EventEmitter<CardAccordionExpandChangeEvent>;\n\n  @State() expandContent = false;\n\n  get expandedContent() {\n    return this.hostElement.shadowRoot.querySelector('.expand-content');\n  }\n\n  onExpandActionClick(event: Event) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.expandContent = !this.expandContent;\n    this.accordionExpand.emit({\n      expand: this.expandContent,\n      nativeEvent: event,\n    });\n\n    if (this.expandContent) {\n      this.scrollExpandedContentIntoView();\n    }\n  }\n\n  private scrollExpandedContentIntoView() {\n    setTimeout(() => {\n      const rect = this.expandedContent.getBoundingClientRect();\n      if (rect.bottom > window.innerHeight) {\n        this.hostElement.shadowRoot\n          .querySelector('.expand-content')\n          .scrollIntoView(false);\n      }\n    }, 150);\n  }\n\n  render() {\n    return (\n      <Host slot=\"card-accordion\">\n        <button\n          tabIndex={0}\n          class={{ 'expand-action': true, show: this.expandContent }}\n          onClick={(event) => this.onExpandActionClick(event)}\n          role=\"button\"\n          type=\"button\"\n          aria-expanded={this.expandContent}\n          aria-controls={getAriaControlsId()}\n        >\n          <ix-icon\n            name={'chevron-right-small'}\n            class={{\n              'expand-icon': true,\n              show: this.expandContent,\n            }}\n          ></ix-icon>\n        </button>\n        <div\n          class={{\n            'expand-content': true,\n            show: this.expandContent,\n          }}\n        >\n          <div class=\"expand-content-inner\">\n            <div class=\"expand-content-body\">\n              <slot></slot>\n            </div>\n            <div class=\"expand-content-footer\"></div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n","@import 'common-variables';\n\n:host {\n  display: flex;\n  position: relative;\n  flex-direction: row;\n  align-items: center;\n  margin-top: 0.25rem;\n  margin-bottom: $small-space;\n  gap: $default-space;\n\n  width: 100%;\n\n  .title-actions {\n    display: flex;\n    position: relative;\n    flex-direction: row;\n    gap: 0.25rem;\n    margin-left: auto;\n    margin-right: 0px;\n  }\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * @slot title-actions - Place additional actions inside title\n *\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-title',\n  styleUrl: 'card-title.scss',\n  shadow: true,\n})\nexport class CardHeader {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n        <div class=\"title-actions\">\n          <slot name=\"title-actions\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAmB,2vFCUzB,IAAIC,EAAqB,EACzB,MAAMC,EAAoB,CAACC,EAAiB,mBACnC,CAACA,EAAQF,KAAsBG,KAAK,K,MAgBhCC,EAAa,M,6FAQC,K,CAErBC,sBACF,OAAOC,KAAKC,YAAYC,WAAWC,cAAc,kB,CAGnDC,oBAAoBC,GAClBA,EAAMC,iBACND,EAAME,kBACNP,KAAKQ,eAAiBR,KAAKQ,cAC3BR,KAAKS,gBAAgBC,KAAK,CACxBC,OAAQX,KAAKQ,cACbI,YAAaP,IAGf,GAAIL,KAAKQ,cAAe,CACtBR,KAAKa,+B,EAIDA,gCACNC,YAAW,KACT,MAAMC,EAAOf,KAAKD,gBAAgBiB,wBAClC,GAAID,EAAKE,OAASC,OAAOC,YAAa,CACpCnB,KAAKC,YAAYC,WACdC,cAAc,mBACdiB,eAAe,M,IAEnB,I,CAGLC,SACE,OACEC,EAACC,EAAI,CAACC,KAAK,kBACTF,EAAA,UACEG,SAAU,EACVC,MAAO,CAAE,gBAAiB,KAAMC,KAAM3B,KAAKQ,eAC3CoB,QAAUvB,GAAUL,KAAKI,oBAAoBC,GAC7CwB,KAAK,SACLC,KAAK,SAAQ,gBACE9B,KAAKQ,cAAa,gBAClBb,KAEf2B,EAAA,WACES,KAAM,sBACNL,MAAO,CACL,cAAe,KACfC,KAAM3B,KAAKQ,kBAIjBc,EAAA,OACEI,MAAO,CACL,iBAAkB,KAClBC,KAAM3B,KAAKQ,gBAGbc,EAAA,OAAKI,MAAM,wBACTJ,EAAA,OAAKI,MAAM,uBACTJ,EAAA,cAEFA,EAAA,OAAKI,MAAM,4B,8CCjGvB,MAAMM,EAAe,+P,MCYRC,EAAU,M,yBACrBZ,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,aACAA,EAAA,OAAKI,MAAM,iBACTJ,EAAA,QAAMS,KAAK,mB"}

package/dist/siemens-ix/p-f63b47c1.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as o,h as s,H as e,g as r}from"./p-76a509c7.js";const i=":host{display:flex;flex-direction:column;position:relative;min-width:17.5rem;max-width:17.5rem;min-height:3.5rem;pointer-events:all;background-color:var(--theme-toast--background);border:var(--theme-toast--border-thickness) solid var(--theme-toast--border-color);border-radius:var(--theme-toast--border-radius);box-shadow:var(--theme-toast--box-shadow);--animate-duration:300ms}: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 .toast-body{display:flex;position:relative;min-height:3.5rem;width:100%;flex-grow:1;padding:0.75rem}:host .toast-body .toast-icon{display:flex;align-items:flex-start;margin-right:1rem}:host .toast-body .toast-content{overflow:hidden;text-overflow:ellipsis;min-width:0;width:100%}:host .toast-body .toast-content .toast-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.143em;color:var(--theme-color-std-text);margin:0.25rem 0px}:host .toast-body .toast-content .toast-message{min-width:0;-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)}:host .toast-body .toast-icon+.toast-content{max-width:10.25rem}:host .toast-close{display:flex;position:relative;pointer-events:all;margin-left:auto;margin-right:0px}:host .toast-progress-bar{position:absolute;bottom:0;height:0.25rem;width:100%;background-color:var(--theme-toast-timer-value--background);transform-origin:left}:host .toast-progress-bar--animated{animation:trackProgress linear 1 forwards}@keyframes trackProgress{0%{transform:scaleX(1)}100%{transform:scaleX(0)}}";const a=class{constructor(s){t(this,s);this.closeToast=o(this,"closeToast",7);this.type="info";this.toastTitle=undefined;this.autoCloseDelay=5e3;this.autoClose=true;this.icon=undefined;this.iconColor=undefined;this.progress=0;this.touched=false}getIcon(){if(this.icon){return s("ix-icon",{name:this.icon,color:this.iconColor,size:"24"})}switch(this.type){case"info":return s("ix-icon",{name:"info",size:"24",color:"color-std-text"});case"error":return s("ix-icon",{name:"error",size:"24",color:"color-alarm"});case"success":return s("ix-icon",{name:"success",size:"24",color:"color-success"});case"warning":return s("ix-icon",{name:"warning",size:"24",color:"color-warning"});default:return""}}close(){if(this.hostElement){this.hostElement.classList.add("animate__fadeOut")}setTimeout((()=>{this.closeToast.emit()}),250)}render(){let t={};const o=["toast-progress-bar"];t={animationDuration:`${this.autoCloseDelay}ms`,animationPlayState:this.touched?"paused":"running"};o.push("toast-progress-bar--animated");return s(e,{class:"animate__animated animate__fadeIn"},s("div",{class:"toast-body",onPointerLeave:()=>{this.touched=false},onPointerEnter:()=>{this.touched=true}},this.type||this.icon?s("div",{class:"toast-icon"},this.getIcon()):null,s("div",{class:"toast-content"},this.toastTitle?s("div",{class:"toast-title"},this.toastTitle):null,s("div",{class:"toast-message"},s("slot",null))),s("div",{class:"toast-close"},s("ix-icon-button",{icon:"close",size:"24",ghost:true,onClick:()=>this.closeToast.emit()}))),this.autoClose?s("div",{class:o.join(" "),style:t,onAnimationEnd:()=>{this.close()},onTransitionEnd:()=>{if(this.progress===0){this.close()}}}):null)}get hostElement(){return r(this)}};a.style=i;export{a as ix_toast};
+//# sourceMappingURL=p-f63b47c1.entry.js.map

package/dist/siemens-ix/p-f63b47c1.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["toastCss","Toast","getIcon","this","icon","h","name","color","iconColor","size","type","close","hostElement","classList","add","setTimeout","closeToast","emit","render","progressBarStyle","progressBarClass","animationDuration","autoCloseDelay","animationPlayState","touched","push","Host","class","onPointerLeave","onPointerEnter","toastTitle","ghost","onClick","autoClose","join","style","onAnimationEnd","onTransitionEnd","progress"],"sources":["./src/components/toast/toast.scss?tag=ix-toast&encapsulation=shadow","./src/components/toast/toast.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/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n@import 'legacy/mixins/fonts';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  min-width: 17.5rem;\n  max-width: 17.5rem;\n  min-height: 3.5rem;\n\n  pointer-events: all;\n\n  background-color: var(--theme-toast--background);\n  border: var(--theme-toast--border-thickness) solid\n    var(--theme-toast--border-color);\n  border-radius: var(--theme-toast--border-radius);\n  box-shadow: var(--theme-toast--box-shadow);\n\n  --animate-duration: #{$medium-time};\n\n  .toast-body {\n    display: flex;\n    position: relative;\n    min-height: 3.5rem;\n    width: 100%;\n    flex-grow: 1;\n    padding: 0.75rem;\n\n    .toast-icon {\n      display: flex;\n      align-items: flex-start;\n      margin-right: $default-space;\n    }\n\n    .toast-content {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      min-width: 0;\n      width: 100%;\n\n      .toast-title {\n        @include text-default-title-single;\n        margin: 0.25rem 0px;\n      }\n\n      .toast-message {\n        min-width: 0;\n\n        @include text-default;\n      }\n    }\n\n    .toast-icon + .toast-content {\n      max-width: 10.25rem;\n    }\n  }\n\n  .toast-close {\n    display: flex;\n    position: relative;\n    pointer-events: all;\n    margin-left: auto;\n    margin-right: 0px;\n  }\n\n  .toast-progress-bar {\n    position: absolute;\n    bottom: 0;\n    height: $tiny-space;\n    width: 100%;\n    background-color: var(--theme-toast-timer-value--background);\n    transform-origin: left;\n\n    &--animated {\n      animation: trackProgress linear 1 forwards;\n    }\n  }\n\n  @keyframes trackProgress {\n    0% {\n      transform: scaleX(1);\n    }\n    100% {\n      transform: scaleX(0);\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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { ToastType } from './toast-utils';\n\n@Component({\n  tag: 'ix-toast',\n  styleUrl: 'toast.scss',\n  shadow: true,\n})\nexport class Toast {\n  /**\n   * Toast type\n   */\n  @Prop() type: ToastType = 'info';\n\n  /**\n   * Toast title\n   */\n  @Prop() toastTitle: string;\n\n  /**\n   * Autoclose title after delay\n   */\n  @Prop() autoCloseDelay = 5000;\n\n  /**\n   * Autoclose behavior\n   */\n  @Prop() autoClose = true;\n\n  /**\n   * Icon of toast\n   */\n  @Prop() icon: string;\n\n  /**\n   * Icon color of toast\n   */\n  @Prop() iconColor: string;\n\n  /**\n   * Toast closed\n   */\n  @Event() closeToast: EventEmitter;\n\n  @State() progress = 0;\n  @State() touched = false;\n\n  @Element() hostElement!: HTMLIxToastElement;\n\n  private getIcon() {\n    if (this.icon) {\n      return <ix-icon name={this.icon} color={this.iconColor} size=\"24\" />;\n    }\n\n    switch (this.type) {\n      case 'info':\n        return <ix-icon name={'info'} size=\"24\" color=\"color-std-text\" />;\n\n      case 'error':\n        return <ix-icon name={'error'} size=\"24\" color=\"color-alarm\" />;\n\n      case 'success':\n        return <ix-icon name={'success'} size=\"24\" color=\"color-success\" />;\n\n      case 'warning':\n        return <ix-icon name={'warning'} size=\"24\" color=\"color-warning\" />;\n\n      default:\n        return '';\n    }\n  }\n\n  private close() {\n    if (this.hostElement) {\n      this.hostElement.classList.add('animate__fadeOut');\n    }\n    setTimeout(() => {\n      this.closeToast.emit();\n    }, 250);\n  }\n\n  render() {\n    let progressBarStyle: Record<string, string> = {};\n\n    const progressBarClass = ['toast-progress-bar'];\n\n    progressBarStyle = {\n      animationDuration: `${this.autoCloseDelay}ms`,\n      animationPlayState: this.touched ? 'paused' : 'running',\n    };\n\n    progressBarClass.push('toast-progress-bar--animated');\n\n    return (\n      <Host class=\"animate__animated animate__fadeIn\">\n        <div\n          class=\"toast-body\"\n          onPointerLeave={() => {\n            this.touched = false;\n          }}\n          onPointerEnter={() => {\n            this.touched = true;\n          }}\n        >\n          {this.type || this.icon ? (\n            <div class=\"toast-icon\">{this.getIcon()}</div>\n          ) : null}\n          <div class=\"toast-content\">\n            {this.toastTitle ? (\n              <div class=\"toast-title\">{this.toastTitle}</div>\n            ) : null}\n            <div class=\"toast-message\">\n              <slot></slot>\n            </div>\n          </div>\n          <div class=\"toast-close\">\n            <ix-icon-button\n              icon={'close'}\n              size=\"24\"\n              ghost\n              onClick={() => this.closeToast.emit()}\n            />\n          </div>\n        </div>\n        {this.autoClose ? (\n          <div\n            class={progressBarClass.join(' ')}\n            style={progressBarStyle}\n            onAnimationEnd={() => {\n              this.close();\n            }}\n            onTransitionEnd={() => {\n              if (this.progress === 0) {\n                this.close();\n              }\n            }}\n          ></div>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAW,utE,MC0BJC,EAAK,M,0EAIU,O,8CAUD,I,eAKL,K,2DAiBA,E,aACD,K,CAIXC,UACN,GAAIC,KAAKC,KAAM,CACb,OAAOC,EAAA,WAASC,KAAMH,KAAKC,KAAMG,MAAOJ,KAAKK,UAAWC,KAAK,M,CAG/D,OAAQN,KAAKO,MACX,IAAK,OACH,OAAOL,EAAA,WAASC,KAAM,OAAQG,KAAK,KAAKF,MAAM,mBAEhD,IAAK,QACH,OAAOF,EAAA,WAASC,KAAM,QAASG,KAAK,KAAKF,MAAM,gBAEjD,IAAK,UACH,OAAOF,EAAA,WAASC,KAAM,UAAWG,KAAK,KAAKF,MAAM,kBAEnD,IAAK,UACH,OAAOF,EAAA,WAASC,KAAM,UAAWG,KAAK,KAAKF,MAAM,kBAEnD,QACE,MAAO,G,CAILI,QACN,GAAIR,KAAKS,YAAa,CACpBT,KAAKS,YAAYC,UAAUC,IAAI,mB,CAEjCC,YAAW,KACTZ,KAAKa,WAAWC,MAAM,GACrB,I,CAGLC,SACE,IAAIC,EAA2C,GAE/C,MAAMC,EAAmB,CAAC,sBAE1BD,EAAmB,CACjBE,kBAAmB,GAAGlB,KAAKmB,mBAC3BC,mBAAoBpB,KAAKqB,QAAU,SAAW,WAGhDJ,EAAiBK,KAAK,gCAEtB,OACEpB,EAACqB,EAAI,CAACC,MAAM,qCACVtB,EAAA,OACEsB,MAAM,aACNC,eAAgB,KACdzB,KAAKqB,QAAU,KAAK,EAEtBK,eAAgB,KACd1B,KAAKqB,QAAU,IAAI,GAGpBrB,KAAKO,MAAQP,KAAKC,KACjBC,EAAA,OAAKsB,MAAM,cAAcxB,KAAKD,WAC5B,KACJG,EAAA,OAAKsB,MAAM,iBACRxB,KAAK2B,WACJzB,EAAA,OAAKsB,MAAM,eAAexB,KAAK2B,YAC7B,KACJzB,EAAA,OAAKsB,MAAM,iBACTtB,EAAA,eAGJA,EAAA,OAAKsB,MAAM,eACTtB,EAAA,kBACED,KAAM,QACNK,KAAK,KACLsB,MAAK,KACLC,QAAS,IAAM7B,KAAKa,WAAWC,WAIpCd,KAAK8B,UACJ5B,EAAA,OACEsB,MAAOP,EAAiBc,KAAK,KAC7BC,MAAOhB,EACPiB,eAAgB,KACdjC,KAAKQ,OAAO,EAEd0B,gBAAiB,KACf,GAAIlC,KAAKmC,WAAa,EAAG,CACvBnC,KAAKQ,O,KAIT,K"}

package/dist/siemens-ix/p-f7b95fd7.entry.js

@@ -0,0 +1,2 @@
+import{r as o,c as e,h as r,F as t,H as n,g as i}from"./p-76a509c7.js";import{a}from"./p-810b5232.js";import{B as s}from"./p-ab452b82.js";import{b as d}from"./p-78c9489b.js";const l=":host{display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;-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)}: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 button{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host ix-spinner{margin-right:0.25rem}:host ix-icon{margin-right:0.25rem}:host .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host(.disabled){cursor:default}:host .btn-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-primary,:host .btn-primary.focus,:host .btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}:host .btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):active,:host .btn-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):active,:host .btn-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}:host(.disabled) .btn-primary.disabled,:host(.disabled) .btn-primary:disabled{pointer-events:none;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}:host .btn-outline-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-primary,:host .btn-outline-primary.focus,:host .btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);--ix-button-color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}:host .btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-primary--border-color--hover);background-color:var(--theme-btn-outline-primary--background--hover);color:var(--theme-btn-outline-primary--color--hover)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):active,:host .btn-outline-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-primary--border-color--active);background-color:var(--theme-btn-outline-primary--background--active);color:var(--theme-btn-outline-primary--color--active)}:host(.disabled) .btn-outline-primary.disabled,:host(.disabled) .btn-outline-primary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-primary--color--disabled)}:host .btn-invisible-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-primary,:host .btn-invisible-primary.focus,:host .btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}:host .btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):active,:host .btn-invisible-primary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}:host(.disabled) .btn-invisible-primary.disabled,:host(.disabled) .btn-invisible-primary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-primary--color--disabled)}:host .btn-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-secondary,:host .btn-secondary.focus,:host .btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}:host .btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):active,:host .btn-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}:host(.disabled) .btn-secondary.disabled,:host(.disabled) .btn-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}:host .btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-secondary,:host .btn-outline-secondary.focus,:host .btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);--ix-button-color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}:host .btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-secondary--border-color--hover);background-color:var(--theme-btn-outline-secondary--background--hover);color:var(--theme-btn-outline-secondary--color--hover)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):active,:host .btn-outline-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-secondary--border-color--active);background-color:var(--theme-btn-outline-secondary--background--active);color:var(--theme-btn-outline-secondary--color--active)}:host(.disabled) .btn-outline-secondary.disabled,:host(.disabled) .btn-outline-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-secondary--color--disabled)}:host .btn-invisible-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-secondary,:host .btn-invisible-secondary.focus,:host .btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);--ix-button-color:var(--theme-btn-invisible-secondary--color);border-color:transparent}:host .btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-secondary--background--active);color:var(--theme-btn-invisible-secondary--color--active)}:host(.disabled) .btn-invisible-secondary.disabled,:host(.disabled) .btn-invisible-secondary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}:host{min-width:5rem}:host{display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;-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)}: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 button{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host ix-spinner{margin-right:0.25rem}:host ix-icon{margin-right:0.25rem}:host .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host(.disabled){cursor:default}:host .btn-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-primary,:host .btn-primary.focus,:host .btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}:host .btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):active,:host .btn-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):active,:host .btn-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}:host(.disabled) .btn-primary.disabled,:host(.disabled) .btn-primary:disabled{pointer-events:none;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}:host .btn-outline-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-primary,:host .btn-outline-primary.focus,:host .btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);--ix-button-color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}:host .btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-primary--border-color--hover);background-color:var(--theme-btn-outline-primary--background--hover);color:var(--theme-btn-outline-primary--color--hover)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):active,:host .btn-outline-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-primary--border-color--active);background-color:var(--theme-btn-outline-primary--background--active);color:var(--theme-btn-outline-primary--color--active)}:host(.disabled) .btn-outline-primary.disabled,:host(.disabled) .btn-outline-primary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-primary--color--disabled)}:host .btn-invisible-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-primary,:host .btn-invisible-primary.focus,:host .btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}:host .btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):active,:host .btn-invisible-primary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}:host(.disabled) .btn-invisible-primary.disabled,:host(.disabled) .btn-invisible-primary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-primary--color--disabled)}:host .btn-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-secondary,:host .btn-secondary.focus,:host .btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}:host .btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):active,:host .btn-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}:host(.disabled) .btn-secondary.disabled,:host(.disabled) .btn-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}:host .btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-secondary,:host .btn-outline-secondary.focus,:host .btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);--ix-button-color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}:host .btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-secondary--border-color--hover);background-color:var(--theme-btn-outline-secondary--background--hover);color:var(--theme-btn-outline-secondary--color--hover)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):active,:host .btn-outline-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-secondary--border-color--active);background-color:var(--theme-btn-outline-secondary--background--active);color:var(--theme-btn-outline-secondary--color--active)}:host(.disabled) .btn-outline-secondary.disabled,:host(.disabled) .btn-outline-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-secondary--color--disabled)}:host .btn-invisible-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-secondary,:host .btn-invisible-secondary.focus,:host .btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);--ix-button-color:var(--theme-btn-invisible-secondary--color);border-color:transparent}:host .btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-secondary--background--active);color:var(--theme-btn-invisible-secondary--color--active)}:host(.disabled) .btn-invisible-secondary.disabled,:host(.disabled) .btn-invisible-secondary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}:host{display:flex;position:relative;flex-direction:row;flex-wrap:nowrap;align-items:center;margin-right:0.25rem;max-width:15rem;min-width:0}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host li{display:contents}:host .btn{pointer-events:all;width:-moz-fit-content;width:fit-content;padding-right:0;padding-left:0.25rem}:host .chevron{pointer-events:none;margin-left:0.5rem;margin-right:0rem;color:var(--theme-color-soft-text)}:host ::slotted(a[href]){text-decoration:none !important}:host ::slotted(a[href]:active){text-decoration:none !important}:host(:last-child) .btn:not(.dropdown-trigger){color:var(--theme-color-soft-text)}:host(.hide-chevron){cursor:default}:host(.hide-chevron) .btn{padding-right:0.5rem;pointer-events:none}:host(.invisible){display:none}:host(:focus-visible){outline:none}";const b=class{constructor(r){o(this,r);this.itemClick=e(this,"itemClick",7);this.label=undefined;this.icon=undefined;this.ghost=true;this.visible=true;this.showChevron=true;this.isDropdownTrigger=false}componentDidLoad(){this.animationFadeIn()}animationFadeIn(){a({targets:this.hostElement,duration:150,opacity:[0,1],translateX:["-100%","0%"],easing:"linear"})}render(){const o=d(this.hostElement);const e={variant:this.ghost?"primary":"secondary",outline:false,ghost:this.ghost,iconOnly:false,iconOval:false,disabled:false,icon:this.icon,iconSize:"16",loading:false,selected:false,type:"button",tabIndex:this.hostElement.tabIndex!==-1?this.hostElement.tabIndex:0,extraClasses:{"dropdown-trigger":this.isDropdownTrigger},ariaAttributes:o};if(!this.visible){return r(n,{class:"invisible"})}return r(n,{class:{"hide-chevron":!this.showChevron},onClick:()=>this.itemClick.emit(this.label)},r("li",null,r(s,Object.assign({},e,{afterContent:r(t,null,this.showChevron?r("ix-icon",{name:"chevron-right-small",size:"16",class:"chevron"}):null)}),this.label,r("slot",null))))}get hostElement(){return i(this)}};b.style=l;export{b as ix_breadcrumb_item};
+//# sourceMappingURL=p-f7b95fd7.entry.js.map

package/dist/siemens-ix/p-f7b95fd7.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["breadcrumbItemCss","BreadcrumbItem","componentDidLoad","this","animationFadeIn","animejs","targets","hostElement","duration","opacity","translateX","easing","render","a11y","a11yHostAttributes","props","variant","ghost","outline","iconOnly","iconOval","disabled","icon","iconSize","loading","selected","type","tabIndex","extraClasses","isDropdownTrigger","ariaAttributes","visible","h","Host","class","showChevron","onClick","itemClick","emit","label","BaseButton","Object","assign","afterContent","Fragment","name","size"],"sources":["./src/components/breadcrumb-item/breadcrumb-item.scss?tag=ix-breadcrumb-item&encapsulation=shadow","./src/components/breadcrumb-item/breadcrumb-item.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 'mixins/shadow-dom/component';\n@import '../button/button-mixin';\n@import '../button/button';\n\n@include all-btn-variants;\n\n:host {\n  @include ix-component;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: center;\n  margin-right: 0.25rem;\n  max-width: 15rem;\n  min-width: 0;\n\n  li {\n    display: contents;\n  }\n\n  .btn {\n    pointer-events: all;\n    width: fit-content;\n    padding-right: 0;\n    padding-left: 0.25rem;\n  }\n\n  .chevron {\n    pointer-events: none;\n    margin-left: 0.5rem;\n    margin-right: 0rem;\n    color: var(--theme-color-soft-text);\n  }\n\n  ::slotted(a[href]) {\n    text-decoration: none !important;\n  }\n\n  ::slotted(a[href]:active) {\n    text-decoration: none !important;\n  }\n}\n\n:host(:last-child) {\n  .btn:not(.dropdown-trigger) {\n    color: var(--theme-color-soft-text);\n  }\n}\n\n:host(.hide-chevron) {\n  cursor: default;\n\n  .btn {\n    padding-right: 0.5rem;\n    pointer-events: none;\n  }\n}\n\n:host(.invisible) {\n  display: none;\n}\n\n:host(:focus-visible) {\n  outline: 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  Fragment,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\nimport animejs from 'animejs';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { a11yHostAttributes } from '../utils/a11y';\n\nexport type BreadcrumbItemLinkTarget =\n  | '_self'\n  | '_blank'\n  | '_parent'\n  | '_top'\n  | string;\n\n@Component({\n  tag: 'ix-breadcrumb-item',\n  styleUrl: 'breadcrumb-item.scss',\n  shadow: true,\n})\nexport class BreadcrumbItem {\n  @Element() hostElement!: HTMLIxBreadcrumbItemElement;\n\n  /**\n   * Breadcrumb label\n   */\n  @Prop() label: string;\n\n  /**\n   * Icon to be displayed next ot the label\n   */\n  @Prop() icon: string;\n\n  /**@internal */\n  @Prop() ghost: boolean = true;\n\n  /**@internal */\n  @Prop() visible = true;\n\n  /**@internal */\n  @Prop() showChevron = true;\n\n  /** @internal */\n  @Prop() isDropdownTrigger = false;\n\n  /**@internal */\n  @Event() itemClick: EventEmitter<string>;\n\n  componentDidLoad() {\n    this.animationFadeIn();\n  }\n\n  animationFadeIn() {\n    animejs({\n      targets: this.hostElement,\n      duration: 150,\n      opacity: [0, 1],\n      translateX: ['-100%', '0%'],\n      easing: 'linear',\n    });\n  }\n\n  render() {\n    const a11y = a11yHostAttributes(this.hostElement);\n    const props: BaseButtonProps = {\n      variant: this.ghost ? 'primary' : 'secondary',\n      outline: false,\n      ghost: this.ghost,\n      iconOnly: false,\n      iconOval: false,\n      disabled: false,\n      icon: this.icon,\n      iconSize: '16',\n      loading: false,\n      selected: false,\n      type: 'button',\n      tabIndex:\n        this.hostElement.tabIndex !== -1 ? this.hostElement.tabIndex : 0,\n      extraClasses: {\n        'dropdown-trigger': this.isDropdownTrigger,\n      },\n      ariaAttributes: a11y,\n    };\n\n    if (!this.visible) {\n      return <Host class={'invisible'}></Host>;\n    }\n\n    return (\n      <Host\n        class={{\n          'hide-chevron': !this.showChevron,\n        }}\n        onClick={() => this.itemClick.emit(this.label)}\n      >\n        <li>\n          <BaseButton\n            {...props}\n            afterContent={\n              <Fragment>\n                {this.showChevron ? (\n                  <ix-icon\n                    name={'chevron-right-small'}\n                    size=\"16\"\n                    class={'chevron'}\n                  ></ix-icon>\n                ) : null}\n              </Fragment>\n            }\n          >\n            {this.label}\n            <slot></slot>\n          </BaseButton>\n        </li>\n      </Host>\n    );\n  }\n}\n"],"mappings":"8KAAA,MAAMA,EAAoB,sy9B,MCmCbC,EAAc,M,kHAcA,K,aAGP,K,iBAGI,K,uBAGM,K,CAK5BC,mBACEC,KAAKC,iB,CAGPA,kBACEC,EAAQ,CACNC,QAASH,KAAKI,YACdC,SAAU,IACVC,QAAS,CAAC,EAAG,GACbC,WAAY,CAAC,QAAS,MACtBC,OAAQ,U,CAIZC,SACE,MAAMC,EAAOC,EAAmBX,KAAKI,aACrC,MAAMQ,EAAyB,CAC7BC,QAASb,KAAKc,MAAQ,UAAY,YAClCC,QAAS,MACTD,MAAOd,KAAKc,MACZE,SAAU,MACVC,SAAU,MACVC,SAAU,MACVC,KAAMnB,KAAKmB,KACXC,SAAU,KACVC,QAAS,MACTC,SAAU,MACVC,KAAM,SACNC,SACExB,KAAKI,YAAYoB,YAAc,EAAIxB,KAAKI,YAAYoB,SAAW,EACjEC,aAAc,CACZ,mBAAoBzB,KAAK0B,mBAE3BC,eAAgBjB,GAGlB,IAAKV,KAAK4B,QAAS,CACjB,OAAOC,EAACC,EAAI,CAACC,MAAO,a,CAGtB,OACEF,EAACC,EAAI,CACHC,MAAO,CACL,gBAAiB/B,KAAKgC,aAExBC,QAAS,IAAMjC,KAAKkC,UAAUC,KAAKnC,KAAKoC,QAExCP,EAAA,UACEA,EAACQ,EAAUC,OAAAC,OAAA,GACL3B,EAAK,CACT4B,aACEX,EAACY,EAAQ,KACNzC,KAAKgC,YACJH,EAAA,WACEa,KAAM,sBACNC,KAAK,KACLZ,MAAO,YAEP,QAIP/B,KAAKoC,MACNP,EAAA,e"}

package/dist/siemens-ix/p-f97f2394.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as i,H as e,g as a}from"./p-76a509c7.js";import{u as o,A as s}from"./p-85f39bd4.js";import{a as r,m as n}from"./p-5d172daa.js";import{h}from"./p-04eeba9e.js";import{t as l}from"./p-9a05ac00.js";import"./p-9ee41861.js";import"./p-20e12c7e.js";const c=":host{display:flex;position:relative;width:100%;height:100%;flex-direction:column}: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 ix-application-header{z-index:calc(var(--theme-z-index-sticky) + 1)}:host .logo-wrapper{display:contents}:host .application{display:flex;position:relative;flex-direction:row;height:100%;width:100%;overflow:hidden}:host main{display:block;position:relative;height:100%;width:100%;overflow:hidden}:host(.breakpoint-md){--ix-application-menu-margin-left:3.25rem}:host(.breakpoint-md) aside.slotted{margin-left:var(--ix-application-menu-margin-left)}:host(.breakpoint-md) aside.slotted+main{margin-left:0}:host(.breakpoint-md) aside:not(.slotted)+main{margin-left:var(--ix-application-menu-margin-left)}:host(.breakpoint-lg){--ix-application-menu-margin-left:0}:host(.breakpoint-sm){--ix-application-menu-margin-left:0}";const d=class{constructor(i){t(this,i);this.theme=undefined;this.themeSystemAppearance=false;this.forceBreakpoint=undefined;this.breakpoints=["sm","md","lg"];this.breakpoint="lg";this.applicationSidebarSlotted=false}forceLayoutChange(t){if(!t){r.enableBreakpointDetection();return}r.disableBreakpointDetection();r.setBreakpoint(t)}onBreakpointsChange(t){r.setBreakpoints(t)}get menu(){return this.hostElement.querySelector("ix-menu")}get applicationSidebarSlot(){return this.hostElement.shadowRoot.querySelector(".application-sidebar slot")}onContentClick(){var t;if(n.isPinned){return}(t=this.menu)===null||t===void 0?void 0:t.toggleMenu(false)}componentWillLoad(){r.setBreakpoints(this.breakpoints);this.contextProvider=o(this.hostElement,s,{hideHeader:false,host:"basic-navigation",sidebar:this.applicationSidebarSlotted});this.modeDisposable=r.onChange.on((t=>{this.breakpoint=t}));this.breakpoint=r.breakpoint;if(this.forceBreakpoint){this.forceLayoutChange(this.forceBreakpoint)}this.changeTheme()}disconnectedCallback(){var t;(t=this.modeDisposable)===null||t===void 0?void 0:t.dispose()}changeTheme(){if(!this.theme){if(this.themeSystemAppearance){l.setVariant()}return}if(l.hasVariantSuffix(this.theme)){l.setTheme(`theme-${this.theme}`);return}l.setTheme(`theme-${this.theme}-dark`,this.themeSystemAppearance)}onApplicationSidebarChange(){this.contextProvider.emit({hideHeader:false,host:"basic-navigation",sidebar:this.applicationSidebarSlotted})}render(){return i(e,{"data-role":"",class:{[`breakpoint-${this.breakpoint}`]:true}},i("slot",{name:"application-header"}),i("div",{class:"application"},i("slot",{name:"menu"}),i("aside",{class:{"application-sidebar":true,slotted:this.applicationSidebarSlotted},onClick:()=>this.onContentClick()},i("slot",{name:"application-sidebar",onSlotchange:()=>this.applicationSidebarSlotted=h(this.applicationSidebarSlot)})),i("main",{class:"content",onClick:()=>this.onContentClick()},i("slot",null))))}get hostElement(){return a(this)}static get watchers(){return{breakpoints:["onBreakpointsChange"],theme:["changeTheme"],themeSystemAppearance:["changeTheme"],applicationSidebarSlotted:["onApplicationSidebarChange"]}}};d.style=c;export{d as ix_application};
+//# sourceMappingURL=p-f97f2394.entry.js.map

package/dist/siemens-ix/p-fa0d5f4e.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as r,H as a,g as o}from"./p-76a509c7.js";import{b as i}from"./p-78c9489b.js";const s=':host{display:flex;flex-direction:column;min-height:2rem;--thumb-size:1rem;--value:0;--trace-start:0;--trace-end:0;--trace-reference:0;--trace-reference-color:var(--theme-color-8);--trace-color:var(--theme-color-dynamic);--tick-color:var(--theme-color-7);--tick-color--active:var(--theme-color-dynamic);--track-color:var(--theme-color-component-4);}: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 input[type=range]{position:absolute;top:50%;transform:translateY(-50%);left:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;width:100%;height:1rem;margin:0}:host input[type=range].trace::before{content:"";position:absolute;display:block;z-index:-1;width:calc(7px + 100% * var(--trace-end) - 16px * var(--trace-end) - (7px + 100% * var(--trace-start) - 16px * var(--trace-start)));left:calc(7px + 100% * var(--trace-start) - 16px * var(--trace-start));height:4px;background-color:var(--trace-color);top:50%;transform:translateY(-50%)}:host input[type=range].trace::after{content:"";position:absolute;display:block;width:2px;height:16px;background-color:var(--trace-reference-color);top:50%;transform:translateY(-50%);left:calc(7px + 100% * var(--trace-reference) - 16px * var(--trace-reference))}:host input[type=range]::-webkit-slider-runnable-track{background:transparent;height:0.25rem}:host input[type=range]::-moz-range-track{background:transparent;height:0.25rem}:host input[type=range i]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-6px}:host input[type=range i]::-moz-range-thumb{border:none;border-radius:0}:host input[type=range]::-webkit-slider-thumb{border-radius:100px;background-color:var(--theme-color-dynamic);height:var(--thumb-size);width:var(--thumb-size);-webkit-transition:all var(--theme-default-time) ease-in-out;transition:all var(--theme-default-time) ease-in-out;z-index:10}:host input[type=range]::-moz-range-thumb{border-radius:100px;background-color:var(--theme-color-dynamic);height:var(--thumb-size);width:var(--thumb-size);-moz-transition:all var(--theme-default-time) ease-in-out;transition:all var(--theme-default-time) ease-in-out;z-index:10}:host input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}:host input[type=range]:hover::-moz-range-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}:host input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}:host input[type=range]:active::-moz-range-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}:host input[type=range]:focus{outline:none}:host input[type=range]:focus-visible::-webkit-slider-thumb{outline:1px solid var(--theme-color-focus-bdr);outline-offset:0.125rem}:host input[type=range]:focus-visible::-moz-range-thumb{outline:1px solid var(--theme-color-focus-bdr);outline-offset:0.125rem}:host .ticks{display:flex;position:relative;top:50%;transform:translateY(-50%)}:host .ticks .tick{display:block;position:absolute;width:8px;height:8px;background-color:var(--tick-color);border-radius:100px;top:50%;transform:translateY(-50%);left:calc(var(--tick-value) * 100% - 4px)}:host .ticks .tick.tick-active{background-color:var(--tick-color--active)}:host .slider{position:relative;display:block;width:100%;height:1.5rem}:host .track{position:absolute;background-color:var(--track-color);height:4px;width:calc(100% - 1rem);margin-left:0.5rem;top:50%;transform:translateY(-50%);left:0px}:host .thumb{display:block;position:absolute;background-color:transparent;height:1rem;width:1rem;border-radius:100px;left:0px;top:50%;transform:translateY(-50%)}:host .hide-tooltip{display:none}:host .label{display:flex;position:relative;align-items:center;justify-content:space-between;width:100%;margin-top:0.5rem;min-height:0px}:host .label-start{margin-left:0.5rem}:host .label-end{margin-right:0.5rem}:host .label-error{margin-left:0.5rem}:host(.error){--trace-color:var(--theme-color-alarm-40);--tick-color--active:var(--theme-color-alarm)}:host(.error) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-color-alarm)}:host(.error) input[type=range]::-moz-range-thumb{background-color:var(--theme-color-alarm)}:host(.disabled){pointer-events:none;--track-color:var(--theme-color-component-3);--trace-color:var(--theme-color-3);--tick-color:var(--theme-color-7);--tick-color--active:var(--theme-color-7)}:host(.disabled) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-color-7)}:host(.disabled) input[type=range]::-moz-range-thumb{background-color:var(--theme-color-7)}';function n(t,e,r){if(e<t){return t}else if(e>r){return r}else{return e}}const l=class{constructor(r){t(this,r);this.valueChange=e(this,"valueChange",7);this.step=undefined;this.min=0;this.max=100;this.value=0;this.marker=undefined;this.trace=false;this.traceReference=0;this.disabled=false;this.error=undefined;this.rangeInput=0;this.rangeMin=0;this.rangeMax=100;this.rangeTraceReference=0;this.showTooltip=false}get tooltip(){return this.hostElement.shadowRoot.querySelector("ix-tooltip")}get pseudoThumb(){return this.hostElement.shadowRoot.querySelector(".thumb")}get slider(){return this.hostElement.shadowRoot.getElementById("slider")}onShowTooltipChange(){if(this.showTooltip){this.tooltip.showTooltip(this.pseudoThumb);return}this.tooltip.hideTooltip()}componentWillLoad(){this.a11yAttributes=i(this.hostElement,["role","aria-valuemin","aria-valuemax","aria-valuenow"]);this.updateRangeVariables()}updateRangeVariables(){this.rangeInput=n(this.min,this.value,this.max);this.rangeTraceReference=n(this.min,this.traceReference,this.max);this.rangeMin=Math.min(this.min,this.max);this.rangeMax=Math.max(this.min,this.max)}onInput(t){t.stopPropagation();const e=parseInt(this.slider.value);if(!isNaN(e)){this.rangeInput=e;this.emitInputEvent()}}emitInputEvent(){this.valueChange.emit(this.rangeInput)}isMarkerActive(t){const e=Math.min(this.traceReference,this.rangeInput);const r=Math.max(this.traceReference,this.rangeInput);const a=t;return a>=e&&a<=r}onPointerUp(){this.showTooltip=false}render(){const t=this.rangeMax-this.rangeMin;let e=(this.rangeTraceReference-this.rangeMin)/t;let o=(this.rangeInput-this.rangeMin)/t;const i=o-e;let s=e;let n=o;if(i<=0){s=o;n=e}return r(a,{class:{disabled:this.disabled,error:!!this.error},onPointerDown:()=>setTimeout((()=>this.showTooltip=true))},r("div",{class:"slider"},r("div",{class:"track"},r("div",{class:"thumb",style:{left:`calc(${o} * 100% - 8px)`}}),r("div",{class:"ticks"},this.marker?this.marker.map((e=>{if(e>this.max||e<this.min){return}let a=(e-this.rangeMin)/t;return r("div",{class:{tick:true,"tick-active":this.isMarkerActive(e)&&this.trace},style:{"--tick-value":`${a}`}})})):null)),r("input",Object.assign({id:"slider",type:"range",list:this.marker?"markers":undefined,step:this.step,min:this.min,max:this.max,value:this.rangeInput,tabindex:this.disabled?-1:0,onInput:t=>this.onInput(t),style:{"--value":`${o}`,"--trace-reference":`${e}`,"--trace-start":`${s}`,"--trace-end":`${n}`},class:{trace:this.trace&&e!==o},onFocus:()=>{this.showTooltip=true},onBlur:()=>{this.showTooltip=false},role:"slider","aria-valuenow":this.rangeInput,"aria-valuemin":this.min,"aria-valuemax":this.max},this.a11yAttributes)),r("ix-tooltip",{class:{"hide-tooltip":!this.showTooltip},animationFrame:true},this.rangeInput)),r("div",{class:"label"},r("div",{class:"label-start"},r("slot",{name:"label-start"})),r("div",{class:"label-end"},r("slot",{name:"label-end"}))),this.error?r("ix-typography",{class:"label-error",color:"alarm"},this.error):null)}get hostElement(){return o(this)}static get watchers(){return{showTooltip:["onShowTooltipChange"],value:["updateRangeVariables"],max:["updateRangeVariables"],min:["updateRangeVariables"],traceReference:["updateRangeVariables"]}}};l.style=s;export{l as ix_slider};
+//# sourceMappingURL=p-fa0d5f4e.entry.js.map

package/dist/siemens-ix/p-fa0d5f4e.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sliderCss","between","min","value","max","IxSlider","tooltip","this","hostElement","shadowRoot","querySelector","pseudoThumb","slider","getElementById","onShowTooltipChange","showTooltip","hideTooltip","componentWillLoad","a11yAttributes","a11yHostAttributes","updateRangeVariables","rangeInput","rangeTraceReference","traceReference","rangeMin","Math","rangeMax","onInput","event","stopPropagation","parseInt","isNaN","emitInputEvent","valueChange","emit","isMarkerActive","markerValue","start","end","onPointerUp","render","range","traceReferenceInPercentage","valueInPercentage","distance","traceStart","traceEnd","h","Host","class","disabled","error","onPointerDown","setTimeout","style","left","marker","map","tick","trace","Object","assign","id","type","list","undefined","step","tabindex","onFocus","onBlur","role","animationFrame","name","color"],"sources":["./src/components/slider/slider.scss?tag=ix-slider&encapsulation=shadow","./src/components/slider/slider.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n\n@mixin track {\n  // Chrome, Safari, Opera, and Edge Chromium\n  input[type='range']::-webkit-slider-runnable-track {\n    @content;\n  }\n\n  // Firefox\n  input[type='range']::-moz-range-track {\n    @content;\n  }\n}\n\n@mixin clear-browser-thumb {\n  // Chrome, Safari, Opera, and Edge Chromium\n  input[type='range' i]::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    margin-top: -6px;\n  }\n\n  // Firefox\n  input[type='range' i]::-moz-range-thumb {\n    border: none;\n    border-radius: 0;\n  }\n}\n\n@mixin thumb {\n  // Chrome, Safari, Opera, and Edge Chromium\n  input[type='range']::-webkit-slider-thumb {\n    @content;\n  }\n\n  // Firefox\n  input[type='range']::-moz-range-thumb {\n    @content;\n  }\n}\n\n@mixin thumb-hover {\n  // Chrome, Safari, Opera, and Edge Chromium\n  input[type='range']:hover::-webkit-slider-thumb {\n    @content;\n  }\n\n  // Firefox\n  input[type='range']:hover::-moz-range-thumb {\n    @content;\n  }\n}\n\n@mixin thumb-active {\n  // Chrome, Safari, Opera, and Edge Chromium\n  input[type='range']:active::-webkit-slider-thumb {\n    @content;\n  }\n\n  // Firefox\n  input[type='range']:active::-moz-range-thumb {\n    @content;\n  }\n}\n\n@mixin thumb-focus {\n  input[type='range']:focus {\n    outline: none;\n  }\n\n  // Chrome, Safari, Opera, and Edge Chromium\n  input[type='range']:focus-visible::-webkit-slider-thumb {\n    @content;\n  }\n\n  // Firefox\n  input[type='range']:focus-visible::-moz-range-thumb {\n    @content;\n  }\n}\n\n:host {\n  @include ix-component;\n  display: flex;\n  flex-direction: column;\n  min-height: 2rem;\n  --thumb-size: 1rem;\n  --value: 0;\n  --trace-start: 0;\n  --trace-end: 0;\n  --trace-reference: 0;\n  --trace-reference-color: var(--theme-color-8);\n  --trace-color: var(--theme-color-dynamic);\n  --tick-color: var(--theme-color-7);\n  --tick-color--active: var(--theme-color-dynamic);\n  --track-color: var(--theme-color-component-4);\n\n  input[type='range'] {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: 0;\n    appearance: none;\n    background: transparent;\n    cursor: pointer;\n    width: 100%;\n    height: 1rem;\n    margin: 0;\n  }\n\n  // Trace line\n  input[type='range'].trace::before {\n    content: '';\n    position: absolute;\n    display: block;\n    z-index: -1;\n\n    width: calc(\n      calc(7px + calc(100% * var(--trace-end)) - calc(16px * var(--trace-end))) -\n        calc(\n          7px + calc(100% * var(--trace-start)) -\n            calc(16px * var(--trace-start))\n        )\n    );\n\n    left: calc(\n      7px + calc(100% * var(--trace-start)) - calc(16px * var(--trace-start))\n    );\n\n    height: 4px;\n    background-color: var(--trace-color);\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  // Trace reference\n  input[type='range'].trace::after {\n    content: '';\n    position: absolute;\n    display: block;\n    width: 2px;\n    height: 16px;\n    background-color: var(--trace-reference-color);\n    top: 50%;\n    transform: translateY(-50%);\n    left: calc(\n      7px + calc(100% * var(--trace-reference)) -\n        calc(16px * var(--trace-reference))\n    );\n  }\n\n  @include track() {\n    background: transparent;\n    height: 0.25rem;\n  }\n\n  @include clear-browser-thumb();\n\n  @include thumb() {\n    border-radius: 100px;\n    background-color: var(--theme-color-dynamic);\n    height: var(--thumb-size);\n    width: var(--thumb-size);\n    transition: all var(--theme-default-time) ease-in-out;\n    z-index: 10;\n  }\n\n  @include thumb-hover() {\n    transform: scale(1.2);\n    background-color: var(--theme-color-dynamic);\n  }\n\n  @include thumb-active() {\n    transform: scale(1.2);\n\n    background-color: var(--theme-color-dynamic);\n  }\n\n  @include thumb-focus() {\n    outline: 1px solid var(--theme-color-focus-bdr);\n    outline-offset: 0.125rem;\n  }\n\n  /* style datalist */\n  .ticks {\n    display: flex;\n    position: relative;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n  .ticks .tick {\n    display: block;\n    position: absolute;\n    width: 8px;\n    height: 8px;\n    background-color: var(--tick-color);\n    border-radius: 100px;\n    top: 50%;\n    transform: translateY(-50%);\n    left: calc(var(--tick-value) * 100% - 4px);\n  }\n\n  .ticks .tick.tick-active {\n    background-color: var(--tick-color--active);\n  }\n\n  .slider {\n    position: relative;\n    display: block;\n    width: 100%;\n    height: 1.5rem;\n  }\n\n  .track {\n    position: absolute;\n    background-color: var(--track-color);\n    height: 4px;\n    width: calc(100% - 1rem);\n    margin-left: 0.5rem;\n    top: 50%;\n    transform: translateY(-50%);\n    left: 0px;\n  }\n\n  .thumb {\n    display: block;\n    position: absolute;\n    background-color: transparent;\n    height: 1rem;\n    width: 1rem;\n    border-radius: 100px;\n    left: 0px;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  .hide-tooltip {\n    display: none;\n  }\n\n  .label {\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    margin-top: 0.5rem;\n\n    min-height: 0px;\n  }\n\n  .label-start {\n    margin-left: 0.5rem;\n  }\n\n  .label-end {\n    margin-right: 0.5rem;\n  }\n\n  .label-error {\n    margin-left: 0.5rem;\n  }\n}\n\n:host(.error) {\n  --trace-color: var(--theme-color-alarm-40);\n  --tick-color--active: var(--theme-color-alarm);\n\n  @include thumb() {\n    background-color: var(--theme-color-alarm);\n  }\n}\n\n:host(.disabled) {\n  pointer-events: none;\n\n  --track-color: var(--theme-color-component-3);\n  --trace-color: var(--theme-color-3);\n  --tick-color: var(--theme-color-7);\n  --tick-color--active: var(--theme-color-7);\n\n  @include thumb() {\n    background-color: var(--theme-color-7);\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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { A11yAttributes, a11yHostAttributes } from '../utils/a11y';\n\nexport type SliderMarker = Array<number>;\n\nfunction between(min: number, value: number, max: number) {\n  if (value < min) {\n    return min;\n  } else if (value > max) {\n    return max;\n  } else {\n    return value;\n  }\n}\n\n/**\n * @since 2.0.0\n *\n * @slot label-start - Element will be displayed at the start of the slider\n * @slot label-end - Element will be displayed at the end of the slider\n */\n@Component({\n  tag: 'ix-slider',\n  styleUrl: 'slider.scss',\n  shadow: true,\n})\nexport class IxSlider {\n  @Element() hostElement!: HTMLIxSliderElement;\n\n  /**\n   * Legal number intervals\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#step\n   */\n  @Prop() step: number;\n\n  /**\n   * Minimum slider value\n   */\n  @Prop() min = 0;\n\n  /**\n   * Maximum slider value\n   */\n  @Prop() max = 100;\n\n  /**\n   * Current value of the slider\n   */\n  @Prop() value = 0;\n\n  /**\n   * Define tick marker on the slider. Marker has to be within slider min/max\n   */\n  @Prop() marker: SliderMarker;\n\n  /**\n   * Show a trace line\n   */\n  @Prop() trace = false;\n\n  /**\n   * Define the start point of the trace line\n   */\n  @Prop() traceReference = 0;\n\n  /**\n   * Show control as disabled\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Show error state and message\n   */\n  @Prop() error: boolean | string;\n\n  /**\n   *\n   */\n  @Event() valueChange: EventEmitter<number>;\n\n  @State() rangeInput = 0;\n  @State() rangeMin = 0;\n  @State() rangeMax = 100;\n  @State() rangeTraceReference = 0;\n  @State() showTooltip = false;\n\n  private a11yAttributes: A11yAttributes;\n\n  get tooltip() {\n    return this.hostElement.shadowRoot.querySelector('ix-tooltip');\n  }\n\n  get pseudoThumb() {\n    return this.hostElement.shadowRoot.querySelector('.thumb') as HTMLElement;\n  }\n\n  get slider() {\n    return this.hostElement.shadowRoot.getElementById(\n      'slider'\n    ) as HTMLInputElement;\n  }\n\n  @Watch('showTooltip')\n  onShowTooltipChange() {\n    if (this.showTooltip) {\n      this.tooltip.showTooltip(this.pseudoThumb);\n      return;\n    }\n\n    this.tooltip.hideTooltip();\n  }\n\n  componentWillLoad() {\n    this.a11yAttributes = a11yHostAttributes(this.hostElement, [\n      'role',\n      'aria-valuemin',\n      'aria-valuemax',\n      'aria-valuenow',\n    ]);\n    this.updateRangeVariables();\n  }\n\n  @Watch('value')\n  @Watch('max')\n  @Watch('min')\n  @Watch('traceReference')\n  private updateRangeVariables() {\n    this.rangeInput = between(this.min, this.value, this.max);\n    this.rangeTraceReference = between(this.min, this.traceReference, this.max);\n    this.rangeMin = Math.min(this.min, this.max);\n    this.rangeMax = Math.max(this.min, this.max);\n  }\n\n  private onInput(event: InputEvent) {\n    event.stopPropagation();\n    const value = parseInt(this.slider.value);\n\n    if (!isNaN(value)) {\n      this.rangeInput = value;\n      this.emitInputEvent();\n    }\n  }\n\n  private emitInputEvent() {\n    this.valueChange.emit(this.rangeInput);\n  }\n\n  private isMarkerActive(markerValue: number) {\n    const start = Math.min(this.traceReference, this.rangeInput);\n    const end = Math.max(this.traceReference, this.rangeInput);\n    const value = markerValue;\n\n    return value >= start && value <= end;\n  }\n\n  // Listen globally on window because sometimes the event listener\n  // of the DOM element input itself is not called if the release\n  // click is not inside the element anymore\n  @Listen('pointerup', {\n    target: 'window',\n  })\n  onPointerUp() {\n    this.showTooltip = false;\n  }\n\n  render() {\n    const range = this.rangeMax - this.rangeMin;\n\n    let traceReferenceInPercentage =\n      (this.rangeTraceReference - this.rangeMin) / range;\n\n    let valueInPercentage = (this.rangeInput - this.rangeMin) / range;\n\n    const distance = valueInPercentage - traceReferenceInPercentage;\n\n    let traceStart = traceReferenceInPercentage;\n    let traceEnd = valueInPercentage;\n\n    if (distance <= 0) {\n      traceStart = valueInPercentage;\n      traceEnd = traceReferenceInPercentage;\n    }\n\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          error: !!this.error,\n        }}\n        onPointerDown={() => setTimeout(() => (this.showTooltip = true))}\n      >\n        <div class=\"slider\">\n          <div class=\"track\">\n            <div\n              class=\"thumb\"\n              style={{\n                left: `calc(${valueInPercentage} * 100% - 8px)`,\n              }}\n            ></div>\n            <div class=\"ticks\">\n              {this.marker\n                ? this.marker.map((markerValue) => {\n                    if (markerValue > this.max || markerValue < this.min) {\n                      return;\n                    }\n\n                    let left = (markerValue - this.rangeMin) / range;\n\n                    return (\n                      <div\n                        class={{\n                          tick: true,\n                          'tick-active':\n                            this.isMarkerActive(markerValue) && this.trace,\n                        }}\n                        style={{\n                          '--tick-value': `${left}`,\n                        }}\n                      ></div>\n                    );\n                  })\n                : null}\n            </div>\n          </div>\n\n          <input\n            id=\"slider\"\n            type=\"range\"\n            list={this.marker ? 'markers' : undefined}\n            step={this.step}\n            min={this.min}\n            max={this.max}\n            value={this.rangeInput}\n            tabindex={this.disabled ? -1 : 0}\n            onInput={(event) => this.onInput(event)}\n            style={{\n              '--value': `${valueInPercentage}`,\n              '--trace-reference': `${traceReferenceInPercentage}`,\n              '--trace-start': `${traceStart}`,\n              '--trace-end': `${traceEnd}`,\n            }}\n            class={{\n              trace:\n                this.trace && traceReferenceInPercentage !== valueInPercentage,\n            }}\n            onFocus={() => {\n              this.showTooltip = true;\n            }}\n            onBlur={() => {\n              this.showTooltip = false;\n            }}\n            role=\"slider\"\n            aria-valuenow={this.rangeInput}\n            aria-valuemin={this.min}\n            aria-valuemax={this.max}\n            {...this.a11yAttributes}\n          />\n\n          <ix-tooltip\n            class={{\n              'hide-tooltip': !this.showTooltip,\n            }}\n            animationFrame={true}\n          >\n            {this.rangeInput}\n          </ix-tooltip>\n        </div>\n        <div class=\"label\">\n          <div class=\"label-start\">\n            <slot name=\"label-start\"></slot>\n          </div>\n          <div class=\"label-end\">\n            <slot name=\"label-end\"></slot>\n          </div>\n        </div>\n        {this.error ? (\n          <ix-typography class={'label-error'} color=\"alarm\">\n            {this.error}\n          </ix-typography>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/siemens-ix/p-fba61526.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as s,h as i,g as e}from"./p-76a509c7.js";const n=":host{display:contents}";const o=class{constructor(i){t(this,i);this.itemClick=s(this,"itemClick",7);this.icon=undefined;this.label=undefined}render(){return i("ix-dropdown-item",{suppressChecked:true,icon:this.icon,label:this.label,onItemClick:t=>{t.preventDefault();t.stopPropagation()},onClick:t=>this.itemClick.emit(t)})}get hostElement(){return e(this)}};o.style=n;export{o as ix_split_button_item};
+//# sourceMappingURL=p-fba61526.entry.js.map

package/dist/siemens-ix/p-fba61526.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["splitButtonItemCss","SplitButtonItem","render","h","suppressChecked","icon","this","label","onItemClick","e","preventDefault","stopPropagation","onClick","itemClick","emit"],"sources":["./src/components/split-button-item/split-button-item.css?tag=ix-split-button-item&encapsulation=shadow","./src/components/split-button-item/split-button-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n  display: contents;\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  Prop,\n} from '@stencil/core';\n\n/**\n * @deprecated since 2.0.0. Use the `ix-dropdown-item` component instead.\n */\n@Component({\n  tag: 'ix-split-button-item',\n  styleUrl: 'split-button-item.css',\n  shadow: true,\n})\nexport class SplitButtonItem {\n  /**\n   * Dropdown icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Dropdown label\n   */\n  @Prop() label: string;\n\n  /**\n   * Dropdown item clicked\n   */\n  @Event() itemClick: EventEmitter<MouseEvent>;\n\n  @Element() hostElement: HTMLIxSplitButtonItemElement;\n\n  render() {\n    return (\n      <ix-dropdown-item\n        suppressChecked\n        icon={this.icon}\n        label={this.label}\n        onItemClick={(e) => {\n          e.preventDefault();\n          e.stopPropagation();\n        }}\n        onClick={(e) => this.itemClick.emit(e)}\n      ></ix-dropdown-item>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAqB,0B,MC0BdC,EAAe,M,uGAkB1BC,SACE,OACEC,EAAA,oBACEC,gBAAe,KACfC,KAAMC,KAAKD,KACXE,MAAOD,KAAKC,MACZC,YAAcC,IACZA,EAAEC,iBACFD,EAAEE,iBAAiB,EAErBC,QAAUH,GAAMH,KAAKO,UAAUC,KAAKL,I"}

package/dist/siemens-ix/p-fd08b7ad.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as r,h as o,H as i,g as s}from"./p-76a509c7.js";const e=".btn-group ix-button:first-child .btn{border-top-right-radius:0px;border-bottom-right-radius:0px;border-right:0px}.btn-group ix-button:last-child .btn{border-top-left-radius:0px;border-bottom-left-radius:0px}.btn-group ix-button:not(:first-child):not(:last-child) .btn{border-radius:0px;border-right:0px}:host{display:inline-block}: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 .btn-group{position:relative;display:inline-flex;vertical-align:middle;width:100%}:host .btn-group>ix-button:nth-child(1){width:calc(100% - 2rem)}:host .btn-group>ix-button:nth-child(2){width:2rem}:host .middle-gap{gap:0.125rem}:host .left-button-border{border-top-width:0.125rem;border-right-width:0;border-left-width:0.125rem;border-bottom-width:0.125rem}";const h=class{constructor(o){t(this,o);this.buttonClick=r(this,"buttonClick",7);this.variant="primary";this.outline=false;this.ghost=false;this.label=undefined;this.icon="";this.splitIcon="context-menu";this.disabled=false;this.placement="bottom-start";this.toggle=false}linkTriggerRef(){if(this.triggerElement&&this.dropdownElement){this.dropdownElement.trigger=this.triggerElement}}componentDidLoad(){this.linkTriggerRef()}render(){const t={variant:this.variant,outline:this.outline,ghost:this.ghost,disabled:this.disabled,class:{"left-button-border":!this.outline}};return o(i,null,o("div",{class:{"btn-group":true,"middle-gap":!this.outline}},this.label?o("ix-button",Object.assign({},t,{icon:this.icon,onClick:t=>this.buttonClick.emit(t)}),this.label):o("ix-icon-button",Object.assign({},t,{icon:this.icon,onClick:t=>this.buttonClick.emit(t)})),o("ix-icon-button",Object.assign({},t,{ref:t=>this.triggerElement=t,class:"anchor",icon:this.splitIcon}))),o("ix-dropdown",{ref:t=>this.dropdownElement=t},o("slot",null)))}get hostElement(){return s(this)}};h.style=e;export{h as ix_split_button};
+//# sourceMappingURL=p-fd08b7ad.entry.js.map

package/dist/siemens-ix/p-fd08b7ad.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["splitButtonCss","SplitButton","linkTriggerRef","this","triggerElement","dropdownElement","trigger","componentDidLoad","render","buttonAttributes","variant","outline","ghost","disabled","class","h","Host","label","Object","assign","icon","onClick","e","buttonClick","emit","ref","r","splitIcon"],"sources":["./src/components/split-button/split-button.scss?tag=ix-split-button&encapsulation=shadow","./src/components/split-button/split-button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n@import 'legacy/components/button-group';\n\n:host {\n  @include ix-component;\n  display: inline-block;\n\n  .btn-group {\n    position: relative;\n    display: inline-flex;\n    vertical-align: middle;\n    width: 100%;\n\n    > ix-button:nth-child(1) {\n      width: calc(100% - 2rem);\n    }\n\n    > ix-button:nth-child(2) {\n      width: 2rem;\n    }\n  }\n\n  .middle-gap {\n    gap: 0.125rem;\n  }\n\n  .left-button-border {\n    border-top-width: 0.125rem;\n    border-right-width: 0;\n    border-left-width: 0.125rem;\n    border-bottom-width: 0.125rem;\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 {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { ButtonVariant } from '../button/button';\nimport { AlignedPlacement } from '../dropdown/placement';\n\nexport type SplitButtonVariant = ButtonVariant;\n\n@Component({\n  tag: 'ix-split-button',\n  styleUrl: 'split-button.scss',\n  shadow: true,\n})\nexport class SplitButton {\n  @Element() hostElement!: HTMLIxSplitButtonElement;\n\n  /**\n   * Color variant of button\n   */\n  @Prop() variant: SplitButtonVariant = 'primary';\n\n  /**\n   * Button outline variant\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button invisible\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Button label\n   */\n  @Prop() label: string;\n\n  /**\n   * Button icon\n   */\n  @Prop() icon = '';\n\n  /**\n   * Icon of the button on the right\n   */\n  @Prop() splitIcon = 'context-menu';\n\n  /**\n   * Disabled\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Placement of the dropdown\n   */\n  @Prop() placement: AlignedPlacement = 'bottom-start';\n\n  @State() toggle = false;\n\n  /**\n   * Button clicked\n   */\n  @Event() buttonClick: EventEmitter<MouseEvent>;\n\n  private triggerElement: HTMLElement;\n  private dropdownElement: HTMLIxDropdownElement;\n\n  private linkTriggerRef() {\n    if (this.triggerElement && this.dropdownElement) {\n      this.dropdownElement.trigger = this.triggerElement;\n    }\n  }\n\n  componentDidLoad() {\n    this.linkTriggerRef();\n  }\n\n  render() {\n    const buttonAttributes = {\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      disabled: this.disabled,\n      class: {\n        'left-button-border': !this.outline,\n      },\n    };\n    return (\n      <Host>\n        <div class={{ 'btn-group': true, 'middle-gap': !this.outline }}>\n          {this.label ? (\n            <ix-button\n              {...buttonAttributes}\n              icon={this.icon}\n              onClick={(e) => this.buttonClick.emit(e)}\n            >\n              {this.label}\n            </ix-button>\n          ) : (\n            <ix-icon-button\n              {...buttonAttributes}\n              icon={this.icon}\n              onClick={(e) => this.buttonClick.emit(e)}\n            ></ix-icon-button>\n          )}\n          <ix-icon-button\n            {...buttonAttributes}\n            ref={(r) => (this.triggerElement = r)}\n            class={'anchor'}\n            icon={this.splitIcon}\n          ></ix-icon-button>\n        </div>\n\n        <ix-dropdown ref={(r) => (this.dropdownElement = r)}>\n          <slot></slot>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAiB,qxC,MC6BVC,EAAW,M,+EAMgB,U,aAKpB,M,WAKF,M,+BAUD,G,eAKK,e,cAKD,M,eAKmB,e,YAEpB,K,CAUVC,iBACN,GAAIC,KAAKC,gBAAkBD,KAAKE,gBAAiB,CAC/CF,KAAKE,gBAAgBC,QAAUH,KAAKC,c,EAIxCG,mBACEJ,KAAKD,gB,CAGPM,SACE,MAAMC,EAAmB,CACvBC,QAASP,KAAKO,QACdC,QAASR,KAAKQ,QACdC,MAAOT,KAAKS,MACZC,SAAUV,KAAKU,SACfC,MAAO,CACL,sBAAuBX,KAAKQ,UAGhC,OACEI,EAACC,EAAI,KACHD,EAAA,OAAKD,MAAO,CAAE,YAAa,KAAM,cAAeX,KAAKQ,UAClDR,KAAKc,MACJF,EAAA,YAAAG,OAAAC,OAAA,GACMV,EAAgB,CACpBW,KAAMjB,KAAKiB,KACXC,QAAUC,GAAMnB,KAAKoB,YAAYC,KAAKF,KAErCnB,KAAKc,OAGRF,EAAA,iBAAAG,OAAAC,OAAA,GACMV,EAAgB,CACpBW,KAAMjB,KAAKiB,KACXC,QAAUC,GAAMnB,KAAKoB,YAAYC,KAAKF,MAG1CP,EAAA,iBAAAG,OAAAC,OAAA,GACMV,EAAgB,CACpBgB,IAAMC,GAAOvB,KAAKC,eAAiBsB,EACnCZ,MAAO,SACPM,KAAMjB,KAAKwB,cAIfZ,EAAA,eAAaU,IAAMC,GAAOvB,KAAKE,gBAAkBqB,GAC/CX,EAAA,c"}

package/dist/siemens-ix/p-fd6006d2.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as i,H as r}from"./p-76a509c7.js";const o=":host{}: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 .event-list-item{display:flex;align-items:center;position:relative;height:var(--event-list-item-height, 2.5rem);max-height:var(--event-list-item-height, 2.5rem);border-radius:var(--event-list-item-border-radius, 0.25rem);background-color:var(--theme-event-item--background);overflow:hidden;transition:150ms;cursor:pointer;margin-bottom:var(--event-list-item-margin-bottom, 0.5rem)}:host .event-list-item .indicator{height:100%;width:0.5rem;max-width:0.5rem;min-width:0.5rem;border-top-left-radius:var(--event-list-item-border-radius, 0.25rem);border-bottom-left-radius:var(--event-list-item-border-radius, 0.25rem)}:host .event-list-item .indicator-empty{border:var(--theme-weak-bdr-1);border-right:none}:host .event-list-item .event-list-item-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-grow:1;width:calc(100% - (1rem + 0.5rem));height:100%;border:0.062rem solid;border-color:var(--theme-event-item--border);border-top-left-radius:0;border-top-right-radius:var(--event-list-item-border-radius, 0.25rem);border-bottom-left-radius:0;border-bottom-right-radius:var(--event-list-item-border-radius, 0.25rem);border-left:none;padding-left:1rem}:host .event-list-item .event-content{display:flex;align-items:center;width:100%;height:var(--event-list-item-height, 100%);max-height:var(--event-list-item-height, 100%);white-space:var(--event-list-item-content-white-space, inherit);overflow:hidden}:host .event-list-item .chevron-icon{margin-left:auto;margin-right:0.5rem;opacity:0.6;align-self:center}:host .event-list-item:not(.selected):not(.disabled):not(:disabled){cursor:pointer}:host .event-list-item:not(.selected):not(.disabled):not(:disabled):hover{background-color:var(--theme-event-item--background--hover)}:host .event-list-item:not(.selected):not(.disabled):not(:disabled){cursor:pointer}:host .event-list-item:not(.selected):not(.disabled):not(:disabled):active,:host .event-list-item:not(.selected):not(.disabled):not(:disabled).active{background-color:var(--theme-event-item--background--active)}:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled){cursor:pointer}:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled):hover{border-color:var(--theme-event-item--border--hover)}:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled){cursor:pointer}:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled):active,:host .event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled).active{border-color:var(--theme-event-item--border--active)}:host .event-list-item.selected .event-list-item-container{background-color:var(--theme-event-item--background--selected);border-color:var(--theme-event-item--border--selected)}:host .event-list-item[disabled],:host .event-list-item.disabled{pointer-events:none}:host .event-list-item[disabled] .event-list-item-container,:host .event-list-item.disabled .event-list-item-container{background-color:var(--theme-event-item--background--disabled);border-color:var(--theme-event-item--border--disabled)}:host(.disabled){pointer-events:none}";const s=class{constructor(i){e(this,i);this.itemClick=t(this,"itemClick",7);this.color=undefined;this.selected=undefined;this.disabled=undefined;this.chevron=undefined}handleItemClick(){this.itemClick.emit()}render(){var e;const t=((e=this.color)===null||e===void 0?void 0:e.startsWith("--theme"))?`var(${this.color})`:`var(--theme-${this.color})`;return i(r,{class:{disabled:this.disabled}},i("div",{class:{"event-list-item":true,selected:this.selected,disabled:this.disabled}},i("div",{class:`indicator ${!this.color?"indicator-empty":""}`,style:{"background-color":this.color?t:"inherit",opacity:`${this.disabled?.4:1}`}}),i("div",{class:"event-list-item-container"},i("div",{class:"event-content"},i("slot",null)),this.chevron&&i("ix-icon",{name:"chevron-right",size:"16",class:"chevron-icon"}))))}};s.style=o;export{s as ix_event_list_item};
+//# sourceMappingURL=p-fd6006d2.entry.js.map