@siemens/ix 2.0.0-beta.1 → 2.0.1

package/dist/siemens-ix/p-774eca79.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["breadcrumbCss","sequenceId","createId","prefix","Breadcrumb","this","previousButtonId","previousDropdownId","onNextItemsChange","onChildMutation","onItemClick","item","itemClick","emit","componentDidLoad","mutationObserver","createMutationObserver","observe","hostElement","subtree","childList","componentWillLoad","disconnectedCallback","_a","disconnect","async","updatedItems","getItems","forEach","bc","index","shouldShowDropdown","nextItems","length","ghost","showChevron","isDropdownTrigger","nextButtonRef","visibleItemCount","visible","items","Array","from","querySelectorAll","render","a11y","a11yHostAttributes","h","Host","id","ariaLabelPreviousButton","trigger","previousButtonRef","onShowChanged","detail","isPreviousDropdownExpanded","forceUpdate","shadowRoot","getElementById","slice","map","label","innerText","onClick","event","stopPropagation","_b","ref","tabIndex","a11yBoolean","class","_c","_d","e","nextClick"],"sources":["./src/components/breadcrumb/breadcrumb.scss?tag=ix-breadcrumb&encapsulation=shadow","./src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  justify-content: flex-start;\n  height: 2.5rem;\n  align-items: center;\n  background-color: transparent;\n  overflow: hidden;\n\n  .previous-button {\n    width: 3rem;\n    min-width: 0px;\n  }\n\n  .crumb-dropdown {\n    overflow: visible;\n  }\n\n  .remove-anchor::after {\n    display: none;\n  }\n\n  .more-text {\n    display: flex;\n\n    .more-text-ellipsis {\n      width: 1rem;\n      display: inline-block;\n      font-weight: $font-weight-bold;\n    }\n\n    ix-icon {\n      // line-height: unset; --> Note: 'line-height' can't be applied due to shadow DOM encapsulation at ix-icon\n      // using padding-top to achieve same position as before\n      padding-top: 2px;\n    }\n  }\n\n  nav,\n  ol,\n  .crumb-items {\n    display: contents;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  forceUpdate,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { a11yBoolean, a11yHostAttributes } from '../utils/a11y';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\nlet sequenceId = 0;\nconst createId = (prefix: string = 'breadcrumb-') => {\n  return `${prefix}-${sequenceId++}`;\n};\n\n@Component({\n  tag: 'ix-breadcrumb',\n  styleUrl: 'breadcrumb.scss',\n  shadow: true,\n})\nexport class Breadcrumb {\n  @Element() hostElement!: HTMLIxBreadcrumbElement;\n\n  /**\n   * Excess items will get hidden inside of dropdown\n   */\n  @Prop() visibleItemCount = 9;\n\n  /**\n   * Items will be accessible through a dropdown\n   */\n  @Prop() nextItems: string[] = [];\n  @Watch('nextItems')\n  onNextItemsChange() {\n    this.onChildMutation();\n  }\n\n  /**\n   * Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)\n   */\n  @Prop() ghost = true;\n\n  /**\n   * Accessibility label for the dropdown button (ellipsis icon) used to access the dropdown list\n   * with conditionally hidden previous items\n   *\n   * @since 2.0.0\n   */\n  @Prop() ariaLabelPreviousButton = 'previous';\n\n  /**\n   * Crumb item clicked event\n   */\n  @Event() itemClick: EventEmitter<string>;\n\n  /**\n   * Next item clicked event\n   */\n  @Event() nextClick: EventEmitter<{ event: UIEvent; item: string }>;\n\n  @State() previousButtonRef: HTMLElement;\n  @State() nextButtonRef: HTMLElement;\n  @State() items: HTMLIxBreadcrumbItemElement[] = [];\n  @State() isPreviousDropdownExpanded = false;\n\n  private mutationObserver: MutationObserver;\n\n  private previousButtonId = createId();\n  private previousDropdownId = createId();\n\n  private onItemClick(item: string) {\n    this.itemClick.emit(item);\n  }\n\n  componentDidLoad() {\n    this.mutationObserver = createMutationObserver(() =>\n      this.onChildMutation()\n    );\n\n    this.mutationObserver.observe(this.hostElement, {\n      subtree: true,\n      childList: true,\n    });\n  }\n\n  componentWillLoad() {\n    this.onChildMutation();\n  }\n\n  disconnectedCallback() {\n    this.mutationObserver?.disconnect();\n  }\n\n  private async onChildMutation() {\n    const updatedItems = this.getItems();\n\n    updatedItems.forEach((bc, index) => {\n      const shouldShowDropdown =\n        this.nextItems.length !== 0 && updatedItems.length - 1 === index;\n\n      bc.ghost = this.ghost;\n      bc.showChevron = updatedItems.length - 1 !== index || shouldShowDropdown;\n      bc.isDropdownTrigger = shouldShowDropdown;\n\n      if (shouldShowDropdown) {\n        this.nextButtonRef = bc;\n      }\n\n      if (updatedItems.length < this.visibleItemCount) {\n        return;\n      }\n\n      bc.visible = index >= updatedItems.length - this.visibleItemCount;\n    });\n\n    this.items = updatedItems;\n  }\n\n  private getItems() {\n    return Array.from(this.hostElement.querySelectorAll('ix-breadcrumb-item'));\n  }\n\n  render() {\n    const a11y = a11yHostAttributes(this.hostElement);\n    return (\n      <Host>\n        <ix-dropdown\n          id={this.previousDropdownId}\n          aria-label={this.ariaLabelPreviousButton}\n          trigger={\n            this.items?.length > this.visibleItemCount\n              ? this.previousButtonRef\n              : null\n          }\n          onShowChanged={({ detail }) => {\n            this.isPreviousDropdownExpanded = detail;\n\n            // Need to force update previous button to change `aria-expanded`\n            forceUpdate(\n              this.hostElement.shadowRoot.getElementById(this.previousButtonId)\n            );\n          }}\n        >\n          {this.items\n            .slice(0, this.items.length - this.visibleItemCount)\n            .map((item) => {\n              const label = item.label ?? item.innerText;\n\n              return (\n                <ix-dropdown-item\n                  label={label}\n                  onClick={() => {\n                    this.onItemClick(label);\n                  }}\n                  onItemClick={(event) => event.stopPropagation()}\n                ></ix-dropdown-item>\n              );\n            })}\n        </ix-dropdown>\n        {this.items?.length > this.visibleItemCount ? (\n          <ix-breadcrumb-item\n            id={this.previousButtonId}\n            ref={(ref) => (this.previousButtonRef = ref)}\n            label=\"...\"\n            tabIndex={1}\n            onItemClick={(event) => event.stopPropagation()}\n            aria-describedby={this.previousDropdownId}\n            aria-controls={this.previousDropdownId}\n            aria-expanded={a11yBoolean(this.isPreviousDropdownExpanded)}\n            class={'previous-button'}\n          ></ix-breadcrumb-item>\n        ) : null}\n        <nav\n          class=\"crumb-items\"\n          aria-label={a11y['aria-label'] ?? 'breadcrumbs'}\n        >\n          <ol>\n            <slot></slot>\n          </ol>\n        </nav>\n        <ix-dropdown trigger={this.nextButtonRef}>\n          {this.nextItems?.map((item) => (\n            <ix-dropdown-item\n              label={item}\n              onClick={(e) => {\n                this.nextClick.emit({\n                  event: e,\n                  item,\n                });\n              }}\n              onItemClick={(event) => event.stopPropagation()}\n            ></ix-dropdown-item>\n          ))}\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"mappings":"iJAAA,MAAMA,EAAgB,8iCCwBtB,IAAIC,EAAa,EACjB,MAAMC,EAAW,CAACC,EAAiB,gBAC1B,GAAGA,KAAUF,M,MAQTG,EAAU,M,mGA+CbC,KAAAC,iBAAmBJ,IACnBG,KAAAE,mBAAqBL,I,sBA1CF,E,eAKG,G,WASd,K,6BAQkB,W,yEAcc,G,gCACV,K,CA9BtCM,oBACEH,KAAKI,iB,CAoCCC,YAAYC,GAClBN,KAAKO,UAAUC,KAAKF,E,CAGtBG,mBACET,KAAKU,iBAAmBC,GAAuB,IAC7CX,KAAKI,oBAGPJ,KAAKU,iBAAiBE,QAAQZ,KAAKa,YAAa,CAC9CC,QAAS,KACTC,UAAW,M,CAIfC,oBACEhB,KAAKI,iB,CAGPa,uB,OACEC,EAAAlB,KAAKU,oBAAgB,MAAAQ,SAAA,SAAAA,EAAEC,Y,CAGjBC,wBACN,MAAMC,EAAerB,KAAKsB,WAE1BD,EAAaE,SAAQ,CAACC,EAAIC,KACxB,MAAMC,EACJ1B,KAAK2B,UAAUC,SAAW,GAAKP,EAAaO,OAAS,IAAMH,EAE7DD,EAAGK,MAAQ7B,KAAK6B,MAChBL,EAAGM,YAAcT,EAAaO,OAAS,IAAMH,GAASC,EACtDF,EAAGO,kBAAoBL,EAEvB,GAAIA,EAAoB,CACtB1B,KAAKgC,cAAgBR,C,CAGvB,GAAIH,EAAaO,OAAS5B,KAAKiC,iBAAkB,CAC/C,M,CAGFT,EAAGU,QAAUT,GAASJ,EAAaO,OAAS5B,KAAKiC,gBAAgB,IAGnEjC,KAAKmC,MAAQd,C,CAGPC,WACN,OAAOc,MAAMC,KAAKrC,KAAKa,YAAYyB,iBAAiB,sB,CAGtDC,S,YACE,MAAMC,EAAOC,EAAmBzC,KAAKa,aACrC,OACE6B,EAACC,EAAI,KACHD,EAAA,eACEE,GAAI5C,KAAKE,mBAAkB,aACfF,KAAK6C,wBACjBC,UACE5B,EAAAlB,KAAKmC,SAAK,MAAAjB,SAAA,SAAAA,EAAEU,QAAS5B,KAAKiC,iBACtBjC,KAAK+C,kBACL,KAENC,cAAe,EAAGC,aAChBjD,KAAKkD,2BAA6BD,EAGlCE,EACEnD,KAAKa,YAAYuC,WAAWC,eAAerD,KAAKC,kBACjD,GAGFD,KAAKmC,MACHmB,MAAM,EAAGtD,KAAKmC,MAAMP,OAAS5B,KAAKiC,kBAClCsB,KAAKjD,I,MACJ,MAAMkD,GAAQtC,EAAAZ,EAAKkD,SAAK,MAAAtC,SAAA,EAAAA,EAAIZ,EAAKmD,UAEjC,OACEf,EAAA,oBACEc,MAAOA,EACPE,QAAS,KACP1D,KAAKK,YAAYmD,EAAM,EAEzBnD,YAAcsD,GAAUA,EAAMC,mBACZ,OAI3BC,EAAA7D,KAAKmC,SAAK,MAAA0B,SAAA,SAAAA,EAAEjC,QAAS5B,KAAKiC,iBACzBS,EAAA,sBACEE,GAAI5C,KAAKC,iBACT6D,IAAMA,GAAS9D,KAAK+C,kBAAoBe,EACxCN,MAAM,MACNO,SAAU,EACV1D,YAAcsD,GAAUA,EAAMC,kBAAiB,mBAC7B5D,KAAKE,mBAAkB,gBAC1BF,KAAKE,mBAAkB,gBACvB8D,EAAYhE,KAAKkD,4BAChCe,MAAO,oBAEP,KACJvB,EAAA,OACEuB,MAAM,cAAa,cACPC,EAAA1B,EAAK,iBAAa,MAAA0B,SAAA,EAAAA,EAAI,eAElCxB,EAAA,UACEA,EAAA,eAGJA,EAAA,eAAaI,QAAS9C,KAAKgC,gBACxBmC,EAAAnE,KAAK2B,aAAS,MAAAwC,SAAA,SAAAA,EAAEZ,KAAKjD,GACpBoC,EAAA,oBACEc,MAAOlD,EACPoD,QAAUU,IACRpE,KAAKqE,UAAU7D,KAAK,CAClBmD,MAAOS,EACP9D,QACA,EAEJD,YAAcsD,GAAUA,EAAMC,uB"}

package/dist/siemens-ix/p-77b14ca1.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as o,F as r,H as i,g as s}from"./p-76a509c7.js";import{a as h}from"./p-78c9489b.js";const c=':host{display:inline-flex;position:relative;height:2rem;justify-content:flex-start;align-items:center;margin-right:0.25rem;cursor:pointer}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .switch{position:relative;display:inline-block;width:3rem;min-width:3rem;max-width:3rem;height:1.5rem;margin-right:0.25rem}:host .switch input{opacity:0;width:0;height:0}:host .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--theme-switch-off--background);transition:150ms;border-radius:1.5rem}:host .slider:before{position:absolute;content:"";height:18px;width:18px;left:4px;bottom:3px;background-color:var(--theme-switch-thumb-off--background);transition:150ms;border-radius:50%}:host input{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host input:focus-visible+.switch>.slider{outline:1px solid var(--theme-color-focus-bdr);outline-offset:1px}:host input:checked+.switch>.slider{background-color:var(--theme-switch-on--background)}:host input:checked+.switch>.slider::before{background-color:var(--theme-switch-thumb-on--background);transform:translateX(1.35rem)}:host input+.switch:hover>.slider{background-color:var(--theme-switch-off--background--hover)}:host input+.switch:hover>.slider:before{background-color:var(--theme-switch-thumb-off--background--hover)}:host input+.switch:active>.slider{background-color:var(--theme-switch-off--background--active)}:host input+.switch:active>.slider:before{background-color:var(--theme-switch-thumb-off--background--active)}:host input:checked+.switch:hover>.slider{background-color:var(--theme-switch-on--background--hover)}:host input:checked+.switch:hover>.slider:before{background-color:var(--theme-switch-thumb-on--background--hover)}:host input:checked+.switch:active>.slider{background-color:var(--theme-switch-on--background--active)}:host input:checked+.switch:active>.slider:before{background-color:var(--theme-switch-thumb-on--background--active)}:host input:indeterminate+.switch>.slider::before{transform:translateX(0.7rem)}:host .toggle-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(.disabled){pointer-events:none}:host(.disabled) input+.switch{opacity:0.5}:host(.disabled) input+.switch>.slider{background-color:var(--theme-switch-off--background--disabled)}:host(.disabled) input+.switch>.slider:before{background-color:var(--theme-switch-thumb-off--background--disabled)}:host(.disabled) input:checked+.switch>.slider{background-color:var(--theme-switch-on--background--disabled)}:host(.disabled) input:checked+.switch>.slider:before{background-color:var(--theme-switch-thumb-on--background--disabled)}:host(.disabled) .toggle-text{color:var(--theme-color-weak-text)}';const a=class{constructor(o){t(this,o);this.checkedChange=e(this,"checkedChange",7);this.checked=false;this.disabled=false;this.indeterminate=false;this.textOn="On";this.textOff="Off";this.textIndeterminate="Mixed";this.hideText=false}onCheckedChange(t){if(this.indeterminate){this.indeterminate=false}this.checked=t;this.checkedChange.emit(this.checked)}render(){return o(i,{class:{disabled:this.disabled},onClick:()=>this.onCheckedChange(!this.checked)},o("input",{disabled:this.disabled,indeterminate:this.indeterminate,checked:this.checked,role:"switch",tabindex:0,type:"checkbox","aria-checked":h(this.checked),onChange:t=>this.onCheckedChange(t.target.checked)}),o("label",{class:"switch",tabIndex:-1},o("span",{class:"slider"})),!this.hideText?o(r,null,!this.indeterminate?o("span",{class:"toggle-text","aria-hidden":h(true)},this.checked?this.textOn:this.textOff):o("span",{class:"toggle-text","aria-hidden":h(true)},this.textIndeterminate)):null)}get hostElement(){return s(this)}};a.style=c;export{a as ix_toggle};
+//# sourceMappingURL=p-77b14ca1.entry.js.map

package/dist/siemens-ix/p-7865aa63.entry.js

@@ -0,0 +1,2 @@
+import{r,h as a,H as c}from"./p-76a509c7.js";const o=":host{display:block;position:relative}:host .icon{transform:scale(1.25)}:host .notification{font-size:40px}:host ix-card-content{height:11rem}:host(:hover) ix-card.card-insight:hover{--ix-card-background:var(--theme-color-ghost--hover)}:host(:hover) ix-card.card-notification:hover{--ix-card-background:var(--theme-color-component-1--hover)}:host(:hover) ix-card.card-alarm:hover{--ix-card-background:var(--theme-color-alarm--hover)}:host(:hover) ix-card.card-critical:hover{--ix-card-background:var(--theme-color-critical--hover)}:host(:hover) ix-card.card-warning:hover{--ix-card-background:var(--theme-color-warning--hover)}:host(:hover) ix-card.card-success:hover{--ix-card-background:var(--theme-color-success--hover)}:host(:hover) ix-card.card-info:hover{--ix-card-background:var(--theme-color-info--hover)}:host(:hover) ix-card.card-neutral:hover{--ix-card-background:var(--theme-color-neutral--hover)}:host(:hover) ix-card.card-primary:hover{--ix-card-background:var(--theme-color-primary--hover)}:host(:active) ix-card.card-insight:active{--ix-card-background:var(--theme-color-ghost--active)}:host(:active) ix-card.card-notification:active{--ix-card-background:var(--theme-color-component-1--active)}:host(:active) ix-card.card-alarm:active{--ix-card-background:var(--theme-color-alarm--active)}:host(:active) ix-card.card-critical:active{--ix-card-background:var(--theme-color-critical--active)}:host(:active) ix-card.card-warning:active{--ix-card-background:var(--theme-color-warning--active)}:host(:active) ix-card.card-success:active{--ix-card-background:var(--theme-color-success--active)}:host(:active) ix-card.card-info:active{--ix-card-background:var(--theme-color-info--active)}:host(:active) ix-card.card-neutral:active{--ix-card-background:var(--theme-color-neutral--active)}:host(:active) ix-card.card-primary:active{--ix-card-background:var(--theme-color-primary--active)}";const i=class{constructor(a){r(this,a);this.icon=undefined;this.notification=undefined;this.heading=undefined;this.subheading=undefined;this.variant="insight"}render(){var r;const o=this.variant==="insight"||this.variant==="notification"?"std":undefined;return a(c,null,a("ix-card",{variant:this.variant},a("ix-card-content",null,a("ix-card-title",null,this.icon?a("ix-icon",{class:"icon",name:this.icon,size:"32"}):null,a("span",{class:"notification"},(r=this.notification)!==null&&r!==void 0?r:0),a("slot",{name:"title-action"})),a("ix-typography",{color:o,format:"h4"},this.heading),a("ix-typography",{color:o},this.subheading)),a("ix-card-accordion",null,a("slot",null))))}};i.style=o;export{i as ix_push_card};
+//# sourceMappingURL=p-7865aa63.entry.js.map

package/dist/siemens-ix/p-7865aa63.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pushCardCss","PushCard","undefined","render","color","this","variant","h","Host","icon","class","name","size","_a","notification","format","heading","subheading"],"sources":["./src/components/push-card/push-card.scss?tag=ix-push-card&encapsulation=shadow","./src/components/push-card/push-card.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: block;\n  position: relative;\n\n  .icon {\n    transform: scale(1.25);\n  }\n\n  .notification {\n    font-size: 40px;\n  }\n\n  ix-card-content {\n    height: 11rem;\n  }\n}\n\n:host(:hover) {\n  ix-card.card-insight:hover {\n    --ix-card-background: var(--theme-color-ghost--hover);\n  }\n\n  ix-card.card-notification:hover {\n    --ix-card-background: var(--theme-color-component-1--hover);\n  }\n\n  ix-card.card-alarm:hover {\n    --ix-card-background: var(--theme-color-alarm--hover);\n  }\n\n  ix-card.card-critical:hover {\n    --ix-card-background: var(--theme-color-critical--hover);\n  }\n\n  ix-card.card-warning:hover {\n    --ix-card-background: var(--theme-color-warning--hover);\n  }\n\n  ix-card.card-success:hover {\n    --ix-card-background: var(--theme-color-success--hover);\n  }\n\n  ix-card.card-info:hover {\n    --ix-card-background: var(--theme-color-info--hover);\n  }\n\n  ix-card.card-neutral:hover {\n    --ix-card-background: var(--theme-color-neutral--hover);\n  }\n\n  ix-card.card-primary:hover {\n    --ix-card-background: var(--theme-color-primary--hover);\n  }\n}\n\n:host(:active) {\n  ix-card.card-insight:active {\n    --ix-card-background: var(--theme-color-ghost--active);\n  }\n\n  ix-card.card-notification:active {\n    --ix-card-background: var(--theme-color-component-1--active);\n  }\n\n  ix-card.card-alarm:active {\n    --ix-card-background: var(--theme-color-alarm--active);\n  }\n\n  ix-card.card-critical:active {\n    --ix-card-background: var(--theme-color-critical--active);\n  }\n\n  ix-card.card-warning:active {\n    --ix-card-background: var(--theme-color-warning--active);\n  }\n\n  ix-card.card-success:active {\n    --ix-card-background: var(--theme-color-success--active);\n  }\n\n  ix-card.card-info:active {\n    --ix-card-background: var(--theme-color-info--active);\n  }\n\n  ix-card.card-neutral:active {\n    --ix-card-background: var(--theme-color-neutral--active);\n  }\n\n  ix-card.card-primary:active {\n    --ix-card-background: var(--theme-color-primary--active);\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\nimport { CardVariant } from '../card/card';\nimport { TypographyColors } from '../typography/typography';\n\nexport type PushCardVariant = CardVariant;\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-push-card',\n  styleUrl: 'push-card.scss',\n  shadow: true,\n})\nexport class PushCard {\n  /**\n   * Card icon\n   */\n  @Prop() icon: string | undefined = undefined;\n\n  /**\n   * Card KPI value\n   */\n  @Prop() notification: string;\n\n  /**\n   * Card heading\n   */\n  @Prop() heading: string;\n\n  /**\n   * Card subheading\n   */\n  @Prop() subheading: string;\n\n  /**\n   * Card variant\n   */\n  @Prop() variant: PushCardVariant = 'insight';\n\n  render() {\n    const color: TypographyColors =\n      this.variant === 'insight' || this.variant === 'notification'\n        ? 'std'\n        : undefined;\n\n    return (\n      <Host>\n        <ix-card variant={this.variant}>\n          <ix-card-content>\n            <ix-card-title>\n              {this.icon ? (\n                <ix-icon class={'icon'} name={this.icon} size=\"32\"></ix-icon>\n              ) : null}\n              <span class={'notification'}>{this.notification ?? 0}</span>\n              <slot name=\"title-action\"></slot>\n            </ix-card-title>\n            <ix-typography color={color} format=\"h4\">\n              {this.heading}\n            </ix-typography>\n            <ix-typography color={color}>{this.subheading}</ix-typography>\n          </ix-card-content>\n          <ix-card-accordion>\n            <slot></slot>\n          </ix-card-accordion>\n        </ix-card>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6CAAA,MAAMA,EAAc,02D,MCuBPC,EAAQ,M,mCAIgBC,U,0FAoBA,S,CAEnCC,S,MACE,MAAMC,EACJC,KAAKC,UAAY,WAAaD,KAAKC,UAAY,eAC3C,MACAJ,UAEN,OACEK,EAACC,EAAI,KACHD,EAAA,WAASD,QAASD,KAAKC,SACrBC,EAAA,uBACEA,EAAA,qBACGF,KAAKI,KACJF,EAAA,WAASG,MAAO,OAAQC,KAAMN,KAAKI,KAAMG,KAAK,OAC5C,KACJL,EAAA,QAAMG,MAAO,iBAAiBG,EAAAR,KAAKS,gBAAY,MAAAD,SAAA,EAAAA,EAAI,GACnDN,EAAA,QAAMI,KAAK,kBAEbJ,EAAA,iBAAeH,MAAOA,EAAOW,OAAO,MACjCV,KAAKW,SAERT,EAAA,iBAAeH,MAAOA,GAAQC,KAAKY,aAErCV,EAAA,yBACEA,EAAA,e"}

package/dist/siemens-ix/p-78c9489b.js

@@ -0,0 +1,2 @@
+const a=a=>a?"true":"false";const i=(a,i=[])=>{const e={};r.forEach((r=>{if(a.hasAttribute(r)){const l=a.getAttribute(r);if(l!==null&&!i.includes(r)){e[r]=a.getAttribute(r)}a.removeAttribute(r)}}));return e};const r=["role","aria-activedescendant","aria-atomic","aria-autocomplete","aria-braillelabel","aria-brailleroledescription","aria-busy","aria-checked","aria-colcount","aria-colindex","aria-colindextext","aria-colspan","aria-controls","aria-current","aria-describedby","aria-description","aria-details","aria-disabled","aria-errormessage","aria-expanded","aria-flowto","aria-haspopup","aria-hidden","aria-invalid","aria-keyshortcuts","aria-label","aria-labelledby","aria-level","aria-live","aria-multiline","aria-multiselectable","aria-orientation","aria-owns","aria-placeholder","aria-posinset","aria-pressed","aria-readonly","aria-relevant","aria-required","aria-roledescription","aria-rowcount","aria-rowindex","aria-rowindextext","aria-rowspan","aria-selected","aria-setsize","aria-sort","aria-valuemax","aria-valuemin","aria-valuenow","aria-valuetext"];export{a,i as b};
+//# sourceMappingURL=p-78c9489b.js.map

package/dist/siemens-ix/p-78c9489b.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["a11yBoolean","value","a11yHostAttributes","hostElement","ignoreAttributes","attributeObject","a11yAttributes","forEach","attr","hasAttribute","getAttribute","includes","removeAttribute"],"sources":["./src/components/utils/a11y.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 */\nexport const a11yBoolean = (value: boolean) => (value ? 'true' : 'false');\n\nexport const a11yHostAttributes = (\n  hostElement: HTMLElement,\n  ignoreAttributes: A11yAttributeName[] = []\n): Record<A11yAttributeName, any> => {\n  const attributeObject: Record<string, any> = {};\n  a11yAttributes.forEach((attr) => {\n    if (hostElement.hasAttribute(attr)) {\n      const value = hostElement.getAttribute(attr);\n      if (value !== null && !ignoreAttributes.includes(attr)) {\n        attributeObject[attr] = hostElement.getAttribute(attr);\n      }\n      hostElement.removeAttribute(attr);\n    }\n  });\n\n  return attributeObject;\n};\n\ntype PartialRecord<K extends keyof any, T> = {\n  [P in K]?: T;\n};\nexport type A11yAttributes = PartialRecord<A11yAttributeName, any>;\n\nexport type A11yAttributeName =\n  | 'role'\n  | 'aria-activedescendant'\n  | 'aria-atomic'\n  | 'aria-autocomplete'\n  | 'aria-braillelabel'\n  | 'aria-brailleroledescription'\n  | 'aria-busy'\n  | 'aria-checked'\n  | 'aria-colcount'\n  | 'aria-colindex'\n  | 'aria-colindextext'\n  | 'aria-colspan'\n  | 'aria-controls'\n  | 'aria-current'\n  | 'aria-describedby'\n  | 'aria-description'\n  | 'aria-details'\n  | 'aria-disabled'\n  | 'aria-errormessage'\n  | 'aria-expanded'\n  | 'aria-flowto'\n  | 'aria-haspopup'\n  | 'aria-hidden'\n  | 'aria-invalid'\n  | 'aria-keyshortcuts'\n  | 'aria-label'\n  | 'aria-labelledby'\n  | 'aria-level'\n  | 'aria-live'\n  | 'aria-multiline'\n  | 'aria-multiselectable'\n  | 'aria-orientation'\n  | 'aria-owns'\n  | 'aria-placeholder'\n  | 'aria-posinset'\n  | 'aria-pressed'\n  | 'aria-readonly'\n  | 'aria-relevant'\n  | 'aria-required'\n  | 'aria-roledescription'\n  | 'aria-rowcount'\n  | 'aria-rowindex'\n  | 'aria-rowindextext'\n  | 'aria-rowspan'\n  | 'aria-selected'\n  | 'aria-setsize'\n  | 'aria-sort'\n  | 'aria-valuemax'\n  | 'aria-valuemin'\n  | 'aria-valuenow'\n  | 'aria-valuetext';\n\nconst a11yAttributes: A11yAttributeName[] = [\n  'role',\n  'aria-activedescendant',\n  'aria-atomic',\n  'aria-autocomplete',\n  'aria-braillelabel',\n  'aria-brailleroledescription',\n  'aria-busy',\n  'aria-checked',\n  'aria-colcount',\n  'aria-colindex',\n  'aria-colindextext',\n  'aria-colspan',\n  'aria-controls',\n  'aria-current',\n  'aria-describedby',\n  'aria-description',\n  'aria-details',\n  'aria-disabled',\n  'aria-errormessage',\n  'aria-expanded',\n  'aria-flowto',\n  'aria-haspopup',\n  'aria-hidden',\n  'aria-invalid',\n  'aria-keyshortcuts',\n  'aria-label',\n  'aria-labelledby',\n  'aria-level',\n  'aria-live',\n  'aria-multiline',\n  'aria-multiselectable',\n  'aria-orientation',\n  'aria-owns',\n  'aria-placeholder',\n  'aria-posinset',\n  'aria-pressed',\n  'aria-readonly',\n  'aria-relevant',\n  'aria-required',\n  'aria-roledescription',\n  'aria-rowcount',\n  'aria-rowindex',\n  'aria-rowindextext',\n  'aria-rowspan',\n  'aria-selected',\n  'aria-setsize',\n  'aria-sort',\n  'aria-valuemax',\n  'aria-valuemin',\n  'aria-valuenow',\n  'aria-valuetext',\n];\n"],"mappings":"MAQaA,EAAeC,GAAoBA,EAAQ,OAAS,Q,MAEpDC,EAAqB,CAChCC,EACAC,EAAwC,MAExC,MAAMC,EAAuC,GAC7CC,EAAeC,SAASC,IACtB,GAAIL,EAAYM,aAAaD,GAAO,CAClC,MAAMP,EAAQE,EAAYO,aAAaF,GACvC,GAAIP,IAAU,OAASG,EAAiBO,SAASH,GAAO,CACtDH,EAAgBG,GAAQL,EAAYO,aAAaF,E,CAEnDL,EAAYS,gBAAgBJ,E,KAIhC,OAAOH,CAAe,EA6DxB,MAAMC,EAAsC,CAC1C,OACA,wBACA,cACA,oBACA,oBACA,8BACA,YACA,eACA,gBACA,gBACA,oBACA,eACA,gBACA,eACA,mBACA,mBACA,eACA,gBACA,oBACA,gBACA,cACA,gBACA,cACA,eACA,oBACA,aACA,kBACA,aACA,YACA,iBACA,uBACA,mBACA,YACA,mBACA,gBACA,eACA,gBACA,gBACA,gBACA,uBACA,gBACA,gBACA,oBACA,eACA,gBACA,eACA,YACA,gBACA,gBACA,gBACA,yB"}

package/dist/siemens-ix/p-794769ed.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as e,H as o,g as i}from"./p-76a509c7.js";import{c as r}from"./p-c0454c9a.js";import{F as s}from"./p-1b227e9a.js";const n=".text-xs{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text)}.text-s{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text)}.text-default{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text)}.text-default-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-title-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text)}.text-l{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text)}.text-l-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-title-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text)}.text-h2{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text)}.text-xl{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text)}a{color:var(--theme-color-primary)}@keyframes flip-animation{0%{transform:rotateY(0)}50%{transform:rotateY(90deg)}51%{transform:rotateY(270deg)}100%{transform:rotateY(360deg)}}:host{display:flex;flex-direction:column;perspective:1000px}: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 .flip-tile-header{display:flex;align-items:center;height:2.5rem;padding:0 0.5rem 0 1rem}:host .flip-tile-header .header-slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1;min-width:0}:host .content-container{flex-grow:1;margin:1rem}:host .flip-tile-container{display:flex;flex-direction:column;height:100%;background-color:var(--theme-blind-base--background);border:solid 1px var(--theme-blind-base--border-color);border-radius:var(--theme-flip-tile--border-radius) var(--theme-flip-tile--border-radius) 0 0;transform-style:preserve-3d}:host .flip-tile-container.flip-animation-active{animation:flip-animation 300ms, ease-in-out}:host .flip-tile-container .footer{display:flex;height:3rem;align-items:center;justify-content:center;padding:0 0.5rem;color:var(--theme-flip-footer--color);background-color:var(--theme-blind-base--background)}:host .flip-tile-container .footer :first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:100%}:host .flip-tile-container ::slotted(*){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-direction:column;align-items:center;min-width:0}:host .flip-tile-container.primary{border-color:var(--theme-color-primary)}:host .flip-tile-container.primary .footer{background-color:var(--theme-color-primary);color:var(--theme-color-primary--contrast)}:host .flip-tile-container.info{border-color:var(--theme-color-info)}:host .flip-tile-container.info .footer{background-color:var(--theme-color-info);color:var(--theme-color-info--contrast)}:host .flip-tile-container.warning{border-color:var(--theme-color-warning)}:host .flip-tile-container.warning .footer{background-color:var(--theme-color-warning);color:var(--theme-color-warning--contrast)}:host .flip-tile-container.alarm{border-color:var(--theme-color-alarm)}:host .flip-tile-container.alarm .footer{background-color:var(--theme-color-alarm);color:var(--theme-color-alarm--contrast)}:host:hover .flip-tile-container .footer ix-icon{color:var(--theme-color-std-text)}";const a=class{constructor(e){t(this,e);this.ANIMATION_DURATION=150;this.state=undefined;this.height=15.125;this.width=16;this.index=0;this.isFlipAnimationActive=undefined}componentDidLoad(){this.observer=r((()=>this.updateContentItems()));this.observer.observe(this.hostElement,{childList:true})}componentWillLoad(){this.updateContentItems();this.updateContentVisibility(this.index)}disconnectedCallback(){if(this.observer){this.observer.disconnect()}}updateContentItems(){this.contentItems=Array.from(this.hostElement.querySelectorAll("ix-flip-tile-content"))}updateContentVisibility(t){this.contentItems.forEach(((e,o)=>e.contentVisible=o===t))}toggleIndex(){this.doFlipAnimation()}doFlipAnimation(){this.isFlipAnimationActive=true;setTimeout((()=>{this.updateContentVisibility(this.index);if(this.index>=this.contentItems.length-1){this.index=0}else{this.index++}this.updateContentVisibility(this.index)}),this.ANIMATION_DURATION);setTimeout((()=>{this.isFlipAnimationActive=false}),2*this.ANIMATION_DURATION)}render(){return e(o,{style:{height:`${this.height}${this.height==="auto"?"":"rem"}`,"min-height":`${this.height}${this.height==="auto"?"":"rem"}`,"max-height":`${this.height}${this.height==="auto"?"":"rem"}`,width:`${this.width}${this.width==="auto"?"":"rem"}`,"min-width":`${this.width}${this.width==="auto"?"":"rem"}`,"max-width":`${this.width}${this.width==="auto"?"":"rem"}`}},e("div",{class:{"flip-tile-container":true,info:this.state===s.Info,warning:this.state===s.Warning,alarm:this.state===s.Alarm,primary:this.state===s.Primary,"flip-animation-active":this.isFlipAnimationActive}},e("div",{class:"flip-tile-header"},e("div",{class:"header-slot-container text-l-title"},e("slot",{name:"header"})),e("ix-icon-button",{icon:"eye",variant:"primary",ghost:true,onClick:()=>this.toggleIndex()})),e("div",{class:"content-container"},e("slot",null)),e("div",{class:{footer:true,"contrast-light":this.state===s.Warning,"contrast-dark":this.state===s.Info||this.state===s.Alarm}},e("slot",{name:"footer"}))))}get hostElement(){return i(this)}};a.style=n;export{a as ix_flip_tile};
+//# sourceMappingURL=p-794769ed.entry.js.map

package/dist/siemens-ix/p-794769ed.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["flipTileCss","FlipTile","this","ANIMATION_DURATION","componentDidLoad","observer","createMutationObserver","updateContentItems","observe","hostElement","childList","componentWillLoad","updateContentVisibility","index","disconnectedCallback","disconnect","contentItems","Array","from","querySelectorAll","indexVisible","forEach","content","contentVisible","toggleIndex","doFlipAnimation","isFlipAnimationActive","setTimeout","length","render","h","Host","style","height","width","class","info","state","FlipTileState","Info","warning","Warning","alarm","Alarm","primary","Primary","name","icon","variant","ghost","onClick","footer"],"sources":["./src/components/flip-tile/flip-tile.scss?tag=ix-flip-tile&encapsulation=shadow","./src/components/flip-tile/flip-tile.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/animations';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n@import 'legacy/fonts';\n\n@include keyframes(flip-animation) {\n  0% {\n    transform: rotateY(0);\n  }\n  50% {\n    transform: rotateY(90deg);\n  }\n  51% {\n    transform: rotateY(270deg);\n  }\n  100% {\n    transform: rotateY(360deg);\n  }\n}\n\n:host {\n  @include ix-component;\n  display: flex;\n  flex-direction: column;\n  perspective: 1000px;\n\n  .flip-tile-header {\n    display: flex;\n    align-items: center;\n    height: $large-control-height;\n    padding: 0 $small-space 0 $default-space;\n\n    .header-slot-container {\n      @include ellipsis;\n      flex-grow: 1;\n      min-width: 0;\n    }\n  }\n\n  .content-container {\n    flex-grow: 1;\n    margin: $default-space;\n  }\n\n  .flip-tile-container {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background-color: var(--theme-blind-base--background);\n    border: solid 1px var(--theme-blind-base--border-color);\n    border-radius: var(--theme-flip-tile--border-radius)\n      var(--theme-flip-tile--border-radius) 0 0;\n    transform-style: preserve-3d;\n\n    &.flip-animation-active {\n      @include animation(flip-animation, 2 * $default-time, ease-in-out);\n    }\n\n    .footer {\n      display: flex;\n      height: 3rem;\n      align-items: center;\n      justify-content: center;\n      padding: 0 $small-space;\n      color: var(--theme-flip-footer--color);\n      background-color: var(--theme-blind-base--background);\n\n      :first-child {\n        @include ellipsis;\n        height: 100%;\n      }\n    }\n\n    ::slotted(*) {\n      @include ellipsis;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      min-width: 0;\n    }\n\n    &.primary {\n      border-color: var(--theme-color-primary);\n\n      .footer {\n        background-color: var(--theme-color-primary);\n        color: var(--theme-color-primary--contrast);\n      }\n    }\n\n    &.info {\n      border-color: var(--theme-color-info);\n\n      .footer {\n        background-color: var(--theme-color-info);\n        color: var(--theme-color-info--contrast);\n      }\n    }\n\n    &.warning {\n      border-color: var(--theme-color-warning);\n\n      .footer {\n        background-color: var(--theme-color-warning);\n        color: var(--theme-color-warning--contrast);\n      }\n    }\n\n    &.alarm {\n      border-color: var(--theme-color-alarm);\n\n      .footer {\n        background-color: var(--theme-color-alarm);\n        color: var(--theme-color-alarm--contrast);\n      }\n    }\n  }\n\n  &:hover .flip-tile-container .footer ix-icon {\n    color: var(--theme-color-std-text);\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 { createMutationObserver } from '../utils/mutation-observer';\nimport { FlipTileState } from './flip-tile-state';\n\n@Component({\n  tag: 'ix-flip-tile',\n  styleUrl: 'flip-tile.scss',\n  shadow: true,\n})\nexport class FlipTile {\n  @Element() hostElement!: HTMLIxFlipTileElement;\n\n  /**\n   * Variation of the Flip\n   */\n  @Prop() state: FlipTileState;\n\n  /**\n   * Height interpreted as REM\n   * @since 1.5.0\n   */\n  @Prop() height: number | 'auto' = 15.125;\n\n  /**\n   * Width interpreted as REM\n   * @since 1.5.0\n   */\n  @Prop() width: number | 'auto' = 16;\n\n  @State() index = 0;\n  @State() isFlipAnimationActive: boolean;\n\n  private readonly ANIMATION_DURATION = 150;\n  private contentItems: Array<HTMLIxFlipTileContentElement>;\n\n  private observer: MutationObserver;\n\n  componentDidLoad() {\n    this.observer = createMutationObserver(() => this.updateContentItems());\n    this.observer.observe(this.hostElement, {\n      childList: true,\n    });\n  }\n\n  componentWillLoad() {\n    this.updateContentItems();\n    this.updateContentVisibility(this.index);\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  private updateContentItems() {\n    this.contentItems = Array.from(\n      this.hostElement.querySelectorAll('ix-flip-tile-content')\n    );\n  }\n\n  private updateContentVisibility(indexVisible: number) {\n    this.contentItems.forEach(\n      (content, index) => (content.contentVisible = index === indexVisible)\n    );\n  }\n\n  private toggleIndex() {\n    this.doFlipAnimation();\n  }\n\n  private doFlipAnimation() {\n    this.isFlipAnimationActive = true;\n\n    setTimeout(() => {\n      this.updateContentVisibility(this.index);\n\n      if (this.index >= this.contentItems.length - 1) {\n        this.index = 0;\n      } else {\n        this.index++;\n      }\n\n      this.updateContentVisibility(this.index);\n    }, this.ANIMATION_DURATION);\n\n    setTimeout(() => {\n      this.isFlipAnimationActive = false;\n    }, 2 * this.ANIMATION_DURATION);\n  }\n\n  render() {\n    return (\n      <Host\n        style={{\n          height: `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          'min-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          'max-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          width: `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n          'min-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n          'max-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n        }}\n      >\n        <div\n          class={{\n            'flip-tile-container': true,\n            info: this.state === FlipTileState.Info,\n            warning: this.state === FlipTileState.Warning,\n            alarm: this.state === FlipTileState.Alarm,\n            primary: this.state === FlipTileState.Primary,\n            'flip-animation-active': this.isFlipAnimationActive,\n          }}\n        >\n          <div class=\"flip-tile-header\">\n            <div class=\"header-slot-container text-l-title\">\n              <slot name=\"header\"></slot>\n            </div>\n            <ix-icon-button\n              icon={'eye'}\n              variant=\"primary\"\n              ghost\n              onClick={() => this.toggleIndex()}\n            ></ix-icon-button>\n          </div>\n\n          <div class=\"content-container\">\n            <slot></slot>\n          </div>\n          <div\n            class={{\n              footer: true,\n              'contrast-light': this.state === FlipTileState.Warning,\n              'contrast-dark':\n                this.state === FlipTileState.Info ||\n                this.state === FlipTileState.Alarm,\n            }}\n          >\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"iIAAA,MAAMA,EAAc,6oL,MCkBPC,EAAQ,M,yBAuBFC,KAAAC,mBAAqB,I,iCAXJ,O,WAMD,G,WAEhB,E,qCAQjBC,mBACEF,KAAKG,SAAWC,GAAuB,IAAMJ,KAAKK,uBAClDL,KAAKG,SAASG,QAAQN,KAAKO,YAAa,CACtCC,UAAW,M,CAIfC,oBACET,KAAKK,qBACLL,KAAKU,wBAAwBV,KAAKW,M,CAGpCC,uBACE,GAAIZ,KAAKG,SAAU,CACjBH,KAAKG,SAASU,Y,EAIVR,qBACNL,KAAKc,aAAeC,MAAMC,KACxBhB,KAAKO,YAAYU,iBAAiB,wB,CAI9BP,wBAAwBQ,GAC9BlB,KAAKc,aAAaK,SAChB,CAACC,EAAST,IAAWS,EAAQC,eAAiBV,IAAUO,G,CAIpDI,cACNtB,KAAKuB,iB,CAGCA,kBACNvB,KAAKwB,sBAAwB,KAE7BC,YAAW,KACTzB,KAAKU,wBAAwBV,KAAKW,OAElC,GAAIX,KAAKW,OAASX,KAAKc,aAAaY,OAAS,EAAG,CAC9C1B,KAAKW,MAAQ,C,KACR,CACLX,KAAKW,O,CAGPX,KAAKU,wBAAwBV,KAAKW,MAAM,GACvCX,KAAKC,oBAERwB,YAAW,KACTzB,KAAKwB,sBAAwB,KAAK,GACjC,EAAIxB,KAAKC,mB,CAGd0B,SACE,OACEC,EAACC,EAAI,CACHC,MAAO,CACLC,OAAQ,GAAG/B,KAAK+B,SAAS/B,KAAK+B,SAAW,OAAS,GAAK,QACvD,aAAc,GAAG/B,KAAK+B,SAAS/B,KAAK+B,SAAW,OAAS,GAAK,QAC7D,aAAc,GAAG/B,KAAK+B,SAAS/B,KAAK+B,SAAW,OAAS,GAAK,QAC7DC,MAAO,GAAGhC,KAAKgC,QAAQhC,KAAKgC,QAAU,OAAS,GAAK,QACpD,YAAa,GAAGhC,KAAKgC,QAAQhC,KAAKgC,QAAU,OAAS,GAAK,QAC1D,YAAa,GAAGhC,KAAKgC,QAAQhC,KAAKgC,QAAU,OAAS,GAAK,UAG5DJ,EAAA,OACEK,MAAO,CACL,sBAAuB,KACvBC,KAAMlC,KAAKmC,QAAUC,EAAcC,KACnCC,QAAStC,KAAKmC,QAAUC,EAAcG,QACtCC,MAAOxC,KAAKmC,QAAUC,EAAcK,MACpCC,QAAS1C,KAAKmC,QAAUC,EAAcO,QACtC,wBAAyB3C,KAAKwB,wBAGhCI,EAAA,OAAKK,MAAM,oBACTL,EAAA,OAAKK,MAAM,sCACTL,EAAA,QAAMgB,KAAK,YAEbhB,EAAA,kBACEiB,KAAM,MACNC,QAAQ,UACRC,MAAK,KACLC,QAAS,IAAMhD,KAAKsB,iBAIxBM,EAAA,OAAKK,MAAM,qBACTL,EAAA,cAEFA,EAAA,OACEK,MAAO,CACLgB,OAAQ,KACR,iBAAkBjD,KAAKmC,QAAUC,EAAcG,QAC/C,gBACEvC,KAAKmC,QAAUC,EAAcC,MAC7BrC,KAAKmC,QAAUC,EAAcK,QAGjCb,EAAA,QAAMgB,KAAK,a"}

package/dist/siemens-ix/p-7a884056.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["drawerCss","Drawer","this","callback","clickedOutside","bind","minWidth","onShowChanged","newValue","show","undefined","toggleDrawer","async","open","emit","slideInRight","divElement","setTimeout","window","addEventListener","drawerClose","slideOutRight","removeEventListener","Promise","resolve","onCloseClicked","evt","closeOnClickOutside","target","closestElement","closest","btn","type","el","anime","targets","duration","translateX","opacity","easing","complete","classList","add","begin","remove","componentDidLoad","render","h","Host","class","toggle","fullHeight","style","width","maxWidth","ref","id","name","icon","size","ghost","onClick"],"sources":["./src/components/drawer/drawer.scss?tag=ix-drawer&encapsulation=shadow","./src/components/drawer/drawer.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n@import 'mixins/shadows';\n@import 'common-variables';\n\n:host {\n  @include ix-component;\n\n  top: 0;\n  right: 0;\n  @include box-shadow(3);\n\n  visibility: hidden;\n\n  display: flex;\n  position: absolute;\n  flex-flow: column nowrap;\n  justify-content: flex-start;\n  align-items: center;\n\n  max-height: 100vh;\n  min-height: $large-space;\n  background-color: var(--theme-color-1);\n  border-radius: $default-border-radius;\n\n  transition: all $medium-time ease-out;\n\n  .toggle {\n    z-index: 100;\n    visibility: visible;\n  }\n\n  .drawer-container.full-height {\n    min-height: 100%;\n  }\n\n  .header {\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: flex-end;\n    padding: 0.5rem;\n    width: 100%;\n    order: 1;\n\n    .header-content {\n      flex-grow: 1;\n      margin-right: $default-space;\n    }\n  }\n\n  .content {\n    position: relative;\n    flex: 1;\n    flex-grow: 1;\n    order: 2;\n    height: 100%;\n    width: 100%;\n    overflow-y: auto;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\n\n@Component({\n  tag: 'ix-drawer',\n  styleUrl: 'drawer.scss',\n  shadow: true,\n})\nexport class Drawer {\n  /**\n   * Show or hide the drawer\n   */\n  @Prop({ mutable: true }) show = false;\n\n  /**\n   * Fired in case of an outside click during drawer showed state\n   */\n  @Prop() closeOnClickOutside = true;\n\n  /**\n   * Render the drawer with maximum height\n   */\n  @Prop() fullHeight = false;\n\n  /**\n   * Min width interpreted as REM\n   */\n  @Prop() minWidth = 16;\n\n  /**\n   * Max width interpreted as REM\n   */\n  @Prop() maxWidth = 28;\n\n  /**\n   * Width interpreted as REM if not set to 'auto'\n   */\n  @Prop() width: number | 'auto' = this.minWidth;\n\n  /**\n   * Fire event after drawer is open\n   */\n  @Event() open: EventEmitter;\n\n  /**\n   * Fire event after drawer is close\n   */\n  @Event() drawerClose: EventEmitter;\n\n  private static duration = 300;\n  private callback = this.clickedOutside.bind(this);\n  private divElement?: HTMLElement;\n\n  @Watch('show')\n  onShowChanged(newValue: boolean) {\n    this.show = newValue !== undefined ? newValue : !this.show;\n    this.toggleDrawer(this.show);\n  }\n\n  /**\n   * Toggle or define show state of drawer\n   * @param show Overwrite toggle state with boolean\n   */\n  @Method()\n  async toggleDrawer(show?: boolean): Promise<void> {\n    this.show = show !== undefined ? show : !this.show;\n\n    if (show) {\n      this.open.emit();\n      this.slideInRight(this.divElement);\n      setTimeout(() => {\n        window.addEventListener('mousedown', this.callback);\n      }, 300);\n    } else {\n      this.drawerClose.emit();\n      this.slideOutRight(this.divElement);\n      window.removeEventListener('mousedown', this.callback);\n    }\n\n    return Promise.resolve();\n  }\n\n  private onCloseClicked() {\n    this.show = false;\n  }\n\n  private clickedOutside(evt: any) {\n    if (!this.closeOnClickOutside) {\n      return;\n    }\n\n    const target = evt.target;\n    const closestElement = target.closest('#div-container');\n    const btn = target.closest('#drawer-btn');\n\n    if (\n      evt.target.type !== 'button' &&\n      closestElement !== this.divElement &&\n      target !== btn\n    ) {\n      this.show = false;\n    }\n  }\n\n  private slideOutRight(el: HTMLElement) {\n    anime({\n      targets: el,\n      duration: Drawer.duration,\n      translateX: [0, '16rem'],\n      opacity: [1, 0],\n      easing: 'easeInSine',\n      complete: () => {\n        el.classList.add('d-none');\n      },\n    });\n  }\n\n  private slideInRight(el: HTMLElement) {\n    anime({\n      targets: el,\n      duration: Drawer.duration,\n      translateX: ['16rem', 0],\n      opacity: [0, 1],\n      easing: 'easeOutSine',\n      begin: () => {\n        el.classList.remove('d-none');\n      },\n    });\n  }\n\n  componentDidLoad() {\n    this.onShowChanged(this.show);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'drawer-container': true,\n          toggle: this.show,\n          'full-height': this.fullHeight,\n          'd-none': true,\n        }}\n        style={{\n          width: this.width === 'auto' ? this.width : `${this.width}rem`,\n          'min-width': `${this.minWidth}rem`,\n          'max-width': `${this.maxWidth}rem`,\n        }}\n        ref={(el) => (this.divElement = el as HTMLElement)}\n        data-testid=\"container\"\n        id=\"div-container\"\n      >\n        <div class=\"header\">\n          <div class=\"header-content\">\n            <slot name=\"header\"></slot>\n          </div>\n          <ix-icon-button\n            class=\"close-button\"\n            icon=\"close\"\n            size=\"24\"\n            ghost\n            onClick={() => this.onCloseClicked()}\n            data-testid=\"close-button\"\n          ></ix-icon-button>\n        </div>\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAY,6wC,MC0BLC,EAAM,M,6FA0CTC,KAAAC,SAAWD,KAAKE,eAAeC,KAAKH,M,UAtCZ,M,yBAKF,K,gBAKT,M,cAKF,G,cAKA,G,WAKcA,KAAKI,Q,CAiBtCC,cAAcC,GACZN,KAAKO,KAAOD,IAAaE,UAAYF,GAAYN,KAAKO,KACtDP,KAAKS,aAAaT,KAAKO,K,CAQzBG,mBAAmBH,GACjBP,KAAKO,KAAOA,IAASC,UAAYD,GAAQP,KAAKO,KAE9C,GAAIA,EAAM,CACRP,KAAKW,KAAKC,OACVZ,KAAKa,aAAab,KAAKc,YACvBC,YAAW,KACTC,OAAOC,iBAAiB,YAAajB,KAAKC,SAAS,GAClD,I,KACE,CACLD,KAAKkB,YAAYN,OACjBZ,KAAKmB,cAAcnB,KAAKc,YACxBE,OAAOI,oBAAoB,YAAapB,KAAKC,S,CAG/C,OAAOoB,QAAQC,S,CAGTC,iBACNvB,KAAKO,KAAO,K,CAGNL,eAAesB,GACrB,IAAKxB,KAAKyB,oBAAqB,CAC7B,M,CAGF,MAAMC,EAASF,EAAIE,OACnB,MAAMC,EAAiBD,EAAOE,QAAQ,kBACtC,MAAMC,EAAMH,EAAOE,QAAQ,eAE3B,GACEJ,EAAIE,OAAOI,OAAS,UACpBH,IAAmB3B,KAAKc,YACxBY,IAAWG,EACX,CACA7B,KAAKO,KAAO,K,EAIRY,cAAcY,GACpBC,EAAM,CACJC,QAASF,EACTG,SAAUnC,EAAOmC,SACjBC,WAAY,CAAC,EAAG,SAChBC,QAAS,CAAC,EAAG,GACbC,OAAQ,aACRC,SAAU,KACRP,EAAGQ,UAAUC,IAAI,SAAS,G,CAKxB3B,aAAakB,GACnBC,EAAM,CACJC,QAASF,EACTG,SAAUnC,EAAOmC,SACjBC,WAAY,CAAC,QAAS,GACtBC,QAAS,CAAC,EAAG,GACbC,OAAQ,cACRI,MAAO,KACLV,EAAGQ,UAAUG,OAAO,SAAS,G,CAKnCC,mBACE3C,KAAKK,cAAcL,KAAKO,K,CAG1BqC,SACE,OACEC,EAACC,EAAI,CACHC,MAAO,CACL,mBAAoB,KACpBC,OAAQhD,KAAKO,KACb,cAAeP,KAAKiD,WACpB,SAAU,MAEZC,MAAO,CACLC,MAAOnD,KAAKmD,QAAU,OAASnD,KAAKmD,MAAQ,GAAGnD,KAAKmD,WACpD,YAAa,GAAGnD,KAAKI,cACrB,YAAa,GAAGJ,KAAKoD,eAEvBC,IAAMtB,GAAQ/B,KAAKc,WAAaiB,EAAkB,cACtC,YACZuB,GAAG,iBAEHT,EAAA,OAAKE,MAAM,UACTF,EAAA,OAAKE,MAAM,kBACTF,EAAA,QAAMU,KAAK,YAEbV,EAAA,kBACEE,MAAM,eACNS,KAAK,QACLC,KAAK,KACLC,MAAK,KACLC,QAAS,IAAM3D,KAAKuB,iBAAgB,cACxB,kBAGhBsB,EAAA,OAAKE,MAAM,WACTF,EAAA,c,wDArHO9C,EAAAmC,SAAW,I"}
+{"version":3,"names":["drawerCss","Drawer","this","callback","clickedOutside","bind","minWidth","onShowChanged","newValue","show","undefined","toggleDrawer","async","open","emit","slideInRight","divElement","setTimeout","window","addEventListener","drawerClose","slideOutRight","removeEventListener","Promise","resolve","onCloseClicked","evt","closeOnClickOutside","target","closestElement","closest","btn","type","el","anime","targets","duration","translateX","opacity","easing","complete","classList","add","begin","remove","componentDidLoad","render","h","Host","class","toggle","fullHeight","style","width","maxWidth","ref","id","name","icon","size","ghost","onClick"],"sources":["./src/components/drawer/drawer.scss?tag=ix-drawer&encapsulation=shadow","./src/components/drawer/drawer.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n@import 'mixins/shadows';\n@import 'common-variables';\n\n:host {\n  @include ix-component;\n\n  top: 0;\n  right: 0;\n  @include box-shadow(3);\n\n  visibility: hidden;\n\n  display: flex;\n  position: absolute;\n  flex-flow: column nowrap;\n  justify-content: flex-start;\n  align-items: center;\n\n  max-height: 100vh;\n  min-height: $large-space;\n  background-color: var(--theme-color-1);\n  border-radius: $default-border-radius;\n\n  transition: all $medium-time ease-out;\n\n  .toggle {\n    z-index: 100;\n    visibility: visible;\n  }\n\n  .drawer-container.full-height {\n    min-height: 100%;\n  }\n\n  .header {\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: flex-end;\n    padding: 0.5rem;\n    width: 100%;\n    order: 1;\n\n    .header-content {\n      flex-grow: 1;\n      margin-right: $default-space;\n    }\n  }\n\n  .content {\n    position: relative;\n    flex: 1;\n    flex-grow: 1;\n    order: 2;\n    height: 100%;\n    width: 100%;\n    overflow-y: auto;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\n\n@Component({\n  tag: 'ix-drawer',\n  styleUrl: 'drawer.scss',\n  shadow: true,\n})\nexport class Drawer {\n  /**\n   * Show or hide the drawer\n   */\n  @Prop({ mutable: true }) show = false;\n\n  /**\n   * Fired in case of an outside click during drawer showed state\n   */\n  @Prop() closeOnClickOutside = true;\n\n  /**\n   * Render the drawer with maximum height\n   */\n  @Prop() fullHeight = false;\n\n  /**\n   * Min width interpreted as REM\n   */\n  @Prop() minWidth = 16;\n\n  /**\n   * Max width interpreted as REM\n   */\n  @Prop() maxWidth = 28;\n\n  /**\n   * Width interpreted as REM if not set to 'auto'\n   */\n  @Prop() width: number | 'auto' = this.minWidth;\n\n  /**\n   * Fire event after drawer is open\n   */\n  @Event() open: EventEmitter;\n\n  /**\n   * Fire event after drawer is close\n   */\n  @Event() drawerClose: EventEmitter;\n\n  private static duration = 300;\n  private callback = this.clickedOutside.bind(this);\n  private divElement?: HTMLElement;\n\n  @Watch('show')\n  onShowChanged(newValue: boolean) {\n    this.show = newValue !== undefined ? newValue : !this.show;\n    this.toggleDrawer(this.show);\n  }\n\n  /**\n   * Toggle or define show state of drawer\n   * @param show Overwrite toggle state with boolean\n   */\n  @Method()\n  async toggleDrawer(show?: boolean): Promise<void> {\n    this.show = show !== undefined ? show : !this.show;\n\n    if (show) {\n      this.open.emit();\n      this.slideInRight(this.divElement);\n      setTimeout(() => {\n        window.addEventListener('mousedown', this.callback);\n      }, 300);\n    } else {\n      this.drawerClose.emit();\n      this.slideOutRight(this.divElement);\n      window.removeEventListener('mousedown', this.callback);\n    }\n\n    return Promise.resolve();\n  }\n\n  private onCloseClicked() {\n    this.show = false;\n  }\n\n  private clickedOutside(evt: any) {\n    if (!this.closeOnClickOutside) {\n      return;\n    }\n\n    const target = evt.target;\n    const closestElement = target.closest('#div-container');\n    const btn = target.closest('#drawer-btn');\n\n    if (\n      evt.target.type !== 'button' &&\n      closestElement !== this.divElement &&\n      target !== btn\n    ) {\n      this.show = false;\n    }\n  }\n\n  private slideOutRight(el: HTMLElement) {\n    anime({\n      targets: el,\n      duration: Drawer.duration,\n      translateX: [0, '16rem'],\n      opacity: [1, 0],\n      easing: 'easeInSine',\n      complete: () => {\n        el.classList.add('d-none');\n      },\n    });\n  }\n\n  private slideInRight(el: HTMLElement) {\n    anime({\n      targets: el,\n      duration: Drawer.duration,\n      translateX: ['16rem', 0],\n      opacity: [0, 1],\n      easing: 'easeOutSine',\n      begin: () => {\n        el.classList.remove('d-none');\n      },\n    });\n  }\n\n  componentDidLoad() {\n    this.onShowChanged(this.show);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'drawer-container': true,\n          toggle: this.show,\n          'full-height': this.fullHeight,\n          'd-none': true,\n        }}\n        style={{\n          width: this.width === 'auto' ? this.width : `${this.width}rem`,\n          'min-width': `${this.minWidth}rem`,\n          'max-width': `${this.maxWidth}rem`,\n        }}\n        ref={(el) => (this.divElement = el as HTMLElement)}\n        data-testid=\"container\"\n        id=\"div-container\"\n      >\n        <div class=\"header\">\n          <div class=\"header-content\">\n            <slot name=\"header\"></slot>\n          </div>\n          <ix-icon-button\n            class=\"close-button\"\n            icon={'close'}\n            size=\"24\"\n            ghost\n            onClick={() => this.onCloseClicked()}\n            data-testid=\"close-button\"\n          ></ix-icon-button>\n        </div>\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAY,6wC,MC0BLC,EAAM,M,6FA0CTC,KAAAC,SAAWD,KAAKE,eAAeC,KAAKH,M,UAtCZ,M,yBAKF,K,gBAKT,M,cAKF,G,cAKA,G,WAKcA,KAAKI,Q,CAiBtCC,cAAcC,GACZN,KAAKO,KAAOD,IAAaE,UAAYF,GAAYN,KAAKO,KACtDP,KAAKS,aAAaT,KAAKO,K,CAQzBG,mBAAmBH,GACjBP,KAAKO,KAAOA,IAASC,UAAYD,GAAQP,KAAKO,KAE9C,GAAIA,EAAM,CACRP,KAAKW,KAAKC,OACVZ,KAAKa,aAAab,KAAKc,YACvBC,YAAW,KACTC,OAAOC,iBAAiB,YAAajB,KAAKC,SAAS,GAClD,I,KACE,CACLD,KAAKkB,YAAYN,OACjBZ,KAAKmB,cAAcnB,KAAKc,YACxBE,OAAOI,oBAAoB,YAAapB,KAAKC,S,CAG/C,OAAOoB,QAAQC,S,CAGTC,iBACNvB,KAAKO,KAAO,K,CAGNL,eAAesB,GACrB,IAAKxB,KAAKyB,oBAAqB,CAC7B,M,CAGF,MAAMC,EAASF,EAAIE,OACnB,MAAMC,EAAiBD,EAAOE,QAAQ,kBACtC,MAAMC,EAAMH,EAAOE,QAAQ,eAE3B,GACEJ,EAAIE,OAAOI,OAAS,UACpBH,IAAmB3B,KAAKc,YACxBY,IAAWG,EACX,CACA7B,KAAKO,KAAO,K,EAIRY,cAAcY,GACpBC,EAAM,CACJC,QAASF,EACTG,SAAUnC,EAAOmC,SACjBC,WAAY,CAAC,EAAG,SAChBC,QAAS,CAAC,EAAG,GACbC,OAAQ,aACRC,SAAU,KACRP,EAAGQ,UAAUC,IAAI,SAAS,G,CAKxB3B,aAAakB,GACnBC,EAAM,CACJC,QAASF,EACTG,SAAUnC,EAAOmC,SACjBC,WAAY,CAAC,QAAS,GACtBC,QAAS,CAAC,EAAG,GACbC,OAAQ,cACRI,MAAO,KACLV,EAAGQ,UAAUG,OAAO,SAAS,G,CAKnCC,mBACE3C,KAAKK,cAAcL,KAAKO,K,CAG1BqC,SACE,OACEC,EAACC,EAAI,CACHC,MAAO,CACL,mBAAoB,KACpBC,OAAQhD,KAAKO,KACb,cAAeP,KAAKiD,WACpB,SAAU,MAEZC,MAAO,CACLC,MAAOnD,KAAKmD,QAAU,OAASnD,KAAKmD,MAAQ,GAAGnD,KAAKmD,WACpD,YAAa,GAAGnD,KAAKI,cACrB,YAAa,GAAGJ,KAAKoD,eAEvBC,IAAMtB,GAAQ/B,KAAKc,WAAaiB,EAAkB,cACtC,YACZuB,GAAG,iBAEHT,EAAA,OAAKE,MAAM,UACTF,EAAA,OAAKE,MAAM,kBACTF,EAAA,QAAMU,KAAK,YAEbV,EAAA,kBACEE,MAAM,eACNS,KAAM,QACNC,KAAK,KACLC,MAAK,KACLC,QAAS,IAAM3D,KAAKuB,iBAAgB,cACxB,kBAGhBsB,EAAA,OAAKE,MAAM,WACTF,EAAA,c,wDArHO9C,EAAAmC,SAAW,I"}

package/dist/siemens-ix/p-7b362f58.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as s,h as i,H as e,g as r}from"./p-76a509c7.js";import{f as h,i as o,s as n,o as a,a as d,c}from"./p-00df4a8c.js";const l=":host{background-color:var(--theme-color-2);border-radius:var(--theme-default-border-radius);min-width:0px;z-index:var(--theme-z-index-dropdown);box-shadow:var(--theme-shadow-4);padding:0.25rem 0px}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .dropdown-header{display:flex;align-items:center;height:2.5rem;color:var(--theme-menu-header--color);padding:0 1rem}:host(.overflow){max-height:50vh;overflow-y:auto}:host(:not(.show)){display:none}";const u=new Map;let f=0;const b=class{constructor(i){t(this,i);this.showChanged=s(this,"showChanged",7);this.autoUpdateCleanup=null;this.localUId=`dropdown-${f++}-${(new Date).valueOf()}`;this.suppressAutomaticPlacement=false;this.show=false;this.trigger=undefined;this.anchor=undefined;this.closeBehavior="both";this.placement="bottom-start";this.positioningStrategy="fixed";this.header=undefined;this.offset=undefined;this.triggerEvent="click";this.overwriteDropdownStyle=undefined;this.toggleBind=this.toggle.bind(this);this.openBind=this.open.bind(this);if(u.has(this.localUId)){console.warn("Dropdown with duplicated id detected")}u.set(this.localUId,this.close.bind(this))}get dropdownItems(){return Array.from(this.hostElement.querySelectorAll("ix-dropdown-item"))}get slotElement(){return this.hostElement.shadowRoot.querySelector("slot")}addEventListenersFor(t){switch(t){case"click":this.triggerElement.addEventListener("click",this.openBind);break;case"hover":this.triggerElement.addEventListener("mouseenter",this.openBind);break;case"focus":this.triggerElement.addEventListener("focusin",this.openBind);break}}removeEventListenersFor(t,s){switch(t){case"click":if(this.closeBehavior==="outside"){s.removeEventListener("click",this.openBind)}else{s.removeEventListener("click",this.toggleBind)}break;case"hover":s.removeEventListener("mouseenter",this.openBind);break;case"focus":s.removeEventListener("focusin",this.openBind);break}}async registerListener(t){this.triggerElement=await this.resolveElement(t);if(this.triggerElement){if(Array.isArray(this.triggerEvent)){this.triggerEvent.forEach((t=>{this.addEventListenersFor(t)}))}else{this.addEventListenersFor(this.triggerEvent)}}}async unregisterListener(t){const s=await this.resolveElement(t);if(Array.isArray(this.triggerEvent)){this.triggerEvent.forEach((t=>{this.removeEventListenersFor(t,s)}))}else{this.removeEventListenersFor(this.triggerEvent,s)}}resolveElement(t){if(typeof t!=="string"){return Promise.resolve(t)}const s=`#${t}`;return new Promise((t=>{if(document.querySelector(s)){return t(document.querySelector(s))}const i=new MutationObserver((()=>{if(document.querySelector(s)){t(document.querySelector(s));i.disconnect()}}));i.observe(document.body,{childList:true,subtree:true})}))}async changedShow(t){if(t){this.anchorElement=await(this.anchor?this.resolveElement(this.anchor):this.resolveElement(this.trigger));if(this.anchorElement){this.applyDropdownPosition()}}if(t){u.forEach(((t,s)=>{if(s!==this.localUId&&!this.isAnchorSubmenu()){t()}}))}}changedTrigger(t,s){if(t){this.registerListener(t)}if(s){this.unregisterListener(s)}}clickOutside(t){var s,i;const e=t.target;if(t.defaultPrevented){return}if(this.show===false||this.closeBehavior===false||((s=this.anchorElement)===null||s===void 0?void 0:s.contains(e))||((i=this.triggerElement)===null||i===void 0?void 0:i.contains(e))){return}const r=this.isClickInsideDropdown(t);switch(this.closeBehavior){case"outside":if(!r||this.anchor===e){this.close()}break;case"inside":if(r&&this.hostElement!==e){this.close()}break;case"both":if(this.hostElement!==e){this.close()}break;default:this.close()}}keydown(t){if(this.show===true&&t.code==="Escape"){this.close()}}isNestedDropdown(t){return t.closest("ix-dropdown")}isAnchorSubmenu(){var t;const s=(t=this.anchorElement)===null||t===void 0?void 0:t.closest("ix-dropdown-item");if(!s){return false}return true}toggle(t){t.preventDefault();if(this.isNestedDropdown(t.target)){t.stopPropagation()}const{defaultPrevented:s}=this.showChanged.emit(this.show);if(!s){this.show=!this.show}}open(t){t.preventDefault();if(this.isNestedDropdown(t.target)){t.stopPropagation()}const{defaultPrevented:s}=this.showChanged.emit(true);if(!s){this.show=true}}close(){const{defaultPrevented:t}=this.showChanged.emit(false);if(!t){this.show=false}}async applyDropdownPosition(){if(!this.anchorElement){return}if(!this.dropdownRef){return}const t=this.isAnchorSubmenu();let s={strategy:this.positioningStrategy,middleware:[]};if(!this.suppressAutomaticPlacement){s.middleware.push(h({fallbackStrategy:"initialPlacement"}))}s.placement=t?"right-start":this.placement;s.middleware=[...s.middleware,o(),n()];if(this.offset){s.middleware.push(a(this.offset))}if(this.autoUpdateCleanup){this.autoUpdateCleanup();this.autoUpdateCleanup=null}this.autoUpdateCleanup=d(this.anchorElement,this.dropdownRef,(async()=>{const t=await c(this.anchorElement,this.dropdownRef,s);Object.assign(this.dropdownRef.style,{top:"0",left:"0",transform:`translate(${Math.round(t.x)}px,${Math.round(t.y)}px)`});if(this.overwriteDropdownStyle){const t=await this.overwriteDropdownStyle({dropdownRef:this.dropdownRef,triggerRef:this.triggerElement});Object.assign(this.dropdownRef.style,t)}}),{ancestorResize:true,ancestorScroll:true,elementResize:true})}async componentDidLoad(){this.changedTrigger(this.trigger,null)}async componentDidRender(){var t;await this.applyDropdownPosition();this.anchorElement=await(this.anchor?this.resolveElement(this.anchor):this.resolveElement(this.trigger));if(this.isAnchorSubmenu()&&((t=this.anchorElement)===null||t===void 0?void 0:t.tagName)==="IX-DROPDOWN-ITEM"){this.anchorElement.isSubMenu=true}}isClickInsideDropdown(t){const s=this.dropdownRef.getBoundingClientRect();return s.top<=t.clientY&&t.clientY<=s.top+s.height&&s.left<=t.clientX&&t.clientX<=s.left+s.width}disconnectedCallback(){if(this.autoUpdateCleanup){this.autoUpdateCleanup()}if(u.has(this.localUId)){u.delete(this.localUId)}}async updatePosition(){this.applyDropdownPosition()}render(){return i(e,{ref:t=>this.dropdownRef=t,class:{"dropdown-menu":true,show:this.show,overflow:true},style:{margin:"0",minWidth:"0px",position:this.positioningStrategy},role:"list"},i("div",{style:{display:"contents"}},this.header?i("div",{class:"dropdown-header"},this.header):"",i("slot",null)))}get hostElement(){return r(this)}static get watchers(){return{show:["changedShow"],trigger:["changedTrigger"]}}};b.style=l;export{b as ix_dropdown};
+//# sourceMappingURL=p-7b362f58.entry.js.map

package/dist/siemens-ix/p-7b362f58.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["dropdownCss","dropdownDisposer","Map","sequenceId","Dropdown","constructor","hostRef","this","autoUpdateCleanup","localUId","Date","valueOf","toggleBind","toggle","bind","openBind","open","has","console","warn","set","close","dropdownItems","Array","from","hostElement","querySelectorAll","slotElement","shadowRoot","querySelector","addEventListenersFor","triggerEvent","triggerElement","addEventListener","removeEventListenersFor","closeBehavior","removeEventListener","async","element","resolveElement","isArray","forEach","trigger","Promise","resolve","selector","document","observer","MutationObserver","disconnect","observe","body","childList","subtree","newShow","anchorElement","anchor","applyDropdownPosition","dispose","id","isAnchorSubmenu","changedTrigger","newTriggerValue","oldTriggerValue","registerListener","unregisterListener","clickOutside","event","target","defaultPrevented","show","_a","contains","_b","clickInsideDropdown","isClickInsideDropdown","keydown","code","isNestedDropdown","closest","preventDefault","stopPropagation","showChanged","emit","dropdownRef","isSubmenu","positionConfig","strategy","positioningStrategy","middleware","suppressAutomaticPlacement","push","flip","fallbackStrategy","placement","inline","shift","offset","autoUpdate","computeResponse","computePosition","Object","assign","style","top","left","transform","Math","round","x","y","overwriteDropdownStyle","overwriteStyle","triggerRef","ancestorResize","ancestorScroll","elementResize","tagName","isSubMenu","rect","getBoundingClientRect","clientY","height","clientX","width","disconnectedCallback","delete","render","h","Host","ref","class","overflow","margin","minWidth","position","role","display","header"],"sources":["./src/components/dropdown/dropdown.scss?tag=ix-dropdown&encapsulation=shadow","./src/components/dropdown/dropdown.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\n@import 'legacy/mixins/fonts';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  background-color: var(--theme-color-2);\n  border-radius: var(--theme-default-border-radius);\n  @include ix-component;\n  min-width: 0px;\n  z-index: var(--theme-z-index-dropdown);\n  box-shadow: var(--theme-shadow-4);\n\n  padding: 0.25rem 0px;\n\n  .dropdown-header {\n    display: flex;\n    align-items: center;\n    height: $large-control-height;\n    color: var(--theme-menu-header--color);\n    padding: 0 $default-space;\n  }\n}\n\n:host(.overflow) {\n  max-height: 50vh;\n  overflow-y: auto;\n}\n\n:host(:not(.show)) {\n  display: none;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  autoUpdate,\n  computePosition,\n  ComputePositionConfig,\n  flip,\n  inline,\n  offset,\n  shift,\n} from '@floating-ui/dom';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { AlignedPlacement } from './placement';\n\n/**\n * @internal\n */\nexport type DropdownTriggerEvent = 'click' | 'hover' | 'focus';\n\ntype DisposeDropdown = () => void;\nconst dropdownDisposer = new Map<string, DisposeDropdown>();\nlet sequenceId = 0;\n\n@Component({\n  tag: 'ix-dropdown',\n  styleUrl: 'dropdown.scss',\n  shadow: true,\n})\nexport class Dropdown {\n  @Element() hostElement!: HTMLIxDropdownElement;\n\n  /**\n   * Suppress the automatic placement of the dropdown.\n   *\n   * @since 2.0.0\n   */\n  @Prop() suppressAutomaticPlacement = false;\n\n  /**\n   * Show dropdown\n   */\n  @Prop({ mutable: true, reflect: true }) show = false;\n\n  /**\n   * Define an element that triggers the dropdown.\n   * A trigger can either be a string that will be interpreted as id attribute or a DOM element.\n   */\n  @Prop() trigger: string | HTMLElement;\n\n  /**\n   * Define an anchor element\n   */\n  @Prop() anchor: string | HTMLElement;\n\n  /**\n   * Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.\n   */\n  @Prop() closeBehavior: 'inside' | 'outside' | 'both' | boolean = 'both';\n\n  /**\n   * Placement of the dropdown\n   */\n  @Prop() placement: AlignedPlacement = 'bottom-start';\n\n  /**\n   * Position strategy\n   */\n  @Prop() positioningStrategy: 'absolute' | 'fixed' = 'fixed';\n\n  /**\n   * An optional header shown at the top of the dropdown\n   */\n  @Prop() header?: string;\n\n  /**\n   * Move dropdown along main axis of alignment\n   *\n   * @internal\n   */\n  @Prop() offset: {\n    mainAxis?: number;\n    crossAxis?: number;\n    alignmentAxis?: number;\n  };\n\n  /**\n   * Define one or more events to open dropdown\n   * @internal\n   */\n  @Prop() triggerEvent: DropdownTriggerEvent | DropdownTriggerEvent[] = 'click';\n\n  /**\n   * @internal\n   */\n  @Prop() overwriteDropdownStyle: (delegate: {\n    dropdownRef: HTMLElement;\n    triggerRef?: HTMLElement;\n  }) => Promise<Partial<CSSStyleDeclaration>>;\n\n  /**\n   * Fire event after visibility of dropdown has changed\n   */\n  @Event() showChanged: EventEmitter<boolean>;\n\n  private autoUpdateCleanup: () => void = null;\n\n  private triggerElement?: Element;\n  private anchorElement?: Element;\n\n  private dropdownRef: HTMLElement;\n\n  private toggleBind: any;\n  private openBind: any;\n\n  private localUId = `dropdown-${sequenceId++}-${new Date().valueOf()}`;\n\n  constructor() {\n    this.toggleBind = this.toggle.bind(this);\n    this.openBind = this.open.bind(this);\n\n    if (dropdownDisposer.has(this.localUId)) {\n      console.warn('Dropdown with duplicated id detected');\n    }\n\n    dropdownDisposer.set(this.localUId, this.close.bind(this));\n  }\n\n  get dropdownItems() {\n    return Array.from(this.hostElement.querySelectorAll('ix-dropdown-item'));\n  }\n\n  get slotElement() {\n    return this.hostElement.shadowRoot.querySelector('slot');\n  }\n\n  private addEventListenersFor(triggerEvent: DropdownTriggerEvent) {\n    switch (triggerEvent) {\n      case 'click':\n        this.triggerElement.addEventListener('click', this.openBind);\n        break;\n\n      case 'hover':\n        this.triggerElement.addEventListener('mouseenter', this.openBind);\n        break;\n\n      case 'focus':\n        this.triggerElement.addEventListener('focusin', this.openBind);\n        break;\n    }\n  }\n\n  private removeEventListenersFor(\n    triggerEvent: DropdownTriggerEvent,\n    triggerElement: Element\n  ) {\n    switch (triggerEvent) {\n      case 'click':\n        if (this.closeBehavior === 'outside') {\n          triggerElement.removeEventListener('click', this.openBind);\n        } else {\n          triggerElement.removeEventListener('click', this.toggleBind);\n        }\n        break;\n\n      case 'hover':\n        triggerElement.removeEventListener('mouseenter', this.openBind);\n        break;\n\n      case 'focus':\n        triggerElement.removeEventListener('focusin', this.openBind);\n        break;\n    }\n  }\n\n  private async registerListener(element: string | HTMLElement) {\n    this.triggerElement = await this.resolveElement(element);\n    if (this.triggerElement) {\n      if (Array.isArray(this.triggerEvent)) {\n        this.triggerEvent.forEach((triggerEvent) => {\n          this.addEventListenersFor(triggerEvent);\n        });\n      } else {\n        this.addEventListenersFor(this.triggerEvent);\n      }\n    }\n  }\n\n  private async unregisterListener(element: string | HTMLElement) {\n    const trigger = await this.resolveElement(element);\n    if (Array.isArray(this.triggerEvent)) {\n      this.triggerEvent.forEach((triggerEvent) => {\n        this.removeEventListenersFor(triggerEvent, trigger);\n      });\n    } else {\n      this.removeEventListenersFor(this.triggerEvent, trigger);\n    }\n  }\n\n  private resolveElement(element: string | HTMLElement): Promise<Element> {\n    if (typeof element !== 'string') {\n      return Promise.resolve(element);\n    }\n\n    const selector = `#${element}`;\n    return new Promise((resolve) => {\n      if (document.querySelector(selector)) {\n        return resolve(document.querySelector(selector));\n      }\n\n      const observer = new MutationObserver(() => {\n        if (document.querySelector(selector)) {\n          resolve(document.querySelector(selector));\n          observer.disconnect();\n        }\n      });\n\n      observer.observe(document.body, {\n        childList: true,\n        subtree: true,\n      });\n    });\n  }\n\n  @Watch('show')\n  async changedShow(newShow: boolean) {\n    if (newShow) {\n      this.anchorElement = await (this.anchor\n        ? this.resolveElement(this.anchor)\n        : this.resolveElement(this.trigger));\n\n      if (this.anchorElement) {\n        this.applyDropdownPosition();\n      }\n    }\n\n    if (newShow) {\n      dropdownDisposer.forEach((dispose, id) => {\n        if (id !== this.localUId && !this.isAnchorSubmenu()) {\n          dispose();\n        }\n      });\n    }\n  }\n\n  @Watch('trigger')\n  changedTrigger(\n    newTriggerValue: string | HTMLElement,\n    oldTriggerValue: string | HTMLElement\n  ) {\n    if (newTriggerValue) {\n      this.registerListener(newTriggerValue);\n    }\n\n    if (oldTriggerValue) {\n      this.unregisterListener(oldTriggerValue);\n    }\n  }\n\n  @Listen('click', {\n    target: 'window',\n  })\n  clickOutside(event: PointerEvent) {\n    const target = event.target as HTMLElement;\n\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    if (\n      this.show === false ||\n      this.closeBehavior === false ||\n      this.anchorElement?.contains(target) ||\n      this.triggerElement?.contains(target)\n    ) {\n      return;\n    }\n\n    const clickInsideDropdown = this.isClickInsideDropdown(event);\n\n    switch (this.closeBehavior) {\n      case 'outside':\n        if (!clickInsideDropdown || this.anchor === target) {\n          this.close();\n        }\n        break;\n      case 'inside':\n        if (clickInsideDropdown && this.hostElement !== target) {\n          this.close();\n        }\n        break;\n      case 'both':\n        if (this.hostElement !== target) {\n          this.close();\n        }\n        break;\n      default:\n        this.close();\n    }\n  }\n\n  @Listen('keydown', {\n    target: 'window',\n  })\n  keydown(event: KeyboardEvent) {\n    if (this.show === true && event.code === 'Escape') {\n      this.close();\n    }\n  }\n\n  private isNestedDropdown(element: Element) {\n    return element.closest('ix-dropdown');\n  }\n\n  private isAnchorSubmenu() {\n    const anchor = this.anchorElement?.closest('ix-dropdown-item');\n    if (!anchor) {\n      return false;\n    }\n\n    return true;\n  }\n\n  private toggle(event: Event) {\n    event.preventDefault();\n\n    if (this.isNestedDropdown(event.target as HTMLElement)) {\n      event.stopPropagation();\n    }\n\n    const { defaultPrevented } = this.showChanged.emit(this.show);\n\n    if (!defaultPrevented) {\n      this.show = !this.show;\n    }\n  }\n\n  private open(event: Event) {\n    event.preventDefault();\n\n    if (this.isNestedDropdown(event.target as HTMLElement)) {\n      event.stopPropagation();\n    }\n\n    const { defaultPrevented } = this.showChanged.emit(true);\n\n    if (!defaultPrevented) {\n      this.show = true;\n    }\n  }\n\n  private close() {\n    const { defaultPrevented } = this.showChanged.emit(false);\n\n    if (!defaultPrevented) {\n      this.show = false;\n    }\n  }\n\n  private async applyDropdownPosition() {\n    if (!this.anchorElement) {\n      return;\n    }\n    if (!this.dropdownRef) {\n      return;\n    }\n    const isSubmenu = this.isAnchorSubmenu();\n\n    let positionConfig: Partial<ComputePositionConfig> = {\n      strategy: this.positioningStrategy,\n      middleware: [],\n    };\n\n    if (!this.suppressAutomaticPlacement) {\n      positionConfig.middleware.push(\n        flip({ fallbackStrategy: 'initialPlacement' })\n      );\n    }\n\n    positionConfig.placement = isSubmenu ? 'right-start' : this.placement;\n\n    positionConfig.middleware = [\n      ...positionConfig.middleware,\n      inline(),\n      shift(),\n    ];\n\n    if (this.offset) {\n      positionConfig.middleware.push(offset(this.offset));\n    }\n\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n      this.autoUpdateCleanup = null;\n    }\n\n    this.autoUpdateCleanup = autoUpdate(\n      this.anchorElement,\n      this.dropdownRef,\n      async () => {\n        const computeResponse = await computePosition(\n          this.anchorElement,\n          this.dropdownRef,\n          positionConfig\n        );\n\n        Object.assign(this.dropdownRef.style, {\n          top: '0',\n          left: '0',\n          transform: `translate(${Math.round(computeResponse.x)}px,${Math.round(\n            computeResponse.y\n          )}px)`,\n        });\n        if (this.overwriteDropdownStyle) {\n          const overwriteStyle = await this.overwriteDropdownStyle({\n            dropdownRef: this.dropdownRef,\n            triggerRef: this.triggerElement as HTMLElement,\n          });\n\n          Object.assign(this.dropdownRef.style, overwriteStyle);\n        }\n      },\n      {\n        ancestorResize: true,\n        ancestorScroll: true,\n        elementResize: true,\n      }\n    );\n  }\n\n  async componentDidLoad() {\n    this.changedTrigger(this.trigger, null);\n  }\n\n  async componentDidRender() {\n    await this.applyDropdownPosition();\n    this.anchorElement = await (this.anchor\n      ? this.resolveElement(this.anchor)\n      : this.resolveElement(this.trigger));\n\n    if (\n      this.isAnchorSubmenu() &&\n      this.anchorElement?.tagName === 'IX-DROPDOWN-ITEM'\n    ) {\n      (this.anchorElement as HTMLIxDropdownItemElement).isSubMenu = true;\n    }\n  }\n\n  private isClickInsideDropdown(event: PointerEvent) {\n    const rect = this.dropdownRef.getBoundingClientRect();\n    return (\n      rect.top <= event.clientY &&\n      event.clientY <= rect.top + rect.height &&\n      rect.left <= event.clientX &&\n      event.clientX <= rect.left + rect.width\n    );\n  }\n\n  disconnectedCallback() {\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n    }\n\n    if (dropdownDisposer.has(this.localUId)) {\n      dropdownDisposer.delete(this.localUId);\n    }\n  }\n\n  /**\n   * Update position of dropdown\n   */\n  @Method()\n  async updatePosition() {\n    this.applyDropdownPosition();\n  }\n\n  render() {\n    return (\n      <Host\n        ref={(ref) => (this.dropdownRef = ref)}\n        class={{\n          'dropdown-menu': true,\n          show: this.show,\n          overflow: true,\n        }}\n        style={{\n          margin: '0',\n          minWidth: '0px',\n          position: this.positioningStrategy,\n        }}\n        role=\"list\"\n      >\n        <div style={{ display: 'contents' }}>\n          {this.header ? <div class=\"dropdown-header\">{this.header}</div> : ''}\n\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/siemens-ix/p-80871c9a.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as o,h as t,H as r,g as s}from"./p-76a509c7.js";const i=":host{display:inline-flex;align-items:center;justify-content:space-between;height:1.5rem;padding-left:0.5rem;border:var(--theme-focus--border-thickness) solid var(--theme-chip-primary-outline--border-color);border-radius:2rem;background-color:var(--theme-color-ghost);color:var(--theme-chip-primary-outline--color)}: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 .slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .slot-container :host-context(.disabled){background-color:var(--theme-color-ghost);border-color:var(--theme-color-component-4);color:var(--theme-color-weak-text)}:host ix-icon-button{height:1.5rem;margin-left:0.25rem}:host ix-icon-button:not(.disabled):not(:disabled):focus-visible{outline:none}:host(.disabled){border:var(--theme-focus--border-thickness) solid var(--theme-color-component-4);color:var(--theme-color-weak-text);padding-right:0.5rem;cursor:default}:host(.readonly){padding-right:0.5rem}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:hover:not(.disabled):not(:disabled)){background-color:var(--theme-color-ghost-primary--hover);border-color:var(--theme-chip-primary-outline--border-color--hover);color:var(--theme-chip-primary-outline--color--hover)}:host(:not(.disabled):not(:disabled)){cursor:pointer}:host(:active:not(.disabled):not(:disabled)){background-color:var(--theme-color-ghost-primary--active);border-color:var(--theme-chip-primary-outline--border-color--active);color:var(--theme-chip-primary-outline--color--active)}:host(:focus-visible:not(.disabled):not(:disabled)){outline:var(--theme-color-focus-bdr) solid var(--theme-focus--border-thickness);outline-offset:-0.125rem}";const l=class{constructor(t){e(this,t);this.closeClick=o(this,"closeClick",7);this.disabled=false;this.readonly=false}onCloseClick(e){e.preventDefault();e.stopPropagation();this.closeClick.emit()}render(){return t(r,{class:{disabled:this.disabled,readonly:this.readonly},title:this.el.textContent},t("div",{class:"slot-container"},t("slot",null)),!this.disabled&&!this.readonly?t("ix-icon-button",{ghost:true,oval:true,icon:"close-small",size:"16",tabindex:this.disabled?-1:0,variant:"primary",disabled:this.disabled,onClick:e=>this.onCloseClick(e)}):null)}get el(){return s(this)}};l.style=i;class a extends CustomEvent{constructor(e){super("ix-select-item:labelChange",{bubbles:true,detail:e})}}const c=":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 h=class{constructor(t){e(this,t);this.itemClick=o(this,"itemClick",7);this.label=undefined;this.value=undefined;this.selected=false;this.hover=false}async onItemClick(e){e===null||e===void 0?void 0:e.preventDefault();e===null||e===void 0?void 0:e.stopPropagation();this.itemClick.emit(this.value)}componentDidRender(){if(!this.value){throw Error("ix-select-item must have a `value` property")}}labelChange(e,o){this.hostElement.dispatchEvent(new a({newValue:e,oldValue:o}))}render(){return t(r,null,t("ix-dropdown-item",{class:{"select-item-checked":this.selected},checked:this.selected,label:this.label?this.label:this.value,onItemClick:e=>this.onItemClick(e)}))}get hostElement(){return s(this)}static get watchers(){return{label:["labelChange"]}}};h.style=c;export{l as ix_filter_chip,h as ix_select_item};
+//# sourceMappingURL=p-80871c9a.entry.js.map

package/dist/siemens-ix/p-80871c9a.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["filterChipCss","FilterChip","onCloseClick","event","preventDefault","stopPropagation","this","closeClick","emit","render","h","Host","class","disabled","readonly","title","el","textContent","ghost","oval","icon","size","tabindex","variant","onClick","e","IxSelectItemLabelChangeEvent","CustomEvent","constructor","detail","super","bubbles","selectItemCss","SelectItem","async","itemClick","value","componentDidRender","Error","labelChange","newValue","oldValue","hostElement","dispatchEvent","selected","checked","label","onItemClick"],"sources":["./src/components/filter-chip/filter-chip.scss?tag=ix-filter-chip&encapsulation=shadow","./src/components/filter-chip/filter-chip.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 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: space-between;\n  height: $large-space;\n  padding-left: $small-space;\n  border: var(--theme-focus--border-thickness) solid\n    var(--theme-chip-primary-outline--border-color);\n  border-radius: $x-large-space;\n  background-color: var(--theme-color-ghost);\n  color: var(--theme-chip-primary-outline--color);\n\n  .slot-container {\n    @include ellipsis;\n\n    :host-context(.disabled) {\n      background-color: var(--theme-color-ghost);\n      border-color: var(--theme-color-component-4);\n      color: var(--theme-color-weak-text);\n    }\n  }\n\n  ix-icon-button {\n    height: $large-space;\n    margin-left: 0.25rem;\n\n    @include focus-visible {\n      outline: none;\n    }\n  }\n}\n\n:host(.disabled) {\n  border: var(--theme-focus--border-thickness) solid\n    var(--theme-color-component-4);\n  color: var(--theme-color-weak-text);\n  padding-right: $small-space;\n\n  cursor: default;\n}\n\n:host(.readonly) {\n  padding-right: $small-space;\n}\n\n@include host-hover {\n  background-color: var(--theme-color-ghost-primary--hover);\n  border-color: var(--theme-chip-primary-outline--border-color--hover);\n  color: var(--theme-chip-primary-outline--color--hover);\n}\n\n@include host-active {\n  background-color: var(--theme-color-ghost-primary--active);\n  border-color: var(--theme-chip-primary-outline--border-color--active);\n  color: var(--theme-chip-primary-outline--color--active);\n}\n\n@include host-focus-visible {\n  outline: var(--theme-color-focus-bdr) solid\n    var(--theme-focus--border-thickness);\n  outline-offset: -0.125rem;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-filter-chip',\n  styleUrl: 'filter-chip.scss',\n  shadow: true,\n})\nexport class FilterChip {\n  @Element() el: HTMLIxFilterChipElement;\n\n  /**\n   * If true the filter chip will be in disabled state\n   */\n  @Prop() disabled = false;\n\n  /**\n   * If true the filter chip will be in readonly mode\n   * @since 2.0.0\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Close clicked\n   */\n  @Event() closeClick: EventEmitter<void>;\n\n  private onCloseClick(event: Event) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.closeClick.emit();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{ disabled: this.disabled, readonly: this.readonly }}\n        title={this.el.textContent}\n      >\n        <div class=\"slot-container\">\n          <slot></slot>\n        </div>\n        {!this.disabled && !this.readonly ? (\n          <ix-icon-button\n            ghost\n            oval\n            icon={'close-small'}\n            size=\"16\"\n            tabindex={this.disabled ? -1 : 0}\n            variant=\"primary\"\n            disabled={this.disabled}\n            onClick={(e) => this.onCloseClick(e)}\n          ></ix-icon-button>\n        ) : null}\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":"gEAAA,MAAMA,EAAgB,+qE,MCwBTC,EAAU,M,8EAMF,M,cAMA,K,CAOXC,aAAaC,GACnBA,EAAMC,iBACND,EAAME,kBACNC,KAAKC,WAAWC,M,CAGlBC,SACE,OACEC,EAACC,EAAI,CACHC,MAAO,CAAEC,SAAUP,KAAKO,SAAUC,SAAUR,KAAKQ,UACjDC,MAAOT,KAAKU,GAAGC,aAEfP,EAAA,OAAKE,MAAM,kBACTF,EAAA,eAEAJ,KAAKO,WAAaP,KAAKQ,SACvBJ,EAAA,kBACEQ,MAAK,KACLC,KAAI,KACJC,KAAM,cACNC,KAAK,KACLC,SAAUhB,KAAKO,UAAY,EAAI,EAC/BU,QAAQ,UACRV,SAAUP,KAAKO,SACfW,QAAUC,GAAMnB,KAAKJ,aAAauB,KAElC,K,2CC7DCC,UAAqCC,YAIhDC,YAAYC,GACVC,MAAM,6BAA8B,CAClCC,QAAS,KACTF,U,ECfN,MAAMG,EAAgB,oQ,MC2BTC,EAAU,M,sHAgBF,M,WAKH,K,CAYhBC,kBAAkB/B,GAChBA,IAAK,MAALA,SAAK,SAALA,EAAOC,iBACPD,IAAK,MAALA,SAAK,SAALA,EAAOE,kBAEPC,KAAK6B,UAAU3B,KAAKF,KAAK8B,M,CAG3BC,qBACE,IAAK/B,KAAK8B,MAAO,CACf,MAAME,MAAM,8C,EAKhBC,YAAYC,EAAkBC,GAC5BnC,KAAKoC,YAAYC,cACf,IAAIjB,EAA6B,CAC/Bc,SAAUA,EACVC,SAAUA,I,CAKhBhC,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,oBACEE,MAAO,CACL,sBAAuBN,KAAKsC,UAE9BC,QAASvC,KAAKsC,SACdE,MAAOxC,KAAKwC,MAAQxC,KAAKwC,MAAQxC,KAAK8B,MACtCW,YAActB,GAAMnB,KAAKyC,YAAYtB,K"}