@siemens/ix 2.0.0-beta.1 → 2.0.0

package/dist/siemens-ix/p-14621fbd.entry.js

@@ -1,2 +0,0 @@
-import{r as o,c as e,h as r,H as t,g as i}from"./p-76a509c7.js";import{B as n}from"./p-1b9b19e6.js";import{a as s}from"./p-0b71cde4.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);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 d=class{constructor(r){o(this,r);this.pressedChange=e(this,"pressedChange",7);this.variant="secondary";this.outline=false;this.ghost=false;this.icon=undefined;this.pressed=false;this.size="24";this.disabled=false;this.loading=false}isIllegalToggleButtonConfig(){return this.variant==="primary"&&(this.outline||this.ghost)}logIllegalConfig(){console.warn('iX toggle button with illegal configuration detected. Variant "primary" can only be combined with "outline" or "ghost".')}onVariantChange(){if(this.isIllegalToggleButtonConfig()){this.logIllegalConfig()}}onGhostChange(){this.onVariantChange()}onOutlineChange(){this.onVariantChange()}componentDidLoad(){this.onVariantChange()}dispatchPressedChange(){this.pressedChange.emit(!this.pressed)}getIconSizeClass(){return{"btn-icon-12":this.size==="12","btn-icon-16":this.size==="16","btn-icon-32":this.size==="24"}}render(){const o={variant:this.variant,outline:this.outline,ghost:this.ghost,iconOnly:true,iconOval:false,selected:this.pressed,disabled:this.disabled||this.loading,icon:this.icon,iconSize:this.size,loading:this.loading,onClick:()=>this.dispatchPressedChange(),type:"button",ariaAttributes:{"aria-pressed":s(this.pressed)},extraClasses:Object.assign({"icon-button":true},this.getIconSizeClass())};console.log(o,this.disabled,this.loading);return r(t,{class:Object.assign(Object.assign({},this.getIconSizeClass()),{disabled:this.disabled||this.loading})},r(n,Object.assign({},o)))}get hostElement(){return i(this)}static get watchers(){return{variant:["onVariantChange"],ghost:["onGhostChange"],outline:["onOutlineChange"]}}};d.style=a;export{d as ix_icon_toggle_button};
-//# sourceMappingURL=p-14621fbd.entry.js.map

package/dist/siemens-ix/p-14621fbd.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["iconToggleButtonCss","IconToggleButton","isIllegalToggleButtonConfig","this","variant","outline","ghost","logIllegalConfig","console","warn","onVariantChange","onGhostChange","onOutlineChange","componentDidLoad","dispatchPressedChange","pressedChange","emit","pressed","getIconSizeClass","size","render","baseButtonProps","iconOnly","iconOval","selected","disabled","loading","icon","iconSize","onClick","type","ariaAttributes","a11yBoolean","extraClasses","Object","assign","log","h","Host","class","BaseIconButton"],"sources":["./src/components/icon-toggle-button/icon-toggle-button.scss?tag=ix-icon-toggle-button&encapsulation=shadow","./src/components/icon-toggle-button/icon-toggle-button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import '../icon-button/icon-button-mixin.scss';\n\n@include base-icon-button;\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\nimport { a11yBoolean } from '../utils/a11y';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-icon-toggle-button',\n  shadow: true,\n  styleUrl: './icon-toggle-button.scss',\n})\nexport class IconToggleButton {\n  /**\n   * Button variant.\n   * Important: Variant 'primary' can only be combined with either outline or ghost.\n   */\n  @Prop() variant: ButtonVariant = 'secondary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Icon name\n   */\n  @Prop() icon: string;\n\n  /**\n   * Show button as pressed\n   */\n  @Prop() pressed = false;\n\n  /**\n   * Size of icon in button\n   */\n  @Prop() size: '24' | '16' | '12' = '24';\n\n  /**\n   * Disable the button\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Loading button\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * Pressed change event\n   */\n  @Event() pressedChange: EventEmitter<boolean>;\n\n  @Element() hostElement: HTMLIxIconToggleButtonElement;\n\n  private isIllegalToggleButtonConfig() {\n    return this.variant === 'primary' && (this.outline || this.ghost);\n  }\n\n  private logIllegalConfig() {\n    console.warn(\n      'iX toggle button with illegal configuration detected. Variant \"primary\" can only be combined with \"outline\" or \"ghost\".'\n    );\n  }\n\n  @Watch('variant')\n  onVariantChange() {\n    if (this.isIllegalToggleButtonConfig()) {\n      this.logIllegalConfig();\n    }\n  }\n\n  @Watch('ghost')\n  onGhostChange() {\n    this.onVariantChange();\n  }\n\n  @Watch('outline')\n  onOutlineChange() {\n    this.onVariantChange();\n  }\n\n  componentDidLoad() {\n    this.onVariantChange();\n  }\n\n  private dispatchPressedChange() {\n    this.pressedChange.emit(!this.pressed);\n  }\n\n  private getIconSizeClass() {\n    return {\n      'btn-icon-12': this.size === '12',\n      'btn-icon-16': this.size === '16',\n      'btn-icon-32': this.size === '24',\n    };\n  }\n\n  render() {\n    const baseButtonProps: BaseButtonProps = {\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      iconOnly: true,\n      iconOval: false,\n      selected: this.pressed,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      iconSize: this.size,\n      loading: this.loading,\n      onClick: () => this.dispatchPressedChange(),\n      type: 'button',\n      ariaAttributes: {\n        'aria-pressed': a11yBoolean(this.pressed),\n      },\n      extraClasses: {\n        'icon-button': true,\n        ...this.getIconSizeClass(),\n      },\n    };\n    console.log(baseButtonProps, this.disabled, this.loading);\n\n    return (\n      <Host\n        class={{\n          ...this.getIconSizeClass(),\n          disabled: this.disabled || this.loading,\n        }}\n      >\n        <BaseIconButton {...baseButtonProps}></BaseIconButton>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gKAAA,MAAMA,EAAsB,44f,MCgCfC,EAAgB,M,mFAKM,Y,aAKf,M,WAKF,M,iCAUE,M,UAKiB,K,cAKC,M,aAKT,K,CASnBC,8BACN,OAAOC,KAAKC,UAAY,YAAcD,KAAKE,SAAWF,KAAKG,M,CAGrDC,mBACNC,QAAQC,KACN,0H,CAKJC,kBACE,GAAIP,KAAKD,8BAA+B,CACtCC,KAAKI,kB,EAKTI,gBACER,KAAKO,iB,CAIPE,kBACET,KAAKO,iB,CAGPG,mBACEV,KAAKO,iB,CAGCI,wBACNX,KAAKY,cAAcC,MAAMb,KAAKc,Q,CAGxBC,mBACN,MAAO,CACL,cAAef,KAAKgB,OAAS,KAC7B,cAAehB,KAAKgB,OAAS,KAC7B,cAAehB,KAAKgB,OAAS,K,CAIjCC,SACE,MAAMC,EAAmC,CACvCjB,QAASD,KAAKC,QACdC,QAASF,KAAKE,QACdC,MAAOH,KAAKG,MACZgB,SAAU,KACVC,SAAU,MACVC,SAAUrB,KAAKc,QACfQ,SAAUtB,KAAKsB,UAAYtB,KAAKuB,QAChCC,KAAMxB,KAAKwB,KACXC,SAAUzB,KAAKgB,KACfO,QAASvB,KAAKuB,QACdG,QAAS,IAAM1B,KAAKW,wBACpBgB,KAAM,SACNC,eAAgB,CACd,eAAgBC,EAAY7B,KAAKc,UAEnCgB,aAAYC,OAAAC,OAAA,CACV,cAAe,MACZhC,KAAKe,qBAGZV,QAAQ4B,IAAIf,EAAiBlB,KAAKsB,SAAUtB,KAAKuB,SAEjD,OACEW,EAACC,EAAI,CACHC,MAAKL,OAAAC,OAAAD,OAAAC,OAAA,GACAhC,KAAKe,oBAAkB,CAC1BO,SAAUtB,KAAKsB,UAAYtB,KAAKuB,WAGlCW,EAACG,EAAcN,OAAAC,OAAA,GAAKd,I"}

package/dist/siemens-ix/p-1b705d7b.js

@@ -1,2 +0,0 @@
-const n={sm:"(min-width: 36em)",md:"(min-width: 48em)",lg:"(min-width: 62em)"};const i=i=>{if(typeof window!=="undefined"&&window.matchMedia){const e=n[i];return window.matchMedia(e).matches}return false};export{i as m};
-//# sourceMappingURL=p-1b705d7b.js.map

package/dist/siemens-ix/p-1b705d7b.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["mediaQueries","sm","md","lg","matchBreakpoint","breakpoint","window","matchMedia","mediaQuery","matches"],"sources":["./src/components/utils/breakpoints.ts"],"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// Implementation of scss breakpoints mixins/_break-points.scss\nconst mediaQueries = {\n  sm: '(min-width: 36em)',\n  md: '(min-width: 48em)',\n  lg: '(min-width: 62em)',\n} as const;\n\nexport type Breakpoint = keyof typeof mediaQueries;\n\nexport const matchBreakpoint = (breakpoint: Breakpoint) => {\n  if (typeof window !== 'undefined' && (window as any).matchMedia) {\n    const mediaQuery = mediaQueries[breakpoint];\n    return window.matchMedia(mediaQuery).matches;\n  }\n  return false;\n};\n"],"mappings":"AAUA,MAAMA,EAAe,CACnBC,GAAI,oBACJC,GAAI,oBACJC,GAAI,qB,MAKOC,EAAmBC,IAC9B,UAAWC,SAAW,aAAgBA,OAAeC,WAAY,CAC/D,MAAMC,EAAaR,EAAaK,GAChC,OAAOC,OAAOC,WAAWC,GAAYC,O,CAEvC,OAAO,KAAK,S"}

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

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as r,F as s,H as o,g as i}from"./p-76a509c7.js";import{c as a}from"./p-c0454c9a.js";const l=":host{}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .step{display:flex;flex-direction:column;align-items:center;background-color:var(--theme-workflow-step--background);border-radius:var(--theme-workflow--border-radius);width:auto;padding:1.125rem 0 0.5rem 0;height:4rem;width:12.75rem}:host .step .wrapper{display:flex;width:100%;align-items:center;justify-content:center;position:relative}:host .step .wrapper .line{width:100%;height:0.125rem;background-color:var(--theme-workflow-step-icon-default--color)}:host .step .wrapper .line.first,:host .step .wrapper .line.last{width:50%;margin:0 0 0 auto}:host .step .wrapper .line.last{margin:0 auto 0 0}:host .step .wrapper .line.single{width:0}:host .step .wrapper .line.selected{background-color:var(--theme-workflow-step-icon-default--color--selected)}:host .step .wrapper .line.done{background-color:var(--theme-workflow-step-icon-done--color)}:host .step .wrapper .line.done.selected{background-color:var(--theme-workflow-step-icon-done--color--selected)}:host .step .wrapper .line.warning{background-color:var(--theme-color-warning)}:host .step .wrapper .line.success{background-color:var(--theme-color-success)}:host .step .wrapper .line.error{background-color:var(--theme-color-alarm)}:host .step .wrapper .iconWrapper{display:flex;align-items:center;justify-content:center;position:absolute}:host .step .wrapper .iconWrapper .absolute{position:absolute}:host .step .text{margin-top:1rem;width:auto;padding:0 0.5rem}:host .step.vertical{flex-direction:row;padding:0}:host .step.vertical .wrapper{width:auto;padding-left:1.125rem;height:4rem}:host .step.vertical .wrapper .line{width:0.125rem;height:100%}:host .step.vertical .wrapper .line.first,:host .step.vertical .wrapper .line.last{height:50%;margin:auto 0 0 0}:host .step.vertical .wrapper .line.last{margin:0 0 auto 0}:host .step.vertical .wrapper .line.single{width:0}:host .step.vertical .text{margin-top:0;margin-left:1rem;padding:0}:host .step.clickable:hover{background-color:var(--theme-workflow-step--background--hover)}:host .step.clickable:active{background-color:var(--theme-workflow-step--background--active)}:host .step:focus-visible{outline:1px solid var(--focus--border-color);border-radius:0}:host .step.selected{background-color:var(--theme-workflow-step--background--selected)}:host .step.disabled{background-color:var(--theme-workflow-step--background--disabled)}:host .step.disabled .line{background-color:var(--theme-workflow-step-icon-default--color--disabled) !important}:host .step.disabled .text{color:var(--theme-workflow-step--color--disabled)}";const c=class{constructor(r){e(this,r);this.selectedChanged=t(this,"selectedChanged",7);this.vertical=false;this.disabled=false;this.status="open";this.clickable=false;this.selected=false;this.position="undefined";this.iconName="circle";this.iconColor="workflow-step-icon-default--color"}selectedHandler(){const e=this.selected?"--selected":"";if(this.status==="open"){this.iconName=this.selected?"circle-dot":"circle";this.iconColor=`workflow-step-icon-default--color${e}`}if(this.status==="done"&&!this.disabled){this.iconColor=`workflow-step-icon-done--color${e}`}}watchPropHandler(){switch(this.status){case"open":this.iconName="circle";this.iconColor="workflow-step-icon-default--color";break;case"success":this.iconName="success";this.iconColor="color-success";break;case"done":this.iconName="success";this.iconColor="workflow-step-icon-done--color";break;case"warning":this.iconName="warning";this.iconColor="color-warning";break;case"error":this.iconName="error";this.iconColor="color-alarm";break;default:this.iconName="circle";break}if(this.disabled){this.iconColor="workflow-step-icon-success--color--disabled"}}componentDidLoad(){this.watchPropHandler();this.selectedHandler();this.customIconSlot=!!this.hostElement.querySelector('[slot="custom-icon"]')}onStepClick(){if(!this.disabled&&this.clickable){this.selectedChanged.emit(this.hostElement)}}render(){const e=!this.customIconSlot?r(s,null,r("ix-icon",{color:"color-1",name:this.iconName==="warning"?"triangle-filled":"circle-filled",class:"absolute",size:"24"}),r("ix-icon",{color:this.iconColor,name:this.iconName,class:"absolute",size:"24"})):null;return r(o,{onClick:()=>this.onStepClick()},r("div",{tabIndex:0,class:{step:true,selected:this.selected,vertical:this.vertical,disabled:this.disabled,clickable:this.clickable&&!this.disabled}},r("div",{class:"wrapper"},r("div",{class:{line:true,selected:this.selected,[this.status]:true,[this.position]:true}}),r("div",{class:"iconWrapper"},e,r("slot",{name:"custom-icon"}))),r("div",{class:"text"},r("slot",null))))}get hostElement(){return i(this)}static get watchers(){return{selected:["selectedHandler"],status:["watchPropHandler"]}}};c.style=l;const h=":host{}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .steps{display:flex}:host .steps.vertical{display:block}";const n=class{constructor(r){e(this,r);this.stepSelected=t(this,"stepSelected",7);this.vertical=false;this.clickable=false;this.selectedIndex=0}getSteps(){return Array.from(this.hostElement.querySelectorAll("ix-workflow-step"))}updateSteps(){let e=this.getSteps();e.forEach(((t,r)=>{t.vertical=this.vertical;t.clickable=this.clickable;t.selected=this.selectedIndex===r;if(e.length===1){t.position="single";return}if(r===0){t.position="first"}else if(r===e.length-1){t.position="last"}else{t.position="undefined"}}))}onStepSelectionChanged(e){const t=e.detail;const r=this.getSteps();const s=r.findIndex((e=>e===t));const o=this.stepSelected.emit(s);if(o.defaultPrevented){return}r.forEach(((e,t)=>{e.selected=t===s}))}componentDidLoad(){this.observer=a((e=>{for(let t of e){if(t.type==="childList"){this.updateSteps()}}}));this.observer.observe(this.hostElement,{childList:true})}disconnectedCallback(){if(this.observer){this.observer.disconnect()}}componentDidRender(){this.updateSteps()}render(){return r(o,null,r("div",{class:{steps:true,vertical:this.vertical}},r("slot",null)))}get hostElement(){return i(this)}};n.style=h;export{c as ix_workflow_step,n as ix_workflow_steps};
-//# sourceMappingURL=p-1fc8e513.entry.js.map

package/dist/siemens-ix/p-1fc8e513.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["workflowStepCss","WorkflowStep","selectedHandler","selectedStyle","this","selected","status","iconName","iconColor","disabled","watchPropHandler","componentDidLoad","customIconSlot","hostElement","querySelector","onStepClick","clickable","selectedChanged","emit","render","icons","h","Fragment","color","name","class","size","Host","onClick","tabIndex","step","vertical","line","position","workflowStepsCss","WorkflowSteps","getSteps","Array","from","querySelectorAll","updateSteps","steps","forEach","element","index","selectedIndex","length","onStepSelectionChanged","event","eventTarget","detail","clickIndex","findIndex","clientEvent","stepSelected","defaultPrevented","observer","createMutationObserver","mutations","mutation","type","observe","childList","disconnectedCallback","disconnect","componentDidRender"],"sources":["./src/components/workflow-step/workflow-step.scss?tag=ix-workflow-step&encapsulation=shadow","./src/components/workflow-step/workflow-step.tsx","./src/components/workflow-steps/workflow-steps.scss?tag=ix-workflow-steps&encapsulation=shadow","./src/components/workflow-steps/workflow-steps.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  .step {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    background-color: var(--theme-workflow-step--background);\n    border-radius: var(--theme-workflow--border-radius);\n    width: auto;\n    padding: 1.125rem 0 $small-space 0;\n    height: 4rem;\n    width: 12.75rem;\n\n    .wrapper {\n      display: flex;\n      width: 100%;\n      align-items: center;\n      justify-content: center;\n      position: relative;\n\n      .line {\n        width: 100%;\n        height: 0.125rem;\n        background-color: var(--theme-workflow-step-icon-default--color);\n\n        &.first,\n        &.last {\n          width: 50%;\n          margin: 0 0 0 auto;\n        }\n\n        &.last {\n          margin: 0 auto 0 0;\n        }\n\n        &.single {\n          width: 0;\n        }\n\n        &.selected {\n          background-color: var(\n            --theme-workflow-step-icon-default--color--selected\n          );\n        }\n\n        &.done {\n          background-color: var(--theme-workflow-step-icon-done--color);\n\n          &.selected {\n            background-color: var(\n              --theme-workflow-step-icon-done--color--selected\n            );\n          }\n        }\n\n        &.warning {\n          background-color: var(--theme-color-warning);\n        }\n\n        &.success {\n          background-color: var(--theme-color-success);\n        }\n\n        &.error {\n          background-color: var(--theme-color-alarm);\n        }\n      }\n\n      .iconWrapper {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        position: absolute;\n\n        .absolute {\n          position: absolute;\n        }\n      }\n    }\n\n    .text {\n      margin-top: $default-space;\n      width: auto;\n      padding: 0 $small-space;\n    }\n\n    &.vertical {\n      flex-direction: row;\n      padding: 0;\n\n      .wrapper {\n        width: auto;\n        padding-left: 1.125rem;\n        height: 4rem;\n\n        .line {\n          width: 0.125rem;\n          height: 100%;\n\n          &.first,\n          &.last {\n            height: 50%;\n            margin: auto 0 0 0;\n          }\n\n          &.last {\n            margin: 0 0 auto 0;\n          }\n\n          &.single {\n            width: 0;\n          }\n        }\n      }\n\n      .text {\n        margin-top: 0;\n        margin-left: $default-space;\n        padding: 0;\n      }\n    }\n\n    &.clickable {\n      &:hover {\n        background-color: var(--theme-workflow-step--background--hover);\n      }\n\n      &:active {\n        background-color: var(--theme-workflow-step--background--active);\n      }\n    }\n\n    &:focus-visible {\n      outline: 1px solid var(--focus--border-color);\n      border-radius: 0;\n    }\n\n    &.selected {\n      background-color: var(--theme-workflow-step--background--selected);\n    }\n\n    &.disabled {\n      background-color: var(--theme-workflow-step--background--disabled);\n\n      .line {\n        background-color: var(\n          --theme-workflow-step-icon-default--color--disabled\n        ) !important;\n      }\n\n      .text {\n        color: var(--theme-workflow-step--color--disabled);\n      }\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-workflow-step',\n  styleUrl: 'workflow-step.scss',\n  shadow: true,\n})\nexport class WorkflowStep {\n  @Element() hostElement: HTMLIxWorkflowStepElement;\n\n  /**\n   * Select orientation\n   */\n  @Prop() vertical: boolean = false;\n\n  /**\n   * Set disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Set status\n   */\n  @Prop() status: 'open' | 'success' | 'done' | 'warning' | 'error' = 'open';\n\n  /**\n   * Activate navigation click\n   */\n  @Prop() clickable: boolean = false;\n\n  /**\n   * Set selected\n   */\n  @Prop() selected: boolean = false;\n\n  /**\n   * Activate navigation click\n   *\n   * @internal\n   */\n  @Prop() position: 'first' | 'last' | 'single' | 'undefined' = 'undefined';\n\n  @State() iconName: 'circle' | 'circle-dot' | 'success' | 'warning' | 'error' =\n    'circle';\n\n  @State() iconColor: string = 'workflow-step-icon-default--color';\n\n  /**\n   * @internal\n   */\n  @Event() selectedChanged: EventEmitter<HTMLIxWorkflowStepElement>;\n\n  private customIconSlot: boolean;\n\n  @Watch('selected')\n  selectedHandler() {\n    const selectedStyle = this.selected ? '--selected' : '';\n\n    if (this.status === 'open') {\n      this.iconName = this.selected ? 'circle-dot' : 'circle';\n      this.iconColor = `workflow-step-icon-default--color${selectedStyle}`;\n    }\n\n    if (this.status === 'done' && !this.disabled) {\n      this.iconColor = `workflow-step-icon-done--color${selectedStyle}`;\n    }\n  }\n\n  @Watch('status')\n  watchPropHandler() {\n    switch (this.status) {\n      case 'open':\n        this.iconName = 'circle';\n        this.iconColor = 'workflow-step-icon-default--color';\n        break;\n      case 'success':\n        this.iconName = 'success';\n        this.iconColor = 'color-success';\n        break;\n      case 'done':\n        this.iconName = 'success';\n        this.iconColor = 'workflow-step-icon-done--color';\n        break;\n      case 'warning':\n        this.iconName = 'warning';\n        this.iconColor = 'color-warning';\n        break;\n      case 'error':\n        this.iconName = 'error';\n        this.iconColor = 'color-alarm';\n        break;\n\n      default:\n        this.iconName = 'circle';\n        break;\n    }\n\n    if (this.disabled) {\n      this.iconColor = 'workflow-step-icon-success--color--disabled';\n    }\n  }\n\n  componentDidLoad() {\n    this.watchPropHandler();\n    this.selectedHandler();\n\n    this.customIconSlot = !!this.hostElement.querySelector(\n      '[slot=\"custom-icon\"]'\n    );\n  }\n\n  onStepClick() {\n    if (!this.disabled && this.clickable) {\n      this.selectedChanged.emit(this.hostElement);\n    }\n  }\n\n  render() {\n    const icons = !this.customIconSlot ? (\n      <Fragment>\n        <ix-icon\n          color=\"color-1\"\n          name={\n            this.iconName === 'warning' ? 'triangle-filled' : 'circle-filled'\n          }\n          class=\"absolute\"\n          size=\"24\"\n        ></ix-icon>\n        <ix-icon\n          color={this.iconColor}\n          name={this.iconName}\n          class=\"absolute\"\n          size=\"24\"\n        ></ix-icon>\n      </Fragment>\n    ) : null;\n\n    return (\n      <Host onClick={() => this.onStepClick()}>\n        <div\n          tabIndex={0}\n          class={{\n            step: true,\n            selected: this.selected,\n            vertical: this.vertical,\n            disabled: this.disabled,\n            clickable: this.clickable && !this.disabled,\n          }}\n        >\n          <div class=\"wrapper\">\n            <div\n              class={{\n                line: true,\n                selected: this.selected,\n                [this.status]: true,\n                [this.position]: true,\n              }}\n            ></div>\n            <div class=\"iconWrapper\">\n              {icons}\n              <slot name=\"custom-icon\"></slot>\n            </div>\n          </div>\n          <div class=\"text\">\n            <slot></slot>\n          </div>\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\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  .steps {\n    display: flex;\n\n    &.vertical {\n      display: block;\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\n@Component({\n  tag: 'ix-workflow-steps',\n  styleUrl: 'workflow-steps.scss',\n  shadow: true,\n})\nexport class WorkflowSteps {\n  @Element() hostElement!: HTMLIxWorkflowStepsElement;\n\n  /**\n   * Select orientation\n   */\n  @Prop() vertical: boolean = false;\n\n  /**\n   * Activate navigation click\n   */\n  @Prop() clickable: boolean = false;\n\n  /**\n   * Activate navigation click\n   */\n  @Prop() selectedIndex: number = 0;\n\n  /**\n   * On step selected event\n   */\n  @Event() stepSelected: EventEmitter<number>;\n\n  private getSteps() {\n    return Array.from(this.hostElement.querySelectorAll('ix-workflow-step'));\n  }\n\n  updateSteps() {\n    let steps = this.getSteps();\n    steps.forEach((element, index) => {\n      element.vertical = this.vertical;\n      element.clickable = this.clickable;\n      element.selected = this.selectedIndex === index;\n\n      if (steps.length === 1) {\n        element.position = 'single';\n        return;\n      }\n\n      if (index === 0) {\n        element.position = 'first';\n      } else if (index === steps.length - 1) {\n        element.position = 'last';\n      } else {\n        element.position = 'undefined';\n      }\n    });\n  }\n\n  private observer: MutationObserver;\n\n  @Listen('selectedChanged')\n  onStepSelectionChanged(event: CustomEvent<HTMLIxWorkflowStepElement>) {\n    const eventTarget = event.detail;\n\n    const steps = this.getSteps();\n    const clickIndex = steps.findIndex((step) => step === eventTarget);\n    const clientEvent = this.stepSelected.emit(clickIndex);\n\n    if (clientEvent.defaultPrevented) {\n      return;\n    }\n\n    steps.forEach((step, index) => {\n      step.selected = index === clickIndex;\n    });\n  }\n\n  componentDidLoad() {\n    this.observer = createMutationObserver((mutations) => {\n      for (let mutation of mutations) {\n        if (mutation.type === 'childList') {\n          this.updateSteps();\n        }\n      }\n    });\n\n    this.observer.observe(this.hostElement, { childList: true });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  componentDidRender() {\n    this.updateSteps();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={{ steps: true, vertical: this.vertical }}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/siemens-ix/p-281fa225.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as e,H as r,g as s}from"./p-76a509c7.js";import{c as o}from"./p-c0454c9a.js";const l=":host{display:flex;position:relative;flex-direction:column;align-items:flex-start;margin:0.5rem}: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 .CardList_Title{display:flex;position:relative;height:1.5rem;align-items:center;width:100%;margin-bottom:0.5rem}:host .CardList__Title__Button{margin-right:1rem;transition:var(--theme-default-time) transform ease-in-out}:host .CardList__Title__Button__Collapsed{transform:rotate(-90deg)}:host .CardList__Title__Show__All{align-self:center;margin-left:auto;margin-right:0px}:host .CardList__Content{display:flex;position:relative;height:calc(100% - 1.5rem);width:100%;gap:1.5rem;transition:var(--theme-default-time) ease-in-out;overflow:auto}:host .CardList__Content__Collapsed{min-height:0px;max-height:0px;overflow:hidden;opacity:0}:host .CardList__Style__Flexbox__Scroll{flex-wrap:wrap}:host .CardList__Style__Infinite__Scroll{flex-wrap:nowrap;-ms-overflow-style:none;scrollbar-width:none}:host .CardList__Style__Infinite__Scroll::-webkit-scrollbar{display:none}:host .CardList__Overflow{display:block;position:relative;height:100%;width:100%;pointer-events:all;-webkit-mask-image:var(--ix-card-list-overflow, none);mask-image:var(--ix-card-list-overflow, none)}:host .Show__All__Card{display:flex;position:relative;align-self:flex-start;justify-self:center;max-width:11.25rem;min-width:11.25rem;width:11.25rem;min-height:11.25rem;max-height:11.25rem;height:11.25rem;--ix-card-border-color:var(--theme-color-primary);color:var(--theme-color-primary)}:host .CardList__Style__Infinite__Scroll .Show__All__Card{margin-top:2.375rem}:host .CardList__Style__Flexbox__Scroll .Show__All__Card{margin-bottom:2.375rem}:host .Show__All__Card:hover{background-color:var(--theme-color-ghost--hover)}:host .Show__All__Card:active{background-color:var(--theme-color-ghost--active)}:host .Show__All__Card__Content{display:flex;justify-content:center;align-items:center}:host .Show__All__Card__Icon{display:flex;position:absolute;height:4rem;width:4rem;justify-content:center;align-items:center;transform:scale(2)}:host .Show__All__Card__Text{margin-bottom:0px;margin-top:auto}";function a(t){if(t.label===""){return null}return e("div",{class:"CardList_Title"},e("ix-icon-button",{ghost:true,icon:"chevron-down",onClick:t.onClick,color:"color-primary",class:{CardList__Title__Button:true,CardList__Title__Button__Collapsed:t.isCollapsed}}),e("ix-typography",{variant:"large-single"},t.label),e("ix-button",{class:"CardList__Title__Show__All",ghost:true,onClick:t.onShowAllClick},e("span",null,t.showAllLabel),e("span",null,!isNaN(t.showAllCounter)?` (${t.showAllCounter})`:null)))}const n=class{constructor(e){t(this,e);this.collapseChanged=i(this,"collapseChanged",7);this.showAllClick=i(this,"showAllClick",7);this.showMoreCardClick=i(this,"showMoreCardClick",7);this.label=undefined;this.collapse=false;this.listStyle="stack";this.maxVisibleCards=12;this.showAllCount=undefined;this.suppressOverflowHandling=false;this.i18nShowAll="Show all";this.i18nMoreCards="There are more cards available";this.hasOverflowingElements=false;this.numberOfOverflowingElements=0;this.numberOfAllChildElements=0;this.leftScrollDistance=0;this.rightScrollDistance=0}onCardListVisibilityToggle(){this.collapse=!this.collapse;this.collapseChanged.emit(this.collapse)}onShowAllClick(t){this.showAllClick.emit({nativeEvent:t})}getListChildren(){const t=this.hostElement.shadowRoot.querySelector(".CardList__Content > slot");return t.assignedElements({flatten:true})}changeVisibilityOfSlotChildren(){const t=this.getListChildren();t.forEach(((t,i)=>{if(t instanceof HTMLElement){if(i>this.maxVisibleCards-1){t.classList.add("d-none");return}t.classList.remove("d-none")}}));this.hasOverflowingElements=t.length>this.maxVisibleCards;this.numberOfOverflowingElements=t.length-this.maxVisibleCards;this.numberOfAllChildElements=t.length;this.detectOverflow()}registerOverflowHandler(){this.observer=o((()=>{this.changeVisibilityOfSlotChildren()}));this.observer.observe(this.hostElement.shadowRoot.querySelector(".CardList__Content"),{childList:true,subtree:true});requestAnimationFrame((()=>{this.changeVisibilityOfSlotChildren()}))}shouldHandleOverflow(){if(this.suppressOverflowHandling){return false}if(this.listStyle==="stack"||this.listStyle==="scroll"){return true}}get listElement(){return this.hostElement.shadowRoot.querySelector(".CardList__Content")}onCardListScroll(){this.detectOverflow()}isShowMoreCardVisible(){return this.suppressOverflowHandling===false&&this.hasOverflowingElements}getOpacityFromScrollDistance(t){if(!this.listElement){return 0}if(t===0){return 0}if(t>100){return 1}return t/100}computeMaskLayer(){const t=80;const i=`linear-gradient(\n      90deg,\n      transparent 0px,\n      black ${t*(this.getOpacityFromScrollDistance(this.leftScrollDistance)>0?1:0)}px,\n      black calc(100% - ${t*(this.getOpacityFromScrollDistance(this.rightScrollDistance)>0?1:0)}px),\n      transparent 100%\n    )`;return{"--ix-card-list-overflow":i}}detectOverflow(){const{clientWidth:t,scrollWidth:i,scrollLeft:e}=this.listElement;this.leftScrollDistance=e;this.rightScrollDistance=i-e-t}componentDidLoad(){if(this.shouldHandleOverflow()){this.registerOverflowHandler()}}disconnectedCallback(){if(this.observer){this.observer.disconnect()}}render(){return e(r,null,e(a,{isCollapsed:this.collapse,label:this.label,showAllLabel:this.i18nShowAll,showAllCounter:this.showAllCount===undefined?this.numberOfAllChildElements:this.showAllCount,onClick:()=>this.onCardListVisibilityToggle(),onShowAllClick:t=>this.onShowAllClick(t)}),e("div",{class:{CardList__Overflow:true},style:this.computeMaskLayer()},e("div",{class:{CardList__Content:true,CardList__Content__Collapsed:this.collapse,CardList__Style__Flexbox__Scroll:this.listStyle==="stack",CardList__Style__Infinite__Scroll:this.listStyle==="scroll"},onScroll:()=>this.onCardListScroll()},e("slot",{onSlotchange:()=>this.changeVisibilityOfSlotChildren()}),this.isShowMoreCardVisible()?e("ix-card",{class:{Show__All__Card:true},onClick:t=>this.showMoreCardClick.emit({nativeEvent:t})},e("ix-card-content",{class:"Show__All__Card__Content"},e("ix-icon",{name:"more-menu",size:"32",class:"Show__All__Card__Icon"}),e("span",{class:"Show__All__Card__Text"},this.i18nMoreCards," (",this.numberOfOverflowingElements,")"))):null)))}get hostElement(){return s(this)}};n.style=l;export{n as ix_card_list};
-//# sourceMappingURL=p-281fa225.entry.js.map

package/dist/siemens-ix/p-281fa225.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["cardListCss","CardListTitle","props","label","h","class","ghost","icon","onClick","color","CardList__Title__Button","CardList__Title__Button__Collapsed","isCollapsed","variant","onShowAllClick","showAllLabel","isNaN","showAllCounter","CardList","onCardListVisibilityToggle","this","collapse","collapseChanged","emit","event","showAllClick","nativeEvent","getListChildren","slot","hostElement","shadowRoot","querySelector","assignedElements","flatten","changeVisibilityOfSlotChildren","childElements","forEach","element","index","HTMLElement","maxVisibleCards","classList","add","remove","hasOverflowingElements","length","numberOfOverflowingElements","numberOfAllChildElements","detectOverflow","registerOverflowHandler","observer","createMutationObserver","observe","childList","subtree","requestAnimationFrame","shouldHandleOverflow","suppressOverflowHandling","listStyle","listElement","onCardListScroll","isShowMoreCardVisible","getOpacityFromScrollDistance","distance","computeMaskLayer","maxOverflowWidth","maskLayer","leftScrollDistance","rightScrollDistance","clientWidth","scrollWidth","scrollLeft","componentDidLoad","disconnectedCallback","disconnect","render","Host","i18nShowAll","showAllCount","undefined","e","CardList__Overflow","style","CardList__Content","CardList__Content__Collapsed","CardList__Style__Flexbox__Scroll","CardList__Style__Infinite__Scroll","onScroll","onSlotchange","Show__All__Card","showMoreCardClick","name","size","i18nMoreCards"],"sources":["./src/components/card-list/card-list.scss?tag=ix-card-list&encapsulation=shadow","./src/components/card-list/card-list.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$CardList__Title__Height: 1.5rem;\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  align-items: flex-start;\n  margin: 0.5rem;\n\n  .CardList_Title {\n    display: flex;\n    position: relative;\n    height: $CardList__Title__Height;\n    align-items: center;\n    width: 100%;\n    margin-bottom: 0.5rem;\n  }\n\n  .CardList__Title__Button {\n    margin-right: 1rem;\n    transition: var(--theme-default-time) transform ease-in-out;\n  }\n\n  .CardList__Title__Button__Collapsed {\n    transform: rotate(-90deg);\n  }\n\n  .CardList__Title__Show__All {\n    align-self: center;\n    margin-left: auto;\n    margin-right: 0px;\n  }\n\n  .CardList__Content {\n    display: flex;\n    position: relative;\n    height: calc(100% - #{$CardList__Title__Height});\n    width: 100%;\n    gap: 1.5rem;\n    transition: var(--theme-default-time) ease-in-out;\n    overflow: auto;\n  }\n\n  .CardList__Content__Collapsed {\n    min-height: 0px;\n    max-height: 0px;\n    overflow: hidden;\n    opacity: 0;\n  }\n\n  .CardList__Style__Flexbox__Scroll {\n    flex-wrap: wrap;\n  }\n\n  .CardList__Style__Infinite__Scroll {\n    flex-wrap: nowrap;\n\n    -ms-overflow-style: none;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .CardList__Overflow {\n    display: block;\n    position: relative;\n    height: 100%;\n    width: 100%;\n    pointer-events: all;\n    mask-image: var(--ix-card-list-overflow, none);\n  }\n\n  .Show__All__Card {\n    display: flex;\n    position: relative;\n\n    align-self: flex-start;\n    justify-self: center;\n\n    max-width: 11.25rem;\n    min-width: 11.25rem;\n    width: 11.25rem;\n\n    min-height: 11.25rem;\n    max-height: 11.25rem;\n    height: 11.25rem;\n\n    --ix-card-border-color: var(--theme-color-primary);\n    color: var(--theme-color-primary);\n  }\n\n  .CardList__Style__Infinite__Scroll .Show__All__Card {\n    margin-top: 2.375rem;\n  }\n\n  .CardList__Style__Flexbox__Scroll .Show__All__Card {\n    margin-bottom: 2.375rem;\n  }\n\n  .Show__All__Card:hover {\n    background-color: var(--theme-color-ghost--hover);\n  }\n\n  .Show__All__Card:active {\n    background-color: var(--theme-color-ghost--active);\n  }\n\n  .Show__All__Card__Content {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .Show__All__Card__Icon {\n    display: flex;\n    position: absolute;\n    height: 4rem;\n    width: 4rem;\n    justify-content: center;\n    align-items: center;\n    transform: scale(2);\n  }\n\n  .Show__All__Card__Text {\n    margin-bottom: 0px;\n    margin-top: auto;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\nfunction CardListTitle(props: {\n  label: string;\n  isCollapsed: boolean;\n  onClick: (e: MouseEvent) => void;\n  onShowAllClick: (e: MouseEvent) => void;\n  showAllLabel: string;\n  showAllCounter: number;\n}) {\n  if (props.label === '') {\n    return null;\n  }\n\n  return (\n    <div class=\"CardList_Title\">\n      <ix-icon-button\n        ghost\n        icon=\"chevron-down\"\n        onClick={props.onClick}\n        color=\"color-primary\"\n        class={{\n          CardList__Title__Button: true,\n          CardList__Title__Button__Collapsed: props.isCollapsed,\n        }}\n      ></ix-icon-button>\n      <ix-typography variant=\"large-single\">{props.label}</ix-typography>\n      <ix-button\n        class=\"CardList__Title__Show__All\"\n        ghost\n        onClick={props.onShowAllClick}\n      >\n        <span>{props.showAllLabel}</span>\n        <span>\n          {!isNaN(props.showAllCounter) ? ` (${props.showAllCounter})` : null}\n        </span>\n      </ix-button>\n    </div>\n  );\n}\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-list',\n  styleUrl: 'card-list.scss',\n  shadow: true,\n})\nexport class CardList {\n  /**\n   * Name the card list\n   */\n  @Prop() label: string;\n\n  /**\n   * Collapse the list\n   */\n  @Prop({ mutable: true }) collapse = false;\n\n  /**\n   * List style\n   */\n  @Prop() listStyle: 'stack' | 'scroll' = 'stack';\n\n  /**\n   * Maximal visible cards\n   *\n   * @internal\n   */\n  @Prop() maxVisibleCards = 12;\n\n  /**\n   * Overwrite the default show all count.\n   * */\n  @Prop() showAllCount: number | undefined;\n\n  /**\n   * Suppress the overflow handling of child elements\n   */\n  @Prop() suppressOverflowHandling = false;\n\n  /**\n   * i18n Show all button\n   */\n  @Prop() i18nShowAll = 'Show all';\n\n  /**\n   * i18n More cards available\n   */\n  @Prop() i18nMoreCards = 'There are more cards available';\n\n  /**\n   * Fire event when the collapse state is changed by the user\n   */\n  @Event() collapseChanged: EventEmitter<boolean>;\n\n  /**\n   * Fire event when the collapse state is changed by the user\n   */\n  @Event() showAllClick: EventEmitter<{\n    nativeEvent: MouseEvent;\n  }>;\n\n  /**\n   * Fire event when the show more card is clicked.\n   */\n  @Event() showMoreCardClick: EventEmitter<{\n    nativeEvent: MouseEvent;\n  }>;\n\n  @Element() hostElement: HTMLIxCardListElement;\n\n  @State() private hasOverflowingElements = false;\n  @State() private numberOfOverflowingElements = 0;\n  @State() private numberOfAllChildElements = 0;\n  @State() private leftScrollDistance = 0;\n  @State() private rightScrollDistance = 0;\n\n  private observer: MutationObserver;\n\n  private onCardListVisibilityToggle() {\n    this.collapse = !this.collapse;\n    this.collapseChanged.emit(this.collapse);\n  }\n\n  private onShowAllClick(event: MouseEvent) {\n    this.showAllClick.emit({\n      nativeEvent: event,\n    });\n  }\n\n  private getListChildren() {\n    const slot = this.hostElement.shadowRoot.querySelector(\n      '.CardList__Content > slot'\n    ) as HTMLSlotElement;\n    return slot.assignedElements({ flatten: true });\n  }\n\n  private changeVisibilityOfSlotChildren() {\n    const childElements = this.getListChildren();\n    childElements.forEach((element, index) => {\n      if (element instanceof HTMLElement) {\n        if (index > this.maxVisibleCards - 1) {\n          element.classList.add('d-none');\n          return;\n        }\n        element.classList.remove('d-none');\n      }\n    });\n    this.hasOverflowingElements = childElements.length > this.maxVisibleCards;\n    this.numberOfOverflowingElements =\n      childElements.length - this.maxVisibleCards;\n\n    this.numberOfAllChildElements = childElements.length;\n    this.detectOverflow();\n  }\n\n  private registerOverflowHandler() {\n    this.observer = createMutationObserver(() => {\n      this.changeVisibilityOfSlotChildren();\n    });\n\n    this.observer.observe(\n      this.hostElement.shadowRoot.querySelector('.CardList__Content'),\n      {\n        childList: true,\n        subtree: true,\n      }\n    );\n\n    requestAnimationFrame(() => {\n      this.changeVisibilityOfSlotChildren();\n    });\n  }\n\n  private shouldHandleOverflow() {\n    if (this.suppressOverflowHandling) {\n      return false;\n    }\n    if (this.listStyle === 'stack' || this.listStyle === 'scroll') {\n      return true;\n    }\n  }\n\n  private get listElement() {\n    return this.hostElement.shadowRoot.querySelector('.CardList__Content');\n  }\n\n  private onCardListScroll() {\n    this.detectOverflow();\n  }\n\n  private isShowMoreCardVisible() {\n    return (\n      this.suppressOverflowHandling === false && this.hasOverflowingElements\n    );\n  }\n\n  private getOpacityFromScrollDistance(distance: number) {\n    if (!this.listElement) {\n      return 0;\n    }\n\n    if (distance === 0) {\n      return 0;\n    }\n\n    if (distance > 100) {\n      return 1;\n    }\n\n    return distance / 100;\n  }\n\n  private computeMaskLayer() {\n    const maxOverflowWidth = 80;\n    const maskLayer = `linear-gradient(\n      90deg,\n      transparent 0px,\n      black ${\n        maxOverflowWidth *\n        (this.getOpacityFromScrollDistance(this.leftScrollDistance) > 0 ? 1 : 0)\n      }px,\n      black calc(100% - ${\n        maxOverflowWidth *\n        (this.getOpacityFromScrollDistance(this.rightScrollDistance) > 0\n          ? 1\n          : 0)\n      }px),\n      transparent 100%\n    )`;\n    return {\n      '--ix-card-list-overflow': maskLayer,\n    };\n  }\n\n  @Listen('resize', { target: 'window' })\n  private detectOverflow() {\n    const { clientWidth, scrollWidth, scrollLeft } = this.listElement;\n\n    this.leftScrollDistance = scrollLeft;\n    this.rightScrollDistance = scrollWidth - scrollLeft - clientWidth;\n  }\n\n  componentDidLoad() {\n    if (this.shouldHandleOverflow()) {\n      this.registerOverflowHandler();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <CardListTitle\n          isCollapsed={this.collapse}\n          label={this.label}\n          showAllLabel={this.i18nShowAll}\n          showAllCounter={\n            this.showAllCount === undefined\n              ? this.numberOfAllChildElements\n              : this.showAllCount\n          }\n          onClick={() => this.onCardListVisibilityToggle()}\n          onShowAllClick={(e) => this.onShowAllClick(e)}\n        ></CardListTitle>\n        <div\n          class={{\n            CardList__Overflow: true,\n          }}\n          style={this.computeMaskLayer()}\n        >\n          <div\n            class={{\n              CardList__Content: true,\n              CardList__Content__Collapsed: this.collapse,\n              CardList__Style__Flexbox__Scroll: this.listStyle === 'stack',\n              CardList__Style__Infinite__Scroll: this.listStyle === 'scroll',\n            }}\n            onScroll={() => this.onCardListScroll()}\n          >\n            <slot\n              onSlotchange={() => this.changeVisibilityOfSlotChildren()}\n            ></slot>\n            {this.isShowMoreCardVisible() ? (\n              <ix-card\n                class={{\n                  Show__All__Card: true,\n                }}\n                onClick={(event) =>\n                  this.showMoreCardClick.emit({\n                    nativeEvent: event,\n                  })\n                }\n              >\n                <ix-card-content class=\"Show__All__Card__Content\">\n                  <ix-icon\n                    name=\"more-menu\"\n                    size={'32'}\n                    class={'Show__All__Card__Icon'}\n                  ></ix-icon>\n                  <span class=\"Show__All__Card__Text\">\n                    {this.i18nMoreCards} ({this.numberOfOverflowingElements})\n                  </span>\n                </ix-card-content>\n              </ix-card>\n            ) : null}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/siemens-ix/p-2a29e187.entry.js

@@ -1,2 +0,0 @@
-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%;padding:1rem 1rem;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(: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;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-2a29e187.entry.js.map

package/dist/siemens-ix/p-2a29e187.entry.js.map

@@ -1 +0,0 @@
-{"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$paddingContentLeftRight: 1rem;\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    padding: 1rem $paddingContentLeftRight;\n    // min-height: calc(13.5rem - 2.5rem);\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(: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\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  // min-height: 8rem;\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,qlE,MCoBHC,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,8CCnCrB,MAAMC,EAAiB,wsB,MCUVC,EAAW,M,yBACtBR,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,a"}

package/dist/siemens-ix/p-36c48f12.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as s,H as r,g as i}from"./p-76a509c7.js";const o=":host{width:auto;display:flex;align-items:center;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .tab-items{overflow:hidden;scroll-behavior:smooth;width:100%}:host .tab-items .items-content{display:flex;align-items:center}:host .arrow{position:absolute;display:flex;align-items:center;justify-content:center;width:32px;height:32px;top:0;bottom:0;left:0;margin:auto 0;border-radius:4px;color:var(--theme-btn-invisible-primary--color);background-color:var(--theme-btn-invisible-primary--background);z-index:2}:host .arrow:hover{color:var(--theme-btn-invisible-primary--color--hover);background-color:var(--theme-btn-invisible-primary--background--hover)}:host .arrow:active{color:var(--theme-btn-invisible-primary--color--active);background-color:var(--theme-btn-invisible-primary--background--active)}:host .arrow.right{left:auto;right:0}:host .overflow-shadow{display:block;position:relative;height:100%;width:100%;pointer-events:all}:host .overflow-shadow.shadow-left{-webkit-mask-image:linear-gradient(90deg, transparent 0px, black 45px);mask-image:linear-gradient(90deg, transparent 0px, black 45px)}:host .overflow-shadow.shadow-right{-webkit-mask-image:linear-gradient(90deg, black calc(100% - 45px), transparent 100%);mask-image:linear-gradient(90deg, black calc(100% - 45px), transparent 100%)}:host .overflow-shadow.shadow-both{-webkit-mask-image:linear-gradient(90deg, transparent 0px, black 45px, black calc(100% - 45px), transparent 100%);mask-image:linear-gradient(90deg, transparent 0px, black 45px, black calc(100% - 45px), transparent 100%)}";let a=window.innerWidth;const n=class{constructor(s){t(this,s);this.selectedChange=e(this,"selectedChange",7);this.clickAction={timeout:null,isClick:true};this.small=false;this.rounded=false;this.selected=0;this.layout="auto";this.placement="bottom";this.totalItems=0;this.currentScrollAmount=0;this.scrollAmount=100;this.styleNextArrow={};this.stylePreviousArrow={};this.scrollActionAmount=0}onWindowResize(){this.totalItems=0;this.totalItems=this.getTabs().length;if(a===0)return a=window.innerWidth;this.move(a-window.innerWidth);a=window.innerWidth}getTabs(){return Array.from(this.hostElement.querySelectorAll("ix-tab-item"))}getTab(t){return this.getTabs()[t]}getTabsWrapper(){return this.hostElement.shadowRoot.querySelector(".items-content")}showArrows(){try{const t=this.getTabsWrapper();return t.scrollWidth>Math.ceil(t.getBoundingClientRect().width)&&this.layout==="auto"}catch(t){return false}}showPreviousArrow(){try{return this.showArrows()&&this.scrollActionAmount<0}catch(t){return false}}showNextArrow(){try{const t=this.getTabsWrapper();const e=t.getBoundingClientRect();return this.showArrows()&&this.scrollActionAmount>(t.scrollWidth-e.width)*-1}catch(t){return false}}getArrowStyle(t){return{opacity:t?"1":"0",zIndex:t?"1":"-1"}}move(t,e=false){const s=this.getTabsWrapper();const r=(s.scrollWidth-s.getBoundingClientRect().width)*-1;t=this.currentScrollAmount+t;t=t>0?0:t<r?r:t;const i=[`transform: translateX(${t}px);`,e?"transition: all ease-in-out 400ms;":""].join("");s.setAttribute("style",i);if(e)this.currentScrollAmount=this.scrollActionAmount=t;else this.scrollActionAmount=t}moveTabToView(t){if(!this.showArrows())return;const e=this.getTab(t).getBoundingClientRect();const s=e.x*-1;this.move(s,true)}setSelected(t){this.selected=t}clickTab(t){if(this.dragStop()){return}const{defaultPrevented:e}=this.selectedChange.emit(t);if(e){return}this.setSelected(t);this.moveTabToView(t)}dragStart(t,e){if(!this.showArrows())return;if(e.button>0)return;this.clickAction.timeout=this.clickAction.timeout===null?setTimeout((()=>this.clickAction.isClick=false),300):null;const s=parseFloat(window.getComputedStyle(t).left);const r=e.clientX;const i=t=>this.dragMove(t,s,r);window.addEventListener("mouseup",(()=>{window.removeEventListener("mousemove",i,false);this.dragStop()}));window.addEventListener("mousemove",i,false)}dragMove(t,e,s){this.move(t.clientX+e-s)}dragStop(){clearTimeout(this.clickAction.timeout);this.clickAction.timeout=null;if(this.clickAction.isClick)return false;this.currentScrollAmount=this.scrollActionAmount;this.clickAction.isClick=true;return true}componentDidRender(){const t=this.getTabs();this.totalItems=t.length;t.forEach(((t,e)=>{if(this.small)t.setAttribute("small","true");if(this.rounded)t.setAttribute("rounded","true");t.setAttribute("layout",this.layout);t.setAttribute("selected",e===this.selected?"true":"false");t.setAttribute("placement",this.placement)}))}componentWillRender(){requestAnimationFrame((()=>{const t=this.showNextArrow();const e=this.showPreviousArrow();this.styleNextArrow=this.getArrowStyle(t);this.stylePreviousArrow=this.getArrowStyle(e)}))}componentDidLoad(){const t=this.getTabs();t.forEach((t=>{t.addEventListener("mousedown",(e=>this.dragStart(t,e)))}))}onTabClick(t){if(t.defaultPrevented){return}const e=t.target;const s=this.getTabs();s.forEach(((t,s)=>{if(!t.disabled&&t===e){this.clickTab(s)}}))}render(){return s(r,null,s("div",{class:"arrow",style:this.stylePreviousArrow,onClick:()=>this.move(this.scrollAmount,true)},s("ix-icon",{name:"chevron-left-small"})),s("div",{class:{"tab-items":true,"overflow-shadow":true,"shadow-left":this.showPreviousArrow(),"shadow-right":this.showNextArrow(),"shadow-both":this.showNextArrow()&&this.showPreviousArrow()}},s("div",{class:"items-content"},s("slot",null))),s("div",{class:"arrow right",style:this.styleNextArrow,onClick:()=>this.move(-this.scrollAmount,true)},s("ix-icon",{name:"chevron-right-small"})))}get hostElement(){return i(this)}};n.style=o;export{n as ix_tabs};
-//# sourceMappingURL=p-36c48f12.entry.js.map

package/dist/siemens-ix/p-36c48f12.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["tabsCss","windowStartSize","window","innerWidth","Tabs","this","clickAction","timeout","isClick","onWindowResize","totalItems","getTabs","length","move","Array","from","hostElement","querySelectorAll","getTab","tabIndex","getTabsWrapper","shadowRoot","querySelector","showArrows","tabWrapper","scrollWidth","Math","ceil","getBoundingClientRect","width","layout","error","showPreviousArrow","scrollActionAmount","showNextArrow","tabWrapperRect","getArrowStyle","condition","opacity","zIndex","amount","click","maxScrollWidth","currentScrollAmount","styles","join","setAttribute","moveTabToView","tab","x","setSelected","index","selected","clickTab","dragStop","defaultPrevented","selectedChange","emit","dragStart","element","event","button","setTimeout","tabPositionX","parseFloat","getComputedStyle","left","mousedownPositionX","clientX","dragMove","addEventListener","removeEventListener","tabX","mousedownX","clearTimeout","componentDidRender","tabs","forEach","small","rounded","placement","componentWillRender","requestAnimationFrame","previousArrow","styleNextArrow","stylePreviousArrow","componentDidLoad","onTabClick","target","disabled","render","h","Host","class","style","onClick","scrollAmount","name"],"sources":["./src/components/tabs/tabs.scss?tag=ix-tabs&encapsulation=shadow","./src/components/tabs/tabs.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  width: auto;\n  display: flex;\n  align-items: center;\n  position: relative;\n\n  .tab-items {\n    overflow: hidden;\n    scroll-behavior: smooth;\n    width: 100%;\n\n    .items-content {\n      display: flex;\n      align-items: center;\n    }\n  }\n\n  .arrow {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    margin: auto 0;\n    border-radius: 4px;\n    color: var(--theme-btn-invisible-primary--color);\n    background-color: var(--theme-btn-invisible-primary--background);\n    z-index: 2;\n\n    &:hover {\n      color: var(--theme-btn-invisible-primary--color--hover);\n      background-color: var(--theme-btn-invisible-primary--background--hover);\n    }\n\n    &:active {\n      color: var(--theme-btn-invisible-primary--color--active);\n      background-color: var(--theme-btn-invisible-primary--background--active);\n    }\n\n    &.right {\n      left: auto;\n      right: 0;\n    }\n  }\n\n  .overflow-shadow {\n    display: block;\n    position: relative;\n    height: 100%;\n    width: 100%;\n    pointer-events: all;\n\n    &.shadow-left {\n      mask-image: linear-gradient(90deg, transparent 0px, black 45px);\n    }\n\n    &.shadow-right {\n      mask-image: linear-gradient(\n        90deg,\n        black calc(100% - 45px),\n        transparent 100%\n      );\n    }\n\n    &.shadow-both {\n      mask-image: linear-gradient(\n        90deg,\n        transparent 0px,\n        black 45px,\n        black calc(100% - 45px),\n        transparent 100%\n      );\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\n\nlet windowStartSize = window.innerWidth;\n\n@Component({\n  tag: 'ix-tabs',\n  styleUrl: 'tabs.scss',\n  shadow: true,\n})\nexport class Tabs {\n  @Element() hostElement!: HTMLIxTabsElement;\n\n  /**\n   * Set tab items to small size\n   */\n  @Prop() small = false;\n\n  /**\n   * Set rounded tabs\n   */\n  @Prop() rounded = false;\n\n  /**\n   * Set default selected tab by index\n   */\n  @Prop({ mutable: true }) selected = 0;\n\n  /**\n   * Set layout width style\n   */\n  @Prop() layout: 'auto' | 'stretched' = 'auto';\n\n  /**\n   * Set placement style\n   */\n  @Prop() placement: 'bottom' | 'top' = 'bottom';\n\n  /**\n   * `selected` property changed\n   *\n   * @since 2.0.0\n   */\n  @Event() selectedChange: EventEmitter<number>;\n\n  @State() totalItems = 0;\n  @State() currentScrollAmount = 0;\n  @State() scrollAmount = 100;\n  @State() styleNextArrow = {};\n  @State() stylePreviousArrow = {};\n\n  @State() scrollActionAmount = 0;\n  private clickAction: {\n    timeout: NodeJS.Timeout;\n    isClick: boolean;\n  } = {\n    timeout: null,\n    isClick: true,\n  };\n\n  @Listen('resize', { target: 'window' })\n  onWindowResize() {\n    this.totalItems = 0;\n    this.totalItems = this.getTabs().length;\n\n    if (windowStartSize === 0) return (windowStartSize = window.innerWidth);\n    this.move(windowStartSize - window.innerWidth);\n    windowStartSize = window.innerWidth;\n  }\n\n  private getTabs() {\n    return Array.from(this.hostElement.querySelectorAll('ix-tab-item'));\n  }\n\n  private getTab(tabIndex: number) {\n    return this.getTabs()[tabIndex];\n  }\n\n  private getTabsWrapper() {\n    return this.hostElement.shadowRoot.querySelector('.items-content');\n  }\n\n  private showArrows() {\n    try {\n      const tabWrapper = this.getTabsWrapper();\n      return (\n        tabWrapper.scrollWidth >\n          Math.ceil(tabWrapper.getBoundingClientRect().width) &&\n        this.layout === 'auto'\n      );\n    } catch (error) {\n      return false;\n    }\n  }\n\n  private showPreviousArrow() {\n    try {\n      return this.showArrows() && this.scrollActionAmount < 0;\n    } catch (error) {\n      return false;\n    }\n  }\n\n  private showNextArrow() {\n    try {\n      const tabWrapper = this.getTabsWrapper();\n      const tabWrapperRect = tabWrapper.getBoundingClientRect();\n\n      return (\n        this.showArrows() &&\n        this.scrollActionAmount >\n          (tabWrapper.scrollWidth - tabWrapperRect.width) * -1\n      );\n    } catch (error) {\n      return false;\n    }\n  }\n\n  private getArrowStyle(condition: boolean) {\n    return {\n      opacity: condition ? '1' : '0',\n      zIndex: condition ? '1' : '-1',\n    };\n  }\n\n  private move(amount: number, click = false) {\n    const tabWrapper = this.getTabsWrapper();\n    const maxScrollWidth =\n      (tabWrapper.scrollWidth - tabWrapper.getBoundingClientRect().width) * -1;\n\n    amount = this.currentScrollAmount + amount;\n    amount = amount > 0 ? 0 : amount < maxScrollWidth ? maxScrollWidth : amount;\n\n    const styles = [\n      `transform: translateX(${amount}px);`,\n      click ? 'transition: all ease-in-out 400ms;' : '',\n    ].join('');\n\n    tabWrapper.setAttribute('style', styles);\n\n    if (click) this.currentScrollAmount = this.scrollActionAmount = amount;\n    else this.scrollActionAmount = amount;\n  }\n\n  private moveTabToView(tabIndex: number) {\n    if (!this.showArrows()) return;\n\n    const tab = this.getTab(tabIndex).getBoundingClientRect();\n    const amount = tab.x * -1;\n    this.move(amount, true);\n  }\n\n  private setSelected(index: number) {\n    this.selected = index;\n  }\n\n  private clickTab(index: number) {\n    if (this.dragStop()) {\n      return;\n    }\n\n    const { defaultPrevented } = this.selectedChange.emit(index);\n    if (defaultPrevented) {\n      return;\n    }\n\n    this.setSelected(index);\n    this.moveTabToView(index);\n  }\n\n  private dragStart(element: HTMLIxTabItemElement, event: MouseEvent) {\n    if (!this.showArrows()) return;\n    if (event.button > 0) return;\n\n    this.clickAction.timeout =\n      this.clickAction.timeout === null\n        ? setTimeout(() => (this.clickAction.isClick = false), 300)\n        : null;\n\n    const tabPositionX = parseFloat(window.getComputedStyle(element).left);\n    const mousedownPositionX = event.clientX;\n    const move = (event: MouseEvent) =>\n      this.dragMove(event, tabPositionX, mousedownPositionX);\n\n    window.addEventListener('mouseup', () => {\n      window.removeEventListener('mousemove', move, false);\n      this.dragStop();\n    });\n    window.addEventListener('mousemove', move, false);\n  }\n\n  private dragMove(event: MouseEvent, tabX: number, mousedownX: number) {\n    this.move(event.clientX + tabX - mousedownX);\n  }\n\n  private dragStop() {\n    clearTimeout(this.clickAction.timeout);\n    this.clickAction.timeout = null;\n\n    if (this.clickAction.isClick) return false;\n\n    this.currentScrollAmount = this.scrollActionAmount;\n    this.clickAction.isClick = true;\n\n    return true;\n  }\n\n  componentDidRender() {\n    const tabs = this.getTabs();\n    this.totalItems = tabs.length;\n\n    tabs.forEach((element, index) => {\n      if (this.small) element.setAttribute('small', 'true');\n\n      if (this.rounded) element.setAttribute('rounded', 'true');\n\n      element.setAttribute('layout', this.layout);\n      element.setAttribute(\n        'selected',\n        index === this.selected ? 'true' : 'false'\n      );\n      element.setAttribute('placement', this.placement);\n    });\n  }\n\n  componentWillRender() {\n    requestAnimationFrame(() => {\n      const showNextArrow = this.showNextArrow();\n      const previousArrow = this.showPreviousArrow();\n      this.styleNextArrow = this.getArrowStyle(showNextArrow);\n      this.stylePreviousArrow = this.getArrowStyle(previousArrow);\n    });\n  }\n\n  componentDidLoad() {\n    const tabs = this.getTabs();\n    tabs.forEach((element) => {\n      element.addEventListener('mousedown', (event) =>\n        this.dragStart(element, event)\n      );\n    });\n  }\n\n  @Listen('tabClick')\n  onTabClick(event: CustomEvent) {\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    const target = event.target;\n    const tabs = this.getTabs();\n\n    tabs.forEach((tab, index) => {\n      if (!tab.disabled && tab === target) {\n        this.clickTab(index);\n      }\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class=\"arrow\"\n          style={this.stylePreviousArrow}\n          onClick={() => this.move(this.scrollAmount, true)}\n        >\n          <ix-icon name=\"chevron-left-small\"></ix-icon>\n        </div>\n        <div\n          class={{\n            'tab-items': true,\n            'overflow-shadow': true,\n            'shadow-left': this.showPreviousArrow(),\n            'shadow-right': this.showNextArrow(),\n            'shadow-both': this.showNextArrow() && this.showPreviousArrow(),\n          }}\n        >\n          <div class=\"items-content\">\n            <slot></slot>\n          </div>\n        </div>\n        <div\n          class=\"arrow right\"\n          style={this.styleNextArrow}\n          onClick={() => this.move(-this.scrollAmount, true)}\n        >\n          <ix-icon name=\"chevron-right-small\"></ix-icon>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/siemens-ix/p-36f0b470.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as i,H as s,g as o}from"./p-76a509c7.js";const n=":host{display:inline-block;position:relative;height:auto;border-radius:var(--theme-input--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 .d-none{display:none}:host .select{position:relative;display:flex;align-items:center;height:auto;background-color:var(--theme-input--background);border:var(--theme-input--border-thickness) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);padding:0 0 0 0.5rem;box-shadow:var(--theme-inset-shadow-1) !important}:host .select:not(.disabled):not(:disabled){cursor:pointer}:host .select:not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover)}:host .select:focus-within{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline:1px solid #119fff;outline-offset:var(--theme-input--focus--outline-offset)}:host .select.readonly{box-shadow:none !important;border:none;border-radius:0px;border-bottom:var(--theme-input--border-thickness) solid var(--theme-color-weak-bdr)}:host .select.readonly,:host .select.readonly:hover,:host .select.readonly:active{background-color:transparent !important}:host .select.readonly:focus,:host .select.readonly:focus-within,:host .select.readonly:focus-visible{outline:none}:host .select.readonly input{color:var(--theme-color-weak-text)}:host .select.readonly input:focus,:host .select.readonly input:focus-visible{outline:none}:host .hidden{display:none !important}:host .trigger{display:flex;align-items:center;flex-grow:1;height:100%}:host .input-container{display:flex;position:relative;align-items:flex-start;width:100%}:host .input-container .chips{position:relative;display:flex;align-items:center;flex-wrap:wrap;height:100%;max-height:3.5rem;flex-grow:1;overflow-y:auto}:host .input-container .chips>ix-filter-chip{margin:0.1rem}:host .input-container input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-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);background:transparent;height:1.75rem;width:100%}:host .input-container input,:host .input-container input:hover,:host .input-container input:focus-visible{border:none;outline:none}:host .input-container input::-moz-placeholder{color:var(--theme-input-select-icon--color)}:host .input-container input::placeholder{color:var(--theme-input-select-icon--color)}:host .input-container input.hide-placeholder::-moz-placeholder{opacity:0}:host .input-container input.hide-placeholder::placeholder{opacity:0}:host .chevron-down-container{display:flex;align-items:center;justify-content:center;width:2rem;min-width:2rem;height:2rem}:host .chevron-down-container:not(.disabled):not(:disabled){cursor:pointer}:host .chevron-down-container:not(.disabled):not(:disabled):hover{color:var(--theme-color-dynamic--hover)}:host .chevron-down-container:not(.disabled):not(:disabled){cursor:pointer}:host .chevron-down-container:not(.disabled):not(:disabled):active,:host .chevron-down-container:not(.disabled):not(:disabled).active{color:var(--theme-color-dynamic--hover)}:host .editable .chevron-down-container:not(.disabled):not(:disabled){cursor:pointer}:host .editable .chevron-down-container:not(.disabled):not(:disabled):hover{color:var(--theme-color-std-text);background-color:var(--theme-btn-invisible-secondary--background--hover)}:host .editable .chevron-down-container:not(.disabled):not(:disabled){cursor:pointer}:host .editable .chevron-down-container:not(.disabled):not(:disabled):active,:host .editable .chevron-down-container:not(.disabled):not(:disabled).active{color:var(--theme-color-std-text);background-color:var(--theme-btn-invisible-secondary--background--active)}:host .add-item{display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%}:host .select-list-header{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;height:2rem;color:var(--theme-select-list-item-hint--color);margin:0 0.5rem 0 1rem}";const r=class{constructor(i){t(this,i);this.valueChange=e(this,"valueChange",7);this.itemSelectionChange=e(this,"itemSelectionChange",7);this.inputChange=e(this,"inputChange",7);this.addItem=e(this,"addItem",7);this.selectedIndices=undefined;this.value=undefined;this.allowClear=false;this.mode="single";this.editable=false;this.disabled=false;this.readonly=false;this.i18nPlaceholder="Select an option";this.i18nPlaceholderEditable="Type of select option";this.i18nSelectListHeader="Please select an option";this.i18nNoMatches="No matches";this.hideListHeader=false;this.dropdownShow=false;this.selectedLabels=undefined;this.dropdownWrapperRef=undefined;this.dropdownAnchor=undefined;this.isDropdownEmpty=false;this.hasFocus=false;this.navigationItem=undefined;this.inputFilterText=undefined;this.inputValue=undefined}get items(){return Array.from(this.hostElement.querySelectorAll("ix-select-item"))}get selectedItems(){return this.items.filter((t=>t.selected))}get addItemButton(){return this.hostElement.querySelector(".add-item")}get isSingleMode(){return this.mode==="single"}get isMultipleMode(){return this.mode==="multiple"}get isEveryDropdownItemHidden(){return this.items.every((t=>t.classList.contains("d-none")))}watchSelectedIndices(t){this.value=t;this.updateSelection()}watchValue(t){this.selectedIndices=t;this.updateSelection()}onItemClicked(t){const e=t.detail;this.itemClick(e)}itemClick(t){this.value=this.toggleValue(t);this.updateSelection();this.emitValueChange()}emitAddItem(t){if(t.trim()===""){return}const e=document.createElement("ix-select-item");e.value=t;e.label=t;this.addItemRef.appendChild(e);this.clearInput();this.itemClick(t);this.addItem.emit(t)}toggleValue(t){if(!this.isMultipleMode){return t}if(!this.value){return[t]}let e=this.value;if(!Array.isArray(e)){e=[e]}if(e.includes(t)){return e.filter((e=>e!==t))}else{return[...e,t]}}updateSelection(){var t;let e=[];if(this.value){e=Array.isArray(this.value)?[...this.value]:[this.value]}this.items.forEach((t=>{t.selected=e.some((e=>e===t.value))}));this.selectedLabels=this.selectedItems.map((t=>t.label));if(this.isSingleMode){this.inputValue=((t=this.selectedLabels)===null||t===void 0?void 0:t.length)?this.selectedLabels[0]:null;return}this.inputValue=null}emitValueChange(){this.valueChange.emit(this.value);if(!this.value){this.itemSelectionChange.emit(null)}else{this.itemSelectionChange.emit(Array.isArray(this.value)?this.value:[this.value])}}componentDidLoad(){this.inputRef.addEventListener("input",(()=>{this.inputChange.emit(this.inputRef.value)}))}componentWillLoad(){if(this.selectedIndices&&!this.value){this.value=this.selectedIndices}this.updateSelection()}onLabelChange(t){t.preventDefault();t.stopImmediatePropagation();this.updateSelection()}disconnectedCallback(){if(this.labelMutationObserver){this.labelMutationObserver.disconnect()}}itemExists(t){return this.items.find((e=>e.label===t))}dropdownVisibilityChanged(t){this.dropdownShow=t.detail;this.hasFocus=t.detail;if(t.detail){this.inputRef.focus();this.inputRef.select();this.removeHiddenFromItems();this.isDropdownEmpty=this.isEveryDropdownItemHidden}else{this.navigationItem=undefined}}async onKeyDown(t){if(!this.dropdownShow){return}if(t.code==="ArrowDown"||t.code==="ArrowUp"){this.onArrowNavigation(t)}if(t.code==="Enter"||t.code==="NumpadEnter"){await this.onEnterNavigation()}if(t.code==="Escape"){this.dropdownShow=false}}async onEnterNavigation(){var t,e;if(this.isMultipleMode){return}if(this.editable&&!this.itemExists(this.inputFilterText)){this.emitAddItem(this.inputFilterText);this.navigationItem=this.items[this.items.length-1]}(t=this.navigationItem)===null||t===void 0?void 0:t.onItemClick();await((e=this.dropdownRef)===null||e===void 0?void 0:e.updatePosition());if(this.isSingleMode&&!this.editable){this.dropdownShow=false}}onArrowNavigation(t){t.stopPropagation();t.preventDefault();const e=this.items.find((t=>document.activeElement===t.querySelector("button")));this.navigationItem=e;const i=this.items.filter((t=>!t.classList.contains("d-none")));const s=i.indexOf(this.navigationItem);if(t.code==="ArrowDown"&&s<i.length-1){this.navigationItem=i[s+1]}else if(t.code==="ArrowUp"&&s>0){this.navigationItem=i[s-1]}this.setHoverEffectForNavigatedSelectItem()}setHoverEffectForNavigatedSelectItem(){var t;(t=this.navigationItem)===null||t===void 0?void 0:t.querySelector("button").focus()}filterItemsWithTypeahead(){this.inputFilterText=this.inputRef.value;if(this.inputFilterText){this.items.forEach((t=>{t.classList.remove("d-none");if(!t.label.toLowerCase().includes(this.inputFilterText.toLowerCase())){t.classList.add("d-none")}}))}else{this.removeHiddenFromItems()}this.isDropdownEmpty=this.isEveryDropdownItemHidden}removeHiddenFromItems(){this.items.forEach((t=>{t.classList.remove("d-none")}))}clearInput(){this.inputRef.value="";this.inputFilterText=""}clear(){this.clearInput();this.selectedLabels=[];this.value=[];this.valueChange.emit(null);this.dropdownShow=false}onInputBlur(t){if(this.editable){return}if(this.isSingleMode){if(this.dropdownShow&&this.isDropdownEmpty){this.dropdownShow=false}}if(!this.dropdownShow&&this.mode!=="multiple"){t.target["value"]=this.selectedLabels}}placeholderValue(){if(this.editable){return this.i18nPlaceholderEditable}if(this.readonly){return""}return this.i18nPlaceholder}isAddItemVisible(){return!this.itemExists(this.inputFilterText)&&this.editable&&this.inputFilterText}render(){var t,e,o;return i(s,null,i("div",{class:{select:true,focus:this.hasFocus,editable:this.editable,disabled:this.disabled,readonly:this.readonly},ref:t=>{this.dropdownAnchor=t;if(!this.editable)this.dropdownWrapperRef=t}},i("div",{class:"input-container"},i("div",{class:"chips"},this.isMultipleMode?(t=this.selectedItems)===null||t===void 0?void 0:t.map((t=>i("ix-filter-chip",{disabled:this.disabled||this.readonly,key:t.value,onCloseClick:e=>{e.preventDefault();e.stopPropagation();this.itemClick(t.value)}},t.label))):"",i("div",{class:"trigger"},i("input",{"data-testid":"input",disabled:this.disabled,readOnly:this.readonly,type:"text",class:{"allow-clear":this.allowClear&&!!((e=this.selectedLabels)===null||e===void 0?void 0:e.length)},placeholder:this.placeholderValue(),value:this.inputValue,ref:t=>this.inputRef=t,onBlur:t=>this.onInputBlur(t),onInput:()=>this.filterItemsWithTypeahead()}),this.allowClear&&(((o=this.selectedLabels)===null||o===void 0?void 0:o.length)||this.inputFilterText)?i("ix-icon-button",{class:"clear",icon:"clear",ghost:true,oval:true,size:"16",onClick:t=>{t.preventDefault();t.stopPropagation();this.clear()}}):null,this.disabled||this.readonly?null:i("div",{class:"chevron-down-container",ref:t=>{if(this.editable)this.dropdownWrapperRef=t}},i("ix-icon",{class:"chevron",name:"chevron-down-small"})))))),i("ix-dropdown",{ref:t=>this.dropdownRef=t,show:this.dropdownShow,closeBehavior:this.isMultipleMode?"outside":"both",class:{"d-none":this.disabled||this.readonly},anchor:this.dropdownAnchor,trigger:this.dropdownWrapperRef,onShowChanged:t=>this.dropdownVisibilityChanged(t),placement:"bottom-start",overwriteDropdownStyle:async()=>({minWidth:`${this.hostElement.clientWidth}px`})},i("div",{class:{"select-list-header":true,hidden:this.hideListHeader||this.isDropdownEmpty},title:this.i18nSelectListHeader},this.i18nSelectListHeader),i("slot",null),i("div",{ref:t=>this.addItemRef=t,class:"d-contents"}),this.isAddItemVisible()?i("ix-dropdown-item",{"data-testid":"add-item",icon:"plus",class:{"add-item":true},label:this.inputFilterText,onItemClick:t=>{t.preventDefault();t.stopPropagation();this.emitAddItem(this.inputFilterText)}}):null,this.isDropdownEmpty&&!this.editable?i("div",{class:"select-list-header"},this.i18nNoMatches):""))}get hostElement(){return o(this)}static get watchers(){return{selectedIndices:["watchSelectedIndices"],value:["watchValue"]}}};r.style=n;class h extends CustomEvent{constructor(t){super("ix-select-item:labelChange",{bubbles:true,detail:t})}}const l=":host{display:block;position:relative}:host>ix-dropdown-item{width:100%}:host .select-item-checked{background-color:var(--theme-select-list-item--background--selected);--ix-dropdown-item-checked-color:var(--theme-color-std-text)}:host(.d-none){display:none}";const a=class{constructor(i){t(this,i);this.itemClick=e(this,"itemClick",7);this.label=undefined;this.value=undefined;this.selected=false;this.hover=false}async onItemClick(t){t===null||t===void 0?void 0:t.preventDefault();t===null||t===void 0?void 0:t.stopPropagation();this.itemClick.emit(this.value)}componentDidRender(){if(!this.value){throw Error("ix-select-item must have a `value` property")}}labelChange(t,e){this.hostElement.dispatchEvent(new h({newValue:t,oldValue:e}))}render(){return i(s,null,i("ix-dropdown-item",{class:{"select-item-checked":this.selected},checked:this.selected,label:this.label?this.label:this.value,onItemClick:t=>this.onItemClick(t)}))}get hostElement(){return o(this)}static get watchers(){return{label:["labelChange"]}}};a.style=l;export{r as ix_select,a as ix_select_item};
-//# sourceMappingURL=p-36f0b470.entry.js.map

package/dist/siemens-ix/p-36f0b470.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["selectCss","Select","items","Array","from","this","hostElement","querySelectorAll","selectedItems","filter","item","selected","addItemButton","querySelector","isSingleMode","mode","isMultipleMode","isEveryDropdownItemHidden","every","classList","contains","watchSelectedIndices","value","updateSelection","watchValue","selectedIndices","onItemClicked","event","newId","detail","itemClick","toggleValue","emitValueChange","emitAddItem","trim","newItem","document","createElement","label","addItemRef","appendChild","clearInput","addItem","emit","itemValue","isArray","includes","ids","forEach","some","i","selectedLabels","map","inputValue","_a","length","valueChange","itemSelectionChange","componentDidLoad","inputRef","addEventListener","inputChange","componentWillLoad","onLabelChange","preventDefault","stopImmediatePropagation","disconnectedCallback","labelMutationObserver","disconnect","itemExists","find","dropdownVisibilityChanged","dropdownShow","hasFocus","focus","select","removeHiddenFromItems","isDropdownEmpty","navigationItem","undefined","async","code","onArrowNavigation","onEnterNavigation","editable","inputFilterText","onItemClick","_b","dropdownRef","updatePosition","stopPropagation","focusItem","activeElement","selectItems","index","indexOf","setHoverEffectForNavigatedSelectItem","filterItemsWithTypeahead","remove","toLowerCase","add","clear","onInputBlur","e","target","placeholderValue","i18nPlaceholderEditable","readonly","i18nPlaceholder","isAddItemVisible","render","h","Host","class","disabled","ref","dropdownAnchor","dropdownWrapperRef","key","onCloseClick","readOnly","type","allowClear","placeholder","onBlur","onInput","_c","icon","ghost","oval","size","onClick","name","show","closeBehavior","anchor","trigger","onShowChanged","placement","overwriteDropdownStyle","minWidth","clientWidth","hidden","hideListHeader","title","i18nSelectListHeader","i18nNoMatches","IxSelectItemLabelChangeEvent","CustomEvent","constructor","super","bubbles","selectItemCss","SelectItem","componentDidRender","Error","labelChange","newValue","oldValue","dispatchEvent","checked"],"sources":["./src/components/select/select.scss?tag=ix-select&encapsulation=shadow","./src/components/select/select.tsx","./src/components/select-item/events.ts","./src/components/select-item/select-item.scss?tag=ix-select-item&encapsulation=shadow","./src/components/select-item/select-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 '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: inline-block;\n  position: relative;\n  height: auto;\n  border-radius: var(--theme-input--border-radius);\n\n  .d-none {\n    display: none;\n  }\n\n  .select {\n    position: relative;\n    display: flex;\n    align-items: center;\n    height: auto;\n    background-color: var(--theme-input--background);\n    border: var(--theme-input--border-thickness) solid\n      var(--theme-input--border-color);\n    border-radius: var(--theme-input--border-radius);\n    padding: 0 0 0 $small-space;\n    box-shadow: var(--theme-inset-shadow-1) !important;\n\n    @include hover {\n      background-color: var(--theme-input--background--hover);\n      border-color: var(--theme-input--border-color--hover);\n    }\n\n    &:focus-within {\n      background-color: var(--theme-input--background--focus);\n      border-color: var(--theme-input--border-color--focus);\n      outline: 1px solid #119fff;\n      outline-offset: var(--theme-input--focus--outline-offset);\n    }\n  }\n\n  .select.readonly {\n    box-shadow: none !important;\n    border: none;\n    border-radius: 0px;\n    border-bottom: var(--theme-input--border-thickness) solid\n      var(--theme-color-weak-bdr);\n\n    &,\n    &:hover,\n    &:active {\n      background-color: transparent !important;\n    }\n\n    &:focus,\n    &:focus-within,\n    &:focus-visible {\n      outline: none;\n    }\n\n    input {\n      color: var(--theme-color-weak-text);\n    }\n\n    input:focus,\n    input:focus-visible {\n      outline: none;\n    }\n  }\n\n  .hidden {\n    display: none !important;\n  }\n\n  .trigger {\n    display: flex;\n    align-items: center;\n    flex-grow: 1;\n    height: 100%;\n  }\n\n  .input-container {\n    display: flex;\n    position: relative;\n    align-items: flex-start;\n    width: 100%;\n\n    .chips {\n      position: relative;\n      display: flex;\n      align-items: center;\n      flex-wrap: wrap;\n      height: 100%;\n      max-height: 3.5rem;\n      flex-grow: 1;\n      overflow-y: auto;\n\n      > ix-filter-chip {\n        margin: 0.1rem;\n      }\n    }\n\n    input {\n      @include ellipsis;\n      @include text-default;\n      background: transparent;\n      height: 1.75rem;\n      width: 100%;\n\n      &,\n      &:hover,\n      &:focus-visible {\n        border: none;\n        outline: none;\n      }\n\n      &::placeholder {\n        color: var(--theme-input-select-icon--color);\n      }\n\n      &.hide-placeholder::placeholder {\n        opacity: 0;\n      }\n    }\n  }\n\n  .chevron-down-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 2rem;\n    min-width: 2rem;\n    height: 2rem;\n\n    @include hover {\n      color: var(--theme-color-dynamic--hover);\n    }\n\n    @include active {\n      color: var(--theme-color-dynamic--hover);\n    }\n  }\n\n  .editable {\n    .chevron-down-container {\n      @include hover {\n        color: var(--theme-color-std-text);\n        background-color: var(\n          --theme-btn-invisible-secondary--background--hover\n        );\n      }\n\n      @include active {\n        color: var(--theme-color-std-text);\n        background-color: var(\n          --theme-btn-invisible-secondary--background--active\n        );\n      }\n    }\n  }\n\n  .add-item {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    position: relative;\n    width: 100%;\n  }\n\n  .select-list-header {\n    @include ellipsis;\n    display: flex;\n    align-items: center;\n    height: $default-control-height;\n    color: var(--theme-select-list-item-hint--color);\n    margin: 0 $small-space 0 1rem;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { IxSelectItemLabelChangeEvent } from '../select-item/events';\n\n@Component({\n  tag: 'ix-select',\n  styleUrl: 'select.scss',\n  shadow: true,\n})\nexport class Select {\n  @Element() hostElement!: HTMLIxSelectElement;\n\n  /**\n   * Indices of selected items.\n   * This corresponds to the value property of ix-select-items and therefor not necessarily the indices of the items in the list.\n   * @deprecated since 2.0.0. Use the `value` property instead.\n   */\n  @Prop({ mutable: true }) selectedIndices?: string | string[];\n\n  /**\n   * Current selected value.\n   * This corresponds to the value property of ix-select-items\n   * @since 2.0.0\n   */\n  @Prop({ mutable: true }) value?: string | string[];\n\n  /**\n   * Show clear button\n   */\n  @Prop() allowClear = false;\n\n  /**\n   * Selection mode\n   */\n  @Prop() mode: 'single' | 'multiple' = 'single';\n\n  /**\n   * Select is extendable\n   */\n  @Prop() editable = false;\n\n  /**\n   * If true the select will be in disabled state\n   */\n  @Prop() disabled = false;\n\n  /**\n   * If true the select will be in readonly mode\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Input field placeholder\n   */\n  @Prop() i18nPlaceholder = 'Select an option';\n\n  /**\n   * Input field placeholder for editable select\n   */\n  @Prop() i18nPlaceholderEditable = 'Type of select option';\n\n  /**\n   * Select list header\n   */\n  @Prop() i18nSelectListHeader = 'Please select an option';\n\n  /**\n   * Hint inside of dropdown if no items where found with current filter text\n   *\n   * @since 1.5.0\n   */\n  @Prop() i18nNoMatches = 'No matches';\n\n  /**\n   * Hide list header\n   *\n   * @since 1.5.0\n   @\n   */\n  @Prop() hideListHeader = false;\n\n  /**\n   * Value changed\n   * @since 2.0.0\n   */\n  @Event() valueChange: EventEmitter<string | string[]>;\n\n  /**\n   * Item selection changed\n   * @deprecated since 2.0.0. Use `valueChange` instead.\n   */\n  @Event() itemSelectionChange: EventEmitter<string[]>;\n\n  /**\n   * Event dispatched whenever the text input changes.\n   *\n   * @since 2.0.0\n   */\n  @Event() inputChange: EventEmitter<string>;\n\n  /**\n   * Item added to selection\n   */\n  @Event() addItem: EventEmitter<string>;\n\n  @State() dropdownShow = false;\n  @State() selectedLabels: string[];\n  @State() dropdownWrapperRef!: HTMLElement;\n  @State() dropdownAnchor!: HTMLElement;\n  @State() isDropdownEmpty = false;\n  @State() hasFocus = false;\n  @State() navigationItem: HTMLIxSelectItemElement;\n  @State() inputFilterText: string;\n  @State() inputValue: string;\n\n  private inputRef!: HTMLInputElement;\n  private dropdownRef!: HTMLIxDropdownElement;\n  private addItemRef!: HTMLDivElement;\n\n  private labelMutationObserver: MutationObserver;\n\n  get items() {\n    return Array.from(this.hostElement.querySelectorAll('ix-select-item'));\n  }\n\n  get selectedItems() {\n    return this.items.filter((item) => item.selected);\n  }\n\n  get addItemButton() {\n    return this.hostElement.querySelector('.add-item');\n  }\n\n  get isSingleMode() {\n    return this.mode === 'single';\n  }\n\n  get isMultipleMode() {\n    return this.mode === 'multiple';\n  }\n\n  get isEveryDropdownItemHidden() {\n    return this.items.every((item) => item.classList.contains('d-none'));\n  }\n\n  @Watch('selectedIndices')\n  watchSelectedIndices(value: string | string[]) {\n    this.value = value;\n    this.updateSelection();\n  }\n\n  @Watch('value')\n  watchValue(value: string | string[]) {\n    this.selectedIndices = value;\n    this.updateSelection();\n  }\n\n  @Listen('itemClick')\n  onItemClicked(event: CustomEvent<string>) {\n    const newId = event.detail;\n    this.itemClick(newId);\n  }\n\n  private itemClick(newId: string) {\n    this.value = this.toggleValue(newId);\n    this.updateSelection();\n    this.emitValueChange();\n  }\n\n  private emitAddItem(value: string) {\n    if (value.trim() === '') {\n      return;\n    }\n\n    const newItem = document.createElement('ix-select-item');\n    newItem.value = value;\n    newItem.label = value;\n\n    this.addItemRef.appendChild(newItem);\n\n    this.clearInput();\n    this.itemClick(value);\n    this.addItem.emit(value);\n  }\n\n  private toggleValue(itemValue: string) {\n    if (!this.isMultipleMode) {\n      return itemValue;\n    }\n\n    if (!this.value) {\n      return [itemValue];\n    }\n\n    let value = this.value;\n\n    if (!Array.isArray(value)) {\n      value = [value];\n    }\n\n    if (value.includes(itemValue)) {\n      return value.filter((value) => value !== itemValue);\n    } else {\n      return [...value, itemValue];\n    }\n  }\n\n  private updateSelection() {\n    let ids = [];\n\n    if (this.value) {\n      ids = Array.isArray(this.value) ? [...this.value] : [this.value];\n    }\n\n    this.items.forEach((item) => {\n      item.selected = ids.some((i) => i === item.value);\n    });\n\n    this.selectedLabels = this.selectedItems.map((item) => item.label);\n\n    if (this.isSingleMode) {\n      this.inputValue = this.selectedLabels?.length\n        ? this.selectedLabels[0]\n        : null;\n      return;\n    }\n\n    this.inputValue = null;\n  }\n\n  private emitValueChange() {\n    this.valueChange.emit(this.value);\n\n    if (!this.value) {\n      this.itemSelectionChange.emit(null);\n    } else {\n      this.itemSelectionChange.emit(\n        Array.isArray(this.value) ? this.value : [this.value]\n      );\n    }\n  }\n\n  componentDidLoad() {\n    this.inputRef.addEventListener('input', () => {\n      this.inputChange.emit(this.inputRef.value);\n    });\n  }\n\n  componentWillLoad() {\n    if (this.selectedIndices && !this.value) {\n      this.value = this.selectedIndices;\n    }\n\n    this.updateSelection();\n  }\n\n  @Listen('ix-select-item:labelChange')\n  onLabelChange(event: IxSelectItemLabelChangeEvent) {\n    event.preventDefault();\n    event.stopImmediatePropagation();\n    this.updateSelection();\n  }\n\n  disconnectedCallback() {\n    if (this.labelMutationObserver) {\n      this.labelMutationObserver.disconnect();\n    }\n  }\n\n  private itemExists(item: string) {\n    return this.items.find((i) => i.label === item);\n  }\n\n  private dropdownVisibilityChanged(event: CustomEvent<boolean>) {\n    this.dropdownShow = event.detail;\n    this.hasFocus = event.detail;\n\n    if (event.detail) {\n      this.inputRef.focus();\n      this.inputRef.select();\n\n      this.removeHiddenFromItems();\n      this.isDropdownEmpty = this.isEveryDropdownItemHidden;\n    } else {\n      this.navigationItem = undefined;\n    }\n  }\n\n  @Listen('keydown', {\n    target: 'window',\n  })\n  async onKeyDown(event: KeyboardEvent) {\n    if (!this.dropdownShow) {\n      return;\n    }\n\n    if (event.code === 'ArrowDown' || event.code === 'ArrowUp') {\n      this.onArrowNavigation(event);\n    }\n\n    if (event.code === 'Enter' || event.code === 'NumpadEnter') {\n      await this.onEnterNavigation();\n    }\n\n    if (event.code === 'Escape') {\n      this.dropdownShow = false;\n    }\n  }\n\n  private async onEnterNavigation() {\n    if (this.isMultipleMode) {\n      return;\n    }\n\n    if (this.editable && !this.itemExists(this.inputFilterText)) {\n      this.emitAddItem(this.inputFilterText);\n      this.navigationItem = this.items[this.items.length - 1];\n    }\n\n    this.navigationItem?.onItemClick();\n    await this.dropdownRef?.updatePosition();\n\n    if (this.isSingleMode && !this.editable) {\n      this.dropdownShow = false;\n    }\n  }\n\n  private onArrowNavigation(event: KeyboardEvent) {\n    event.stopPropagation();\n    event.preventDefault();\n\n    const focusItem = this.items.find(\n      (item) => document.activeElement === item.querySelector('button')\n    );\n    this.navigationItem = focusItem;\n\n    const selectItems = this.items.filter(\n      (i) => !i.classList.contains('d-none')\n    );\n\n    const index = selectItems.indexOf(this.navigationItem);\n\n    if (event.code === 'ArrowDown' && index < selectItems.length - 1) {\n      this.navigationItem = selectItems[index + 1];\n    } else if (event.code === 'ArrowUp' && index > 0) {\n      this.navigationItem = selectItems[index - 1];\n    }\n\n    this.setHoverEffectForNavigatedSelectItem();\n  }\n\n  private setHoverEffectForNavigatedSelectItem() {\n    this.navigationItem?.querySelector('button').focus();\n  }\n\n  private filterItemsWithTypeahead() {\n    this.inputFilterText = this.inputRef.value;\n\n    if (this.inputFilterText) {\n      this.items.forEach((item) => {\n        item.classList.remove('d-none');\n        if (\n          !item.label.toLowerCase().includes(this.inputFilterText.toLowerCase())\n        ) {\n          item.classList.add('d-none');\n        }\n      });\n    } else {\n      this.removeHiddenFromItems();\n    }\n\n    this.isDropdownEmpty = this.isEveryDropdownItemHidden;\n  }\n\n  private removeHiddenFromItems() {\n    this.items.forEach((item) => {\n      item.classList.remove('d-none');\n    });\n  }\n\n  private clearInput() {\n    this.inputRef.value = '';\n    this.inputFilterText = '';\n  }\n\n  private clear() {\n    this.clearInput();\n    this.selectedLabels = [];\n    this.value = [];\n    this.valueChange.emit(null);\n    this.dropdownShow = false;\n  }\n\n  private onInputBlur(e) {\n    if (this.editable) {\n      return;\n    }\n\n    if (this.isSingleMode) {\n      if (this.dropdownShow && this.isDropdownEmpty) {\n        this.dropdownShow = false;\n      }\n    }\n\n    if (!this.dropdownShow && this.mode !== 'multiple') {\n      e.target['value'] = this.selectedLabels;\n    }\n  }\n\n  private placeholderValue() {\n    if (this.editable) {\n      return this.i18nPlaceholderEditable;\n    }\n\n    if (this.readonly) {\n      return '';\n    }\n\n    return this.i18nPlaceholder;\n  }\n\n  private isAddItemVisible() {\n    return (\n      !this.itemExists(this.inputFilterText) &&\n      this.editable &&\n      this.inputFilterText\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            select: true,\n            focus: this.hasFocus,\n            editable: this.editable,\n            disabled: this.disabled,\n            readonly: this.readonly,\n          }}\n          ref={(ref) => {\n            this.dropdownAnchor = ref;\n            if (!this.editable) this.dropdownWrapperRef = ref;\n          }}\n        >\n          <div class=\"input-container\">\n            <div class=\"chips\">\n              {this.isMultipleMode\n                ? this.selectedItems?.map((item) => (\n                    <ix-filter-chip\n                      disabled={this.disabled || this.readonly}\n                      key={item.value}\n                      onCloseClick={(e) => {\n                        e.preventDefault();\n                        e.stopPropagation();\n                        this.itemClick(item.value);\n                      }}\n                    >\n                      {item.label}\n                    </ix-filter-chip>\n                  ))\n                : ''}\n              <div class=\"trigger\">\n                <input\n                  data-testid=\"input\"\n                  disabled={this.disabled}\n                  readOnly={this.readonly}\n                  type=\"text\"\n                  class={{\n                    'allow-clear':\n                      this.allowClear && !!this.selectedLabels?.length,\n                  }}\n                  placeholder={this.placeholderValue()}\n                  value={this.inputValue}\n                  ref={(ref) => (this.inputRef = ref)}\n                  onBlur={(e) => this.onInputBlur(e)}\n                  onInput={() => this.filterItemsWithTypeahead()}\n                />\n                {this.allowClear &&\n                (this.selectedLabels?.length || this.inputFilterText) ? (\n                  <ix-icon-button\n                    class=\"clear\"\n                    icon=\"clear\"\n                    ghost\n                    oval\n                    size=\"16\"\n                    onClick={(e) => {\n                      e.preventDefault();\n                      e.stopPropagation();\n                      this.clear();\n                    }}\n                  />\n                ) : null}\n                {this.disabled || this.readonly ? null : (\n                  <div\n                    class=\"chevron-down-container\"\n                    ref={(ref) => {\n                      if (this.editable) this.dropdownWrapperRef = ref;\n                    }}\n                  >\n                    <ix-icon class=\"chevron\" name=\"chevron-down-small\" />\n                  </div>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n        <ix-dropdown\n          ref={(ref) => (this.dropdownRef = ref)}\n          show={this.dropdownShow}\n          closeBehavior={this.isMultipleMode ? 'outside' : 'both'}\n          class={{\n            'd-none': this.disabled || this.readonly,\n          }}\n          anchor={this.dropdownAnchor}\n          trigger={this.dropdownWrapperRef}\n          onShowChanged={(e) => this.dropdownVisibilityChanged(e)}\n          placement=\"bottom-start\"\n          overwriteDropdownStyle={async () => {\n            return {\n              minWidth: `${this.hostElement.clientWidth}px`,\n            };\n          }}\n        >\n          <div\n            class={{\n              'select-list-header': true,\n              hidden: this.hideListHeader || this.isDropdownEmpty,\n            }}\n            title={this.i18nSelectListHeader}\n          >\n            {this.i18nSelectListHeader}\n          </div>\n          <slot></slot>\n          <div ref={(ref) => (this.addItemRef = ref)} class=\"d-contents\"></div>\n          {this.isAddItemVisible() ? (\n            <ix-dropdown-item\n              data-testid=\"add-item\"\n              icon=\"plus\"\n              class={{\n                'add-item': true,\n              }}\n              label={this.inputFilterText}\n              onItemClick={(e) => {\n                e.preventDefault();\n                e.stopPropagation();\n                this.emitAddItem(this.inputFilterText);\n              }}\n            ></ix-dropdown-item>\n          ) : null}\n          {this.isDropdownEmpty && !this.editable ? (\n            <div class=\"select-list-header\">{this.i18nNoMatches}</div>\n          ) : (\n            ''\n          )}\n        </ix-dropdown>\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 */\nexport class IxSelectItemLabelChangeEvent extends CustomEvent<{\n  oldValue: string;\n  newValue: string;\n}> {\n  constructor(detail: { oldValue: string; newValue: string }) {\n    super('ix-select-item:labelChange', {\n      bubbles: true,\n      detail,\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:host {\n  display: block;\n  position: relative;\n\n  > ix-dropdown-item {\n    width: 100%;\n  }\n\n  .select-item-checked {\n    background-color: var(--theme-select-list-item--background--selected);\n    --ix-dropdown-item-checked-color: var(--theme-color-std-text);\n  }\n}\n\n:host(.d-none) {\n  display: none;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { IxSelectItemLabelChangeEvent } from './events';\n\n@Component({\n  tag: 'ix-select-item',\n  styleUrl: 'select-item.scss',\n  shadow: true,\n})\nexport class SelectItem {\n  @Element() hostElement: HTMLIxSelectItemElement;\n\n  /**\n   * Displayed name of the item\n   */\n  @Prop({ reflect: true }) label: string;\n\n  /**\n   * Item value\n   */\n  @Prop({ reflect: true }) value!: any;\n\n  /**\n   * Whether the item is selected.\n   */\n  @Prop() selected = false;\n\n  /**\n   * @internal\n   */\n  @Prop() hover = false;\n\n  /**\n   * Item clicked\n   */\n  @Event() itemClick: EventEmitter<string>;\n\n  /**\n   * @internal\n   * @param event\n   */\n  @Method()\n  async onItemClick(event?: CustomEvent<HTMLIxDropdownItemElement>) {\n    event?.preventDefault();\n    event?.stopPropagation();\n\n    this.itemClick.emit(this.value);\n  }\n\n  componentDidRender() {\n    if (!this.value) {\n      throw Error('ix-select-item must have a `value` property');\n    }\n  }\n\n  @Watch('label')\n  labelChange(newValue: string, oldValue: string) {\n    this.hostElement.dispatchEvent(\n      new IxSelectItemLabelChangeEvent({\n        newValue: newValue,\n        oldValue: oldValue,\n      })\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-dropdown-item\n          class={{\n            'select-item-checked': this.selected,\n          }}\n          checked={this.selected}\n          label={this.label ? this.label : this.value}\n          onItemClick={(e) => this.onItemClick(e)}\n        ></ix-dropdown-item>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/siemens-ix/p-37417714.js

@@ -1,2 +0,0 @@
-function r(r){return r&&r.__esModule&&Object.prototype.hasOwnProperty.call(r,"default")?r["default"]:r}function n(r,n,e){return e={path:n,exports:{},require:function(r,n){return t()}},r(e,e.exports),e.exports}function t(){throw new Error("Dynamic requires are not currently supported by @rollup/plugin-commonjs")}export{t as a,n as c,r as g};
-//# sourceMappingURL=p-37417714.js.map

package/dist/siemens-ix/p-37dd62fc.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as o,H as t,g as i}from"./p-76a509c7.js";import{m as s,a as r}from"./p-8e39298f.js";import"./p-1b705d7b.js";import"./p-9ee41861.js";const a=":host{display:flex;align-items:center;position:relative;width:100%;height:2.75rem;min-height:2.75rem;padding-left:1rem;color:var(--theme-app-header--color);background-color:var(--theme-app-header--background);border-bottom:var(--theme-app-header--border-width) solid var(--theme-app-header--border-color);z-index:var(--theme-z-index-fixed)}:host .name{margin-left:2.5rem;margin-right:2.5rem;color:var(--theme-app-header--color)}:host .logo{display:inline-flex;align-items:center;position:relative;height:32px;overflow:hidden;line-height:0rem;color:var(--theme-app-header-logo--color)}:host(.breakpoint-sm){padding-left:0.5rem}:host(.breakpoint-sm) .logo{margin-left:0.5rem}";const n=class{constructor(o){e(this,o);this.name=undefined;this.breakpoint="lg";this.menuExpanded=false}componentWillLoad(){this.menuDisposable=s.expandChange.on((e=>{this.menuExpanded=e}));this.modeDisposable=r.onChange.on((e=>{this.breakpoint=e}));this.breakpoint=r.breakpoint}componentDidLoad(){this.attachSiemensLogoIfLoaded()}disconnectedCallback(){var e,o;(e=this.menuDisposable)===null||e===void 0?void 0:e.dispose();(o=this.modeDisposable)===null||o===void 0?void 0:o.dispose()}isLogoSlotted(){const e=this.hostElement.shadowRoot.querySelector('slot[name="logo"]');const o=e.assignedNodes({flatten:true});return o.length!==0}async attachSiemensLogoIfLoaded(){await window.customElements.whenDefined("ix-siemens-logo");const e=document.createElement("ix-siemens-logo");if(!this.isLogoSlotted()){this.hostElement.shadowRoot.querySelector(".logo").appendChild(e)}}async onMenuClick(){s.toggle()}render(){return o(t,{class:{[`breakpoint-${this.breakpoint}`]:true},slot:"application-header"},this.breakpoint==="sm"?o("ix-burger-menu",{onClick:()=>this.onMenuClick(),expanded:this.menuExpanded}):null,o("div",{class:"logo"},o("slot",{name:"logo"})),o("div",{class:"name"},this.name),o("slot",null))}get hostElement(){return i(this)}};n.style=a;export{n as ix_application_header};
-//# sourceMappingURL=p-37dd62fc.entry.js.map

package/dist/siemens-ix/p-37dd62fc.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["applicationHeaderCss","ApplicationHeader","componentWillLoad","this","menuDisposable","menuController","expandChange","on","show","menuExpanded","modeDisposable","applicationLayoutService","onChange","mode","breakpoint","componentDidLoad","attachSiemensLogoIfLoaded","disconnectedCallback","_a","dispose","_b","isLogoSlotted","slotElement","hostElement","shadowRoot","querySelector","nodes","assignedNodes","flatten","length","async","window","customElements","whenDefined","logoElement","document","createElement","appendChild","toggle","render","h","Host","class","slot","onClick","onMenuClick","expanded","name"],"sources":["./src/components/application-header/application-header.scss?tag=ix-application-header&encapsulation=shadow","./src/components/application-header/application-header.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n  display: flex;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  height: 2.75rem;\n  min-height: 2.75rem;\n  padding-left: 1rem;\n\n  color: var(--theme-app-header--color);\n  background-color: var(--theme-app-header--background);\n\n  border-bottom: var(--theme-app-header--border-width) solid\n    var(--theme-app-header--border-color);\n\n  z-index: var(--theme-z-index-fixed);\n\n  .name {\n    margin-left: 2.5rem;\n    margin-right: 2.5rem;\n    color: var(--theme-app-header--color);\n  }\n\n  .logo {\n    display: inline-flex;\n    align-items: center;\n    position: relative;\n    height: 32px;\n    overflow: hidden;\n    line-height: 0rem;\n    color: var(--theme-app-header-logo--color);\n  }\n}\n\n:host(.breakpoint-sm) {\n  padding-left: 0.5rem;\n\n  .logo {\n    margin-left: 0.5rem;\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 } from '@stencil/core';\nimport { applicationLayoutService } from '../utils/application-layout';\nimport { Breakpoint } from '../utils/breakpoints';\nimport { menuController } from '../utils/menu-service/menu-service';\nimport { Disposable } from '../utils/typed-event';\n\n@Component({\n  tag: 'ix-application-header',\n  styleUrl: 'application-header.scss',\n  shadow: true,\n})\nexport class ApplicationHeader {\n  @Element() hostElement!: HTMLIxApplicationHeaderElement;\n\n  /**\n   * Application name\n   */\n  @Prop() name: string;\n\n  @State() breakpoint: Breakpoint = 'lg';\n  @State() menuExpanded = false;\n\n  private menuDisposable?: Disposable;\n  private modeDisposable?: Disposable;\n\n  componentWillLoad() {\n    this.menuDisposable = menuController.expandChange.on((show) => {\n      this.menuExpanded = show;\n    });\n\n    this.modeDisposable = applicationLayoutService.onChange.on((mode) => {\n      this.breakpoint = mode;\n    });\n    this.breakpoint = applicationLayoutService.breakpoint;\n  }\n\n  componentDidLoad() {\n    this.attachSiemensLogoIfLoaded();\n  }\n\n  disconnectedCallback() {\n    this.menuDisposable?.dispose();\n    this.modeDisposable?.dispose();\n  }\n\n  private isLogoSlotted() {\n    const slotElement = this.hostElement.shadowRoot.querySelector(\n      'slot[name=\"logo\"]'\n    ) as HTMLSlotElement;\n    const nodes = slotElement.assignedNodes({\n      flatten: true,\n    });\n\n    return nodes.length !== 0;\n  }\n\n  private async attachSiemensLogoIfLoaded() {\n    await window.customElements.whenDefined('ix-siemens-logo');\n    const logoElement = document.createElement('ix-siemens-logo');\n    if (!this.isLogoSlotted()) {\n      this.hostElement.shadowRoot\n        .querySelector('.logo')\n        .appendChild(logoElement);\n    }\n  }\n\n  private async onMenuClick() {\n    menuController.toggle();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{ [`breakpoint-${this.breakpoint}`]: true }}\n        slot=\"application-header\"\n      >\n        {this.breakpoint === 'sm' ? (\n          <ix-burger-menu\n            onClick={() => this.onMenuClick()}\n            expanded={this.menuExpanded}\n          ></ix-burger-menu>\n        ) : null}\n        <div class=\"logo\">\n          <slot name=\"logo\"></slot>\n        </div>\n        <div class=\"name\">{this.name}</div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oJAAA,MAAMA,EAAuB,oqB,MCoBhBC,EAAiB,M,6DAQM,K,kBACV,K,CAKxBC,oBACEC,KAAKC,eAAiBC,EAAeC,aAAaC,IAAIC,IACpDL,KAAKM,aAAeD,CAAI,IAG1BL,KAAKO,eAAiBC,EAAyBC,SAASL,IAAIM,IAC1DV,KAAKW,WAAaD,CAAI,IAExBV,KAAKW,WAAaH,EAAyBG,U,CAG7CC,mBACEZ,KAAKa,2B,CAGPC,uB,SACEC,EAAAf,KAAKC,kBAAc,MAAAc,SAAA,SAAAA,EAAEC,WACrBC,EAAAjB,KAAKO,kBAAc,MAAAU,SAAA,SAAAA,EAAED,S,CAGfE,gBACN,MAAMC,EAAcnB,KAAKoB,YAAYC,WAAWC,cAC9C,qBAEF,MAAMC,EAAQJ,EAAYK,cAAc,CACtCC,QAAS,OAGX,OAAOF,EAAMG,SAAW,C,CAGlBC,wCACAC,OAAOC,eAAeC,YAAY,mBACxC,MAAMC,EAAcC,SAASC,cAAc,mBAC3C,IAAKjC,KAAKkB,gBAAiB,CACzBlB,KAAKoB,YAAYC,WACdC,cAAc,SACdY,YAAYH,E,EAIXJ,oBACNzB,EAAeiC,Q,CAGjBC,SACE,OACEC,EAACC,EAAI,CACHC,MAAO,CAAE,CAAC,cAAcvC,KAAKW,cAAe,MAC5C6B,KAAK,sBAEJxC,KAAKW,aAAe,KACnB0B,EAAA,kBACEI,QAAS,IAAMzC,KAAK0C,cACpBC,SAAU3C,KAAKM,eAEf,KACJ+B,EAAA,OAAKE,MAAM,QACTF,EAAA,QAAMO,KAAK,UAEbP,EAAA,OAAKE,MAAM,QAAQvC,KAAK4C,MACxBP,EAAA,a"}

package/dist/siemens-ix/p-3983ee89.entry.js

@@ -1,2 +0,0 @@
-import{r as a,h as t,H as i,g as r}from"./p-76a509c7.js";const e=":host{display:flex;position:relative;width:-moz-fit-content;width:fit-content}:host .avatar{display:flex;align-items:center}:host .avatar>.avatar-image{height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px}:host .avatar>.avatar-initials{display:flex;align-items:center;justify-content:center;height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px;background-color:var(--theme-color-component-3)}:host .avatar #avatar-path-background{fill:var(--theme-avatar--background)}:host .avatar #avatar-path-person{fill:var(--theme-color-4)}";function s(a){const{initials:i}=a;if(i){return t("div",{class:"avatar-initials"},i)}return t("svg",{class:"avatar-image",xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",viewBox:"0 0 32 32"},t("g",{fill:"none","fill-rule":"evenodd"},t("path",{id:"avatar-path-background",d:"M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n          16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z"}),t("path",{id:"avatar-path-person",d:"M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n        6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n        9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n        6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z"})))}const n=class{constructor(t){a(this,t);this.image=undefined;this.initials=undefined}render(){return t(i,null,t("li",{class:"avatar"},this.image?t("img",{src:this.image,class:"avatar-image"}):t(s,{initials:this.initials})))}get hostElement(){return r(this)}};n.style=e;export{n as ix_avatar};
-//# sourceMappingURL=p-3983ee89.entry.js.map

package/dist/siemens-ix/p-3983ee89.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["avatarCss","DefaultAvatar","props","initials","h","class","xmlns","width","height","viewBox","fill","id","d","Avatar","render","Host","this","image","src"],"sources":["./src/components/avatar/avatar.scss?tag=ix-avatar&encapsulation=shadow","./src/components/avatar/avatar.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/hover';\n\n:host {\n  display: flex;\n  position: relative;\n  width: fit-content;\n\n  .avatar {\n    display: flex;\n    align-items: center;\n\n    > .avatar-image {\n      height: 2rem;\n      width: 2rem;\n      min-height: 2rem;\n      min-width: 2rem;\n      border-radius: 100px;\n    }\n\n    > .avatar-initials {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 2rem;\n      width: 2rem;\n      min-height: 2rem;\n      min-width: 2rem;\n      border-radius: 100px;\n      background-color: var(--theme-color-component-3);\n    }\n\n    #avatar-path-background {\n      fill: var(--theme-avatar--background);\n    }\n\n    #avatar-path-person {\n      fill: var(--theme-color-4);\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\nfunction DefaultAvatar(props: { initials?: string }) {\n  const { initials } = props;\n\n  if (initials) {\n    return <div class={'avatar-initials'}>{initials}</div>;\n  }\n\n  return (\n    <svg\n      class={'avatar-image'}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n      viewBox=\"0 0 32 32\"\n    >\n      <g fill=\"none\" fill-rule=\"evenodd\">\n        <path\n          id=\"avatar-path-background\"\n          d=\"M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n          16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z\"\n        />\n        <path\n          id=\"avatar-path-person\"\n          d=\"M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n        6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n        9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n        6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z\"\n        />\n      </g>\n    </svg>\n  );\n}\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-avatar',\n  styleUrl: 'avatar.scss',\n  shadow: true,\n})\nexport class Avatar {\n  @Element() hostElement: HTMLIxAvatarElement;\n\n  /**\n   * Display a avatar image\n   *\n   */\n  @Prop() image: string;\n\n  /**\n   * Display the initials of the user. Will be overwritten by image\n   *\n   */\n  @Prop() initials: string;\n\n  render() {\n    return (\n      <Host>\n        <li class=\"avatar\">\n          {this.image ? (\n            <img src={this.image} class=\"avatar-image\"></img>\n          ) : (\n            <DefaultAvatar initials={this.initials} />\n          )}\n        </li>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAY,4jBCSlB,SAASC,EAAcC,GACrB,MAAMC,SAAEA,GAAaD,EAErB,GAAIC,EAAU,CACZ,OAAOC,EAAA,OAAKC,MAAO,mBAAoBF,E,CAGzC,OACEC,EAAA,OACEC,MAAO,eACPC,MAAM,6BACNC,MAAM,KACNC,OAAO,KACPC,QAAQ,aAERL,EAAA,KAAGM,KAAK,OAAM,YAAW,WACvBN,EAAA,QACEO,GAAG,yBACHC,EAAE,qIAGJR,EAAA,QACEO,GAAG,qBACHC,EAAE,+TAQZ,C,MAYaC,EAAM,M,sEAejBC,SACE,OACEV,EAACW,EAAI,KACHX,EAAA,MAAIC,MAAM,UACPW,KAAKC,MACJb,EAAA,OAAKc,IAAKF,KAAKC,MAAOZ,MAAM,iBAE5BD,EAACH,EAAa,CAACE,SAAUa,KAAKb,Y"}

package/dist/siemens-ix/p-3dbeeecf.entry.js

@@ -1,2 +0,0 @@
-import{r as o,c as e,h as t,H as r,g as n}from"./p-76a509c7.js";import{B as i}from"./p-ab452b82.js";import{L as a,I as d}from"./p-6f819085.js";const l=":host{display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host button{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host ix-spinner{margin-right:0.25rem}:host ix-icon{margin-right:0.25rem}:host .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host(.disabled){cursor:default}:host .btn-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-primary,:host .btn-primary.focus,:host .btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}:host .btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):active,:host .btn-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):active,:host .btn-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}:host(.disabled) .btn-primary.disabled,:host(.disabled) .btn-primary:disabled{pointer-events:none;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}:host .btn-outline-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-primary,:host .btn-outline-primary.focus,:host .btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);--ix-button-color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}:host .btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-primary--border-color--hover);background-color:var(--theme-btn-outline-primary--background--hover);color:var(--theme-btn-outline-primary--color--hover)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):active,:host .btn-outline-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-primary--border-color--active);background-color:var(--theme-btn-outline-primary--background--active);color:var(--theme-btn-outline-primary--color--active)}:host(.disabled) .btn-outline-primary.disabled,:host(.disabled) .btn-outline-primary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-primary--color--disabled)}:host .btn-invisible-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-primary,:host .btn-invisible-primary.focus,:host .btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}:host .btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):active,:host .btn-invisible-primary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}:host(.disabled) .btn-invisible-primary.disabled,:host(.disabled) .btn-invisible-primary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-primary--color--disabled)}:host .btn-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-secondary,:host .btn-secondary.focus,:host .btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}:host .btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):active,:host .btn-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}:host(.disabled) .btn-secondary.disabled,:host(.disabled) .btn-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}:host .btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-secondary,:host .btn-outline-secondary.focus,:host .btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);--ix-button-color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}:host .btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-secondary--border-color--hover);background-color:var(--theme-btn-outline-secondary--background--hover);color:var(--theme-btn-outline-secondary--color--hover)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):active,:host .btn-outline-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-secondary--border-color--active);background-color:var(--theme-btn-outline-secondary--background--active);color:var(--theme-btn-outline-secondary--color--active)}:host(.disabled) .btn-outline-secondary.disabled,:host(.disabled) .btn-outline-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-secondary--color--disabled)}:host .btn-invisible-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-secondary,:host .btn-invisible-secondary.focus,:host .btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);--ix-button-color:var(--theme-btn-invisible-secondary--color);border-color:transparent}:host .btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-secondary--background--active);color:var(--theme-btn-invisible-secondary--color--active)}:host(.disabled) .btn-invisible-secondary.disabled,:host(.disabled) .btn-invisible-secondary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}:host{min-width:5rem}.dropdown-group{margin:0.687rem;display:block;position:relative;width:21.562rem;border-radius:0.25rem;background-color:#f8f9fa;border:solid 0.062rem rgba(0, 0, 0, 0.25)}.dropdown-group .dropdown-group-title{display:block;position:relative;font-size:0.875rem;text-align:left;margin:0.937rem 0 1.25rem 0.937rem}.dropdown-group .dropdown-group-content{position:relative;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;height:11.562rem;margin:0.937rem 0 0.937rem 0.937rem}.dropdown-group .dropdown-group-content>*{margin-bottom:1rem}.dropdown-group-submit{display:flex;justify-content:space-between;margin:0 0.687rem 0 0.687rem}.dropdown-menu{position:absolute;background-color:var(--theme-menu--background);-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);border:var(--theme-menu--border-thickness) solid var(--theme-menu--border--color);border-radius:var(--theme-menu--border-radius);max-width:100vw;padding:0.25rem 0;transition:background-color 150ms;box-shadow:var(--theme-menu--box-shadow)}.dropdown-menu.xl>.dropdown-item{height:2.5rem;line-height:2.187rem}.dropdown-header{display:flex;align-items:center;height:2.5rem;color:var(--theme-menu-header--color);padding:0 1rem}.dropdown-buttons{display:flex;padding:0.25rem 0.5rem}.dropdown-buttons ix-icon-button+ix-icon-button{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem}.dropdown-item{display:flex;height:2.5rem;position:relative;align-items:center;cursor:pointer;padding:0 2rem;border:1px solid transparent;color:var(--theme-menu-item--color);background-color:transparent}.dropdown-item:focus-visible{background-color:var(--theme-menu-item--background);color:var(--theme-menu-item--color)}.dropdown-item:focus-visible{outline:none;background-color:var(--theme-menu-item--background);border-color:#119fff;color:var(--theme-menu-item--color--focus)}.dropdown-item:not(.disabled):not(:disabled){cursor:pointer}.dropdown-item:not(.disabled):not(:disabled):hover{color:var(--theme-menu-item--color--hover);background-color:var(--theme-menu-item--background--hover)}.dropdown-item:not(.disabled):not(:disabled){cursor:pointer}.dropdown-item:not(.disabled):not(:disabled):active,.dropdown-item:not(.disabled):not(:disabled).active{color:var(--theme-menu-item--color--active);background-color:var(--theme-menu-item--background--active)}.dropdown-item.disabled,.dropdown-item:disabled{color:var(--theme-menu-item--color--disabled);background-color:var(--theme-menu-item--background--disabled)}.dropdown-item>a,.dropdown-item a:hover,.dropdown-item a:active{color:var(--theme-color-std-text)}.dropdown-item>.glyph{color:var(--theme-menu-item-icon--color);-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}.dropdown-item>.glyph.disabled{color:var(--color-weak-text)}.dropdown-item>.glyph.glyph-single-check{color:var(--theme-menu-item-icon-check--color)}.dropdown-item>input[type=checkbox]+label{margin-bottom:0px}.dropdown-item>input[type=checkbox]+label::before{margin-right:1rem}.dropdown-divider{border-top:1px solid var(--theme-menu-separator--background);margin:0.25rem 0}button.dropdown-toggle{position:relative;padding-right:1.5rem}button.dropdown-toggle::after{position:absolute;top:45%;right:0.5rem}.form-control,.form-control-plaintext{-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);color:var(--theme-input--color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--theme-input--border-radius);height:2rem;min-height:2rem;min-width:2rem;background-color:var(--theme-input--background);border:solid 1px var(--theme-input--border-color);box-shadow:var(--theme-input--box-shadow);-webkit-padding-start:0.5rem;padding-inline-start:0.5rem;-webkit-padding-end:0.5rem;padding-inline-end:0.5rem}.form-control::-moz-placeholder,.form-control-plaintext::-moz-placeholder{color:var(--theme-input-hint--color)}.form-control::placeholder,.form-control-plaintext::placeholder{color:var(--theme-input-hint--color)}.form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),.form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}.form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),.form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}.form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover);cursor:auto}.form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover);cursor:auto}.form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,.form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline-offset:var(--theme-input--focus--outline-offset);box-shadow:var(--theme-input--box-shadow);outline:1px solid var(--theme-color-focus-bdr)}.form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,.form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline-offset:var(--theme-input--focus--outline-offset);box-shadow:var(--theme-input--box-shadow);outline:1px solid var(--theme-color-focus-bdr)}.form-control:focus-visible{color:var(--theme-input--color)}.form-control[type=number]{text-align:right}.form-control[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}.form-control.readonly,.form-control[readonly]{background:transparent !important;-webkit-border-before:none !important;border-block-start:none !important;-webkit-border-start:none !important;border-inline-start:none !important;-webkit-border-end:none !important;border-inline-end:none !important;border-radius:0rem}.form-control:-moz-read-only{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}.form-control:read-only,.form-control[readonly],.form-control[readOnly],.form-control.readonly{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}.form-control:read-only::-moz-placeholder,.form-control[readonly]::-moz-placeholder,.form-control[readOnly]::-moz-placeholder,.form-control.readonly::-moz-placeholder{color:transparent}.form-control:-moz-read-only::placeholder{color:transparent}.form-control:read-only::placeholder,.form-control[readonly]::placeholder,.form-control[readOnly]::placeholder,.form-control.readonly::placeholder{color:transparent}.form-control:disabled,.form-control.disabled{background:transparent !important;-webkit-border-before:none !important;border-block-start:none !important;-webkit-border-start:none !important;border-inline-start:none !important;-webkit-border-end:none !important;border-inline-end:none !important;border-radius:0rem;color:var(--theme-color-weak-text);border-color:var(--theme-input--border-color-bottom--disabled)}.form-control:disabled::-moz-placeholder,.form-control.disabled::-moz-placeholder{color:transparent}.form-control:disabled::placeholder,.form-control.disabled::placeholder{color:transparent}.form-control-plaintext{outline:0}.form-group{position:relative}.input-wrapper{display:flex;position:relative;align-items:center;flex-wrap:nowrap}.input-wrapper>.glyph{display:block;position:absolute;-webkit-margin-start:0.312rem;margin-inline-start:0.312rem;color:var(--theme-color-std-text)}.input-wrapper>input{-webkit-padding-start:2.2rem;padding-inline-start:2.2rem}select.form-control{padding:0 0.312rem}textarea.form-control{padding:0.375rem 0.5rem}.was-validated .form-control:invalid,.was-validated .is-invalid{background-color:var(--theme-input-error--background);background-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 62 (101010) - https://sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\") !important;background-position:left calc(0.375em + 0.1875rem) center !important;padding-right:0.75rem;padding-left:calc(1.5em + 0.75rem);background-size:18px;background-repeat:no-repeat}input.disabled,input:disabled{color:var(--theme-input--color--disabled)}input:-moz-read-only{cursor:default}input:read-only,input.readonly{cursor:default}label{color:var(--theme-color-soft-text)}input,input:-webkit-autofill{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-input--background) inset !important;-webkit-text-fill-color:var(--theme-input--color) !important;border-color:var(--theme-input--border-color) !important}input::-moz-placeholder{color:var(--theme-input-hint--color)}input::placeholder{color:var(--theme-input-hint--color)}input.hover,input:hover{border-color:var(--theme-input--border-color--hover);background-color:var(--theme-input--background--hover)}input.focus,input:focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus)}input:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only,input:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input:disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}input[type=number]{text-align:right}input[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}textarea{height:3.25rem;padding:0.375rem 1.25rem 0.375rem 0.5rem}textarea,textarea:-webkit-autofill{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-input--background) inset !important;-webkit-text-fill-color:var(--theme-input--color) !important;border-color:var(--theme-input--border-color) !important}textarea::-moz-placeholder{color:var(--theme-input-hint--color)}textarea::placeholder{color:var(--theme-input-hint--color)}textarea.hover,textarea:hover{border-color:var(--theme-input--border-color--hover);background-color:var(--theme-input--background--hover)}textarea.focus,textarea:focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus)}textarea:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only,textarea:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea:disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}textarea~.valid-feedback,textarea~.invalid-feedback,input~.valid-feedback,input~.invalid-feedback{display:none;font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}form textarea~.valid-feedback,form input~.valid-feedback{color:var(--theme-color-success)}form textarea~.invalid-feedback,form input~.invalid-feedback{color:var(--theme-color-alarm-text)}form:not([novalidate]) :invalid,form:not([novalidate]) .is-invalid,form.was-validated :invalid,form.was-validated .is-invalid{background-color:var(--theme-input-error--background);border-color:var(--theme-input-error--border-color);background-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 62 (101010) - https://sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\") !important;background-position:left calc(0.375em + 0.1875rem) center;padding-right:0.75rem;padding-left:calc(1.5em + 0.75rem);background-size:18px;background-repeat:no-repeat}form:not([novalidate]) :invalid~.invalid-feedback,form:not([novalidate]) .is-invalid~.invalid-feedback,form.was-validated :invalid~.invalid-feedback,form.was-validated .is-invalid~.invalid-feedback{display:block}form:not([novalidate]) :valid~.valid-feedback,form:not([novalidate]) .is-valid~.valid-feedback,form.was-validated :valid~.valid-feedback,form.was-validated .is-valid~.valid-feedback{display:block}:host{display:block;position:relative;height: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 :host(:focus-visible:not(.disabled):not(:disabled)){border-color:var(--theme-color-primary);box-shadow:0 0 0.25rem 0 var(--theme-color-primary) !important}:host .reset-button{position:absolute;top:0.25rem;right:0.25rem}:host .reset-button.hide-reset-button{display:none}:host .input-container{display:flex;height:auto;max-height:3.75rem;padding:1px 1.5rem 1px 2rem !important}:host .input-container:not(.readonly):not(.disabled),:host .input-container:not(.readonly):not(.disabled):-webkit-autofill{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}:host .input-container:not(.readonly):not(.disabled):-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-input--background) inset !important;-webkit-text-fill-color:var(--theme-input--color) !important;border-color:var(--theme-input--border-color) !important}:host .input-container:not(.readonly):not(.disabled)::-moz-placeholder{color:var(--theme-input-hint--color)}:host .input-container:not(.readonly):not(.disabled)::placeholder{color:var(--theme-input-hint--color)}:host .input-container:not(.readonly):not(.disabled).hover,:host .input-container:not(.readonly):not(.disabled):hover{border-color:var(--theme-input--border-color--hover);background-color:var(--theme-input--background--hover)}:host .input-container:not(.readonly):not(.disabled).focus,:host .input-container:not(.readonly):not(.disabled):focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus)}:host .input-container:not(.readonly):not(.disabled):disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}:host .input-container.disabled{color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}:host .input-container.readonly,:host .input-container.readonly:-webkit-autofill{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}:host .input-container.readonly:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-input--background) inset !important;-webkit-text-fill-color:var(--theme-input--color) !important;border-color:var(--theme-input--border-color) !important}:host .input-container.readonly::-moz-placeholder{color:var(--theme-input-hint--color)}:host .input-container.readonly::placeholder{color:var(--theme-input-hint--color)}:host .input-container.readonly.hover,:host .input-container.readonly:hover{border-color:var(--theme-input--border-color--hover);background-color:var(--theme-input--background--hover)}:host .input-container.readonly.focus,:host .input-container.readonly:focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus)}:host .input-container.readonly:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}:host .input-container.readonly.read-only,:host .input-container.readonly:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}:host .input-container.readonly:disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}:host .input-container.no-icon{padding-left:0.25rem}:host .token-container{flex-grow:1;overflow:hidden}:host .text-input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-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);width:auto;height:1.75rem;min-height:1.5rem;background:transparent;flex-grow:1;box-shadow:none}:host .text-input,:host .text-input:hover,:host .text-input:focus-visible{border:none;outline:none}:host .text-input.hide-placeholder::-moz-placeholder{opacity:0}:host .text-input.hide-placeholder::placeholder{opacity:0}:host .list-unstyled{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0;overflow-y:auto}:host ix-icon{position:absolute;top:0.5rem;left:0.5rem}:host ix-filter-chip{margin-right:0.5rem}:host .category-preview{display:flex;align-items:center;height:1.5rem;background-color:var(--theme-bg-3);border-top-left-radius:1rem;border-bottom-left-radius:1rem;padding:0.5rem;margin:2px 0}:host ul{height:100%}:host ul>li,:host input{padding-top:2px;padding-bottom:2px}:host ix-dropdown{min-width:10rem !important}:host ix-dropdown .dropdown-item-container{display:flex;flex-direction:column}:host ix-dropdown .dropdown-item-container .dropdown-item{-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);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:2.5rem;margin:0.25rem 0.5rem;padding-inline:0.5rem;border:1px solid transparent;border-radius:100rem;width:auto;justify-content:flex-start;flex-grow:1}:host ix-dropdown .dropdown-item-container .dropdown-item:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-color-focus-bdr)}:host ix-dropdown .dropdown-item-container .category-item{border-end-end-radius:0;border-start-end-radius:0}:host ix-dropdown .dropdown-item-container .category-item-value{border-start-start-radius:0;border-end-start-radius:0}:host ix-dropdown .btn-toggle-operator{width:2rem;height:2rem;margin-inline:0.5rem}:host .d-none{display:none}";const s=class{constructor(t){o(this,t);this.categoryChanged=e(this,"categoryChanged",7);this.inputChanged=e(this,"inputChanged",7);this.filterChanged=e(this,"filterChanged",7);this.ID_CUSTOM_FILTER_VALUE="CW_CUSTOM_FILTER_VALUE";this.textInput=undefined;this.hasFocus=undefined;this.categoryLogicalOperator=a.EQUAL;this.inputValue=undefined;this.category=undefined;this.filterTokens=[];this.disabled=false;this.readonly=false;this.filterState=undefined;this.placeholder=undefined;this.categories=undefined;this.nonSelectableCategories={};this.suggestions=undefined;this.icon="search";this.hideIcon=undefined;this.repeatCategories=true;this.tmpDisableScrollIntoView=true;this.labelCategories="Categories";this.i18nPlainText="Filter by text"}watchFilterState(o){this.setFilterState(o)}componentDidLoad(){var o,e;if(this.filterState!==undefined){setTimeout((()=>this.setFilterState(this.filterState)))}(o=this.hostElement)===null||o===void 0?void 0:o.addEventListener("keydown",this.handleFormElementKeyDown.bind(this));(e=this.formElement)===null||e===void 0?void 0:e.addEventListener("submit",(o=>o.preventDefault()));if(this.textInput==null){console.warn("ix-category-filter - unable to add event listeners to native input element");return}this.textInput.addEventListener("focusin",(()=>{this.hasFocus=true}));this.textInput.addEventListener("focusout",(()=>this.hasFocus=false));this.textInput.addEventListener("input",(()=>{this.inputValue=this.textInput.value;const o=new d(this.inputValue,this.category);this.inputChanged.emit(o)}));this.textInput.addEventListener("keydown",this.handleInputElementKeyDown.bind(this))}setFilterState(o){this.filterTokens=[];for(const e of o.tokens){this.addToken(e,this.ID_CUSTOM_FILTER_VALUE,this.categoryLogicalOperator,false)}for(const e of o.categories){this.addToken(e.value,e.id,e.operator,false)}this.emitFilterEvent()}closeDropdown(){if(this.disabled||this.readonly){return}this.hostElement.shadowRoot.querySelector("ix-dropdown").show=false}handleFormElementKeyDown(o){switch(o.code){case"Enter":case"NumpadEnter":if(!document.activeElement.classList.contains("dropdown-item")){return}const e=document.activeElement.getAttribute("data-id");if(this.hasCategorySelection()){if(this.category!==undefined){this.addToken(e,this.category)}else if(document.activeElement.classList.contains("category-item-id")){this.selectCategory(e)}}else{this.addToken(e)}o.preventDefault();break;case"ArrowUp":this.focusPreviousItem();o.preventDefault();break;case"ArrowDown":this.focusNextItem();o.preventDefault();break;case"Escape":this.closeDropdown();break}}focusPreviousItem(){const o=document.activeElement.previousSibling;if(o instanceof HTMLElement){o.focus()}}focusNextItem(){const o=document.activeElement.nextSibling;if(o instanceof HTMLElement){o.focus()}}handleInputElementKeyDown(o){var e;switch(o.code){case"ArrowDown":const t=`.category-item-${this.category!==undefined?"value":"id"}`;let r=this.hostElement.shadowRoot.querySelector(t);if(r instanceof HTMLElement){r.focus();o.stopPropagation()}else if((e=this.suggestions)===null||e===void 0?void 0:e.length){r=this.hostElement.shadowRoot.querySelector(".category-item");if(r instanceof HTMLElement){r.focus();o.stopPropagation()}}break;case"Backspace":if(this.textInput.value!==""){return}if(this.category!==undefined){this.category=undefined;return}const n=this.filterTokens.length;if(n>0){this.removeToken(n-1)}break;case"Enter":case"NumpadEnter":this.addToken(this.inputValue,this.category);o.preventDefault();break}}emitFilterEvent(){const o=this.filterTokens.filter((o=>o.id===this.ID_CUSTOM_FILTER_VALUE)).map((o=>o.value));const e=this.filterTokens.filter((o=>o.id!==this.ID_CUSTOM_FILTER_VALUE));const t={tokens:o,categories:e};this.filterChanged.emit(t)}addToken(o,e=this.ID_CUSTOM_FILTER_VALUE,t=this.categoryLogicalOperator,r=true){if(o===undefined||o===null){return}const n=o.trim();if(n===""){return}if(this.hasToken(n)){return}const i={id:e,value:n,operator:t};this.filterTokens=[...this.filterTokens,i];this.textInput.value="";this.inputValue="";this.categoryLogicalOperator=a.EQUAL;if(this.category!==undefined){this.category=undefined}this.isScrollStateDirty=true;this.textInput.focus();if(r){this.emitFilterEvent()}this.closeDropdown()}removeToken(o){this.filterTokens=this.filterTokens.filter(((e,t)=>t!==o));this.emitFilterEvent()}getCategoryIds(){const o=[];for(const e in this.categories){if(Object.prototype.hasOwnProperty.call(this.categories,e)){o.push(e)}}return o}selectCategory(o){this.category=o;this.textInput.value="";this.inputValue="";this.textInput.focus();this.categoryChanged.emit(o)}resetFilter(){this.closeDropdown();this.filterTokens=[];this.emitFilterEvent()}filterMultiples(o){if(this.repeatCategories){return true}const e=this.filterTokens.find((e=>e.id===o));return!e}hasToken(o){return this.filterTokens.some((e=>{const t=e.value===o;if(!t){return false}if(this.category!==undefined){return this.category===e.id}if(e.id){return e.id===this.ID_CUSTOM_FILTER_VALUE}return t}))}filterDuplicateTokens(o){return!this.hasToken(o)}filterByInput(o){if(this.inputValue===undefined||this.inputValue===""){return true}return o.toLowerCase().indexOf(this.inputValue.toLowerCase())!==-1}toggleCategoryOperator(){switch(this.categoryLogicalOperator){case a.EQUAL:this.categoryLogicalOperator=a.NOT_EQUAL;break;case a.NOT_EQUAL:this.categoryLogicalOperator=a.EQUAL;break}}getFilterChipLabel(o){var e,t,r;if(o.id===this.ID_CUSTOM_FILTER_VALUE){return o.value}const n=o.operator===a.EQUAL?"=":"!=";const i=(r=(t=(e=this.categories[o.id])===null||e===void 0?void 0:e.label)!==null&&t!==void 0?t:this.nonSelectableCategories[o.id])!==null&&r!==void 0?r:o.id;return`${i} ${n} ${o.value}`}getFilteredSuggestions(){var o,e;if(!((o=this.suggestions)===null||o===void 0?void 0:o.length)){return[]}return(e=this.suggestions)===null||e===void 0?void 0:e.filter((o=>this.filterByInput(o))).filter((o=>this.filterDuplicateTokens(o)))}hasCategorySelection(){return this.categories!==undefined}renderPlainSuggestions(){return t("div",{class:"dropdown-item-container"},this.getFilteredSuggestions().map((o=>t("button",{class:"dropdown-item","data-id":o,onClick:()=>this.addToken(o),key:o,title:o},o))))}renderOperatorButton(){const o={type:"button",variant:"secondary",outline:false,ghost:true,iconOnly:true,iconOval:false,selected:false,disabled:this.disabled,loading:false,icon:"",onClick:o=>{o.stopPropagation();this.toggleCategoryOperator()},extraClasses:{"btn-icon-32":true,"btn-toggle-operator":true}};return t(i,Object.assign({},o),this.categoryLogicalOperator===a.NOT_EQUAL?"=":"!=")}renderCategoryValues(){var o,e;return t("div",{class:"dropdown-item-container"},this.renderOperatorButton(),t("div",{class:"dropdown-header"},(o=this.categories[this.category])===null||o===void 0?void 0:o.label),(e=this.categories[this.category])===null||e===void 0?void 0:e.options.filter((o=>this.filterByInput(o))).filter((o=>this.filterDuplicateTokens(o))).map((o=>t("button",{class:"dropdown-item category-item-value","data-id":o,title:o,key:o,onClick:()=>this.addToken(o,this.category)},`${this.categoryLogicalOperator===a.EQUAL?"=":"!="} ${o}`))))}renderDropdownContent(){if(this.hasCategorySelection()){if(this.category!==undefined){return this.renderCategoryValues()}else{return this.renderCategorySelection()}}else return this.renderPlainSuggestions()}renderCategorySelection(){var o;return t("div",{class:"dropdown-item-container"},(o=this.getCategoryIds())===null||o===void 0?void 0:o.filter((o=>this.filterByInput(this.categories[o].label))).filter((o=>this.filterMultiples(o))).map((o=>{var e;return t("button",{class:"dropdown-item category-item category-item-id","data-id":o,title:this.categories[o].label,key:o,onClick:e=>{e.preventDefault();this.selectCategory(o)},tabindex:"0"},(e=this.categories[o])===null||e===void 0?void 0:e.label)})))}getDropdownHeader(){if(this.categories!==undefined){if(this.category!==undefined){return null}else{return this.labelCategories}}return this.i18nPlainText}componentDidRender(){if(this.isScrollStateDirty){if(!this.tmpDisableScrollIntoView){this.textInput.scrollIntoView()}this.isScrollStateDirty=false}}getResetButton(){return t("ix-icon-button",{onClick:()=>this.resetFilter(),class:{"reset-button":true,"hide-reset-button":!this.filterTokens.length&&this.category===undefined},ghost:true,oval:true,icon:"clear",size:"16"})}getIconColor(){if(this.disabled){return"color-componentn-1"}if(this.readonly){return"color-std-txt"}return"color-primary"}render(){var o;return t(r,null,t("form",{ref:o=>this.formElement=o},t("div",{"read-only":this.readonly,class:{"input-container":true,disabled:this.disabled,focus:this.hasFocus,readonly:this.readonly,"no-icon":this.hideIcon}},t("ix-icon",{color:this.getIconColor(),class:{"d-none":this.hideIcon},name:this.icon,size:"16"}),t("div",{class:"token-container"},t("ul",{class:"list-unstyled"},this.filterTokens.map(((o,e)=>t("li",{key:o.toString(),class:{animate__animated:true,animate__fadein:true}},t("ix-filter-chip",{disabled:this.disabled,readonly:this.readonly,onCloseClick:()=>this.removeToken(e)},this.getFilterChipLabel(o))))),this.categories===undefined?"":t("li",{class:{"category-preview":true,"d-none":this.category===undefined}},(o=this.categories[this.category])===null||o===void 0?void 0:o.label),t("input",{class:{"text-input":true,"hide-placeholder":this.readonly||this.disabled||this.category!==undefined},disabled:this.disabled,readonly:this.readonly,ref:o=>this.textInput=o,type:"text",placeholder:this.placeholder}))),this.getResetButton())),this.disabled||this.readonly?"":t("ix-dropdown",{closeBehavior:"outside",offset:{mainAxis:2},trigger:this.textInput,triggerEvent:["click","focus"],header:this.getDropdownHeader()},this.renderDropdownContent()))}get hostElement(){return n(this)}static get watchers(){return{filterState:["watchFilterState"]}}};s.style=l;export{s as ix_category_filter};
-//# sourceMappingURL=p-3dbeeecf.entry.js.map