@siemens/ix 1.6.3 → 2.0.0-beta.0

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

@@ -1,2 +0,0 @@
-import{r as e,c as r,h as i,H as o,g as t}from"./p-1c64b073.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-f50697b9.entry.js.map

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

@@ -1 +0,0 @@
-{"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":"oGAAA,MAAMA,EAAW,kkH,MC2BJC,EAAK,MAwDZC,oBACF,OAAOC,MAAMC,KACXC,KAAKC,YAAYC,iBAAiB,0B,CAIlCC,iBACF,OAAOL,MAAMC,KACXC,KAAKC,YAAYC,iBAAiB,8B,CAIlCE,mBACF,OAAOJ,KAAKC,YAAYI,cAAc,iB,CAGpCC,aACF,OAAON,KAAKC,YAAYI,cAAc,U,CAOxCE,YAAAC,GAAAC,EAAAT,KAAAQ,GAAAR,KAAAU,YAAAC,EAAAX,KAAA,iBAAAA,KAAAY,WAAAD,EAAAX,KAAA,gBAAAA,KAAAa,iBAAAF,EAAAX,KAAA,sBAAAA,KAAAc,wBA5EkC,MAAKd,KAAAe,OAAAC,UAAAhB,KAAAiB,UAAAD,UAAAhB,KAAAkB,UAea,KAAIlB,KAAAmB,SAAAH,UAAAhB,KAAAoB,MAAAJ,UAAAhB,KAAAqB,oBAgB1B,MAAKrB,KAAAsB,aAmBX,MAAKtB,KAAAuB,mBAAAP,UAAAhB,KAAAwB,SAwBTxB,KAAKG,WAAWsB,MAAM,CAO1CC,gBAAgBC,GACd,MAAMC,EAAgBD,EAAME,OAE5B,IAAK7B,KAAKC,YAAY6B,SAASF,GAAgB,CAC7C,M,CAGF,GAAID,EAAMI,OAAS,SAAWJ,EAAMI,OAAS,cAAe,CAC1D,GAAIH,EAAcI,UAAUF,SAAS,gBAAiB,CACpD,GAAI9B,KAAKc,wBAAyB,CAChCd,KAAKkB,WAAalB,KAAKkB,S,KAClB,CACLlB,KAAKmB,UAAYnB,KAAKmB,Q,OAEnB,GAAIS,EAAcK,QAAQ,iBAAkB,CACjD,MAAMC,EAAYN,EAClBM,EAAUf,UAAYe,EAAUf,Q,GAK9BgB,cAAcR,GACpB3B,KAAKkB,WAAalB,KAAKkB,UAEvBlB,KAAKa,iBAAiBuB,KAAKpC,KAAKkB,WAChCS,EAAMU,iB,CAGAC,cAAcX,GACpB3B,KAAKuC,mBAAmBvC,KAAKmB,UAE7B,GAAInB,KAAKc,wBAAyB,CAChCd,KAAKmC,cAAcR,E,EAIfa,YAAYpB,GAClB,GAAIA,IAAUpB,KAAKoB,MAAO,CACxBpB,KAAKoB,MAAQJ,UACbhB,KAAKY,WAAWwB,KAAKpB,U,KAChB,CACLhB,KAAKoB,MAAQA,EACbpB,KAAKY,WAAWwB,KAAKhB,E,CAGvB,GAAIpB,KAAKoB,OAAS,EAAG,CACnBpB,KAAKsB,aAAe,I,MACftB,KAAKsB,aAAe,MAE3BtB,KAAKuC,kBAAkB,M,CAGjBA,kBAAkBE,GACxB,IAAKzC,KAAKc,wBAAyB,CACjCd,KAAKmB,SAAWsB,EAChBzC,KAAKU,YAAY0B,KAAKpC,KAAKmB,S,EAI/BuB,sB,MACE1C,KAAKG,WAAWwC,SAAQ,CAACC,EAAMxB,K,MAC7B,GAAIpB,KAAKmB,WAAa,KAAM,CAC1ByB,EAAKzB,SAAW,MAChBnB,KAAKoB,MAAQJ,UACbhB,KAAKsB,aAAe,MACpB,M,CAEFsB,EAAKzB,SAAWC,IAAUpB,KAAKoB,MAC/BwB,EAAKxB,MAAQA,EACbwB,EAAKZ,UAAUa,OAAO,QACtB,MAAKC,EAAA9C,KAAKM,UAAM,MAAAwC,SAAA,SAAAA,EAAEC,SAAStB,SAAUL,IAAUpB,KAAKwB,SAAW,EAAG,CAChEoB,EAAKZ,UAAUgB,IAAI,O,KAIvB,KAAIF,EAAA9C,KAAKM,UAAM,MAAAwC,SAAA,SAAAA,EAAEG,mBAAoB,EAAG,CACtCjD,KAAKI,aAAa8C,YAAYlD,KAAKM,O,EAMvC6C,mBACEnD,KAAKoD,SAAWC,GAAuB,KACrCrD,KAAKwB,SAAWxB,KAAKG,WAAWsB,MAAM,IAGxCzB,KAAKoD,SAASE,QAAQtD,KAAKI,aAAc,CACvCmD,UAAW,OAGbvD,KAAKI,aAAaoD,iBAChB,mBACCC,IACCzD,KAAKwC,YAAYiB,EAAIC,OAAOtC,MAAM,G,CAKxCuC,uBACE,GAAI3D,KAAKoD,SAAU,CACjBpD,KAAKoD,SAASQ,Y,EAIlBC,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,OACEE,MAAO,CACL,eAAgB,KAChBC,QAASjE,KAAKkB,UACdC,SAAUnB,KAAKmB,UAEjB+C,SAAS,KAETJ,EAAA,OACEE,MAAM,yBACNG,QAAUC,GAAMpE,KAAKsC,cAAc8B,IAEnCN,EAAA,OACEE,MAAO,CACL,mCAAoC,KACpC,iDACEhE,KAAKsB,gBAGXwC,EAAA,OAAKE,MAAM,qBACTF,EAAA,WACEE,MAAO,CACLK,OAAQrE,KAAKwB,WAAa,GAE5B8C,KAAM,WAAWtE,KAAKkB,UAAY,QAAU,eAC5CiD,QAAUC,GAAMpE,KAAKmC,cAAciC,MAIvCN,EAAA,OAAKE,MAAM,wBACRhE,KAAKe,OACJ+C,EAAA,OAAKE,MAAM,gCACTF,EAAA,OAAKE,MAAM,sBACTF,EAAA,QAAMS,MAAOvE,KAAKe,QAASf,KAAKe,SAElC+C,EAAA,OAAKE,MAAM,kBAAkBO,MAAOvE,KAAKiB,WACtCjB,KAAKiB,YAGR,KACJ6C,EAAA,QAAMQ,KAAK,aAGfR,EAAA,6BACEA,EAAA,QAAMQ,KAAK,eAGfR,EAAA,OACEE,MAAO,CACL,gBAAiB,KACjB,SAAUhE,KAAKkB,YAGjB4C,EAAA,cAEFA,EAAA,OAAKE,MAAM,UACTF,EAAA,iBACEE,MAAM,cACNQ,kBAAmB,KACnBC,UAAW,OAEXX,EAAA,QAAMQ,KAAK,a,8CCzRvB,MAAMI,EAAuB,iD,MCgBhBC,EAAiB,M,kEAW5Bd,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,oBAAkBc,MAAO5E,KAAK4E,MAAOC,KAAM7E,KAAK6E,MAC9Cf,EAAA,c,aC/BV,MAAMgB,EAAe,u0E,MCyBRC,EAAS,M,sKAqBQ,M,uCAWR,K,qBAapBC,cACE,GAAIhF,KAAKwE,kBAAmB,CAC1B,M,CAEFxE,KAAKiF,gBAAgB7C,KAAKpC,KAAKC,Y,CAGjC4D,SACE,OACEC,EAACC,EAAI,CACHC,MAAO,CACL7C,SAAUnB,KAAKmB,WAAanB,KAAKwE,kBACjC,qBAAsBxE,KAAKwE,mBAE7BN,SAAUlE,KAAKyE,UAAY,GAAK,GAEhCX,EAAA,OAAKE,MAAM,oCACVhE,KAAK6E,KAAOf,EAAA,WAASoB,KAAK,KAAKZ,KAAMtE,KAAK6E,OAAmB,KAC7D7E,KAAKmF,KACJrB,EAAA,QAAME,MAAM,oBACVF,EAAA,QAAMS,MAAOvE,KAAKmF,MAAOnF,KAAKmF,OAE9B,KACHnF,KAAKoF,cACJtB,EAAA,QAAME,MAAM,8BACVF,EAAA,QAAMS,MAAOvE,KAAKoF,eAAgBpF,KAAKoF,gBAEvC,KACJtB,EAAA,a"}

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

@@ -1,2 +0,0 @@
-import{r as e,h as t,H as i,g as s,c as n}from"./p-1c64b073.js";import{c as r}from"./p-c0454c9a.js";import{a as o}from"./p-21aa3602.js";const l=".sc-ix-event-list-h{display:block;position:relative}ul.sc-ix-event-list{list-style:none;padding:0;margin-bottom:0}.sc-ix-event-list-s>.sc-ix-event-list-h:not(.item-size-s) .ix-event-list-item,.sc-ix-event-list-h:not(.item-size-l) .ix-event-list-item.sc-ix-event-list{display:none}.sc-ix-event-list-h.chevron .sc-ix-event-list-s .ix-event-list-item .chevron-icon{display:initial}.item-size-l .sc-ix-event-list-s .ix-event-list-item{height:6.5rem;max-height:6.5rem}.item-size-l .sc-ix-event-list-s .ix-event-list-item .event-content{height:6.5rem;max-height:6.5rem;white-space:normal}.compact .sc-ix-event-list-s .ix-event-list-item{margin-bottom:0px;border-radius:0px}.compact .sc-ix-event-list-s .ix-event-list-item .indicator{border-top-left-radius:0px;border-bottom-left-radius:0px}.compact .sc-ix-event-list-s .ix-event-list-item .event-list-item-container{border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.compact.sc-ix-event-list .compact.sc-ix-event-list:not(:last-child) .event-list-item-container.sc-ix-event-list{border-bottom:none}";const d=class{constructor(t){e(this,t);this.mutationObserver=r(this.onMutation.bind(this));this.itemHeight="S";this.compact=false;this.animated=true;this.chevron=undefined}componentDidLoad(){if(this.animated){this.triggerFadeIn()}if(typeof this.itemHeight==="number"){const e=o(this.itemHeight);this.el.querySelectorAll(".ix-event-list-item").forEach((t=>{t.classList.add("d-flex");this.setCustomHeight(t,e)}))}this.mutationObserver.observe(this.el,{childList:true,subtree:true})}onMutation(e){this.triggerFadeOut().then((()=>{if(typeof this.itemHeight==="number"){const t=o(this.itemHeight);e.filter((e=>e.type==="childList")).forEach((e=>e.addedNodes.forEach((e=>{var i;const s=e;if(!((i=s.classList)===null||i===void 0?void 0:i.contains("ix-event-list-item"))){return}s.classList.add("d-flex");this.setCustomHeight(s,t)}))))}this.triggerFadeIn()}))}setCustomHeight(e,t){e.style.height=t;e.style.maxHeight=t}triggerFadeOut(){if(!this.animated){return Promise.resolve()}const e=[{opacity:1,easing:"ease-in"},{opacity:0}];const t=this.el.querySelector("ul");return t.animate(e,{duration:d.fadeOutDuration}).finished}triggerFadeIn(){if(!this.animated){return}const e=this.el.querySelectorAll(".ix-event-list-item");e.forEach(((e,t)=>{const i=t*80;const s=i/(i+d.fadeInDuration);const n=[{opacity:0},{opacity:0,easing:"ease-out",offset:s},{opacity:1}];const r={duration:d.fadeInDuration+i,iterations:1};e.animate(n,r)}))}render(){return t(i,{class:{"item-size-s":this.itemHeight==="S","item-size-l":this.itemHeight==="L",compact:this.compact,chevron:this.chevron}},t("ul",null,t("slot",null)))}get el(){return s(this)}};d.fadeOutDuration=50;d.fadeInDuration=150;d.style=l;const a=".ix-event-list-item{display:flex;align-items:center;position:relative;height:2.5rem;max-height:2.5rem;border-radius:0.25rem;background-color:var(--theme-event-item--background);overflow:hidden;transition:150ms;cursor:pointer;margin-bottom:0.5rem}.ix-event-list-item .indicator{height:100%;width:0.5rem;max-width:0.5rem;min-width:0.5rem;border-top-left-radius:0.25rem;border-bottom-left-radius:0.25rem}.ix-event-list-item .indicator-empty{border:var(--theme-weak-bdr-1);border-right:none}.ix-event-list-item .event-list-item-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-grow:1;width:calc(100% - (1rem + 0.5rem));height:100%;border:0.062rem solid;border-color:var(--theme-event-item--border);border-top-left-radius:0;border-top-right-radius:0.25rem;border-bottom-left-radius:0;border-bottom-right-radius:0.25rem;border-left:none;padding-left:1rem}.ix-event-list-item:not(.selected):not(.disabled):not(:disabled){cursor:pointer}.ix-event-list-item:not(.selected):not(.disabled):not(:disabled):hover{background-color:var(--theme-event-item--background--hover)}.ix-event-list-item:not(.selected):not(.disabled):not(:disabled){cursor:pointer}.ix-event-list-item:not(.selected):not(.disabled):not(:disabled):active{background-color:var(--theme-event-item--background--active)}.ix-event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled){cursor:pointer}.ix-event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled):hover{border-color:var(--theme-event-item--border--hover)}.ix-event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled){cursor:pointer}.ix-event-list-item:not(.selected) .event-list-item-container:not(.disabled):not(:disabled):active{border-color:var(--theme-event-item--border--active)}.ix-event-list-item.selected .event-list-item-container{background-color:var(--theme-event-item--background--selected);border-color:var(--theme-event-item--border--selected)}.ix-event-list-item[disabled],.ix-event-list-item.disabled{pointer-events:none}.ix-event-list-item[disabled] .event-list-item-container,.ix-event-list-item.disabled .event-list-item-container{background-color:var(--theme-event-item--background--disabled);border-color:var(--theme-event-item--border--disabled)}.ix-event-list-item .chevron-icon{margin-left:auto;margin-right:0.5rem;opacity:0.6;align-self:center}.ix-event-list-item .event-content{display:flex;align-items:center;width:100%;height:100%;overflow:hidden}";const c=class{constructor(t){e(this,t);this.itemClick=n(this,"itemClick",7);this.color=undefined;this.selected=undefined;this.disabled=undefined;this.chevron=undefined;this.opacity=1}handleItemClick(){this.itemClick.emit()}render(){return t("div",{class:{"ix-event-list-item":true,selected:this.selected,disabled:this.disabled}},t("div",{class:`indicator ${!this.color?"indicator-empty":""}`,style:{"background-color":this.color?`var(--theme-${this.color})`:"inherit",opacity:`${this.disabled?.4:this.opacity}`}}),t("div",{class:"event-list-item-container"},t("div",{class:"event-content"},t("slot",null)),this.chevron?t("i",{class:"glyph glyph-16 glyph-chevron-right chevron-icon"}):""))}get el(){return s(this)}};c.style=a;export{d as ix_event_list,c as ix_event_list_item};
-//# sourceMappingURL=p-feb8c2c4.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["eventListCss","EventList","this","mutationObserver","createMutationObserver","onMutation","bind","componentDidLoad","animated","triggerFadeIn","itemHeight","height","convertToRemString","el","querySelectorAll","forEach","item","classList","add","setCustomHeight","observe","childList","subtree","mutationRecords","triggerFadeOut","then","filter","mutation","type","addedNodes","itemHtml","_a","contains","style","maxHeight","Promise","resolve","keyframes","opacity","easing","listElement","querySelector","animate","duration","fadeOutDuration","finished","listItems","e","i","delay","offset","fadeInDuration","options","iterations","render","h","Host","class","compact","chevron","eventListItemCss","EventListItem","handleItemClick","itemClick","emit","selected","disabled","color"],"sources":["./src/components/event-list/event-list.scss?tag=ix-event-list&encapsulation=scoped","./src/components/event-list/event-list.tsx","./src/components/event-list-item/event-list-item.scss?tag=ix-event-list-item","./src/components/event-list-item/event-list-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n$item-height-l: 6.5rem;\n\n:host {\n  display: block;\n  position: relative;\n}\n\nul {\n  list-style: none;\n  padding: 0;\n  margin-bottom: 0;\n}\n\n:host:not(.item-size-s),\n:host:not(.item-size-l) {\n  ::slotted(& .ix-event-list-item) {\n    display: none;\n  }\n}\n\n:host.chevron ::slotted(* .ix-event-list-item) .chevron-icon {\n  display: initial;\n}\n\n.item-size-l {\n  ::slotted(* .ix-event-list-item) {\n    height: $item-height-l;\n    max-height: $item-height-l;\n\n    .event-content {\n      height: $item-height-l;\n      max-height: $item-height-l;\n      white-space: normal;\n    }\n  }\n}\n\n.compact {\n  ::slotted(* .ix-event-list-item) {\n    margin-bottom: 0px;\n    border-radius: 0px;\n\n    .indicator {\n      border-top-left-radius: 0px;\n      border-bottom-left-radius: 0px;\n    }\n\n    .event-list-item-container {\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n    }\n  }\n\n  .compact:not(:last-child) {\n    .event-list-item-container {\n      border-bottom: none;\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { convertToRemString } from '../utils/rwd.util';\n\n@Component({\n  tag: 'ix-event-list',\n  styleUrl: 'event-list.scss',\n  scoped: true,\n})\nexport class EventList {\n  private readonly mutationObserver = createMutationObserver(\n    this.onMutation.bind(this)\n  );\n\n  private static readonly fadeOutDuration = 50;\n  private static readonly fadeInDuration = 150;\n\n  @Element() el!: HTMLIxEventListElement;\n\n  /**\n   * Determines the height of list items.\n   * This can either be one of two predefined sizes ('S' or 'L') or an absolute pixel value.\n   * In case a number is supplied it will get converted to rem internally.\n   * Defaults to 'S'.\n   */\n  @Prop() itemHeight: 'S' | 'L' | number = 'S';\n\n  /**\n   * Make event-list items more compact\n   */\n  @Prop() compact = false;\n\n  /**\n   * Animate state change transitions. Defaults to 'true'.\n   */\n  @Prop() animated = true;\n\n  /**\n   * Display a chevron icon in list items. Defaults to 'false'\n   */\n  @Prop() chevron: boolean;\n\n  componentDidLoad() {\n    if (this.animated) {\n      this.triggerFadeIn();\n    }\n\n    if (typeof this.itemHeight === 'number') {\n      const height = convertToRemString(this.itemHeight);\n      this.el.querySelectorAll('.ix-event-list-item').forEach((item) => {\n        item.classList.add('d-flex');\n        this.setCustomHeight(item as HTMLElement, height);\n      });\n    }\n\n    this.mutationObserver.observe(this.el, { childList: true, subtree: true });\n  }\n\n  private onMutation(mutationRecords: Array<MutationRecord>) {\n    this.triggerFadeOut().then(() => {\n      if (typeof this.itemHeight === 'number') {\n        const height = convertToRemString(this.itemHeight);\n\n        mutationRecords\n          .filter((mutation) => mutation.type === 'childList')\n          .forEach((mutation) =>\n            mutation.addedNodes.forEach((item) => {\n              const itemHtml = item as HTMLElement;\n              if (!itemHtml.classList?.contains('ix-event-list-item')) {\n                return;\n              }\n\n              itemHtml.classList.add('d-flex');\n              this.setCustomHeight(itemHtml, height);\n            })\n          );\n      }\n\n      this.triggerFadeIn();\n    });\n  }\n\n  private setCustomHeight(item: HTMLElement, height: string) {\n    item.style.height = height;\n    item.style.maxHeight = height;\n  }\n\n  private triggerFadeOut(): Promise<any> {\n    if (!this.animated) {\n      return Promise.resolve();\n    }\n\n    const keyframes = [\n      {\n        opacity: 1,\n        easing: 'ease-in',\n      },\n      { opacity: 0 },\n    ];\n    const listElement = this.el.querySelector('ul');\n    return listElement.animate(keyframes, {\n      duration: EventList.fadeOutDuration,\n    }).finished;\n  }\n\n  private triggerFadeIn() {\n    if (!this.animated) {\n      return;\n    }\n\n    const listItems = this.el.querySelectorAll('.ix-event-list-item');\n    listItems.forEach((e, i) => {\n      const delay = i * 80;\n      const offset = delay / (delay + EventList.fadeInDuration);\n      const keyframes = [\n        { opacity: 0 },\n        { opacity: 0, easing: 'ease-out', offset },\n        { opacity: 1 },\n      ];\n      const options = {\n        duration: EventList.fadeInDuration + delay,\n        iterations: 1,\n      };\n      e.animate(keyframes, options);\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'item-size-s': this.itemHeight === 'S',\n          'item-size-l': this.itemHeight === 'L',\n          compact: this.compact,\n          chevron: this.chevron,\n        }}\n      >\n        <ul>\n          <slot></slot>\n        </ul>\n      </Host>\n    );\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'mixins/text-truncation';\n@import 'mixins/hover';\n@import 'common-variables';\n\n$height-single-line: 2.5rem;\n\n.ix-event-list-item {\n  display: flex;\n  align-items: center;\n  position: relative;\n  height: $height-single-line;\n  max-height: $height-single-line;\n  border-radius: $default-border-radius;\n  background-color: var(--theme-event-item--background);\n  overflow: hidden;\n  transition: $default-time;\n  cursor: pointer;\n\n  .indicator {\n    height: 100%;\n    width: $small-space;\n    max-width: $small-space;\n    min-width: $small-space;\n    border-top-left-radius: $default-border-radius;\n    border-bottom-left-radius: $default-border-radius;\n  }\n\n  .indicator-empty {\n    border: var(--theme-weak-bdr-1);\n    border-right: none;\n  }\n\n  .event-list-item-container {\n    @include ellipsis;\n\n    display: flex;\n    flex-grow: 1;\n    width: calc(100% - (#{$default-space} + #{$small-space}));\n    height: 100%;\n    border: 0.062rem solid;\n    border-color: var(--theme-event-item--border);\n    border-top-left-radius: 0;\n    border-top-right-radius: $default-border-radius;\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: $default-border-radius;\n    border-left: none;\n    padding-left: $default-space;\n  }\n\n  &:not(.selected) {\n    @include hover {\n      background-color: var(--theme-event-item--background--hover);\n    }\n\n    @include active {\n      background-color: var(--theme-event-item--background--active);\n    }\n\n    .event-list-item-container {\n      @include hover {\n        border-color: var(--theme-event-item--border--hover);\n      }\n\n      @include active {\n        border-color: var(--theme-event-item--border--active);\n      }\n    }\n  }\n\n  &.selected {\n    .event-list-item-container {\n      background-color: var(--theme-event-item--background--selected);\n      border-color: var(--theme-event-item--border--selected);\n    }\n  }\n\n  &[disabled],\n  &.disabled {\n    pointer-events: none;\n\n    .event-list-item-container {\n      background-color: var(--theme-event-item--background--disabled);\n      border-color: var(--theme-event-item--border--disabled);\n    }\n  }\n\n  .chevron-icon {\n    margin-left: auto;\n    margin-right: $small-space;\n    opacity: 0.6;\n    align-self: center;\n  }\n\n  .event-content {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n  }\n\n  margin-bottom: $small-space;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Listen,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-event-list-item',\n  styleUrl: 'event-list-item.scss',\n  scoped: false,\n})\nexport class EventListItem {\n  @Element() el!: HTMLIxEventListItemElement;\n\n  /**\n   * Color of the status indicator.\n   * Allowed values are all Core UI color names.\n   */\n  @Prop() color: string;\n\n  /**\n   * Show event list item as selected\n   */\n  @Prop() selected: boolean;\n\n  /**\n   * Disable event list item\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * Show chevron on right side of the event list item\n   */\n  @Prop() chevron: boolean;\n\n  /**\n   * Opacity of the status indicator.\n   * Defaults to 1.0\n   *\n   * @deprecated Will be removed in 2.0.0\n   */\n  @Prop() opacity = 1;\n\n  /**\n   * Event list item click\n   */\n  @Event() itemClick: EventEmitter;\n\n  @Listen('click', { passive: true })\n  handleItemClick() {\n    this.itemClick.emit();\n  }\n\n  render() {\n    return (\n      <div\n        class={{\n          'ix-event-list-item': true,\n          selected: this.selected,\n          disabled: this.disabled,\n        }}\n      >\n        <div\n          class={`indicator ${!this.color ? 'indicator-empty' : ''}`}\n          style={{\n            'background-color': this.color\n              ? `var(--theme-${this.color})`\n              : 'inherit',\n            opacity: `${this.disabled ? 0.4 : this.opacity}`,\n          }}\n        ></div>\n\n        <div class=\"event-list-item-container\">\n          <div class=\"event-content\">\n            <slot></slot>\n          </div>\n          {this.chevron ? (\n            <i class=\"glyph glyph-16 glyph-chevron-right chevron-icon\"></i>\n          ) : (\n            ''\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"wIAAA,MAAMA,EAAe,+kC,MCkBRC,EAAS,M,yBACHC,KAAAC,iBAAmBC,EAClCF,KAAKG,WAAWC,KAAKJ,O,gBAckB,I,aAKvB,M,cAKC,K,uBAOnBK,mBACE,GAAIL,KAAKM,SAAU,CACjBN,KAAKO,e,CAGP,UAAWP,KAAKQ,aAAe,SAAU,CACvC,MAAMC,EAASC,EAAmBV,KAAKQ,YACvCR,KAAKW,GAAGC,iBAAiB,uBAAuBC,SAASC,IACvDA,EAAKC,UAAUC,IAAI,UACnBhB,KAAKiB,gBAAgBH,EAAqBL,EAAO,G,CAIrDT,KAAKC,iBAAiBiB,QAAQlB,KAAKW,GAAI,CAAEQ,UAAW,KAAMC,QAAS,M,CAG7DjB,WAAWkB,GACjBrB,KAAKsB,iBAAiBC,MAAK,KACzB,UAAWvB,KAAKQ,aAAe,SAAU,CACvC,MAAMC,EAASC,EAAmBV,KAAKQ,YAEvCa,EACGG,QAAQC,GAAaA,EAASC,OAAS,cACvCb,SAASY,GACRA,EAASE,WAAWd,SAASC,I,MAC3B,MAAMc,EAAWd,EACjB,MAAKe,EAAAD,EAASb,aAAS,MAAAc,SAAA,SAAAA,EAAEC,SAAS,uBAAuB,CACvD,M,CAGFF,EAASb,UAAUC,IAAI,UACvBhB,KAAKiB,gBAAgBW,EAAUnB,EAAO,K,CAK9CT,KAAKO,eAAe,G,CAIhBU,gBAAgBH,EAAmBL,GACzCK,EAAKiB,MAAMtB,OAASA,EACpBK,EAAKiB,MAAMC,UAAYvB,C,CAGjBa,iBACN,IAAKtB,KAAKM,SAAU,CAClB,OAAO2B,QAAQC,S,CAGjB,MAAMC,EAAY,CAChB,CACEC,QAAS,EACTC,OAAQ,WAEV,CAAED,QAAS,IAEb,MAAME,EAActC,KAAKW,GAAG4B,cAAc,MAC1C,OAAOD,EAAYE,QAAQL,EAAW,CACpCM,SAAU1C,EAAU2C,kBACnBC,Q,CAGGpC,gBACN,IAAKP,KAAKM,SAAU,CAClB,M,CAGF,MAAMsC,EAAY5C,KAAKW,GAAGC,iBAAiB,uBAC3CgC,EAAU/B,SAAQ,CAACgC,EAAGC,KACpB,MAAMC,EAAQD,EAAI,GAClB,MAAME,EAASD,GAASA,EAAQhD,EAAUkD,gBAC1C,MAAMd,EAAY,CAChB,CAAEC,QAAS,GACX,CAAEA,QAAS,EAAGC,OAAQ,WAAYW,UAClC,CAAEZ,QAAS,IAEb,MAAMc,EAAU,CACdT,SAAU1C,EAAUkD,eAAiBF,EACrCI,WAAY,GAEdN,EAAEL,QAAQL,EAAWe,EAAQ,G,CAIjCE,SACE,OACEC,EAACC,EAAI,CACHC,MAAO,CACL,cAAevD,KAAKQ,aAAe,IACnC,cAAeR,KAAKQ,aAAe,IACnCgD,QAASxD,KAAKwD,QACdC,QAASzD,KAAKyD,UAGhBJ,EAAA,UACEA,EAAA,c,2BA5HgBtD,EAAA2C,gBAAkB,GAClB3C,EAAAkD,eAAiB,I,UCxB3C,MAAMS,EAAmB,w9E,MCwBZC,EAAa,M,uKA8BN,C,CAQlBC,kBACE5D,KAAK6D,UAAUC,M,CAGjBV,SACE,OACEC,EAAA,OACEE,MAAO,CACL,qBAAsB,KACtBQ,SAAU/D,KAAK+D,SACfC,SAAUhE,KAAKgE,WAGjBX,EAAA,OACEE,MAAO,cAAcvD,KAAKiE,MAAQ,kBAAoB,KACtDlC,MAAO,CACL,mBAAoB/B,KAAKiE,MACrB,eAAejE,KAAKiE,SACpB,UACJ7B,QAAS,GAAGpC,KAAKgE,SAAW,GAAMhE,KAAKoC,aAI3CiB,EAAA,OAAKE,MAAM,6BACTF,EAAA,OAAKE,MAAM,iBACTF,EAAA,cAEDrD,KAAKyD,QACJJ,EAAA,KAAGE,MAAM,oDAAsD,I"}

package/dist/types/components/counter-pill/counter-pill.d.ts

@@ -1,24 +0,0 @@
-export declare class CounterPill {
-  el: HTMLIxCounterPillElement;
-  /**
-   * Pill variant
-   */
-  variant: 'primary' | 'alarm' | 'critical' | 'warning' | 'info' | 'neutral' | 'success' | 'custom';
-  /**
-   * Show pill as outline
-   */
-  outline: boolean;
-  /**
-   * Custom color for pill. Only working for `variant='custom'`
-   */
-  background: string | undefined;
-  /**
-   * Custom font color for pill. Only working for `variant='custom'`
-   */
-  color: string | undefined;
-  /**
-   * Align pill content left
-   */
-  alignLeft: boolean;
-  render(): any;
-}

package/dist/types/components/dropdown/alignment.d.ts

@@ -1,2 +0,0 @@
-import { Placement } from './placement';
-export declare function getAlignment(placement: Placement): "start" | "end";

package/dist/types/components/group-dropdown-item/group-dropdown-item.d.ts

@@ -1,11 +0,0 @@
-export declare class GroupDropdownItem {
-  /**
-   * Group dropdown label
-   */
-  label: string;
-  /**
-   * Group dropdown icon
-   */
-  icon: string;
-  render(): any;
-}

package/dist/types/components/modal/modal-utils.d.ts

@@ -1,29 +0,0 @@
-import { NotificationColor } from '../utils/notification-color';
-import { TypedEvent } from '../utils/typed-event';
-export interface ModalConfig<TReason = any> {
-  animation?: boolean;
-  ariaDescribedBy?: string;
-  ariaLabelledBy?: string;
-  backdrop?: boolean | 'static';
-  backdropClass?: string;
-  beforeDismiss?: (reason?: TReason) => boolean | Promise<boolean>;
-  centered?: boolean;
-  container?: string | HTMLElement;
-  content: string | HTMLElement;
-  keyboard?: boolean;
-  modalDialogClass?: string;
-  scrollable?: boolean;
-  size?: 'sm' | 'lg' | 'xl';
-  title: string;
-  windowClass?: string;
-  icon?: string;
-  iconColor?: NotificationColor;
-}
-export interface ModalInstance<TReason = any> {
-  htmlElement: HTMLIxModalElement;
-  onClose: TypedEvent<TReason>;
-  onDismiss: TypedEvent<TReason>;
-}
-export declare function modal<T = any>(config: ModalConfig<T>): Promise<ModalInstance<T>>;
-export declare function closeModal<TClose = any>(element: Element, closeResult: TClose): void;
-export declare function dismissModal(element: Element, dismissResult?: any): void;

package/dist/types/components/modal-container/modal-container.d.ts

@@ -1,12 +0,0 @@
-import { ModalConfig, ModalInstance } from '../modal/modal-utils';
-export declare class ModalContainer {
-  hostElement: HTMLIxModalContainerElement;
-  get modalStack(): Element;
-  /**
-   * Display modal dialog
-   *
-   * @param config
-   */
-  showModal<T = any>(config: ModalConfig<T>): Promise<ModalInstance<T>>;
-  render(): any;
-}