@siemens/ix 0.0.0-20240522074328 → 0.0.0-pr-1373-20240705054533

package/dist/siemens-ix/p-0653a145.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as i,H as r}from"./p-f87cd962.js";import{a as o}from"./p-4f8ac3bf.js";const s=":host{}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}: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:var(--theme-default-time);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;padding-inline-end:0.5rem}: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 n=s;const a=class{constructor(i){e(this,i);this.itemClick=t(this,"itemClick",7);this.color=undefined;this.itemColor=undefined;this.selected=undefined;this.disabled=undefined;this.chevron=undefined}handleItemClick(){this.itemClick.emit()}render(){var e,t,s,n;let a=((e=this.itemColor)===null||e===void 0?void 0:e.startsWith("--theme"))?`var(${this.itemColor})`:`var(--theme-${this.itemColor})`;if(this.color){a=((t=this.color)===null||t===void 0?void 0:t.startsWith("--theme"))?`var(${this.color})`:`var(--theme-${this.color})`}return i(r,{key:"f4867d7f68254b7f4929ce6746172eb03aa5caea",class:{disabled:this.disabled}},i("li",{key:"325588cc80c9b8988b37aaeb72a8d9c7affc088e","aria-disabled":o(this.disabled),class:{"event-list-item":true,selected:this.selected,disabled:this.disabled}},i("div",{key:"24ef52d3c26ccb528934fa0366c9ebdce05ca38d",class:`indicator ${!((s=this.itemColor)!==null&&s!==void 0?s:this.color)?"indicator-empty":""}`,style:{"background-color":((n=this.itemColor)!==null&&n!==void 0?n:this.color)?a:"inherit",opacity:`${this.disabled?.4:1}`}}),i("div",{key:"74fac568b74471bcd6051f25d13bbac6d3aaadb4",class:"event-list-item-container"},i("div",{key:"47d69475c3d448ca417b1892b30f22e7de77b19f",class:"event-content"},i("slot",{key:"c87d4fc509bdbc2041122e274caa2860a2530843"})),this.chevron&&i("ix-icon",{key:"8626b6e5ff1f23163d4a75d5c3a114adc3942c2c",name:"chevron-right",size:"16",class:"chevron-icon"}))))}};a.style=n;export{a as ix_event_list_item};
+//# sourceMappingURL=p-0653a145.entry.js.map

package/dist/siemens-ix/{p-abb29515.entry.js.map → p-0653a145.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["eventListItemCss","IxEventListItemStyle0","EventListItem","handleItemClick","this","itemClick","emit","render","color","_a","itemColor","startsWith","_b","h","Host","key","class","disabled","a11yBoolean","selected","_c","style","_d","opacity","chevron","name","size"],"sources":["src/components/event-list-item/event-list-item.scss?tag=ix-event-list-item&encapsulation=shadow","src/components/event-list-item/event-list-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/text-truncation';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n@import 'mixins/shadow-dom/host-disabled';\n@import 'common-variables';\n\n$default-event-list-item-height: 2.5rem;\n\n:host {\n  @include ix-component;\n\n  .event-list-item {\n    display: flex;\n    align-items: center;\n    position: relative;\n    height: var(--event-list-item-height, $default-event-list-item-height);\n    max-height: var(--event-list-item-height, $default-event-list-item-height);\n    border-radius: var(--event-list-item-border-radius, $default-border-radius);\n    background-color: var(--theme-event-item--background);\n    overflow: hidden;\n    transition: var(--theme-default-time);\n    cursor: pointer;\n    margin-bottom: var(--event-list-item-margin-bottom, $small-space);\n\n    .indicator {\n      height: 100%;\n      width: $small-space;\n      max-width: $small-space;\n      min-width: $small-space;\n      border-top-left-radius: var(\n        --event-list-item-border-radius,\n        $default-border-radius\n      );\n      border-bottom-left-radius: var(\n        --event-list-item-border-radius,\n        $default-border-radius\n      );\n    }\n\n    .indicator-empty {\n      border: var(--theme-weak-bdr-1);\n      border-right: none;\n    }\n\n    .event-list-item-container {\n      @include ellipsis;\n\n      display: flex;\n      flex-grow: 1;\n      width: calc(100% - (#{$default-space} + #{$small-space}));\n      height: 100%;\n      border: 0.062rem solid;\n      border-color: var(--theme-event-item--border);\n      border-top-left-radius: 0;\n      border-top-right-radius: var(\n        --event-list-item-border-radius,\n        $default-border-radius\n      );\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: var(\n        --event-list-item-border-radius,\n        $default-border-radius\n      );\n      border-left: none;\n      padding-left: $default-space;\n    }\n\n    .event-content {\n      display: flex;\n      align-items: center;\n      width: 100%;\n      height: var(--event-list-item-height, 100%);\n      max-height: var(--event-list-item-height, 100%);\n      white-space: var(--event-list-item-content-white-space, inherit);\n      overflow: hidden;\n      padding-inline-end: $small-space;\n    }\n\n    .chevron-icon {\n      margin-left: auto;\n      margin-right: $small-space;\n      opacity: 0.6;\n      align-self: center;\n    }\n\n    &:not(.selected) {\n      @include hover {\n        background-color: var(--theme-event-item--background--hover);\n      }\n\n      @include active {\n        background-color: var(--theme-event-item--background--active);\n      }\n\n      .event-list-item-container {\n        @include hover {\n          border-color: var(--theme-event-item--border--hover);\n        }\n\n        @include active {\n          border-color: var(--theme-event-item--border--active);\n        }\n      }\n    }\n\n    &.selected .event-list-item-container {\n      background-color: var(--theme-event-item--background--selected);\n      border-color: var(--theme-event-item--border--selected);\n    }\n\n    &[disabled],\n    &.disabled {\n      pointer-events: none;\n\n      .event-list-item-container {\n        background-color: var(--theme-event-item--background--disabled);\n        border-color: var(--theme-event-item--border--disabled);\n      }\n    }\n  }\n}\n\n@include host-disabled;\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  Listen,\n  Prop,\n} from '@stencil/core';\nimport { a11yBoolean } from '../utils/a11y';\n\n@Component({\n  tag: 'ix-event-list-item',\n  styleUrl: 'event-list-item.scss',\n  shadow: true,\n})\nexport class EventListItem {\n  /**\n   * Color of the status indicator.\n   * You can find a list of all available colors in our documentation.\n   * Example values are `--theme-color-alarm` or `color-alarm`\n   *\n   * @link https://ix.siemens.io/docs/theming/colors/\n   *\n   * @deprecated since 2.1.0 use `item-color`\n   */\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  @Prop() color: string;\n\n  /**\n   * Color of the status indicator.\n   * You can find a list of all available colors in our documentation.\n   * Example values are `--theme-color-alarm` or `color-alarm`\n   *\n   * @link https://ix.siemens.io/docs/theming/colors/\n   */\n  @Prop() itemColor: string;\n\n  /**\n   * Show event list item as selected\n   */\n  @Prop() selected: boolean;\n\n  /**\n   * Disable event list item\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * Show chevron on right side of the event list item\n   */\n  @Prop() chevron: boolean;\n\n  /**\n   * Event list item click\n   */\n  @Event() itemClick: EventEmitter;\n\n  @Listen('click', { passive: true })\n  handleItemClick() {\n    this.itemClick.emit();\n  }\n\n  render() {\n    let color = this.itemColor?.startsWith('--theme')\n      ? `var(${this.itemColor})`\n      : `var(--theme-${this.itemColor})`;\n\n    if (this.color) {\n      color = this.color?.startsWith('--theme')\n        ? `var(${this.color})`\n        : `var(--theme-${this.color})`;\n    }\n\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n      >\n        <li\n          aria-disabled={a11yBoolean(this.disabled)}\n          class={{\n            'event-list-item': true,\n            selected: this.selected,\n            disabled: this.disabled,\n          }}\n        >\n          <div\n            class={`indicator ${\n              !(this.itemColor ?? this.color) ? 'indicator-empty' : ''\n            }`}\n            style={{\n              'background-color':\n                this.itemColor ?? this.color ? color : 'inherit',\n              opacity: `${this.disabled ? 0.4 : 1}`,\n            }}\n          ></div>\n\n          <div class=\"event-list-item-container\">\n            <div class=\"event-content\">\n              <slot></slot>\n            </div>\n            {this.chevron && (\n              <ix-icon\n                name={'chevron-right'}\n                size=\"16\"\n                class=\"chevron-icon\"\n              ></ix-icon>\n            )}\n          </div>\n        </li>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAmB,wyHACzB,MAAAC,EAAeD,E,MCwBFE,EAAa,M,mLA2CxB,eAAAC,GACEC,KAAKC,UAAUC,M,CAGjB,MAAAC,G,YACE,IAAIC,IAAQC,EAAAL,KAAKM,aAAS,MAAAD,SAAA,SAAAA,EAAEE,WAAW,YACnC,OAAOP,KAAKM,aACZ,eAAeN,KAAKM,aAExB,GAAIN,KAAKI,MAAO,CACdA,IAAQI,EAAAR,KAAKI,SAAK,MAAAI,SAAA,SAAAA,EAAED,WAAW,YAC3B,OAAOP,KAAKI,SACZ,eAAeJ,KAAKI,Q,CAG1B,OACEK,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACLC,SAAUb,KAAKa,WAGjBJ,EAAA,MAAAE,IAAA,2DACiBG,EAAYd,KAAKa,UAChCD,MAAO,CACL,kBAAmB,KACnBG,SAAUf,KAAKe,SACfF,SAAUb,KAAKa,WAGjBJ,EAAA,OAAAE,IAAA,2CACEC,MAAO,gBACHI,EAAAhB,KAAKM,aAAS,MAAAU,SAAA,EAAAA,EAAIhB,KAAKI,OAAS,kBAAoB,KAExDa,MAAO,CACL,qBACEC,EAAAlB,KAAKM,aAAS,MAAAY,SAAA,EAAAA,EAAIlB,KAAKI,OAAQA,EAAQ,UACzCe,QAAS,GAAGnB,KAAKa,SAAW,GAAM,OAItCJ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,6BACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,iBACTH,EAAA,QAAAE,IAAA,8CAEDX,KAAKoB,SACJX,EAAA,WACEY,KAAM,gBACNC,KAAK,KACLV,MAAM,mB"}
+{"version":3,"names":["eventListItemCss","IxEventListItemStyle0","EventListItem","handleItemClick","this","itemClick","emit","render","color","_a","itemColor","startsWith","_b","h","Host","key","class","disabled","a11yBoolean","selected","_c","style","_d","opacity","chevron","name","size"],"sources":["src/components/event-list-item/event-list-item.scss?tag=ix-event-list-item&encapsulation=shadow","src/components/event-list-item/event-list-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/text-truncation';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n@import 'mixins/shadow-dom/host-disabled';\n@import 'common-variables';\n\n$default-event-list-item-height: 2.5rem;\n\n:host {\n  @include ix-component;\n\n  .event-list-item {\n    display: flex;\n    align-items: center;\n    position: relative;\n    height: var(--event-list-item-height, $default-event-list-item-height);\n    max-height: var(--event-list-item-height, $default-event-list-item-height);\n    border-radius: var(--event-list-item-border-radius, $default-border-radius);\n    background-color: var(--theme-event-item--background);\n    overflow: hidden;\n    transition: var(--theme-default-time);\n    cursor: pointer;\n    margin-bottom: var(--event-list-item-margin-bottom, $small-space);\n\n    .indicator {\n      height: 100%;\n      width: $small-space;\n      max-width: $small-space;\n      min-width: $small-space;\n      border-top-left-radius: var(\n        --event-list-item-border-radius,\n        $default-border-radius\n      );\n      border-bottom-left-radius: var(\n        --event-list-item-border-radius,\n        $default-border-radius\n      );\n    }\n\n    .indicator-empty {\n      border: var(--theme-weak-bdr-1);\n      border-right: none;\n    }\n\n    .event-list-item-container {\n      @include ellipsis;\n\n      display: flex;\n      flex-grow: 1;\n      width: calc(100% - (#{$default-space} + #{$small-space}));\n      height: 100%;\n      border: 0.062rem solid;\n      border-color: var(--theme-event-item--border);\n      border-top-left-radius: 0;\n      border-top-right-radius: var(\n        --event-list-item-border-radius,\n        $default-border-radius\n      );\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: var(\n        --event-list-item-border-radius,\n        $default-border-radius\n      );\n      border-left: none;\n      padding-left: $default-space;\n    }\n\n    .event-content {\n      display: flex;\n      align-items: center;\n      width: 100%;\n      height: var(--event-list-item-height, 100%);\n      max-height: var(--event-list-item-height, 100%);\n      white-space: var(--event-list-item-content-white-space, inherit);\n      overflow: hidden;\n      padding-inline-end: $small-space;\n    }\n\n    .chevron-icon {\n      margin-left: auto;\n      margin-right: $small-space;\n      opacity: 0.6;\n      align-self: center;\n    }\n\n    &:not(.selected) {\n      @include hover {\n        background-color: var(--theme-event-item--background--hover);\n      }\n\n      @include active {\n        background-color: var(--theme-event-item--background--active);\n      }\n\n      .event-list-item-container {\n        @include hover {\n          border-color: var(--theme-event-item--border--hover);\n        }\n\n        @include active {\n          border-color: var(--theme-event-item--border--active);\n        }\n      }\n    }\n\n    &.selected .event-list-item-container {\n      background-color: var(--theme-event-item--background--selected);\n      border-color: var(--theme-event-item--border--selected);\n    }\n\n    &[disabled],\n    &.disabled {\n      pointer-events: none;\n\n      .event-list-item-container {\n        background-color: var(--theme-event-item--background--disabled);\n        border-color: var(--theme-event-item--border--disabled);\n      }\n    }\n  }\n}\n\n@include host-disabled;\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  Listen,\n  Prop,\n} from '@stencil/core';\nimport { a11yBoolean } from '../utils/a11y';\n\n@Component({\n  tag: 'ix-event-list-item',\n  styleUrl: 'event-list-item.scss',\n  shadow: true,\n})\nexport class EventListItem {\n  /**\n   * Color of the status indicator.\n   * You can find a list of all available colors in our documentation.\n   * Example values are `--theme-color-alarm` or `color-alarm`\n   *\n   * @link https://ix.siemens.io/docs/theming/colors/\n   *\n   * @deprecated since 2.1.0 use `item-color`\n   */\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  @Prop() color: string;\n\n  /**\n   * Color of the status indicator.\n   * You can find a list of all available colors in our documentation.\n   * Example values are `--theme-color-alarm` or `color-alarm`\n   *\n   * @link https://ix.siemens.io/docs/theming/colors/\n   */\n  @Prop() itemColor: string;\n\n  /**\n   * Show event list item as selected\n   */\n  @Prop() selected: boolean;\n\n  /**\n   * Disable event list item\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * Show chevron on right side of the event list item\n   */\n  @Prop() chevron: boolean;\n\n  /**\n   * Event list item click\n   */\n  @Event() itemClick: EventEmitter;\n\n  @Listen('click', { passive: true })\n  handleItemClick() {\n    this.itemClick.emit();\n  }\n\n  render() {\n    let color = this.itemColor?.startsWith('--theme')\n      ? `var(${this.itemColor})`\n      : `var(--theme-${this.itemColor})`;\n\n    if (this.color) {\n      color = this.color?.startsWith('--theme')\n        ? `var(${this.color})`\n        : `var(--theme-${this.color})`;\n    }\n\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n      >\n        <li\n          aria-disabled={a11yBoolean(this.disabled)}\n          class={{\n            'event-list-item': true,\n            selected: this.selected,\n            disabled: this.disabled,\n          }}\n        >\n          <div\n            class={`indicator ${\n              !(this.itemColor ?? this.color) ? 'indicator-empty' : ''\n            }`}\n            style={{\n              'background-color':\n                this.itemColor ?? this.color ? color : 'inherit',\n              opacity: `${this.disabled ? 0.4 : 1}`,\n            }}\n          ></div>\n\n          <div class=\"event-list-item-container\">\n            <div class=\"event-content\">\n              <slot></slot>\n            </div>\n            {this.chevron && (\n              <ix-icon\n                name={'chevron-right'}\n                size=\"16\"\n                class=\"chevron-icon\"\n              ></ix-icon>\n            )}\n          </div>\n        </li>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAmB,o8HACzB,MAAAC,EAAeD,E,MCwBFE,EAAa,M,mLA2CxB,eAAAC,GACEC,KAAKC,UAAUC,M,CAGjB,MAAAC,G,YACE,IAAIC,IAAQC,EAAAL,KAAKM,aAAS,MAAAD,SAAA,SAAAA,EAAEE,WAAW,YACnC,OAAOP,KAAKM,aACZ,eAAeN,KAAKM,aAExB,GAAIN,KAAKI,MAAO,CACdA,IAAQI,EAAAR,KAAKI,SAAK,MAAAI,SAAA,SAAAA,EAAED,WAAW,YAC3B,OAAOP,KAAKI,SACZ,eAAeJ,KAAKI,Q,CAG1B,OACEK,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACLC,SAAUb,KAAKa,WAGjBJ,EAAA,MAAAE,IAAA,2DACiBG,EAAYd,KAAKa,UAChCD,MAAO,CACL,kBAAmB,KACnBG,SAAUf,KAAKe,SACfF,SAAUb,KAAKa,WAGjBJ,EAAA,OAAAE,IAAA,2CACEC,MAAO,gBACHI,EAAAhB,KAAKM,aAAS,MAAAU,SAAA,EAAAA,EAAIhB,KAAKI,OAAS,kBAAoB,KAExDa,MAAO,CACL,qBACEC,EAAAlB,KAAKM,aAAS,MAAAY,SAAA,EAAAA,EAAIlB,KAAKI,OAAQA,EAAQ,UACzCe,QAAS,GAAGnB,KAAKa,SAAW,GAAM,OAItCJ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,6BACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,iBACTH,EAAA,QAAAE,IAAA,8CAEDX,KAAKoB,SACJX,EAAA,WAAAE,IAAA,2CACEU,KAAM,gBACNC,KAAK,KACLV,MAAM,mB"}

package/dist/siemens-ix/p-0b4e398e.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as t,H as o,g as r}from"./p-f87cd962.js";const a=":host{min-width:11.937rem;max-width:11.937rem;width:11.937rem;display:flex;flex-direction:column;border:1px solid var(--theme-tile--border);border-radius:var(--theme-tile--border-radius);background-color:var(--theme-color-2);color:var(--theme-color-std-text);box-shadow:var(--theme-tile--box-shadow)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .tile-header{display:flex;align-items:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}:host .tile-header,:host .tile-subheader,:host .tile-content,:host .tile-footer{padding:0 1rem}:host .tile-header,:host .tile-content{flex-grow:1}:host .tile-header.has-content{display:flex;height:2.5rem;max-height:2.5rem;padding-inline-end:0.5rem}:host .tile-subheader{color:var(--theme-btn-invisible-secondary--color);flex-grow:0}:host .tile-footer.has-content{border-block-start:1px solid var(--theme-color-1);height:2.5rem}:host(.tile-small){height:2.5rem;min-height:2.5rem;max-height:2.5rem}:host(.tile-medium){height:5rem;min-height:5rem;max-height:5rem}:host(.tile-big){height:10rem;min-height:10rem;max-height:10rem}:host(:active),:host(:focus-visible),:host(:visited){outline:none}";const s=a;const h=class{constructor(t){e(this,t);this.size="medium";this.hasHeaderSlot=false;this.hasFooterSlot=false}handleHeaderSlotChange(){this.hasHeaderSlot=!!this.hostElement.querySelector('[slot="header"]')}handleFooterSlotChange(){this.hasFooterSlot=!!this.hostElement.querySelector('[slot="footer"]')}render(){return t(o,{key:"cfe05def01cd57c9743a8fccbecbd41b643a9fe2",class:{"tile-small":this.size==="small","tile-medium":this.size==="medium","tile-big":this.size==="big"}},t("div",{key:"e37a76b559db0e0a9f8cc48aafad34ab9fcbc6c3",class:{"tile-header":true,"has-content":this.hasHeaderSlot}},t("slot",{key:"d14c60fa3a20b9312257f55edda792ea6b4a7cee",name:"header",onSlotchange:()=>this.handleHeaderSlotChange()})),t("div",{key:"db36b0c56a63976a72573681618338f433887669",class:"tile-subheader"},t("slot",{key:"451561552ddb35ccdc429d944252f5a0dadb8a0e",name:"subheader"})),t("div",{key:"d793f4019d8e37ede2a0f866aff1c501b5619651",class:"tile-content"},t("slot",{key:"afc3df10a7b4ff6c05cf0d87ff78dbe7ecee776e"})),t("div",{key:"14cc913a9c35b73a58a8d618c6ea7cc75e1d5743",class:{"tile-footer":true,"has-content":this.hasFooterSlot}},t("slot",{key:"184e7b7313f40d2478541e6f599bb462d1c0f286",name:"footer",onSlotchange:()=>this.handleFooterSlotChange()})))}get hostElement(){return r(this)}};h.style=s;export{h as ix_tile};
+//# sourceMappingURL=p-0b4e398e.entry.js.map

package/dist/siemens-ix/{p-ec741c06.entry.js.map → p-0b4e398e.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["tileCss","IxTileStyle0","Tile","handleHeaderSlotChange","this","hasHeaderSlot","hostElement","querySelector","handleFooterSlotChange","hasFooterSlot","render","h","Host","key","class","size","name","onSlotchange"],"sources":["src/components/tile/tile.scss?tag=ix-tile&encapsulation=shadow","src/components/tile/tile.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/text-truncation';\n@import 'mixins/shadow-dom/component';\n@import 'legacy/mixins/fonts';\n\n@mixin set-height($height) {\n  height: $height;\n  min-height: $height;\n  max-height: $height;\n}\n\n$heightSmall: 2.5rem;\n$heightMedium: 5rem;\n$heightBig: 10rem;\n$width: 11.937rem;\n\n:host {\n  @include ix-component;\n\n  min-width: $width;\n  max-width: $width;\n  width: $width;\n\n  display: flex;\n  flex-direction: column;\n  border: 1px solid var(--theme-tile--border);\n  border-radius: var(--theme-tile--border-radius);\n\n  background-color: var(--theme-color-2);\n  color: var(--theme-color-std-text);\n  box-shadow: var(--theme-tile--box-shadow);\n\n  // @each $key, $value in $color-map-status {\n  //   &.tile-#{$key} {\n  //     background-color: #{$value};\n  //     color: automatic-text-color($value, 65);\n  //   }\n  // }\n\n  .tile-header {\n    display: flex;\n    align-items: center;\n\n    @include text-l-title;\n  }\n\n  .tile-header,\n  .tile-subheader,\n  .tile-content,\n  .tile-footer {\n    padding: 0 $default-space;\n  }\n\n  .tile-header,\n  .tile-content {\n    flex-grow: 1;\n  }\n\n  .tile-header.has-content {\n    display: flex;\n    height: $large-control-height;\n    max-height: $large-control-height;\n    padding-inline-end: $small-space;\n  }\n\n  .tile-subheader {\n    color: var(--theme-btn-invisible-secondary--color);\n    flex-grow: 0;\n  }\n\n  .tile-footer.has-content {\n    border-block-start: 1px solid var(--theme-color-1);\n    height: $large-control-height;\n  }\n}\n\n:host(.tile-small) {\n  @include set-height($heightSmall);\n}\n\n:host(.tile-medium) {\n  @include set-height($heightMedium);\n}\n\n:host(.tile-big) {\n  @include set-height($heightBig);\n}\n\n:host(:active),\n:host(:focus-visible),\n:host(:visited) {\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 { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'ix-tile',\n  styleUrl: 'tile.scss',\n  shadow: true,\n})\nexport class Tile {\n  @Element() hostElement: HTMLIxTileElement;\n\n  /**\n   * Size of the tile - one of 'small', 'medium' or 'large'\n   */\n  @Prop() size: 'small' | 'medium' | 'big' = 'medium';\n\n  @State() hasHeaderSlot: boolean = false;\n  @State() hasFooterSlot: boolean = false;\n\n  handleHeaderSlotChange() {\n    this.hasHeaderSlot = !!this.hostElement.querySelector('[slot=\"header\"]');\n  }\n\n  handleFooterSlotChange() {\n    this.hasFooterSlot = !!this.hostElement.querySelector('[slot=\"footer\"]');\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'tile-small': this.size === 'small',\n          'tile-medium': this.size === 'medium',\n          'tile-big': this.size === 'big',\n        }}\n      >\n        <div\n          class={{\n            'tile-header': true,\n            'has-content': this.hasHeaderSlot,\n          }}\n        >\n          <slot\n            name=\"header\"\n            onSlotchange={() => this.handleHeaderSlotChange()}\n          ></slot>\n        </div>\n        <div class=\"tile-subheader\">\n          <slot name=\"subheader\"></slot>\n        </div>\n        <div class=\"tile-content\">\n          <slot></slot>\n        </div>\n        <div\n          class={{\n            'tile-footer': true,\n            'has-content': this.hasFooterSlot,\n          }}\n        >\n          <slot\n            name=\"footer\"\n            onSlotchange={() => this.handleFooterSlotChange()}\n          ></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAU,4yDAChB,MAAAC,EAAeD,E,MCeFE,EAAI,M,mCAM4B,S,mBAET,M,mBACA,K,CAElC,sBAAAC,GACEC,KAAKC,gBAAkBD,KAAKE,YAAYC,cAAc,kB,CAGxD,sBAAAC,GACEJ,KAAKK,gBAAkBL,KAAKE,YAAYC,cAAc,kB,CAGxD,MAAAG,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,aAAcV,KAAKW,OAAS,QAC5B,cAAeX,KAAKW,OAAS,SAC7B,WAAYX,KAAKW,OAAS,QAG5BJ,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACL,cAAe,KACf,cAAeV,KAAKC,gBAGtBM,EAAA,QAAAE,IAAA,2CACEG,KAAK,SACLC,aAAc,IAAMb,KAAKD,4BAG7BQ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBACTH,EAAA,QAAAE,IAAA,2CAAMG,KAAK,eAEbL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,gBACTH,EAAA,QAAAE,IAAA,8CAEFF,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACL,cAAe,KACf,cAAeV,KAAKK,gBAGtBE,EAAA,QAAAE,IAAA,2CACEG,KAAK,SACLC,aAAc,IAAMb,KAAKI,4B"}
+{"version":3,"names":["tileCss","IxTileStyle0","Tile","handleHeaderSlotChange","this","hasHeaderSlot","hostElement","querySelector","handleFooterSlotChange","hasFooterSlot","render","h","Host","key","class","size","name","onSlotchange"],"sources":["src/components/tile/tile.scss?tag=ix-tile&encapsulation=shadow","src/components/tile/tile.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/text-truncation';\n@import 'mixins/shadow-dom/component';\n@import 'legacy/mixins/fonts';\n\n@mixin set-height($height) {\n  height: $height;\n  min-height: $height;\n  max-height: $height;\n}\n\n$heightSmall: 2.5rem;\n$heightMedium: 5rem;\n$heightBig: 10rem;\n$width: 11.937rem;\n\n:host {\n  @include ix-component;\n\n  min-width: $width;\n  max-width: $width;\n  width: $width;\n\n  display: flex;\n  flex-direction: column;\n  border: 1px solid var(--theme-tile--border);\n  border-radius: var(--theme-tile--border-radius);\n\n  background-color: var(--theme-color-2);\n  color: var(--theme-color-std-text);\n  box-shadow: var(--theme-tile--box-shadow);\n\n  // @each $key, $value in $color-map-status {\n  //   &.tile-#{$key} {\n  //     background-color: #{$value};\n  //     color: automatic-text-color($value, 65);\n  //   }\n  // }\n\n  .tile-header {\n    display: flex;\n    align-items: center;\n\n    @include text-l-title;\n  }\n\n  .tile-header,\n  .tile-subheader,\n  .tile-content,\n  .tile-footer {\n    padding: 0 $default-space;\n  }\n\n  .tile-header,\n  .tile-content {\n    flex-grow: 1;\n  }\n\n  .tile-header.has-content {\n    display: flex;\n    height: $large-control-height;\n    max-height: $large-control-height;\n    padding-inline-end: $small-space;\n  }\n\n  .tile-subheader {\n    color: var(--theme-btn-invisible-secondary--color);\n    flex-grow: 0;\n  }\n\n  .tile-footer.has-content {\n    border-block-start: 1px solid var(--theme-color-1);\n    height: $large-control-height;\n  }\n}\n\n:host(.tile-small) {\n  @include set-height($heightSmall);\n}\n\n:host(.tile-medium) {\n  @include set-height($heightMedium);\n}\n\n:host(.tile-big) {\n  @include set-height($heightBig);\n}\n\n:host(:active),\n:host(:focus-visible),\n:host(:visited) {\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 { Component, Element, h, Host, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'ix-tile',\n  styleUrl: 'tile.scss',\n  shadow: true,\n})\nexport class Tile {\n  @Element() hostElement: HTMLIxTileElement;\n\n  /**\n   * Size of the tile - one of 'small', 'medium' or 'large'\n   */\n  @Prop() size: 'small' | 'medium' | 'big' = 'medium';\n\n  @State() hasHeaderSlot: boolean = false;\n  @State() hasFooterSlot: boolean = false;\n\n  handleHeaderSlotChange() {\n    this.hasHeaderSlot = !!this.hostElement.querySelector('[slot=\"header\"]');\n  }\n\n  handleFooterSlotChange() {\n    this.hasFooterSlot = !!this.hostElement.querySelector('[slot=\"footer\"]');\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'tile-small': this.size === 'small',\n          'tile-medium': this.size === 'medium',\n          'tile-big': this.size === 'big',\n        }}\n      >\n        <div\n          class={{\n            'tile-header': true,\n            'has-content': this.hasHeaderSlot,\n          }}\n        >\n          <slot\n            name=\"header\"\n            onSlotchange={() => this.handleHeaderSlotChange()}\n          ></slot>\n        </div>\n        <div class=\"tile-subheader\">\n          <slot name=\"subheader\"></slot>\n        </div>\n        <div class=\"tile-content\">\n          <slot></slot>\n        </div>\n        <div\n          class={{\n            'tile-footer': true,\n            'has-content': this.hasFooterSlot,\n          }}\n        >\n          <slot\n            name=\"footer\"\n            onSlotchange={() => this.handleFooterSlotChange()}\n          ></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAU,w8DAChB,MAAAC,EAAeD,E,MCeFE,EAAI,M,mCAM4B,S,mBAET,M,mBACA,K,CAElC,sBAAAC,GACEC,KAAKC,gBAAkBD,KAAKE,YAAYC,cAAc,kB,CAGxD,sBAAAC,GACEJ,KAAKK,gBAAkBL,KAAKE,YAAYC,cAAc,kB,CAGxD,MAAAG,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,aAAcV,KAAKW,OAAS,QAC5B,cAAeX,KAAKW,OAAS,SAC7B,WAAYX,KAAKW,OAAS,QAG5BJ,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACL,cAAe,KACf,cAAeV,KAAKC,gBAGtBM,EAAA,QAAAE,IAAA,2CACEG,KAAK,SACLC,aAAc,IAAMb,KAAKD,4BAG7BQ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBACTH,EAAA,QAAAE,IAAA,2CAAMG,KAAK,eAEbL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,gBACTH,EAAA,QAAAE,IAAA,8CAEFF,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACL,cAAe,KACf,cAAeV,KAAKK,gBAGtBE,EAAA,QAAAE,IAAA,2CACEG,KAAK,SACLC,aAAc,IAAMb,KAAKI,4B"}

package/dist/siemens-ix/{p-ced10144.js → p-0c8a98cd.js}

@@ -1,2 +1,2 @@
-import{g as t}from"./p-26e9d40e.js";const n={target:"window",defaultEnabled:true};function e(t,e={}){const i=Object.assign(Object.assign({},n),e);let o;const s=t=>{o(t)};const c={on:t=>{o=t},isEnabled:i.defaultEnabled,enable:n=>{c.isEnabled=n;if(n){addEventListener(t,s)}else{removeEventListener(t,s)}},destroy:()=>{c.enable(false)}};c.enable(i.defaultEnabled);return c}function i(n,i){return(o,s)=>{const{componentWillLoad:c,componentWillRender:r,disconnectedCallback:_}=o;if(i){o.componentWillRender=function(){var n;const e=t(this);(n=e[`__ix__${s}`])===null||n===void 0?void 0:n.enable(i(this));return r&&r.call(this)}}o.componentWillLoad=function(){const i=e(n);const o=t(this);const r=this[s];o[`__ix__${s}`]=i;i.on(r.bind(this));return c&&c.call(this)};o.disconnectedCallback=function(){var n;const e=t(this);if(e&&e[`__ix__${s}`]){(n=e[`__ix__${s}`])===null||n===void 0?void 0:n.destroy();e[`__ix__${s}`]=null}return _&&_.call(this)}}}export{i as O};
-//# sourceMappingURL=p-ced10144.js.map
+import{g as t}from"./p-f87cd962.js";const n={target:"window",defaultEnabled:true};function e(t,e={}){const i=Object.assign(Object.assign({},n),e);let o;const s=t=>{o(t)};const c={on:t=>{o=t},isEnabled:i.defaultEnabled,enable:n=>{c.isEnabled=n;if(n){addEventListener(t,s)}else{removeEventListener(t,s)}},destroy:()=>{c.enable(false)}};c.enable(i.defaultEnabled);return c}function i(n,i){return(o,s)=>{const{componentWillLoad:c,componentWillRender:r,disconnectedCallback:_}=o;if(i){o.componentWillRender=function(){var n;const e=t(this);(n=e[`__ix__${s}`])===null||n===void 0?void 0:n.enable(i(this));return r&&r.call(this)}}o.componentWillLoad=function(){const i=e(n);const o=t(this);const r=this[s];o[`__ix__${s}`]=i;i.on(r.bind(this));return c&&c.call(this)};o.disconnectedCallback=function(){var n;const e=t(this);if(e&&e[`__ix__${s}`]){(n=e[`__ix__${s}`])===null||n===void 0?void 0:n.destroy();e[`__ix__${s}`]=null}return _&&_.call(this)}}}export{i as O};
+//# sourceMappingURL=p-0c8a98cd.js.map

package/dist/siemens-ix/p-0d2a6886.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as s,H as a}from"./p-f87cd962.js";const c=":host{display:block}";const n=c;const i=class{constructor(s){e(this,s);this.labelChange=t(this,"labelChange",7);this.label=undefined}watchLabel(e,t){this.labelChange.emit({name:"ix-menu-settings-item",oldLabel:t,newLabel:e})}render(){return s(a,{key:"95940cf98b7f75afe704575f7379d9debf6f0666"},s("slot",{key:"d65510239d1f1d0d4dcfc88288fbad819a5ca942"}))}static get watchers(){return{label:["watchLabel"]}}};i.style=n;export{i as ix_menu_settings_item};
+//# sourceMappingURL=p-0d2a6886.entry.js.map

package/dist/siemens-ix/p-0f7ef743.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as o,h as t,H as r,g as i}from"./p-f87cd962.js";const s=":host{--ix-dropdown-item-checked-color:var(--theme-color-primary);display:flex;flex-direction:row;position:relative;height:2.5rem;width:auto;overflow:hidden;cursor:pointer}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .dropdown-item{all:unset;display:flex;flex-direction:row;align-items:center;position:relative;height:calc(100% - 2px);width:calc(100% - 0.5rem - 1.5rem);padding:0 0.5rem;padding-right:1.5rem;border:0.0625rem solid transparent;white-space:nowrap}:host .dropdown-item.no-checked-field{width:calc(100% - 1rem - 1.5rem);padding:0 1rem;padding-right:1.5rem}:host .dropdown-item:focus-visible{border-color:var(--theme-color-focus-bdr)}:host .dropdown-item-checked{display:flex;align-items:center;justify-content:center;position:relative;height:100%;width:1rem;min-width:1rem;margin-right:0.25rem;color:var(--ix-dropdown-item-checked-color)}:host .dropdown-item-icon{margin-right:0.25rem;color:var(--theme-color-soft-text)}:host .dropdown-item-text{display:block;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .dropdown-item:focus-visible{outline:1px solid yellow}:host .submenu-icon{margin-left:auto}:host(.icon-only) .dropdown-item-icon{margin-right:0px}:host(.icon-only) .dropdown-item-checked{display:none}:host(.icon-only) .dropdown-item{width:calc(100% - 0.5rem - 0.5rem);padding:0 0.5rem;padding-right:0.5rem}:host(.submenu) .dropdown-item{width:calc(100% - 0.5rem - 0.5rem);padding:0 0.5rem;padding-right:0.5rem}:host(:not(.disabled):not(:disabled).hover),:host(:not(.disabled):not(:disabled):hover){background-color:var(--theme-ghost--background--hover)}:host(:not(.disabled):not(:disabled).active),:host(:not(.disabled):not(:disabled):active){background-color:var(--theme-ghost--background--active)}:host(.disabled){pointer-events:none;color:var(--theme-color-weak-text) !important}:host(.disabled) .dropdown-item-icon{color:var(--theme-color-weak-text) !important}";const d=s;const n=class{constructor(t){e(this,t);this.itemClick=o(this,"itemClick",7);this.label=undefined;this.icon=undefined;this.hover=false;this.disabled=false;this.checked=false;this.isSubMenu=false;this.suppressChecked=false}async emitItemClick(){this.itemClick.emit(this.hostElement)}async getDropdownItemElement(){return this.hostElement}isIconOnly(){return this.label===undefined&&this.hostElement.innerText===""&&this.icon!==undefined}render(){return t(r,{key:"89da1b5ab639ecb4fe9caa06f16fc7f8cff8cd49",class:{hover:this.hover,"icon-only":this.isIconOnly(),disabled:this.disabled,submenu:this.isSubMenu},role:"listitem"},t("button",{key:"386ba89dfedf42919298d1d4d189310c364c0acb",type:"button",tabIndex:0,class:{"dropdown-item":true,"no-checked-field":this.suppressChecked},onClick:()=>this.emitItemClick()},!this.suppressChecked?t("div",{class:"dropdown-item-checked"},this.checked?t("ix-icon",{class:"checkmark",name:"single-check",size:"16"}):null):null,this.icon?t("ix-icon",{class:"dropdown-item-icon",name:this.icon}):null,t("div",{key:"385eaf4c6c074d1e21eeb55ef1c7956f8f8c4126",class:"dropdown-item-text"},this.label,t("slot",{key:"b9e7252f90c080074da87786cf5fce912f8bdb25"})),this.isSubMenu?t("ix-icon",{name:"chevron-right-small",class:"submenu-icon"}):null))}get hostElement(){return i(this)}};n.style=d;export{n as ix_dropdown_item};
+//# sourceMappingURL=p-0f7ef743.entry.js.map

package/dist/siemens-ix/{p-a617e605.entry.js.map → p-0f7ef743.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["dropdownItemCss","IxDropdownItemStyle0","DropdownItem","emitItemClick","this","itemClick","emit","hostElement","getDropdownItemElement","isIconOnly","label","undefined","innerText","icon","render","h","Host","key","class","hover","disabled","submenu","isSubMenu","role","type","tabIndex","suppressChecked","onClick","checked","name","size"],"sources":["src/components/dropdown-item/dropdown-item.scss?tag=ix-dropdown-item&encapsulation=shadow","src/components/dropdown-item/dropdown-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 'mixins/shadow-dom/hover';\n\n$itemPadding: 0.5rem;\n$itemPaddingRight: 1.5rem;\n$focusBorder: 0.0625rem;\n\n@mixin applyItemWidth($padding, $paddingRight) {\n  width: calc(100% - #{$padding} - #{$paddingRight});\n\n  padding: 0 $padding;\n  padding-right: $paddingRight;\n}\n\n:host {\n  --ix-dropdown-item-checked-color: var(--theme-color-primary);\n  @include ix-component;\n  display: flex;\n  flex-direction: row;\n\n  position: relative;\n  height: 2.5rem;\n  width: auto;\n  overflow: hidden;\n  cursor: pointer;\n\n  .dropdown-item {\n    all: unset;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    position: relative;\n    height: calc(100% - 2px);\n    @include applyItemWidth($itemPadding, $itemPaddingRight);\n    border: $focusBorder solid transparent;\n    white-space: nowrap;\n  }\n\n  .dropdown-item.no-checked-field {\n    @include applyItemWidth(1rem, $itemPaddingRight);\n  }\n\n  .dropdown-item:focus-visible {\n    border-color: var(--theme-color-focus-bdr);\n  }\n\n  .dropdown-item-checked {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    height: 100%;\n    width: 1rem;\n    min-width: 1rem;\n    margin-right: 0.25rem;\n\n    color: var(--ix-dropdown-item-checked-color);\n  }\n\n  .dropdown-item-icon {\n    margin-right: 0.25rem;\n    color: var(--theme-color-soft-text);\n  }\n\n  .dropdown-item-text {\n    display: block;\n    position: relative;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .dropdown-item:focus-visible {\n    outline: 1px solid yellow;\n  }\n\n  .submenu-icon {\n    margin-left: auto;\n  }\n}\n\n:host(.icon-only) {\n  .dropdown-item-icon {\n    margin-right: 0px;\n  }\n\n  .dropdown-item-checked {\n    display: none;\n  }\n\n  .dropdown-item {\n    @include applyItemWidth(0.5rem, 0.5rem);\n  }\n}\n\n:host(.submenu) {\n  .dropdown-item {\n    @include applyItemWidth($itemPadding, 0.5rem);\n  }\n}\n\n@include ghost-hover-pressed;\n\n:host(.disabled) {\n  pointer-events: none;\n  color: var(--theme-color-weak-text) !important;\n\n  .dropdown-item-icon {\n    color: var(--theme-color-weak-text) !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  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n} from '@stencil/core';\nimport { DropdownItemWrapper } from '../dropdown/dropdown-controller';\n\n@Component({\n  tag: 'ix-dropdown-item',\n  styleUrl: 'dropdown-item.scss',\n  shadow: true,\n})\nexport class DropdownItem implements DropdownItemWrapper {\n  @Element() hostElement!: HTMLIxDropdownItemElement;\n\n  /**\n   * Label of dropdown item\n   */\n  @Prop() label: string;\n\n  /**\n   * Icon of dropdown item\n   */\n  @Prop() icon: string;\n\n  /**\n   * Display hover state\n   */\n  @Prop() hover = false;\n\n  /**\n   * Disable item and remove event listeners\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Whether the item is checked or not. If true a checkmark will mark the item as checked.\n   */\n  @Prop() checked = false;\n\n  /** @internal */\n  @Prop() isSubMenu = false;\n\n  /** @internal */\n  @Prop() suppressChecked = false;\n\n  /** @internal */\n  @Event() itemClick: EventEmitter<HTMLIxDropdownItemElement>;\n\n  /**\n   * Internal usage only\n   */\n  @Method()\n  async emitItemClick() {\n    this.itemClick.emit(this.hostElement);\n  }\n\n  /** @internal */\n  @Method()\n  async getDropdownItemElement() {\n    return this.hostElement;\n  }\n\n  private isIconOnly() {\n    return (\n      this.label === undefined &&\n      this.hostElement.innerText === '' &&\n      this.icon !== undefined\n    );\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          hover: this.hover,\n          'icon-only': this.isIconOnly(),\n          disabled: this.disabled,\n          submenu: this.isSubMenu,\n        }}\n        role=\"listitem\"\n      >\n        <button\n          type=\"button\"\n          tabIndex={0}\n          class={{\n            'dropdown-item': true,\n            'no-checked-field': this.suppressChecked,\n          }}\n          onClick={() => this.emitItemClick()}\n        >\n          {!this.suppressChecked ? (\n            <div class=\"dropdown-item-checked\">\n              {this.checked ? (\n                <ix-icon\n                  class=\"checkmark\"\n                  name={'single-check'}\n                  size=\"16\"\n                ></ix-icon>\n              ) : null}\n            </div>\n          ) : null}\n          {this.icon ? (\n            <ix-icon class=\"dropdown-item-icon\" name={this.icon}></ix-icon>\n          ) : null}\n          <div class=\"dropdown-item-text\">\n            {this.label}\n            <slot></slot>\n          </div>\n          {this.isSubMenu ? (\n            <ix-icon\n              name={'chevron-right-small'}\n              class={'submenu-icon'}\n            ></ix-icon>\n          ) : null}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAkB,w7EACxB,MAAAC,EAAeD,E,MCyBFE,EAAY,M,kHAgBP,M,cAKG,M,aAKD,M,eAGE,M,qBAGM,K,CAS1B,mBAAMC,GACJC,KAAKC,UAAUC,KAAKF,KAAKG,Y,CAK3B,4BAAMC,GACJ,OAAOJ,KAAKG,W,CAGN,UAAAE,GACN,OACEL,KAAKM,QAAUC,WACfP,KAAKG,YAAYK,YAAc,IAC/BR,KAAKS,OAASF,S,CAIlB,MAAAG,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACLC,MAAOf,KAAKe,MACZ,YAAaf,KAAKK,aAClBW,SAAUhB,KAAKgB,SACfC,QAASjB,KAAKkB,WAEhBC,KAAK,YAELR,EAAA,UAAAE,IAAA,2CACEO,KAAK,SACLC,SAAU,EACVP,MAAO,CACL,gBAAiB,KACjB,mBAAoBd,KAAKsB,iBAE3BC,QAAS,IAAMvB,KAAKD,kBAElBC,KAAKsB,gBACLX,EAAA,OAAKG,MAAM,yBACRd,KAAKwB,QACJb,EAAA,WACEG,MAAM,YACNW,KAAM,eACNC,KAAK,OAEL,MAEJ,KACH1B,KAAKS,KACJE,EAAA,WAASG,MAAM,qBAAqBW,KAAMzB,KAAKS,OAC7C,KACJE,EAAA,OAAAE,IAAA,2CAAKC,MAAM,sBACRd,KAAKM,MACNK,EAAA,QAAAE,IAAA,8CAEDb,KAAKkB,UACJP,EAAA,WACEc,KAAM,sBACNX,MAAO,iBAEP,M"}
+{"version":3,"names":["dropdownItemCss","IxDropdownItemStyle0","DropdownItem","emitItemClick","this","itemClick","emit","hostElement","getDropdownItemElement","isIconOnly","label","undefined","innerText","icon","render","h","Host","key","class","hover","disabled","submenu","isSubMenu","role","type","tabIndex","suppressChecked","onClick","checked","name","size"],"sources":["src/components/dropdown-item/dropdown-item.scss?tag=ix-dropdown-item&encapsulation=shadow","src/components/dropdown-item/dropdown-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 'mixins/shadow-dom/hover';\n\n$itemPadding: 0.5rem;\n$itemPaddingRight: 1.5rem;\n$focusBorder: 0.0625rem;\n\n@mixin applyItemWidth($padding, $paddingRight) {\n  width: calc(100% - #{$padding} - #{$paddingRight});\n\n  padding: 0 $padding;\n  padding-right: $paddingRight;\n}\n\n:host {\n  --ix-dropdown-item-checked-color: var(--theme-color-primary);\n  @include ix-component;\n  display: flex;\n  flex-direction: row;\n\n  position: relative;\n  height: 2.5rem;\n  width: auto;\n  overflow: hidden;\n  cursor: pointer;\n\n  .dropdown-item {\n    all: unset;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    position: relative;\n    height: calc(100% - 2px);\n    @include applyItemWidth($itemPadding, $itemPaddingRight);\n    border: $focusBorder solid transparent;\n    white-space: nowrap;\n  }\n\n  .dropdown-item.no-checked-field {\n    @include applyItemWidth(1rem, $itemPaddingRight);\n  }\n\n  .dropdown-item:focus-visible {\n    border-color: var(--theme-color-focus-bdr);\n  }\n\n  .dropdown-item-checked {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    height: 100%;\n    width: 1rem;\n    min-width: 1rem;\n    margin-right: 0.25rem;\n\n    color: var(--ix-dropdown-item-checked-color);\n  }\n\n  .dropdown-item-icon {\n    margin-right: 0.25rem;\n    color: var(--theme-color-soft-text);\n  }\n\n  .dropdown-item-text {\n    display: block;\n    position: relative;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .dropdown-item:focus-visible {\n    outline: 1px solid yellow;\n  }\n\n  .submenu-icon {\n    margin-left: auto;\n  }\n}\n\n:host(.icon-only) {\n  .dropdown-item-icon {\n    margin-right: 0px;\n  }\n\n  .dropdown-item-checked {\n    display: none;\n  }\n\n  .dropdown-item {\n    @include applyItemWidth(0.5rem, 0.5rem);\n  }\n}\n\n:host(.submenu) {\n  .dropdown-item {\n    @include applyItemWidth($itemPadding, 0.5rem);\n  }\n}\n\n@include ghost-hover-pressed;\n\n:host(.disabled) {\n  pointer-events: none;\n  color: var(--theme-color-weak-text) !important;\n\n  .dropdown-item-icon {\n    color: var(--theme-color-weak-text) !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  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n} from '@stencil/core';\nimport { DropdownItemWrapper } from '../dropdown/dropdown-controller';\n\n@Component({\n  tag: 'ix-dropdown-item',\n  styleUrl: 'dropdown-item.scss',\n  shadow: true,\n})\nexport class DropdownItem implements DropdownItemWrapper {\n  @Element() hostElement!: HTMLIxDropdownItemElement;\n\n  /**\n   * Label of dropdown item\n   */\n  @Prop() label: string;\n\n  /**\n   * Icon of dropdown item\n   */\n  @Prop() icon: string;\n\n  /**\n   * Display hover state\n   */\n  @Prop() hover = false;\n\n  /**\n   * Disable item and remove event listeners\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Whether the item is checked or not. If true a checkmark will mark the item as checked.\n   */\n  @Prop() checked = false;\n\n  /** @internal */\n  @Prop() isSubMenu = false;\n\n  /** @internal */\n  @Prop() suppressChecked = false;\n\n  /** @internal */\n  @Event() itemClick: EventEmitter<HTMLIxDropdownItemElement>;\n\n  /**\n   * Internal usage only\n   */\n  @Method()\n  async emitItemClick() {\n    this.itemClick.emit(this.hostElement);\n  }\n\n  /** @internal */\n  @Method()\n  async getDropdownItemElement() {\n    return this.hostElement;\n  }\n\n  private isIconOnly() {\n    return (\n      this.label === undefined &&\n      this.hostElement.innerText === '' &&\n      this.icon !== undefined\n    );\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          hover: this.hover,\n          'icon-only': this.isIconOnly(),\n          disabled: this.disabled,\n          submenu: this.isSubMenu,\n        }}\n        role=\"listitem\"\n      >\n        <button\n          type=\"button\"\n          tabIndex={0}\n          class={{\n            'dropdown-item': true,\n            'no-checked-field': this.suppressChecked,\n          }}\n          onClick={() => this.emitItemClick()}\n        >\n          {!this.suppressChecked ? (\n            <div class=\"dropdown-item-checked\">\n              {this.checked ? (\n                <ix-icon\n                  class=\"checkmark\"\n                  name={'single-check'}\n                  size=\"16\"\n                ></ix-icon>\n              ) : null}\n            </div>\n          ) : null}\n          {this.icon ? (\n            <ix-icon class=\"dropdown-item-icon\" name={this.icon}></ix-icon>\n          ) : null}\n          <div class=\"dropdown-item-text\">\n            {this.label}\n            <slot></slot>\n          </div>\n          {this.isSubMenu ? (\n            <ix-icon\n              name={'chevron-right-small'}\n              class={'submenu-icon'}\n            ></ix-icon>\n          ) : null}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAkB,olFACxB,MAAAC,EAAeD,E,MCyBFE,EAAY,M,kHAgBP,M,cAKG,M,aAKD,M,eAGE,M,qBAGM,K,CAS1B,mBAAMC,GACJC,KAAKC,UAAUC,KAAKF,KAAKG,Y,CAK3B,4BAAMC,GACJ,OAAOJ,KAAKG,W,CAGN,UAAAE,GACN,OACEL,KAAKM,QAAUC,WACfP,KAAKG,YAAYK,YAAc,IAC/BR,KAAKS,OAASF,S,CAIlB,MAAAG,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACLC,MAAOf,KAAKe,MACZ,YAAaf,KAAKK,aAClBW,SAAUhB,KAAKgB,SACfC,QAASjB,KAAKkB,WAEhBC,KAAK,YAELR,EAAA,UAAAE,IAAA,2CACEO,KAAK,SACLC,SAAU,EACVP,MAAO,CACL,gBAAiB,KACjB,mBAAoBd,KAAKsB,iBAE3BC,QAAS,IAAMvB,KAAKD,kBAElBC,KAAKsB,gBACLX,EAAA,OAAKG,MAAM,yBACRd,KAAKwB,QACJb,EAAA,WACEG,MAAM,YACNW,KAAM,eACNC,KAAK,OAEL,MAEJ,KACH1B,KAAKS,KACJE,EAAA,WAASG,MAAM,qBAAqBW,KAAMzB,KAAKS,OAC7C,KACJE,EAAA,OAAAE,IAAA,2CAAKC,MAAM,sBACRd,KAAKM,MACNK,EAAA,QAAAE,IAAA,8CAEDb,KAAKkB,UACJP,EAAA,WACEc,KAAM,sBACNX,MAAO,iBAEP,M"}

package/dist/siemens-ix/p-112069ca.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as r,H as o,g as a}from"./p-f87cd962.js";const i='@charset "UTF-8";:host{position:relative;display:flex;align-items:center;justify-content:center;padding:10px 1.5rem;line-height:20px;font-size:14px;font-weight:bold;background-color:var(--theme-tab--background);color:var(--theme-tab--color)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host::after{content:"";position:absolute;background-color:var(--theme-tab-indicator--background);width:100%;height:var(--theme-tab-indicator--height);left:0}:host .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}:host .text span,:host .text span::before{pointer-events:none}:host .circle{display:flex;justify-content:center;align-items:center;height:3rem;width:3rem;background-color:var(--theme-animated-tab-indicator--background);border-radius:50%;border:2px solid var(--theme-animated-tab-circle--border-color);color:var(--theme-an…icon--color);cursor:pointer}:host .circle.selected:not(.disabled){background-color:var(--theme-animated-tab-circle--background--selected);color:var(--theme-animated-tab-icon--color--selected);border-color:var(--theme-animated-tab-circle--border-color--selected)}:host .circle.selected:not(.disabled):hover{background-color:var(--theme-animated-tab-circle--background--selected)}:host .circle:hover{background-color:var(--theme-animated-tab-circle--background--hover)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle.disabled{background-color:var(--theme-animated-tab-circle--background--disabled);border-color:var(--theme-animated-tab-circle--border-color--disabled)}:host .counter{position:absolute;z-index:1;height:16px;width:auto;background-color:var(--theme-pill-outline--background);border:1px solid var(--theme-tab-pill--border-color);border-radius:100px;bottom:6px;display:flex;justify-content:center;align-items:center;padding-left:0.25rem;padding-right:0.25rem;font-size:12px;line-height:14px;color:var(--theme-pill-outline--color);cursor:pointer}:host .counter.selected{border-color:var(--theme-tab-pill--border-color--selected)}:host .counter.disabled{border-color:var(--theme-tab-pill--border-color--disabled)}:host .hidden{display:none}:host(.circle){height:72px}:host(.top)::after{top:0}:host(.bottom)::after{bottom:0}:host(.stretched){flex-basis:100%;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(:hover:not(.circle)){background-color:var(--theme-tab--background--hover);color:var(--theme-tab-color-hover);cursor:pointer}:host(:hover:not(.circle))::after{background-color:var(--theme-tab-indicator--background--hover)}:host(:active:not(.circle)){background-color:var(--theme-tab--background--active);color:var(--theme-tab-color--active)}:host(:active:not(.circle))::after{background-color:var(--theme-tab-indicator--background--active)}:host(:focus-visible){outline:0px solid var(--focus--border-color)}:host(:focus-visible) .circle{outline:1px solid var(--focus--border-color)}:host(:focus-visible:not(.circle)){outline:1px solid var(--focus--border-color)}:host(.disabled){pointer-events:none;color:var(--theme-tab--color--disabled);background-color:var(--theme-tab--background--disabled)}:host(.disabled)::after{background-color:var(--theme-tab-indicator--background--disabled)}:host(.selected:not(.disabled)){background-color:var(--theme-tab--background--selected);color:var(--theme-tab--color--selected)}:host(.selected:not(.disabled))::after{background-color:var(--theme-tab-indicator--background--selected)}:host(.icon){padding:1.5rem 0.5rem}:host(.small-tab){height:32px;padding:1rem}:host(.small-tab.icon){padding:1rem 0.25rem}';const s=i;const c=class{constructor(r){t(this,r);this.tabClick=e(this,"tabClick",7);this.selected=false;this.disabled=false;this.small=false;this.icon=false;this.rounded=false;this.counter=undefined;this.layout="auto";this.placement="bottom"}tabItemClasses(t){return{selected:t.selected,disabled:t.disabled,"small-tab":t.small,icon:t.small,stretched:t.layout==="stretched",bottom:t.placement==="bottom",top:t.placement==="top",circle:t.circle}}render(){return r(o,{key:"926d3579090f1be086eb75bdbc42865af3c51836",class:this.tabItemClasses({selected:this.selected,disabled:this.disabled,small:this.small,icon:this.icon,layout:this.layout,placement:this.placement,circle:this.rounded}),tabIndex:0,onClick:t=>{const e=this.tabClick.emit({nativeEvent:t});if(e.defaultPrevented){t.stopPropagation()}}},r("div",{key:"fedfa30ba5108be5a8b0c0078a9512acab21f067",class:{circle:this.rounded,text:!this.rounded,selected:this.selected,disabled:this.disabled}},r("slot",{key:"e1ff1b021041a04689c8ae1b1b54894f51fda854"})),r("div",{key:"8cd112dcb4dcd0513603bf4623a58bb9740d6b32",class:{counter:true,selected:this.selected,hidden:!(this.rounded&&this.counter!==undefined),disabled:this.disabled}},this.counter))}};c.style=s;const l=t=>{if(typeof __zone_symbol__requestAnimationFrame==="function"){return __zone_symbol__requestAnimationFrame(t)}if(typeof requestAnimationFrame==="function"){return requestAnimationFrame(t)}return setTimeout(t)};const n=":host{width:auto;display:flex;align-items:center;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .tab-items{overflow:hidden;scroll-behavior:smooth;width:100%}:host .tab-items .items-content{display:flex;align-items:center}:host .arrow{position:absolute;display:flex;align-items:center;justify-content:center;width:32px;height:32px;top:0;bottom:0;left:0;margin:auto 0;border-radius:4px;color:var(--theme-btn-invisible-primary--color);background-color:var(--theme-btn-invisible-primary--background);z-index:2}:host .arrow:hover{color:var(--theme-btn-invisible-primary--color--hover);background-color:var(--theme-btn-invisible-primary--background--hover)}:host .arrow:active{color:var(--theme-btn-invisible-primary--color--active);background-color:var(--theme-btn-invisible-primary--background--active)}:host .arrow.right{left:auto;right:0}:host .overflow-shadow{display:block;position:relative;height:100%;width:100%;pointer-events:all}:host .overflow-shadow.shadow-left{-webkit-mask-image:linear-gradient(90deg, transparent 0px, black 45px);mask-image:linear-gradient(90deg, transparent 0px, black 45px)}:host .overflow-shadow.shadow-right{-webkit-mask-image:linear-gradient(90deg, black calc(100% - 45px), transparent 100%);mask-image:linear-gradient(90deg, black calc(100% - 45px), transparent 100%)}:host .overflow-shadow.shadow-both{-webkit-mask-image:linear-gradient(90deg, transparent 0px, black 45px, black calc(100% - 45px), transparent 100%);mask-image:linear-gradient(90deg, transparent 0px, black 45px, black calc(100% - 45px), transparent 100%)}";const h=n;const d=class{constructor(r){t(this,r);this.selectedChange=e(this,"selectedChange",7);this.windowStartSize=window.innerWidth;this.clickAction={timeout:null,isClick:true};this.small=false;this.rounded=false;this.selected=0;this.layout="auto";this.placement="bottom";this.totalItems=0;this.currentScrollAmount=0;this.scrollAmount=100;this.scrollActionAmount=0}get arrowLeftElement(){return this.hostElement.shadowRoot.querySelector("[data-arrow-left]")}get arrowRightElement(){return this.hostElement.shadowRoot.querySelector("[data-arrow-right]")}onWindowResize(){this.totalItems=0;this.totalItems=this.getTabs().length;if(this.windowStartSize===0)return this.windowStartSize=window.innerWidth;this.move(this.windowStartSize-window.innerWidth);this.windowStartSize=window.innerWidth}getTabs(){return Array.from(this.hostElement.querySelectorAll("ix-tab-item"))}getTab(t){return this.getTabs()[t]}getTabsWrapper(){return this.hostElement.shadowRoot.querySelector(".items-content")}showArrows(){try{const t=this.getTabsWrapper();return t.scrollWidth>Math.ceil(t.getBoundingClientRect().width)&&this.layout==="auto"}catch(t){return false}}showPreviousArrow(){try{return this.showArrows()&&this.scrollActionAmount<0}catch(t){return false}}showNextArrow(){try{const t=this.getTabsWrapper();const e=t.getBoundingClientRect();return this.showArrows()&&this.scrollActionAmount>(t.scrollWidth-e.width)*-1}catch(t){return false}}getArrowStyle(t){return{opacity:t?"1":"0",zIndex:t?"1":"-1"}}move(t,e=false){const r=this.getTabsWrapper();const o=(r.scrollWidth-r.getBoundingClientRect().width)*-1;t=this.currentScrollAmount+t;t=t>0?0:t<o?o:t;const a=[`transform: translateX(${t}px);`,e?"transition: all ease-in-out 400ms;":""].join("");r.setAttribute("style",a);if(e)this.currentScrollAmount=this.scrollActionAmount=t;else this.scrollActionAmount=t}moveTabToView(t){if(!this.showArrows())return;const e=this.getTab(t).getBoundingClientRect();const r=e.x*-1;this.move(r,true)}setSelected(t){this.selected=t}clickTab(t){if(this.dragStop()){return}const{defaultPrevented:e}=this.selectedChange.emit(t);if(e){return}this.setSelected(t);this.moveTabToView(t)}dragStart(t,e){if(!this.showArrows())return;if(e.button>0)return;this.clickAction.timeout=this.clickAction.timeout===null?setTimeout((()=>this.clickAction.isClick=false),300):null;const r=parseFloat(window.getComputedStyle(t).left);const o=e.clientX;const a=t=>this.dragMove(t,r,o);window.addEventListener("mouseup",(()=>{window.removeEventListener("mousemove",a,false);this.dragStop()}));window.addEventListener("mousemove",a,false)}dragMove(t,e,r){this.move(t.clientX+e-r)}dragStop(){clearTimeout(this.clickAction.timeout);this.clickAction.timeout=null;if(this.clickAction.isClick)return false;this.currentScrollAmount=this.scrollActionAmount;this.clickAction.isClick=true;return true}componentWillLoad(){const t=this.getTabs();t.map(((t,e)=>{if(this.small)t.setAttribute("small","true");if(this.rounded)t.setAttribute("rounded","true");t.setAttribute("layout",this.layout);t.setAttribute("selected",e===this.selected?"true":"false");t.setAttribute("placement",this.placement)}))}componentDidRender(){const t=this.getTabs();this.totalItems=t.length;t.map(((t,e)=>{t.setAttribute("selected",e===this.selected?"true":"false")}))}componentWillRender(){l((()=>{const t=this.showNextArrow();const e=this.showPreviousArrow();Object.assign(this.arrowLeftElement.style,this.getArrowStyle(e));Object.assign(this.arrowRightElement.style,this.getArrowStyle(t))}))}componentDidLoad(){const t=this.getTabs();t.forEach((t=>{t.addEventListener("mousedown",(e=>this.dragStart(t,e)))}))}onTabClick(t){if(t.defaultPrevented){return}const e=t.target;const r=this.getTabs();r.forEach(((t,r)=>{if(!t.disabled&&t===e){this.clickTab(r)}}))}render(){return r(o,{key:"a851dd22c0036611316b4c86dee7683c2cf13367"},r("div",{key:"3cdc8ce203a7fdcb431bc8514e97e1dc99ccf42f",class:"arrow","data-arrow-left":true,onClick:()=>this.move(this.scrollAmount,true)},r("ix-icon",{key:"a9a56482c144ccdfdbcb037ef4a1f3ba87907f59",name:"chevron-left-small"})),r("div",{key:"c94814d93009f941f491ee27aab2d1f0a58641ef",class:{"tab-items":true,"overflow-shadow":true,"shadow-left":this.showPreviousArrow(),"shadow-right":this.showNextArrow(),"shadow-both":this.showNextArrow()&&this.showPreviousArrow()}},r("div",{key:"e3b6d3d72736895e294b284e57ded8d225376405",class:"items-content"},r("slot",{key:"66fad8fbd1c2c599e3614377d0ef917b11653a2c"}))),r("div",{key:"27512bc8fb342ac6247dd69261bdbdab2a8d42dc",class:"arrow right","data-arrow-right":true,onClick:()=>this.move(-this.scrollAmount,true)},r("ix-icon",{key:"99ab01071111e8fca336712967e7e2c0a8643450",name:"chevron-right-small"})))}get hostElement(){return a(this)}};d.style=h;export{c as ix_tab_item,d as ix_tabs};
+//# sourceMappingURL=p-112069ca.entry.js.map

package/dist/siemens-ix/p-112069ca.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tabItemCss","IxTabItemStyle0","TabItem","tabItemClasses","props","selected","disabled","small","icon","stretched","layout","bottom","placement","top","circle","render","h","Host","key","class","this","rounded","tabIndex","onClick","event","clientEvent","tabClick","emit","nativeEvent","defaultPrevented","stopPropagation","text","counter","hidden","undefined","requestAnimationFrameNoNgZone","callback","__zone_symbol__requestAnimationFrame","requestAnimationFrame","setTimeout","tabsCss","IxTabsStyle0","Tabs","windowStartSize","window","innerWidth","clickAction","timeout","isClick","arrowLeftElement","hostElement","shadowRoot","querySelector","arrowRightElement","onWindowResize","totalItems","getTabs","length","move","Array","from","querySelectorAll","getTab","getTabsWrapper","showArrows","tabWrapper","scrollWidth","Math","ceil","getBoundingClientRect","width","error","showPreviousArrow","scrollActionAmount","showNextArrow","tabWrapperRect","getArrowStyle","condition","opacity","zIndex","amount","click","maxScrollWidth","currentScrollAmount","styles","join","setAttribute","moveTabToView","tab","x","setSelected","index","clickTab","dragStop","selectedChange","dragStart","element","button","tabPositionX","parseFloat","getComputedStyle","left","mousedownPositionX","clientX","dragMove","addEventListener","removeEventListener","tabX","mousedownX","clearTimeout","componentWillLoad","tabs","map","componentDidRender","componentWillRender","previousArrow","Object","assign","style","componentDidLoad","forEach","onTabClick","target","scrollAmount","name"],"sources":["src/components/tab-item/tab-item.scss?tag=ix-tab-item&encapsulation=shadow","src/components/tab-item/tab-item.tsx","src/components/utils/requestAnimationFrame.ts","src/components/tabs/tabs.scss?tag=ix-tabs&encapsulation=shadow","src/components/tabs/tabs.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/text-truncation';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 10px $large-space;\n  line-height: 20px;\n  font-size: 14px;\n  font-weight: bold;\n  background-color: var(--theme-tab--background);\n  color: var(--theme-tab--color);\n\n  &::after {\n    content: '';\n    position: absolute;\n    background-color: var(--theme-tab-indicator--background);\n    width: 100%;\n    height: var(--theme-tab-indicator--height);\n    left: 0;\n  }\n\n  .text {\n    @include ellipsis;\n\n    span,\n    span::before {\n      pointer-events: none;\n    }\n\n    vertical-align: middle;\n  }\n\n  .circle {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 3rem;\n    width: 3rem;\n    background-color: var(--theme-animated-tab-indicator--background);\n    border-radius: 50%;\n    border: 2px solid var(--theme-animated-tab-circle--border-color);\n    color: var(--theme-an…icon--color);\n    cursor: pointer;\n\n    &.selected:not(.disabled) {\n      background-color: var(--theme-animated-tab-circle--background--selected);\n      color: var(--theme-animated-tab-icon--color--selected);\n      border-color: var(--theme-animated-tab-circle--border-color--selected);\n\n      &:hover {\n        background-color: var(\n          --theme-animated-tab-circle--background--selected\n        );\n      }\n    }\n\n    &:hover {\n      background-color: var(--theme-animated-tab-circle--background--hover);\n    }\n\n    &:active {\n      background-color: var(--theme-animated-tab-circle--background--active);\n    }\n\n    &:active {\n      background-color: var(--theme-animated-tab-circle--background--active);\n    }\n\n    &.disabled {\n      background-color: var(--theme-animated-tab-circle--background--disabled);\n      border-color: var(--theme-animated-tab-circle--border-color--disabled);\n    }\n  }\n\n  .counter {\n    position: absolute;\n    z-index: 1;\n    height: 16px;\n    width: auto;\n    background-color: var(--theme-pill-outline--background);\n    border: 1px solid var(--theme-tab-pill--border-color);\n    border-radius: 100px;\n    bottom: 6px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding-left: $tiny-space;\n    padding-right: $tiny-space;\n    font-size: 12px;\n    line-height: 14px;\n    color: var(--theme-pill-outline--color);\n    cursor: pointer;\n\n    &.selected {\n      border-color: var(--theme-tab-pill--border-color--selected);\n    }\n\n    &.disabled {\n      border-color: var(--theme-tab-pill--border-color--disabled);\n    }\n  }\n\n  .hidden {\n    display: none;\n  }\n}\n\n:host(.circle) {\n  height: 72px;\n}\n\n:host(.top) {\n  &::after {\n    top: 0;\n  }\n}\n\n:host(.bottom) {\n  &::after {\n    bottom: 0;\n  }\n}\n\n:host(.stretched) {\n  flex-basis: 100%;\n  width: 100%;\n  @include ellipsis;\n}\n\n:host(:hover:not(.circle)) {\n  background-color: var(--theme-tab--background--hover);\n  color: var(--theme-tab-color-hover);\n  cursor: pointer;\n\n  &::after {\n    background-color: var(--theme-tab-indicator--background--hover);\n  }\n}\n\n:host(:active:not(.circle)) {\n  background-color: var(--theme-tab--background--active);\n  color: var(--theme-tab-color--active);\n\n  &::after {\n    background-color: var(--theme-tab-indicator--background--active);\n  }\n}\n\n:host(:focus-visible) {\n  outline: 0px solid var(--focus--border-color);\n\n  .circle {\n    outline: 1px solid var(--focus--border-color);\n  }\n}\n\n:host(:focus-visible:not(.circle)) {\n  outline: 1px solid var(--focus--border-color);\n}\n\n:host(.disabled) {\n  pointer-events: none;\n  color: var(--theme-tab--color--disabled);\n  background-color: var(--theme-tab--background--disabled);\n\n  &::after {\n    background-color: var(--theme-tab-indicator--background--disabled);\n  }\n}\n\n:host(.selected:not(.disabled)) {\n  background-color: var(--theme-tab--background--selected);\n  color: var(--theme-tab--color--selected);\n\n  &::after {\n    background-color: var(--theme-tab-indicator--background--selected);\n  }\n}\n\n:host(.icon) {\n  padding: $large-space $small-space;\n}\n\n:host(.small-tab) {\n  height: 32px;\n  padding: $default-space;\n}\n\n:host(.small-tab.icon) {\n  padding: $default-space $tiny-space;\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\nexport type TabClickDetail = {\n  nativeEvent: MouseEvent;\n};\n\n@Component({\n  tag: 'ix-tab-item',\n  styleUrl: 'tab-item.scss',\n  shadow: true,\n})\nexport class TabItem {\n  /**\n   * Set selected tab\n   */\n  @Prop() selected = false;\n\n  /**\n   * Set disabled tab\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Set small size tab\n   */\n  @Prop() small = false;\n\n  /**\n   * Set icon only tab\n   */\n  @Prop() icon = false;\n\n  /**\n   * Set rounded tab\n   */\n  @Prop() rounded = false;\n\n  /**\n   * Set counter value\n   */\n  @Prop() counter: number;\n\n  /**\n   * Set layout width style\n   */\n  @Prop() layout: 'auto' | 'stretched' = 'auto';\n\n  /**\n   * Set selected placement\n   */\n  @Prop() placement: 'bottom' | 'top' = 'bottom';\n\n  /**\n   * Emitted when the tab is clicked.\n   *\n   * @since 2.0.0\n   */\n  @Event() tabClick: EventEmitter<TabClickDetail>;\n\n  private tabItemClasses(props: {\n    selected: boolean;\n    disabled: boolean;\n    small: boolean;\n    icon: boolean;\n    circle: boolean;\n    layout: 'auto' | 'stretched';\n    placement: 'bottom' | 'top';\n  }) {\n    return {\n      selected: props.selected,\n      disabled: props.disabled,\n      'small-tab': props.small,\n      icon: props.small,\n      stretched: props.layout === 'stretched',\n      bottom: props.placement === 'bottom',\n      top: props.placement === 'top',\n      circle: props.circle,\n    };\n  }\n\n  render() {\n    return (\n      <Host\n        class={this.tabItemClasses({\n          selected: this.selected,\n          disabled: this.disabled,\n          small: this.small,\n          icon: this.icon,\n          layout: this.layout,\n          placement: this.placement,\n          circle: this.rounded,\n        })}\n        tabIndex={0}\n        onClick={(event: MouseEvent) => {\n          const clientEvent = this.tabClick.emit({\n            nativeEvent: event,\n          });\n\n          if (clientEvent.defaultPrevented) {\n            event.stopPropagation();\n          }\n        }}\n      >\n        <div\n          class={{\n            circle: this.rounded,\n            text: !this.rounded,\n            selected: this.selected,\n            disabled: this.disabled,\n          }}\n        >\n          <slot></slot>\n        </div>\n        <div\n          class={{\n            counter: true,\n            selected: this.selected,\n            hidden: !(this.rounded && this.counter !== undefined),\n            disabled: this.disabled,\n          }}\n        >\n          {this.counter}\n        </div>\n      </Host>\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\ndeclare const __zone_symbol__requestAnimationFrame: any;\n\n/**\n * Prevents angular from change detection when requesting an animation frame\n *\n * Credits goes to:\n * https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/helpers.ts\n */\nexport const requestAnimationFrameNoNgZone = (\n  callback: (...args: any[]) => void\n) => {\n  if (typeof __zone_symbol__requestAnimationFrame === 'function') {\n    return __zone_symbol__requestAnimationFrame(callback);\n  }\n  if (typeof requestAnimationFrame === 'function') {\n    return requestAnimationFrame(callback);\n  }\n  return setTimeout(callback);\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/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  width: auto;\n  display: flex;\n  align-items: center;\n  position: relative;\n\n  .tab-items {\n    overflow: hidden;\n    scroll-behavior: smooth;\n    width: 100%;\n\n    .items-content {\n      display: flex;\n      align-items: center;\n    }\n  }\n\n  .arrow {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    margin: auto 0;\n    border-radius: 4px;\n    color: var(--theme-btn-invisible-primary--color);\n    background-color: var(--theme-btn-invisible-primary--background);\n    z-index: 2;\n\n    &:hover {\n      color: var(--theme-btn-invisible-primary--color--hover);\n      background-color: var(--theme-btn-invisible-primary--background--hover);\n    }\n\n    &:active {\n      color: var(--theme-btn-invisible-primary--color--active);\n      background-color: var(--theme-btn-invisible-primary--background--active);\n    }\n\n    &.right {\n      left: auto;\n      right: 0;\n    }\n  }\n\n  .overflow-shadow {\n    display: block;\n    position: relative;\n    height: 100%;\n    width: 100%;\n    pointer-events: all;\n\n    &.shadow-left {\n      mask-image: linear-gradient(90deg, transparent 0px, black 45px);\n    }\n\n    &.shadow-right {\n      mask-image: linear-gradient(\n        90deg,\n        black calc(100% - 45px),\n        transparent 100%\n      );\n    }\n\n    &.shadow-both {\n      mask-image: linear-gradient(\n        90deg,\n        transparent 0px,\n        black 45px,\n        black calc(100% - 45px),\n        transparent 100%\n      );\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  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { requestAnimationFrameNoNgZone } from '../utils/requestAnimationFrame';\n\n@Component({\n  tag: 'ix-tabs',\n  styleUrl: 'tabs.scss',\n  shadow: true,\n})\nexport class Tabs {\n  @Element() hostElement!: HTMLIxTabsElement;\n\n  /**\n   * Set tab items to small size\n   */\n  @Prop() small = false;\n\n  /**\n   * Set rounded tabs\n   */\n  @Prop() rounded = false;\n\n  /**\n   * Set default selected tab by index\n   */\n  @Prop({ mutable: true }) selected = 0;\n\n  /**\n   * Set layout width style\n   */\n  @Prop() layout: 'auto' | 'stretched' = 'auto';\n\n  /**\n   * Set placement style\n   */\n  @Prop() placement: 'bottom' | 'top' = 'bottom';\n\n  /**\n   * `selected` property changed\n   *\n   * @since 2.0.0\n   */\n  @Event() selectedChange: EventEmitter<number>;\n\n  @State() totalItems = 0;\n  @State() currentScrollAmount = 0;\n  @State() scrollAmount = 100;\n\n  @State() scrollActionAmount = 0;\n\n  private windowStartSize = window.innerWidth;\n\n  private get arrowLeftElement() {\n    return this.hostElement.shadowRoot.querySelector(\n      '[data-arrow-left]'\n    ) as HTMLElement;\n  }\n\n  private get arrowRightElement() {\n    return this.hostElement.shadowRoot.querySelector(\n      '[data-arrow-right]'\n    ) as HTMLElement;\n  }\n\n  private clickAction: {\n    timeout: NodeJS.Timeout;\n    isClick: boolean;\n  } = {\n    timeout: null,\n    isClick: true,\n  };\n\n  @Listen('resize', { target: 'window' })\n  onWindowResize() {\n    this.totalItems = 0;\n    this.totalItems = this.getTabs().length;\n\n    if (this.windowStartSize === 0)\n      return (this.windowStartSize = window.innerWidth);\n    this.move(this.windowStartSize - window.innerWidth);\n    this.windowStartSize = window.innerWidth;\n  }\n\n  private getTabs() {\n    return Array.from(this.hostElement.querySelectorAll('ix-tab-item'));\n  }\n\n  private getTab(tabIndex: number) {\n    return this.getTabs()[tabIndex];\n  }\n\n  private getTabsWrapper() {\n    return this.hostElement.shadowRoot.querySelector('.items-content');\n  }\n\n  private showArrows() {\n    try {\n      const tabWrapper = this.getTabsWrapper();\n      return (\n        tabWrapper.scrollWidth >\n          Math.ceil(tabWrapper.getBoundingClientRect().width) &&\n        this.layout === 'auto'\n      );\n    } catch (error) {\n      return false;\n    }\n  }\n\n  private showPreviousArrow() {\n    try {\n      return this.showArrows() && this.scrollActionAmount < 0;\n    } catch (error) {\n      return false;\n    }\n  }\n\n  private showNextArrow() {\n    try {\n      const tabWrapper = this.getTabsWrapper();\n      const tabWrapperRect = tabWrapper.getBoundingClientRect();\n\n      return (\n        this.showArrows() &&\n        this.scrollActionAmount >\n          (tabWrapper.scrollWidth - tabWrapperRect.width) * -1\n      );\n    } catch (error) {\n      return false;\n    }\n  }\n\n  private getArrowStyle(condition: boolean) {\n    return {\n      opacity: condition ? '1' : '0',\n      zIndex: condition ? '1' : '-1',\n    };\n  }\n\n  private move(amount: number, click = false) {\n    const tabWrapper = this.getTabsWrapper();\n    const maxScrollWidth =\n      (tabWrapper.scrollWidth - tabWrapper.getBoundingClientRect().width) * -1;\n\n    amount = this.currentScrollAmount + amount;\n    amount = amount > 0 ? 0 : amount < maxScrollWidth ? maxScrollWidth : amount;\n\n    const styles = [\n      `transform: translateX(${amount}px);`,\n      click ? 'transition: all ease-in-out 400ms;' : '',\n    ].join('');\n\n    tabWrapper.setAttribute('style', styles);\n\n    if (click) this.currentScrollAmount = this.scrollActionAmount = amount;\n    else this.scrollActionAmount = amount;\n  }\n\n  private moveTabToView(tabIndex: number) {\n    if (!this.showArrows()) return;\n\n    const tab = this.getTab(tabIndex).getBoundingClientRect();\n    const amount = tab.x * -1;\n    this.move(amount, true);\n  }\n\n  private setSelected(index: number) {\n    this.selected = index;\n  }\n\n  private clickTab(index: number) {\n    if (this.dragStop()) {\n      return;\n    }\n\n    const { defaultPrevented } = this.selectedChange.emit(index);\n    if (defaultPrevented) {\n      return;\n    }\n\n    this.setSelected(index);\n    this.moveTabToView(index);\n  }\n\n  private dragStart(element: HTMLIxTabItemElement, event: MouseEvent) {\n    if (!this.showArrows()) return;\n    if (event.button > 0) return;\n\n    this.clickAction.timeout =\n      this.clickAction.timeout === null\n        ? setTimeout(() => (this.clickAction.isClick = false), 300)\n        : null;\n\n    const tabPositionX = parseFloat(window.getComputedStyle(element).left);\n    const mousedownPositionX = event.clientX;\n    const move = (event: MouseEvent) =>\n      this.dragMove(event, tabPositionX, mousedownPositionX);\n\n    window.addEventListener('mouseup', () => {\n      window.removeEventListener('mousemove', move, false);\n      this.dragStop();\n    });\n    window.addEventListener('mousemove', move, false);\n  }\n\n  private dragMove(event: MouseEvent, tabX: number, mousedownX: number) {\n    this.move(event.clientX + tabX - mousedownX);\n  }\n\n  private dragStop() {\n    clearTimeout(this.clickAction.timeout);\n    this.clickAction.timeout = null;\n\n    if (this.clickAction.isClick) return false;\n\n    this.currentScrollAmount = this.scrollActionAmount;\n    this.clickAction.isClick = true;\n\n    return true;\n  }\n\n  componentWillLoad() {\n    const tabs = this.getTabs();\n\n    tabs.map((element, index) => {\n      if (this.small) element.setAttribute('small', 'true');\n\n      if (this.rounded) element.setAttribute('rounded', 'true');\n\n      element.setAttribute('layout', this.layout);\n      element.setAttribute(\n        'selected',\n        index === this.selected ? 'true' : 'false'\n      );\n\n      element.setAttribute('placement', this.placement);\n    });\n  }\n\n  componentDidRender() {\n    const tabs = this.getTabs();\n    this.totalItems = tabs.length;\n\n    tabs.map((element, index) => {\n      element.setAttribute(\n        'selected',\n        index === this.selected ? 'true' : 'false'\n      );\n    });\n  }\n\n  componentWillRender() {\n    requestAnimationFrameNoNgZone(() => {\n      const showNextArrow = this.showNextArrow();\n      const previousArrow = this.showPreviousArrow();\n\n      Object.assign(\n        this.arrowLeftElement.style,\n        this.getArrowStyle(previousArrow)\n      );\n      Object.assign(\n        this.arrowRightElement.style,\n        this.getArrowStyle(showNextArrow)\n      );\n    });\n  }\n\n  componentDidLoad() {\n    const tabs = this.getTabs();\n    tabs.forEach((element) => {\n      element.addEventListener('mousedown', (event) =>\n        this.dragStart(element, event)\n      );\n    });\n  }\n\n  @Listen('tabClick')\n  onTabClick(event: CustomEvent) {\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    const target = event.target;\n    const tabs = this.getTabs();\n\n    tabs.forEach((tab, index) => {\n      if (!tab.disabled && tab === target) {\n        this.clickTab(index);\n      }\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class=\"arrow\"\n          data-arrow-left\n          onClick={() => this.move(this.scrollAmount, true)}\n        >\n          <ix-icon name={'chevron-left-small'}></ix-icon>\n        </div>\n        <div\n          class={{\n            'tab-items': true,\n            'overflow-shadow': true,\n            'shadow-left': this.showPreviousArrow(),\n            'shadow-right': this.showNextArrow(),\n            'shadow-both': this.showNextArrow() && this.showPreviousArrow(),\n          }}\n        >\n          <div class=\"items-content\">\n            <slot></slot>\n          </div>\n        </div>\n        <div\n          class=\"arrow right\"\n          data-arrow-right\n          onClick={() => this.move(-this.scrollAmount, true)}\n        >\n          <ix-icon name={'chevron-right-small'}></ix-icon>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAa,mzIACnB,MAAAC,EAAeD,E,MCmBFE,EAAO,M,0EAIC,M,cAKA,M,WAKH,M,UAKD,M,aAKG,M,mCAUqB,O,eAKD,Q,CAS9B,cAAAC,CAAeC,GASrB,MAAO,CACLC,SAAUD,EAAMC,SAChBC,SAAUF,EAAME,SAChB,YAAaF,EAAMG,MACnBC,KAAMJ,EAAMG,MACZE,UAAWL,EAAMM,SAAW,YAC5BC,OAAQP,EAAMQ,YAAc,SAC5BC,IAAKT,EAAMQ,YAAc,MACzBE,OAAQV,EAAMU,O,CAIlB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAOC,KAAKjB,eAAe,CACzBE,SAAUe,KAAKf,SACfC,SAAUc,KAAKd,SACfC,MAAOa,KAAKb,MACZC,KAAMY,KAAKZ,KACXE,OAAQU,KAAKV,OACbE,UAAWQ,KAAKR,UAChBE,OAAQM,KAAKC,UAEfC,SAAU,EACVC,QAAUC,IACR,MAAMC,EAAcL,KAAKM,SAASC,KAAK,CACrCC,YAAaJ,IAGf,GAAIC,EAAYI,iBAAkB,CAChCL,EAAMM,iB,IAIVd,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACLL,OAAQM,KAAKC,QACbU,MAAOX,KAAKC,QACZhB,SAAUe,KAAKf,SACfC,SAAUc,KAAKd,WAGjBU,EAAA,QAAAE,IAAA,8CAEFF,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACLa,QAAS,KACT3B,SAAUe,KAAKf,SACf4B,SAAUb,KAAKC,SAAWD,KAAKY,UAAYE,WAC3C5B,SAAUc,KAAKd,WAGhBc,KAAKY,S,aCjHT,MAAMG,EACXC,IAEA,UAAWC,uCAAyC,WAAY,CAC9D,OAAOA,qCAAqCD,E,CAE9C,UAAWE,wBAA0B,WAAY,CAC/C,OAAOA,sBAAsBF,E,CAE/B,OAAOG,WAAWH,EAAS,EC1B7B,MAAMI,EAAU,uvEAChB,MAAAC,EAAeD,E,MC0BFE,EAAI,M,wEAyCPtB,KAAAuB,gBAAkBC,OAAOC,WAczBzB,KAAA0B,YAGJ,CACFC,QAAS,KACTC,QAAS,M,WAtDK,M,aAKE,M,cAKkB,E,YAKG,O,eAKD,S,gBAShB,E,yBACS,E,kBACP,I,wBAEM,C,CAI9B,oBAAYC,GACV,OAAO7B,KAAK8B,YAAYC,WAAWC,cACjC,oB,CAIJ,qBAAYC,GACV,OAAOjC,KAAK8B,YAAYC,WAAWC,cACjC,qB,CAaJ,cAAAE,GACElC,KAAKmC,WAAa,EAClBnC,KAAKmC,WAAanC,KAAKoC,UAAUC,OAEjC,GAAIrC,KAAKuB,kBAAoB,EAC3B,OAAQvB,KAAKuB,gBAAkBC,OAAOC,WACxCzB,KAAKsC,KAAKtC,KAAKuB,gBAAkBC,OAAOC,YACxCzB,KAAKuB,gBAAkBC,OAAOC,U,CAGxB,OAAAW,GACN,OAAOG,MAAMC,KAAKxC,KAAK8B,YAAYW,iBAAiB,e,CAG9C,MAAAC,CAAOxC,GACb,OAAOF,KAAKoC,UAAUlC,E,CAGhB,cAAAyC,GACN,OAAO3C,KAAK8B,YAAYC,WAAWC,cAAc,iB,CAG3C,UAAAY,GACN,IACE,MAAMC,EAAa7C,KAAK2C,iBACxB,OACEE,EAAWC,YACTC,KAAKC,KAAKH,EAAWI,wBAAwBC,QAC/ClD,KAAKV,SAAW,M,CAElB,MAAO6D,GACP,OAAO,K,EAIH,iBAAAC,GACN,IACE,OAAOpD,KAAK4C,cAAgB5C,KAAKqD,mBAAqB,C,CACtD,MAAOF,GACP,OAAO,K,EAIH,aAAAG,GACN,IACE,MAAMT,EAAa7C,KAAK2C,iBACxB,MAAMY,EAAiBV,EAAWI,wBAElC,OACEjD,KAAK4C,cACL5C,KAAKqD,oBACFR,EAAWC,YAAcS,EAAeL,QAAU,C,CAEvD,MAAOC,GACP,OAAO,K,EAIH,aAAAK,CAAcC,GACpB,MAAO,CACLC,QAASD,EAAY,IAAM,IAC3BE,OAAQF,EAAY,IAAM,K,CAItB,IAAAnB,CAAKsB,EAAgBC,EAAQ,OACnC,MAAMhB,EAAa7C,KAAK2C,iBACxB,MAAMmB,GACHjB,EAAWC,YAAcD,EAAWI,wBAAwBC,QAAU,EAEzEU,EAAS5D,KAAK+D,oBAAsBH,EACpCA,EAASA,EAAS,EAAI,EAAIA,EAASE,EAAiBA,EAAiBF,EAErE,MAAMI,EAAS,CACb,yBAAyBJ,QACzBC,EAAQ,qCAAuC,IAC/CI,KAAK,IAEPpB,EAAWqB,aAAa,QAASF,GAEjC,GAAIH,EAAO7D,KAAK+D,oBAAsB/D,KAAKqD,mBAAqBO,OAC3D5D,KAAKqD,mBAAqBO,C,CAGzB,aAAAO,CAAcjE,GACpB,IAAKF,KAAK4C,aAAc,OAExB,MAAMwB,EAAMpE,KAAK0C,OAAOxC,GAAU+C,wBAClC,MAAMW,EAASQ,EAAIC,GAAK,EACxBrE,KAAKsC,KAAKsB,EAAQ,K,CAGZ,WAAAU,CAAYC,GAClBvE,KAAKf,SAAWsF,C,CAGV,QAAAC,CAASD,GACf,GAAIvE,KAAKyE,WAAY,CACnB,M,CAGF,MAAMhE,iBAAEA,GAAqBT,KAAK0E,eAAenE,KAAKgE,GACtD,GAAI9D,EAAkB,CACpB,M,CAGFT,KAAKsE,YAAYC,GACjBvE,KAAKmE,cAAcI,E,CAGb,SAAAI,CAAUC,EAA+BxE,GAC/C,IAAKJ,KAAK4C,aAAc,OACxB,GAAIxC,EAAMyE,OAAS,EAAG,OAEtB7E,KAAK0B,YAAYC,QACf3B,KAAK0B,YAAYC,UAAY,KACzBR,YAAW,IAAOnB,KAAK0B,YAAYE,QAAU,OAAQ,KACrD,KAEN,MAAMkD,EAAeC,WAAWvD,OAAOwD,iBAAiBJ,GAASK,MACjE,MAAMC,EAAqB9E,EAAM+E,QACjC,MAAM7C,EAAQlC,GACZJ,KAAKoF,SAAShF,EAAO0E,EAAcI,GAErC1D,OAAO6D,iBAAiB,WAAW,KACjC7D,OAAO8D,oBAAoB,YAAahD,EAAM,OAC9CtC,KAAKyE,UAAU,IAEjBjD,OAAO6D,iBAAiB,YAAa/C,EAAM,M,CAGrC,QAAA8C,CAAShF,EAAmBmF,EAAcC,GAChDxF,KAAKsC,KAAKlC,EAAM+E,QAAUI,EAAOC,E,CAG3B,QAAAf,GACNgB,aAAazF,KAAK0B,YAAYC,SAC9B3B,KAAK0B,YAAYC,QAAU,KAE3B,GAAI3B,KAAK0B,YAAYE,QAAS,OAAO,MAErC5B,KAAK+D,oBAAsB/D,KAAKqD,mBAChCrD,KAAK0B,YAAYE,QAAU,KAE3B,OAAO,I,CAGT,iBAAA8D,GACE,MAAMC,EAAO3F,KAAKoC,UAElBuD,EAAKC,KAAI,CAAChB,EAASL,KACjB,GAAIvE,KAAKb,MAAOyF,EAAQV,aAAa,QAAS,QAE9C,GAAIlE,KAAKC,QAAS2E,EAAQV,aAAa,UAAW,QAElDU,EAAQV,aAAa,SAAUlE,KAAKV,QACpCsF,EAAQV,aACN,WACAK,IAAUvE,KAAKf,SAAW,OAAS,SAGrC2F,EAAQV,aAAa,YAAalE,KAAKR,UAAU,G,CAIrD,kBAAAqG,GACE,MAAMF,EAAO3F,KAAKoC,UAClBpC,KAAKmC,WAAawD,EAAKtD,OAEvBsD,EAAKC,KAAI,CAAChB,EAASL,KACjBK,EAAQV,aACN,WACAK,IAAUvE,KAAKf,SAAW,OAAS,QACpC,G,CAIL,mBAAA6G,GACE/E,GAA8B,KAC5B,MAAMuC,EAAgBtD,KAAKsD,gBAC3B,MAAMyC,EAAgB/F,KAAKoD,oBAE3B4C,OAAOC,OACLjG,KAAK6B,iBAAiBqE,MACtBlG,KAAKwD,cAAcuC,IAErBC,OAAOC,OACLjG,KAAKiC,kBAAkBiE,MACvBlG,KAAKwD,cAAcF,GACpB,G,CAIL,gBAAA6C,GACE,MAAMR,EAAO3F,KAAKoC,UAClBuD,EAAKS,SAASxB,IACZA,EAAQS,iBAAiB,aAAcjF,GACrCJ,KAAK2E,UAAUC,EAASxE,IACzB,G,CAKL,UAAAiG,CAAWjG,GACT,GAAIA,EAAMK,iBAAkB,CAC1B,M,CAGF,MAAM6F,EAASlG,EAAMkG,OACrB,MAAMX,EAAO3F,KAAKoC,UAElBuD,EAAKS,SAAQ,CAAChC,EAAKG,KACjB,IAAKH,EAAIlF,UAAYkF,IAAQkC,EAAQ,CACnCtG,KAAKwE,SAASD,E,KAKpB,MAAA5E,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CACEC,MAAM,QAAO,uBAEbI,QAAS,IAAMH,KAAKsC,KAAKtC,KAAKuG,aAAc,OAE5C3G,EAAA,WAAAE,IAAA,2CAAS0G,KAAM,wBAEjB5G,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACL,YAAa,KACb,kBAAmB,KACnB,cAAeC,KAAKoD,oBACpB,eAAgBpD,KAAKsD,gBACrB,cAAetD,KAAKsD,iBAAmBtD,KAAKoD,sBAG9CxD,EAAA,OAAAE,IAAA,2CAAKC,MAAM,iBACTH,EAAA,QAAAE,IAAA,+CAGJF,EAAA,OAAAE,IAAA,2CACEC,MAAM,cAAa,wBAEnBI,QAAS,IAAMH,KAAKsC,MAAMtC,KAAKuG,aAAc,OAE7C3G,EAAA,WAAAE,IAAA,2CAAS0G,KAAM,yB"}

package/dist/siemens-ix/p-113cc793.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as r,h as o,H as t}from"./p-f87cd962.js";import{a as s}from"./p-71206084.js";const a=":host{margin:0.5rem 0.5rem 0rem 0.5rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .message-container{display:flex;flex-direction:row;align-items:flex-start;flex-wrap:nowrap;justify-content:space-between;min-height:3.375rem;padding:calc(0.75rem - var(--theme-message-bar--border-thickness)) 0.75rem calc(0.75rem - var(--theme-message-bar--border-thickness)) 1rem;border-radius:var(--theme-message-bar--border-radius);background-color:var(--theme-messagebar--background)}:host .danger{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-alarm)}:host .warning{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-warning)}:host .info{border:solid var(--theme-message-bar--border-thickness) var(--theme-color-info)}:host .message-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1;align-self:center;min-height:1.25rem;padding:0 1rem;font-weight:normal;white-space:normal}:host ix-icon{margin-top:0.25rem}";const i=a;const c=class{constructor(o){e(this,o);this.closedChange=r(this,"closedChange",7);this.type="info";this.dismissible=true;this.icon=undefined;this.color=undefined}componentWillRender(){if(this.type==="danger"){this.icon="error";this.color="color-alarm"}if(this.type==="info"){this.icon="info";this.color="color-info"}if(this.type==="warning"){this.icon="warning";this.color="color-warning"}}closeAlert(e){s({targets:e,duration:c.duration,opacity:[1,0],easing:"easeOutSine",complete:()=>{e.classList.add("d-none")}});this.closedChange.emit()}render(){return o(t,{key:"89f424843ed559d787f88edd431f1321086cbbb2"},o("div",{key:"3f450ca115c040e749a0926d896dc2bb7ad3648d",class:{"message-container":true,[this.type]:true},role:"alert",ref:e=>this.divElement=e},o("ix-icon",{key:"73dcaa37d965d84b754cb14e58c3442665fcca07",color:this.color,name:this.icon}),o("div",{key:"b5d5178e53c550320803ffa2ac4da925db284fc7",class:"message-content"},o("slot",{key:"e9d97812edc2c45d0c16f57d29352f5357312720"})),this.dismissible?o("ix-icon-button",{icon:"close",size:"24",ghost:true,onClick:()=>{this.closeAlert(this.divElement)},"data-testid":"close-btn"}):""))}};c.duration=300;c.style=i;export{c as ix_message_bar};
+//# sourceMappingURL=p-113cc793.entry.js.map

package/dist/siemens-ix/{p-3b8e4fe5.entry.js.map → p-113cc793.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["messageBarCss","IxMessageBarStyle0","MessageBar","componentWillRender","this","type","icon","color","closeAlert","el","anime","targets","duration","opacity","easing","complete","classList","add","closedChange","emit","render","h","Host","key","class","role","ref","divElement","name","dismissible","size","ghost","onClick"],"sources":["src/components/message-bar/message-bar.scss?tag=ix-message-bar&encapsulation=shadow","src/components/message-bar/message-bar.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/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  margin: $small-space $small-space 0rem $small-space;\n\n  .message-container {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    flex-wrap: nowrap;\n    justify-content: space-between;\n    min-height: 3.375rem;\n    padding: calc(#{$medium-space} - var(--theme-message-bar--border-thickness))\n      $medium-space\n      calc(#{$medium-space} - var(--theme-message-bar--border-thickness))\n      $default-space;\n    border-radius: var(--theme-message-bar--border-radius);\n    background-color: var(--theme-messagebar--background);\n  }\n\n  .danger {\n    border: solid var(--theme-message-bar--border-thickness)\n      var(--theme-color-alarm);\n  }\n\n  .warning {\n    border: solid var(--theme-message-bar--border-thickness)\n      var(--theme-color-warning);\n  }\n\n  .info {\n    border: solid var(--theme-message-bar--border-thickness)\n      var(--theme-color-info);\n  }\n\n  .message-content {\n    @include ellipsis;\n    flex-grow: 1;\n    align-self: center;\n    min-height: 1.25rem;\n    padding: 0 $default-space;\n    font-weight: normal;\n    white-space: normal;\n  }\n\n  ix-icon {\n    margin-top: $tiny-space;\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';\nimport anime from 'animejs';\nimport { NotificationColor } from '../utils/notification-color';\n\n@Component({\n  tag: 'ix-message-bar',\n  styleUrl: 'message-bar.scss',\n  shadow: true,\n})\nexport class MessageBar {\n  /**\n   * Specifies the type of the alert.\n   */\n  @Prop() type: 'danger' | 'warning' | 'info' = 'info';\n\n  /**\n   * If true, close button is enabled and alert can be dismissed by the user\n   */\n  @Prop() dismissible = true;\n\n  /**\n   * An event emitted when the close button is clicked\n   */\n  @Event() closedChange: EventEmitter;\n\n  @State() icon: 'error' | 'warning' | 'info';\n\n  @State() color: NotificationColor;\n\n  private static readonly duration = 300;\n\n  private divElement?: HTMLElement;\n\n  componentWillRender() {\n    if (this.type === 'danger') {\n      this.icon = 'error';\n      this.color = 'color-alarm';\n    }\n\n    if (this.type === 'info') {\n      this.icon = 'info';\n      this.color = 'color-info';\n    }\n\n    if (this.type === 'warning') {\n      this.icon = 'warning';\n      this.color = 'color-warning';\n    }\n  }\n\n  private closeAlert(el: HTMLElement) {\n    anime({\n      targets: el,\n      duration: MessageBar.duration,\n      opacity: [1, 0],\n      easing: 'easeOutSine',\n      complete: () => {\n        el.classList.add('d-none');\n      },\n    });\n    this.closedChange.emit();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{ 'message-container': true, [this.type]: true }}\n          role=\"alert\"\n          ref={(el) => (this.divElement = el as HTMLElement)}\n        >\n          <ix-icon color={this.color} name={this.icon}></ix-icon>\n          <div class=\"message-content\">\n            <slot></slot>\n          </div>\n          {this.dismissible ? (\n            <ix-icon-button\n              icon={'close'}\n              size=\"24\"\n              ghost={true}\n              onClick={() => {\n                this.closeAlert(this.divElement);\n              }}\n              data-testid=\"close-btn\"\n            ></ix-icon-button>\n          ) : (\n            ''\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAgB,ogDACtB,MAAAC,EAAeD,E,MCyBFE,EAAU,M,8EAIyB,O,iBAKxB,K,yCAetB,mBAAAC,GACE,GAAIC,KAAKC,OAAS,SAAU,CAC1BD,KAAKE,KAAO,QACZF,KAAKG,MAAQ,a,CAGf,GAAIH,KAAKC,OAAS,OAAQ,CACxBD,KAAKE,KAAO,OACZF,KAAKG,MAAQ,Y,CAGf,GAAIH,KAAKC,OAAS,UAAW,CAC3BD,KAAKE,KAAO,UACZF,KAAKG,MAAQ,e,EAIT,UAAAC,CAAWC,GACjBC,EAAM,CACJC,QAASF,EACTG,SAAUV,EAAWU,SACrBC,QAAS,CAAC,EAAG,GACbC,OAAQ,cACRC,SAAU,KACRN,EAAGO,UAAUC,IAAI,SAAS,IAG9Bb,KAAKc,aAAaC,M,CAGpB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CACEC,MAAO,CAAE,oBAAqB,KAAM,CAACpB,KAAKC,MAAO,MACjDoB,KAAK,QACLC,IAAMjB,GAAQL,KAAKuB,WAAalB,GAEhCY,EAAA,WAAAE,IAAA,2CAAShB,MAAOH,KAAKG,MAAOqB,KAAMxB,KAAKE,OACvCe,EAAA,OAAAE,IAAA,2CAAKC,MAAM,mBACTH,EAAA,QAAAE,IAAA,8CAEDnB,KAAKyB,YACJR,EAAA,kBACEf,KAAM,QACNwB,KAAK,KACLC,MAAO,KACPC,QAAS,KACP5B,KAAKI,WAAWJ,KAAKuB,WAAW,EACjC,cACW,cACI,I,GAvDJzB,EAAAU,SAAW,I"}
+{"version":3,"names":["messageBarCss","IxMessageBarStyle0","MessageBar","componentWillRender","this","type","icon","color","closeAlert","el","anime","targets","duration","opacity","easing","complete","classList","add","closedChange","emit","render","h","Host","key","class","role","ref","divElement","name","dismissible","size","ghost","onClick"],"sources":["src/components/message-bar/message-bar.scss?tag=ix-message-bar&encapsulation=shadow","src/components/message-bar/message-bar.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/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  margin: $small-space $small-space 0rem $small-space;\n\n  .message-container {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    flex-wrap: nowrap;\n    justify-content: space-between;\n    min-height: 3.375rem;\n    padding: calc(#{$medium-space} - var(--theme-message-bar--border-thickness))\n      $medium-space\n      calc(#{$medium-space} - var(--theme-message-bar--border-thickness))\n      $default-space;\n    border-radius: var(--theme-message-bar--border-radius);\n    background-color: var(--theme-messagebar--background);\n  }\n\n  .danger {\n    border: solid var(--theme-message-bar--border-thickness)\n      var(--theme-color-alarm);\n  }\n\n  .warning {\n    border: solid var(--theme-message-bar--border-thickness)\n      var(--theme-color-warning);\n  }\n\n  .info {\n    border: solid var(--theme-message-bar--border-thickness)\n      var(--theme-color-info);\n  }\n\n  .message-content {\n    @include ellipsis;\n    flex-grow: 1;\n    align-self: center;\n    min-height: 1.25rem;\n    padding: 0 $default-space;\n    font-weight: normal;\n    white-space: normal;\n  }\n\n  ix-icon {\n    margin-top: $tiny-space;\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';\nimport anime from 'animejs';\nimport { NotificationColor } from '../utils/notification-color';\n\n@Component({\n  tag: 'ix-message-bar',\n  styleUrl: 'message-bar.scss',\n  shadow: true,\n})\nexport class MessageBar {\n  /**\n   * Specifies the type of the alert.\n   */\n  @Prop() type: 'danger' | 'warning' | 'info' = 'info';\n\n  /**\n   * If true, close button is enabled and alert can be dismissed by the user\n   */\n  @Prop() dismissible = true;\n\n  /**\n   * An event emitted when the close button is clicked\n   */\n  @Event() closedChange: EventEmitter;\n\n  @State() icon: 'error' | 'warning' | 'info';\n\n  @State() color: NotificationColor;\n\n  private static readonly duration = 300;\n\n  private divElement?: HTMLElement;\n\n  componentWillRender() {\n    if (this.type === 'danger') {\n      this.icon = 'error';\n      this.color = 'color-alarm';\n    }\n\n    if (this.type === 'info') {\n      this.icon = 'info';\n      this.color = 'color-info';\n    }\n\n    if (this.type === 'warning') {\n      this.icon = 'warning';\n      this.color = 'color-warning';\n    }\n  }\n\n  private closeAlert(el: HTMLElement) {\n    anime({\n      targets: el,\n      duration: MessageBar.duration,\n      opacity: [1, 0],\n      easing: 'easeOutSine',\n      complete: () => {\n        el.classList.add('d-none');\n      },\n    });\n    this.closedChange.emit();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{ 'message-container': true, [this.type]: true }}\n          role=\"alert\"\n          ref={(el) => (this.divElement = el as HTMLElement)}\n        >\n          <ix-icon color={this.color} name={this.icon}></ix-icon>\n          <div class=\"message-content\">\n            <slot></slot>\n          </div>\n          {this.dismissible ? (\n            <ix-icon-button\n              icon={'close'}\n              size=\"24\"\n              ghost={true}\n              onClick={() => {\n                this.closeAlert(this.divElement);\n              }}\n              data-testid=\"close-btn\"\n            ></ix-icon-button>\n          ) : (\n            ''\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAgB,gqDACtB,MAAAC,EAAeD,E,MCyBFE,EAAU,M,8EAIyB,O,iBAKxB,K,yCAetB,mBAAAC,GACE,GAAIC,KAAKC,OAAS,SAAU,CAC1BD,KAAKE,KAAO,QACZF,KAAKG,MAAQ,a,CAGf,GAAIH,KAAKC,OAAS,OAAQ,CACxBD,KAAKE,KAAO,OACZF,KAAKG,MAAQ,Y,CAGf,GAAIH,KAAKC,OAAS,UAAW,CAC3BD,KAAKE,KAAO,UACZF,KAAKG,MAAQ,e,EAIT,UAAAC,CAAWC,GACjBC,EAAM,CACJC,QAASF,EACTG,SAAUV,EAAWU,SACrBC,QAAS,CAAC,EAAG,GACbC,OAAQ,cACRC,SAAU,KACRN,EAAGO,UAAUC,IAAI,SAAS,IAG9Bb,KAAKc,aAAaC,M,CAGpB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CACEC,MAAO,CAAE,oBAAqB,KAAM,CAACpB,KAAKC,MAAO,MACjDoB,KAAK,QACLC,IAAMjB,GAAQL,KAAKuB,WAAalB,GAEhCY,EAAA,WAAAE,IAAA,2CAAShB,MAAOH,KAAKG,MAAOqB,KAAMxB,KAAKE,OACvCe,EAAA,OAAAE,IAAA,2CAAKC,MAAM,mBACTH,EAAA,QAAAE,IAAA,8CAEDnB,KAAKyB,YACJR,EAAA,kBACEf,KAAM,QACNwB,KAAK,KACLC,MAAO,KACPC,QAAS,KACP5B,KAAKI,WAAWJ,KAAKuB,WAAW,EACjC,cACW,cACI,I,GAvDJzB,EAAAU,SAAW,I"}

package/dist/siemens-ix/p-14a41c8c.entry.js

@@ -0,0 +1,2 @@
+import{r,h as t,H as o,g as s}from"./p-f87cd962.js";import{a as e}from"./p-71206084.js";import{A as a}from"./p-46a6cd9d.js";const i=":host{display:block;position:relative;width:22rem;height:100%;padding:0}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host(.visible){border-right:2px solid var(--theme-color-soft-bdr);padding:1.5rem 0.5rem 0}";const l=i;const b=class{constructor(t){r(this,t);this.visible=true}listenToggleEvent(){const r=!this.visible;const t={targets:this.hostElement,width:r?["0","22rem"]:["22rem","0"],opacity:r?[0,1]:[1,0],easing:"easeInSine",duration:a.defaultTime};const o=()=>{this.visible=r};if(r){t.begin=o.bind(this)}else{t.complete=o.bind(this)}e(t)}render(){return t(o,{key:"fe0f54c79115877bac6d0032320550ad2e3fe089",slot:"application-sidebar",class:{visible:this.visible}},this.visible?t("slot",null):null)}get hostElement(){return s(this)}};b.style=l;export{b as ix_application_sidebar};
+//# sourceMappingURL=p-14a41c8c.entry.js.map

package/dist/siemens-ix/{p-c1bd5d78.entry.js.map → p-14a41c8c.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["applicationSidebarCss","IxApplicationSidebarStyle0","ApplicationSidebar","listenToggleEvent","visibility","this","visible","animation","targets","hostElement","width","opacity","easing","duration","Animation","defaultTime","changeVisibility","begin","bind","complete","anime","render","h","Host","key","slot","class"],"sources":["src/components/application-sidebar/application-sidebar.scss?tag=ix-application-sidebar&encapsulation=shadow","src/components/application-sidebar/application-sidebar.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: block;\n  position: relative;\n\n  width: 22rem;\n  height: 100%;\n\n  padding: 0;\n}\n\n:host(.visible) {\n  border-right: 2px solid var(--theme-color-soft-bdr);\n  padding: 1.5rem 0.5rem 0;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Listen, State } from '@stencil/core';\nimport anime from 'animejs';\nimport Animation from '../utils/animation';\n\n/** @internal */\n@Component({\n  tag: 'ix-application-sidebar',\n  styleUrl: 'application-sidebar.scss',\n  shadow: true,\n})\nexport class ApplicationSidebar {\n  @Element() hostElement!: HTMLIxApplicationSidebarElement;\n\n  @State() visible = true;\n\n  @Listen('application-sidebar-toggle', {\n    target: 'window',\n  })\n  listenToggleEvent() {\n    const visibility = !this.visible;\n    const animation: anime.AnimeParams = {\n      targets: this.hostElement,\n      width: visibility ? ['0', '22rem'] : ['22rem', '0'],\n      opacity: visibility ? [0, 1] : [1, 0],\n      easing: 'easeInSine',\n      duration: Animation.defaultTime,\n    };\n\n    const changeVisibility = () => {\n      this.visible = visibility;\n    };\n\n    if (visibility) {\n      animation.begin = changeVisibility.bind(this);\n    } else {\n      animation.complete = changeVisibility.bind(this);\n    }\n\n    anime(animation);\n  }\n\n  render() {\n    return (\n      <Host\n        slot=\"application-sidebar\"\n        class={{\n          visible: this.visible,\n        }}\n      >\n        {this.visible ? <slot></slot> : null}\n      </Host>\n    );\n  }\n}\n"],"mappings":"4HAAA,MAAMA,EAAwB,kwBAC9B,MAAAC,EAAeD,E,MCkBFE,EAAkB,M,sCAGV,I,CAKnB,iBAAAC,GACE,MAAMC,GAAcC,KAAKC,QACzB,MAAMC,EAA+B,CACnCC,QAASH,KAAKI,YACdC,MAAON,EAAa,CAAC,IAAK,SAAW,CAAC,QAAS,KAC/CO,QAASP,EAAa,CAAC,EAAG,GAAK,CAAC,EAAG,GACnCQ,OAAQ,aACRC,SAAUC,EAAUC,aAGtB,MAAMC,EAAmB,KACvBX,KAAKC,QAAUF,CAAU,EAG3B,GAAIA,EAAY,CACdG,EAAUU,MAAQD,EAAiBE,KAAKb,K,KACnC,CACLE,EAAUY,SAAWH,EAAiBE,KAAKb,K,CAG7Ce,EAAMb,E,CAGR,MAAAc,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,sBACLC,MAAO,CACLpB,QAASD,KAAKC,UAGfD,KAAKC,QAAUgB,EAAA,aAAgB,K"}
+{"version":3,"names":["applicationSidebarCss","IxApplicationSidebarStyle0","ApplicationSidebar","listenToggleEvent","visibility","this","visible","animation","targets","hostElement","width","opacity","easing","duration","Animation","defaultTime","changeVisibility","begin","bind","complete","anime","render","h","Host","key","slot","class"],"sources":["src/components/application-sidebar/application-sidebar.scss?tag=ix-application-sidebar&encapsulation=shadow","src/components/application-sidebar/application-sidebar.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: block;\n  position: relative;\n\n  width: 22rem;\n  height: 100%;\n\n  padding: 0;\n}\n\n:host(.visible) {\n  border-right: 2px solid var(--theme-color-soft-bdr);\n  padding: 1.5rem 0.5rem 0;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Listen, State } from '@stencil/core';\nimport anime from 'animejs';\nimport Animation from '../utils/animation';\n\n/** @internal */\n@Component({\n  tag: 'ix-application-sidebar',\n  styleUrl: 'application-sidebar.scss',\n  shadow: true,\n})\nexport class ApplicationSidebar {\n  @Element() hostElement!: HTMLIxApplicationSidebarElement;\n\n  @State() visible = true;\n\n  @Listen('application-sidebar-toggle', {\n    target: 'window',\n  })\n  listenToggleEvent() {\n    const visibility = !this.visible;\n    const animation: anime.AnimeParams = {\n      targets: this.hostElement,\n      width: visibility ? ['0', '22rem'] : ['22rem', '0'],\n      opacity: visibility ? [0, 1] : [1, 0],\n      easing: 'easeInSine',\n      duration: Animation.defaultTime,\n    };\n\n    const changeVisibility = () => {\n      this.visible = visibility;\n    };\n\n    if (visibility) {\n      animation.begin = changeVisibility.bind(this);\n    } else {\n      animation.complete = changeVisibility.bind(this);\n    }\n\n    anime(animation);\n  }\n\n  render() {\n    return (\n      <Host\n        slot=\"application-sidebar\"\n        class={{\n          visible: this.visible,\n        }}\n      >\n        {this.visible ? <slot></slot> : null}\n      </Host>\n    );\n  }\n}\n"],"mappings":"4HAAA,MAAMA,EAAwB,85BAC9B,MAAAC,EAAeD,E,MCkBFE,EAAkB,M,sCAGV,I,CAKnB,iBAAAC,GACE,MAAMC,GAAcC,KAAKC,QACzB,MAAMC,EAA+B,CACnCC,QAASH,KAAKI,YACdC,MAAON,EAAa,CAAC,IAAK,SAAW,CAAC,QAAS,KAC/CO,QAASP,EAAa,CAAC,EAAG,GAAK,CAAC,EAAG,GACnCQ,OAAQ,aACRC,SAAUC,EAAUC,aAGtB,MAAMC,EAAmB,KACvBX,KAAKC,QAAUF,CAAU,EAG3B,GAAIA,EAAY,CACdG,EAAUU,MAAQD,EAAiBE,KAAKb,K,KACnC,CACLE,EAAUY,SAAWH,EAAiBE,KAAKb,K,CAG7Ce,EAAMb,E,CAGR,MAAAc,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,sBACLC,MAAO,CACLpB,QAASD,KAAKC,UAGfD,KAAKC,QAAUgB,EAAA,aAAgB,K"}

package/dist/siemens-ix/p-15b3c17e.entry.js

@@ -0,0 +1,2 @@
+import{r,h as o,H as t,c as e,g as a}from"./p-f87cd962.js";import{a as s}from"./p-712e0ee0.js";const c=":host{display:block;position:relative;overflow:auto;padding:0.25rem 0.75rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}";const l=c;const b=class{constructor(o){r(this,o)}render(){return o(t,{key:"709b6b9fda6d3560e4a8b2703f8c72f271490a4c"},o("slot",{key:"900625af9e6dbb6b0254fb13fc6acc8cb4e98fc4"}))}};b.style=l;const i=":host{display:flex;padding:0.5rem;align-items:center;align-self:stretch}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .modal-close{margin-left:auto;margin-right:-1rem}:host .modal-icon{margin-right:1rem}";const h=i;const n=class{constructor(o){r(this,o);this.closeClick=e(this,"closeClick",7);this.hideClose=false;this.icon=undefined;this.iconColor=undefined}onIconChange(r){if(this.parentDialog){if(r){this.parentDialog.classList.add("with-icon")}else{this.parentDialog.classList.remove("with-icon")}}}componentDidLoad(){this.parentDialog=s(this.hostElement,"ix-modal");this.onIconChange(this.icon)}onCloseClick(r){const o=this.closeClick.emit(r);if(o.defaultPrevented||r.defaultPrevented){return}this.parentDialog.dismissModal()}render(){return o(t,{key:"e0edc0b5eca59209ecbe32b5777383244e6e1153"},this.icon?o("ix-icon",{class:"modal-icon",name:this.icon,color:this.iconColor}):null,o("ix-typography",{key:"4981a025990dfc2776afed400aba5cf9114bc44d",variant:"default-title"},o("slot",{key:"d9915d27dbccf15f71b97b6c7e34e294c07e31e7"})),!this.hideClose?o("ix-icon-button",{onClick:r=>this.onCloseClick(r),ghost:true,icon:"close",class:"modal-close"}):null)}get hostElement(){return a(this)}static get watchers(){return{icon:["onIconChange"]}}};n.style=h;export{b as ix_modal_content,n as ix_modal_header};
+//# sourceMappingURL=p-15b3c17e.entry.js.map

package/dist/siemens-ix/{p-e678bfc5.entry.js.map → p-15b3c17e.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["modalContentCss","IxModalContentStyle0","ModalContent","render","h","Host","key","modalHeaderCss","IxModalHeaderStyle0","ModalHeader","onIconChange","icon","this","parentDialog","classList","add","remove","componentDidLoad","closestPassShadow","hostElement","onCloseClick","event","ce","closeClick","emit","defaultPrevented","dismissModal","class","name","color","iconColor","variant","hideClose","onClick","ghost"],"sources":["src/components/modal-content/modal-content.scss?tag=ix-modal-content&encapsulation=shadow","src/components/modal-content/modal-content.tsx","src/components/modal-header/modal-header.scss?tag=ix-modal-header&encapsulation=shadow","src/components/modal-header/modal-header.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: block;\n  position: relative;\n  overflow: auto;\n  padding: 0.25rem 0.75rem;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-modal-content',\n  styleUrl: 'modal-content.scss',\n  shadow: true,\n})\nexport class ModalContent {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\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@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: flex;\n  padding: 0.5rem;\n  align-items: center;\n  align-self: stretch;\n\n  .modal-close {\n    margin-left: auto;\n    margin-right: -1rem;\n  }\n\n  .modal-icon {\n    margin-right: 1rem;\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  Watch,\n} from '@stencil/core';\nimport { closestPassShadow } from '../utils/shadow-dom';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-modal-header',\n  styleUrl: 'modal-header.scss',\n  shadow: true,\n})\nexport class ModalHeader {\n  @Element() hostElement!: HTMLIxModalHeaderElement;\n\n  /**\n   * Hide the close button\n   */\n  @Prop() hideClose = false;\n\n  /**\n   * Icon of the Header\n   */\n  @Prop() icon: string;\n\n  @Watch('icon')\n  onIconChange(icon: string) {\n    if (this.parentDialog) {\n      if (icon) {\n        this.parentDialog.classList.add('with-icon');\n      } else {\n        this.parentDialog.classList.remove('with-icon');\n      }\n    }\n  }\n\n  /**\n   * Icon color\n   */\n  @Prop() iconColor: string;\n\n  /**\n   * Emits when close icon is clicked and closes the modal\n   * Can be prevented, in which case only the event is triggered, and the modal remains open\n   */\n  @Event() closeClick: EventEmitter<MouseEvent>;\n\n  private parentDialog: HTMLIxModalElement;\n\n  componentDidLoad() {\n    this.parentDialog = closestPassShadow(\n      this.hostElement,\n      'ix-modal'\n    ) as HTMLIxModalElement;\n    this.onIconChange(this.icon);\n  }\n\n  private onCloseClick(event: MouseEvent) {\n    const ce = this.closeClick.emit(event);\n    if (ce.defaultPrevented || event.defaultPrevented) {\n      return;\n    }\n\n    this.parentDialog.dismissModal();\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.icon ? (\n          <ix-icon\n            class={'modal-icon'}\n            name={this.icon}\n            color={this.iconColor}\n          ></ix-icon>\n        ) : null}\n        <ix-typography variant={'default-title'}>\n          <slot></slot>\n        </ix-typography>\n        {!this.hideClose ? (\n          <ix-icon-button\n            onClick={(event) => this.onCloseClick(event)}\n            ghost\n            icon=\"close\"\n            class={'modal-close'}\n          ></ix-icon-button>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"],"mappings":"0FAAA,MAAMA,EAAkB,2qBACxB,MAAAC,EAAeD,E,MCkBFE,EAAY,M,yBACvB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,QAAAE,IAAA,6C,aCvBR,MAAMC,EAAiB,kwBACvB,MAAAC,EAAeD,E,MC4BFE,EAAW,M,+EAMF,M,6CAQpB,YAAAC,CAAaC,GACX,GAAIC,KAAKC,aAAc,CACrB,GAAIF,EAAM,CACRC,KAAKC,aAAaC,UAAUC,IAAI,Y,KAC3B,CACLH,KAAKC,aAAaC,UAAUE,OAAO,Y,GAkBzC,gBAAAC,GACEL,KAAKC,aAAeK,EAClBN,KAAKO,YACL,YAEFP,KAAKF,aAAaE,KAAKD,K,CAGjB,YAAAS,CAAaC,GACnB,MAAMC,EAAKV,KAAKW,WAAWC,KAAKH,GAChC,GAAIC,EAAGG,kBAAoBJ,EAAMI,iBAAkB,CACjD,M,CAGFb,KAAKC,aAAaa,c,CAGpB,MAAAvB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACFM,KAAKD,KACJP,EAAA,WACEuB,MAAO,aACPC,KAAMhB,KAAKD,KACXkB,MAAOjB,KAAKkB,YAEZ,KACJ1B,EAAA,iBAAAE,IAAA,2CAAeyB,QAAS,iBACtB3B,EAAA,QAAAE,IAAA,+CAEAM,KAAKoB,UACL5B,EAAA,kBACE6B,QAAUZ,GAAUT,KAAKQ,aAAaC,GACtCa,MAAK,KACLvB,KAAK,QACLgB,MAAO,gBAEP,K"}
+{"version":3,"names":["modalContentCss","IxModalContentStyle0","ModalContent","render","h","Host","key","modalHeaderCss","IxModalHeaderStyle0","ModalHeader","onIconChange","icon","this","parentDialog","classList","add","remove","componentDidLoad","closestPassShadow","hostElement","onCloseClick","event","ce","closeClick","emit","defaultPrevented","dismissModal","class","name","color","iconColor","variant","hideClose","onClick","ghost"],"sources":["src/components/modal-content/modal-content.scss?tag=ix-modal-content&encapsulation=shadow","src/components/modal-content/modal-content.tsx","src/components/modal-header/modal-header.scss?tag=ix-modal-header&encapsulation=shadow","src/components/modal-header/modal-header.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: block;\n  position: relative;\n  overflow: auto;\n  padding: 0.25rem 0.75rem;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-modal-content',\n  styleUrl: 'modal-content.scss',\n  shadow: true,\n})\nexport class ModalContent {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\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@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: flex;\n  padding: 0.5rem;\n  align-items: center;\n  align-self: stretch;\n\n  .modal-close {\n    margin-left: auto;\n    margin-right: -1rem;\n  }\n\n  .modal-icon {\n    margin-right: 1rem;\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  Watch,\n} from '@stencil/core';\nimport { closestPassShadow } from '../utils/shadow-dom';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-modal-header',\n  styleUrl: 'modal-header.scss',\n  shadow: true,\n})\nexport class ModalHeader {\n  @Element() hostElement!: HTMLIxModalHeaderElement;\n\n  /**\n   * Hide the close button\n   */\n  @Prop() hideClose = false;\n\n  /**\n   * Icon of the Header\n   */\n  @Prop() icon: string;\n\n  @Watch('icon')\n  onIconChange(icon: string) {\n    if (this.parentDialog) {\n      if (icon) {\n        this.parentDialog.classList.add('with-icon');\n      } else {\n        this.parentDialog.classList.remove('with-icon');\n      }\n    }\n  }\n\n  /**\n   * Icon color\n   */\n  @Prop() iconColor: string;\n\n  /**\n   * Emits when close icon is clicked and closes the modal\n   * Can be prevented, in which case only the event is triggered, and the modal remains open\n   */\n  @Event() closeClick: EventEmitter<MouseEvent>;\n\n  private parentDialog: HTMLIxModalElement;\n\n  componentDidLoad() {\n    this.parentDialog = closestPassShadow(\n      this.hostElement,\n      'ix-modal'\n    ) as HTMLIxModalElement;\n    this.onIconChange(this.icon);\n  }\n\n  private onCloseClick(event: MouseEvent) {\n    const ce = this.closeClick.emit(event);\n    if (ce.defaultPrevented || event.defaultPrevented) {\n      return;\n    }\n\n    this.parentDialog.dismissModal();\n  }\n\n  render() {\n    return (\n      <Host>\n        {this.icon ? (\n          <ix-icon\n            class={'modal-icon'}\n            name={this.icon}\n            color={this.iconColor}\n          ></ix-icon>\n        ) : null}\n        <ix-typography variant={'default-title'}>\n          <slot></slot>\n        </ix-typography>\n        {!this.hideClose ? (\n          <ix-icon-button\n            onClick={(event) => this.onCloseClick(event)}\n            ghost\n            icon=\"close\"\n            class={'modal-close'}\n          ></ix-icon-button>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"],"mappings":"+FAAA,MAAMA,EAAkB,u0BACxB,MAAAC,EAAeD,E,MCkBFE,EAAY,M,yBACvB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,QAAAE,IAAA,6C,aCvBR,MAAMC,EAAiB,85BACvB,MAAAC,EAAeD,E,MC4BFE,EAAW,M,+EAMF,M,6CAQpB,YAAAC,CAAaC,GACX,GAAIC,KAAKC,aAAc,CACrB,GAAIF,EAAM,CACRC,KAAKC,aAAaC,UAAUC,IAAI,Y,KAC3B,CACLH,KAAKC,aAAaC,UAAUE,OAAO,Y,GAkBzC,gBAAAC,GACEL,KAAKC,aAAeK,EAClBN,KAAKO,YACL,YAEFP,KAAKF,aAAaE,KAAKD,K,CAGjB,YAAAS,CAAaC,GACnB,MAAMC,EAAKV,KAAKW,WAAWC,KAAKH,GAChC,GAAIC,EAAGG,kBAAoBJ,EAAMI,iBAAkB,CACjD,M,CAGFb,KAAKC,aAAaa,c,CAGpB,MAAAvB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACFM,KAAKD,KACJP,EAAA,WACEuB,MAAO,aACPC,KAAMhB,KAAKD,KACXkB,MAAOjB,KAAKkB,YAEZ,KACJ1B,EAAA,iBAAAE,IAAA,2CAAeyB,QAAS,iBACtB3B,EAAA,QAAAE,IAAA,+CAEAM,KAAKoB,UACL5B,EAAA,kBACE6B,QAAUZ,GAAUT,KAAKQ,aAAaC,GACtCa,MAAK,KACLvB,KAAK,QACLgB,MAAO,gBAEP,K"}

package/dist/siemens-ix/p-16b923e9.entry.js

@@ -0,0 +1,2 @@
+import{r as e,h as t,H as s}from"./p-f87cd962.js";const o=":host(.keyValueList) ::slotted(ix-key-value){border-bottom:1px solid var(--theme-color-weak-bdr)}:host(.keyValueList.keyValueList--striped) ::slotted(ix-key-value:nth-child(odd)){background:var(--theme-color-ghost-alt)}";const a=o;const r=class{constructor(t){e(this,t);this.striped=undefined}render(){return t(s,{key:"f33fc856c54a05f54dff4184c275c8cac7f18426",class:{keyValueList:true,"keyValueList--striped":this.striped}},t("slot",{key:"75c282f8c79a273477382e250157aef6865e6d8d"}))}};r.style=a;export{r as ix_key_value_list};
+//# sourceMappingURL=p-16b923e9.entry.js.map

package/dist/siemens-ix/p-1a122c76.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-f87cd962.js";import{a as d}from"./p-71206084.js";import{B as a}from"./p-1d581190.js";import{b as s}from"./p-4f8ac3bf.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}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host 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 .icon{pointer-events:none}:host(.disabled){cursor:default}:host .btn-danger{border-radius:var(--theme-btn--border-radius)}:host .btn-danger,:host .btn-danger.focus,:host .btn-danger:focus-visible{background-color:var(--theme-btn-danger--background);color:var(--theme-btn-danger--color);--ix-button-color:var(--theme-btn-danger--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-danger--border-color);border-style:solid}:host .btn-danger:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-danger.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger.selected:not(.disabled):not(:disabled):active,:host .btn-danger.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-danger--border-color--hover);background-color:var(--theme-btn-danger--background--hover);color:var(--theme-btn-danger--color--hover)}:host .btn-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger:not(.disabled):not(:disabled):active,:host .btn-danger:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-danger--border-color--active);background-color:var(--theme-btn-danger--background--active);color:var(--theme-btn-danger--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-danger.disabled,:host(.disabled) .btn-danger:disabled{pointer-events:none;border-color:var(--theme-btn-danger--border-color--disabled);background-color:var(--theme-btn-danger--background--disabled);color:var(--theme-btn-danger--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-danger--color--disabled)}:host .btn-outline-danger{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-danger,:host .btn-outline-danger.focus,:host .btn-outline-danger:focus-visible{background-color:var(--theme-btn-outline-danger--background);color:var(--theme-btn-outline-danger--color);--ix-button-color:var(--theme-btn-outline-danger--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-danger--border-color);border-style:solid}:host .btn-outline-danger: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-danger.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger.selected:not(.disabled):not(:disabled):active,:host .btn-outline-danger.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-danger--border-color--hover);background-color:var(--theme-btn-outline-danger--background--hover);color:var(--theme-btn-outline-danger--color--hover)}:host .btn-outline-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger:not(.disabled):not(:disabled):active,:host .btn-outline-danger:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-danger--border-color--active);background-color:var(--theme-btn-outline-danger--background--active);color:var(--theme-btn-outline-danger--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-danger.disabled,:host(.disabled) .btn-outline-danger:disabled{pointer-events:none;border-color:var(--theme-btn-outline-danger--border-color--disabled);background-color:var(--theme-btn-outline-danger--background--disabled);color:var(--theme-btn-outline-danger--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-danger--color--disabled)}:host .btn-invisible-danger{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-danger,:host .btn-invisible-danger.focus,:host .btn-invisible-danger:focus-visible{background-color:var(--theme-btn-invisible-danger--background);color:var(--theme-btn-invisible-danger--color);--ix-button-color:var(--theme-btn-invisible-danger--color);border-color:transparent}:host .btn-invisible-danger: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-danger.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-danger.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-danger--background--hover);color:var(--theme-btn-invisible-danger--color--hover)}:host .btn-invisible-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger:not(.disabled):not(:disabled):active,:host .btn-invisible-danger:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-danger--background--active);color:var(--theme-btn-invisible-danger--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-danger.disabled,:host(.disabled) .btn-invisible-danger:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-danger--background--disabled);color:var(--theme-btn-invisible-danger--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-danger--color--disabled)}: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){pointer-events:none}: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){pointer-events:none}: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){pointer-events:none}: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){pointer-events:none}: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){pointer-events:none}: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){pointer-events:none}: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}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host 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 .icon{pointer-events:none}: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){pointer-events:none}: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){pointer-events:none}: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){pointer-events:none}: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){pointer-events:none}: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){pointer-events:none}: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){pointer-events:none}: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}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host 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=l;const c=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;this.a11y=undefined}componentDidLoad(){this.animationFadeIn()}componentWillLoad(){this.a11y=s(this.hostElement,["aria-describedby","aria-controls","aria-expanded"])}animationFadeIn(){d({targets:this.hostElement,duration:150,opacity:[0,1],translateX:["-100%","0%"],easing:"linear"})}render(){const o={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:this.a11y};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(a,Object.assign({},o,{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)}};c.style=b;export{c as ix_breadcrumb_item};
+//# sourceMappingURL=p-1a122c76.entry.js.map

package/dist/siemens-ix/{p-bdc57334.entry.js.map → p-1a122c76.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["breadcrumbItemCss","IxBreadcrumbItemStyle0","BreadcrumbItem","componentDidLoad","this","animationFadeIn","componentWillLoad","a11y","a11yHostAttributes","hostElement","animejs","targets","duration","opacity","translateX","easing","render","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  State,\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  @State() a11y: any;\n\n  componentDidLoad() {\n    this.animationFadeIn();\n  }\n\n  componentWillLoad() {\n    this.a11y = a11yHostAttributes(this.hostElement, [\n      'aria-describedby',\n      'aria-controls',\n      'aria-expanded',\n    ]);\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 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: this.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":"mLAAA,MAAMA,EAAoB,o7rCAC1B,MAAAC,EAAeD,E,MCmCFE,EAAc,M,kHAcA,K,aAGP,K,iBAGI,K,uBAGM,M,oBAO5B,gBAAAC,GACEC,KAAKC,iB,CAGP,iBAAAC,GACEF,KAAKG,KAAOC,EAAmBJ,KAAKK,YAAa,CAC/C,mBACA,gBACA,iB,CAIJ,eAAAJ,GACEK,EAAQ,CACNC,QAASP,KAAKK,YACdG,SAAU,IACVC,QAAS,CAAC,EAAG,GACbC,WAAY,CAAC,QAAS,MACtBC,OAAQ,U,CAIZ,MAAAC,GACE,MAAMC,EAAyB,CAC7BC,QAASd,KAAKe,MAAQ,UAAY,YAClCC,QAAS,MACTD,MAAOf,KAAKe,MACZE,SAAU,MACVC,SAAU,MACVC,SAAU,MACVC,KAAMpB,KAAKoB,KACXC,SAAU,KACVC,QAAS,MACTC,SAAU,MACVC,KAAM,SACNC,SACEzB,KAAKK,YAAYoB,YAAc,EAAIzB,KAAKK,YAAYoB,SAAW,EACjEC,aAAc,CACZ,mBAAoB1B,KAAK2B,mBAE3BC,eAAgB5B,KAAKG,MAGvB,IAAKH,KAAK6B,QAAS,CACjB,OAAOC,EAACC,EAAI,CAACC,MAAO,a,CAGtB,OACEF,EAACC,EAAI,CACHC,MAAO,CACL,gBAAiBhC,KAAKiC,aAExBC,QAAS,IAAMlC,KAAKmC,UAAUC,KAAKpC,KAAKqC,QAExCP,EAAA,UACEA,EAACQ,EAAUC,OAAAC,OAAA,GACL3B,EAAK,CACT4B,aACEX,EAACY,EAAQ,KACN1C,KAAKiC,YACJH,EAAA,WACEa,KAAM,sBACNC,KAAK,KACLZ,MAAO,YAEP,QAIPhC,KAAKqC,MACNP,EAAA,e"}
+{"version":3,"names":["breadcrumbItemCss","IxBreadcrumbItemStyle0","BreadcrumbItem","componentDidLoad","this","animationFadeIn","componentWillLoad","a11y","a11yHostAttributes","hostElement","animejs","targets","duration","opacity","translateX","easing","render","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  State,\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  @State() a11y: any;\n\n  componentDidLoad() {\n    this.animationFadeIn();\n  }\n\n  componentWillLoad() {\n    this.a11y = a11yHostAttributes(this.hostElement, [\n      'aria-describedby',\n      'aria-controls',\n      'aria-expanded',\n    ]);\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 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: this.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":"mLAAA,MAAMA,EAAoB,w4sCAC1B,MAAAC,EAAeD,E,MCmCFE,EAAc,M,kHAcA,K,aAGP,K,iBAGI,K,uBAGM,M,oBAO5B,gBAAAC,GACEC,KAAKC,iB,CAGP,iBAAAC,GACEF,KAAKG,KAAOC,EAAmBJ,KAAKK,YAAa,CAC/C,mBACA,gBACA,iB,CAIJ,eAAAJ,GACEK,EAAQ,CACNC,QAASP,KAAKK,YACdG,SAAU,IACVC,QAAS,CAAC,EAAG,GACbC,WAAY,CAAC,QAAS,MACtBC,OAAQ,U,CAIZ,MAAAC,GACE,MAAMC,EAAyB,CAC7BC,QAASd,KAAKe,MAAQ,UAAY,YAClCC,QAAS,MACTD,MAAOf,KAAKe,MACZE,SAAU,MACVC,SAAU,MACVC,SAAU,MACVC,KAAMpB,KAAKoB,KACXC,SAAU,KACVC,QAAS,MACTC,SAAU,MACVC,KAAM,SACNC,SACEzB,KAAKK,YAAYoB,YAAc,EAAIzB,KAAKK,YAAYoB,SAAW,EACjEC,aAAc,CACZ,mBAAoB1B,KAAK2B,mBAE3BC,eAAgB5B,KAAKG,MAGvB,IAAKH,KAAK6B,QAAS,CACjB,OAAOC,EAACC,EAAI,CAACC,MAAO,a,CAGtB,OACEF,EAACC,EAAI,CACHC,MAAO,CACL,gBAAiBhC,KAAKiC,aAExBC,QAAS,IAAMlC,KAAKmC,UAAUC,KAAKpC,KAAKqC,QAExCP,EAAA,UACEA,EAACQ,EAAUC,OAAAC,OAAA,GACL3B,EAAK,CACT4B,aACEX,EAACY,EAAQ,KACN1C,KAAKiC,YACJH,EAAA,WACEa,KAAM,sBACNC,KAAK,KACLZ,MAAO,YAEP,QAIPhC,KAAKqC,MACNP,EAAA,e"}

package/dist/siemens-ix/p-1cff59db.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as o,H as a,g as r}from"./p-f87cd962.js";const n=':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}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .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)}';const i=n;let s=0;const d=(t="expand-content")=>[t,s++].join("-");const c=class{constructor(o){t(this,o);this.accordionExpand=e(this,"accordionExpand",7);this.collapse=false;this.expandContent=false}onInitialExpandChange(){this.expandContent=!this.collapse}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)}componentWillLoad(){this.onInitialExpandChange()}render(){return o(a,{key:"bc39054c9b50f4a1de3ebb720553d667f30e7420",slot:"card-accordion"},o("button",{key:"39a8f4b977ca5d4f797a12f4d06a09e7a2909e80",tabIndex:0,class:{"expand-action":true,show:this.expandContent},onClick:t=>this.onExpandActionClick(t),role:"button",type:"button","aria-expanded":this.expandContent,"aria-controls":d()},o("ix-icon",{key:"2d75d5fc08d4d79e1d70fef36440dba4ee5b62c9",name:"chevron-right-small",class:{"expand-icon":true,show:this.expandContent}})),o("div",{key:"d2b662f006a69d90e2353922e377a1e83830de70",class:{"expand-content":true,show:this.expandContent}},o("div",{key:"7cedf82588afb804a626b1ba1c1cb9147c76306a",class:"expand-content-inner"},o("div",{key:"04b85a19f6354fd725b634748e7ff7a5c58dd7cb",class:"expand-content-body"},o("slot",{key:"732c33dbaa591432e14f74eb305b7e7c526d4e49"})),o("div",{key:"83291f55a13f8a8bebddb4d24c81cfc1a090f1f4",class:"expand-content-footer"}))))}get hostElement(){return r(this)}static get watchers(){return{collapse:["onInitialExpandChange"]}}};c.style=i;const l=":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 h=l;const b=class{constructor(e){t(this,e)}render(){return o(a,{key:"c5c2ca3a18e299a6093ad6abbaa1c5249cfa391c"},o("slot",{key:"6d9c155e807d25a85878f7c10e0e6ca34472f06a"}),o("div",{key:"d7ce177e5b865646435a794b197f0b7fca89fc5e",class:"title-actions"},o("slot",{key:"5c44f29c04f0e8960d64dd5b6aa5f4a740d6c175",name:"title-actions"})))}};b.style=h;export{c as ix_card_accordion,b as ix_card_title};
+//# sourceMappingURL=p-1cff59db.entry.js.map