@siemens/ix 1.5.0-beta.1 → 1.5.0-beta.2

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

@@ -0,0 +1,2 @@
+import{r as e,c as r,h as i,H as o,g as t}from"./p-8fcd6f85.js";import{c as s}from"./p-c0454c9a.js";const n=".sc-ix-group-h{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-direction:column;position:relative;max-width:19.75rem;border-color:var(--theme-group-item--border-color)}.sc-ix-group-h .group-header.sc-ix-group{height:4rem;min-height:4rem;max-height:4rem;border-radius:var(--theme-group--border-radius) var(--theme-group--border-radius) 0 0;display:flex;background-color:var(--theme-group-item--background);color:var(--theme-group-header--color);cursor:pointer}.sc-ix-group-h .group-header.sc-ix-group:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-group-h .group-header.sc-ix-group:not(.disabled):not(:disabled):hover{background-color:var(--theme-group-item--background--hover)}.sc-ix-group-h .group-header.sc-ix-group:not(.disabled):not(:disabled):hover.selected{background-color:var(--theme-group-item--background--selected)}.sc-ix-group-h .group-header.sc-ix-group:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-group-h .group-header.sc-ix-group:not(.disabled):not(:disabled):active{background-color:var(--theme-group-item--background--active)}.sc-ix-group-h .group-header.sc-ix-group:not(.disabled):not(:disabled):active.selected{background-color:var(--theme-group-item--background--selected)}.sc-ix-group-h .group-header.sc-ix-group:not(.disabled):not(:disabled):focus-visible{border:1px solid var(--theme-color-focus-bdr);border-radius:var(--theme-default-border-radius) var(--theme-default-border-radius) 0px 0px;outline:none}.sc-ix-group-h .group-header.selected.sc-ix-group{background-color:var(--theme-group-item--background--selected)}.sc-ix-group-h .group-header.selected.sc-ix-group .group-header-selection-indicator.sc-ix-group{background-color:var(--theme-group-item-indicator--background--selected)}.sc-ix-group-h .group-header.sc-ix-group .group-header-selection-indicator.sc-ix-group{background-color:var(--theme-color-input--focus)}.sc-ix-group-h .group-header.sc-ix-group .group-header-selection-indicator.group-header-selection-indicator-item-selected.sc-ix-group{background-color:var(--theme-group-item-indicator--background--selected)}.sc-ix-group-h .group-header-clickable.sc-ix-group{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;width:100%;min-width:0}.sc-ix-group-h .group-header-selection-indicator.sc-ix-group{width:0.25rem;border-top-left-radius:var(--theme-group--border-radius)}.sc-ix-group-h .group-header-content.sc-ix-group{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-direction:row;justify-content:space-between;min-width:0;flex-grow:1;padding:0.5rem;padding-left:0}.sc-ix-group-h .group-header-content.sc-ix-group .group-header-props-container.sc-ix-group{width:100%}.sc-ix-group-h .group-header-content.sc-ix-group .group-header-title.sc-ix-group{display:flex;align-items:center;font-size:1rem;font-weight:700;height:1.5rem}.sc-ix-group-h .group-header-content.sc-ix-group .group-header-title.sc-ix-group>*.sc-ix-group{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.sc-ix-group-h .group-header-content.sc-ix-group .group-subheader.sc-ix-group{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:1.25rem;font-size:0.875rem;color:var(--theme-group-subheader--color)}.sc-ix-group-h .expand-icon.sc-ix-group{padding:0.125rem 0.437rem;color:var(--theme-color-std-text)}.sc-ix-group-h .btn-expand-header.sc-ix-group{margin:0.5rem;-webkit-margin-end:0.25rem;margin-inline-end:0.25rem;min-width:1.5rem}.sc-ix-group-h .group-content.sc-ix-group{display:flex;flex-direction:column}.sc-ix-group-h .footer.sc-ix-group{height:auto;min-height:0}.sc-ix-group-h .hidden.sc-ix-group{display:none}";const d=class{get dropdownItems(){return Array.from(this.hostElement.querySelectorAll("ix-group-dropdown-item"))}get groupItems(){return Array.from(this.hostElement.querySelectorAll("ix-group-item:not(.footer)"))}get groupContent(){return this.hostElement.querySelector(".group-content")}get footer(){return this.hostElement.querySelector(".footer")}constructor(i){e(this,i);this.selectGroup=r(this,"selectGroup",7);this.selectItem=r(this,"selectItem",7);this.collapsedChanged=r(this,"collapsedChanged",7);this.suppressHeaderSelection=false;this.header=undefined;this.subHeader=undefined;this.collapsed=true;this.selected=undefined;this.index=undefined;this.expandOnHeaderClick=false;this.itemSelected=false;this.dropdownTriggerRef=undefined;this.slotSize=this.groupItems.length}async onKeyDown(e){const r=e.target;if(!this.hostElement.contains(r)){return}if(e.code==="Enter"||e.code==="NumpadEnter"){if(r.classList.contains("group-header")){if(this.suppressHeaderSelection){this.collapsed=!this.collapsed}else{this.selected=!this.selected}}else if(r.matches("ix-group-item")){const e=r;e.selected=!e.selected}}}onExpandClick(e){this.collapsed=!this.collapsed;this.collapsedChanged.emit(this.collapsed);e.stopPropagation()}onHeaderClick(e){this.setGroupSelection(!this.selected);if(this.suppressHeaderSelection){this.onExpandClick(e)}}onItemClick(e){if(e===this.index){this.index=undefined;this.selectItem.emit(undefined)}else{this.index=e;this.selectItem.emit(e)}if(this.index>=0){this.itemSelected=true}else this.itemSelected=false;this.setGroupSelection(false)}setGroupSelection(e){if(!this.suppressHeaderSelection){this.selected=e;this.selectGroup.emit(this.selected)}}componentWillRender(){var e;this.groupItems.forEach(((e,r)=>{var i;if(this.selected===true){e.selected=false;this.index=undefined;this.itemSelected=false;return}e.selected=r===this.index;e.index=r;e.classList.remove("last");if(!((i=this.footer)===null||i===void 0?void 0:i.children.length)&&r===this.slotSize-1){e.classList.add("last")}}));if(((e=this.footer)===null||e===void 0?void 0:e.childElementCount)>1){this.groupContent.appendChild(this.footer)}}componentDidLoad(){this.observer=s((()=>{this.slotSize=this.groupItems.length}));this.observer.observe(this.groupContent,{childList:true});this.groupContent.addEventListener("selectedChanged",(e=>{this.onItemClick(e.detail.index)}))}disconnectedCallback(){if(this.observer){this.observer.disconnect()}}render(){return i(o,null,i("div",{class:{"group-header":true,expand:!this.collapsed,selected:this.selected},tabindex:"0"},i("div",{class:"group-header-clickable",onClick:e=>this.onHeaderClick(e)},i("div",{class:{"group-header-selection-indicator":true,"group-header-selection-indicator-item-selected":this.itemSelected}}),i("div",{class:"btn-expand-header"},i("ix-icon",{class:{hidden:this.slotSize===0},name:`chevron-${this.collapsed?"right":"down"}-small`,onClick:e=>this.onExpandClick(e)})),i("div",{class:"group-header-content"},this.header?i("div",{class:"group-header-props-container"},i("div",{class:"group-header-title"},i("span",{title:this.header},this.header)),i("div",{class:"group-subheader",title:this.subHeader},this.subHeader)):null,i("slot",{name:"header"}))),i("ix-group-context-menu",null,i("slot",{name:"dropdown"}))),i("div",{class:{"group-content":true,"d-none":this.collapsed}},i("slot",null)),i("div",{class:"d-none"},i("ix-group-item",{class:"footer last",suppressSelection:true,focusable:false},i("slot",{name:"footer"}))))}get hostElement(){return t(this)}};d.style=n;const c=".sc-ix-group-dropdown-item-h{display:contents}";const a=class{constructor(r){e(this,r);this.label=undefined;this.icon=undefined}render(){return i(o,null,i("ix-dropdown-item",{label:this.label,icon:this.icon},i("slot",null)))}};a.style=c;const u=".sc-ix-group-item-h{display:flex;min-height:2.25rem;height:2.25rem;align-items:center;justify-content:space-between;padding:0.5rem 1.5rem 0.5rem 2.5rem;position:relative;margin-top:0.0625rem;outline:none;background-color:var(--theme-group-item--background)}.last.sc-ix-group-item-h{border-bottom-left-radius:0.25rem;border-bottom-right-radius:0.25rem}.sc-ix-group-item-h ix-icon.sc-ix-group-item{margin-right:0.25rem;margin-top:-0.125rem}.sc-ix-group-item-h .group-entry-selection-indicator.sc-ix-group-item{position:absolute;left:0;height:100%;width:0.25rem}.sc-ix-group-item-h .group-entry-text.sc-ix-group-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1}.sc-ix-group-item-h .group-entry-text-secondary.sc-ix-group-item{display:flex;justify-content:flex-end;flex-grow:1;white-space:nowrap;color:var(--theme-color-soft-text);font-size:0.875rem}.sc-ix-group-item-h .group-entry-text-secondary.sc-ix-group-item,.sc-ix-group-item-h .group-entry-text-secondary.sc-ix-group-item span.sc-ix-group-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-ix-group-item-h:not(.suppress-selection):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-group-item-h:not(.suppress-selection):not(.disabled):not(:disabled):hover{background-color:var(--theme-group-item--background--hover);border-color:var(--theme-group-item--border-color--hover)}.sc-ix-group-item-h:not(.suppress-selection):not(.disabled):not(:disabled):hover.selected{background-color:var(--theme-group-item--background--selected)}.sc-ix-group-item-h:not(.suppress-selection):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-group-item-h:not(.suppress-selection):not(.disabled):not(:disabled):active{background-color:var(--theme-group-item--background--active);border-color:var(--theme-group-item--border-color--active)}.sc-ix-group-item-h:not(.suppress-selection):not(.disabled):not(:disabled):active.selected{background-color:var(--theme-group-item--background--selected)}.selected.sc-ix-group-item-h{border-top-width:0.062rem !important;background-color:var(--theme-group-item--background--selected)}.selected.sc-ix-group-item-h .group-entry-selection-indicator.sc-ix-group-item{background-color:var(--theme-group-item-indicator--background--selected)}.sc-ix-group-item-h:not(.disabled):not(:disabled):focus-visible{border:1px solid var(--theme-color-focus-bdr) !important}";const h=class{constructor(i){e(this,i);this.selectedChanged=r(this,"selectedChanged",7);this.icon=undefined;this.text=undefined;this.secondaryText=undefined;this.suppressSelection=false;this.selected=undefined;this.focusable=true;this.index=undefined}clickListen(){if(this.suppressSelection){return}this.selectedChanged.emit(this.hostElement)}render(){return i(o,{class:{selected:this.selected&&!this.suppressSelection,"suppress-selection":this.suppressSelection},tabindex:this.focusable?0:-1},i("div",{class:"group-entry-selection-indicator"}),this.icon?i("ix-icon",{size:"16",name:this.icon}):null,this.text?i("span",{class:"group-entry-text"},i("span",{title:this.text},this.text)):null,this.secondaryText?i("span",{class:"group-entry-text-secondary"},i("span",{title:this.secondaryText},this.secondaryText)):null,i("slot",null))}get hostElement(){return t(this)}};h.style=u;export{d as ix_group,a as ix_group_dropdown_item,h as ix_group_item};
+//# sourceMappingURL=p-b998abe4.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["groupCss","Group","dropdownItems","Array","from","this","hostElement","querySelectorAll","groupItems","groupContent","querySelector","footer","constructor","hostRef","registerInstance","selectGroup","createEvent","selectItem","collapsedChanged","suppressHeaderSelection","header","undefined","subHeader","collapsed","selected","index","expandOnHeaderClick","itemSelected","dropdownTriggerRef","slotSize","length","async","event","targetElement","target","contains","code","classList","matches","groupItem","onExpandClick","emit","stopPropagation","onHeaderClick","setGroupSelection","onItemClick","selection","componentWillRender","forEach","item","remove","_a","children","add","childElementCount","appendChild","componentDidLoad","observer","createMutationObserver","observe","childList","addEventListener","evt","detail","disconnectedCallback","disconnect","render","h","Host","class","expand","tabindex","onClick","e","hidden","name","title","suppressSelection","focusable","groupDropdownItemCss","GroupDropdownItem","label","icon","groupItemCss","GroupItem","clickListen","selectedChanged","size","text","secondaryText"],"sources":["./src/components/group/group.scss?tag=ix-group&encapsulation=scoped","./src/components/group/group.tsx","./src/components/group-dropdown-item/group-dropdown-item.scss?tag=ix-group-dropdown-item&encapsulation=scoped","./src/components/group-dropdown-item/group-dropdown-item.tsx","./src/components/group-item/group-item.scss?tag=ix-group-item&encapsulation=scoped","./src/components/group-item/group-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/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  @include ellipsis;\n\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  max-width: 19.75rem;\n  border-color: var(--theme-group-item--border-color);\n\n  .group-header {\n    height: 4rem;\n    min-height: 4rem;\n    max-height: 4rem;\n    border-radius: var(--theme-group--border-radius)\n      var(--theme-group--border-radius) 0 0;\n    display: flex;\n    background-color: var(--theme-group-item--background);\n    color: var(--theme-group-header--color);\n\n    cursor: pointer;\n\n    @include hover {\n      background-color: var(--theme-group-item--background--hover);\n\n      &.selected {\n        background-color: var(--theme-group-item--background--selected);\n      }\n    }\n\n    @include active {\n      background-color: var(--theme-group-item--background--active);\n\n      &.selected {\n        background-color: var(--theme-group-item--background--selected);\n      }\n    }\n\n    @include focus-visible {\n      border: 1px solid var(--theme-color-focus-bdr);\n      border-radius: var(--theme-default-border-radius)\n        var(--theme-default-border-radius) 0px 0px;\n      outline: none;\n    }\n\n    &.selected {\n      background-color: var(--theme-group-item--background--selected);\n\n      .group-header-selection-indicator {\n        background-color: var(\n          --theme-group-item-indicator--background--selected\n        );\n      }\n    }\n\n    .group-header-selection-indicator {\n      background-color: var(--theme-color-input--focus);\n\n      &.group-header-selection-indicator-item-selected {\n        background-color: var(\n          --theme-group-item-indicator--background--selected\n        );\n      }\n    }\n  }\n\n  .group-header-clickable {\n    @include ellipsis;\n\n    display: flex;\n    width: 100%;\n    min-width: 0;\n  }\n\n  .group-header-selection-indicator {\n    width: $tiny-space;\n    border-top-left-radius: var(--theme-group--border-radius);\n  }\n\n  .group-header-content {\n    @include ellipsis;\n\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    min-width: 0;\n    flex-grow: 1;\n    padding: 0.5rem;\n    padding-left: 0;\n\n    .group-header-props-container {\n      width: 100%;\n    }\n\n    .group-header-title {\n      display: flex;\n      align-items: center;\n      font-size: 1rem;\n      font-weight: $font-weight-bold;\n      height: 1.5rem;\n\n      & > * {\n        @include ellipsis;\n\n        min-width: 0;\n      }\n    }\n\n    .group-subheader {\n      @include ellipsis();\n\n      height: 1.25rem;\n      font-size: 0.875rem;\n      color: var(--theme-group-subheader--color);\n    }\n  }\n\n  .expand-icon {\n    padding: 0.125rem 0.437rem;\n    color: var(--theme-color-std-text);\n  }\n\n  .btn-expand-header {\n    margin: $small-space;\n    margin-inline-end: $tiny-space;\n    min-width: 1.5rem;\n  }\n\n  .group-content {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .footer {\n    height: auto;\n    min-height: 0;\n  }\n\n  .hidden {\n    display: none;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\n@Component({\n  tag: 'ix-group',\n  styleUrl: 'group.scss',\n  scoped: true,\n})\nexport class Group {\n  /**\n   * Prevent header from being selectable\n   */\n  @Prop() suppressHeaderSelection = false;\n\n  /**\n   * Group header\n   */\n  @Prop() header: string;\n\n  /**\n   * Group header subtitle\n   */\n  @Prop() subHeader: string;\n\n  /**\n   * Whether the group is collapsed or expanded. Defaults to true.\n   */\n  @Prop({ mutable: true, reflect: true }) collapsed = true;\n\n  /**\n   * Whether the group is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) selected: boolean;\n\n  /**\n   * The index of the selected group entry.\n   * If undefined no group item is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) index: number;\n\n  /**\n   * Expand the group if the header is clicked\n   */\n  @Prop() expandOnHeaderClick = false;\n\n  /**\n   * Emits when whole group gets selected.\n   */\n  @Event() selectGroup: EventEmitter<boolean>;\n\n  /**\n   * Emits when group item gets selected.\n   */\n  @Event() selectItem: EventEmitter<number>;\n\n  /**\n   * Group collapsed\n   */\n  @Event() collapsedChanged: EventEmitter<boolean>;\n\n  @Element() hostElement!: HTMLIxGroupElement;\n\n  @State() itemSelected = false;\n\n  get dropdownItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-group-dropdown-item')\n    );\n  }\n\n  get groupItems(): Array<HTMLIxGroupItemElement> {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-group-item:not(.footer)')\n    );\n  }\n\n  get groupContent() {\n    return this.hostElement.querySelector('.group-content');\n  }\n\n  get footer() {\n    return this.hostElement.querySelector('.footer');\n  }\n\n  @State() dropdownTriggerRef: HTMLElement;\n\n  @State() slotSize = this.groupItems.length;\n\n  constructor() {}\n\n  @Listen('keydown', {\n    target: 'window',\n  })\n  async onKeyDown(event: KeyboardEvent) {\n    const targetElement = event.target as HTMLElement;\n\n    if (!this.hostElement.contains(targetElement)) {\n      return;\n    }\n\n    if (event.code === 'Enter' || event.code === 'NumpadEnter') {\n      if (targetElement.classList.contains('group-header')) {\n        if (this.suppressHeaderSelection) {\n          this.collapsed = !this.collapsed;\n        } else {\n          this.selected = !this.selected;\n        }\n      } else if (targetElement.matches('ix-group-item')) {\n        const groupItem = targetElement as HTMLIxGroupItemElement;\n        groupItem.selected = !groupItem.selected;\n      }\n    }\n  }\n\n  private onExpandClick(event: Event) {\n    this.collapsed = !this.collapsed;\n\n    this.collapsedChanged.emit(this.collapsed);\n    event.stopPropagation();\n  }\n\n  private onHeaderClick(event: Event) {\n    this.setGroupSelection(!this.selected);\n\n    if (this.suppressHeaderSelection) {\n      this.onExpandClick(event);\n    }\n  }\n\n  private onItemClick(index: number) {\n    if (index === this.index) {\n      this.index = undefined;\n      this.selectItem.emit(undefined);\n    } else {\n      this.index = index;\n      this.selectItem.emit(index);\n    }\n\n    if (this.index >= 0) {\n      this.itemSelected = true;\n    } else this.itemSelected = false;\n\n    this.setGroupSelection(false);\n  }\n\n  private setGroupSelection(selection: boolean) {\n    if (!this.suppressHeaderSelection) {\n      this.selected = selection;\n      this.selectGroup.emit(this.selected);\n    }\n  }\n\n  componentWillRender() {\n    this.groupItems.forEach((item, index) => {\n      if (this.selected === true) {\n        item.selected = false;\n        this.index = undefined;\n        this.itemSelected = false;\n        return;\n      }\n      item.selected = index === this.index;\n      item.index = index;\n      item.classList.remove('last');\n      if (!this.footer?.children.length && index === this.slotSize - 1) {\n        item.classList.add('last');\n      }\n    });\n\n    if (this.footer?.childElementCount > 1) {\n      this.groupContent.appendChild(this.footer);\n    }\n  }\n\n  private observer: MutationObserver;\n\n  componentDidLoad() {\n    this.observer = createMutationObserver(() => {\n      this.slotSize = this.groupItems.length;\n    });\n\n    this.observer.observe(this.groupContent, {\n      childList: true,\n    });\n\n    this.groupContent.addEventListener(\n      'selectedChanged',\n      (evt: CustomEvent<HTMLIxGroupItemElement>) => {\n        this.onItemClick(evt.detail.index);\n      }\n    );\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'group-header': true,\n            expand: !this.collapsed,\n            selected: this.selected,\n          }}\n          tabindex=\"0\"\n        >\n          <div\n            class=\"group-header-clickable\"\n            onClick={(e) => this.onHeaderClick(e)}\n          >\n            <div\n              class={{\n                'group-header-selection-indicator': true,\n                'group-header-selection-indicator-item-selected':\n                  this.itemSelected,\n              }}\n            ></div>\n            <div class=\"btn-expand-header\">\n              <ix-icon\n                class={{\n                  hidden: this.slotSize === 0,\n                }}\n                name={`chevron-${this.collapsed ? 'right' : 'down'}-small`}\n                onClick={(e) => this.onExpandClick(e)}\n              ></ix-icon>\n            </div>\n\n            <div class=\"group-header-content\">\n              {this.header ? (\n                <div class=\"group-header-props-container\">\n                  <div class=\"group-header-title\">\n                    <span title={this.header}>{this.header}</span>\n                  </div>\n                  <div class=\"group-subheader\" title={this.subHeader}>\n                    {this.subHeader}\n                  </div>\n                </div>\n              ) : null}\n              <slot name=\"header\"></slot>\n            </div>\n          </div>\n          <ix-group-context-menu>\n            <slot name=\"dropdown\"></slot>\n          </ix-group-context-menu>\n        </div>\n        <div\n          class={{\n            'group-content': true,\n            'd-none': this.collapsed,\n          }}\n        >\n          <slot></slot>\n        </div>\n        <div class=\"d-none\">\n          <ix-group-item\n            class=\"footer last\"\n            suppressSelection={true}\n            focusable={false}\n          >\n            <slot name=\"footer\"></slot>\n          </ix-group-item>\n        </div>\n      </Host>\n    );\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n  display: contents;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-group-dropdown-item',\n  styleUrl: 'group-dropdown-item.scss',\n  scoped: true,\n})\nexport class GroupDropdownItem {\n  /**\n   * Group dropdown label\n   */\n  @Prop() label: string;\n\n  /**\n   * Group dropdown icon\n   */\n  @Prop() icon: string;\n\n  render() {\n    return (\n      <Host>\n        <ix-dropdown-item label={this.label} icon={this.icon}>\n          <slot></slot>\n        </ix-dropdown-item>\n      </Host>\n    );\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  display: flex;\n  min-height: 2.25rem;\n  height: 2.25rem;\n  align-items: center;\n  justify-content: space-between;\n  padding: $small-space $large-space $small-space 2.5rem;\n  position: relative;\n  margin-top: 0.0625rem;\n  outline: none;\n  background-color: var(--theme-group-item--background);\n\n  &.last {\n    border-bottom-left-radius: 0.25rem;\n    border-bottom-right-radius: 0.25rem;\n  }\n\n  ix-icon {\n    margin-right: $tiny-space;\n    margin-top: -0.125rem;\n  }\n\n  .group-entry-selection-indicator {\n    position: absolute;\n    left: 0;\n    height: 100%;\n    width: $tiny-space;\n  }\n\n  .group-entry-text {\n    @include ellipsis();\n    flex-grow: 1;\n  }\n\n  .group-entry-text-secondary {\n    &,\n    span {\n      @include ellipsis;\n    }\n\n    display: flex;\n    justify-content: flex-end;\n    flex-grow: 1;\n    white-space: nowrap;\n    color: var(--theme-color-soft-text);\n    font-size: 0.875rem;\n  }\n\n  &:not(.suppress-selection) {\n    @include hover {\n      background-color: var(--theme-group-item--background--hover);\n      border-color: var(--theme-group-item--border-color--hover);\n\n      &.selected {\n        background-color: var(--theme-group-item--background--selected);\n      }\n    }\n\n    @include active {\n      background-color: var(--theme-group-item--background--active);\n      border-color: var(--theme-group-item--border-color--active);\n\n      &.selected {\n        background-color: var(--theme-group-item--background--selected);\n      }\n    }\n  }\n\n  &.selected {\n    border-top-width: 0.062rem !important;\n    background-color: var(--theme-group-item--background--selected);\n\n    .group-entry-selection-indicator {\n      background-color: var(--theme-group-item-indicator--background--selected);\n    }\n  }\n\n  @include focus-visible {\n    border: 1px solid var(--theme-color-focus-bdr) !important;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-group-item',\n  styleUrl: 'group-item.scss',\n  scoped: true,\n})\nexport class GroupItem {\n  @Element() hostElement!: HTMLIxGroupItemElement;\n\n  /**\n   * Group item icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Group item text\n   */\n  @Prop() text: string;\n\n  /**\n   * Group item secondary text\n   */\n  @Prop() secondaryText: string;\n\n  /**\n   * Supress the selection of the group\n   */\n  @Prop() suppressSelection = false;\n\n  /**\n   * Show selected state\n   */\n  @Prop() selected: boolean;\n\n  /**\n   * The elements tabindex attribute will get set accordingly.\n   * If true tabindex will be 0, -1 otherwise.\n   */\n  @Prop() focusable = true;\n\n  /**\n   * Selection changed\n   */\n  @Event() selectedChanged: EventEmitter<HTMLIxGroupItemElement>;\n\n  /**\n   * Index\n   */\n  @Prop() index: number;\n\n  @Listen('click', { passive: true })\n  clickListen() {\n    if (this.suppressSelection) {\n      return;\n    }\n    this.selectedChanged.emit(this.hostElement);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          selected: this.selected && !this.suppressSelection,\n          'suppress-selection': this.suppressSelection,\n        }}\n        tabindex={this.focusable ? 0 : -1}\n      >\n        <div class=\"group-entry-selection-indicator\"></div>\n        {this.icon ? <ix-icon size=\"16\" name={this.icon}></ix-icon> : null}\n        {this.text ? (\n          <span class=\"group-entry-text\">\n            <span title={this.text}>{this.text}</span>\n          </span>\n        ) : null}\n        {this.secondaryText ? (\n          <span class=\"group-entry-text-secondary\">\n            <span title={this.secondaryText}>{this.secondaryText}</span>\n          </span>\n        ) : null}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/siemens-ix/{p-24d2d95e.entry.js → p-c9c9f2b5.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as e,h as i,H as r,g as s}from"./p-8fcd6f85.js";import{L as o,I as n}from"./p-6f819085.js";const a=".sc-ix-category-filter-h{display:block;position:relative}.sc-ix-category-filter-h .focus.sc-ix-category-filter{border-color:var(--theme-color-primary);box-shadow:0 0 0.25rem 0 var(--theme-color-primary) !important}.sc-ix-category-filter-h .reset-button.sc-ix-category-filter{position:absolute;top:0.25rem;right:0.25rem}.sc-ix-category-filter-h .reset-button.hide-reset-button.sc-ix-category-filter{display:none}.sc-ix-category-filter-h .input-container.sc-ix-category-filter{display:flex;height:100%;max-height:3.75rem;padding:1px 1.5rem 1px 2rem}.sc-ix-category-filter-h .input-container.no-icon.sc-ix-category-filter{padding-left:0.25rem}.sc-ix-category-filter-h .token-container.sc-ix-category-filter{flex-grow:1;overflow:hidden}.sc-ix-category-filter-h .text-input.sc-ix-category-filter{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);background:transparent;flex-grow:1;height:1.75rem}.sc-ix-category-filter-h .text-input.sc-ix-category-filter,.sc-ix-category-filter-h .text-input.sc-ix-category-filter:hover,.sc-ix-category-filter-h .text-input.sc-ix-category-filter:focus-visible{border:none;outline:none}.sc-ix-category-filter-h .text-input.hide-placeholder.sc-ix-category-filter::-moz-placeholder{opacity:0}.sc-ix-category-filter-h .text-input.hide-placeholder.sc-ix-category-filter::placeholder{opacity:0}.sc-ix-category-filter-h .list-unstyled.sc-ix-category-filter{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0;overflow-y:auto}.sc-ix-category-filter-h ix-icon.sc-ix-category-filter{position:absolute;top:0.5rem;left:0.5rem}.sc-ix-category-filter-h ix-filter-chip.sc-ix-category-filter{margin-right:0.5rem}.sc-ix-category-filter-h .category-preview.sc-ix-category-filter{display:flex;align-items:center;height:1.5rem;background-color:var(--theme-bg-3);border-top-left-radius:1rem;border-bottom-left-radius:1rem;padding:0.5rem;margin:2px 0}.sc-ix-category-filter-h ul.sc-ix-category-filter{height:100%}.sc-ix-category-filter-h ul.sc-ix-category-filter>li.sc-ix-category-filter,.sc-ix-category-filter-h input.sc-ix-category-filter{padding-top:2px;padding-bottom:2px}.sc-ix-category-filter-h ix-dropdown.sc-ix-category-filter{min-width:10rem !important}.sc-ix-category-filter-h ix-dropdown.sc-ix-category-filter .dropdown-item-container.sc-ix-category-filter{display:flex;flex-direction:column}.sc-ix-category-filter-h ix-dropdown.sc-ix-category-filter .dropdown-item-container.sc-ix-category-filter .dropdown-item.sc-ix-category-filter{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:2.5rem;margin:0.25rem 0.5rem;padding-inline:0.5rem;border-radius:100rem;width:auto}.sc-ix-category-filter-h ix-dropdown.sc-ix-category-filter .dropdown-item-container.sc-ix-category-filter .category-item.sc-ix-category-filter{border-end-end-radius:0;border-start-end-radius:0}.sc-ix-category-filter-h ix-dropdown.sc-ix-category-filter .dropdown-item-container.sc-ix-category-filter .category-item-value.sc-ix-category-filter{border-start-start-radius:0;border-end-start-radius:0}.sc-ix-category-filter-h ix-dropdown.sc-ix-category-filter .btn-toggle-operator.sc-ix-category-filter{margin-inline:0.5rem}";const c=class{constructor(i){t(this,i);this.inputChanged=e(this,"inputChanged",7);this.filterChanged=e(this,"filterChanged",7);this.ID_CUSTOM_FILTER_VALUE="CW_CUSTOM_FILTER_VALUE";this.textInput=undefined;this.hasFocus=undefined;this.categoryLogicalOperator=o.EQUAL;this.inputValue=undefined;this.category=undefined;this.filterTokens=[];this.initialState=undefined;this.filterState=undefined;this.placeholder=undefined;this.categories=undefined;this.nonSelectableCategories={};this.suggestions=undefined;this.icon="search";this.hideIcon=undefined;this.repeatCategories=true;this.tmpDisableScrollIntoView=true;this.labelCategories="Categories";this.i18nPlainText="Filter by text"}watchFilterState(t){this.setFilterState(t)}componentDidLoad(){var t,e;if(this.initialState!==undefined){this.setFilterState(this.initialState)}else if(this.filterState!==undefined){setTimeout((()=>this.setFilterState(this.filterState)))}(t=this.hostElement)===null||t===void 0?void 0:t.addEventListener("keydown",this.handleFormElementKeyDown.bind(this));(e=this.formElement)===null||e===void 0?void 0:e.addEventListener("submit",(t=>t.preventDefault()));if(this.textInput==null){console.warn("ix-category-filter - unable to add event listeners to native input element");return}this.textInput.addEventListener("focusin",(()=>{this.hasFocus=true}));this.textInput.addEventListener("focusout",(()=>this.hasFocus=false));this.textInput.addEventListener("input",(()=>{this.inputValue=this.textInput.value;const t=new n(this.inputValue,this.category);this.inputChanged.emit(t)}));this.textInput.addEventListener("keydown",this.handleInputElementKeyDown.bind(this))}setFilterState(t){this.filterTokens=[];for(const e of t.tokens){this.addToken(e,this.ID_CUSTOM_FILTER_VALUE,this.categoryLogicalOperator,false)}for(const e of t.categories){this.addToken(e.value,e.id,e.operator,false)}this.emitFilterEvent()}closeDropdown(){this.hostElement.querySelector("ix-dropdown").show=false}handleFormElementKeyDown(t){switch(t.code){case"Enter":case"NumpadEnter":if(!document.activeElement.classList.contains("dropdown-item")){return}const e=document.activeElement.getAttribute("data-id");if(this.hasCategorySelection()){if(this.category){this.addToken(e,this.category)}else if(document.activeElement.classList.contains("category-item-id")){this.selectCategory(e)}}else{this.addToken(e)}t.preventDefault();break;case"ArrowUp":this.focusPreviousItem();t.preventDefault();break;case"ArrowDown":this.focusNextItem();t.preventDefault();break;case"Escape":this.closeDropdown();break}}focusPreviousItem(){const t=document.activeElement.previousSibling;if(t instanceof HTMLElement){t.focus()}}focusNextItem(){const t=document.activeElement.nextSibling;if(t instanceof HTMLElement){t.focus()}}handleInputElementKeyDown(t){var e;switch(t.code){case"ArrowDown":const i=`.category-item-${this.category?"value":"id"}`;let r=this.hostElement.querySelector(i);if(r instanceof HTMLElement){r.focus();t.stopPropagation()}else if((e=this.suggestions)===null||e===void 0?void 0:e.length){r=this.hostElement.querySelector(".category-item");if(r instanceof HTMLElement){r.focus();t.stopPropagation()}}break;case"Backspace":if(this.textInput.value!==""){return}if(this.category){this.category=undefined;return}const s=this.filterTokens.length;if(s>0){this.removeToken(s-1)}break;case"Enter":case"NumpadEnter":this.addToken(this.inputValue,this.category);t.preventDefault();break}}emitFilterEvent(){const t=this.filterTokens.filter((t=>t.id===this.ID_CUSTOM_FILTER_VALUE)).map((t=>t.value));const e=this.filterTokens.filter((t=>t.id!==this.ID_CUSTOM_FILTER_VALUE));const i={tokens:t,categories:e};this.filterChanged.emit(i)}addToken(t,e=this.ID_CUSTOM_FILTER_VALUE,i=this.categoryLogicalOperator,r=true){if(t===undefined||t===null){return}const s=t.trim();if(s===""){return}if(this.filterTokens.find((t=>(t===null||t===void 0?void 0:t.value)===s))){return}const n={id:e,value:s,operator:i};this.filterTokens=[...this.filterTokens,n];this.textInput.value="";this.inputValue="";this.categoryLogicalOperator=o.EQUAL;if(this.category){this.category=undefined}this.isScrollStateDirty=true;this.textInput.focus();if(r){this.emitFilterEvent()}this.closeDropdown()}removeToken(t){this.filterTokens=this.filterTokens.filter(((e,i)=>i!==t));this.emitFilterEvent()}getCategoryIds(){const t=[];for(const e in this.categories){if(Object.prototype.hasOwnProperty.call(this.categories,e)){t.push(e)}}return t}selectCategory(t){this.category=t;this.textInput.value="";this.inputValue="";this.textInput.focus()}resetFilter(){this.closeDropdown();this.filterTokens=[];this.emitFilterEvent()}filterMultiples(t){if(this.repeatCategories){return true}const e=this.filterTokens.find((e=>e.id===t));return!e}filterDuplicateTokens(t){const e=this.filterTokens.some((e=>e.value===t));return!e}filterByInput(t){if(this.inputValue===undefined||this.inputValue===""){return true}return t.toLowerCase().indexOf(this.inputValue.toLowerCase())!==-1}toggleCategoryOperator(){switch(this.categoryLogicalOperator){case o.EQUAL:this.categoryLogicalOperator=o.NOT_EQUAL;break;case o.NOT_EQUAL:this.categoryLogicalOperator=o.EQUAL;break}}getFilterChipLabel(t){var e,i,r;if(t.id===this.ID_CUSTOM_FILTER_VALUE){return t.value}const s=t.operator===o.EQUAL?"=":"!=";const n=(r=(i=(e=this.categories[t.id])===null||e===void 0?void 0:e.label)!==null&&i!==void 0?i:this.nonSelectableCategories[t.id])!==null&&r!==void 0?r:t.id;return`${n} ${s} ${t.value}`}getFilteredSuggestions(){var t,e;if(!((t=this.suggestions)===null||t===void 0?void 0:t.length)){return[]}return(e=this.suggestions)===null||e===void 0?void 0:e.filter((t=>this.filterByInput(t))).filter((t=>this.filterDuplicateTokens(t)))}hasCategorySelection(){return this.categories!==undefined}displayDropdown(){if(this.hasCategorySelection()){return true}if(this.suggestions!==undefined){return this.getFilteredSuggestions().length>0}return false}renderPlainSuggestions(){return i("div",{class:"dropdown-item-container"},this.getFilteredSuggestions().map((t=>i("button",{class:"dropdown-item","data-id":t,onClick:()=>this.addToken(t),key:t,title:t},t))))}renderCategoryValues(){var t,e;return i("div",{class:"dropdown-item-container"},i("button",{class:"btn btn-invisible-secondary btn-icon btn-toggle-operator",onClick:()=>this.toggleCategoryOperator(),tabindex:"-1"},this.categoryLogicalOperator===o.NOT_EQUAL?"=":"!="),i("div",{class:"dropdown-header"},(t=this.categories[this.category])===null||t===void 0?void 0:t.label),(e=this.categories[this.category])===null||e===void 0?void 0:e.options.filter((t=>this.filterByInput(t))).filter((t=>this.filterDuplicateTokens(t))).map((t=>i("button",{class:"dropdown-item category-item-value","data-id":t,title:t,key:t,onClick:()=>this.addToken(t,this.category)},`${this.categoryLogicalOperator===o.EQUAL?"=":"!="} ${t}`))))}renderDropdownContent(){if(this.hasCategorySelection()){if(this.category){return this.renderCategoryValues()}else{return this.renderCategorySelection()}}else return this.renderPlainSuggestions()}renderCategorySelection(){var t;return i("div",{class:"dropdown-item-container"},(t=this.getCategoryIds())===null||t===void 0?void 0:t.filter((t=>this.filterByInput(this.categories[t].label))).filter((t=>this.filterMultiples(t))).map((t=>{var e;return i("button",{class:"dropdown-item category-item category-item-id","data-id":t,title:this.categories[t].label,key:t,onClick:()=>this.selectCategory(t),tabindex:"0"},(e=this.categories[t])===null||e===void 0?void 0:e.label)})))}getDropdownHeader(){if(this.categories){if(this.category){return null}else{return this.labelCategories}}return this.i18nPlainText}componentDidRender(){if(this.isScrollStateDirty){if(!this.tmpDisableScrollIntoView){this.textInput.scrollIntoView()}this.isScrollStateDirty=false}}getResetButton(){return i("ix-icon-button",{onClick:()=>this.resetFilter(),class:{"reset-button":true,"hide-reset-button":!this.filterTokens.length&&!this.category},variant:"Primary",ghost:true,oval:true,icon:"clear",size:"16",tabindex:"1"})}render(){var t;return i(r,null,i("form",{ref:t=>this.formElement=t},i("div",{class:{"form-control":true,"input-container":true,focus:this.hasFocus,"no-icon":this.hideIcon}},i("ix-icon",{class:{"d-none":this.hideIcon},name:this.icon,size:"16"}),i("div",{class:"token-container"},i("ul",{class:"list-unstyled"},this.filterTokens.map(((t,e)=>i("li",{key:t.toString(),class:{animate__animated:true,animate__fadein:true}},i("ix-filter-chip",{onCloseClick:()=>this.removeToken(e)},this.getFilterChipLabel(t))))),this.categories===undefined?"":i("li",{class:{"category-preview":true,"d-none":!this.category}},(t=this.categories[this.category])===null||t===void 0?void 0:t.label),i("input",{class:{"text-input":true,"hide-placeholder":this.category!==undefined},ref:t=>this.textInput=t,type:"text",placeholder:this.placeholder}))),this.getResetButton())),i("ix-dropdown",{closeBehavior:"outside",trigger:this.textInput,triggerEvent:["click","focus"],header:this.getDropdownHeader(),class:{"d-none":!this.displayDropdown()}},this.renderDropdownContent()))}get hostElement(){return s(this)}static get watchers(){return{filterState:["watchFilterState"]}}};c.style=a;export{c as ix_category_filter};
-//# sourceMappingURL=p-24d2d95e.entry.js.map
+import{r as t,c as e,h as i,H as r,g as s}from"./p-8fcd6f85.js";import{L as o,I as n}from"./p-6f819085.js";const a=".sc-ix-category-filter-h{display:block;position:relative}.sc-ix-category-filter-h .focus.sc-ix-category-filter{border-color:var(--theme-color-primary);box-shadow:0 0 0.25rem 0 var(--theme-color-primary) !important}.sc-ix-category-filter-h .reset-button.sc-ix-category-filter{position:absolute;top:0.25rem;right:0.25rem}.sc-ix-category-filter-h .reset-button.hide-reset-button.sc-ix-category-filter{display:none}.sc-ix-category-filter-h .input-container.sc-ix-category-filter{display:flex;height:100%;max-height:3.75rem;padding:1px 1.5rem 1px 2rem}.sc-ix-category-filter-h .input-container.no-icon.sc-ix-category-filter{padding-left:0.25rem}.sc-ix-category-filter-h .token-container.sc-ix-category-filter{flex-grow:1;overflow:hidden}.sc-ix-category-filter-h .text-input.sc-ix-category-filter{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);background:transparent;flex-grow:1;height:1.75rem}.sc-ix-category-filter-h .text-input.sc-ix-category-filter,.sc-ix-category-filter-h .text-input.sc-ix-category-filter:hover,.sc-ix-category-filter-h .text-input.sc-ix-category-filter:focus-visible{border:none;outline:none}.sc-ix-category-filter-h .text-input.hide-placeholder.sc-ix-category-filter::-moz-placeholder{opacity:0}.sc-ix-category-filter-h .text-input.hide-placeholder.sc-ix-category-filter::placeholder{opacity:0}.sc-ix-category-filter-h .list-unstyled.sc-ix-category-filter{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0;overflow-y:auto}.sc-ix-category-filter-h ix-icon.sc-ix-category-filter{position:absolute;top:0.5rem;left:0.5rem}.sc-ix-category-filter-h ix-filter-chip.sc-ix-category-filter{margin-right:0.5rem}.sc-ix-category-filter-h .category-preview.sc-ix-category-filter{display:flex;align-items:center;height:1.5rem;background-color:var(--theme-bg-3);border-top-left-radius:1rem;border-bottom-left-radius:1rem;padding:0.5rem;margin:2px 0}.sc-ix-category-filter-h ul.sc-ix-category-filter{height:100%}.sc-ix-category-filter-h ul.sc-ix-category-filter>li.sc-ix-category-filter,.sc-ix-category-filter-h input.sc-ix-category-filter{padding-top:2px;padding-bottom:2px}.sc-ix-category-filter-h ix-dropdown.sc-ix-category-filter{min-width:10rem !important}.sc-ix-category-filter-h ix-dropdown.sc-ix-category-filter .dropdown-item-container.sc-ix-category-filter{display:flex;flex-direction:column}.sc-ix-category-filter-h ix-dropdown.sc-ix-category-filter .dropdown-item-container.sc-ix-category-filter .dropdown-item.sc-ix-category-filter{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.143em;color:var(--theme-color-std-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:2.5rem;margin:0.25rem 0.5rem;padding-inline:0.5rem;border-radius:100rem;width:auto}.sc-ix-category-filter-h ix-dropdown.sc-ix-category-filter .dropdown-item-container.sc-ix-category-filter .category-item.sc-ix-category-filter{border-end-end-radius:0;border-start-end-radius:0}.sc-ix-category-filter-h ix-dropdown.sc-ix-category-filter .dropdown-item-container.sc-ix-category-filter .category-item-value.sc-ix-category-filter{border-start-start-radius:0;border-end-start-radius:0}.sc-ix-category-filter-h ix-dropdown.sc-ix-category-filter .btn-toggle-operator.sc-ix-category-filter{margin-inline:0.5rem}";const c=class{constructor(i){t(this,i);this.inputChanged=e(this,"inputChanged",7);this.filterChanged=e(this,"filterChanged",7);this.ID_CUSTOM_FILTER_VALUE="CW_CUSTOM_FILTER_VALUE";this.textInput=undefined;this.hasFocus=undefined;this.categoryLogicalOperator=o.EQUAL;this.inputValue=undefined;this.category=undefined;this.filterTokens=[];this.initialState=undefined;this.filterState=undefined;this.placeholder=undefined;this.categories=undefined;this.nonSelectableCategories={};this.suggestions=undefined;this.icon="search";this.hideIcon=undefined;this.repeatCategories=true;this.tmpDisableScrollIntoView=true;this.labelCategories="Categories";this.i18nPlainText="Filter by text"}watchFilterState(t){this.setFilterState(t)}componentDidLoad(){var t,e;if(this.initialState!==undefined){this.setFilterState(this.initialState)}else if(this.filterState!==undefined){setTimeout((()=>this.setFilterState(this.filterState)))}(t=this.hostElement)===null||t===void 0?void 0:t.addEventListener("keydown",this.handleFormElementKeyDown.bind(this));(e=this.formElement)===null||e===void 0?void 0:e.addEventListener("submit",(t=>t.preventDefault()));if(this.textInput==null){console.warn("ix-category-filter - unable to add event listeners to native input element");return}this.textInput.addEventListener("focusin",(()=>{this.hasFocus=true}));this.textInput.addEventListener("focusout",(()=>this.hasFocus=false));this.textInput.addEventListener("input",(()=>{this.inputValue=this.textInput.value;const t=new n(this.inputValue,this.category);this.inputChanged.emit(t)}));this.textInput.addEventListener("keydown",this.handleInputElementKeyDown.bind(this))}setFilterState(t){this.filterTokens=[];for(const e of t.tokens){this.addToken(e,this.ID_CUSTOM_FILTER_VALUE,this.categoryLogicalOperator,false)}for(const e of t.categories){this.addToken(e.value,e.id,e.operator,false)}this.emitFilterEvent()}closeDropdown(){this.hostElement.querySelector("ix-dropdown").show=false}handleFormElementKeyDown(t){switch(t.code){case"Enter":case"NumpadEnter":if(!document.activeElement.classList.contains("dropdown-item")){return}const e=document.activeElement.getAttribute("data-id");if(this.hasCategorySelection()){if(this.category){this.addToken(e,this.category)}else if(document.activeElement.classList.contains("category-item-id")){this.selectCategory(e)}}else{this.addToken(e)}t.preventDefault();break;case"ArrowUp":this.focusPreviousItem();t.preventDefault();break;case"ArrowDown":this.focusNextItem();t.preventDefault();break;case"Escape":this.closeDropdown();break}}focusPreviousItem(){const t=document.activeElement.previousSibling;if(t instanceof HTMLElement){t.focus()}}focusNextItem(){const t=document.activeElement.nextSibling;if(t instanceof HTMLElement){t.focus()}}handleInputElementKeyDown(t){var e;switch(t.code){case"ArrowDown":const i=`.category-item-${this.category?"value":"id"}`;let r=this.hostElement.querySelector(i);if(r instanceof HTMLElement){r.focus();t.stopPropagation()}else if((e=this.suggestions)===null||e===void 0?void 0:e.length){r=this.hostElement.querySelector(".category-item");if(r instanceof HTMLElement){r.focus();t.stopPropagation()}}break;case"Backspace":if(this.textInput.value!==""){return}if(this.category){this.category=undefined;return}const s=this.filterTokens.length;if(s>0){this.removeToken(s-1)}break;case"Enter":case"NumpadEnter":this.addToken(this.inputValue,this.category);t.preventDefault();break}}emitFilterEvent(){const t=this.filterTokens.filter((t=>t.id===this.ID_CUSTOM_FILTER_VALUE)).map((t=>t.value));const e=this.filterTokens.filter((t=>t.id!==this.ID_CUSTOM_FILTER_VALUE));const i={tokens:t,categories:e};this.filterChanged.emit(i)}addToken(t,e=this.ID_CUSTOM_FILTER_VALUE,i=this.categoryLogicalOperator,r=true){if(t===undefined||t===null){return}const s=t.trim();if(s===""){return}if(this.hasToken(s)){return}const n={id:e,value:s,operator:i};this.filterTokens=[...this.filterTokens,n];this.textInput.value="";this.inputValue="";this.categoryLogicalOperator=o.EQUAL;if(this.category){this.category=undefined}this.isScrollStateDirty=true;this.textInput.focus();if(r){this.emitFilterEvent()}this.closeDropdown()}removeToken(t){this.filterTokens=this.filterTokens.filter(((e,i)=>i!==t));this.emitFilterEvent()}getCategoryIds(){const t=[];for(const e in this.categories){if(Object.prototype.hasOwnProperty.call(this.categories,e)){t.push(e)}}return t}selectCategory(t){this.category=t;this.textInput.value="";this.inputValue="";this.textInput.focus()}resetFilter(){this.closeDropdown();this.filterTokens=[];this.emitFilterEvent()}filterMultiples(t){if(this.repeatCategories){return true}const e=this.filterTokens.find((e=>e.id===t));return!e}hasToken(t){return this.filterTokens.some((e=>{const i=e.value===t;if(!i){return false}if(this.category){return this.category===e.id}if(e.id){return e.id===this.ID_CUSTOM_FILTER_VALUE}return i}))}filterDuplicateTokens(t){return!this.hasToken(t)}filterByInput(t){if(this.inputValue===undefined||this.inputValue===""){return true}return t.toLowerCase().indexOf(this.inputValue.toLowerCase())!==-1}toggleCategoryOperator(){switch(this.categoryLogicalOperator){case o.EQUAL:this.categoryLogicalOperator=o.NOT_EQUAL;break;case o.NOT_EQUAL:this.categoryLogicalOperator=o.EQUAL;break}}getFilterChipLabel(t){var e,i,r;if(t.id===this.ID_CUSTOM_FILTER_VALUE){return t.value}const s=t.operator===o.EQUAL?"=":"!=";const n=(r=(i=(e=this.categories[t.id])===null||e===void 0?void 0:e.label)!==null&&i!==void 0?i:this.nonSelectableCategories[t.id])!==null&&r!==void 0?r:t.id;return`${n} ${s} ${t.value}`}getFilteredSuggestions(){var t,e;if(!((t=this.suggestions)===null||t===void 0?void 0:t.length)){return[]}return(e=this.suggestions)===null||e===void 0?void 0:e.filter((t=>this.filterByInput(t))).filter((t=>this.filterDuplicateTokens(t)))}hasCategorySelection(){return this.categories!==undefined}displayDropdown(){if(this.hasCategorySelection()){return true}if(this.suggestions!==undefined){return this.getFilteredSuggestions().length>0}return false}renderPlainSuggestions(){return i("div",{class:"dropdown-item-container"},this.getFilteredSuggestions().map((t=>i("button",{class:"dropdown-item","data-id":t,onClick:()=>this.addToken(t),key:t,title:t},t))))}renderCategoryValues(){var t,e;return i("div",{class:"dropdown-item-container"},i("button",{class:"btn btn-invisible-secondary btn-icon btn-toggle-operator",onClick:()=>this.toggleCategoryOperator(),tabindex:"-1"},this.categoryLogicalOperator===o.NOT_EQUAL?"=":"!="),i("div",{class:"dropdown-header"},(t=this.categories[this.category])===null||t===void 0?void 0:t.label),(e=this.categories[this.category])===null||e===void 0?void 0:e.options.filter((t=>this.filterByInput(t))).filter((t=>this.filterDuplicateTokens(t))).map((t=>i("button",{class:"dropdown-item category-item-value","data-id":t,title:t,key:t,onClick:()=>this.addToken(t,this.category)},`${this.categoryLogicalOperator===o.EQUAL?"=":"!="} ${t}`))))}renderDropdownContent(){if(this.hasCategorySelection()){if(this.category){return this.renderCategoryValues()}else{return this.renderCategorySelection()}}else return this.renderPlainSuggestions()}renderCategorySelection(){var t;return i("div",{class:"dropdown-item-container"},(t=this.getCategoryIds())===null||t===void 0?void 0:t.filter((t=>this.filterByInput(this.categories[t].label))).filter((t=>this.filterMultiples(t))).map((t=>{var e;return i("button",{class:"dropdown-item category-item category-item-id","data-id":t,title:this.categories[t].label,key:t,onClick:()=>this.selectCategory(t),tabindex:"0"},(e=this.categories[t])===null||e===void 0?void 0:e.label)})))}getDropdownHeader(){if(this.categories){if(this.category){return null}else{return this.labelCategories}}return this.i18nPlainText}componentDidRender(){if(this.isScrollStateDirty){if(!this.tmpDisableScrollIntoView){this.textInput.scrollIntoView()}this.isScrollStateDirty=false}}getResetButton(){return i("ix-icon-button",{onClick:()=>this.resetFilter(),class:{"reset-button":true,"hide-reset-button":!this.filterTokens.length&&!this.category},variant:"Primary",ghost:true,oval:true,icon:"clear",size:"16",tabindex:"1"})}render(){var t;return i(r,null,i("form",{ref:t=>this.formElement=t},i("div",{class:{"form-control":true,"input-container":true,focus:this.hasFocus,"no-icon":this.hideIcon}},i("ix-icon",{class:{"d-none":this.hideIcon},name:this.icon,size:"16"}),i("div",{class:"token-container"},i("ul",{class:"list-unstyled"},this.filterTokens.map(((t,e)=>i("li",{key:t.toString(),class:{animate__animated:true,animate__fadein:true}},i("ix-filter-chip",{onCloseClick:()=>this.removeToken(e)},this.getFilterChipLabel(t))))),this.categories===undefined?"":i("li",{class:{"category-preview":true,"d-none":!this.category}},(t=this.categories[this.category])===null||t===void 0?void 0:t.label),i("input",{class:{"text-input":true,"hide-placeholder":this.category!==undefined},ref:t=>this.textInput=t,type:"text",placeholder:this.placeholder}))),this.getResetButton())),i("ix-dropdown",{closeBehavior:"outside",trigger:this.textInput,triggerEvent:["click","focus"],header:this.getDropdownHeader(),class:{"d-none":!this.displayDropdown()}},this.renderDropdownContent()))}get hostElement(){return s(this)}static get watchers(){return{filterState:["watchFilterState"]}}};c.style=a;export{c as ix_category_filter};
+//# sourceMappingURL=p-c9c9f2b5.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["categoryFilterCss","CategoryFilter","this","ID_CUSTOM_FILTER_VALUE","LogicalFilterOperator","EQUAL","watchFilterState","newValue","setFilterState","componentDidLoad","initialState","undefined","filterState","setTimeout","_a","hostElement","addEventListener","handleFormElementKeyDown","bind","_b","formElement","e","preventDefault","textInput","console","warn","hasFocus","inputValue","value","inputState","InputState","category","inputChanged","emit","handleInputElementKeyDown","state","filterTokens","token","tokens","addToken","categoryLogicalOperator","categories","id","operator","emitFilterEvent","closeDropdown","querySelector","show","code","document","activeElement","classList","contains","getAttribute","hasCategorySelection","selectCategory","focusPreviousItem","focusNextItem","sibling","previousSibling","HTMLElement","focus","nextSibling","selector","item","stopPropagation","suggestions","length","tokenCount","removeToken","filter","map","filterChanged","emitEvent","newToken","trim","hasToken","pair","isScrollStateDirty","index","_","i","getCategoryIds","ids","Object","prototype","hasOwnProperty","call","push","resetFilter","filterMultiples","repeatCategories","isCategoryAlreadySet","find","some","filterToken","hasSameValue","filterDuplicateTokens","filterByInput","toLowerCase","indexOf","toggleCategoryOperator","NOT_EQUAL","getFilterChipLabel","operatorString","label","_c","nonSelectableCategories","getFilteredSuggestions","displayDropdown","renderPlainSuggestions","h","class","suggestion","onClick","key","title","renderCategoryValues","tabindex","options","renderDropdownContent","renderCategorySelection","getDropdownHeader","labelCategories","i18nPlainText","componentDidRender","tmpDisableScrollIntoView","scrollIntoView","getResetButton","variant","ghost","oval","icon","size","render","Host","ref","el","hideIcon","name","toString","animate__animated","animate__fadein","onCloseClick","type","placeholder","closeBehavior","trigger","triggerEvent","header"],"sources":["./src/components/category-filter/category-filter.scss?tag=ix-category-filter&encapsulation=scoped","./src/components/category-filter/category-filter.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/fonts';\n@import 'mixins/hover';\n@import 'mixins/shadows';\n@import 'mixins/text-truncation';\n\n:host {\n  display: block;\n  position: relative;\n\n  .focus {\n    border-color: var(--theme-color-primary);\n    box-shadow: 0 0 $tiny-space 0 var(--theme-color-primary) !important;\n  }\n\n  .reset-button {\n    position: absolute;\n    top: $tiny-space;\n    right: $tiny-space;\n  }\n\n  .reset-button.hide-reset-button {\n    display: none;\n  }\n\n  .input-container {\n    display: flex;\n    height: 100%;\n    max-height: 3.75rem;\n    padding: 1px $large-space 1px $x-large-space;\n\n    &.no-icon {\n      padding-left: $tiny-space;\n    }\n  }\n\n  .token-container {\n    flex-grow: 1;\n    overflow: hidden;\n  }\n\n  .text-input {\n    @include ellipsis;\n    @include text-default;\n    background: transparent;\n    flex-grow: 1;\n    height: 1.75rem;\n\n    &,\n    &:hover,\n    &:focus-visible {\n      border: none;\n      outline: none;\n    }\n\n    &.hide-placeholder::placeholder {\n      opacity: 0;\n    }\n  }\n\n  .list-unstyled {\n    display: flex;\n    flex-wrap: wrap;\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    overflow-y: auto;\n  }\n\n  ix-icon {\n    position: absolute;\n    top: $small-space;\n    left: $small-space;\n  }\n\n  ix-filter-chip {\n    margin-right: $small-space;\n  }\n\n  .category-preview {\n    display: flex;\n    align-items: center;\n    height: $large-space;\n    background-color: var(--theme-bg-3);\n    border-top-left-radius: $default-space;\n    border-bottom-left-radius: $default-space;\n    padding: $small-space;\n    margin: 2px 0;\n  }\n\n  ul {\n    height: 100%;\n  }\n\n  ul > li,\n  input {\n    padding-top: 2px;\n    padding-bottom: 2px;\n  }\n\n  ix-dropdown {\n    min-width: 10rem !important;\n\n    .dropdown-item-container {\n      display: flex;\n      flex-direction: column;\n\n      .dropdown-item {\n        @include text-default-single;\n        @include ellipsis;\n        height: $large-control-height;\n        margin: $tiny-space $small-space;\n        padding-inline: $small-space;\n        border-radius: 100rem;\n        width: auto;\n      }\n\n      .category-item {\n        border-end-end-radius: 0;\n        border-start-end-radius: 0;\n      }\n\n      .category-item-value {\n        border-start-start-radius: 0;\n        border-end-start-radius: 0;\n      }\n    }\n\n    .btn-toggle-operator {\n      margin-inline: $small-space;\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { FilterState } from './filter-state';\nimport { InputState } from './input-state';\nimport { LogicalFilterOperator } from './logical-filter-operator';\n\n@Component({\n  tag: 'ix-category-filter',\n  styleUrl: 'category-filter.scss',\n  scoped: true,\n})\nexport class CategoryFilter {\n  private readonly ID_CUSTOM_FILTER_VALUE = 'CW_CUSTOM_FILTER_VALUE';\n\n  @State() private textInput?: HTMLInputElement;\n  private formElement?: HTMLFormElement;\n  private isScrollStateDirty: boolean;\n\n  @Element() hostElement: HTMLIxCategoryFilterElement;\n\n  @State() hasFocus: boolean;\n  @State() categoryLogicalOperator = LogicalFilterOperator.EQUAL;\n  @State() inputValue: string;\n  @State() category: string;\n  @State() filterTokens: Array<{\n    id: string;\n    value: string;\n    operator: LogicalFilterOperator;\n  }> = [];\n\n  /**\n   * When set this will initially populate the component with the provided search criteria.\n   * This will trigger all input events accordingly.\n   * @deprecated Will be removed with 2.0.0. Use the member filterState instead.\n   */\n  @Prop() initialState: FilterState;\n\n  /**\n   * A set of search criteria to populate the component with.\n   */\n  @Prop() filterState: FilterState;\n\n  /**\n   * Placeholder text to be displayed in an empty input field.\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * Configuration object hash used to populate the dropwdown menu for typeahead and quick selection functionality.\n   * Each ID maps to an object with a label and an array of options to select from.\n   */\n  @Prop() categories: {\n    [id: string]: {\n      label: string;\n      options: string[];\n    };\n  };\n\n  /**\n   * In certain use cases some categories may not be available for selection anymore.\n   * To allow proper display of set filters with these categories this ID to label mapping can be populated.\n   *\n   * Configuration object hash used to supply labels to the filter chips in the input field.\n   * Each ID maps to a string representing the label to display.\n   */\n  @Prop() nonSelectableCategories?: {\n    [id: string]: string;\n  } = {};\n\n  /**\n   * A list of strings that will be supplied as typeahead suggestions not tied to any categories.\n   */\n  @Prop() suggestions: string[];\n\n  /**\n   * The icon next to the actual text input\n   * Defaults to 'search'\n   */\n  @Prop() icon = 'search';\n\n  /**\n   * Allows to hide the icon inside the text input.\n   * Defaults to false\n   */\n  @Prop() hideIcon: boolean;\n\n  /**\n   * If set to true allows that a single category can be set more than once.\n   * An already set category will not appear in the category dropdown if set to false.\n   *\n   * Defaults to true\n   */\n  @Prop() repeatCategories = true;\n\n  /**\n   * @internal For debugging purposes only!\n   */\n  @Prop() tmpDisableScrollIntoView = true;\n\n  /**\n   * i18n\n   */\n  @Prop() labelCategories = 'Categories';\n\n  /**\n   * i18n\n   */\n  @Prop() i18nPlainText = 'Filter by text';\n\n  /**\n   * Event dispatched whenever the text input changes.\n   */\n  @Event() inputChanged: EventEmitter<InputState>;\n\n  /**\n   * Event dispatched whenever the filter state changes.\n   */\n  @Event() filterChanged: EventEmitter<FilterState>;\n\n  @Watch('filterState')\n  watchFilterState(newValue) {\n    this.setFilterState(newValue);\n  }\n\n  componentDidLoad() {\n    if (this.initialState !== undefined) {\n      this.setFilterState(this.initialState);\n    } else if (this.filterState !== undefined) {\n      setTimeout(() => this.setFilterState(this.filterState));\n    }\n\n    this.hostElement?.addEventListener(\n      'keydown',\n      this.handleFormElementKeyDown.bind(this)\n    );\n\n    this.formElement?.addEventListener('submit', (e) => e.preventDefault());\n\n    if (this.textInput == null) {\n      console.warn(\n        'ix-category-filter - unable to add event listeners to native input element'\n      );\n      return;\n    }\n\n    this.textInput.addEventListener('focusin', () => {\n      this.hasFocus = true;\n    });\n    this.textInput.addEventListener('focusout', () => (this.hasFocus = false));\n    this.textInput.addEventListener('input', () => {\n      this.inputValue = this.textInput.value;\n      const inputState = new InputState(this.inputValue, this.category);\n      this.inputChanged.emit(inputState);\n    });\n    this.textInput.addEventListener(\n      'keydown',\n      this.handleInputElementKeyDown.bind(this)\n    );\n  }\n\n  private setFilterState(state: FilterState) {\n    this.filterTokens = [];\n\n    for (const token of state.tokens) {\n      this.addToken(\n        token,\n        this.ID_CUSTOM_FILTER_VALUE,\n        this.categoryLogicalOperator,\n        false\n      );\n    }\n\n    for (const category of state.categories) {\n      this.addToken(category.value, category.id, category.operator, false);\n    }\n\n    this.emitFilterEvent();\n  }\n\n  private closeDropdown() {\n    this.hostElement.querySelector('ix-dropdown').show = false;\n  }\n\n  private handleFormElementKeyDown(e: KeyboardEvent) {\n    switch (e.code) {\n      case 'Enter':\n      case 'NumpadEnter':\n        if (!document.activeElement.classList.contains('dropdown-item')) {\n          return;\n        }\n\n        const token = document.activeElement.getAttribute('data-id');\n\n        if (this.hasCategorySelection()) {\n          if (this.category) {\n            this.addToken(token, this.category);\n          } else if (\n            document.activeElement.classList.contains('category-item-id')\n          ) {\n            this.selectCategory(token);\n          }\n        } else {\n          this.addToken(token);\n        }\n\n        e.preventDefault();\n        break;\n\n      case 'ArrowUp':\n        this.focusPreviousItem();\n        e.preventDefault();\n        break;\n\n      case 'ArrowDown':\n        this.focusNextItem();\n        e.preventDefault();\n        break;\n\n      case 'Escape':\n        this.closeDropdown();\n        break;\n    }\n  }\n\n  private focusPreviousItem() {\n    const sibling = document.activeElement.previousSibling;\n    if (sibling instanceof HTMLElement) {\n      sibling.focus();\n    }\n  }\n\n  private focusNextItem() {\n    const sibling = document.activeElement.nextSibling;\n    if (sibling instanceof HTMLElement) {\n      sibling.focus();\n    }\n  }\n\n  private handleInputElementKeyDown(e: KeyboardEvent) {\n    switch (e.code) {\n      case 'ArrowDown':\n        const selector = `.category-item-${this.category ? 'value' : 'id'}`;\n        let item = this.hostElement.querySelector(selector);\n\n        if (item instanceof HTMLElement) {\n          item.focus();\n          e.stopPropagation();\n        } else if (this.suggestions?.length) {\n          item = this.hostElement.querySelector('.category-item');\n          if (item instanceof HTMLElement) {\n            item.focus();\n            e.stopPropagation();\n          }\n        }\n        break;\n\n      case 'Backspace':\n        if (this.textInput.value !== '') {\n          return;\n        }\n\n        if (this.category) {\n          this.category = undefined;\n          return;\n        }\n\n        const tokenCount = this.filterTokens.length;\n        if (tokenCount > 0) {\n          this.removeToken(tokenCount - 1);\n        }\n        break;\n\n      case 'Enter':\n      case 'NumpadEnter':\n        this.addToken(this.inputValue, this.category);\n        e.preventDefault();\n        break;\n    }\n  }\n\n  private emitFilterEvent() {\n    const tokens = this.filterTokens\n      .filter((item) => item.id === this.ID_CUSTOM_FILTER_VALUE)\n      .map((item) => item.value);\n    const categories = this.filterTokens.filter(\n      (item) => item.id !== this.ID_CUSTOM_FILTER_VALUE\n    );\n    const filterState: FilterState = {\n      tokens,\n      categories,\n    };\n\n    this.filterChanged.emit(filterState);\n  }\n\n  private addToken(\n    token: string,\n    category: string = this.ID_CUSTOM_FILTER_VALUE,\n    operator = this.categoryLogicalOperator,\n    emitEvent = true\n  ) {\n    if (token === undefined || token === null) {\n      return;\n    }\n\n    const newToken = token.trim();\n\n    if (newToken === '') {\n      return;\n    }\n\n    if (this.hasToken(newToken)) {\n      return;\n    }\n\n    const pair = { id: category, value: newToken, operator };\n    this.filterTokens = [...this.filterTokens, pair];\n    this.textInput.value = '';\n    this.inputValue = '';\n    this.categoryLogicalOperator = LogicalFilterOperator.EQUAL;\n\n    if (this.category) {\n      this.category = undefined;\n    }\n\n    this.isScrollStateDirty = true;\n\n    this.textInput.focus();\n\n    if (emitEvent) {\n      this.emitFilterEvent();\n    }\n\n    this.closeDropdown();\n  }\n\n  private removeToken(index: number) {\n    this.filterTokens = this.filterTokens.filter((_, i) => i !== index);\n    this.emitFilterEvent();\n  }\n\n  private getCategoryIds() {\n    const ids = [];\n    for (const id in this.categories) {\n      if (Object.prototype.hasOwnProperty.call(this.categories, id)) {\n        ids.push(id);\n      }\n    }\n\n    return ids;\n  }\n\n  private selectCategory(category: string) {\n    this.category = category;\n    this.textInput.value = '';\n    this.inputValue = '';\n    this.textInput.focus();\n  }\n\n  private resetFilter() {\n    this.closeDropdown();\n    this.filterTokens = [];\n    this.emitFilterEvent();\n  }\n\n  private filterMultiples(value: string) {\n    if (this.repeatCategories) {\n      return true;\n    }\n\n    const isCategoryAlreadySet = this.filterTokens.find(\n      (token) => token.id === value\n    );\n\n    return !isCategoryAlreadySet;\n  }\n\n  private hasToken(token: string) {\n    return this.filterTokens.some((filterToken) => {\n      const hasSameValue = filterToken.value === token;\n\n      if (!hasSameValue) {\n        return false;\n      }\n\n      if (this.category) {\n        return this.category === filterToken.id;\n      }\n\n      if (filterToken.id) {\n        return filterToken.id === this.ID_CUSTOM_FILTER_VALUE;\n      }\n\n      return hasSameValue;\n    });\n  }\n\n  private filterDuplicateTokens(value: string) {\n    return !this.hasToken(value);\n  }\n\n  private filterByInput(value: string) {\n    if (this.inputValue === undefined || this.inputValue === '') {\n      return true;\n    }\n\n    return value.toLowerCase().indexOf(this.inputValue.toLowerCase()) !== -1;\n  }\n\n  private toggleCategoryOperator() {\n    switch (this.categoryLogicalOperator) {\n      case LogicalFilterOperator.EQUAL:\n        this.categoryLogicalOperator = LogicalFilterOperator.NOT_EQUAL;\n        break;\n\n      case LogicalFilterOperator.NOT_EQUAL:\n        this.categoryLogicalOperator = LogicalFilterOperator.EQUAL;\n        break;\n    }\n  }\n\n  private getFilterChipLabel(value: {\n    id: string;\n    value: string;\n    operator: LogicalFilterOperator;\n  }): string {\n    if (value.id === this.ID_CUSTOM_FILTER_VALUE) {\n      return value.value;\n    }\n\n    const operatorString =\n      value.operator === LogicalFilterOperator.EQUAL ? '=' : '!=';\n    const label =\n      this.categories[value.id]?.label ??\n      this.nonSelectableCategories[value.id] ??\n      value.id;\n\n    return `${label} ${operatorString} ${value.value}`;\n  }\n\n  private getFilteredSuggestions() {\n    if (!this.suggestions?.length) {\n      return [];\n    }\n\n    return this.suggestions\n      ?.filter((value) => this.filterByInput(value))\n      .filter((value) => this.filterDuplicateTokens(value));\n  }\n\n  private hasCategorySelection() {\n    return this.categories !== undefined;\n  }\n\n  private displayDropdown() {\n    if (this.hasCategorySelection()) {\n      return true;\n    }\n\n    if (this.suggestions !== undefined) {\n      return this.getFilteredSuggestions().length > 0;\n    }\n\n    return false;\n  }\n\n  private renderPlainSuggestions() {\n    return (\n      <div class=\"dropdown-item-container\">\n        {this.getFilteredSuggestions().map((suggestion) => (\n          <button\n            class=\"dropdown-item\"\n            data-id={suggestion}\n            onClick={() => this.addToken(suggestion)}\n            key={suggestion}\n            title={suggestion}\n          >\n            {suggestion}\n          </button>\n        ))}\n      </div>\n    );\n  }\n\n  private renderCategoryValues() {\n    return (\n      <div class=\"dropdown-item-container\">\n        <button\n          class=\"btn btn-invisible-secondary btn-icon btn-toggle-operator\"\n          onClick={() => this.toggleCategoryOperator()}\n          tabindex=\"-1\"\n        >\n          {this.categoryLogicalOperator === LogicalFilterOperator.NOT_EQUAL\n            ? '='\n            : '!='}\n        </button>\n        <div class=\"dropdown-header\">\n          {this.categories[this.category]?.label}\n        </div>\n        {this.categories[this.category]?.options\n          .filter((value) => this.filterByInput(value))\n          .filter((value) => this.filterDuplicateTokens(value))\n          .map((id) => (\n            <button\n              class=\"dropdown-item category-item-value\"\n              data-id={id}\n              title={id}\n              key={id}\n              onClick={() => this.addToken(id, this.category)}\n            >\n              {`${\n                this.categoryLogicalOperator === LogicalFilterOperator.EQUAL\n                  ? '='\n                  : '!='\n              } ${id}`}\n            </button>\n          ))}\n      </div>\n    );\n  }\n\n  private renderDropdownContent() {\n    if (this.hasCategorySelection()) {\n      if (this.category) {\n        return this.renderCategoryValues();\n      } else {\n        return this.renderCategorySelection();\n      }\n    } else return this.renderPlainSuggestions();\n  }\n\n  private renderCategorySelection() {\n    return (\n      <div class=\"dropdown-item-container\">\n        {this.getCategoryIds()\n          ?.filter((id) => this.filterByInput(this.categories[id].label))\n          .filter((id) => this.filterMultiples(id))\n          .map((id) => (\n            <button\n              class=\"dropdown-item category-item category-item-id\"\n              data-id={id}\n              title={this.categories[id].label}\n              key={id}\n              onClick={() => this.selectCategory(id)}\n              tabindex=\"0\"\n            >\n              {this.categories[id]?.label}\n            </button>\n          ))}\n      </div>\n    );\n  }\n\n  private getDropdownHeader() {\n    if (this.categories) {\n      if (this.category) {\n        return null;\n      } else {\n        return this.labelCategories;\n      }\n    }\n\n    return this.i18nPlainText;\n  }\n\n  componentDidRender() {\n    if (this.isScrollStateDirty) {\n      if (!this.tmpDisableScrollIntoView) {\n        this.textInput.scrollIntoView();\n      }\n      this.isScrollStateDirty = false;\n    }\n  }\n\n  private getResetButton() {\n    return (\n      <ix-icon-button\n        onClick={() => this.resetFilter()}\n        class={{\n          'reset-button': true,\n          'hide-reset-button': !this.filterTokens.length && !this.category,\n        }}\n        variant=\"Primary\"\n        ghost\n        oval\n        icon=\"clear\"\n        size=\"16\"\n        tabindex=\"1\"\n      ></ix-icon-button>\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <form ref={(el) => (this.formElement = el)}>\n          <div\n            class={{\n              'form-control': true,\n              'input-container': true,\n              focus: this.hasFocus,\n              'no-icon': this.hideIcon,\n            }}\n          >\n            <ix-icon\n              class={{ 'd-none': this.hideIcon }}\n              name={this.icon}\n              size=\"16\"\n            ></ix-icon>\n            <div class=\"token-container\">\n              <ul class=\"list-unstyled\">\n                {this.filterTokens.map((value, index) => (\n                  <li\n                    key={value.toString()}\n                    class={{\n                      animate__animated: true,\n                      animate__fadein: true,\n                    }}\n                  >\n                    <ix-filter-chip\n                      onCloseClick={() => this.removeToken(index)}\n                    >\n                      {this.getFilterChipLabel(value)}\n                    </ix-filter-chip>\n                  </li>\n                ))}\n                {this.categories === undefined ? (\n                  ''\n                ) : (\n                  <li\n                    class={{\n                      'category-preview': true,\n                      'd-none': !this.category,\n                    }}\n                  >\n                    {this.categories[this.category]?.label}\n                  </li>\n                )}\n                <input\n                  class={{\n                    'text-input': true,\n                    'hide-placeholder': this.category !== undefined,\n                  }}\n                  ref={(el) => (this.textInput = el)}\n                  type=\"text\"\n                  placeholder={this.placeholder}\n                ></input>\n              </ul>\n            </div>\n            {this.getResetButton()}\n          </div>\n        </form>\n\n        <ix-dropdown\n          closeBehavior=\"outside\"\n          trigger={this.textInput}\n          triggerEvent={['click', 'focus']}\n          header={this.getDropdownHeader()}\n          class={{ 'd-none': !this.displayDropdown() }}\n        >\n          {this.renderDropdownContent()}\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["selectCss","Select","items","Array","from","this","hostElement","querySelectorAll","selectedItems","filter","item","selected","addItemButton","querySelector","isSingleMode","mode","isMultipleMode","isEveryDropdownItemHidden","every","classList","contains","watchSelectedIndices","newId","selectValue","isArray","onItemClicked","event","detail","emitItemClick","selectedIndices","includes","i","itemSelectionChange","emit","emitAddItem","value","trim","newItem","document","createElement","label","addItemRef","appendChild","clearInput","addItem","ids","forEach","some","map","inputValue","_a","length","componentWillLoad","onLabelChange","preventDefault","stopImmediatePropagation","disconnectedCallback","labelMutationObserver","disconnect","itemExists","find","dropdownVisibilityChanged","dropdownShow","hasFocus","inputRef","focus","select","removeHiddenFromItems","isDropdownEmpty","navigationItem","undefined","async","code","onArrowNavigation","onEnterNavigation","editable","inputFilterText","onItemClick","_b","dropdownRef","updatePosition","stopPropagation","focusItem","activeElement","selectItems","index","indexOf","setHoverEffectForNavigatedSelectItem","filterItemsWithTypeahead","remove","toLowerCase","add","clear","onInputBlur","e","target","placeholderValue","i18nPlaceholderEditable","readonly","i18nPlaceholder","render","h","Host","class","disabled","ref","dropdownAnchor","dropdownWrapperRef","key","onCloseClick","readOnly","type","allowClear","placeholder","onBlur","onInput","_c","icon","ghost","oval","size","onClick","name","show","anchor","trigger","onShowChanged","placement","overwriteDropdownStyle","minWidth","clientWidth","hidden","hideListHeader","title","i18nSelectListHeader","i18nNoMatches","IxSelectItemLabelChangeEvent","CustomEvent","constructor","super","bubbles","selectItemCss","SelectItem","itemClick","componentDidRender","Error","labelChange","newValue","oldValue","dispatchEvent","checked"],"sources":["./src/components/select/select.scss?tag=ix-select&encapsulation=scoped","./src/components/select/select.tsx","./src/components/select-item/events.ts","./src/components/select-item/select-item.scss?tag=ix-select-item&encapsulation=scoped","./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/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  display: inline-block;\n  position: relative;\n  height: auto;\n  width: 100%;\n\n  .select {\n    position: relative;\n    display: flex;\n    align-items: center;\n    height: auto;\n    background-color: var(--theme-input--background);\n    border: var(--theme-input--border-thickness) solid\n      var(--theme-input--border-color);\n    border-radius: var(--theme-input--border-radius);\n    padding: 0 0 0 $small-space;\n\n    @include hover {\n      background-color: var(--theme-input--background--hover);\n      border-color: var(--theme-input--border-color--hover);\n    }\n\n    &:focus-within {\n      background-color: var(--theme-input--background--focus);\n      border-color: var(--theme-input--border-color--focus);\n      outline: 1px solid #119fff !important;\n      outline-offset: var(--theme-input--focus--outline-offset);\n    }\n  }\n\n  .hidden {\n    display: none !important;\n  }\n\n  .trigger {\n    display: flex;\n    align-items: center;\n    flex-grow: 1;\n    height: 100%;\n  }\n\n  .input-container {\n    display: flex;\n    position: relative;\n    align-items: flex-start;\n    width: 100%;\n\n    .chips {\n      position: relative;\n      display: flex;\n      align-items: center;\n      flex-wrap: wrap;\n      height: 100%;\n      max-height: 3.5rem;\n      flex-grow: 1;\n      overflow-y: auto;\n\n      > ix-filter-chip {\n        margin: 0.1rem;\n      }\n    }\n\n    input {\n      @include ellipsis;\n      @include text-default;\n      background: transparent;\n      height: 1.75rem;\n      width: 100%;\n\n      &,\n      &:hover,\n      &:focus-visible {\n        border: none;\n        outline: none;\n      }\n\n      &::placeholder {\n        color: var(--theme-input-select-icon--color);\n      }\n\n      &.hide-placeholder::placeholder {\n        opacity: 0;\n      }\n    }\n  }\n\n  .chevron-down-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: $x-large-space;\n    min-width: $x-large-space;\n    height: 100%;\n  }\n\n  .editable {\n    .chevron-down-container {\n      @include hover {\n        background-color: var(\n          --theme-btn-invisible-secondary--background--hover\n        );\n      }\n\n      @include active {\n        background-color: var(\n          --theme-btn-invisible-secondary--background--active\n        );\n      }\n    }\n  }\n\n  .add-item {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    position: relative;\n    width: 100%;\n  }\n\n  .select-list-header {\n    @include ellipsis;\n    display: flex;\n    align-items: center;\n    height: $default-control-height;\n    color: var(--theme-select-list-item-hint--color);\n    margin: 0 $small-space 0 $x-large-space;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { IxSelectItemLabelChangeEvent } from '../select-item/events';\n\n@Component({\n  tag: 'ix-select',\n  styleUrl: 'select.scss',\n  scoped: true,\n})\nexport class Select {\n  @Element() hostElement!: HTMLIxSelectElement;\n\n  /**\n   * Indices of selected items\n   * This corresponds to the value property of ix-select-items and therefor not neccessarily the indices of the items in the list.\n   */\n  @Prop({ mutable: true }) selectedIndices: string | string[] = [];\n\n  /**\n   * Show clear button\n   */\n  @Prop() allowClear = false;\n\n  /**\n   * Selection mode\n   */\n  @Prop() mode: 'single' | 'multiple' = 'single';\n\n  /**\n   * Select is extendable\n   */\n  @Prop() editable = false;\n\n  /**\n   * If true the select will be in disabled state\n   */\n  @Prop() disabled = false;\n\n  /**\n   * If true the select will be in readonly mode\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Input field placeholder\n   */\n  @Prop() i18nPlaceholder = 'Select an option';\n\n  /**\n   * Input field placeholder for editable select\n   */\n  @Prop() i18nPlaceholderEditable = 'Type of select option';\n\n  /**\n   * Select list header\n   */\n  @Prop() i18nSelectListHeader = 'Please select an option';\n\n  /**\n   * Hint inside of dropdown if no items where found with current filter text\n   *\n   * @since 1.5.0\n   */\n  @Prop() i18nNoMatches = 'No matches';\n\n  /**\n   * Hide list header\n   *\n   * @since 1.5.0\n   @\n   */\n  @Prop() hideListHeader = false;\n\n  /**\n   * Item selection changed\n   */\n  @Event() itemSelectionChange: EventEmitter<string | string[]>;\n\n  /**\n   * Item added to selection\n   */\n  @Event() addItem: EventEmitter<string>;\n\n  @State() dropdownShow = false;\n  @State() value: string[];\n  @State() dropdownWrapperRef!: HTMLElement;\n  @State() dropdownAnchor!: HTMLElement;\n  @State() isDropdownEmpty = false;\n  @State() hasFocus = false;\n  @State() navigationItem: HTMLIxSelectItemElement;\n  @State() inputFilterText: string;\n  @State() inputValue: string;\n\n  private inputRef!: HTMLInputElement;\n  private dropdownRef!: HTMLIxDropdownElement;\n  private addItemRef!: HTMLDivElement;\n\n  private labelMutationObserver: MutationObserver;\n\n  get items() {\n    return Array.from(this.hostElement.querySelectorAll('ix-select-item'));\n  }\n\n  get selectedItems() {\n    return this.items.filter((item) => item.selected);\n  }\n\n  get addItemButton() {\n    return this.hostElement.querySelector('.add-item');\n  }\n\n  get isSingleMode() {\n    return this.mode === 'single';\n  }\n\n  get isMultipleMode() {\n    return this.mode === 'multiple';\n  }\n\n  get isEveryDropdownItemHidden() {\n    return this.items.every((item) => item.classList.contains('d-none'));\n  }\n\n  @Watch('selectedIndices')\n  watchSelectedIndices(newId: string | string[]) {\n    if (!newId) {\n      this.selectValue([]);\n      return;\n    }\n\n    if (Array.isArray(newId)) {\n      this.selectValue([...newId]);\n      return;\n    }\n\n    this.selectValue([newId]);\n  }\n\n  @Listen('itemClick')\n  onItemClicked(event: CustomEvent<string>) {\n    const newId = event.detail;\n    this.emitItemClick(newId);\n  }\n\n  private emitItemClick(newId: string) {\n    if (this.isMultipleMode && Array.isArray(this.selectedIndices)) {\n      if (this.selectedIndices.includes(newId)) {\n        this.selectedIndices = this.selectedIndices.filter((i) => i !== newId);\n      } else {\n        this.selectedIndices = [...this.selectedIndices, newId];\n      }\n    } else {\n      this.selectedIndices = [newId];\n    }\n\n    this.selectValue(this.selectedIndices);\n    this.itemSelectionChange.emit(this.selectedIndices);\n  }\n\n  private emitAddItem(value: string) {\n    if (value.trim() === '') {\n      return;\n    }\n\n    const newItem = document.createElement('ix-select-item');\n    newItem.value = value;\n    newItem.label = value;\n\n    this.addItemRef.appendChild(newItem);\n\n    this.clearInput();\n    this.emitItemClick(value);\n    this.addItem.emit(value);\n  }\n\n  private selectValue(ids: string[]) {\n    this.items.forEach((item) => {\n      item.selected = ids.some((i) => i === item.value);\n    });\n\n    this.value = this.selectedItems.map((item) => item.label);\n\n    if (this.isSingleMode) {\n      this.inputValue = this.value?.length ? this.value[0] : null;\n      return;\n    }\n\n    this.inputValue = null;\n  }\n\n  componentWillLoad() {\n    if (this.selectedIndices) {\n      this.selectValue(\n        Array.isArray(this.selectedIndices)\n          ? this.selectedIndices\n          : [this.selectedIndices]\n      );\n    }\n  }\n\n  @Listen('ix-select-item:labelChange')\n  onLabelChange(event: IxSelectItemLabelChangeEvent) {\n    event.preventDefault();\n    event.stopImmediatePropagation();\n    this.selectValue(\n      Array.isArray(this.selectedIndices)\n        ? this.selectedIndices\n        : [this.selectedIndices]\n    );\n  }\n\n  disconnectedCallback() {\n    if (this.labelMutationObserver) {\n      this.labelMutationObserver.disconnect();\n    }\n  }\n\n  private itemExists(item: string) {\n    return this.items.find((i) => i.label === item);\n  }\n\n  private dropdownVisibilityChanged(event: CustomEvent<boolean>) {\n    this.dropdownShow = event.detail;\n    this.hasFocus = event.detail;\n\n    if (event.detail) {\n      this.inputRef.focus();\n      this.inputRef.select();\n\n      this.removeHiddenFromItems();\n      this.isDropdownEmpty = this.isEveryDropdownItemHidden;\n    } else {\n      this.navigationItem = undefined;\n    }\n  }\n\n  @Listen('keydown', {\n    target: 'window',\n  })\n  async onKeyDown(event: KeyboardEvent) {\n    if (!this.dropdownShow) {\n      return;\n    }\n\n    if (event.code === 'ArrowDown' || event.code === 'ArrowUp') {\n      this.onArrowNavigation(event);\n    }\n\n    if (event.code === 'Enter' || event.code === 'NumpadEnter') {\n      await this.onEnterNavigation();\n    }\n\n    if (event.code === 'Escape') {\n      this.dropdownShow = false;\n    }\n  }\n\n  private async onEnterNavigation() {\n    if (this.isMultipleMode) {\n      return;\n    }\n\n    if (this.editable && !this.itemExists(this.inputFilterText)) {\n      this.emitAddItem(this.inputFilterText);\n      this.navigationItem = this.items[this.items.length - 1];\n    }\n\n    this.navigationItem?.onItemClick();\n    await this.dropdownRef?.updatePosition();\n\n    if (this.isSingleMode && !this.editable) {\n      this.dropdownShow = false;\n    }\n  }\n\n  private onArrowNavigation(event: KeyboardEvent) {\n    event.stopPropagation();\n    event.preventDefault();\n\n    const focusItem = this.items.find(\n      (item) => document.activeElement === item.querySelector('button')\n    );\n    this.navigationItem = focusItem;\n\n    const selectItems = this.items.filter(\n      (i) => !i.classList.contains('d-none')\n    );\n\n    const index = selectItems.indexOf(this.navigationItem);\n\n    if (event.code === 'ArrowDown' && index < selectItems.length - 1) {\n      this.navigationItem = selectItems[index + 1];\n    } else if (event.code === 'ArrowUp' && index > 0) {\n      this.navigationItem = selectItems[index - 1];\n    }\n\n    this.setHoverEffectForNavigatedSelectItem();\n  }\n\n  private setHoverEffectForNavigatedSelectItem() {\n    this.navigationItem?.querySelector('button').focus();\n  }\n\n  private filterItemsWithTypeahead() {\n    this.inputFilterText = this.inputRef.value;\n\n    if (this.inputFilterText) {\n      this.items.forEach((item) => {\n        item.classList.remove('d-none');\n        if (\n          !item.label.toLowerCase().includes(this.inputFilterText.toLowerCase())\n        ) {\n          item.classList.add('d-none');\n        }\n      });\n    } else {\n      this.removeHiddenFromItems();\n    }\n\n    this.isDropdownEmpty = this.isEveryDropdownItemHidden;\n  }\n\n  private removeHiddenFromItems() {\n    this.items.forEach((item) => {\n      item.classList.remove('d-none');\n    });\n  }\n\n  private clearInput() {\n    this.inputRef.value = '';\n    this.inputFilterText = '';\n  }\n\n  private clear() {\n    this.clearInput();\n    this.value = [];\n    this.selectedIndices = [];\n    this.itemSelectionChange.emit(null);\n    this.dropdownShow = false;\n  }\n\n  private onInputBlur(e) {\n    if (this.editable) {\n      return;\n    }\n\n    if (this.isSingleMode) {\n      if (this.dropdownShow && this.isDropdownEmpty) {\n        this.dropdownShow = false;\n      }\n    }\n\n    if (!this.dropdownShow && this.mode !== 'multiple') {\n      e.target['value'] = this.value;\n    }\n  }\n\n  private placeholderValue() {\n    if (this.editable) {\n      return this.i18nPlaceholderEditable;\n    }\n\n    if (this.readonly) {\n      return '';\n    }\n\n    return this.i18nPlaceholder;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'form-control': true,\n            select: true,\n            focus: this.hasFocus,\n            editable: this.editable,\n            disabled: this.disabled,\n            readonly: this.readonly,\n          }}\n          ref={(ref) => {\n            this.dropdownAnchor = ref;\n            if (!this.editable) this.dropdownWrapperRef = ref;\n          }}\n        >\n          <div class=\"input-container\">\n            <div class=\"chips\">\n              {this.isMultipleMode\n                ? this.selectedItems?.map((item) => (\n                    <ix-filter-chip\n                      disabled={this.disabled || this.readonly}\n                      key={item.value}\n                      onCloseClick={(e) => {\n                        e.preventDefault();\n                        e.stopPropagation();\n                        this.emitItemClick(item.value);\n                      }}\n                    >\n                      {item.label}\n                    </ix-filter-chip>\n                  ))\n                : ''}\n              <div class=\"trigger\">\n                <input\n                  data-testid=\"input\"\n                  disabled={this.disabled}\n                  readOnly={this.readonly}\n                  type=\"text\"\n                  class={{\n                    'allow-clear': this.allowClear && !!this.value?.length,\n                  }}\n                  placeholder={this.placeholderValue()}\n                  value={this.inputValue}\n                  ref={(ref) => (this.inputRef = ref)}\n                  onBlur={(e) => this.onInputBlur(e)}\n                  onInput={() => this.filterItemsWithTypeahead()}\n                />\n                {this.allowClear &&\n                (this.value?.length || this.inputFilterText) ? (\n                  <ix-icon-button\n                    class=\"clear\"\n                    icon=\"clear\"\n                    ghost\n                    oval\n                    size=\"16\"\n                    onClick={(e) => {\n                      e.preventDefault();\n                      e.stopPropagation();\n                      this.clear();\n                    }}\n                  />\n                ) : null}\n                {this.disabled || this.readonly ? null : (\n                  <div\n                    class=\"chevron-down-container\"\n                    ref={(ref) => {\n                      if (this.editable) this.dropdownWrapperRef = ref;\n                    }}\n                  >\n                    <ix-icon class=\"chevron\" name=\"chevron-down-small\" />\n                  </div>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n        <ix-dropdown\n          ref={(ref) => (this.dropdownRef = ref)}\n          show={this.dropdownShow}\n          class={{\n            'd-none': this.disabled || this.readonly,\n          }}\n          anchor={this.dropdownAnchor}\n          trigger={this.dropdownWrapperRef}\n          onShowChanged={(e) => this.dropdownVisibilityChanged(e)}\n          placement=\"auto-start\"\n          overwriteDropdownStyle={async () => {\n            return {\n              minWidth: `${this.hostElement.clientWidth}px`,\n            };\n          }}\n        >\n          <div\n            class={{\n              'select-list-header': true,\n              hidden: this.hideListHeader || this.isDropdownEmpty,\n            }}\n            title={this.i18nSelectListHeader}\n          >\n            {this.i18nSelectListHeader}\n          </div>\n          <slot></slot>\n          <div ref={(ref) => (this.addItemRef = ref)} class=\"d-contents\"></div>\n          {this.itemExists(this.inputFilterText) ? (\n            ''\n          ) : (\n            <ix-dropdown-item\n              data-testid=\"add-item\"\n              icon=\"plus\"\n              class={{\n                'add-item': true,\n                'd-none': !(this.editable && this.inputFilterText),\n              }}\n              label={this.inputFilterText}\n              onItemClick={(e) => {\n                e.preventDefault();\n                e.stopPropagation();\n                this.emitAddItem(this.inputFilterText);\n              }}\n            ></ix-dropdown-item>\n          )}\n          {this.isDropdownEmpty && !this.editable ? (\n            <div class=\"select-list-header\">{this.i18nNoMatches}</div>\n          ) : (\n            ''\n          )}\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nexport class IxSelectItemLabelChangeEvent extends CustomEvent<{\n  oldValue: string;\n  newValue: string;\n}> {\n  constructor(detail: { oldValue: string; newValue: string }) {\n    super('ix-select-item:labelChange', {\n      bubbles: true,\n      detail,\n    });\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n  display: block;\n}\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  scoped: 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          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,EAAY,qjH,MC4BLC,EAAM,M,wIAO6C,G,gBAKzC,M,UAKiB,S,cAKnB,M,cAKA,M,cAKA,M,qBAKO,mB,6BAKQ,wB,0BAKH,0B,mBAOP,a,oBAQC,M,kBAYD,M,0GAIG,M,cACP,M,uFAWhBC,YACF,OAAOC,MAAMC,KAAKC,KAAKC,YAAYC,iBAAiB,kB,CAGlDC,oBACF,OAAOH,KAAKH,MAAMO,QAAQC,GAASA,EAAKC,U,CAGtCC,oBACF,OAAOP,KAAKC,YAAYO,cAAc,Y,CAGpCC,mBACF,OAAOT,KAAKU,OAAS,Q,CAGnBC,qBACF,OAAOX,KAAKU,OAAS,U,CAGnBE,gCACF,OAAOZ,KAAKH,MAAMgB,OAAOR,GAASA,EAAKS,UAAUC,SAAS,W,CAI5DC,qBAAqBC,GACnB,IAAKA,EAAO,CACVjB,KAAKkB,YAAY,IACjB,M,CAGF,GAAIpB,MAAMqB,QAAQF,GAAQ,CACxBjB,KAAKkB,YAAY,IAAID,IACrB,M,CAGFjB,KAAKkB,YAAY,CAACD,G,CAIpBG,cAAcC,GACZ,MAAMJ,EAAQI,EAAMC,OACpBtB,KAAKuB,cAAcN,E,CAGbM,cAAcN,GACpB,GAAIjB,KAAKW,gBAAkBb,MAAMqB,QAAQnB,KAAKwB,iBAAkB,CAC9D,GAAIxB,KAAKwB,gBAAgBC,SAASR,GAAQ,CACxCjB,KAAKwB,gBAAkBxB,KAAKwB,gBAAgBpB,QAAQsB,GAAMA,IAAMT,G,KAC3D,CACLjB,KAAKwB,gBAAkB,IAAIxB,KAAKwB,gBAAiBP,E,MAE9C,CACLjB,KAAKwB,gBAAkB,CAACP,E,CAG1BjB,KAAKkB,YAAYlB,KAAKwB,iBACtBxB,KAAK2B,oBAAoBC,KAAK5B,KAAKwB,gB,CAG7BK,YAAYC,GAClB,GAAIA,EAAMC,SAAW,GAAI,CACvB,M,CAGF,MAAMC,EAAUC,SAASC,cAAc,kBACvCF,EAAQF,MAAQA,EAChBE,EAAQG,MAAQL,EAEhB9B,KAAKoC,WAAWC,YAAYL,GAE5BhC,KAAKsC,aACLtC,KAAKuB,cAAcO,GACnB9B,KAAKuC,QAAQX,KAAKE,E,CAGZZ,YAAYsB,G,MAClBxC,KAAKH,MAAM4C,SAASpC,IAClBA,EAAKC,SAAWkC,EAAIE,MAAMhB,GAAMA,IAAMrB,EAAKyB,OAAM,IAGnD9B,KAAK8B,MAAQ9B,KAAKG,cAAcwC,KAAKtC,GAASA,EAAK8B,QAEnD,GAAInC,KAAKS,aAAc,CACrBT,KAAK4C,aAAaC,EAAA7C,KAAK8B,SAAK,MAAAe,SAAA,SAAAA,EAAEC,QAAS9C,KAAK8B,MAAM,GAAK,KACvD,M,CAGF9B,KAAK4C,WAAa,I,CAGpBG,oBACE,GAAI/C,KAAKwB,gBAAiB,CACxBxB,KAAKkB,YACHpB,MAAMqB,QAAQnB,KAAKwB,iBACfxB,KAAKwB,gBACL,CAACxB,KAAKwB,iB,EAMhBwB,cAAc3B,GACZA,EAAM4B,iBACN5B,EAAM6B,2BACNlD,KAAKkB,YACHpB,MAAMqB,QAAQnB,KAAKwB,iBACfxB,KAAKwB,gBACL,CAACxB,KAAKwB,iB,CAId2B,uBACE,GAAInD,KAAKoD,sBAAuB,CAC9BpD,KAAKoD,sBAAsBC,Y,EAIvBC,WAAWjD,GACjB,OAAOL,KAAKH,MAAM0D,MAAM7B,GAAMA,EAAES,QAAU9B,G,CAGpCmD,0BAA0BnC,GAChCrB,KAAKyD,aAAepC,EAAMC,OAC1BtB,KAAK0D,SAAWrC,EAAMC,OAEtB,GAAID,EAAMC,OAAQ,CAChBtB,KAAK2D,SAASC,QACd5D,KAAK2D,SAASE,SAEd7D,KAAK8D,wBACL9D,KAAK+D,gBAAkB/D,KAAKY,yB,KACvB,CACLZ,KAAKgE,eAAiBC,S,EAO1BC,gBAAgB7C,GACd,IAAKrB,KAAKyD,aAAc,CACtB,M,CAGF,GAAIpC,EAAM8C,OAAS,aAAe9C,EAAM8C,OAAS,UAAW,CAC1DnE,KAAKoE,kBAAkB/C,E,CAGzB,GAAIA,EAAM8C,OAAS,SAAW9C,EAAM8C,OAAS,cAAe,OACpDnE,KAAKqE,mB,CAGb,GAAIhD,EAAM8C,OAAS,SAAU,CAC3BnE,KAAKyD,aAAe,K,EAIhBS,0B,QACN,GAAIlE,KAAKW,eAAgB,CACvB,M,CAGF,GAAIX,KAAKsE,WAAatE,KAAKsD,WAAWtD,KAAKuE,iBAAkB,CAC3DvE,KAAK6B,YAAY7B,KAAKuE,iBACtBvE,KAAKgE,eAAiBhE,KAAKH,MAAMG,KAAKH,MAAMiD,OAAS,E,EAGvDD,EAAA7C,KAAKgE,kBAAc,MAAAnB,SAAA,SAAAA,EAAE2B,qBACfC,EAAAzE,KAAK0E,eAAW,MAAAD,SAAA,SAAAA,EAAEE,kBAExB,GAAI3E,KAAKS,eAAiBT,KAAKsE,SAAU,CACvCtE,KAAKyD,aAAe,K,EAIhBW,kBAAkB/C,GACxBA,EAAMuD,kBACNvD,EAAM4B,iBAEN,MAAM4B,EAAY7E,KAAKH,MAAM0D,MAC1BlD,GAAS4B,SAAS6C,gBAAkBzE,EAAKG,cAAc,YAE1DR,KAAKgE,eAAiBa,EAEtB,MAAME,EAAc/E,KAAKH,MAAMO,QAC5BsB,IAAOA,EAAEZ,UAAUC,SAAS,YAG/B,MAAMiE,EAAQD,EAAYE,QAAQjF,KAAKgE,gBAEvC,GAAI3C,EAAM8C,OAAS,aAAea,EAAQD,EAAYjC,OAAS,EAAG,CAChE9C,KAAKgE,eAAiBe,EAAYC,EAAQ,E,MACrC,GAAI3D,EAAM8C,OAAS,WAAaa,EAAQ,EAAG,CAChDhF,KAAKgE,eAAiBe,EAAYC,EAAQ,E,CAG5ChF,KAAKkF,sC,CAGCA,uC,OACNrC,EAAA7C,KAAKgE,kBAAc,MAAAnB,SAAA,SAAAA,EAAErC,cAAc,UAAUoD,O,CAGvCuB,2BACNnF,KAAKuE,gBAAkBvE,KAAK2D,SAAS7B,MAErC,GAAI9B,KAAKuE,gBAAiB,CACxBvE,KAAKH,MAAM4C,SAASpC,IAClBA,EAAKS,UAAUsE,OAAO,UACtB,IACG/E,EAAK8B,MAAMkD,cAAc5D,SAASzB,KAAKuE,gBAAgBc,eACxD,CACAhF,EAAKS,UAAUwE,IAAI,S,SAGlB,CACLtF,KAAK8D,uB,CAGP9D,KAAK+D,gBAAkB/D,KAAKY,yB,CAGtBkD,wBACN9D,KAAKH,MAAM4C,SAASpC,IAClBA,EAAKS,UAAUsE,OAAO,SAAS,G,CAI3B9C,aACNtC,KAAK2D,SAAS7B,MAAQ,GACtB9B,KAAKuE,gBAAkB,E,CAGjBgB,QACNvF,KAAKsC,aACLtC,KAAK8B,MAAQ,GACb9B,KAAKwB,gBAAkB,GACvBxB,KAAK2B,oBAAoBC,KAAK,MAC9B5B,KAAKyD,aAAe,K,CAGd+B,YAAYC,GAClB,GAAIzF,KAAKsE,SAAU,CACjB,M,CAGF,GAAItE,KAAKS,aAAc,CACrB,GAAIT,KAAKyD,cAAgBzD,KAAK+D,gBAAiB,CAC7C/D,KAAKyD,aAAe,K,EAIxB,IAAKzD,KAAKyD,cAAgBzD,KAAKU,OAAS,WAAY,CAClD+E,EAAEC,OAAO,SAAW1F,KAAK8B,K,EAIrB6D,mBACN,GAAI3F,KAAKsE,SAAU,CACjB,OAAOtE,KAAK4F,uB,CAGd,GAAI5F,KAAK6F,SAAU,CACjB,MAAO,E,CAGT,OAAO7F,KAAK8F,e,CAGdC,S,UACE,OACEC,EAACC,EAAI,KACHD,EAAA,OACEE,MAAO,CACL,eAAgB,KAChBrC,OAAQ,KACRD,MAAO5D,KAAK0D,SACZY,SAAUtE,KAAKsE,SACf6B,SAAUnG,KAAKmG,SACfN,SAAU7F,KAAK6F,UAEjBO,IAAMA,IACJpG,KAAKqG,eAAiBD,EACtB,IAAKpG,KAAKsE,SAAUtE,KAAKsG,mBAAqBF,CAAG,GAGnDJ,EAAA,OAAKE,MAAM,mBACTF,EAAA,OAAKE,MAAM,SACRlG,KAAKW,gBACFkC,EAAA7C,KAAKG,iBAAa,MAAA0C,SAAA,SAAAA,EAAEF,KAAKtC,GACvB2F,EAAA,kBACEG,SAAUnG,KAAKmG,UAAYnG,KAAK6F,SAChCU,IAAKlG,EAAKyB,MACV0E,aAAef,IACbA,EAAExC,iBACFwC,EAAEb,kBACF5E,KAAKuB,cAAclB,EAAKyB,MAAM,GAG/BzB,EAAK8B,SAGV,GACJ6D,EAAA,OAAKE,MAAM,WACTF,EAAA,uBACc,QACZG,SAAUnG,KAAKmG,SACfM,SAAUzG,KAAK6F,SACfa,KAAK,OACLR,MAAO,CACL,cAAelG,KAAK2G,gBAAgBlC,EAAAzE,KAAK8B,SAAK,MAAA2C,SAAA,SAAAA,EAAE3B,SAElD8D,YAAa5G,KAAK2F,mBAClB7D,MAAO9B,KAAK4C,WACZwD,IAAMA,GAASpG,KAAK2D,SAAWyC,EAC/BS,OAASpB,GAAMzF,KAAKwF,YAAYC,GAChCqB,QAAS,IAAM9G,KAAKmF,6BAErBnF,KAAK2G,eACLI,EAAA/G,KAAK8B,SAAK,MAAAiF,SAAA,SAAAA,EAAEjE,SAAU9C,KAAKuE,iBAC1ByB,EAAA,kBACEE,MAAM,QACNc,KAAK,QACLC,MAAK,KACLC,KAAI,KACJC,KAAK,KACLC,QAAU3B,IACRA,EAAExC,iBACFwC,EAAEb,kBACF5E,KAAKuF,OAAO,IAGd,KACHvF,KAAKmG,UAAYnG,KAAK6F,SAAW,KAChCG,EAAA,OACEE,MAAM,yBACNE,IAAMA,IACJ,GAAIpG,KAAKsE,SAAUtE,KAAKsG,mBAAqBF,CAAG,GAGlDJ,EAAA,WAASE,MAAM,UAAUmB,KAAK,4BAO1CrB,EAAA,eACEI,IAAMA,GAASpG,KAAK0E,YAAc0B,EAClCkB,KAAMtH,KAAKyD,aACXyC,MAAO,CACL,SAAUlG,KAAKmG,UAAYnG,KAAK6F,UAElC0B,OAAQvH,KAAKqG,eACbmB,QAASxH,KAAKsG,mBACdmB,cAAgBhC,GAAMzF,KAAKwD,0BAA0BiC,GACrDiC,UAAU,aACVC,uBAAwBzD,UACf,CACL0D,SAAU,GAAG5H,KAAKC,YAAY4H,mBAIlC7B,EAAA,OACEE,MAAO,CACL,qBAAsB,KACtB4B,OAAQ9H,KAAK+H,gBAAkB/H,KAAK+D,iBAEtCiE,MAAOhI,KAAKiI,sBAEXjI,KAAKiI,sBAERjC,EAAA,aACAA,EAAA,OAAKI,IAAMA,GAASpG,KAAKoC,WAAagE,EAAMF,MAAM,eACjDlG,KAAKsD,WAAWtD,KAAKuE,iBAAgB,GAGpCyB,EAAA,kCACc,WACZgB,KAAK,OACLd,MAAO,CACL,WAAY,KACZ,WAAYlG,KAAKsE,UAAYtE,KAAKuE,kBAEpCpC,MAAOnC,KAAKuE,gBACZC,YAAciB,IACZA,EAAExC,iBACFwC,EAAEb,kBACF5E,KAAK6B,YAAY7B,KAAKuE,gBAAgB,IAI3CvE,KAAK+D,kBAAoB/D,KAAKsE,SAC7B0B,EAAA,OAAKE,MAAM,sBAAsBlG,KAAKkI,eAAoB,I,2HCxfzDC,UAAqCC,YAIhDC,YAAY/G,GACVgH,MAAM,6BAA8B,CAClCC,QAAS,KACTjH,U,ECfN,MAAMkH,EAAgB,sC,MC2BTC,EAAU,M,sHAgBF,M,WAKH,K,CAYhBvE,kBAAkB7C,GAChBA,IAAK,MAALA,SAAK,SAALA,EAAO4B,iBACP5B,IAAK,MAALA,SAAK,SAALA,EAAOuD,kBAEP5E,KAAK0I,UAAU9G,KAAK5B,KAAK8B,M,CAG3B6G,qBACE,IAAK3I,KAAK8B,MAAO,CACf,MAAM8G,MAAM,8C,EAKhBC,YAAYC,EAAkBC,GAC5B/I,KAAKC,YAAY+I,cACf,IAAIb,EAA6B,CAC/BW,SAAUA,EACVC,SAAUA,I,CAKhBhD,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,oBACEiD,QAASjJ,KAAKM,SACd6B,MAAOnC,KAAKmC,MAAQnC,KAAKmC,MAAQnC,KAAK8B,MACtC0C,YAAciB,GAAMzF,KAAKwE,YAAYiB,K"}