@siemens/ix 2.0.0-beta.1 → 2.0.0

package/dist/siemens-ix/p-847da072.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as o,H as r,g as i}from"./p-76a509c7.js";const e=":host{display:inline-block;position:relative;height:2rem;width:auto}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .hide{display:none}:host .dropdown-button{display:block;position:relative;width:100%;height:100%}:host .dropdown-button>ix-button{width:100%;height:100%}:host .dropdown-button .button-label{margin-right:auto;min-width:0px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .dropdown-button .dropdown-icon{margin-right:0.25rem}:host .triangle{position:absolute;-webkit-margin-start:1.5625rem;margin-inline-start:1.5625rem;-webkit-margin-before:-0.4375rem;margin-block-start:-0.4375rem;border-right:0 solid transparent;border-left:4px solid transparent;border-top:0 solid transparent;border-bottom:4px solid;color:var(--theme-btn-primary--color)}:host .triangle.primary.ghost{color:var(--theme-btn-invisible-primary--color)}:host .triangle.primary.outline{color:var(--theme-btn-outline-primary--color)}:host .triangle.primary.ghost.disabled{color:var(--theme-btn-invisible-primary--color--disabled)}:host .triangle.primary.outline.disabled{color:var(--theme-btn-outline-primary--color--disabled)}:host .triangle.primary.disabled{color:var(--theme-btn-primary--color--disabled)}:host .triangle.secondary.ghost{color:var(--theme-btn-invisible-secondary--color)}:host .triangle.secondary.outline{color:var(--theme-btn-outline-secondary--color)}:host .triangle.secondary.ghost.disabled{color:var(--theme-btn-invisible-secondary--color--disabled)}:host .triangle.secondary.outline.disabled{color:var(--theme-btn-outline-secondary--color--disabled)}:host .triangle.secondary.disabled{color:var(--theme-btn-secondary--color--disabled)}:host .content{display:flex;align-items:center}:host(.disabled){pointer-events:none}";const s=class{constructor(o){t(this,o);this.variant="primary";this.outline=false;this.ghost=false;this.disabled=false;this.label=undefined;this.icon=undefined;this.placement=undefined;this.dropdownAnchor=undefined}getTriangle(){return o("div",{class:{triangle:true,hide:this.label!=="",primary:this.variant==="primary",secondary:this.variant==="secondary",ghost:this.ghost,outline:this.outline,disabled:this.disabled}})}render(){return o(r,{class:{disabled:this.disabled}},o("div",{class:"dropdown-button",ref:t=>{this.dropdownAnchor=t}},this.label?o("ix-button",{variant:this.variant,outline:this.outline,ghost:this.ghost,disabled:this.disabled,alignment:"start"},o("div",{class:"content"},this.icon?o("ix-icon",{name:this.icon,size:"24",class:"dropdown-icon"}):null,o("div",{class:"button-label"},this.label),o("ix-icon",{name:"chevron-down-small",size:"24"}))):o("div",null,o("ix-icon-button",{icon:this.icon,variant:this.variant,outline:this.outline,ghost:this.ghost,disabled:this.disabled}),this.getTriangle())),o("ix-dropdown",{class:"dropdown",trigger:this.dropdownAnchor,placement:this.placement},o("slot",null)))}get hostElement(){return i(this)}};s.style=e;export{s as ix_dropdown_button};
+//# sourceMappingURL=p-847da072.entry.js.map

package/dist/siemens-ix/p-847da072.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["dropdownButtonCss","DropdownButton","getTriangle","h","class","triangle","hide","this","label","primary","variant","secondary","ghost","outline","disabled","render","Host","ref","dropdownAnchor","alignment","icon","name","size","trigger","placement"],"sources":["./src/components/dropdown-button/dropdown-button.scss?tag=ix-dropdown-button&encapsulation=shadow","./src/components/dropdown-button/dropdown-button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: inline-block;\n  position: relative;\n  height: $x-large-space;\n  width: auto;\n\n  .hide {\n    display: none;\n  }\n\n  .dropdown-button {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 100%;\n  }\n\n  .dropdown-button > ix-button {\n    width: 100%;\n    height: 100%;\n  }\n\n  .dropdown-button .button-label {\n    margin-right: auto;\n    min-width: 0px;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  .dropdown-button .dropdown-icon {\n    margin-right: 0.25rem;\n  }\n\n  .triangle {\n    position: absolute;\n    margin-inline-start: 1.5625rem;\n    margin-block-start: -0.4375rem;\n    border-right: 0 solid transparent;\n    border-left: 4px solid transparent;\n    border-top: 0 solid transparent;\n    border-bottom: 4px solid;\n    color: var(--theme-btn-primary--color);\n  }\n\n  .triangle.primary {\n    &.ghost {\n      color: var(--theme-btn-invisible-primary--color);\n    }\n\n    &.outline {\n      color: var(--theme-btn-outline-primary--color);\n    }\n\n    &.ghost.disabled {\n      color: var(--theme-btn-invisible-primary--color--disabled);\n    }\n\n    &.outline.disabled {\n      color: var(--theme-btn-outline-primary--color--disabled);\n    }\n\n    &.disabled {\n      color: var(--theme-btn-primary--color--disabled);\n    }\n  }\n\n  .triangle.secondary {\n    &.ghost {\n      color: var(--theme-btn-invisible-secondary--color);\n    }\n\n    &.outline {\n      color: var(--theme-btn-outline-secondary--color);\n    }\n\n    &.ghost.disabled {\n      color: var(--theme-btn-invisible-secondary--color--disabled);\n    }\n\n    &.outline.disabled {\n      color: var(--theme-btn-outline-secondary--color--disabled);\n    }\n\n    &.disabled {\n      color: var(--theme-btn-secondary--color--disabled);\n    }\n  }\n\n  .content {\n    display: flex;\n    align-items: center;\n  }\n}\n\n:host(.disabled) {\n  pointer-events: 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';\nimport { ButtonVariant } from '../button/button';\nimport { AlignedPlacement } from '../dropdown/placement';\n\nexport type DropdownButtonVariant = ButtonVariant;\n\n/**\n * @since 1.3.0\n */\n@Component({\n  tag: 'ix-dropdown-button',\n  styleUrl: 'dropdown-button.scss',\n  shadow: true,\n})\nexport class DropdownButton {\n  @Element() hostElement!: HTMLIxDropdownButtonElement;\n\n  /**\n   * Button variant\n   */\n  @Prop() variant: DropdownButtonVariant = 'primary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Disable button\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Set label\n   */\n  @Prop() label: string;\n\n  /**\n   * Button icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Placement of the dropdown\n   *\n   * @since 2.0.0\n   */\n  @Prop() placement: AlignedPlacement;\n\n  @State() dropdownAnchor!: HTMLElement;\n\n  private getTriangle() {\n    return (\n      <div\n        class={{\n          triangle: true,\n          hide: this.label !== '',\n          primary: this.variant === 'primary',\n          secondary: this.variant === 'secondary',\n          ghost: this.ghost,\n          outline: this.outline,\n          disabled: this.disabled,\n        }}\n      ></div>\n    );\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n      >\n        <div\n          class=\"dropdown-button\"\n          ref={(ref) => {\n            this.dropdownAnchor = ref;\n          }}\n        >\n          {this.label ? (\n            <ix-button\n              variant={this.variant}\n              outline={this.outline}\n              ghost={this.ghost}\n              disabled={this.disabled}\n              alignment=\"start\"\n            >\n              <div class={'content'}>\n                {this.icon ? (\n                  <ix-icon\n                    name={this.icon}\n                    size=\"24\"\n                    class={'dropdown-icon'}\n                  ></ix-icon>\n                ) : null}\n                <div class={'button-label'}>{this.label}</div>\n                <ix-icon name={'chevron-down-small'} size=\"24\"></ix-icon>\n              </div>\n            </ix-button>\n          ) : (\n            <div>\n              <ix-icon-button\n                icon={this.icon}\n                variant={this.variant}\n                outline={this.outline}\n                ghost={this.ghost}\n                disabled={this.disabled}\n              ></ix-icon-button>\n              {this.getTriangle()}\n            </div>\n          )}\n        </div>\n\n        <ix-dropdown\n          class=\"dropdown\"\n          trigger={this.dropdownAnchor}\n          placement={this.placement}\n        >\n          <slot></slot>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAoB,gwE,MCuBbC,EAAc,M,sCAMgB,U,aAKvB,M,WAKF,M,cAKG,M,gGAqBXC,cACN,OACEC,EAAA,OACEC,MAAO,CACLC,SAAU,KACVC,KAAMC,KAAKC,QAAU,GACrBC,QAASF,KAAKG,UAAY,UAC1BC,UAAWJ,KAAKG,UAAY,YAC5BE,MAAOL,KAAKK,MACZC,QAASN,KAAKM,QACdC,SAAUP,KAAKO,W,CAMvBC,SACE,OACEZ,EAACa,EAAI,CACHZ,MAAO,CACLU,SAAUP,KAAKO,WAGjBX,EAAA,OACEC,MAAM,kBACNa,IAAMA,IACJV,KAAKW,eAAiBD,CAAG,GAG1BV,KAAKC,MACJL,EAAA,aACEO,QAASH,KAAKG,QACdG,QAASN,KAAKM,QACdD,MAAOL,KAAKK,MACZE,SAAUP,KAAKO,SACfK,UAAU,SAEVhB,EAAA,OAAKC,MAAO,WACTG,KAAKa,KACJjB,EAAA,WACEkB,KAAMd,KAAKa,KACXE,KAAK,KACLlB,MAAO,kBAEP,KACJD,EAAA,OAAKC,MAAO,gBAAiBG,KAAKC,OAClCL,EAAA,WAASkB,KAAM,qBAAsBC,KAAK,SAI9CnB,EAAA,WACEA,EAAA,kBACEiB,KAAMb,KAAKa,KACXV,QAASH,KAAKG,QACdG,QAASN,KAAKM,QACdD,MAAOL,KAAKK,MACZE,SAAUP,KAAKO,WAEhBP,KAAKL,gBAKZC,EAAA,eACEC,MAAM,WACNmB,QAAShB,KAAKW,eACdM,UAAWjB,KAAKiB,WAEhBrB,EAAA,c"}

package/dist/siemens-ix/p-8952f1cd.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as o,h as t,H as r,g as i}from"./p-76a509c7.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}: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 - 0.125rem);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 - 0.125rem);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 - 0.125rem);padding:0 0.5rem;padding-right:0.5rem}:host(.submenu) .dropdown-item{width:calc(100% - 0.5rem - 0.5rem - 0.125rem);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 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)}isIconOnly(){return this.label===undefined&&this.hostElement.innerText===""&&this.icon!==undefined}render(){return t(r,{class:{hover:this.hover,"icon-only":this.isIconOnly(),disabled:this.disabled,submenu:this.isSubMenu},role:"listitem"},t("button",{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",{class:"dropdown-item-text"},this.label,t("slot",null)),this.isSubMenu?t("ix-icon",{name:"chevron-right-small",class:"submenu-icon"}):null))}get hostElement(){return i(this)}};n.style=s;export{n as ix_dropdown_item};
+//# sourceMappingURL=p-8952f1cd.entry.js.map

package/dist/siemens-ix/p-8952f1cd.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["dropdownItemCss","DropdownItem","async","this","itemClick","emit","hostElement","isIconOnly","label","undefined","innerText","icon","render","h","Host","class","hover","disabled","submenu","isSubMenu","role","type","tabIndex","suppressChecked","onClick","emitItemClick","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} - #{2 * $focusBorder});\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';\n\n@Component({\n  tag: 'ix-dropdown-item',\n  styleUrl: 'dropdown-item.scss',\n  shadow: true,\n})\nexport class DropdownItem {\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  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,o+E,MCyBXC,EAAY,M,kHAgBP,M,cAKG,M,aAKD,M,eAGE,M,qBAGM,K,CAS1BC,sBACEC,KAAKC,UAAUC,KAAKF,KAAKG,Y,CAGnBC,aACN,OACEJ,KAAKK,QAAUC,WACfN,KAAKG,YAAYI,YAAc,IAC/BP,KAAKQ,OAASF,S,CAIlBG,SACE,OACEC,EAACC,EAAI,CACHC,MAAO,CACLC,MAAOb,KAAKa,MACZ,YAAab,KAAKI,aAClBU,SAAUd,KAAKc,SACfC,QAASf,KAAKgB,WAEhBC,KAAK,YAELP,EAAA,UACEQ,KAAK,SACLC,SAAU,EACVP,MAAO,CACL,gBAAiB,KACjB,mBAAoBZ,KAAKoB,iBAE3BC,QAAS,IAAMrB,KAAKsB,kBAElBtB,KAAKoB,gBACLV,EAAA,OAAKE,MAAM,yBACRZ,KAAKuB,QACJb,EAAA,WACEE,MAAM,YACNY,KAAM,eACNC,KAAK,OAEL,MAEJ,KACHzB,KAAKQ,KACJE,EAAA,WAASE,MAAM,qBAAqBY,KAAMxB,KAAKQ,OAC7C,KACJE,EAAA,OAAKE,MAAM,sBACRZ,KAAKK,MACNK,EAAA,cAEDV,KAAKgB,UACJN,EAAA,WACEc,KAAM,sBACNZ,MAAO,iBAEP,M"}

package/dist/siemens-ix/p-8c5f7419.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,f as o,h as s,H as i,g as n}from"./p-76a509c7.js";const a=".text-xs{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text)}.text-s{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text)}.text-default{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text)}.text-default-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-title-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text)}.text-l{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text)}.text-l-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-title-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text)}.text-h2{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text)}.text-xl{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text)}a{color:var(--theme-color-primary)}:host{display:block;background-color:var(--theme-nav-overlay--background);padding:0.75rem 1rem 1rem 2rem;flex-grow:1;position:absolute;width:100%;height:100%}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .settings-header{display:flex;justify-content:space-between;flex-direction:row;align-items:center;height:2rem;margin-bottom:0.5rem}:host .settings-header h2{color:var(--theme-nav-overlay-header--color);margin-bottom:1rem}:host ix-tabs{margin-bottom:1.5rem}:host .settings-tabs{margin-bottom:1.5rem}";const r=class{constructor(o){t(this,o);this.close=e(this,"close",7);this.activeTabLabel=undefined;this.label="Settings";this.show=false}get settingsItems(){return Array.from(this.el.querySelectorAll("ix-menu-settings-item"))}setTab(t){this.activeTabLabel=t;this.settingsItems.forEach((t=>{t.style.display="none";if(t.label===this.activeTabLabel){t.style.display="block"}}))}componentWillLoad(){if(this.settingsItems.length){this.setTab(this.activeTabLabel||this.settingsItems[0].label)}}componentDidLoad(){o(this.el)}watchActiveTabLabel(t){this.setTab(t)}getTabItems(){return this.settingsItems.map((({label:t})=>s("ix-tab-item",{class:{active:t===this.activeTabLabel},onClick:()=>this.setTab(t)},t)))}render(){return s(i,{slot:"ix-menu-settings",class:{show:this.show}},s("div",{class:"settings-header"},s("h2",{class:"text-h2"},this.label),s("ix-icon-button",{ghost:true,size:"24",icon:"close",onClick:t=>this.close.emit({name:"ix-menu-settings",nativeEvent:t})})),s("ix-tabs",null,this.getTabItems()),s("slot",null))}get el(){return n(this)}static get watchers(){return{activeTabLabel:["watchActiveTabLabel"]}}};r.style=a;export{r as ix_menu_settings};
+//# sourceMappingURL=p-8c5f7419.entry.js.map

package/dist/siemens-ix/p-8c5f7419.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["menuSettingsCss","MenuAbout","settingsItems","Array","from","this","el","querySelectorAll","setTab","label","activeTabLabel","forEach","i","style","display","componentWillLoad","length","componentDidLoad","forceUpdate","watchActiveTabLabel","value","getTabItems","map","h","class","active","onClick","render","Host","slot","show","ghost","size","icon","e","close","emit","name","nativeEvent"],"sources":["./src/components/menu-settings/menu-settings.scss?tag=ix-menu-settings&encapsulation=shadow","./src/components/menu-settings/menu-settings.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'legacy/fonts';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: block;\n  background-color: var(--theme-nav-overlay--background);\n  padding: $medium-space $default-space $default-space $x-large-space;\n  flex-grow: 1;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n\n  .settings-header {\n    display: flex;\n    justify-content: space-between;\n    flex-direction: row;\n    align-items: center;\n    height: $x-large-space;\n    margin-bottom: $small-space;\n\n    h2 {\n      color: var(--theme-nav-overlay-header--color);\n      margin-bottom: 1rem;\n    }\n  }\n\n  ix-tabs {\n    margin-bottom: 1.5rem;\n  }\n\n  .settings-tabs {\n    margin-bottom: $large-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  Element,\n  Event,\n  EventEmitter,\n  forceUpdate,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-menu-settings',\n  styleUrl: 'menu-settings.scss',\n  shadow: true,\n})\nexport class MenuAbout {\n  /**\n   * active tab\n   */\n  @Prop({ mutable: true }) activeTabLabel: string;\n\n  /**\n   * Label\n   */\n  @Prop() label = 'Settings';\n\n  /**\n   * Internal\n   */\n  @Prop() show = false;\n\n  @Element() el!: HTMLIxMenuSettingsElement;\n\n  /**\n   * Popover closed\n   */\n  @Event() close: EventEmitter<{\n    nativeEvent: MouseEvent;\n    name: string;\n  }>;\n\n  get settingsItems(): HTMLIxMenuSettingsItemElement[] {\n    return Array.from(this.el.querySelectorAll('ix-menu-settings-item'));\n  }\n\n  private setTab(label: string) {\n    this.activeTabLabel = label;\n    this.settingsItems.forEach((i) => {\n      i.style.display = 'none';\n\n      if (i.label === this.activeTabLabel) {\n        i.style.display = 'block';\n      }\n    });\n  }\n\n  componentWillLoad() {\n    if (this.settingsItems.length) {\n      this.setTab(this.activeTabLabel || this.settingsItems[0].label);\n    }\n  }\n\n  componentDidLoad() {\n    forceUpdate(this.el);\n  }\n\n  @Watch('activeTabLabel')\n  watchActiveTabLabel(value: string) {\n    this.setTab(value);\n  }\n\n  private getTabItems() {\n    return this.settingsItems.map(({ label }) => {\n      return (\n        <ix-tab-item\n          class={{\n            active: label === this.activeTabLabel,\n          }}\n          onClick={() => this.setTab(label)}\n        >\n          {label}\n        </ix-tab-item>\n      );\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        slot=\"ix-menu-settings\"\n        class={{\n          show: this.show,\n        }}\n      >\n        <div class=\"settings-header\">\n          <h2 class=\"text-h2\">{this.label}</h2>\n          <ix-icon-button\n            ghost\n            size=\"24\"\n            icon={'close'}\n            onClick={(e) =>\n              this.close.emit({\n                name: 'ix-menu-settings',\n                nativeEvent: e,\n              })\n            }\n          ></ix-icon-button>\n        </div>\n        <ix-tabs>{this.getTabItems()}</ix-tabs>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"uEAAA,MAAMA,EAAkB,25H,MC0BXC,EAAS,M,+FASJ,W,UAKD,K,CAYXC,oBACF,OAAOC,MAAMC,KAAKC,KAAKC,GAAGC,iBAAiB,yB,CAGrCC,OAAOC,GACbJ,KAAKK,eAAiBD,EACtBJ,KAAKH,cAAcS,SAASC,IAC1BA,EAAEC,MAAMC,QAAU,OAElB,GAAIF,EAAEH,QAAUJ,KAAKK,eAAgB,CACnCE,EAAEC,MAAMC,QAAU,O,KAKxBC,oBACE,GAAIV,KAAKH,cAAcc,OAAQ,CAC7BX,KAAKG,OAAOH,KAAKK,gBAAkBL,KAAKH,cAAc,GAAGO,M,EAI7DQ,mBACEC,EAAYb,KAAKC,G,CAInBa,oBAAoBC,GAClBf,KAAKG,OAAOY,E,CAGNC,cACN,OAAOhB,KAAKH,cAAcoB,KAAI,EAAGb,WAE7Bc,EAAA,eACEC,MAAO,CACLC,OAAQhB,IAAUJ,KAAKK,gBAEzBgB,QAAS,IAAMrB,KAAKG,OAAOC,IAE1BA,I,CAMTkB,SACE,OACEJ,EAACK,EAAI,CACHC,KAAK,mBACLL,MAAO,CACLM,KAAMzB,KAAKyB,OAGbP,EAAA,OAAKC,MAAM,mBACTD,EAAA,MAAIC,MAAM,WAAWnB,KAAKI,OAC1Bc,EAAA,kBACEQ,MAAK,KACLC,KAAK,KACLC,KAAM,QACNP,QAAUQ,GACR7B,KAAK8B,MAAMC,KAAK,CACdC,KAAM,mBACNC,YAAaJ,OAKrBX,EAAA,eAAUlB,KAAKgB,eACfE,EAAA,a"}

package/dist/siemens-ix/p-8fdf4407.entry.js

@@ -0,0 +1,2 @@
+import{r as o,c as t,h as e,H as r,g as n}from"./p-76a509c7.js";const i=':host{display:inline-block;position:relative;height:2rem;max-height:2rem;margin-left:0.25rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host(.inactive){pointer-events:none}.container{display:inline-flex;width:inherit;box-sizing:border-box;position:relative;align-items:center;border-radius:100px;padding:0.5rem;height:2rem;max-height:2rem;cursor:pointer}.container .with-icon{margin-right:0.25rem}.container .hidden{display:none;width:0px;margin-right:0px}.container .close-button-container{display:inline-flex;margin-left:auto;padding-left:0.5rem}.container .slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.container.icon{padding-left:0.75rem;padding-right:0.75rem}.container.closable{padding-right:0.25rem}.container.primary{background-color:var(--theme-color-primary);color:var(--theme-chip-primary--color)}.container.primary .close-button{color:var(--theme-chip-primary--color);--ix-icon-button-color:var(--theme-chip-primary--color);pointer-events:auto}.container.primary:hover{background-color:var(--theme-chip-primary--background--hover)}.container.primary:active{background-color:var(--theme-chip-primary--background--active)}.container.primary:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.primary.outline{color:var(--theme-chip-primary-outline--color);background-color:transparent;border:solid 1px var(--theme-chip-primary-outline--border-color)}.container.primary.outline .close-button{color:var(--theme-chip-primary-outline--color);--ix-icon-button-color:var(--theme-chip-primary-outline--color)}.container.primary.outline:hover{background-color:var(--theme-chip-primary-outline--background--hover)}.container.primary.outline:active{background-color:var(--theme-chip-primary-outline--background--active)}.container.alarm{color:var(--theme-color-alarm--contrast)}.container.alarm:hover::after{content:"";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.alarm.active::after,.container.alarm:active::after{content:"";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.alarm:not(.outline){background-color:var(--theme-color-alarm)}.container.alarm:not(.outline) .close-button{color:var(--theme-color-alarm--contrast);--ix-icon-button-color:var(--theme-color-alarm--contrast)}.container.alarm:not(.outline):hover::after{content:"";background-color:rgba(0, 0, 0, 0.05)}.container.alarm:not(.outline).active::after,.container.alarm:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.alarm.outline{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-alarm)}.container.alarm.outline:hover::after{display:none}.container.alarm.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.alarm.outline.active::after,.container.alarm.outline:active::after{display:none}.container.alarm.outline.active,.container.alarm.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.alarm:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.critical{color:var(--theme-color-critical--contrast)}.container.critical:hover::after{content:"";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.critical.active::after,.container.critical:active::after{content:"";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.critical:not(.outline){background-color:var(--theme-color-critical)}.container.critical:not(.outline) .close-button{color:var(--theme-color-critical--contrast);--ix-icon-button-color:var(--theme-color-critical--contrast)}.container.critical:not(.outline):hover::after{content:"";background-color:rgba(0, 0, 0, 0.05)}.container.critical:not(.outline).active::after,.container.critical:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.critical.outline{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-critical)}.container.critical.outline:hover::after{display:none}.container.critical.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.critical.outline.active::after,.container.critical.outline:active::after{display:none}.container.critical.outline.active,.container.critical.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.critical:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.warning{color:var(--theme-color-warning--contrast)}.container.warning:hover::after{content:"";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.warning.active::after,.container.warning:active::after{content:"";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.warning:not(.outline){background-color:var(--theme-color-warning)}.container.warning:not(.outline) .close-button{color:var(--theme-color-warning--contrast);--ix-icon-button-color:var(--theme-color-warning--contrast)}.container.warning:not(.outline):hover::after{content:"";background-color:rgba(0, 0, 0, 0.05)}.container.warning:not(.outline).active::after,.container.warning:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.warning.outline{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-warning)}.container.warning.outline:hover::after{display:none}.container.warning.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.warning.outline.active::after,.container.warning.outline:active::after{display:none}.container.warning.outline.active,.container.warning.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.warning:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.info{color:var(--theme-color-info--contrast)}.container.info:hover::after{content:"";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.info.active::after,.container.info:active::after{content:"";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.info:not(.outline){background-color:var(--theme-color-info)}.container.info:not(.outline) .close-button{color:var(--theme-color-info--contrast);--ix-icon-button-color:var(--theme-color-info--contrast)}.container.info:not(.outline):hover::after{content:"";background-color:rgba(0, 0, 0, 0.05)}.container.info:not(.outline).active::after,.container.info:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.info.outline{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-info)}.container.info.outline:hover::after{display:none}.container.info.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.info.outline.active::after,.container.info.outline:active::after{display:none}.container.info.outline.active,.container.info.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.info:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.neutral{color:var(--theme-color-neutral--contrast)}.container.neutral:hover::after{content:"";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.neutral.active::after,.container.neutral:active::after{content:"";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.neutral:not(.outline){background-color:var(--theme-color-neutral)}.container.neutral:not(.outline) .close-button{color:var(--theme-color-neutral--contrast);--ix-icon-button-color:var(--theme-color-neutral--contrast)}.container.neutral:not(.outline):hover::after{content:"";background-color:rgba(0, 0, 0, 0.05)}.container.neutral:not(.outline).active::after,.container.neutral:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.neutral.outline{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-neutral)}.container.neutral.outline:hover::after{display:none}.container.neutral.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.neutral.outline.active::after,.container.neutral.outline:active::after{display:none}.container.neutral.outline.active,.container.neutral.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.neutral:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.success{color:var(--theme-color-success--contrast)}.container.success:hover::after{content:"";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.success.active::after,.container.success:active::after{content:"";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.success:not(.outline){background-color:var(--theme-color-success)}.container.success:not(.outline) .close-button{color:var(--theme-color-success--contrast);--ix-icon-button-color:var(--theme-color-success--contrast)}.container.success:not(.outline):hover::after{content:"";background-color:rgba(0, 0, 0, 0.05)}.container.success:not(.outline).active::after,.container.success:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.success.outline{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-success)}.container.success.outline:hover::after{display:none}.container.success.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.success.outline.active::after,.container.success.outline:active::after{display:none}.container.success.outline.active,.container.success.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.success:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}';const a=class{constructor(e){o(this,e);this.closeChip=t(this,"closeChip",7);this.variant="primary";this.active=true;this.closable=false;this.icon=undefined;this.background=undefined;this.color=undefined;this.outline=false}getCloseButton(){return e("div",{class:"close-button-container"},e("ix-icon-button",{type:"button",variant:"secondary",icon:"close-small",class:"close-button",oval:true,size:"16",style:this.variant==="custom"?{color:this.color}:{},ghost:true,onClick:o=>{this.closeChip.emit(o);o.stopPropagation()}}))}render(){const o=this.active===false;let t={};if(this.variant==="custom"){t={color:this.color,[this.outline?"borderColor":"backgroundColor"]:this.background}}return e(r,{tabIndex:"-1",title:this.el.textContent,style:this.variant==="custom"?{"--ix-icon-button-color":this.color}:{}},e("div",{style:Object.assign({},t),class:{container:true,outline:this.outline,inactive:o,alarm:this.variant==="alarm",critical:this.variant==="critical",info:this.variant==="info",neutral:this.variant==="neutral",primary:this.variant==="primary",success:this.variant==="success",warning:this.variant==="warning",closable:this.closable,icon:!!this.icon}},e("ix-icon",{class:{"with-icon":true,hidden:!this.icon},name:this.icon,size:"24"}),e("span",{class:"slot-container"},e("slot",null)),o===false&&this.closable?this.getCloseButton():null))}get el(){return n(this)}};a.style=i;export{a as ix_chip};
+//# sourceMappingURL=p-8fdf4407.entry.js.map

package/dist/siemens-ix/p-8fdf4407.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["chipCss","Chip","getCloseButton","h","class","type","variant","icon","oval","size","style","this","color","ghost","onClick","event","closeChip","emit","stopPropagation","render","isInactive","active","customStyle","outline","background","Host","tabIndex","title","el","textContent","Object","assign","container","inactive","alarm","critical","info","neutral","primary","success","warning","closable","hidden","name"],"sources":["./src/components/chip/chip.scss?tag=ix-chip&encapsulation=shadow","./src/components/chip/chip.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import './chip-mixin';\n\n:host {\n  @include ix-component;\n  display: inline-block;\n  position: relative;\n  height: 2rem;\n  max-height: 2rem;\n  margin-left: $tiny-space;\n}\n\n:host(.inactive) {\n  pointer-events: none;\n}\n\n@include chip-container;\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-chip',\n  styleUrl: 'chip.scss',\n  shadow: true,\n})\nexport class Chip {\n  @Element() el: HTMLIxChipElement;\n\n  /**\n   * Chip variant\n   */\n  @Prop({ reflect: true }) variant:\n    | 'primary'\n    | 'alarm'\n    | 'critical'\n    | 'warning'\n    | 'info'\n    | 'neutral'\n    | 'success'\n    | 'custom' = 'primary';\n\n  /**\n   * Determines if the chip is interactive. If false no user input (e.g. mouse states, keyboard navigation)\n   * will be possible and also the close button will not be present.\n   */\n  @Prop() active = true;\n\n  /**\n   * Show close icon\n   */\n  @Prop() closable = false;\n\n  /**\n   * Show icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Custom color for pill. Only working for `variant='custom'`\n   */\n  @Prop() background: string | undefined;\n\n  /**\n   * Custom font color for pill. Only working for `variant='custom'`\n   */\n  @Prop() color: string | undefined;\n\n  /**\n   * Show chip with outline style\n   */\n  @Prop() outline = false;\n\n  /**\n   * Fire event if close button is clicked\n   *\n   * @since 1.5.0\n   */\n  @Event() closeChip: EventEmitter;\n\n  private getCloseButton() {\n    return (\n      <div class=\"close-button-container\">\n        <ix-icon-button\n          type=\"button\"\n          variant=\"secondary\"\n          icon={'close-small'}\n          class=\"close-button\"\n          oval\n          size=\"16\"\n          style={this.variant === 'custom' ? { color: this.color } : {}}\n          ghost\n          onClick={(event) => {\n            this.closeChip.emit(event);\n            event.stopPropagation();\n          }}\n        ></ix-icon-button>\n      </div>\n    );\n  }\n\n  render() {\n    const isInactive = this.active === false;\n\n    let customStyle = {};\n\n    if (this.variant === 'custom') {\n      customStyle = {\n        color: this.color,\n        [this.outline ? 'borderColor' : 'backgroundColor']: this.background,\n      };\n    }\n\n    return (\n      <Host\n        tabIndex=\"-1\"\n        title={this.el.textContent}\n        style={\n          this.variant === 'custom'\n            ? {\n                '--ix-icon-button-color': this.color,\n              }\n            : {}\n        }\n      >\n        <div\n          style={{ ...customStyle }}\n          class={{\n            container: true,\n            outline: this.outline,\n            inactive: isInactive,\n            alarm: this.variant === 'alarm',\n            critical: this.variant === 'critical',\n            info: this.variant === 'info',\n            neutral: this.variant === 'neutral',\n            primary: this.variant === 'primary',\n            success: this.variant === 'success',\n            warning: this.variant === 'warning',\n            closable: this.closable,\n            icon: !!this.icon,\n          }}\n        >\n          <ix-icon\n            class={{\n              'with-icon': true,\n              hidden: !this.icon,\n            }}\n            name={this.icon}\n            size={'24'}\n          />\n          <span class=\"slot-container\">\n            <slot></slot>\n          </span>\n          {isInactive === false && this.closable ? this.getCloseButton() : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAU,+jW,MCwBHC,EAAI,M,2EAcA,U,YAME,K,cAKE,M,gFAoBD,K,CASVC,iBACN,OACEC,EAAA,OAAKC,MAAM,0BACTD,EAAA,kBACEE,KAAK,SACLC,QAAQ,YACRC,KAAM,cACNH,MAAM,eACNI,KAAI,KACJC,KAAK,KACLC,MAAOC,KAAKL,UAAY,SAAW,CAAEM,MAAOD,KAAKC,OAAU,GAC3DC,MAAK,KACLC,QAAUC,IACRJ,KAAKK,UAAUC,KAAKF,GACpBA,EAAMG,iBAAiB,I,CAOjCC,SACE,MAAMC,EAAaT,KAAKU,SAAW,MAEnC,IAAIC,EAAc,GAElB,GAAIX,KAAKL,UAAY,SAAU,CAC7BgB,EAAc,CACZV,MAAOD,KAAKC,MACZ,CAACD,KAAKY,QAAU,cAAgB,mBAAoBZ,KAAKa,W,CAI7D,OACErB,EAACsB,EAAI,CACHC,SAAS,KACTC,MAAOhB,KAAKiB,GAAGC,YACfnB,MACEC,KAAKL,UAAY,SACb,CACE,yBAA0BK,KAAKC,OAEjC,IAGNT,EAAA,OACEO,MAAKoB,OAAAC,OAAA,GAAOT,GACZlB,MAAO,CACL4B,UAAW,KACXT,QAASZ,KAAKY,QACdU,SAAUb,EACVc,MAAOvB,KAAKL,UAAY,QACxB6B,SAAUxB,KAAKL,UAAY,WAC3B8B,KAAMzB,KAAKL,UAAY,OACvB+B,QAAS1B,KAAKL,UAAY,UAC1BgC,QAAS3B,KAAKL,UAAY,UAC1BiC,QAAS5B,KAAKL,UAAY,UAC1BkC,QAAS7B,KAAKL,UAAY,UAC1BmC,SAAU9B,KAAK8B,SACflC,OAAQI,KAAKJ,OAGfJ,EAAA,WACEC,MAAO,CACL,YAAa,KACbsC,QAAS/B,KAAKJ,MAEhBoC,KAAMhC,KAAKJ,KACXE,KAAM,OAERN,EAAA,QAAMC,MAAM,kBACVD,EAAA,cAEDiB,IAAe,OAAST,KAAK8B,SAAW9B,KAAKT,iBAAmB,M"}

package/dist/siemens-ix/p-90efad65.entry.js

@@ -0,0 +1,2 @@
+import{r as o,h as e,H as r,g as t}from"./p-76a509c7.js";import{B as i}from"./p-1b9b19e6.js";import"./p-ab452b82.js";const a=":host{display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host button{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host ix-spinner{margin-right:0.25rem}:host ix-icon{margin-right:0.25rem}:host .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host(.disabled){cursor:default}*,*::after,*::before{box-sizing:border-box}::-webkit-scrollbar-button{display:none}::-webkit-scrollbar{width:0.5rem;height:0.5rem}::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}::-webkit-scrollbar-corner{display:none}:host .btn-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-primary,:host .btn-primary.focus,:host .btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}:host .btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):active,:host .btn-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):active,:host .btn-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}:host(.disabled) .btn-primary.disabled,:host(.disabled) .btn-primary:disabled{pointer-events:none;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}:host .btn-outline-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-primary,:host .btn-outline-primary.focus,:host .btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);--ix-button-color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}:host .btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-primary--border-color--hover);background-color:var(--theme-btn-outline-primary--background--hover);color:var(--theme-btn-outline-primary--color--hover)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):active,:host .btn-outline-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-primary--border-color--active);background-color:var(--theme-btn-outline-primary--background--active);color:var(--theme-btn-outline-primary--color--active)}:host(.disabled) .btn-outline-primary.disabled,:host(.disabled) .btn-outline-primary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-primary--color--disabled)}:host .btn-invisible-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-primary,:host .btn-invisible-primary.focus,:host .btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}:host .btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):active,:host .btn-invisible-primary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}:host(.disabled) .btn-invisible-primary.disabled,:host(.disabled) .btn-invisible-primary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-primary--color--disabled)}:host .btn-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-secondary,:host .btn-secondary.focus,:host .btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}:host .btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):active,:host .btn-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}:host(.disabled) .btn-secondary.disabled,:host(.disabled) .btn-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}:host .btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-secondary,:host .btn-outline-secondary.focus,:host .btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);--ix-button-color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}:host .btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-secondary--border-color--hover);background-color:var(--theme-btn-outline-secondary--background--hover);color:var(--theme-btn-outline-secondary--color--hover)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):active,:host .btn-outline-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-secondary--border-color--active);background-color:var(--theme-btn-outline-secondary--background--active);color:var(--theme-btn-outline-secondary--color--active)}:host(.disabled) .btn-outline-secondary.disabled,:host(.disabled) .btn-outline-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-secondary--color--disabled)}:host .btn-invisible-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-secondary,:host .btn-invisible-secondary.focus,:host .btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);--ix-button-color:var(--theme-btn-invisible-secondary--color);border-color:transparent}:host .btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-secondary--background--active);color:var(--theme-btn-invisible-secondary--color--active)}:host(.disabled) .btn-invisible-secondary.disabled,:host(.disabled) .btn-invisible-secondary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}:host{display:inline-flex;justify-content:center;align-items:center}:host button{width:100%;height:100%;overflow:hidden;padding:0}:host button.btn-oval{border-radius:6.25rem}:host ix-icon{color:var(--ix-icon-button-color, currentColor);margin:0}:host ix-spinner{margin:0}:host(.btn-icon-12){height:1rem;width:1rem;min-width:1rem;min-height:1rem}:host(.btn-icon-16){height:1.5rem;width:1.5rem;min-width:1.5rem;min-height:1.5rem}:host(.btn-icon-32){height:2rem;width:2rem;min-width:2rem;min-height:2rem}:host(.btn-icon-12) ix-spinner{height:12px;width:12px}:host(.btn-icon-16) ix-spinner{height:16px;width:16px}:host(.btn-icon-32) ix-spinner{height:24px;width:24px}";const l=class{constructor(e){o(this,e);this.variant="secondary";this.outline=undefined;this.ghost=undefined;this.oval=undefined;this.icon=undefined;this.size="24";this.color=undefined;this.disabled=false;this.type="button";this.loading=false}componentDidLoad(){if(this.type==="submit"){const o=document.createElement("button");o.style.display="none";o.type="submit";o.tabIndex=-1;this.hostElement.appendChild(o);this.submitButtonElement=o}}dispatchFormEvents(){if(this.type==="submit"&&this.submitButtonElement){this.submitButtonElement.click()}}getIconSizeClass(){return{"btn-icon-12":this.size==="12","btn-icon-16":this.size==="16","btn-icon-32":this.size==="32"||this.size==="24"||!this.size}}render(){const o={variant:this.variant,outline:this.outline,ghost:this.ghost,iconOnly:true,iconOval:this.oval,selected:false,disabled:this.disabled||this.loading,icon:this.icon,iconColor:this.color,iconSize:this.size,loading:this.loading,onClick:()=>this.dispatchFormEvents(),type:this.type,extraClasses:this.getIconSizeClass()};return e(r,{class:Object.assign(Object.assign({},this.getIconSizeClass()),{disabled:this.disabled||this.loading})},e(i,Object.assign({},o)))}get hostElement(){return t(this)}};l.style=a;const n=':host(.xx-small){display:block;position:relative;width:0.75rem;height:0.75rem;min-width:0.75rem;min-height:0.75rem;max-width:0.75rem;max-height:0.75rem;border-radius:100%;position:relative;animation:rotate 2s linear infinite}:host(.xx-small) *,:host(.xx-small) *::after,:host(.xx-small) *::before{box-sizing:border-box}:host(.xx-small) ::-webkit-scrollbar-button{display:none}:host(.xx-small) ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host(.xx-small) ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host(.xx-small) ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host(.xx-small) ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host(.xx-small) ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host(.xx-small) ::-webkit-scrollbar-corner{display:none}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes clipMask{0%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}12.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}25%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}37.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}50%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}62.5%{-webkit-clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0)}75%{-webkit-clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0)}87.5%{-webkit-clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0)}100%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}}:host(.xx-small)::after{content:"";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:1px solid var(--ix-button-color, var(--theme-color-soft-text));animation:clipMask 3s linear infinite}:host(:not(.hide-track)):host(.xx-small)::before{content:"";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:1px solid var(--theme-color-ghost--hover)}:host(.primary)::after{border-color:var(--theme-color-dynamic)}:host(.primary)::before{border-color:var(--theme-color-ghost--hover)}:host(.x-small){display:block;position:relative;width:1.25rem;height:1.25rem;min-width:1.25rem;min-height:1.25rem;max-width:1.25rem;max-height:1.25rem;border-radius:100%;position:relative;animation:rotate 2s linear infinite}:host(.x-small) *,:host(.x-small) *::after,:host(.x-small) *::before{box-sizing:border-box}:host(.x-small) ::-webkit-scrollbar-button{display:none}:host(.x-small) ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host(.x-small) ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host(.x-small) ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host(.x-small) ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host(.x-small) ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host(.x-small) ::-webkit-scrollbar-corner{display:none}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes clipMask{0%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}12.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}25%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}37.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}50%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}62.5%{-webkit-clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0)}75%{-webkit-clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0)}87.5%{-webkit-clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0)}100%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}}:host(.x-small)::after{content:"";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--ix-button-color, var(--theme-color-soft-text));animation:clipMask 3s linear infinite}:host(:not(.hide-track)):host(.x-small)::before{content:"";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--theme-color-ghost--hover)}:host(.primary)::after{border-color:var(--theme-color-dynamic)}:host(.primary)::before{border-color:var(--theme-color-ghost--hover)}:host(.small){display:block;position:relative;width:1.5rem;height:1.5rem;min-width:1.5rem;min-height:1.5rem;max-width:1.5rem;max-height:1.5rem;border-radius:100%;position:relative;animation:rotate 2s linear infinite}:host(.small) *,:host(.small) *::after,:host(.small) *::before{box-sizing:border-box}:host(.small) ::-webkit-scrollbar-button{display:none}:host(.small) ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host(.small) ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host(.small) ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host(.small) ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host(.small) ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host(.small) ::-webkit-scrollbar-corner{display:none}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes clipMask{0%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}12.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}25%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}37.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}50%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}62.5%{-webkit-clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0)}75%{-webkit-clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0)}87.5%{-webkit-clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0)}100%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}}:host(.small)::after{content:"";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--ix-button-color, var(--theme-color-soft-text));animation:clipMask 3s linear infinite}:host(:not(.hide-track)):host(.small)::before{content:"";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--theme-color-ghost--hover)}:host(.primary)::after{border-color:var(--theme-color-dynamic)}:host(.primary)::before{border-color:var(--theme-color-ghost--hover)}:host(.medium){display:block;position:relative;width:2rem;height:2rem;min-width:2rem;min-height:2rem;max-width:2rem;max-height:2rem;border-radius:100%;position:relative;animation:rotate 2s linear infinite}:host(.medium) *,:host(.medium) *::after,:host(.medium) *::before{box-sizing:border-box}:host(.medium) ::-webkit-scrollbar-button{display:none}:host(.medium) ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host(.medium) ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host(.medium) ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host(.medium) ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host(.medium) ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host(.medium) ::-webkit-scrollbar-corner{display:none}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes clipMask{0%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}12.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}25%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}37.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}50%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}62.5%{-webkit-clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0)}75%{-webkit-clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0)}87.5%{-webkit-clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0)}100%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}}:host(.medium)::after{content:"";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--ix-button-color, var(--theme-color-soft-text));animation:clipMask 3s linear infinite}:host(:not(.hide-track)):host(.medium)::before{content:"";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:2px solid var(--theme-color-ghost--hover)}:host(.primary)::after{border-color:var(--theme-color-dynamic)}:host(.primary)::before{border-color:var(--theme-color-ghost--hover)}:host(.large){display:block;position:relative;width:6rem;height:6rem;min-width:6rem;min-height:6rem;max-width:6rem;max-height:6rem;border-radius:100%;position:relative;animation:rotate 2s linear infinite}:host(.large) *,:host(.large) *::after,:host(.large) *::before{box-sizing:border-box}:host(.large) ::-webkit-scrollbar-button{display:none}:host(.large) ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host(.large) ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host(.large) ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host(.large) ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host(.large) ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host(.large) ::-webkit-scrollbar-corner{display:none}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes clipMask{0%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}12.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}25%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}37.5%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}50%{-webkit-clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}62.5%{-webkit-clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0)}75%{-webkit-clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 0 100%, 0 0)}87.5%{-webkit-clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);clip-path:polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0)}100%{-webkit-clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}}:host(.large)::after{content:"";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:4px solid var(--ix-button-color, var(--theme-color-soft-text));animation:clipMask 3s linear infinite}:host(:not(.hide-track)):host(.large)::before{content:"";box-sizing:border-box;position:absolute;inset:8.33%;border-radius:100%;border:4px solid var(--theme-color-ghost--hover)}:host(.primary)::after{border-color:var(--theme-color-dynamic)}:host(.primary)::before{border-color:var(--theme-color-ghost--hover)}';const s=class{constructor(e){o(this,e);this.variant="secondary";this.size="medium";this.hideTrack=false}render(){return e(r,{class:{primary:this.variant==="primary","xx-small":this.size==="xx-small","x-small":this.size==="x-small",small:this.size==="small",medium:this.size==="medium",large:this.size==="large","hide-track":this.hideTrack}})}get hostElement(){return t(this)}};s.style=n;export{l as ix_icon_button,s as ix_spinner};
+//# sourceMappingURL=p-90efad65.entry.js.map

package/dist/siemens-ix/p-90efad65.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["iconButtonCss","IconButton","componentDidLoad","this","type","submitButton","document","createElement","style","display","tabIndex","hostElement","appendChild","submitButtonElement","dispatchFormEvents","click","getIconSizeClass","size","render","baseButtonProps","variant","outline","ghost","iconOnly","iconOval","oval","selected","disabled","loading","icon","iconColor","color","iconSize","onClick","extraClasses","h","Host","class","Object","assign","BaseIconButton","spinnerCss","Spinner","primary","small","medium","large","hideTrack"],"sources":["./src/components/icon-button/icon-button.scss?tag=ix-icon-button&encapsulation=shadow","./src/components/icon-button/icon-button.tsx","./src/components/spinner/spinner.scss?tag=ix-spinner&encapsulation=shadow","./src/components/spinner/spinner.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import './icon-button-mixin.scss';\n\n@include base-icon-button;\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\n\nexport type IconButtonVariant = ButtonVariant;\n\n@Component({\n  tag: 'ix-icon-button',\n  styleUrl: 'icon-button.scss',\n  shadow: true,\n})\nexport class IconButton {\n  @Element() hostElement: HTMLIxIconButtonElement;\n\n  /**\n   * Variant of button\n   */\n  @Prop() variant: IconButtonVariant = 'secondary';\n\n  /**\n   * Button outline\n   */\n  @Prop() outline: boolean;\n\n  /**\n   * Button invisible\n   */\n  @Prop() ghost: boolean;\n\n  /**\n   * Button in oval shape\n   */\n  @Prop() oval: boolean;\n\n  /**\n   * Icon name\n   */\n  @Prop() icon: string;\n\n  /**\n   * Size of icon in button\n   *\n   * @deprecated Only size 32 will be removed in 3.0.0\n   */\n  @Prop() size: '32' | '24' | '16' | '12' = '24';\n\n  /**\n   * Color of icon in  button\n   */\n  @Prop() color: string;\n\n  /**\n   * Disabled\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Type of the button\n   */\n  @Prop() type: 'button' | 'submit' = 'button';\n\n  /**\n   * Loading button\n   *\n   * @since 2.0.0\n   */\n  @Prop() loading = false;\n\n  /**\n   * Temp. workaround until stencil issue is fixed (https://github.com/ionic-team/stencil/issues/2284)\n   */\n  submitButtonElement: HTMLButtonElement;\n\n  componentDidLoad() {\n    if (this.type === 'submit') {\n      const submitButton = document.createElement('button');\n      submitButton.style.display = 'none';\n      submitButton.type = 'submit';\n      submitButton.tabIndex = -1;\n      this.hostElement.appendChild(submitButton);\n\n      this.submitButtonElement = submitButton;\n    }\n  }\n\n  dispatchFormEvents() {\n    if (this.type === 'submit' && this.submitButtonElement) {\n      this.submitButtonElement.click();\n    }\n  }\n\n  private getIconSizeClass() {\n    return {\n      'btn-icon-12': this.size === '12',\n      'btn-icon-16': this.size === '16',\n      'btn-icon-32': this.size === '32' || this.size === '24' || !this.size,\n    };\n  }\n\n  render() {\n    const baseButtonProps: BaseButtonProps = {\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      iconOnly: true,\n      iconOval: this.oval,\n      selected: false,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      iconColor: this.color,\n      iconSize: this.size,\n      loading: this.loading,\n      onClick: () => this.dispatchFormEvents(),\n      type: this.type,\n      extraClasses: this.getIconSizeClass(),\n    };\n\n    return (\n      <Host\n        class={{\n          ...this.getIconSizeClass(),\n          disabled: this.disabled || this.loading,\n        }}\n      >\n        <BaseIconButton {...baseButtonProps}></BaseIconButton>\n      </Host>\n    );\n  }\n}\n","/*\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\n@mixin ix-spinner($host-class: 'medium', $size: 2rem, $track-size: 4px) {\n  :host(.#{$host-class}) {\n    @include ix-component;\n    display: block;\n    position: relative;\n\n    width: $size;\n    height: $size;\n    min-width: $size;\n    min-height: $size;\n    max-width: $size;\n    max-height: $size;\n    border-radius: 100%;\n    position: relative;\n    animation: rotate 2s linear infinite;\n\n    @keyframes rotate {\n      100% {\n        transform: rotate(360deg);\n      }\n    }\n\n    @keyframes clipMask {\n      0% {\n        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n      }\n      12.5% {\n        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n      }\n      25% {\n        clip-path: polygon(\n          50% 50%,\n          0 0,\n          100% 0,\n          100% 100%,\n          100% 100%,\n          100% 100%\n        );\n      }\n      37.5% {\n        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n      }\n      50% {\n        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n      }\n      62.5% {\n        clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);\n      }\n      75% {\n        clip-path: polygon(\n          50% 50%,\n          100% 100%,\n          100% 100%,\n          100% 100%,\n          0 100%,\n          0 0\n        );\n      }\n      87.5% {\n        clip-path: polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);\n      }\n      100% {\n        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n      }\n    }\n  }\n\n  :host(.#{$host-class})::after {\n    content: '';\n    box-sizing: border-box;\n    position: absolute;\n    inset: 8.33%;\n    border-radius: 100%;\n    border: $track-size solid\n      var(--ix-button-color, var(--theme-color-soft-text));\n    animation: clipMask 3s linear infinite;\n  }\n\n  :host(:not(.hide-track)):host(.#{$host-class})::before {\n    content: '';\n    box-sizing: border-box;\n    position: absolute;\n    inset: 8.33%;\n    border-radius: 100%;\n    border: $track-size solid var(--theme-color-ghost--hover);\n  }\n\n  :host(.primary)::after {\n    border-color: var(--theme-color-dynamic);\n  }\n\n  :host(.primary)::before {\n    border-color: var(--theme-color-ghost--hover);\n  }\n}\n\n@include ix-spinner($host-class: 'xx-small', $size: 0.75rem, $track-size: 1px);\n@include ix-spinner($host-class: 'x-small', $size: 1.25rem, $track-size: 2px);\n@include ix-spinner($host-class: 'small', $size: 1.5rem, $track-size: 2px);\n@include ix-spinner($host-class: 'medium', $size: 2rem, $track-size: 2px);\n@include ix-spinner($host-class: 'large', $size: 6rem, $track-size: 4px);\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 } from '@stencil/core';\n\n@Component({\n  tag: 'ix-spinner',\n  styleUrl: 'spinner.scss',\n  shadow: true,\n})\nexport class Spinner {\n  @Element() hostElement!: HTMLIxSpinnerElement;\n\n  /**\n   * Variant of spinner\n   */\n  @Prop() variant: 'primary' | 'secondary' = 'secondary';\n\n  /**\n   * Size of spinner\n   */\n  @Prop() size: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' =\n    'medium';\n\n  /**\n   * @internal\n   */\n  @Prop() hideTrack = false;\n\n  render() {\n    return (\n      <Host\n        class={{\n          primary: this.variant === 'primary',\n          'xx-small': this.size === 'xx-small',\n          'x-small': this.size === 'x-small',\n          small: this.size === 'small',\n          medium: this.size === 'medium',\n          large: this.size === 'large',\n          'hide-track': this.hideTrack,\n        }}\n      ></Host>\n    );\n  }\n}\n"],"mappings":"qHAAA,MAAMA,EAAgB,05f,MCqBTC,EAAU,M,sCAMgB,Y,8FA2BK,K,mCAUvB,M,UAKiB,S,aAOlB,K,CAOlBC,mBACE,GAAIC,KAAKC,OAAS,SAAU,CAC1B,MAAMC,EAAeC,SAASC,cAAc,UAC5CF,EAAaG,MAAMC,QAAU,OAC7BJ,EAAaD,KAAO,SACpBC,EAAaK,UAAY,EACzBP,KAAKQ,YAAYC,YAAYP,GAE7BF,KAAKU,oBAAsBR,C,EAI/BS,qBACE,GAAIX,KAAKC,OAAS,UAAYD,KAAKU,oBAAqB,CACtDV,KAAKU,oBAAoBE,O,EAIrBC,mBACN,MAAO,CACL,cAAeb,KAAKc,OAAS,KAC7B,cAAed,KAAKc,OAAS,KAC7B,cAAed,KAAKc,OAAS,MAAQd,KAAKc,OAAS,OAASd,KAAKc,K,CAIrEC,SACE,MAAMC,EAAmC,CACvCC,QAASjB,KAAKiB,QACdC,QAASlB,KAAKkB,QACdC,MAAOnB,KAAKmB,MACZC,SAAU,KACVC,SAAUrB,KAAKsB,KACfC,SAAU,MACVC,SAAUxB,KAAKwB,UAAYxB,KAAKyB,QAChCC,KAAM1B,KAAK0B,KACXC,UAAW3B,KAAK4B,MAChBC,SAAU7B,KAAKc,KACfW,QAASzB,KAAKyB,QACdK,QAAS,IAAM9B,KAAKW,qBACpBV,KAAMD,KAAKC,KACX8B,aAAc/B,KAAKa,oBAGrB,OACEmB,EAACC,EAAI,CACHC,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GACApC,KAAKa,oBAAkB,CAC1BW,SAAUxB,KAAKwB,UAAYxB,KAAKyB,WAGlCO,EAACK,EAAcF,OAAAC,OAAA,GAAKpB,I,8CCtI5B,MAAMsB,EAAa,mib,MCgBNC,EAAO,M,sCAMyB,Y,UAMzC,S,eAKkB,K,CAEpBxB,SACE,OACEiB,EAACC,EAAI,CACHC,MAAO,CACLM,QAASxC,KAAKiB,UAAY,UAC1B,WAAYjB,KAAKc,OAAS,WAC1B,UAAWd,KAAKc,OAAS,UACzB2B,MAAOzC,KAAKc,OAAS,QACrB4B,OAAQ1C,KAAKc,OAAS,SACtB6B,MAAO3C,KAAKc,OAAS,QACrB,aAAcd,KAAK4C,Y"}

package/dist/siemens-ix/p-9848e4de.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["kpiCss","Kpi","getStateIcon","this","state","h","color","name","size","getTooltipText","tooltip","label","value","unit","concat","render","Host","title","tabindex","class","stacked","orientation","alarm","warning"],"sources":["./src/components/kpi/kpi.scss?tag=ix-kpi&encapsulation=shadow","./src/components/kpi/kpi.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'legacy/mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  flex-grow: 1;\n  height: $large-control-height;\n  border-radius: var(--theme-kpi--border-radius);\n  padding: 0.375rem $tiny-space;\n  min-width: 0;\n\n  span {\n    @include ellipsis;\n  }\n\n  .kpi-container {\n    display: flex;\n    height: 100%;\n    width: 100%;\n    border-block-end: 2px solid grey;\n\n    &.alarm {\n      border-block-end-color: var(--theme-color-alarm);\n    }\n\n    &.warning {\n      border-block-end-color: var(--theme-color-warning);\n    }\n\n    .kpi-label {\n      display: flex;\n      align-items: center;\n      color: var(--theme-kpi-display-label--color);\n      flex-grow: 1;\n      flex-shrink: 9999;\n\n      ix-icon {\n        margin-inline-end: $tiny-space;\n      }\n    }\n\n    .kpi-value-container {\n      display: flex;\n      align-items: flex-end;\n    }\n\n    .kpi-value {\n      @include text-xl;\n\n      color: var(--theme-kpi-display-value--color);\n    }\n\n    .kpi-unit {\n      margin-inline-start: $small-space;\n      color: var(--theme-kpi-display-units--color);\n    }\n\n    .kpi-label,\n    .kpi-unit {\n      margin-block-start: 0.125rem;\n    }\n  }\n\n  @include hover {\n    background-color: var(--theme-kpi-display--background--hover);\n  }\n\n  @include active {\n    background-color: var(--theme-kpi-display--background--active);\n  }\n\n  @include focus-visible {\n    outline: 1px solid var(--focus--border-color);\n  }\n}\n\n:host(.stacked) {\n  height: 3.75rem;\n\n  .kpi-container {\n    justify-content: center;\n    flex-wrap: wrap;\n\n    .kpi-label {\n      width: 100%;\n      justify-content: center;\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-kpi',\n  styleUrl: 'kpi.scss',\n  shadow: true,\n})\nexport class Kpi {\n  /**\n   *\n   */\n  @Prop() label: string;\n\n  /**\n   *\n   */\n  @Prop() value: string | number;\n\n  /**\n   *\n   */\n  @Prop() unit: string;\n\n  /**\n   *\n   */\n  @Prop() state: 'neutral' | 'warning' | 'alarm' = 'neutral';\n\n  /**\n   *\n   */\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  private getStateIcon() {\n    switch (this.state) {\n      case 'alarm':\n        return (\n          <ix-icon\n            color=\"kpi-display-icon--color\"\n            name=\"alarm\"\n            size=\"16\"\n          ></ix-icon>\n        );\n\n      case 'warning':\n        return (\n          <ix-icon\n            color=\"kpi-display-icon--color\"\n            name=\"warning\"\n            size=\"16\"\n          ></ix-icon>\n        );\n\n      default:\n        return '';\n    }\n  }\n\n  private getTooltipText() {\n    let tooltip = `${this.label}: ${this.value}`;\n\n    if (this.unit) {\n      tooltip = tooltip.concat(` ${this.unit}`);\n    }\n\n    return tooltip;\n  }\n\n  render() {\n    return (\n      <Host\n        title={this.getTooltipText()}\n        tabindex=\"1\"\n        class={{\n          stacked: this.orientation === 'vertical',\n        }}\n      >\n        <div\n          class={{\n            'kpi-container': true,\n            alarm: this.state === 'alarm',\n            warning: this.state === 'warning',\n          }}\n        >\n          <span class=\"kpi-label\">\n            {this.getStateIcon()}\n            <span class=\"kpi-label-text\">{this.label}</span>\n          </span>\n          <span class=\"kpi-value-container\">\n            <span class=\"kpi-value\">{this.value}</span>\n            {this.unit ? <span class=\"kpi-unit\">{this.unit}</span> : ''}\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAS,u+E,MCgBFC,EAAG,M,kGAmBmC,U,iBAKA,Y,CAEzCC,eACN,OAAQC,KAAKC,OACX,IAAK,QACH,OACEC,EAAA,WACEC,MAAM,0BACNC,KAAK,QACLC,KAAK,OAIX,IAAK,UACH,OACEH,EAAA,WACEC,MAAM,0BACNC,KAAK,UACLC,KAAK,OAIX,QACE,MAAO,G,CAILC,iBACN,IAAIC,EAAU,GAAGP,KAAKQ,UAAUR,KAAKS,QAErC,GAAIT,KAAKU,KAAM,CACbH,EAAUA,EAAQI,OAAO,IAAIX,KAAKU,O,CAGpC,OAAOH,C,CAGTK,SACE,OACEV,EAACW,EAAI,CACHC,MAAOd,KAAKM,iBACZS,SAAS,IACTC,MAAO,CACLC,QAASjB,KAAKkB,cAAgB,aAGhChB,EAAA,OACEc,MAAO,CACL,gBAAiB,KACjBG,MAAOnB,KAAKC,QAAU,QACtBmB,QAASpB,KAAKC,QAAU,YAG1BC,EAAA,QAAMc,MAAM,aACThB,KAAKD,eACNG,EAAA,QAAMc,MAAM,kBAAkBhB,KAAKQ,QAErCN,EAAA,QAAMc,MAAM,uBACVd,EAAA,QAAMc,MAAM,aAAahB,KAAKS,OAC7BT,KAAKU,KAAOR,EAAA,QAAMc,MAAM,YAAYhB,KAAKU,MAAe,K"}
+{"version":3,"names":["kpiCss","Kpi","getStateIcon","this","state","h","color","name","size","getTooltipText","tooltip","label","value","unit","concat","render","Host","title","tabindex","class","stacked","orientation","alarm","warning"],"sources":["./src/components/kpi/kpi.scss?tag=ix-kpi&encapsulation=shadow","./src/components/kpi/kpi.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'legacy/mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  flex-grow: 1;\n  height: $large-control-height;\n  border-radius: var(--theme-kpi--border-radius);\n  padding: 0.375rem $tiny-space;\n  min-width: 0;\n\n  span {\n    @include ellipsis;\n  }\n\n  .kpi-container {\n    display: flex;\n    height: 100%;\n    width: 100%;\n    border-block-end: 2px solid grey;\n\n    &.alarm {\n      border-block-end-color: var(--theme-color-alarm);\n    }\n\n    &.warning {\n      border-block-end-color: var(--theme-color-warning);\n    }\n\n    .kpi-label {\n      display: flex;\n      align-items: center;\n      color: var(--theme-kpi-display-label--color);\n      flex-grow: 1;\n      flex-shrink: 9999;\n\n      ix-icon {\n        margin-inline-end: $tiny-space;\n      }\n    }\n\n    .kpi-value-container {\n      display: flex;\n      align-items: flex-end;\n    }\n\n    .kpi-value {\n      @include text-xl;\n\n      color: var(--theme-kpi-display-value--color);\n    }\n\n    .kpi-unit {\n      margin-inline-start: $small-space;\n      color: var(--theme-kpi-display-units--color);\n    }\n\n    .kpi-label,\n    .kpi-unit {\n      margin-block-start: 0.125rem;\n    }\n  }\n\n  @include hover {\n    background-color: var(--theme-kpi-display--background--hover);\n  }\n\n  @include active {\n    background-color: var(--theme-kpi-display--background--active);\n  }\n\n  @include focus-visible {\n    outline: 1px solid var(--focus--border-color);\n  }\n}\n\n:host(.stacked) {\n  height: 3.75rem;\n\n  .kpi-container {\n    justify-content: center;\n    flex-wrap: wrap;\n\n    .kpi-label {\n      width: 100%;\n      justify-content: center;\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-kpi',\n  styleUrl: 'kpi.scss',\n  shadow: true,\n})\nexport class Kpi {\n  /**\n   *\n   */\n  @Prop() label: string;\n\n  /**\n   *\n   */\n  @Prop() value: string | number;\n\n  /**\n   *\n   */\n  @Prop() unit: string;\n\n  /**\n   *\n   */\n  @Prop() state: 'neutral' | 'warning' | 'alarm' = 'neutral';\n\n  /**\n   *\n   */\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  private getStateIcon() {\n    switch (this.state) {\n      case 'alarm':\n        return (\n          <ix-icon\n            color=\"kpi-display-icon--color\"\n            name={'alarm'}\n            size=\"16\"\n          ></ix-icon>\n        );\n\n      case 'warning':\n        return (\n          <ix-icon\n            color=\"kpi-display-icon--color\"\n            name={'warning'}\n            size=\"16\"\n          ></ix-icon>\n        );\n\n      default:\n        return '';\n    }\n  }\n\n  private getTooltipText() {\n    let tooltip = `${this.label}: ${this.value}`;\n\n    if (this.unit) {\n      tooltip = tooltip.concat(` ${this.unit}`);\n    }\n\n    return tooltip;\n  }\n\n  render() {\n    return (\n      <Host\n        title={this.getTooltipText()}\n        tabindex=\"1\"\n        class={{\n          stacked: this.orientation === 'vertical',\n        }}\n      >\n        <div\n          class={{\n            'kpi-container': true,\n            alarm: this.state === 'alarm',\n            warning: this.state === 'warning',\n          }}\n        >\n          <span class=\"kpi-label\">\n            {this.getStateIcon()}\n            <span class=\"kpi-label-text\">{this.label}</span>\n          </span>\n          <span class=\"kpi-value-container\">\n            <span class=\"kpi-value\">{this.value}</span>\n            {this.unit ? <span class=\"kpi-unit\">{this.unit}</span> : ''}\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAS,u+E,MCgBFC,EAAG,M,kGAmBmC,U,iBAKA,Y,CAEzCC,eACN,OAAQC,KAAKC,OACX,IAAK,QACH,OACEC,EAAA,WACEC,MAAM,0BACNC,KAAM,QACNC,KAAK,OAIX,IAAK,UACH,OACEH,EAAA,WACEC,MAAM,0BACNC,KAAM,UACNC,KAAK,OAIX,QACE,MAAO,G,CAILC,iBACN,IAAIC,EAAU,GAAGP,KAAKQ,UAAUR,KAAKS,QAErC,GAAIT,KAAKU,KAAM,CACbH,EAAUA,EAAQI,OAAO,IAAIX,KAAKU,O,CAGpC,OAAOH,C,CAGTK,SACE,OACEV,EAACW,EAAI,CACHC,MAAOd,KAAKM,iBACZS,SAAS,IACTC,MAAO,CACLC,QAASjB,KAAKkB,cAAgB,aAGhChB,EAAA,OACEc,MAAO,CACL,gBAAiB,KACjBG,MAAOnB,KAAKC,QAAU,QACtBmB,QAASpB,KAAKC,QAAU,YAG1BC,EAAA,QAAMc,MAAM,aACThB,KAAKD,eACNG,EAAA,QAAMc,MAAM,kBAAkBhB,KAAKQ,QAErCN,EAAA,QAAMc,MAAM,uBACVd,EAAA,QAAMc,MAAM,aAAahB,KAAKS,OAC7BT,KAAKU,KAAOR,EAAA,QAAMc,MAAM,YAAYhB,KAAKU,MAAe,K"}

package/dist/siemens-ix/p-9cd93c03.js

@@ -0,0 +1,2 @@
+async function n(){if(typeof window==="undefined"){return}const n=window.customElements.get("ix-icon");if(n){return}console.warn("ix-icon web component not loaded. Using local fallback version");const o=await import("./p-bc811c4b.js").then((function(n){return n.i}));await o.defineCustomElements()}async function o(){await n()}const i=o;export{i as g};
+//# sourceMappingURL=p-9cd93c03.js.map

package/dist/siemens-ix/p-9cd93c03.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["async","setupIcons","window","iconComponent","customElements","get","console","warn","ixIcons","import","then","n","i","defineCustomElements","globalScripts","appGlobalScript"],"sources":["./src/setup.ts","@stencil/core/internal/app-globals"],"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\nasync function setupIcons() {\n  if (typeof window === 'undefined') {\n    return;\n  }\n\n  const iconComponent = window.customElements.get('ix-icon');\n  if (iconComponent) {\n    return;\n  }\n\n  console.warn(\n    'ix-icon web component not loaded. Using local fallback version'\n  );\n\n  const ixIcons = await import('@siemens/ix-icons/loader');\n  await ixIcons.defineCustomElements();\n}\n\nexport default async function () {\n  await setupIcons();\n}\n","import appGlobalScript from '/__w/ix/ix/packages/core/src/setup.ts';\nexport const globalScripts = appGlobalScript;\n"],"mappings":"AASAA,eAAAC,IACE,UAAWC,SAAW,aACpB,M,CAGF,MAAAC,EAAAD,OAAAE,eAAAC,IAAA,WACA,GAAIF,EAAe,CACjB,M,CAGFG,QAAAC,KAAA,kEAIA,MAAMC,QAAgBC,OAAO,mBAA0BC,MAAA,SAAAC,GAAA,OAAAA,EAAAC,CAAA,UACjDJ,EAAQK,sBAChB,C,yBAGQZ,GACR,CC5BY,MAACa,EAAgBC,S"}

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

@@ -0,0 +1,2 @@
+import{r as t,h as e,H as i,g as o}from"./p-76a509c7.js";import{u as r,A as a}from"./p-85f39bd4.js";import{a as s,m as n}from"./p-5d172daa.js";import"./p-9ee41861.js";import"./p-20e12c7e.js";const h=":host{display:flex;position:relative;width:100%;height:100%;flex-direction:column}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host ix-application-header{z-index:calc(var(--theme-z-index-sticky) + 1)}:host .logo-wrapper{display:contents}:host .content{display:flex;height:100%;width:100%;position:relative;margin-left:3.25rem;overflow:auto}:host .navigation-content{display:flex;position:relative;flex-direction:row;height:calc(100% - 2.75rem);width:100%}:host(.hide-header) .navigation-content,:host(.hide-header) .content{height:100%}:host(.breakpoint-lg) .content{margin-left:0rem}:host(.breakpoint-sm) .content{margin-left:0px;width:100%}";const l=class{constructor(e){t(this,e);this.applicationName=undefined;this.hideHeader=false;this.forceBreakpoint=undefined;this.breakpoints=["sm","md","lg"];this.breakpoint="lg"}onHideHeaderChange(){var t;(t=this.contextProvider)===null||t===void 0?void 0:t.emit({hideHeader:this.hideHeader,host:"basic-navigation"});this.breakpoint=s.breakpoint}forceLayoutChange(t){if(!t){s.enableBreakpointDetection();return}s.disableBreakpointDetection();s.setBreakpoint(t)}onBreakpointsChange(t){s.setBreakpoints(t)}get menu(){return this.hostElement.querySelector("ix-menu")}onContentClick(){var t;if(n.isPinned){return}(t=this.menu)===null||t===void 0?void 0:t.toggleMenu(false)}componentWillLoad(){s.setBreakpoints(this.breakpoints);this.contextProvider=r(this.hostElement,a,{hideHeader:this.hideHeader,host:"basic-navigation"});this.modeDisposable=s.onChange.on((t=>{this.breakpoint=t}));this.breakpoint=s.breakpoint;if(this.forceBreakpoint){this.forceLayoutChange(this.forceBreakpoint)}}componentDidRender(){if(this.menu){this.menu.applicationName=this.applicationName}}disconnectedCallback(){var t;(t=this.modeDisposable)===null||t===void 0?void 0:t.dispose()}render(){return e(i,{"data-role":"",class:{"hide-header":this.hideHeader,[`breakpoint-${this.breakpoint}`]:true}},!this.hideHeader?e("ix-application-header",{name:this.applicationName},e("slot",{name:"logo",slot:"logo"})):null,e("div",{class:"navigation-content"},e("slot",{name:"menu"}),e("div",{class:"content",onClick:()=>this.onContentClick()},e("slot",null))))}get hostElement(){return o(this)}static get watchers(){return{hideHeader:["onHideHeaderChange"],breakpoints:["onBreakpointsChange"]}}};l.style=h;export{l as ix_basic_navigation};
+//# sourceMappingURL=p-9e0af149.entry.js.map

package/dist/siemens-ix/p-9e0af149.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["basicNavigationCss","BasicNavigation","onHideHeaderChange","_a","this","contextProvider","emit","hideHeader","host","breakpoint","applicationLayoutService","forceLayoutChange","newMode","enableBreakpointDetection","disableBreakpointDetection","setBreakpoint","onBreakpointsChange","breakpoints","setBreakpoints","menu","hostElement","querySelector","onContentClick","menuController","isPinned","toggleMenu","componentWillLoad","useContextProvider","ApplicationLayoutContext","modeDisposable","onChange","on","mode","forceBreakpoint","componentDidRender","applicationName","disconnectedCallback","dispose","render","h","Host","class","name","slot","onClick"],"sources":["./src/components/basic-navigation/basic-navigation.scss?tag=ix-basic-navigation&encapsulation=shadow","./src/components/basic-navigation/basic-navigation.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\n:host {\n  @include ix-component;\n\n  display: flex;\n  position: relative;\n  width: 100%;\n  height: 100%;\n\n  flex-direction: column;\n\n  ix-application-header {\n    z-index: calc(var(--theme-z-index-sticky) + 1);\n  }\n\n  .logo-wrapper {\n    display: contents;\n  }\n\n  .content {\n    display: flex;\n    height: 100%;\n    width: 100%;\n    position: relative;\n    margin-left: 3.25rem;\n    overflow: auto;\n  }\n\n  .navigation-content {\n    display: flex;\n    position: relative;\n\n    flex-direction: row;\n\n    height: calc(100% - 2.75rem);\n    width: 100%;\n  }\n}\n\n:host(.hide-header) {\n  .navigation-content,\n  .content {\n    height: 100%;\n  }\n}\n\n:host(.breakpoint-lg) {\n  .content {\n    margin-left: 0rem;\n  }\n}\n\n:host(.breakpoint-sm) {\n  .content {\n    margin-left: 0px;\n    width: 100%;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { applicationLayoutService } from '../utils/application-layout/service';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { ContextProvider, useContextProvider } from '../utils/context';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { Disposable } from '../utils/typed-event';\n\n@Component({\n  tag: 'ix-basic-navigation',\n  styleUrl: 'basic-navigation.scss',\n  shadow: true,\n})\nexport class BasicNavigation {\n  @Element() hostElement: HTMLIxBasicNavigationElement;\n\n  /**\n   * Application name\n   */\n  @Prop() applicationName: string;\n\n  /**\n   * Hide application header. Will disable responsive feature of basic navigation.\n   */\n  @Prop() hideHeader = false;\n  @Watch('hideHeader')\n  onHideHeaderChange() {\n    this.contextProvider?.emit({\n      hideHeader: this.hideHeader,\n      host: 'basic-navigation',\n    });\n\n    this.breakpoint = applicationLayoutService.breakpoint;\n  }\n\n  /**\n   * Change the responsive layout of the menu structure\n   */\n  @Prop() forceBreakpoint: Breakpoint | undefined;\n  forceLayoutChange(newMode: Breakpoint | undefined) {\n    if (!newMode) {\n      applicationLayoutService.enableBreakpointDetection();\n      return;\n    }\n\n    applicationLayoutService.disableBreakpointDetection();\n    applicationLayoutService.setBreakpoint(newMode);\n  }\n\n  /**\n   * Supported layouts\n   */\n  @Prop() breakpoints: Breakpoint[] = ['sm', 'md', 'lg'];\n  @Watch('breakpoints')\n  onBreakpointsChange(breakpoints: Breakpoint[]) {\n    applicationLayoutService.setBreakpoints(breakpoints);\n  }\n\n  @State() breakpoint: Breakpoint = 'lg';\n\n  get menu(): HTMLIxMenuElement | null {\n    return this.hostElement.querySelector('ix-menu');\n  }\n\n  private modeDisposable: Disposable;\n  private contextProvider: ContextProvider<typeof ApplicationLayoutContext>;\n\n  private onContentClick() {\n    if (menuController.isPinned) {\n      return;\n    }\n    this.menu?.toggleMenu(false);\n  }\n\n  componentWillLoad() {\n    applicationLayoutService.setBreakpoints(this.breakpoints);\n\n    this.contextProvider = useContextProvider(\n      this.hostElement,\n      ApplicationLayoutContext,\n      {\n        hideHeader: this.hideHeader,\n        host: 'basic-navigation',\n      }\n    );\n\n    this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n      this.breakpoint = mode;\n    });\n    this.breakpoint = applicationLayoutService.breakpoint;\n\n    if (this.forceBreakpoint) {\n      this.forceLayoutChange(this.forceBreakpoint);\n    }\n  }\n\n  componentDidRender() {\n    if (this.menu) {\n      this.menu.applicationName = this.applicationName;\n    }\n  }\n\n  disconnectedCallback() {\n    this.modeDisposable?.dispose();\n  }\n\n  render() {\n    return (\n      <Host\n        data-role=\"\"\n        class={{\n          'hide-header': this.hideHeader,\n          [`breakpoint-${this.breakpoint}`]: true,\n        }}\n      >\n        {!this.hideHeader ? (\n          <ix-application-header name={this.applicationName}>\n            <slot name=\"logo\" slot=\"logo\"></slot>\n          </ix-application-header>\n        ) : null}\n        <div class=\"navigation-content\">\n          <slot name=\"menu\"></slot>\n          <div class=\"content\" onClick={() => this.onContentClick()}>\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"+LAAA,MAAMA,EAAqB,qrC,MCsBdC,EAAe,M,wEAWL,M,gDA4Be,CAAC,KAAM,KAAM,M,gBAMf,I,CAhClCC,qB,OACEC,EAAAC,KAAKC,mBAAe,MAAAF,SAAA,SAAAA,EAAEG,KAAK,CACzBC,WAAYH,KAAKG,WACjBC,KAAM,qBAGRJ,KAAKK,WAAaC,EAAyBD,U,CAO7CE,kBAAkBC,GAChB,IAAKA,EAAS,CACZF,EAAyBG,4BACzB,M,CAGFH,EAAyBI,6BACzBJ,EAAyBK,cAAcH,E,CAQzCI,oBAAoBC,GAClBP,EAAyBQ,eAAeD,E,CAKtCE,WACF,OAAOf,KAAKgB,YAAYC,cAAc,U,CAMhCC,iB,MACN,GAAIC,EAAeC,SAAU,CAC3B,M,EAEFrB,EAAAC,KAAKe,QAAI,MAAAhB,SAAA,SAAAA,EAAEsB,WAAW,M,CAGxBC,oBACEhB,EAAyBQ,eAAed,KAAKa,aAE7Cb,KAAKC,gBAAkBsB,EACrBvB,KAAKgB,YACLQ,EACA,CACErB,WAAYH,KAAKG,WACjBC,KAAM,qBAIVJ,KAAKyB,eAAiBnB,EAAyBoB,SAASC,IAAIC,IAC1D5B,KAAKK,WAAauB,CAAI,IAExB5B,KAAKK,WAAaC,EAAyBD,WAE3C,GAAIL,KAAK6B,gBAAiB,CACxB7B,KAAKO,kBAAkBP,KAAK6B,gB,EAIhCC,qBACE,GAAI9B,KAAKe,KAAM,CACbf,KAAKe,KAAKgB,gBAAkB/B,KAAK+B,e,EAIrCC,uB,OACEjC,EAAAC,KAAKyB,kBAAc,MAAA1B,SAAA,SAAAA,EAAEkC,S,CAGvBC,SACE,OACEC,EAACC,EAAI,aACO,GACVC,MAAO,CACL,cAAerC,KAAKG,WACpB,CAAC,cAAcH,KAAKK,cAAe,QAGnCL,KAAKG,WACLgC,EAAA,yBAAuBG,KAAMtC,KAAK+B,iBAChCI,EAAA,QAAMG,KAAK,OAAOC,KAAK,UAEvB,KACJJ,EAAA,OAAKE,MAAM,sBACTF,EAAA,QAAMG,KAAK,SACXH,EAAA,OAAKE,MAAM,UAAUG,QAAS,IAAMxC,KAAKkB,kBACvCiB,EAAA,e"}

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

@@ -0,0 +1,2 @@
+import{r,h as o,H as t,g as a}from"./p-76a509c7.js";const e=":host{display:flex;position:relative;flex-direction:column;align-items:flex-start;align-self:flex-start;overflow:hidden;width:20rem;border:1px solid var(--ix-card-border-color, var(--theme-color-soft-bdr));border-radius:var(--theme-default-border-radius)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .card-content{display:block;position:relative;flex-shrink:0;flex-grow:1;width:100%;height:calc(100% - 2rem);background-color:var(--ix-card-background, transparent);border-top-left-radius:var(--theme-default-border-radius);border-top-right-radius:var(--theme-default-border-radius)}:host .card-footer{display:flex;position:relative;width:100%}:host(.card-insight){--ix-card-background:transparent;--ix-card-border-color:var(--theme-color-soft-bdr)}:host(.card-notification){--ix-card-background:var(--theme-color-component-1)}:host(.card-alarm){--ix-card-background:var(--theme-color-alarm);color:var(--theme-color-alarm--contrast)}:host(.card-critical){--ix-card-background:var(--theme-color-critical);color:var(--theme-color-critical--contrast)}:host(.card-warning){--ix-card-background:var(--theme-color-warning);color:var(--theme-color-warning--contrast)}:host(.card-success){--ix-card-background:var(--theme-color-success);color:var(--theme-color-success--contrast)}:host(.card-info){--ix-card-background:var(--theme-color-info);color:var(--theme-color-info--contrast)}:host(.card-neutral){--ix-card-background:var(--theme-color-neutral);color:var(--theme-color-neutral--contrast)}:host(.card-primary){--ix-card-background:var(--theme-color-primary);color:var(--theme-color-neutral--contrast)}:host(:not(.card-insight)){--ix-card-border-color:transparent}";const c=class{constructor(o){r(this,o);this.variant="insight"}render(){return o(t,{class:`card-${this.variant}`},o("div",{class:"card-content"},o("slot",null)),o("div",{class:"card-footer"},o("slot",{name:"card-accordion"})))}get hostElement(){return a(this)}};c.style=e;const s=":host{display:flex;position:relative;flex-direction:column;align-items:flex-start;gap:0.5rem;padding:1rem;height:100%}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}";const l=class{constructor(o){r(this,o)}render(){return o(t,null,o("slot",null))}};l.style=s;export{c as ix_card,l as ix_card_content};
+//# sourceMappingURL=p-ada4a328.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["cardCss","Card","render","h","Host","class","this","variant","name","cardContentCss","CardContent"],"sources":["./src/components/card/card.scss?tag=ix-card&encapsulation=shadow","./src/components/card/card.tsx","./src/components/card-content/card-content.scss?tag=ix-card-content&encapsulation=shadow","./src/components/card-content/card-content.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  display: flex;\n  position: relative;\n  flex-direction: column;\n  align-items: flex-start;\n  align-self: flex-start;\n  overflow: hidden;\n\n  width: 20rem;\n\n  border: 1px solid var(--ix-card-border-color, var(--theme-color-soft-bdr));\n  border-radius: var(--theme-default-border-radius);\n\n  .card-content {\n    display: block;\n    position: relative;\n    flex-shrink: 0;\n    flex-grow: 1;\n    width: 100%;\n    height: calc(100% - 2rem);\n    background-color: var(--ix-card-background, transparent);\n    border-top-left-radius: var(--theme-default-border-radius);\n    border-top-right-radius: var(--theme-default-border-radius);\n  }\n\n  .card-footer {\n    display: flex;\n    position: relative;\n    width: 100%;\n  }\n}\n\n:host(.card-insight) {\n  --ix-card-background: transparent;\n  --ix-card-border-color: var(--theme-color-soft-bdr);\n}\n\n:host(.card-notification) {\n  --ix-card-background: var(--theme-color-component-1);\n}\n\n:host(.card-alarm) {\n  --ix-card-background: var(--theme-color-alarm);\n  color: var(--theme-color-alarm--contrast);\n}\n\n:host(.card-critical) {\n  --ix-card-background: var(--theme-color-critical);\n  color: var(--theme-color-critical--contrast);\n}\n\n:host(.card-warning) {\n  --ix-card-background: var(--theme-color-warning);\n  color: var(--theme-color-warning--contrast);\n}\n\n:host(.card-success) {\n  --ix-card-background: var(--theme-color-success);\n  color: var(--theme-color-success--contrast);\n}\n\n:host(.card-info) {\n  --ix-card-background: var(--theme-color-info);\n  color: var(--theme-color-info--contrast);\n}\n\n:host(.card-neutral) {\n  --ix-card-background: var(--theme-color-neutral);\n  color: var(--theme-color-neutral--contrast);\n}\n\n:host(.card-primary) {\n  --ix-card-background: var(--theme-color-primary);\n  color: var(--theme-color-neutral--contrast);\n}\n\n:host(:not(.card-insight)) {\n  --ix-card-border-color: transparent;\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nexport type CardVariant =\n  | 'insight'\n  | 'notification'\n  | 'alarm'\n  | 'critical'\n  | 'warning'\n  | 'info'\n  | 'neutral'\n  | 'success'\n  | 'primary';\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card',\n  styleUrl: 'card.scss',\n  shadow: true,\n})\nexport class Card {\n  @Element() hostElement: HTMLIxCardElement;\n\n  /**\n   * Card variant\n   */\n  @Prop() variant: CardVariant = 'insight';\n\n  render() {\n    return (\n      <Host class={`card-${this.variant}`}>\n        <div class=\"card-content\">\n          <slot></slot>\n        </div>\n        <div class=\"card-footer\">\n          <slot name=\"card-accordion\"></slot>\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@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 0.5rem;\n  padding: 1rem;\n  height: 100%;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-content',\n  styleUrl: 'card-content.scss',\n  shadow: true,\n})\nexport class CardContent {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oDAAA,MAAMA,EAAU,mrE,MCqBHC,EAAI,M,sCAMgB,S,CAE/BC,SACE,OACEC,EAACC,EAAI,CAACC,MAAO,QAAQC,KAAKC,WACxBJ,EAAA,OAAKE,MAAM,gBACTF,EAAA,cAEFA,EAAA,OAAKE,MAAM,eACTF,EAAA,QAAMK,KAAK,oB,8CCpCrB,MAAMC,EAAiB,qtB,MCUVC,EAAW,M,yBACtBR,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,a"}