@siemens/ix 1.4.0 → 1.5.0-beta.0

package/dist/siemens-ix/p-9f55716d.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 .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 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.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"}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)}watchInputText(e){if(!this.editable){return}if(this.itemExists(e)){return}}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;if(e.detail){this.inputRef.focus();this.inputRef.select();this.navigationItem=this.items[0];this.setHoverEffectForNavigatedSelectItem();this.removeHiddenFromItems()}this.hasFocus=e.detail}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.filter((e=>!e.classList.contains("d-none")));const i=t.indexOf(this.navigationItem);if(e.code==="ArrowDown"&&i<t.length-1){this.navigationItem=t[i+1]}else if(e.code==="ArrowUp"&&i>0){this.navigationItem=t[i-1]}this.setHoverEffectForNavigatedSelectItem()}setHoverEffectForNavigatedSelectItem(){this.items.forEach((e=>{e.hover=e===this.navigationItem}))}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.items.every((e=>e.classList.contains("d-none")))}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}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,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.editable?this.i18nPlaceholderEditable:this.i18nPlaceholder,value:this.inputValue,ref:e=>this.inputRef=e,onInput:()=>this.filterItemsWithTypeahead()}),this.isMultipleMode&&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:"24",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||this.isDropdownEmpty&&!this.editable},anchor:this.dropdownAnchor,trigger:this.dropdownWrapperRef,onShowChanged:e=>this.dropdownVisibilityChanged(e),placement:"auto-start",overwriteDropdownStyle:async e=>({width:`${e.triggerRef.clientWidth}px`})},i("div",{class:"select-list-header",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)}})))}get hostElement(){return n(this)}static get watchers(){return{selectedIndices:["watchSelectedIndices"],inputFilterText:["watchInputText"]}}};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}.sc-ix-select-item-h ix-dropdown-item.sc-ix-select-item button.sc-ix-select-item{margin-left:1rem}";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,hover:this.hover,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-9f55716d.entry.js.map

package/dist/siemens-ix/p-9f55716d.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","watchSelectedIndices","newId","selectValue","isArray","onItemClicked","event","detail","emitItemClick","watchInputText","newValue","editable","itemExists","selectedIndices","includes","i","itemSelectionChange","emit","emitAddItem","value","trim","test","document","createElement","label","addItemRef","appendChild","clearInput","addItem","ids","forEach","some","map","inputValue","_a","length","componentWillLoad","onLabelChange","preventDefault","stopImmediatePropagation","disconnectedCallback","labelMutationObserver","disconnect","find","dropdownVisibilityChanged","dropdownShow","inputRef","focus","select","navigationItem","setHoverEffectForNavigatedSelectItem","removeHiddenFromItems","hasFocus","async","code","onArrowNavigation","onEnterNavigation","inputFilterText","onItemClick","_b","dropdownRef","updatePosition","stopPropagation","selectItems","classList","contains","index","indexOf","hover","filterItemsWithTypeahead","remove","toLowerCase","add","isDropdownEmpty","every","clear","render","h","Host","class","disabled","readonly","ref","dropdownAnchor","dropdownWrapperRef","onCloseClick","e","readOnly","type","allowClear","placeholder","i18nPlaceholderEditable","i18nPlaceholder","onInput","_c","icon","ghost","oval","size","onClick","name","show","anchor","trigger","onShowChanged","placement","overwriteDropdownStyle","delegateConfig","width","triggerRef","clientWidth","title","i18nSelectListHeader","IxSelectItemLabelChangeEvent","CustomEvent","constructor","super","bubbles","selectItemCss","SelectItem","itemClick","componentDidRender","Error","labelChange","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  .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 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   */\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   * 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  @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  @Watch('inputFilterText')\n  watchInputText(newValue: string) {\n    if (!this.editable) {\n      return;\n    }\n\n    if (this.itemExists(newValue)) {\n      return;\n    }\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 test = document.createElement('ix-select-item');\n    test.value = value;\n    test.label = value;\n\n    this.addItemRef.appendChild(test);\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\n    if (event.detail) {\n      this.inputRef.focus();\n      this.inputRef.select();\n\n      this.navigationItem = this.items[0];\n      this.setHoverEffectForNavigatedSelectItem();\n      this.removeHiddenFromItems();\n    }\n    this.hasFocus = event.detail;\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 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.items.forEach((item: HTMLIxSelectItemElement) => {\n      item.hover = item === this.navigationItem;\n    });\n  }\n\n  private filterItemsWithTypeahead() {\n    this.inputFilterText = this.inputRef.value;\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    this.isDropdownEmpty = this.items.every((item) =>\n      item.classList.contains('d-none')\n    );\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  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                      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={\n                    this.editable\n                      ? this.i18nPlaceholderEditable\n                      : this.i18nPlaceholder\n                  }\n                  value={this.inputValue}\n                  ref={(ref) => (this.inputRef = ref)}\n                  onInput={() => this.filterItemsWithTypeahead()}\n                />\n                {this.isMultipleMode &&\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=\"24\"\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':\n              this.disabled ||\n              this.readonly ||\n              (this.isDropdownEmpty && !this.editable),\n          }}\n          anchor={this.dropdownAnchor}\n          trigger={this.dropdownWrapperRef}\n          onShowChanged={(e) => this.dropdownVisibilityChanged(e)}\n          placement=\"auto-start\"\n          overwriteDropdownStyle={async (delegateConfig) => {\n            return {\n              width: `${delegateConfig.triggerRef.clientWidth}px`,\n            };\n          }}\n        >\n          <div class=\"select-list-header\" title={this.i18nSelectListHeader}>\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        </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  ix-dropdown-item {\n    button {\n      margin-left: 1rem;\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  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          hover={this.hover}\n          label={this.label ? this.label : this.value}\n          onItemClick={(e) => this.onItemClick(e)}\n        ></ix-dropdown-item>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import{r as e,h as t,H as r}from"./p-8fcd6f85.js";const s=":host{display:flex;justify-content:center;align-items:center;height:2rem;width:2.5rem;border-radius:var(--theme-btn--border-radius)}:host svg{display:inline-block;position:relative}:host .line{fill:var(--theme-menu-btn--color);opacity:1;x:2px;transition:x 0.075s ease-in 0.15s, transform 0.075s ease-in-out 0.075s, y 0.075s ease-in-out, opacity 0.075s linear 0.075s;transform-origin:center}:host(:hover){background-color:var(--theme-menu-btn--background--hover);border-radius:var(--theme-btn--border-radius)}:host(:active){background-color:var(--theme-menu-btn--background--active);border-radius:var(--theme-btn--border-radius)}:host(.expanded) svg .line-1{opacity:1;transform:rotate(-45deg);y:11px}:host(.expanded) svg .line-2{opacity:0;x:9}:host(.expanded) svg .line-3{opacity:1;transform:rotate(45deg);y:11px}";const i=class{constructor(t){e(this,t);this.expanded=false}render(){return t(r,{class:{expanded:this.expanded}},t("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",width:"24",height:"24"},t("rect",{class:"line line-1",x:"2",y:"5",width:"20",height:"2"}),t("rect",{class:"line line-2",x:"2",y:"11",width:"13",height:"2"}),t("rect",{class:"line line-3",x:"2",y:"17",width:"20",height:"2"})))}};i.style=s;export{i as ix_burger_menu};
+//# sourceMappingURL=p-a30c7b5a.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["burgerMenuCss","BurgerMenu","render","h","Host","class","expanded","this","xmlns","viewBox","width","height","x","y"],"sources":["./src/components/menu/burger-menu.scss?tag=ix-burger-menu&encapsulation=shadow","./src/components/menu/burger-menu.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'common-variables';\n@import 'mixins/hover';\n\n:host {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 2rem;\n  width: 2.5rem;\n  border-radius: var(--theme-btn--border-radius);\n\n  svg {\n    display: inline-block;\n    position: relative;\n  }\n\n  .line {\n    fill: var(--theme-menu-btn--color);\n    opacity: 1;\n    x: 2px;\n    transition: x 0.075s ease-in 0.15s, transform 0.075s ease-in-out 0.075s,\n      y 0.075s ease-in-out, opacity 0.075s linear 0.075s;\n    transform-origin: center;\n  }\n}\n\n:host(:hover) {\n  background-color: var(--theme-menu-btn--background--hover);\n  border-radius: var(--theme-btn--border-radius);\n}\n\n:host(:active) {\n  background-color: var(--theme-menu-btn--background--active);\n  border-radius: var(--theme-btn--border-radius);\n}\n\n:host(.expanded) {\n  svg .line-1 {\n    opacity: 1;\n    transform: rotate(-45deg);\n    y: 11px;\n  }\n\n  svg .line-2 {\n    opacity: 0;\n    x: 9;\n  }\n\n  svg .line-3 {\n    opacity: 1;\n    transform: rotate(45deg);\n    y: 11px;\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 * 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/**\n * @internal\n */\n@Component({\n  tag: 'ix-burger-menu',\n  styleUrl: './burger-menu.scss',\n  shadow: true,\n})\nexport class BurgerMenu {\n  /**\n   * Is menu displayed as expanded\n   */\n  @Prop({ reflect: true }) expanded = false;\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.expanded,\n        }}\n      >\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 24 24\"\n          width=\"24\"\n          height=\"24\"\n        >\n          <rect class=\"line line-1\" x=\"2\" y=\"5\" width=\"20\" height=\"2\"></rect>\n          <rect class=\"line line-2\" x=\"2\" y=\"11\" width=\"13\" height=\"2\"></rect>\n          <rect class=\"line line-3\" x=\"2\" y=\"17\" width=\"20\" height=\"2\"></rect>\n        </svg>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAgB,+yB,MC2BTC,EAAU,M,uCAIe,K,CAEpCC,SACE,OACEC,EAACC,EAAI,CACHC,MAAO,CACLC,SAAUC,KAAKD,WAGjBH,EAAA,OACEK,MAAM,6BACNC,QAAQ,YACRC,MAAM,KACNC,OAAO,MAEPR,EAAA,QAAME,MAAM,cAAcO,EAAE,IAAIC,EAAE,IAAIH,MAAM,KAAKC,OAAO,MACxDR,EAAA,QAAME,MAAM,cAAcO,EAAE,IAAIC,EAAE,KAAKH,MAAM,KAAKC,OAAO,MACzDR,EAAA,QAAME,MAAM,cAAcO,EAAE,IAAIC,EAAE,KAAKH,MAAM,KAAKC,OAAO,O"}

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

@@ -0,0 +1,2 @@
+import{r as i,c as t,h as s,H as e}from"./p-8fcd6f85.js";const h=".sc-ix-datetime-picker-h{display:block;background-color:var(--theme-menu--background);border-radius:4px}.flex.sc-ix-datetime-picker{display:flex;justify-content:center}.done.sc-ix-datetime-picker{display:inline-flex;justify-content:flex-end;padding:1rem;width:100%}.separator.sc-ix-datetime-picker{border:1px solid var(--theme-datepicker-separator--background);width:100%;margin-top:72px;height:1px}";const n=class{constructor(s){i(this,s);this.done=t(this,"done",7);this.timeChange=t(this,"timeChange",7);this.dateChange=t(this,"dateChange",7);this.dateSelect=t(this,"dateSelect",7);this.range=true;this.showHour=false;this.showMinutes=false;this.showSeconds=false;this.minDate=undefined;this.maxDate=undefined;this.dateFormat="yyyy/LL/dd";this.timeFormat="TT";this.from=undefined;this.to=null;this.time=undefined;this.showTimeReference=undefined;this.eventDelimiter=" - ";this.timeReference=undefined;this.textSelectDate="Done"}onDone(){var i;this.done.emit([this._from,(i=this._to)!==null&&i!==void 0?i:"",this._time].join(this.eventDelimiter));this.dateSelect.emit({from:this._from,to:this._to,time:this._time})}async onDateChange(i){i.preventDefault();i.stopPropagation();const{detail:t}=i;this.dateChange.emit(t);const s=await this.datePickerElement.getCurrentDate();this._from=s.start;this._to=s.end}async onTimeChange(i){i.preventDefault();i.stopPropagation();const{detail:t}=i;this.timeChange.emit(t);const s=await this.timePickerElement.getCurrentTime();this._time=s}componentDidLoad(){this._from=this.from;this._to=this.to;this._time=this.time}render(){return s(e,null,s("div",{class:"flex"},s("div",{class:"separator"}),s("ix-date-picker",{ref:i=>this.datePickerElement=i,corners:"left",individual:false,range:this.range,onDateChange:i=>this.onDateChange(i),from:this.from,to:this.to,format:this.dateFormat,minDate:this.minDate,maxDate:this.maxDate,eventDelimiter:this.eventDelimiter}),s("ix-time-picker",{ref:i=>this.timePickerElement=i,corners:"right",individual:false,showHour:this.showHour,showMinutes:this.showMinutes,showSeconds:this.showSeconds,showTimeReference:this.showTimeReference,onTimeChange:i=>this.onTimeChange(i),time:this.time,format:this.timeFormat,timeReference:this.timeReference}),s("div",{class:"separator"})),s("div",{class:"done"},s("ix-button",{onClick:()=>this.onDone()},this.textSelectDate)))}};n.style=h;export{n as ix_datetime_picker};
+//# sourceMappingURL=p-a4178e26.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["datetimePickerCss","DateTimePicker","undefined","onDone","this","done","emit","_from","_a","_to","_time","join","eventDelimiter","dateSelect","from","to","time","async","event","preventDefault","stopPropagation","detail","date","dateChange","currentDateTime","datePickerElement","getCurrentDate","start","end","timeChange","timePickerElement","getCurrentTime","componentDidLoad","render","h","Host","class","ref","corners","individual","range","onDateChange","format","dateFormat","minDate","maxDate","showHour","showMinutes","showSeconds","showTimeReference","onTimeChange","timeFormat","timeReference","onClick","textSelectDate"],"sources":["./src/components/datetime-picker/datetime-picker.scss?tag=ix-datetime-picker&encapsulation=scoped","./src/components/datetime-picker/datetime-picker.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n\n:host {\n  display: block;\n  background-color: var(--theme-menu--background);\n  border-radius: 4px;\n}\n\n.flex {\n  display: flex;\n  justify-content: center;\n}\n\n.done {\n  display: inline-flex;\n  justify-content: flex-end;\n  padding: $default-space;\n  width: 100%;\n}\n\n.separator {\n  border: 1px solid var(--theme-datepicker-separator--background);\n  width: 100%;\n  margin-top: 72px;\n  height: 1px;\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, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { DateChangeEvent } from 'src/components';\n\nexport type DateTimeSelectEvent = {\n  from: string;\n  to: string;\n  time: string;\n};\n\nexport type DateTimeDateChangeEvent =\n  | string\n  | Omit<DateTimeSelectEvent, 'time'>;\n\n@Component({\n  tag: 'ix-datetime-picker',\n  styleUrl: 'datetime-picker.scss',\n  scoped: true,\n})\nexport class DateTimePicker {\n  /**\n   * Set range size\n   */\n  @Prop() range = true;\n\n  /**\n   * Show hour input\n   */\n  @Prop() showHour = false;\n\n  /**\n   * Show minutes input\n   */\n  @Prop() showMinutes = false;\n\n  /**\n   * Show seconds input\n   */\n  @Prop() showSeconds = false;\n\n  /**\n   * The earliest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   *\n   * @since 1.1.0\n   */\n  @Prop() minDate: string;\n\n  /**\n   * The latest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   *\n   * @since 1.1.0\n   */\n  @Prop() maxDate: string;\n\n  /**\n   * Date format string.\n   * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.\n   *\n   * @since 1.1.0\n   */\n  @Prop() dateFormat: string = 'yyyy/LL/dd';\n\n  /**\n   * Time format string.\n   * See @link https://moment.github.io/luxon/#/formatting?id=table-of-tokens for all available tokens.\n   *\n   * @since 1.1.0\n   */\n  @Prop() timeFormat: string = 'TT';\n\n  /**\n   * Picker date. If the picker is in range mode this property is the start date.\n   *\n   * Format is based on `format`\n   *\n   * @since 1.1.0\n   */\n  @Prop() from: string;\n\n  /**\n   * Picker date. If the picker is in range mode this property is the end date.\n   * If the picker is not in range mode leave this value `null`\n   *\n   * Format is based on `format`\n   *\n   * @since 1.1.0\n   */\n  @Prop() to: string | null = null;\n\n  /**\n   * Select time with format string\n   *\n   * @since 1.1.0\n   */\n  @Prop() time: string;\n\n  /**\n   * Show time reference input\n   * Time reference is default aligned with @see {this.timeFormat}\n   *\n   * @since 1.1.0\n   */\n  @Prop() showTimeReference = undefined;\n\n  /**\n   * Default behavior of the done event is to join the two events (date and time) into one combined string output.\n   * This combination can be configured over the delimiter\n   *\n   * @since 1.1.0\n   */\n  @Prop() eventDelimiter = ' - ';\n\n  /**\n   * Set time reference\n   */\n  @Prop() timeReference: 'AM' | 'PM';\n\n  /**\n   * Text of date select button\n   *\n   * @since 1.1.0\n   */\n  @Prop() textSelectDate = 'Done';\n\n  /**\n   * Done event\n   *\n   * Set `doneEventDelimiter` to null or undefine to get the typed event\n   */\n  @Event() done: EventEmitter<string>;\n\n  /**\n   * Time change\n   *\n   * @since 1.1.0\n   */\n  @Event() timeChange: EventEmitter<string>;\n\n  /**\n   * Date change\n   *\n   * @since 1.1.0\n   */\n  @Event() dateChange: EventEmitter<DateTimeDateChangeEvent>;\n\n  /**\n   * Date selection event is fired after confirm button is pressend\n   *\n   * @since 1.1.0\n   */\n  @Event() dateSelect: EventEmitter<DateTimeSelectEvent>;\n\n  private datePickerElement: HTMLIxDatePickerElement;\n  private timePickerElement: HTMLIxTimePickerElement;\n\n  private _from: string;\n  private _to: string;\n  private _time: string;\n\n  private onDone() {\n    this.done.emit(\n      [this._from, this._to ?? '', this._time].join(this.eventDelimiter)\n    );\n\n    this.dateSelect.emit({\n      from: this._from,\n      to: this._to,\n      time: this._time,\n    });\n  }\n\n  private async onDateChange(event: CustomEvent<string | DateChangeEvent>) {\n    event.preventDefault();\n    event.stopPropagation();\n    const { detail: date } = event;\n    this.dateChange.emit(date);\n\n    const currentDateTime = await this.datePickerElement.getCurrentDate();\n    this._from = currentDateTime.start;\n    this._to = currentDateTime.end;\n  }\n\n  private async onTimeChange(event: CustomEvent<string>) {\n    event.preventDefault();\n    event.stopPropagation();\n    const { detail: time } = event;\n    this.timeChange.emit(time);\n\n    const currentDateTime = await this.timePickerElement.getCurrentTime();\n    this._time = currentDateTime;\n  }\n\n  componentDidLoad() {\n    this._from = this.from;\n    this._to = this.to;\n    this._time = this.time;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"flex\">\n          <div class=\"separator\"></div>\n          <ix-date-picker\n            ref={(ref) => (this.datePickerElement = ref)}\n            corners=\"left\"\n            individual={false}\n            range={this.range}\n            onDateChange={(event) => this.onDateChange(event)}\n            from={this.from}\n            to={this.to}\n            format={this.dateFormat}\n            minDate={this.minDate}\n            maxDate={this.maxDate}\n            eventDelimiter={this.eventDelimiter}\n          ></ix-date-picker>\n\n          <ix-time-picker\n            ref={(ref) => (this.timePickerElement = ref)}\n            corners=\"right\"\n            individual={false}\n            showHour={this.showHour}\n            showMinutes={this.showMinutes}\n            showSeconds={this.showSeconds}\n            showTimeReference={this.showTimeReference}\n            onTimeChange={(event) => this.onTimeChange(event)}\n            time={this.time}\n            format={this.timeFormat}\n            timeReference={this.timeReference}\n          ></ix-time-picker>\n          <div class=\"separator\"></div>\n        </div>\n\n        <div class=\"done\">\n          <ix-button onClick={() => this.onDone()}>\n            {this.textSelectDate}\n          </ix-button>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAoB,kZ,MC2BbC,EAAc,M,oLAIT,K,cAKG,M,iBAKG,M,iBAKA,M,8DAwBO,a,gBAQA,K,4BAmBD,K,2CAeAC,U,oBAQH,M,iDAYA,M,CAqCjBC,S,MACNC,KAAKC,KAAKC,KACR,CAACF,KAAKG,OAAOC,EAAAJ,KAAKK,OAAG,MAAAD,SAAA,EAAAA,EAAI,GAAIJ,KAAKM,OAAOC,KAAKP,KAAKQ,iBAGrDR,KAAKS,WAAWP,KAAK,CACnBQ,KAAMV,KAAKG,MACXQ,GAAIX,KAAKK,IACTO,KAAMZ,KAAKM,O,CAIPO,mBAAmBC,GACzBA,EAAMC,iBACND,EAAME,kBACN,MAAQC,OAAQC,GAASJ,EACzBd,KAAKmB,WAAWjB,KAAKgB,GAErB,MAAME,QAAwBpB,KAAKqB,kBAAkBC,iBACrDtB,KAAKG,MAAQiB,EAAgBG,MAC7BvB,KAAKK,IAAMe,EAAgBI,G,CAGrBX,mBAAmBC,GACzBA,EAAMC,iBACND,EAAME,kBACN,MAAQC,OAAQL,GAASE,EACzBd,KAAKyB,WAAWvB,KAAKU,GAErB,MAAMQ,QAAwBpB,KAAK0B,kBAAkBC,iBACrD3B,KAAKM,MAAQc,C,CAGfQ,mBACE5B,KAAKG,MAAQH,KAAKU,KAClBV,KAAKK,IAAML,KAAKW,GAChBX,KAAKM,MAAQN,KAAKY,I,CAGpBiB,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAM,QACTF,EAAA,OAAKE,MAAM,cACXF,EAAA,kBACEG,IAAMA,GAASjC,KAAKqB,kBAAoBY,EACxCC,QAAQ,OACRC,WAAY,MACZC,MAAOpC,KAAKoC,MACZC,aAAevB,GAAUd,KAAKqC,aAAavB,GAC3CJ,KAAMV,KAAKU,KACXC,GAAIX,KAAKW,GACT2B,OAAQtC,KAAKuC,WACbC,QAASxC,KAAKwC,QACdC,QAASzC,KAAKyC,QACdjC,eAAgBR,KAAKQ,iBAGvBsB,EAAA,kBACEG,IAAMA,GAASjC,KAAK0B,kBAAoBO,EACxCC,QAAQ,QACRC,WAAY,MACZO,SAAU1C,KAAK0C,SACfC,YAAa3C,KAAK2C,YAClBC,YAAa5C,KAAK4C,YAClBC,kBAAmB7C,KAAK6C,kBACxBC,aAAehC,GAAUd,KAAK8C,aAAahC,GAC3CF,KAAMZ,KAAKY,KACX0B,OAAQtC,KAAK+C,WACbC,cAAehD,KAAKgD,gBAEtBlB,EAAA,OAAKE,MAAM,eAGbF,EAAA,OAAKE,MAAM,QACTF,EAAA,aAAWmB,QAAS,IAAMjD,KAAKD,UAC5BC,KAAKkD,iB"}

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

@@ -0,0 +1,2 @@
+import{r as t,c as i,h as s,H as e,g as h}from"./p-8fcd6f85.js";import{g as n}from"./p-5b39e04e.js";const o=".sc-ix-split-button-h{display:inline-block}.sc-ix-split-button-h .btn-group.sc-ix-split-button{width:100%}.sc-ix-split-button-h .btn-group.sc-ix-split-button>button.sc-ix-split-button:nth-child(1){width:calc(100% - 2rem)}.sc-ix-split-button-h .btn-group.sc-ix-split-button>button.sc-ix-split-button:nth-child(2){width:2rem}.sc-ix-split-button-h .middle-gap.sc-ix-split-button{gap:0.125rem}.sc-ix-split-button-h .left-button-border.sc-ix-split-button{border-top-width:0.125rem;border-right-width:0;border-left-width:0.125rem;border-bottom-width:0.125rem}";const r=class{constructor(s){t(this,s);this.buttonClick=i(this,"buttonClick",7);this.variant="Primary";this.outline=false;this.invisible=false;this.ghost=false;this.label=undefined;this.icon="";this.splitIcon="context-menu";this.disabled=false;this.placement="bottom-start";this.toggle=false}get splitItems(){return Array.from(this.hostElement.querySelectorAll("ix-split-button-item"))}linkTriggerRef(){if(this.triggerElement&&this.dropdownElement){this.dropdownElement.trigger=this.triggerElement}}componentDidLoad(){this.linkTriggerRef()}render(){return s(e,null,s("div",{class:{"btn-group":true,"middle-gap":!this.outline}},s("button",{class:Object.assign(Object.assign({},n(this.variant,this.outline,this.ghost||this.invisible,!this.label,false,false,this.disabled)),{"left-button-border":!this.outline}),onClick:t=>this.buttonClick.emit(t)},this.icon?s("ix-icon",{name:this.icon}):null," ",this.label),s("button",{ref:t=>this.triggerElement=t,class:Object.assign(Object.assign({},n(this.variant,this.outline,this.ghost||this.invisible,true,false,false,this.disabled)),{anchor:true})},s("ix-icon",{name:this.splitIcon}))),s("ix-dropdown",{ref:t=>this.dropdownElement=t},s("slot",null)))}get hostElement(){return h(this)}};r.style=o;const l=".sc-ix-split-button-item-h{display:block}";const c=class{constructor(s){t(this,s);this.itemClick=i(this,"itemClick",7);this.icon=undefined;this.label=undefined}render(){return s("ix-dropdown-item",{icon:this.icon,label:this.label,onClick:t=>this.itemClick.emit(t)})}get hostElement(){return h(this)}};c.style=l;export{r as ix_split_button,c as ix_split_button_item};
+//# sourceMappingURL=p-a4a16daa.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["splitButtonCss","SplitButton","splitItems","Array","from","this","hostElement","querySelectorAll","linkTriggerRef","triggerElement","dropdownElement","trigger","componentDidLoad","render","h","Host","class","outline","Object","assign","getButtonClasses","variant","ghost","invisible","label","disabled","onClick","e","buttonClick","emit","icon","name","ref","r","anchor","splitIcon","splitButtonItemCss","SplitButtonItem","itemClick"],"sources":["./src/components/split-button/split-button.scss?tag=ix-split-button&encapsulation=scoped","./src/components/split-button/split-button.tsx","./src/components/split-button-item/split-button-item.css?tag=ix-split-button-item&encapsulation=scoped","./src/components/split-button-item/split-button-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:host {\n  display: inline-block;\n\n  .btn-group {\n    // Overwrite styling from bootstrap button group\n    width: 100%;\n\n    > button:nth-child(1) {\n      width: calc(100% - 2rem);\n    }\n\n    > button:nth-child(2) {\n      width: 2rem;\n    }\n  }\n\n  .middle-gap {\n    gap: 0.125rem;\n  }\n\n  .left-button-border {\n    border-top-width: 0.125rem;\n    border-right-width: 0;\n    border-left-width: 0.125rem;\n    border-bottom-width: 0.125rem;\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} from '@stencil/core';\nimport { getButtonClasses } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { Placement } from '../dropdown/placement';\n\nexport type SplitButtonVariant = ButtonVariant;\n\n@Component({\n  tag: 'ix-split-button',\n  styleUrl: 'split-button.scss',\n  scoped: true,\n})\nexport class SplitButton {\n  @Element() hostElement!: HTMLIxSplitButtonElement;\n\n  /**\n   * Color variant of button\n   */\n  @Prop() variant: SplitButtonVariant = 'Primary';\n\n  /**\n   * Button outline variant\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button invisible\n   *\n   * @deprecated Will be removed in 2.0.0. Use ghost property\n   */\n  @Prop() invisible = false;\n\n  /**\n   * Button invisible\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Button label\n   */\n  @Prop() label: string;\n\n  /**\n   * Button icon\n   */\n  @Prop() icon = '';\n\n  /**\n   * Splitbutton icon\n   */\n  @Prop() splitIcon = 'context-menu';\n\n  /**\n   * Disabled\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Placement of the dropdown\n   */\n  @Prop() placement: Placement = 'bottom-start';\n\n  @State() toggle = false;\n\n  /**\n   * Button clicked\n   */\n  @Event() buttonClick: EventEmitter<MouseEvent>;\n\n  private triggerElement: HTMLElement;\n  private dropdownElement: HTMLIxDropdownElement;\n\n  get splitItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-split-button-item')\n    );\n  }\n\n  private linkTriggerRef() {\n    if (this.triggerElement && this.dropdownElement) {\n      this.dropdownElement.trigger = this.triggerElement;\n    }\n  }\n\n  componentDidLoad() {\n    this.linkTriggerRef();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={{ 'btn-group': true, 'middle-gap': !this.outline }}>\n          <button\n            class={{\n              ...getButtonClasses(\n                this.variant,\n                this.outline,\n                this.ghost || this.invisible,\n                !this.label,\n                false,\n                false,\n                this.disabled\n              ),\n              ...{\n                'left-button-border': !this.outline,\n              },\n            }}\n            onClick={(e) => this.buttonClick.emit(e)}\n          >\n            {this.icon ? <ix-icon name={this.icon} /> : null} {this.label}\n          </button>\n          <button\n            ref={(r) => (this.triggerElement = r)}\n            class={{\n              ...getButtonClasses(\n                this.variant,\n                this.outline,\n                this.ghost || this.invisible,\n                true,\n                false,\n                false,\n                this.disabled\n              ),\n              ...{\n                anchor: true,\n              },\n            }}\n          >\n            <ix-icon name={this.splitIcon} />\n          </button>\n        </div>\n\n        <ix-dropdown ref={(r) => (this.dropdownElement = r)}>\n          <slot></slot>\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 */\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  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-split-button-item',\n  styleUrl: 'split-button-item.css',\n  scoped: true,\n})\nexport class SplitButtonItem {\n  /**\n   * Dropdown icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Dropdown label\n   */\n  @Prop() label: string;\n\n  /**\n   * Dropdown item clicked\n   */\n  @Event() itemClick: EventEmitter<MouseEvent>;\n\n  @Element() hostElement: HTMLIxSplitButtonItemElement;\n\n  render() {\n    return (\n      <ix-dropdown-item\n        icon={this.icon}\n        label={this.label}\n        onClick={(e) => this.itemClick.emit(e)}\n      ></ix-dropdown-item>\n    );\n  }\n}\n"],"mappings":"oGAAA,MAAMA,EAAiB,4iB,MC8BVC,EAAW,M,+EAMgB,U,aAKpB,M,eAOE,M,WAKJ,M,+BAUD,G,eAKK,e,cAKD,M,eAKY,e,YAEb,K,CAUdC,iBACF,OAAOC,MAAMC,KACXC,KAAKC,YAAYC,iBAAiB,wB,CAI9BC,iBACN,GAAIH,KAAKI,gBAAkBJ,KAAKK,gBAAiB,CAC/CL,KAAKK,gBAAgBC,QAAUN,KAAKI,c,EAIxCG,mBACEP,KAAKG,gB,CAGPK,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,OAAKE,MAAO,CAAE,YAAa,KAAM,cAAeX,KAAKY,UACnDH,EAAA,UACEE,MAAKE,OAAAC,OAAAD,OAAAC,OAAA,GACAC,EACDf,KAAKgB,QACLhB,KAAKY,QACLZ,KAAKiB,OAASjB,KAAKkB,WAClBlB,KAAKmB,MACN,MACA,MACAnB,KAAKoB,WAEJ,CACD,sBAAuBpB,KAAKY,UAGhCS,QAAUC,GAAMtB,KAAKuB,YAAYC,KAAKF,IAErCtB,KAAKyB,KAAOhB,EAAA,WAASiB,KAAM1B,KAAKyB,OAAW,KAAI,IAAGzB,KAAKmB,OAE1DV,EAAA,UACEkB,IAAMC,GAAO5B,KAAKI,eAAiBwB,EACnCjB,MAAKE,OAAAC,OAAAD,OAAAC,OAAA,GACAC,EACDf,KAAKgB,QACLhB,KAAKY,QACLZ,KAAKiB,OAASjB,KAAKkB,UACnB,KACA,MACA,MACAlB,KAAKoB,WAEJ,CACDS,OAAQ,QAIZpB,EAAA,WAASiB,KAAM1B,KAAK8B,cAIxBrB,EAAA,eAAakB,IAAMC,GAAO5B,KAAKK,gBAAkBuB,GAC/CnB,EAAA,c,8CCvJV,MAAMsB,EAAqB,4C,MCuBdC,EAAe,M,uGAkB1BxB,SACE,OACEC,EAAA,oBACEgB,KAAMzB,KAAKyB,KACXN,MAAOnB,KAAKmB,MACZE,QAAUC,GAAMtB,KAAKiC,UAAUT,KAAKF,I"}

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

@@ -0,0 +1,2 @@
+import{r as e,c as r,h as o,H as i,g as t}from"./p-8fcd6f85.js";const s=".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:0.25rem;display:flex;background-color:var(--theme-group-item--background);border:1px solid var(--theme-group-item--border-color);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);border-color:var(--theme-group-item--border-color--hover)}.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);border-color:var(--theme-group-item--border-color--active)}.sc-ix-group-h .group-header.sc-ix-group:not(.disabled):not(:disabled):focus-visible{border-color:var(--focus--border-color);border-radius:var(--theme-group--border-radius--focus);outline:none}.sc-ix-group-h .group-header.selected.sc-ix-group{border:var(--theme-primary-bdr-2);background-color:var(--theme-group-item--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-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.expand.sc-ix-group{border-bottom-left-radius:0;border-bottom-right-radius:0}.sc-ix-group-h .group-header-selection-indicator.sc-ix-group{width:0.25rem}.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;padding:0.5rem;padding-left:0;width:100%}.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}.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}";const n=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(o){e(this,o);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.dropdownTriggerRef=undefined}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){const r=this.collapsed;this.collapsed=!this.collapsed;if(!r&&this.index!==undefined){this.index=undefined;this.setGroupSelection(true)}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)}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 o;e.selected=r===this.index;e.index=r;e.classList.remove("last");if(!((o=this.footer)===null||o===void 0?void 0:o.children.length)&&r===this.groupItems.length-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.groupContent.addEventListener("selectedChanged",(e=>{this.onItemClick(e.detail.index)}))}render(){return o(i,null,o("div",{class:{"group-header":true,expand:!this.collapsed,selected:this.selected},tabindex:"0"},o("div",{class:"group-header-clickable",onClick:e=>this.onHeaderClick(e)},o("div",{class:"group-header-selection-indicator"}),o("ix-icon",{class:"btn-expand-header",name:`chevron-${this.collapsed?"right":"down"}-small`,onClick:e=>this.onExpandClick(e)}),o("div",{class:"group-header-content"},this.header?o("div",{class:"group-header-props-container"},o("div",{class:"group-header-title"},o("span",{title:this.header},this.header)),o("div",{class:"group-subheader",title:this.subHeader},this.subHeader)):null,o("slot",{name:"header"}))),o("ix-group-context-menu",null,o("slot",{name:"dropdown"}))),o("div",{class:{"group-content":true,"d-none":this.collapsed}},o("slot",null)),o("div",{class:"d-none"},o("ix-group-item",{class:"footer last",suppressSelection:true,focusable:false},o("slot",{name:"footer"}))))}get hostElement(){return t(this)}};n.style=s;const d=".sc-ix-group-dropdown-item-h{display:contents}";const c=class{constructor(r){e(this,r);this.label=undefined;this.icon=undefined}render(){return o(i,null,o("ix-dropdown-item",{label:this.label,icon:this.icon},o("slot",null)))}};c.style=d;const h=".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;border:1px solid var(--theme-group-item--border-color);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){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)}.selected.sc-ix-group-item-h{border-top-width:0.062rem !important;border-color:var(--theme-group-item--border-color--selected);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-color-input--focus)}.sc-ix-group-item-h:not(.disabled):not(:disabled):focus-visible{border-color:var(--focus--border-color) !important}";const u=class{constructor(o){e(this,o);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 o(i,{class:{selected:this.selected&&!this.suppressSelection,"suppress-selection":this.suppressSelection},tabindex:this.focusable?0:-1},o("div",{class:"group-entry-selection-indicator"}),this.icon?o("ix-icon",{size:"16",name:this.icon}):null,this.text?o("span",{class:"group-entry-text"},o("span",{title:this.text},this.text)):null,this.secondaryText?o("span",{class:"group-entry-text-secondary"},o("span",{title:this.secondaryText},this.secondaryText)):null,o("slot",null))}get hostElement(){return t(this)}};u.style=h;export{n as ix_group,c as ix_group_dropdown_item,u as ix_group_item};
+//# sourceMappingURL=p-a92126b5.entry.js.map

package/dist/siemens-ix/p-a92126b5.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","dropdownTriggerRef","async","event","targetElement","target","contains","code","classList","matches","groupItem","onExpandClick","wasCollapsed","setGroupSelection","emit","stopPropagation","onHeaderClick","onItemClick","selection","componentWillRender","forEach","item","remove","_a","children","length","add","childElementCount","appendChild","componentDidLoad","addEventListener","evt","detail","render","h","Host","class","expand","tabindex","onClick","e","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: 0.25rem;\n    display: flex;\n    background-color: var(--theme-group-item--background);\n    border: 1px solid var(--theme-group-item--border-color);\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      border-color: var(--theme-group-item--border-color--hover);\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\n    @include focus-visible {\n      border-color: var(--focus--border-color);\n      border-radius: var(--theme-group--border-radius--focus);\n      outline: none;\n    }\n\n    &.selected {\n      border: var(--theme-primary-bdr-2);\n      background-color: var(--theme-group-item--background--selected);\n    }\n\n    .group-header-selection-indicator {\n      background-color: var(--theme-color-input--focus);\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.expand {\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n\n  .group-header-selection-indicator {\n    width: $tiny-space;\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    padding: 0.5rem;\n    padding-left: 0;\n    width: 100%;\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  }\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","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\n\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  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  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    const wasCollapsed = this.collapsed;\n    this.collapsed = !this.collapsed;\n\n    if (!wasCollapsed && this.index !== undefined) {\n      this.index = undefined;\n      this.setGroupSelection(true);\n    }\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    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      item.selected = index === this.index;\n      item.index = index;\n      item.classList.remove('last');\n      if (\n        !this.footer?.children.length &&\n        index === this.groupItems.length - 1\n      ) {\n        item.classList.add('last');\n      }\n    });\n\n    if (this.footer?.childElementCount > 1) {\n      this.groupContent.appendChild(this.footer);\n    }\n  }\n\n  componentDidLoad() {\n    this.groupContent.addEventListener(\n      'selectedChanged',\n      (evt: CustomEvent<HTMLIxGroupItemElement>) => {\n        this.onItemClick(evt.detail.index);\n      }\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 class=\"group-header-selection-indicator\"></div>\n            <ix-icon\n              class=\"btn-expand-header\"\n              name={`chevron-${this.collapsed ? 'right' : 'down'}-small`}\n              onClick={(e) => this.onExpandClick(e)}\n            ></ix-icon>\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  border: 1px solid var(--theme-group-item--border-color);\n  outline: none;\n\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\n    @include active {\n      background-color: var(--theme-group-item--background--active);\n      border-color: var(--theme-group-item--border-color--active);\n    }\n  }\n\n  &.selected {\n    border-top-width: 0.062rem !important;\n    border-color: var(--theme-group-item--border-color--selected);\n    background-color: var(--theme-group-item--background--selected);\n\n    .group-entry-selection-indicator {\n      background-color: var(--theme-color-input--focus);\n    }\n  }\n\n  @include focus-visible {\n    border-color: var(--focus--border-color) !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-aa4141e4.entry.js

@@ -0,0 +1,2 @@
+import{r as i,h as r,H as t,g as o}from"./p-8fcd6f85.js";const e='.sc-ix-counter-pill-h{display:inline-flex;width:-moz-fit-content;width:fit-content;position:relative;align-items:center;justify-content:center;border-radius:100px;padding:0px 6px;margin-left:0.25rem;min-width:1.5rem;height:1.25rem;min-height:1.25rem;max-height:1.25rem;cursor:auto}.sc-ix-counter-pill-h .with-icon.sc-ix-counter-pill{margin-right:0.25rem}.align-left.sc-ix-counter-pill-h{justify-content:flex-start}[variant=primary].sc-ix-counter-pill-h{background-color:var(--theme-color-primary);color:var(--theme-chip-primary--color)}[variant=primary].sc-ix-counter-pill-h .close-button.sc-ix-counter-pill{color:var(--theme-chip-primary--color);pointer-events:auto}[variant=primary].outline.sc-ix-counter-pill-h{color:var(--theme-chip-primary-outline--color);background-color:transparent;border:solid 1px var(--theme-chip-primary-outline--border-color)}[variant=primary].outline.sc-ix-counter-pill-h .close-button.sc-ix-counter-pill{color:var(--theme-chip-primary-outline--color)}[variant=alarm].sc-ix-counter-pill-h{color:var(--theme-color-alarm--contrast)}[variant=alarm].sc-ix-counter-pill-h:not(.outline){background-color:var(--theme-color-alarm)}[variant=alarm].sc-ix-counter-pill-h:not(.outline) .close-button.sc-ix-counter-pill{color:var(--theme-color-alarm--contrast)}[variant=alarm].sc-ix-counter-pill-h:not(.outline):hover::after{content:"";background-color:rgba(0, 0, 0, 0.05)}[variant=alarm].sc-ix-counter-pill-h:not(.outline).active::after,[variant=alarm].sc-ix-counter-pill-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=alarm].outline.sc-ix-counter-pill-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-alarm)}[variant=alarm].outline.sc-ix-counter-pill-h:hover::after{display:none}[variant=alarm].outline.sc-ix-counter-pill-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=alarm].outline.active.sc-ix-counter-pill-h::after,[variant=alarm].outline.sc-ix-counter-pill-h:active::after{display:none}[variant=alarm].outline.active.sc-ix-counter-pill-h,[variant=alarm].outline.sc-ix-counter-pill-h:active{background-color:var(--theme-chip-outline--background--active)}[variant=critical].sc-ix-counter-pill-h{color:var(--theme-color-critical--contrast)}[variant=critical].sc-ix-counter-pill-h:not(.outline){background-color:var(--theme-color-critical)}[variant=critical].sc-ix-counter-pill-h:not(.outline) .close-button.sc-ix-counter-pill{color:var(--theme-color-critical--contrast)}[variant=critical].sc-ix-counter-pill-h:not(.outline):hover::after{content:"";background-color:rgba(0, 0, 0, 0.05)}[variant=critical].sc-ix-counter-pill-h:not(.outline).active::after,[variant=critical].sc-ix-counter-pill-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=critical].outline.sc-ix-counter-pill-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-critical)}[variant=critical].outline.sc-ix-counter-pill-h:hover::after{display:none}[variant=critical].outline.sc-ix-counter-pill-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=critical].outline.active.sc-ix-counter-pill-h::after,[variant=critical].outline.sc-ix-counter-pill-h:active::after{display:none}[variant=critical].outline.active.sc-ix-counter-pill-h,[variant=critical].outline.sc-ix-counter-pill-h:active{background-color:var(--theme-chip-outline--background--active)}[variant=warning].sc-ix-counter-pill-h{color:var(--theme-color-warning--contrast)}[variant=warning].sc-ix-counter-pill-h:not(.outline){background-color:var(--theme-color-warning)}[variant=warning].sc-ix-counter-pill-h:not(.outline) .close-button.sc-ix-counter-pill{color:var(--theme-color-warning--contrast)}[variant=warning].sc-ix-counter-pill-h:not(.outline):hover::after{content:"";background-color:rgba(0, 0, 0, 0.05)}[variant=warning].sc-ix-counter-pill-h:not(.outline).active::after,[variant=warning].sc-ix-counter-pill-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=warning].outline.sc-ix-counter-pill-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-warning)}[variant=warning].outline.sc-ix-counter-pill-h:hover::after{display:none}[variant=warning].outline.sc-ix-counter-pill-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=warning].outline.active.sc-ix-counter-pill-h::after,[variant=warning].outline.sc-ix-counter-pill-h:active::after{display:none}[variant=warning].outline.active.sc-ix-counter-pill-h,[variant=warning].outline.sc-ix-counter-pill-h:active{background-color:var(--theme-chip-outline--background--active)}[variant=info].sc-ix-counter-pill-h{color:var(--theme-color-info--contrast)}[variant=info].sc-ix-counter-pill-h:not(.outline){background-color:var(--theme-color-info)}[variant=info].sc-ix-counter-pill-h:not(.outline) .close-button.sc-ix-counter-pill{color:var(--theme-color-info--contrast)}[variant=info].sc-ix-counter-pill-h:not(.outline):hover::after{content:"";background-color:rgba(0, 0, 0, 0.05)}[variant=info].sc-ix-counter-pill-h:not(.outline).active::after,[variant=info].sc-ix-counter-pill-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=info].outline.sc-ix-counter-pill-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-info)}[variant=info].outline.sc-ix-counter-pill-h:hover::after{display:none}[variant=info].outline.sc-ix-counter-pill-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=info].outline.active.sc-ix-counter-pill-h::after,[variant=info].outline.sc-ix-counter-pill-h:active::after{display:none}[variant=info].outline.active.sc-ix-counter-pill-h,[variant=info].outline.sc-ix-counter-pill-h:active{background-color:var(--theme-chip-outline--background--active)}[variant=neutral].sc-ix-counter-pill-h{color:var(--theme-color-neutral--contrast)}[variant=neutral].sc-ix-counter-pill-h:not(.outline){background-color:var(--theme-color-neutral)}[variant=neutral].sc-ix-counter-pill-h:not(.outline) .close-button.sc-ix-counter-pill{color:var(--theme-color-neutral--contrast)}[variant=neutral].sc-ix-counter-pill-h:not(.outline):hover::after{content:"";background-color:rgba(0, 0, 0, 0.05)}[variant=neutral].sc-ix-counter-pill-h:not(.outline).active::after,[variant=neutral].sc-ix-counter-pill-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=neutral].outline.sc-ix-counter-pill-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-neutral)}[variant=neutral].outline.sc-ix-counter-pill-h:hover::after{display:none}[variant=neutral].outline.sc-ix-counter-pill-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=neutral].outline.active.sc-ix-counter-pill-h::after,[variant=neutral].outline.sc-ix-counter-pill-h:active::after{display:none}[variant=neutral].outline.active.sc-ix-counter-pill-h,[variant=neutral].outline.sc-ix-counter-pill-h:active{background-color:var(--theme-chip-outline--background--active)}[variant=success].sc-ix-counter-pill-h{color:var(--theme-color-success--contrast)}[variant=success].sc-ix-counter-pill-h:not(.outline){background-color:var(--theme-color-success)}[variant=success].sc-ix-counter-pill-h:not(.outline) .close-button.sc-ix-counter-pill{color:var(--theme-color-success--contrast)}[variant=success].sc-ix-counter-pill-h:not(.outline):hover::after{content:"";background-color:rgba(0, 0, 0, 0.05)}[variant=success].sc-ix-counter-pill-h:not(.outline).active::after,[variant=success].sc-ix-counter-pill-h:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}[variant=success].outline.sc-ix-counter-pill-h{color:var(--theme-chip-outline--color);border:solid 1px var(--theme-color-success)}[variant=success].outline.sc-ix-counter-pill-h:hover::after{display:none}[variant=success].outline.sc-ix-counter-pill-h:hover{background-color:var(--theme-chip-outline--background--hover)}[variant=success].outline.active.sc-ix-counter-pill-h::after,[variant=success].outline.sc-ix-counter-pill-h:active::after{display:none}[variant=success].outline.active.sc-ix-counter-pill-h,[variant=success].outline.sc-ix-counter-pill-h:active{background-color:var(--theme-chip-outline--background--active)}[variant=custom].outline.sc-ix-counter-pill-h{border:solid 1px transparent;background-color:transparent}.sc-ix-counter-pill-h .slot.sc-ix-counter-pill{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-ix-counter-pill-h .hidden.sc-ix-counter-pill{width:0px;margin-right:0px}.sc-ix-counter-pill-h{min-height:1rem;max-height:1rem;height:1rem;font-size:0.75rem;padding:0 0.25rem;min-width:1rem;width:auto;padding:0 4px}.sc-ix-counter-pill-h .slot-container.sc-ix-counter-pill{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}';const n=class{constructor(r){i(this,r);this.variant="primary";this.outline=false;this.background=undefined;this.color=undefined;this.alignLeft=false}render(){return r(t,{class:{outline:this.outline,"align-left":this.alignLeft},style:this.variant==="custom"?{color:this.color,backgroundColor:this.background}:{},title:this.el.textContent},r("span",{class:"slot-container"},r("slot",null)))}get el(){return o(this)}};n.style=e;export{n as ix_counter_pill};
+//# sourceMappingURL=p-aa4141e4.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["counterPillCss","CounterPill","render","h","Host","class","outline","this","alignLeft","style","variant","color","backgroundColor","background","title","el","textContent"],"sources":["./src/components/counter-pill/counter-pill.scss?tag=ix-counter-pill&encapsulation=scoped","./src/components/counter-pill/counter-pill.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 './../pill/pill.scss';\n@import 'common-variables';\n@import 'mixins/text-truncation';\n\n:host {\n  .slot-container {\n    @include ellipsis;\n  }\n\n  min-height: 1rem;\n  max-height: 1rem;\n  height: 1rem;\n  font-size: $font-size-s;\n  padding: 0 $tiny-space;\n\n  min-width: 1rem;\n  width: auto;\n\n  padding: 0 4px;\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';\n\n@Component({\n  tag: 'ix-counter-pill',\n  styleUrl: 'counter-pill.scss',\n  scoped: true,\n})\nexport class CounterPill {\n  @Element() el: HTMLIxCounterPillElement;\n\n  /**\n   * Pill variant\n   */\n  @Prop({ reflect: true }) variant:\n    | 'primary'\n    | 'alarm'\n    | 'critical'\n    | 'warning'\n    | 'info'\n    | 'neutral'\n    | 'success'\n    | 'custom' = 'primary';\n\n  /**\n   * Show pill as outline\n   */\n  @Prop() outline = false;\n\n  /**\n   * Custom color for pill. Only working for `variant='custom'`\n   */\n  @Prop() background: string | undefined;\n\n  /**\n   * Custom font color for pill. Only working for `variant='custom'`\n   */\n  @Prop() color: string | undefined;\n\n  /**\n   * Align pill content left\n   */\n  @Prop() alignLeft = false;\n\n  render() {\n    return (\n      <Host\n        class={{\n          outline: this.outline,\n          'align-left': this.alignLeft,\n        }}\n        style={\n          this.variant === 'custom'\n            ? {\n                color: this.color,\n                backgroundColor: this.background,\n              }\n            : {}\n        }\n        title={this.el.textContent}\n      >\n        <span class=\"slot-container\">\n          <slot></slot>\n        </span>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAiB,mjR,MCgBVC,EAAW,M,sCAcP,U,aAKG,M,8DAeE,K,CAEpBC,SACE,OACEC,EAACC,EAAI,CACHC,MAAO,CACLC,QAASC,KAAKD,QACd,aAAcC,KAAKC,WAErBC,MACEF,KAAKG,UAAY,SACb,CACEC,MAAOJ,KAAKI,MACZC,gBAAiBL,KAAKM,YAExB,GAENC,MAAOP,KAAKQ,GAAGC,aAEfb,EAAA,QAAME,MAAM,kBACVF,EAAA,c"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["chipCss","Chip","getCloseButton","h","class","type","onClick","event","this","close","emit","variant","style","color","name","size","render","isInactive","active","customStyle","outline","backgroundColor","background","borderColor","Host","inactive","tabIndex","title","el","textContent","Object","assign","hidden","icon","undefined","closable"],"sources":["./src/components/chip/chip.scss?tag=ix-chip&encapsulation=scoped","./src/components/chip/chip.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import './chip-mixin';\n@import 'common-variables';\n@import 'mixins/text-truncation';\n\n$border-radius: 100px;\n\n:host {\n  display: inline-flex;\n  width: fit-content;\n  position: relative;\n  align-items: center;\n  border-radius: $border-radius;\n  padding: $small-space $medium-space;\n\n  height: $default-control-height;\n  max-height: $default-control-height;\n\n  cursor: pointer;\n\n  .with-icon {\n    margin-right: $tiny-space;\n  }\n\n  .hidden {\n    width: 0px;\n    margin-right: 0px;\n  }\n\n  margin-left: $tiny-space;\n\n  .close-button-container {\n    display: inline-flex;\n    flex-grow: 1;\n    margin-left: $medium-space;\n  }\n\n  .close-button {\n    position: relative;\n    width: $default-space;\n    height: $default-space;\n    min-width: unset;\n    min-height: unset;\n    margin-left: auto;\n    margin-right: 0;\n  }\n\n  @include chip();\n\n  .slot-container {\n    @include ellipsis;\n  }\n}\n\n:host(.inactive) {\n  pointer-events: none;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-chip',\n  styleUrl: 'chip.scss',\n  scoped: true,\n})\nexport class Chip {\n  @Element() el: HTMLIxChipElement;\n\n  /**\n   * Chip variant\n   */\n  @Prop({ reflect: true }) variant:\n    | 'primary'\n    | 'alarm'\n    | 'critical'\n    | 'warning'\n    | 'info'\n    | 'neutral'\n    | 'success'\n    | 'custom' = 'primary';\n\n  /**\n   * Determines if the chip is interactive. If false no user input (e.g. mouse states, keyboard navigation)\n   * will be possible and also the close button will not be present.\n   */\n  @Prop() active = true;\n\n  /**\n   * Show close icon\n   */\n  @Prop() closable = false;\n\n  /**\n   * Show icon\n   */\n  @Prop() icon: string | undefined;\n\n  /**\n   * Custom color for pill. Only working for `variant='custom'`\n   */\n  @Prop() background: string | undefined;\n\n  /**\n   * Custom font color for pill. Only working for `variant='custom'`\n   */\n  @Prop() color: string | undefined;\n\n  /**\n   * Show chip with outline style\n   */\n  @Prop() outline = false;\n\n  /**\n   * Fire event if close button is clicked\n   */\n  @Event() close: EventEmitter;\n\n  private getCloseButton() {\n    return (\n      <div class=\"close-button-container\">\n        <button\n          type=\"button\"\n          class=\"btn btn-invisible-secondary btn-icon btn-oval close-button\"\n          onClick={(event) => this.close.emit(event)}\n        >\n          {this.variant === 'custom' ? (\n            <i\n              class=\"glyph glyph-16 glyph-close-small\"\n              style={{ color: this.color }}\n            />\n          ) : (\n            <ix-icon name={'close-small'} size={'16'} />\n          )}\n        </button>\n      </div>\n    );\n  }\n\n  render() {\n    const isInactive = this.active === false;\n\n    let customStyle = {};\n\n    if (this.variant === 'custom' && this.outline === false) {\n      customStyle = {\n        color: this.color,\n        backgroundColor: this.background,\n      };\n    }\n\n    if (this.variant === 'custom' && this.outline === true) {\n      customStyle = {\n        color: this.color,\n        borderColor: this.background,\n      };\n    }\n\n    return (\n      <Host\n        class={{\n          outline: this.outline,\n          inactive: isInactive,\n        }}\n        tabIndex=\"-1\"\n        title={this.el.textContent}\n        style={{ ...customStyle }}\n      >\n        <ix-icon\n          class={{\n            'with-icon': true,\n            hidden: this.icon === undefined || this.icon === '',\n          }}\n          name={this.icon}\n          size={'24'}\n        />\n        <span class=\"slot-container\">\n          <slot></slot>\n        </span>\n        {isInactive === false && this.closable ? this.getCloseButton() : null}\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAU,myY,MCwBHC,EAAI,M,mEAcA,U,YAME,K,cAKE,M,gFAoBD,K,CAOVC,iBACN,OACEC,EAAA,OAAKC,MAAM,0BACTD,EAAA,UACEE,KAAK,SACLD,MAAM,6DACNE,QAAUC,GAAUC,KAAKC,MAAMC,KAAKH,IAEnCC,KAAKG,UAAY,SAChBR,EAAA,KACEC,MAAM,mCACNQ,MAAO,CAAEC,MAAOL,KAAKK,SAGvBV,EAAA,WAASW,KAAM,cAAeC,KAAM,Q,CAO9CC,SACE,MAAMC,EAAaT,KAAKU,SAAW,MAEnC,IAAIC,EAAc,GAElB,GAAIX,KAAKG,UAAY,UAAYH,KAAKY,UAAY,MAAO,CACvDD,EAAc,CACZN,MAAOL,KAAKK,MACZQ,gBAAiBb,KAAKc,W,CAI1B,GAAId,KAAKG,UAAY,UAAYH,KAAKY,UAAY,KAAM,CACtDD,EAAc,CACZN,MAAOL,KAAKK,MACZU,YAAaf,KAAKc,W,CAItB,OACEnB,EAACqB,EAAI,CACHpB,MAAO,CACLgB,QAASZ,KAAKY,QACdK,SAAUR,GAEZS,SAAS,KACTC,MAAOnB,KAAKoB,GAAGC,YACfjB,MAAKkB,OAAAC,OAAA,GAAOZ,IAEZhB,EAAA,WACEC,MAAO,CACL,YAAa,KACb4B,OAAQxB,KAAKyB,OAASC,WAAa1B,KAAKyB,OAAS,IAEnDnB,KAAMN,KAAKyB,KACXlB,KAAM,OAERZ,EAAA,QAAMC,MAAM,kBACVD,EAAA,cAEDc,IAAe,OAAST,KAAK2B,SAAW3B,KAAKN,iBAAmB,K"}

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

@@ -1 +1,2 @@
-async function n(n){const t=function(){const n=Array.from(document.querySelectorAll("ix-modal-container")),[t]=n;if(n.length>1)return console.warn("Multiple modal containers were found. The one instatiated first will be used."),t;if(!t){const n=document.createElement("ix-modal-container");return document.body.appendChild(n),n}return t}();return await t.showModal(n)}function t(n){return n.closest("ix-modal")}function o(n,o){t(n).close(o)}function e(n,o){t(n).dismiss(o)}export{o as c,e as d,n as m}
+function n(){const n=Array.from(document.querySelectorAll("ix-modal-container"));const[t]=n;if(n.length>1){console.warn("Multiple modal containers were found. The one instatiated first will be used.");return t}if(!t){const n=document.createElement("ix-modal-container");document.body.appendChild(n);return n}return t}async function t(t){const o=n();const e=await o.showModal(t);return e}function o(n){return n.closest("ix-modal")}function e(n,t){o(n).close(t)}function c(n,t){o(n).dismiss(t)}export{e as c,c as d,t as m};
+//# sourceMappingURL=p-b14308ed.js.map

package/dist/siemens-ix/p-b14308ed.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["getModalContainer","containerList","Array","from","document","querySelectorAll","container","length","console","warn","modalContainer","createElement","body","appendChild","async","modal","config","modalInstance","showModal","getIxModal","element","closest","closeModal","closeResult","close","dismissModal","dismissResult","dismiss"],"sources":["./src/components/modal/modal-utils.ts"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { NotificationColor } from '../utils/notification-color';\nimport { TypedEvent } from '../utils/typed-event';\n\nexport interface ModalConfig<TReason = any> {\n  animation?: boolean;\n  ariaDescribedBy?: string;\n  ariaLabelledBy?: string;\n  backdrop?: boolean | 'static';\n  backdropClass?: string;\n  beforeDismiss?: (reason?: TReason) => boolean | Promise<boolean>;\n  centered?: boolean;\n  container?: string | HTMLElement;\n  content: string | HTMLElement;\n  keyboard?: boolean;\n  modalDialogClass?: string;\n  scrollable?: boolean;\n  size?: 'sm' | 'lg' | 'xl';\n  title: string;\n  windowClass?: string;\n  icon?: string;\n  iconColor?: NotificationColor;\n}\n\nexport interface ModalInstance<TReason = any> {\n  htmlElement: HTMLIxModalElement;\n  onClose: TypedEvent<TReason>;\n  onDismiss: TypedEvent<TReason>;\n}\n\nfunction getModalContainer() {\n  const containerList = Array.from(\n    document.querySelectorAll('ix-modal-container')\n  );\n  const [container] = containerList;\n  if (containerList.length > 1) {\n    console.warn(\n      'Multiple modal containers were found. The one instatiated first will be used.'\n    );\n    return container;\n  }\n  if (!container) {\n    const modalContainer = document.createElement('ix-modal-container');\n    document.body.appendChild(modalContainer);\n\n    return modalContainer;\n  }\n  return container;\n}\n\nexport async function modal<T = any>(\n  config: ModalConfig<T>\n): Promise<ModalInstance<T>> {\n  const modalContainer = getModalContainer();\n  const modalInstance = await modalContainer.showModal<T>(config);\n\n  return modalInstance;\n}\n\nfunction getIxModal(element: Element) {\n  return element.closest('ix-modal');\n}\n\nexport function closeModal<TClose = any>(\n  element: Element,\n  closeResult: TClose\n) {\n  getIxModal(element).close(closeResult);\n}\n\nexport function dismissModal(element: Element, dismissResult?: any) {\n  getIxModal(element).dismiss(dismissResult);\n}\n"],"mappings":"AAsCA,SAASA,IACP,MAAMC,EAAgBC,MAAMC,KAC1BC,SAASC,iBAAiB,uBAE5B,MAAOC,GAAaL,EACpB,GAAIA,EAAcM,OAAS,EAAG,CAC5BC,QAAQC,KACN,iFAEF,OAAOH,C,CAET,IAAKA,EAAW,CACd,MAAMI,EAAiBN,SAASO,cAAc,sBAC9CP,SAASQ,KAAKC,YAAYH,GAE1B,OAAOA,C,CAET,OAAOJ,CACT,CAEOQ,eAAeC,EACpBC,GAEA,MAAMN,EAAiBV,IACvB,MAAMiB,QAAsBP,EAAeQ,UAAaF,GAExD,OAAOC,CACT,CAEA,SAASE,EAAWC,GAClB,OAAOA,EAAQC,QAAQ,WACzB,C,SAEgBC,EACdF,EACAG,GAEAJ,EAAWC,GAASI,MAAMD,EAC5B,C,SAEgBE,EAAaL,EAAkBM,GAC7CP,EAAWC,GAASO,QAAQD,EAC9B,Q"}

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

@@ -0,0 +1,2 @@
+import{r as i,c as t,h as o,H as s,g as a}from"./p-8fcd6f85.js";import{a as e}from"./p-810b5232.js";import{A as d}from"./p-3b97bb69.js";import{T as l}from"./p-9ee41861.js";const n=".sc-ix-modal-h{position:relative;width:100vw;height:100vh}.sc-ix-modal-h .modal.sc-ix-modal{display:flex}.sc-ix-modal-h .modal.animation.sc-ix-modal{animation:modal-fade 300ms ease-in-out}.sc-ix-modal-h .modal.backdrop.sc-ix-modal{background-color:var(--theme-color-lightbox);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:none}.sc-ix-modal-h .modal.backdrop.animation.sc-ix-modal{transition:-webkit-backdrop-filter 0ms ease-in-out;transition:backdrop-filter 0ms ease-in-out;transition:backdrop-filter 0ms ease-in-out, -webkit-backdrop-filter 0ms ease-in-out}.sc-ix-modal-h .modal.sc-ix-modal .modal-dialog.sc-ix-modal{flex-grow:1}.sc-ix-modal-h .modal.scrollable.sc-ix-modal .modal-content.sc-ix-modal{max-height:100%}.sc-ix-modal-h .modal.scrollable.sc-ix-modal .modal-content.sc-ix-modal .modal-body.sc-ix-modal{overflow-y:auto}.sc-ix-modal-h .modal.sc-ix-modal .modal-content.sc-ix-modal{box-shadow:var(--theme-modal--box-shadow);flex-direction:row;background-color:var(--theme-modal--background);border:var(--modal--border-thickness) solid var(--theme-modal--border-color);padding:1.5rem;max-height:100vh}.sc-ix-modal-h .modal.sc-ix-modal .modal-content.sc-ix-modal .state-icon-container.sc-ix-modal{-webkit-margin-end:1rem;margin-inline-end:1rem}.sc-ix-modal-h .modal.sc-ix-modal .modal-content.sc-ix-modal .slot-container.sc-ix-modal{flex-grow:1}@media (min-width: 576px){.sc-ix-modal-h .modal.sc-ix-modal .modal-dialog.sc-ix-modal:not(.modal-dialog-centered){margin:2.5rem auto}}@media (max-width: 575.98px){.sc-ix-modal-h .modal.sc-ix-modal .modal-dialog.sc-ix-modal{height:100%;margin:0}.sc-ix-modal-h .modal.sc-ix-modal .modal-dialog.sc-ix-modal .modal-content.sc-ix-modal{height:100%;border-radius:0}}@keyframes modal-fade{from{opacity:0%}to{opacity:100%}}@keyframes slide-down{from{top:-100%}to{top:32px}}";const c=class{constructor(o){i(this,o);this.closed=t(this,"closed",7);this.dismissed=t(this,"dismissed",7);this.onKeydown=this.handleKeydown.bind(this);this.animation=true;this.ariaDescribedBy=undefined;this.ariaLabelledBy="modal-title";this.backdrop=true;this.backdropClass=undefined;this.beforeDismiss=undefined;this.centered=false;this.content=undefined;this.keyboard=true;this.icon=undefined;this.iconColor="color-std-text";this.modalDialogClass=undefined;this.scrollable=true;this.size="sm";this.headerTitle=undefined;this.windowClass=undefined}get modal(){return this.hostElement.querySelector(".modal")}get modalDialog(){return this.modal.querySelector(".modal-dialog")}get modalContent(){return this.modalDialog.querySelector(".modal-content")}get modalBackdrop(){return this.hostElement.querySelector(".backdrop")}slideDown(i){const t=this.animation?d.mediumTime:0;e({targets:i,duration:t,opacity:[0,1],translateY:["-100%",0],easing:"easeOutSine"})}slideUp(i,t){const o=this.animation?d.mediumTime:0;e({targets:i,duration:o,opacity:[1,0],translateY:[0,"-100%"],easing:"easeInSine",complete:()=>{if(t){t()}}})}onBackdropClick(i){const t=i.target;if(t.classList.contains("backdrop")){this.dismiss(i)}}componentDidLoad(){if(this.backdrop==="static"){this.modalBackdrop.addEventListener("click",(i=>this.onBackdropClick(i)))}if(this.backdropClass){this.modalBackdrop.classList.add(this.backdropClass)}if(this.modalDialogClass){this.modalDialog.classList.add(this.modalDialogClass)}if(this.windowClass){this.modal.classList.add(this.windowClass)}if(this.keyboard){window.addEventListener("keydown",this.onKeydown)}this.slideDown(this.modalContent)}handleKeydown(i){if(i.key==="Escape"){this.dismiss(i.key)}}disconnectedCallback(){window.removeEventListener("keydown",this.onKeydown)}async dismiss(i){if(this.beforeDismiss){const t=await this.beforeDismiss(i);if(t!==false){this.slideUp(this.modalContent,(()=>this.dismissed.emit(i)))}}else{this.slideUp(this.modalContent,(()=>this.dismissed.emit(i)))}}async close(i){this.slideUp(this.modalContent,(()=>this.closed.emit(i)))}render(){return o(s,null,o("div",{class:{animation:this.animation,modal:true,backdrop:this.backdrop==="static"||this.backdrop,"align-items-center":this.centered,scrollable:this.scrollable},"aria-describedby":this.ariaDescribedBy,"aria-labelledby":this.ariaLabelledBy},o("div",{class:{"modal-dialog":true,"modal-sm":this.size==="sm","modal-lg":this.size==="lg","modal-xl":this.size==="xl"}},o("div",{class:"modal-content"},this.icon===undefined||this.icon===""?"":o("div",{class:"state-icon-container"},o("ix-icon",{name:this.icon,size:"32",color:this.iconColor})),o("div",{class:"slot-container"},o("slot",null))))))}get hostElement(){return a(this)}};c.style=n;const m=".sc-ix-modal-container-h{position:absolute;top:0;left:0;z-index:9999}";var r=undefined&&undefined.__rest||function(i,t){var o={};for(var s in i)if(Object.prototype.hasOwnProperty.call(i,s)&&t.indexOf(s)<0)o[s]=i[s];if(i!=null&&typeof Object.getOwnPropertySymbols==="function")for(var a=0,s=Object.getOwnPropertySymbols(i);a<s.length;a++){if(t.indexOf(s[a])<0&&Object.prototype.propertyIsEnumerable.call(i,s[a]))o[s[a]]=i[s[a]]}return o};const h=class{constructor(t){i(this,t)}async showModal(i){const t=new l;const o=new l;const s=document.createElement("ix-modal");let{title:a,content:e}=i,d=r(i,["title","content"]);Object.assign(s,Object.assign({headerTitle:a},d));if(typeof e==="string"){const i=document.createElement("template");e=e.trim();i.innerHTML=e;s.appendChild(i.content.firstChild)}else{s.appendChild(e)}this.hostElement.appendChild(s);s.addEventListener("closed",(i=>{this.hostElement.removeChild(s);t.emit(i.detail)}));s.addEventListener("dismissed",(i=>{this.hostElement.removeChild(s);o.emit(i.detail)}));return{htmlElement:s,onClose:t,onDismiss:o}}render(){return o(s,null)}get hostElement(){return a(this)}};h.style=m;export{c as ix_modal,h as ix_modal_container};
+//# sourceMappingURL=p-b64e82ce.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["modalCss","Modal","this","onKeydown","handleKeydown","bind","modal","hostElement","querySelector","modalDialog","modalContent","modalBackdrop","slideDown","duration","animation","Animation","mediumTime","anime","targets","opacity","translateY","easing","slideUp","completeCallback","complete","onBackdropClick","event","target","classList","contains","dismiss","componentDidLoad","backdrop","addEventListener","backdropClass","add","modalDialogClass","windowClass","keyboard","window","ev","key","disconnectedCallback","removeEventListener","async","reason","beforeDismiss","result","dismissed","emit","closed","render","h","Host","class","centered","scrollable","ariaDescribedBy","ariaLabelledBy","size","icon","undefined","name","color","iconColor","modalContainerCss","ModalContainer","config","onClose","TypedEvent","onDismiss","document","createElement","title","content","modifiedConfig","__rest","Object","assign","headerTitle","template","trim","innerHTML","appendChild","firstChild","removeChild","detail","htmlElement"],"sources":["./src/components/modal/modal.scss?tag=ix-modal&encapsulation=scoped","./src/components/modal/modal.tsx","./src/components/modal-container/modal-container.scss?tag=ix-modal-container&encapsulation=scoped","./src/components/modal-container/modal-container.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 '~bootstrap/scss/_functions';\n@import '~bootstrap/scss/mixins/_breakpoints.scss';\n@import '~bootstrap/scss/_variables.scss';\n\n@import 'common-variables';\n\n:host {\n  position: relative;\n  width: 100vw;\n  height: 100vh;\n\n  .modal {\n    display: flex;\n\n    &.animation {\n      animation: modal-fade $medium-time ease-in-out;\n    }\n\n    &.backdrop {\n      background-color: var(--theme-color-lightbox);\n      backdrop-filter: blur(4px);\n      transition: none;\n\n      &.animation {\n        transition: backdrop-filter $short-time ease-in-out;\n      }\n    }\n\n    .modal-dialog {\n      flex-grow: 1;\n    }\n\n    &.scrollable {\n      .modal-content {\n        max-height: 100%;\n        .modal-body {\n          overflow-y: auto;\n        }\n      }\n    }\n\n    .modal-content {\n      box-shadow: var(--theme-modal--box-shadow);\n      flex-direction: row;\n      background-color: var(--theme-modal--background);\n      border: var(--modal--border-thickness) solid\n        var(--theme-modal--border-color);\n      padding: $large-space;\n      max-height: 100vh;\n\n      .state-icon-container {\n        margin-inline-end: $default-space;\n      }\n\n      .slot-container {\n        flex-grow: 1;\n      }\n    }\n\n    @include media-breakpoint-up(sm) {\n      .modal-dialog:not(.modal-dialog-centered) {\n        margin: 2.5rem auto;\n      }\n    }\n\n    @include media-breakpoint-down(sm) {\n      .modal-dialog {\n        height: 100%;\n        margin: 0;\n\n        .modal-content {\n          height: 100%;\n          border-radius: 0;\n        }\n      }\n    }\n\n    @keyframes modal-fade {\n      from {\n        opacity: 0%;\n      }\n      to {\n        opacity: 100%;\n      }\n    }\n\n    @keyframes slide-down {\n      from {\n        top: -100%;\n      }\n      to {\n        top: 32px;\n      }\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport Animation from '../utils/animation';\nimport { NotificationColor } from '../utils/notification-color';\n\n@Component({\n  tag: 'ix-modal',\n  styleUrl: 'modal.scss',\n  scoped: true,\n})\nexport class Modal {\n  @Element() hostElement: HTMLIxModalElement;\n\n  /**\n   * Should the modal be animtated\n   */\n  @Prop() animation = true;\n\n  /**\n   *\n   */\n  @Prop() ariaDescribedBy: string;\n\n  /**\n   *\n   */\n  @Prop() ariaLabelledBy = 'modal-title';\n\n  /**\n   * Adds a dimming layer to the modal.\n   * This should only be used when it it necessary to focus the user's attention to the dialog content (e.g. errors, warnings, complex tasks).\n   */\n  @Prop() backdrop: boolean | 'static' = true;\n\n  /**\n   * Backdrop class\n   */\n  @Prop() backdropClass: string;\n\n  /**\n   * BeforeDismiss callback\n   */\n  @Prop() beforeDismiss: (reason?: any) => boolean | Promise<boolean>;\n\n  /**\n   * Centered modal\n   */\n  @Prop() centered = false;\n\n  /**\n   * Content of modal\n   */\n  @Prop() content: HTMLElement | string;\n\n  /**\n   * ESC close modal dialog\n   */\n  @Prop() keyboard = true;\n\n  /**\n   * Optional icon displayed next to the title\n   */\n  @Prop() icon: string;\n\n  /**\n   * Color of the header {@see ix-icon}\n   */\n  @Prop() iconColor: NotificationColor = 'color-std-text';\n\n  /**\n   * Modal dialog class\n   */\n  @Prop() modalDialogClass: string;\n\n  /**\n   * Modal scollable\n   */\n  @Prop() scrollable = true;\n\n  /**\n   * Modal size\n   */\n  @Prop() size: 'sm' | 'lg' | 'xl' = 'sm';\n\n  /**\n   * Header title\n   */\n  @Prop() headerTitle: string;\n\n  /**\n   * Window class\n   */\n  @Prop() windowClass: string;\n\n  /**\n   * Modal closed\n   */\n  @Event() closed: EventEmitter;\n\n  /**\n   * Modal dismissed\n   */\n  @Event() dismissed: EventEmitter;\n\n  private readonly onKeydown = this.handleKeydown.bind(this);\n\n  get modal() {\n    return this.hostElement.querySelector('.modal');\n  }\n\n  get modalDialog() {\n    return this.modal.querySelector('.modal-dialog');\n  }\n\n  get modalContent() {\n    return this.modalDialog.querySelector('.modal-content');\n  }\n\n  get modalBackdrop() {\n    return this.hostElement.querySelector('.backdrop');\n  }\n\n  private slideDown(modal: any) {\n    const duration = this.animation ? Animation.mediumTime : 0;\n\n    anime({\n      targets: modal,\n      duration,\n      opacity: [0, 1],\n      translateY: ['-100%', 0],\n      easing: 'easeOutSine',\n    });\n  }\n\n  private slideUp(modal: any, completeCallback?: any) {\n    const duration = this.animation ? Animation.mediumTime : 0;\n\n    anime({\n      targets: modal,\n      duration,\n      opacity: [1, 0],\n      translateY: [0, '-100%'],\n      easing: 'easeInSine',\n      complete: () => {\n        if (completeCallback) {\n          completeCallback();\n        }\n      },\n    });\n  }\n\n  private onBackdropClick(event: Event) {\n    const target = event.target as Element;\n    if (target.classList.contains('backdrop')) {\n      this.dismiss(event);\n    }\n  }\n\n  componentDidLoad() {\n    if (this.backdrop === 'static') {\n      this.modalBackdrop.addEventListener('click', (event) =>\n        this.onBackdropClick(event)\n      );\n    }\n\n    if (this.backdropClass) {\n      this.modalBackdrop.classList.add(this.backdropClass);\n    }\n\n    if (this.modalDialogClass) {\n      this.modalDialog.classList.add(this.modalDialogClass);\n    }\n\n    if (this.windowClass) {\n      this.modal.classList.add(this.windowClass);\n    }\n\n    if (this.keyboard) {\n      window.addEventListener('keydown', this.onKeydown);\n    }\n\n    this.slideDown(this.modalContent);\n  }\n\n  private handleKeydown(ev: KeyboardEvent) {\n    if (ev.key === 'Escape') {\n      this.dismiss(ev.key);\n    }\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('keydown', this.onKeydown);\n  }\n\n  /**\n   * Dismiss modal instance\n   * @param reason\n   */\n  @Method()\n  async dismiss<T = any>(reason?: T) {\n    if (this.beforeDismiss) {\n      const result = await this.beforeDismiss(reason);\n      if (result !== false) {\n        this.slideUp(this.modalContent, () => this.dismissed.emit(reason));\n      }\n    } else {\n      this.slideUp(this.modalContent, () => this.dismissed.emit(reason));\n    }\n  }\n\n  /**\n   * Close modal\n   * @param result\n   */\n  @Method()\n  async close<T = any>(result: T) {\n    this.slideUp(this.modalContent, () => this.closed.emit(result));\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            animation: this.animation,\n            modal: true,\n            backdrop: this.backdrop === 'static' || this.backdrop,\n            'align-items-center': this.centered,\n            scrollable: this.scrollable,\n          }}\n          aria-describedby={this.ariaDescribedBy}\n          aria-labelledby={this.ariaLabelledBy}\n        >\n          <div\n            class={{\n              'modal-dialog': true,\n              'modal-sm': this.size === 'sm',\n              'modal-lg': this.size === 'lg',\n              'modal-xl': this.size === 'xl',\n            }}\n          >\n            <div class=\"modal-content\">\n              {this.icon === undefined || this.icon === '' ? (\n                ''\n              ) : (\n                <div class=\"state-icon-container\">\n                  <ix-icon\n                    name={this.icon}\n                    size=\"32\"\n                    color={this.iconColor}\n                  ></ix-icon>\n                </div>\n              )}\n              <div class=\"slot-container\">\n                <slot></slot>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 9999;\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, Method } from '@stencil/core';\nimport { ModalConfig, ModalInstance } from '../modal/modal-utils';\nimport { TypedEvent } from '../utils/typed-event';\n\n@Component({\n  tag: 'ix-modal-container',\n  styleUrl: 'modal-container.scss',\n  scoped: true,\n})\nexport class ModalContainer {\n  @Element() hostElement: HTMLIxModalContainerElement;\n\n  /**\n   * Display modal dialog\n   *\n   * @param config\n   */\n  @Method()\n  async showModal<T = any>(config: ModalConfig<T>): Promise<ModalInstance<T>> {\n    const onClose = new TypedEvent<T>();\n    const onDismiss = new TypedEvent<T>();\n\n    const modal = document.createElement('ix-modal');\n    let { title, content, ...modifiedConfig } = config;\n    Object.assign(modal, { headerTitle: title, ...modifiedConfig });\n\n    if (typeof content === 'string') {\n      const template = document.createElement('template');\n      content = content.trim();\n      template.innerHTML = content;\n      modal.appendChild(template.content.firstChild);\n    } else {\n      modal.appendChild(content);\n    }\n\n    this.hostElement.appendChild(modal);\n\n    modal.addEventListener('closed', (event: CustomEvent<T>) => {\n      this.hostElement.removeChild(modal);\n      onClose.emit(event.detail);\n    });\n    modal.addEventListener('dismissed', (event: CustomEvent<T>) => {\n      this.hostElement.removeChild(modal);\n      onDismiss.emit(event.detail);\n    });\n\n    return {\n      htmlElement: modal,\n      onClose,\n      onDismiss,\n    };\n  }\n\n  render() {\n    return <Host></Host>;\n  }\n}\n"],"mappings":"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"}

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

@@ -1 +1,2 @@
-const e=e=>new MutationObserver(e);export{e as c}
+const e=e=>new MutationObserver(e);export{e as c};
+//# sourceMappingURL=p-c0454c9a.js.map

package/dist/siemens-ix/p-c0454c9a.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createMutationObserver","callback","MutationObserver"],"sources":["./src/components/utils/mutation-observer.ts"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nexport const createMutationObserver = (callback: MutationCallback) =>\n  new MutationObserver(callback);\n"],"mappings":"MASaA,EAA0BC,GACrC,IAAIC,iBAAiBD,U"}

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

@@ -0,0 +1,2 @@
+import{r as t,h as i,H as s,g as e}from"./p-8fcd6f85.js";const r="ix-tabs{width:auto;display:flex;align-items:center;position:relative}ix-tabs .tab-items{overflow:hidden;scroll-behavior:smooth;width:100%}ix-tabs .tab-items .items-content{display:flex;align-items:center}ix-tabs .arrow{position:absolute;display:flex;align-items:center;justify-content:center;width:32px;height:32px;top:0;bottom:0;left:0;margin:auto 0;border-radius:4px;color:var(--theme-btn-invisible-primary--color);background-color:var(--theme-btn-invisible-primary--background);z-index:2}ix-tabs .arrow:hover{color:var(--theme-btn-invisible-primary--color--hover);background-color:var(--theme-btn-invisible-primary--background--hover)}ix-tabs .arrow:active{color:var(--theme-btn-invisible-primary--color--active);background-color:var(--theme-btn-invisible-primary--background--active)}ix-tabs .arrow.right{left:auto;right:0}ix-tabs .overflow-shadow{width:50px;height:40px;position:absolute;left:0;top:0;background:linear-gradient(90deg, var(--theme-color-1) 50%, transparent);z-index:1}ix-tabs .overflow-shadow.right{left:auto;right:0;background:linear-gradient(90deg, transparent, var(--theme-color-1) 50%)}";let o=window.innerWidth;const a=class{constructor(i){t(this,i);this.clickAction={timeout:null,isClick:true};this.small=false;this.rounded=false;this.selected=0;this.layout="auto";this.placement="bottom";this.totalItems=0;this.currentScrollAmount=0;this.scrollAmount=100;this.styleNextArrow={};this.stylePreviousArrow={};this.scrollActionAmount=0}onWindowResize(){this.totalItems=0;this.totalItems=this.getTabs().length;if(o===0)return o=window.innerWidth;this.move(o-window.innerWidth);o=window.innerWidth}getTabs(){return Array.from(this.hostElement.querySelectorAll("ix-tab-item"))}getTab(t){return this.getTabs()[t]}getTabsWrapper(){return this.hostElement.getElementsByClassName("items-content")[0]}showArrows(){try{const t=this.getTabsWrapper();return t.scrollWidth>Math.ceil(t.getBoundingClientRect().width)&&this.layout==="auto"}catch(t){return false}}showPreviousArrow(){try{return this.showArrows()&&this.scrollActionAmount<0}catch(t){return false}}showNextArrow(){try{const t=this.getTabsWrapper();const i=t.getBoundingClientRect();return this.showArrows()&&this.scrollActionAmount>(t.scrollWidth-i.width)*-1}catch(t){return false}}getArrowStyle(t){return{opacity:t?"1":"0",zIndex:t?"1":"-1"}}move(t,i=false){const s=this.getTabsWrapper();const e=(s.scrollWidth-s.getBoundingClientRect().width)*-1;t=this.currentScrollAmount+t;t=t>0?0:t<e?e:t;const r=[`transform: translateX(${t}px);`,i?"transition: all ease-in-out 400ms;":""].join("");s.setAttribute("style",r);if(i)this.currentScrollAmount=this.scrollActionAmount=t;else this.scrollActionAmount=t}moveTabToView(t){if(!this.showArrows())return;const i=this.getTab(t).getBoundingClientRect();const s=i.x*-1;this.move(s,true)}setSelected(t){this.selected=t}clickTab(t){if(this.dragStop())return;this.setSelected(t);this.moveTabToView(t)}dragStart(t,i){if(!this.showArrows())return;if(i.button>0)return;this.clickAction.timeout=this.clickAction.timeout===null?setTimeout((()=>this.clickAction.isClick=false),300):null;const s=parseFloat(window.getComputedStyle(t).left);const e=i.clientX;const r=t=>this.dragMove(t,s,e);window.addEventListener("mouseup",(()=>{window.removeEventListener("mousemove",r,false);this.dragStop()}));window.addEventListener("mousemove",r,false)}dragMove(t,i,s){this.move(t.clientX+i-s)}dragStop(){clearTimeout(this.clickAction.timeout);this.clickAction.timeout=null;if(this.clickAction.isClick)return false;this.currentScrollAmount=this.scrollActionAmount;this.clickAction.isClick=true;return true}componentDidRender(){const t=this.getTabs();this.totalItems=t.length;t.forEach(((t,i)=>{if(this.small)t.setAttribute("small","true");if(this.rounded)t.setAttribute("rounded","true");t.setAttribute("layout",this.layout);t.setAttribute("selected",i===this.selected?"true":"false");t.setAttribute("placement",this.placement)}))}componentWillRender(){requestAnimationFrame((()=>{this.styleNextArrow=this.getArrowStyle(this.showNextArrow());this.stylePreviousArrow=this.getArrowStyle(this.showPreviousArrow())}))}componentDidLoad(){const t=this.getTabs();t.forEach(((t,i)=>{const s=t.getAttribute("disabled")!==null;if(!s)t.addEventListener("click",(()=>this.clickTab(i)));t.addEventListener("mousedown",(i=>this.dragStart(t,i)))}))}render(){return i(s,null,i("div",{class:"overflow-shadow",style:this.stylePreviousArrow}),i("div",{class:"arrow",style:this.stylePreviousArrow,onClick:()=>this.move(this.scrollAmount,true)},i("span",{class:"glyph glyph-chevron-left-small"})),i("div",{class:"tab-items"},i("div",{class:"items-content"},i("slot",null))),i("div",{class:"overflow-shadow right",style:this.styleNextArrow}),i("div",{class:"arrow right",style:this.styleNextArrow,onClick:()=>this.move(-this.scrollAmount,true)},i("span",{class:"glyph glyph-chevron-right-small"})))}get hostElement(){return e(this)}};a.style=r;export{a as ix_tabs};
+//# sourceMappingURL=p-c19c2492.entry.js.map

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

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

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

@@ -0,0 +1,2 @@
+import{r as t,h as s,H as i}from"./p-8fcd6f85.js";import{g as h}from"./p-5b39e04e.js";const e=".sc-ix-button-h{display:inline-block;width:auto;height:2rem}.disabled.sc-ix-button-h{pointer-events:none}.sc-ix-button-h .btn.sc-ix-button{width:100%;height:100%}";const o=class{constructor(s){t(this,s);this.variant="Primary";this.outline=false;this.invisible=false;this.ghost=false;this.selected=false;this.disabled=false;this.type="button"}render(){return s(i,{class:{disabled:this.disabled}},s("button",{type:this.type,class:h(this.variant,this.outline,this.ghost||this.invisible,false,false,this.selected,this.disabled)},s("slot",null)))}};o.style=e;export{o as ix_button};
+//# sourceMappingURL=p-d7a3acce.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["buttonCss","Button","render","h","Host","class","disabled","this","type","getButtonClasses","variant","outline","ghost","invisible","selected"],"sources":["./src/components/button/button.scss?tag=ix-button&encapsulation=scoped","./src/components/button/button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n  display: inline-block;\n  width: auto;\n  height: 2rem;\n\n  &.disabled {\n    pointer-events: none;\n  }\n\n  .btn {\n    width: 100%;\n    height: 100%;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\nimport { getButtonClasses } from './base-button';\n\nexport type ButtonVariant = 'Primary' | 'Secondary';\n\n@Component({\n  tag: 'ix-button',\n  scoped: true,\n  styleUrl: './button.scss',\n})\nexport class Button {\n  /**\n   * Button varaint\n   */\n  @Prop() variant: ButtonVariant = 'Primary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Invisible button\n   *\n   * @deprecated use ghost property\n   */\n  @Prop() invisible = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Show button as selected. Should be used with outline or ghost\n   */\n  @Prop() selected = false;\n\n  /**\n   * Disable the button\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Type of the button\n   */\n  @Prop() type: 'button' | 'submit' = 'button';\n\n  render() {\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n      >\n        <button\n          type={this.type}\n          class={getButtonClasses(\n            this.variant,\n            this.outline,\n            this.ghost || this.invisible,\n            false,\n            false,\n            this.selected,\n            this.disabled\n          )}\n        >\n          <slot></slot>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"sFAAA,MAAMA,EAAY,qK,MCmBLC,EAAM,M,sCAIgB,U,aAKf,M,eAOE,M,WAKJ,M,cAKG,M,cAKiB,M,UAKA,Q,CAEpCC,SACE,OACEC,EAACC,EAAI,CACHC,MAAO,CACLC,SAAUC,KAAKD,WAGjBH,EAAA,UACEK,KAAMD,KAAKC,KACXH,MAAOI,EACLF,KAAKG,QACLH,KAAKI,QACLJ,KAAKK,OAASL,KAAKM,UACnB,MACA,MACAN,KAAKO,SACLP,KAAKD,WAGPH,EAAA,c"}

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

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as i}from"./p-8fcd6f85.js";import{a as s}from"./p-810b5232.js";const r=".drawer-container.sc-ix-drawer{top:0;right:0;box-shadow:var(--theme-box-shadow-level-3);visibility:hidden;display:flex;position:absolute;flex-flow:column nowrap;justify-content:flex-start;align-items:center;max-height:100vh;min-height:1.5rem;background-color:var(--theme-color-1);border-radius:0.25rem;transition:all 300ms ease-out}.toggle.sc-ix-drawer{z-index:100;visibility:visible}.drawer-container.full-height.sc-ix-drawer{min-height:100%}.header.sc-ix-drawer{display:flex;position:relative;align-items:center;justify-content:flex-end;height:3.5rem;padding:0.5rem 1rem;width:100%;order:1}.header.sc-ix-drawer .header-content.sc-ix-drawer{flex-grow:1;margin-right:1rem}.content.sc-ix-drawer{position:relative;flex:1;flex-grow:1;order:2;height:100%;width:100%;overflow-y:auto}";const n=class{constructor(i){t(this,i);this.open=e(this,"open",7);this.drawerClose=e(this,"drawerClose",7);this.callback=this.clickedOutside.bind(this);this.show=false;this.closeOnClickOutside=true;this.fullHeight=false;this.minWidth=16;this.maxWidth=28;this.width=this.minWidth}onShowChanged(t){this.show=t!==undefined?t:!this.show;this.toggleDrawer(this.show)}async toggleDrawer(t){this.show=t!==undefined?t:!this.show;if(t){this.open.emit();this.slideInRight(this.divElement);setTimeout((()=>{window.addEventListener("mousedown",this.callback)}),300)}else{this.drawerClose.emit();this.slideOutRight(this.divElement);window.removeEventListener("mousedown",this.callback)}return Promise.resolve()}onCloseClicked(){this.show=false}clickedOutside(t){if(!this.closeOnClickOutside){return}const e=t.target;const i=e.closest("#div-container");const s=e.closest("#drawer-btn");if(t.target.type!=="button"&&i!==this.divElement&&e!==s){this.show=false}}slideOutRight(t){s({targets:t,duration:n.duration,translateX:[0,"16rem"],opacity:[1,0],easing:"easeInSine",complete:()=>{t.classList.add("d-none")}})}slideInRight(t){s({targets:t,duration:n.duration,translateX:["16rem",0],opacity:[0,1],easing:"easeOutSine",begin:()=>{t.classList.remove("d-none")}})}render(){return i("div",{class:{"drawer-container":true,toggle:this.show,"full-height":this.fullHeight,"d-none":true},style:{width:this.width==="auto"?this.width:`${this.width}rem`,"min-width":`${this.minWidth}rem`,"max-width":`${this.maxWidth}rem`},ref:t=>this.divElement=t,"data-testid":"container",id:"div-container"},i("div",{class:"header"},i("div",{class:"header-content"},i("slot",{name:"header"})),i("ix-icon-button",{icon:"close",size:"24",ghost:true,onClick:()=>this.onCloseClicked(),"data-testid":"close-button"})),i("div",{class:"content"},i("slot",null)))}static get watchers(){return{show:["onShowChanged"]}}};n.duration=300;n.style=r;export{n as ix_drawer};
+//# sourceMappingURL=p-d7cf7a1a.entry.js.map

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

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