@siemens/ix 0.0.0-20240419081748

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

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as i,H as s,g as o}from"./p-26e9d40e.js";import{O as r}from"./p-ced10144.js";const n=":host{display:inline-block;position:relative;min-height:2rem;height:auto;border-radius:var(--theme-input--border-radius)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .d-none{display:none}:host .select{position:relative;display:flex;align-items:center;background-color:var(--theme-input--background);border:var(--theme-input--border-thickness) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);padding:0 0 0 0.5rem;box-shadow:var(--theme-inset-shadow-1) !important}:host .select:not(.disabled):not(:disabled){cursor:pointer}:host .select:not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover)}:host .select:focus-within{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline:1px solid #119fff;outline-offset:var(--theme-input--focus--outline-offset)}:host .select.readonly{box-shadow:none !important;border:none;border-radius:0px;border-bottom:var(--theme-input--border-thickness) solid var(--theme-color-weak-bdr)}:host .select.readonly,:host .select.readonly:hover,:host .select.readonly:active{background-color:transparent !important}:host .select.readonly:focus,:host .select.readonly:focus-within,:host .select.readonly:focus-visible{outline:none}:host .select.readonly input{color:var(--theme-color-weak-text)}:host .select.readonly input:focus,:host .select.readonly input:focus-visible{outline:none}:host .hidden{display:none !important}:host .trigger{display:flex;align-items:center;flex-grow:1;height:100%}:host .input-container{display:flex;position:relative;align-items:flex-start;width:100%;height:100%}:host .input-container .chips{position:relative;display:flex;align-items:center;flex-wrap:wrap;height:100%;max-height:3.5rem;flex-grow:1;overflow-y:auto}:host .input-container .chips>ix-filter-chip{margin:0.1rem}:host .input-container input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);background:transparent;height:1.75rem;width:100%}:host .input-container input,:host .input-container input:hover,:host .input-container input:focus-visible{border:none;outline:none}:host .input-container input::-moz-placeholder{color:var(--theme-input-select-icon--color)}:host .input-container input::placeholder{color:var(--theme-input-select-icon--color)}:host .input-container input.hide-placeholder::-moz-placeholder{opacity:0}:host .input-container input.hide-placeholder::placeholder{opacity:0}:host .dropdown-visible{--ix-icon-button-color:var(--theme-color-dynamic--hover)}:host .add-item{display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%}:host .select-list-header{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;height:2rem;color:var(--theme-select-list-item-hint--color);margin:0 0.5rem 0 1rem}";const h=n;var l=undefined&&undefined.__decorate||function(t,e,i,s){var o=arguments.length,r=o<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,i):s,n;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")r=Reflect.decorate(t,e,i,s);else for(var h=t.length-1;h>=0;h--)if(n=t[h])r=(o<3?n(r):o>3?n(e,i,r):n(e,i))||r;return o>3&&r&&Object.defineProperty(e,i,r),r};const a=class{constructor(i){t(this,i);this.valueChange=e(this,"valueChange",7);this.itemSelectionChange=e(this,"itemSelectionChange",7);this.inputChange=e(this,"inputChange",7);this.addItem=e(this,"addItem",7);this.selectedIndices=undefined;this.value=undefined;this.allowClear=false;this.mode="single";this.editable=false;this.disabled=false;this.readonly=false;this.i18nPlaceholder="Select an option";this.i18nPlaceholderEditable="Type of select option";this.i18nSelectListHeader="Please select an option";this.i18nNoMatches="No matches";this.hideListHeader=false;this.dropdownShow=false;this.selectedLabels=undefined;this.dropdownWrapperRef=undefined;this.dropdownAnchor=undefined;this.isDropdownEmpty=false;this.hasFocus=false;this.navigationItem=undefined;this.inputFilterText=undefined;this.inputValue=undefined}get items(){return[...Array.from(this.hostElement.querySelectorAll("ix-select-item")),...Array.from(this.hostElement.shadowRoot.querySelectorAll("ix-select-item"))]}get selectedItems(){return this.items.filter((t=>t.selected))}get addItemButton(){return this.hostElement.shadowRoot.querySelector(".add-item")}get isSingleMode(){return this.mode==="single"}get isMultipleMode(){return this.mode==="multiple"}get isEveryDropdownItemHidden(){return this.items.every((t=>t.classList.contains("d-none")))}watchSelectedIndices(t){this.value=t;this.updateSelection()}watchValue(t){this.selectedIndices=t;this.updateSelection()}onItemClicked(t){const e=t.detail;this.itemClick(e)}itemClick(t){this.value=this.toggleValue(t);this.updateSelection();this.emitValueChange()}emitAddItem(t){if(t.trim()===""){return}const e=document.createElement("ix-select-item");e.value=t;e.label=t;this.addItemRef.appendChild(e);this.clearInput();this.itemClick(t);this.addItem.emit(t)}toggleValue(t){if(!this.isMultipleMode){return t}if(!this.value){return[t]}let e=this.value;if(!Array.isArray(e)){e=[e]}if(e.includes(t)){return e.filter((e=>e!==t))}else{return[...e,t]}}updateSelection(){var t;let e=[];if(this.value){e=Array.isArray(this.value)?[...this.value]:[this.value]}this.items.forEach((t=>{t.selected=e.some((e=>e===(t.value!==undefined&&t.value!==null?t.value.toString():"")))}));this.selectedLabels=this.selectedItems.map((t=>t.label));if(this.isSingleMode){this.inputValue=((t=this.selectedLabels)===null||t===void 0?void 0:t.length)?this.selectedLabels[0]:null;return}this.inputValue=null}emitValueChange(){this.valueChange.emit(this.value);if(!this.value){this.itemSelectionChange.emit(null)}else{this.itemSelectionChange.emit(Array.isArray(this.value)?this.value:[this.value])}}componentDidLoad(){this.inputRef.addEventListener("input",(()=>{this.dropdownShow=true;this.inputChange.emit(this.inputRef.value)}))}componentWillLoad(){if(this.selectedIndices&&!this.value){this.value=this.selectedIndices}this.updateSelection()}onLabelChange(t){t.preventDefault();t.stopImmediatePropagation();this.updateSelection()}disconnectedCallback(){if(this.labelMutationObserver){this.labelMutationObserver.disconnect()}}itemExists(t){return this.items.find((e=>e.label===t))}dropdownVisibilityChanged(t){this.dropdownShow=t.detail;this.hasFocus=t.detail;if(t.detail){this.inputRef.focus();this.inputRef.select();this.removeHiddenFromItems();this.isDropdownEmpty=this.isEveryDropdownItemHidden}else{this.navigationItem=undefined}}async onKeyDown(t){if(t.code==="ArrowDown"||t.code==="ArrowUp"){this.onArrowNavigation(t,t.code)}if(!this.dropdownShow){return}if(t.code==="Enter"||t.code==="NumpadEnter"){await this.onEnterNavigation()}if(t.code==="Escape"){this.dropdownShow=false}}async onEnterNavigation(){var t,e;if(this.isMultipleMode){return}if(this.editable&&!this.itemExists(this.inputFilterText)){this.emitAddItem(this.inputFilterText);this.navigationItem=this.items[this.items.length-1]}(t=this.navigationItem)===null||t===void 0?void 0:t.onItemClick();await((e=this.dropdownRef)===null||e===void 0?void 0:e.updatePosition());if(this.isSingleMode&&!this.editable){this.dropdownShow=false}}onArrowNavigation(t,e){t.preventDefault();t.stopPropagation();this.dropdownShow=true;const i=this.items.filter((t=>!t.classList.contains("d-none")));if(this.navigationItem===undefined){this.applyFocusTo(i[0]);return}let s=i.findIndex((t=>t===this.navigationItem));if(e==="ArrowDown"){s++}else{s--}const o=i[s];this.applyFocusTo(o)}applyFocusTo(t){if(!t){return}this.navigationItem=t;setTimeout((()=>{t.shadowRoot.querySelector("ix-dropdown-item").shadowRoot.querySelector("button").focus()}))}filterItemsWithTypeahead(){this.inputFilterText=this.inputRef.value;if(this.isSingleMode&&this.inputFilterText===this.selectedLabels[0]){return}if(this.inputFilterText){this.items.forEach((t=>{t.classList.remove("d-none");if(!t.label.toLowerCase().includes(this.inputFilterText.toLowerCase())){t.classList.add("d-none")}}))}else{this.removeHiddenFromItems()}this.isDropdownEmpty=this.isEveryDropdownItemHidden}removeHiddenFromItems(){this.items.forEach((t=>{t.classList.remove("d-none")}))}clearInput(){this.inputRef.value="";this.inputFilterText=""}clear(){this.clearInput();this.selectedLabels=[];this.value=[];this.valueChange.emit(null);this.dropdownShow=false}onInputBlur(t){if(this.editable){return}if(this.isSingleMode){return}if(!this.dropdownShow&&this.mode!=="multiple"){t.target["value"]=this.selectedLabels}}placeholderValue(){if(this.editable){return this.i18nPlaceholderEditable}if(this.readonly){return""}return this.i18nPlaceholder}isAddItemVisible(){return!this.itemExists(this.inputFilterText)&&this.editable&&this.inputFilterText}render(){var t,e,o;return i(s,{key:"c3436b72b89db710173be26ccc34d44eaef48096"},i("div",{key:"19b6245bdbd79faa3d4bbf25a4d106e2084875d9",class:{select:true,disabled:this.disabled,readonly:this.readonly},ref:t=>{this.dropdownAnchor=t;if(!this.editable)this.dropdownWrapperRef=t}},i("div",{key:"283b9918b77987f4a5c943eeba63679cb4cd979c",class:"input-container"},i("div",{key:"eb809d645c40ae085805d0ec3fcbbb48534cfb2c",class:"chips"},this.isMultipleMode?(t=this.selectedItems)===null||t===void 0?void 0:t.map((t=>i("ix-filter-chip",{disabled:this.disabled||this.readonly,key:t.value,onCloseClick:e=>{e.preventDefault();e.stopPropagation();this.itemClick(t.value)}},t.label))):"",i("div",{key:"e2faa64250d72d63afaf05139a0f6ed144097f69",class:"trigger"},i("input",{key:"3aa2890f133b801bb14f8cc9d568cbee3eb83d13",autocomplete:"off","data-testid":"input",disabled:this.disabled,readOnly:this.readonly,type:"text",class:{"allow-clear":this.allowClear&&!!((e=this.selectedLabels)===null||e===void 0?void 0:e.length)},placeholder:this.placeholderValue(),value:this.inputValue,ref:t=>this.inputRef=t,onBlur:t=>this.onInputBlur(t),onFocus:()=>{this.navigationItem=undefined},onInput:()=>this.filterItemsWithTypeahead(),onKeyDown:t=>this.onKeyDown(t)}),this.allowClear&&(((o=this.selectedLabels)===null||o===void 0?void 0:o.length)||this.inputFilterText)?i("ix-icon-button",{class:"clear",icon:"clear",ghost:true,oval:true,size:"16",onClick:t=>{t.preventDefault();t.stopPropagation();this.clear()}}):null,this.disabled||this.readonly?null:i("ix-icon-button",{"data-select-dropdown":true,class:{"dropdown-visible":this.dropdownShow},icon:"chevron-down-small",ghost:true,ref:t=>{if(this.editable)this.dropdownWrapperRef=t}}))))),i("ix-dropdown",{key:"571d47a09fb16445a94a304e9fae4a1a592d078b",ref:t=>this.dropdownRef=t,show:this.dropdownShow,closeBehavior:this.isMultipleMode?"outside":"both",class:{"d-none":this.disabled||this.readonly},anchor:this.dropdownAnchor,trigger:this.dropdownWrapperRef,onShowChanged:t=>this.dropdownVisibilityChanged(t),placement:"bottom-start",overwriteDropdownStyle:async()=>({minWidth:`${this.hostElement.clientWidth}px`})},i("div",{key:"2751511a275b502709f59e600eb494cf33085d80",class:{"select-list-header":true,hidden:this.hideListHeader||this.isDropdownEmpty},title:this.i18nSelectListHeader},this.i18nSelectListHeader),i("slot",{key:"8f894985df712df0f0b0d4527ee7b136d2c84a60"}),i("div",{key:"4edce84e19a13a67defc8de67ca1e23fb7319be7",ref:t=>this.addItemRef=t,class:"d-contents"}),this.isAddItemVisible()?i("ix-dropdown-item",{"data-testid":"add-item",icon:"plus",class:{"add-item":true},label:this.inputFilterText,onItemClick:t=>{t.preventDefault();t.stopPropagation();this.emitAddItem(this.inputFilterText)}}):null,this.isDropdownEmpty&&!this.editable?i("div",{class:"select-list-header"},this.i18nNoMatches):""))}get hostElement(){return o(this)}static get watchers(){return{selectedIndices:["watchSelectedIndices"],value:["watchValue"]}}};l([r("keydown",(t=>t.dropdownShow))],a.prototype,"onKeyDown",null);a.style=h;export{a as ix_select};
+//# sourceMappingURL=p-b78fd38b.entry.js.map

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

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

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

@@ -0,0 +1,2 @@
+import{r as s,h as t,H as o}from"./p-26e9d40e.js";const e=":host{display:block}";const l=e;const c=class{constructor(t){s(this,t);this.contentVisible=false}render(){return t(o,{key:"42fe2007b429b2791c5f0a43758d55d4429c3255"},this.contentVisible?t("slot",null):null)}};c.style=l;export{c as ix_flip_tile_content};
+//# sourceMappingURL=p-b7a8f2d5.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["flipTileContentCss","IxFlipTileContentStyle0","FlipTileContent","render","h","Host","key","this","contentVisible"],"sources":["src/components/flip-tile-content/flip-tile-content.css?tag=ix-flip-tile-content&encapsulation=shadow","src/components/flip-tile-content/flip-tile-content.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\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 */\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-flip-tile-content',\n  styleUrl: 'flip-tile-content.css',\n  shadow: true,\n})\nexport class FlipTileContent {\n  /**\n   * Controls the visibility of the content\n   *\n   * @internal\n   */\n  @Prop() contentVisible = false;\n\n  render() {\n    return <Host>{this.contentVisible ? <slot></slot> : null}</Host>;\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAqB,uBAC3B,MAAAC,EAAeD,E,MCcFE,EAAe,M,6CAMD,K,CAEzB,MAAAC,GACE,OAAOC,EAACC,EAAI,CAAAC,IAAA,4CAAEC,KAAKC,eAAiBJ,EAAA,aAAgB,K"}

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

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as i,H as s}from"./p-26e9d40e.js";const o=":host{display:block;background-color:var(--theme-menu--background);border-radius:4px;position:relative;width:-moz-min-content;width:min-content}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .min-width{width:-moz-min-content;width:min-content}:host .no-padding{padding:0}:host .flex{display:flex;justify-content:center;flex-direction:column}@media (min-width: 576px){:host{min-width:-moz-max-content;min-width:max-content}:host .btn-select-date{left:unset !important}}:host .individual{box-shadow:none;border:none}:host .btn-select-date{position:absolute;bottom:1rem;right:1rem;left:1rem}";const a=o;const n=class{constructor(i){t(this,i);this.done=e(this,"done",7);this.timeChange=e(this,"timeChange",7);this.dateChange=e(this,"dateChange",7);this.dateSelect=e(this,"dateSelect",7);this.range=true;this.showHour=true;this.showMinutes=true;this.showSeconds=true;this.minDate=undefined;this.maxDate=undefined;this.dateFormat="yyyy/LL/dd";this.timeFormat="HH:mm:ss";this.from=undefined;this.to=undefined;this.time=undefined;this.showTimeReference=undefined;this.timeReference=undefined;this.textSelectDate=undefined;this.i18nDone="Done";this.weekStartIndex=0;this.locale=undefined;this.eventDelimiter=" - "}async onDone(){var t;const e=await this.datePickerElement.getCurrentDate();const i=await this.timePickerElement.getCurrentTime();this.dateSelect.emit({from:e.from,to:e.to,time:i});this.done.emit([e.from,(t=e.to)!==null&&t!==void 0?t:"",i].join(this.eventDelimiter))}async onDateChange(t){t.preventDefault();t.stopPropagation();const{detail:e}=t;this.dateChange.emit(e)}async onTimeChange(t){t.preventDefault();t.stopPropagation();const{detail:e}=t;this.timeChange.emit(e)}render(){return i(s,{key:"ced15d6ebee8f55870b7fc36283556fae3cf72fd"},i("ix-layout-grid",{key:"58e9916ce84c7ee9a3f7b930718a396cb76106f2",class:"no-padding"},i("ix-row",{key:"593109d02398fd179303b7bc3030b13b5701f769"},i("ix-col",{key:"4b6a39a1ba04096d522fc7943f72b14901e71006",class:"no-padding"},i("ix-date-picker",{key:"5ee0c7a5a45749104a23e5f3eeea44e33bd7a815",ref:t=>this.datePickerElement=t,corners:"left",range:this.range,onDateChange:t=>this.onDateChange(t),from:this.from,to:this.to,format:this.dateFormat,minDate:this.minDate,maxDate:this.maxDate,weekStartIndex:this.weekStartIndex,standaloneAppearance:false,locale:this.locale})),i("ix-col",{key:"6cbefe036d4a48efaca5a9b1a67ef801feab449f",class:"no-padding"},i("ix-time-picker",{key:"285d034e938063753075f7f55d4f63a211483f18",class:"min-width",ref:t=>this.timePickerElement=t,corners:"right",standaloneAppearance:false,showHour:this.showHour,showMinutes:this.showMinutes,showSeconds:this.showSeconds,onTimeChange:t=>this.onTimeChange(t),format:this.timeFormat,time:this.time}))),i("ix-row",{key:"24ab1e4d0cf246456d34744d14404c6bbb629d06"},i("ix-col",{key:"26daaa468b4d80e1c124f1776b7b773df4dd9b97"},i("ix-button",{key:"38f073daffa3f337e26a319d1721f67ee28db729",class:"btn-select-date btn-md-width",onClick:()=>this.onDone()},this.textSelectDate||this.i18nDone)))))}};n.style=a;export{n as ix_datetime_picker};
+//# sourceMappingURL=p-b944d015.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["datetimePickerCss","IxDatetimePickerStyle0","DatetimePicker","undefined","onDone","date","this","datePickerElement","getCurrentDate","time","timePickerElement","getCurrentTime","dateSelect","emit","from","to","done","_a","join","eventDelimiter","onDateChange","event","preventDefault","stopPropagation","detail","dateChange","onTimeChange","timeChange","render","h","Host","key","class","ref","corners","range","format","dateFormat","minDate","maxDate","weekStartIndex","standaloneAppearance","locale","showHour","showMinutes","showSeconds","timeFormat","onClick","textSelectDate","i18nDone"],"sources":["src/components/datetime-picker/datetime-picker.scss?tag=ix-datetime-picker&encapsulation=shadow","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@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: block;\n  background-color: var(--theme-menu--background);\n  border-radius: 4px;\n  position: relative;\n  width: min-content;\n\n  .min-width {\n    width: min-content;\n  }\n\n  .no-padding {\n    padding: 0;\n  }\n\n  .flex {\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n  }\n\n  @media (min-width: 576px) {\n    min-width: max-content;\n\n    .btn-select-date {\n      left: unset !important;\n    }\n\n  }\n\n  .individual {\n    box-shadow: none;\n    border: none;\n  }\n\n  .btn-select-date {\n    position: absolute;\n    bottom: $default-space;\n    right: $default-space;\n    left: $default-space;\n  }\n\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport type { DateChangeEvent } from '../date-picker/date-picker';\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  shadow: true,\n})\nexport class DatetimePicker {\n  /**\n   * If true a date-range can be selected (from/to).\n   */\n  @Prop() range = true;\n\n  /**\n   * Show hour input\n   */\n  @Prop() showHour = true;\n\n  /**\n   * Show minutes input\n   */\n  @Prop() showMinutes = true;\n\n  /**\n   * Show seconds input\n   */\n  @Prop() showSeconds = true;\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 = 'HH:mm:ss';\n\n  /**\n   * The selected starting date. If the picker is not in range mode this is the selected date.\n   * Format has to match the `format` property.\n   *\n   * @since 1.1.0\n   */\n  @Prop() from: string | undefined;\n\n  /**\n   * The selected end date. If the the picker is not in range mode this property has no impact.\n   * Format has to match the `format` property.\n   *\n   * @since 1.1.0\n   */\n  @Prop() to: string | undefined;\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   * Set time reference\n   */\n  @Prop() timeReference: 'AM' | 'PM';\n\n  /**\n   * Text of date select button\n   *\n   * @since 1.1.0\n   * @deprecated since 2.1.0. Use `i18nDone`\n   */\n  @Prop() textSelectDate: string;\n\n  /**\n   * Text of date select button\n   *\n   * @since 2.1.0\n   */\n  @Prop({ attribute: 'i18n-done' }) i18nDone: string = 'Done';\n\n  /**\n   * The index of which day to start the week on, based on the Locale#weekdays array.\n   * E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.\n   *\n   * @since 2.1.0\n   */\n  @Prop() weekStartIndex = 0;\n\n  /**\n   * Format of time string\n   * See {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens.\n   *\n   * @since 2.1.0\n   */\n  @Prop() locale: string = 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   * @deprecated Not used anymore see `done` event\n   */\n  @Prop() eventDelimiter = ' - ';\n\n  /**\n   * Done event\n   *\n   * Set `doneEventDelimiter` to null or undefine to get the typed event\n   * @deprecated Use `this.dateChange`\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   * Datetime selection event is fired after confirm button is pressed\n   *\n   * @since 1.1.0\n   */\n  @Event() dateSelect: EventEmitter<DateTimeSelectEvent>;\n\n  private datePickerElement: HTMLIxDatePickerElement;\n  private timePickerElement: HTMLIxTimePickerElement;\n\n  private async onDone() {\n    const date = await this.datePickerElement.getCurrentDate();\n    const time = await this.timePickerElement.getCurrentTime();\n\n    this.dateSelect.emit({\n      from: date.from,\n      to: date.to,\n      time: time,\n    });\n\n    this.done.emit([date.from, date.to ?? '', time].join(this.eventDelimiter));\n  }\n\n  private async onDateChange(event: CustomEvent<string | DateChangeEvent>) {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const { detail: date } = event;\n    this.dateChange.emit(date);\n  }\n\n  private async onTimeChange(event: CustomEvent<string>) {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const { detail: time } = event;\n    this.timeChange.emit(time);\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-layout-grid class=\"no-padding\">\n          <ix-row>\n            <ix-col class=\"no-padding\">\n              <ix-date-picker\n                ref={(ref) => (this.datePickerElement = ref)}\n                corners=\"left\"\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                weekStartIndex={this.weekStartIndex}\n                standaloneAppearance={false}\n                locale={this.locale}\n              ></ix-date-picker>\n            </ix-col>\n\n            <ix-col class=\"no-padding\">\n              <ix-time-picker\n                class=\"min-width\"\n                ref={(ref) => (this.timePickerElement = ref)}\n                corners=\"right\"\n                standaloneAppearance={false}\n                showHour={this.showHour}\n                showMinutes={this.showMinutes}\n                showSeconds={this.showSeconds}\n                onTimeChange={(event) => this.onTimeChange(event)}\n                format={this.timeFormat}\n                time={this.time}\n              ></ix-time-picker>\n            </ix-col>\n          </ix-row>\n          <ix-row>\n            <ix-col>\n              <ix-button\n                class=\"btn-select-date btn-md-width\"\n                onClick={() => this.onDone()}\n              >\n                {this.textSelectDate || this.i18nDone}\n              </ix-button>\n            </ix-col>\n          </ix-row>\n        </ix-layout-grid>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAoB,koCAC1B,MAAAC,EAAeD,E,MC0BFE,EAAc,M,oLAIT,K,cAKG,K,iBAKG,K,iBAKA,K,8DAwBO,a,gBAQA,W,iFA+BDC,U,yEAoByB,O,oBAQ5B,E,YAQAA,U,oBASA,K,CAkCjB,YAAMC,G,MACZ,MAAMC,QAAaC,KAAKC,kBAAkBC,iBAC1C,MAAMC,QAAaH,KAAKI,kBAAkBC,iBAE1CL,KAAKM,WAAWC,KAAK,CACnBC,KAAMT,EAAKS,KACXC,GAAIV,EAAKU,GACTN,KAAMA,IAGRH,KAAKU,KAAKH,KAAK,CAACR,EAAKS,MAAMG,EAAAZ,EAAKU,MAAE,MAAAE,SAAA,EAAAA,EAAI,GAAIR,GAAMS,KAAKZ,KAAKa,gB,CAGpD,kBAAMC,CAAaC,GACzBA,EAAMC,iBACND,EAAME,kBAEN,MAAQC,OAAQnB,GAASgB,EACzBf,KAAKmB,WAAWZ,KAAKR,E,CAGf,kBAAMqB,CAAaL,GACzBA,EAAMC,iBACND,EAAME,kBAEN,MAAQC,OAAQf,GAASY,EACzBf,KAAKqB,WAAWd,KAAKJ,E,CAGvB,MAAAmB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,kBAAAE,IAAA,2CAAgBC,MAAM,cACpBH,EAAA,UAAAE,IAAA,4CACEF,EAAA,UAAAE,IAAA,2CAAQC,MAAM,cACZH,EAAA,kBAAAE,IAAA,2CACEE,IAAMA,GAAS3B,KAAKC,kBAAoB0B,EACxCC,QAAQ,OACRC,MAAO7B,KAAK6B,MACZf,aAAeC,GAAUf,KAAKc,aAAaC,GAC3CP,KAAMR,KAAKQ,KACXC,GAAIT,KAAKS,GACTqB,OAAQ9B,KAAK+B,WACbC,QAAShC,KAAKgC,QACdC,QAASjC,KAAKiC,QACdC,eAAgBlC,KAAKkC,eACrBC,qBAAsB,MACtBC,OAAQpC,KAAKoC,UAIjBb,EAAA,UAAAE,IAAA,2CAAQC,MAAM,cACZH,EAAA,kBAAAE,IAAA,2CACEC,MAAM,YACNC,IAAMA,GAAS3B,KAAKI,kBAAoBuB,EACxCC,QAAQ,QACRO,qBAAsB,MACtBE,SAAUrC,KAAKqC,SACfC,YAAatC,KAAKsC,YAClBC,YAAavC,KAAKuC,YAClBnB,aAAeL,GAAUf,KAAKoB,aAAaL,GAC3Ce,OAAQ9B,KAAKwC,WACbrC,KAAMH,KAAKG,SAIjBoB,EAAA,UAAAE,IAAA,4CACEF,EAAA,UAAAE,IAAA,4CACEF,EAAA,aAAAE,IAAA,2CACEC,MAAM,+BACNe,QAAS,IAAMzC,KAAKF,UAEnBE,KAAK0C,gBAAkB1C,KAAK2C,a"}

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

@@ -0,0 +1,2 @@
+import{T as e}from"./p-c4749812.js";var t=undefined&&undefined.__classPrivateFieldGet||function(e,t,r,n){if(r==="a"&&!n)throw new TypeError("Private accessor was defined without a getter");if(typeof t==="function"?e!==t||!n:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return r==="m"?n:r==="a"?n.call(e):n?n.value:t.get(e)};var r=undefined&&undefined.__classPrivateFieldSet||function(e,t,r,n,i){if(n==="m")throw new TypeError("Private method is not writable");if(n==="a"&&!i)throw new TypeError("Private accessor was defined without a setter");if(typeof t==="function"?e!==t||!i:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return n==="a"?i.call(e,r):i?i.value=r:t.set(e,r),r};var n,i,a;class s{constructor(){n.set(this,null);i.set(this,new e);a.set(this,false)}register(e){if(t(this,n,"f")){console.warn("Menu already defined");return}r(this,n,e,"f");t(this,n,"f").addEventListener("expandChange",(e=>{t(this,i,"f").emit(e.detail)}))}setIsPinned(e){r(this,a,e,"f")}async open(){if(t(this,n,"f")){t(this,n,"f").toggleMenu(true);return true}return false}async close(){if(t(this,n,"f")){t(this,n,"f").toggleMenu(false);return true}return false}async toggle(){if(t(this,n,"f")){t(this,n,"f").toggleMenu();return true}return false}get nativeElement(){return t(this,n,"f")}get expandChange(){return t(this,i,"f")}get isPinned(){return t(this,a,"f")}}n=new WeakMap,i=new WeakMap,a=new WeakMap;const f=new s;export{f as m};
+//# sourceMappingURL=p-c146af8e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["MenuService","constructor","_MenuService_menuElement","set","this","_MenuService_menuExpandChange","TypedEvent","_MenuService_isPinned","register","menuElement","__classPrivateFieldGet","console","warn","__classPrivateFieldSet","addEventListener","event","emit","detail","setIsPinned","pinned","open","toggleMenu","close","toggle","nativeElement","expandChange","isPinned","menuController"],"sources":["src/components/utils/menu-service/menu-service.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 { TypedEvent } from '../typed-event';\n\nclass MenuService {\n  #menuElement: HTMLIxMenuElement | null = null;\n  #menuExpandChange = new TypedEvent<boolean>();\n  #isPinned = false;\n\n  register(menuElement: HTMLIxMenuElement) {\n    if (this.#menuElement) {\n      console.warn('Menu already defined');\n      return;\n    }\n    this.#menuElement = menuElement;\n    this.#menuElement.addEventListener(\n      'expandChange',\n      (event: CustomEvent<boolean>) => {\n        this.#menuExpandChange.emit(event.detail);\n      }\n    );\n  }\n\n  public setIsPinned(pinned: boolean) {\n    this.#isPinned = pinned;\n  }\n\n  public async open() {\n    if (this.#menuElement) {\n      this.#menuElement.toggleMenu(true);\n      return true;\n    }\n\n    return false;\n  }\n\n  public async close() {\n    if (this.#menuElement) {\n      this.#menuElement.toggleMenu(false);\n      return true;\n    }\n\n    return false;\n  }\n\n  public async toggle() {\n    if (this.#menuElement) {\n      this.#menuElement.toggleMenu();\n      return true;\n    }\n\n    return false;\n  }\n\n  get nativeElement() {\n    return this.#menuElement;\n  }\n\n  get expandChange() {\n    return this.#menuExpandChange;\n  }\n\n  get isPinned() {\n    return this.#isPinned;\n  }\n}\n\nexport const menuController = new MenuService();\n"],"mappings":"wyBAWA,MAAMA,EAAN,WAAAC,GACEC,EAAAC,IAAAC,KAAyC,MACzCC,EAAAF,IAAAC,KAAoB,IAAIE,GACxBC,EAAAJ,IAAAC,KAAY,M,CAEZ,QAAAI,CAASC,GACP,GAAIC,EAAAN,KAAIF,EAAA,KAAe,CACrBS,QAAQC,KAAK,wBACb,M,CAEFC,EAAAT,KAAIF,EAAgBO,EAAW,KAC/BC,EAAAN,KAAIF,EAAA,KAAcY,iBAChB,gBACCC,IACCL,EAAAN,KAAIC,EAAA,KAAmBW,KAAKD,EAAME,OAAO,G,CAKxC,WAAAC,CAAYC,GACjBN,EAAAT,KAAIG,EAAaY,EAAM,I,CAGlB,UAAMC,GACX,GAAIV,EAAAN,KAAIF,EAAA,KAAe,CACrBQ,EAAAN,KAAIF,EAAA,KAAcmB,WAAW,MAC7B,OAAO,I,CAGT,OAAO,K,CAGF,WAAMC,GACX,GAAIZ,EAAAN,KAAIF,EAAA,KAAe,CACrBQ,EAAAN,KAAIF,EAAA,KAAcmB,WAAW,OAC7B,OAAO,I,CAGT,OAAO,K,CAGF,YAAME,GACX,GAAIb,EAAAN,KAAIF,EAAA,KAAe,CACrBQ,EAAAN,KAAIF,EAAA,KAAcmB,aAClB,OAAO,I,CAGT,OAAO,K,CAGT,iBAAIG,GACF,OAAOd,EAAAN,KAAIF,EAAA,I,CAGb,gBAAIuB,GACF,OAAOf,EAAAN,KAAIC,EAAA,I,CAGb,YAAIqB,GACF,OAAOhB,EAAAN,KAAIG,EAAA,I,kDAIFoB,EAAiB,IAAI3B,S"}

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

@@ -0,0 +1,2 @@
+import{r,h as t,H as o,g as s}from"./p-26e9d40e.js";import{a as e}from"./p-71206084.js";import{A as a}from"./p-46a6cd9d.js";const i=":host{display:block;position:relative;width:22rem;height:100%;padding:0}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host(.visible){border-right:2px solid var(--theme-color-soft-bdr);padding:1.5rem 0.5rem 0}";const b=i;const l=class{constructor(t){r(this,t);this.visible=true}listenToggleEvent(){const r=!this.visible;const t={targets:this.hostElement,width:r?["0","22rem"]:["22rem","0"],opacity:r?[0,1]:[1,0],easing:"easeInSine",duration:a.defaultTime};const o=()=>{this.visible=r};if(r){t.begin=o.bind(this)}else{t.complete=o.bind(this)}e(t)}render(){return t(o,{key:"e05ab4ea0d3e6f05f115616bae74208fef0c701d",slot:"application-sidebar",class:{visible:this.visible}},this.visible?t("slot",null):null)}get hostElement(){return s(this)}};l.style=b;export{l as ix_application_sidebar};
+//# sourceMappingURL=p-c1bd5d78.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["applicationSidebarCss","IxApplicationSidebarStyle0","ApplicationSidebar","listenToggleEvent","visibility","this","visible","animation","targets","hostElement","width","opacity","easing","duration","Animation","defaultTime","changeVisibility","begin","bind","complete","anime","render","h","Host","key","slot","class"],"sources":["src/components/application-sidebar/application-sidebar.scss?tag=ix-application-sidebar&encapsulation=shadow","src/components/application-sidebar/application-sidebar.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: block;\n  position: relative;\n\n  width: 22rem;\n  height: 100%;\n\n  padding: 0;\n}\n\n:host(.visible) {\n  border-right: 2px solid var(--theme-color-soft-bdr);\n  padding: 1.5rem 0.5rem 0;\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, Listen, State } from '@stencil/core';\nimport anime from 'animejs';\nimport Animation from '../utils/animation';\n\n/** @internal */\n@Component({\n  tag: 'ix-application-sidebar',\n  styleUrl: 'application-sidebar.scss',\n  shadow: true,\n})\nexport class ApplicationSidebar {\n  @Element() hostElement!: HTMLIxApplicationSidebarElement;\n\n  @State() visible = true;\n\n  @Listen('application-sidebar-toggle', {\n    target: 'window',\n  })\n  listenToggleEvent() {\n    const visibility = !this.visible;\n    const animation: anime.AnimeParams = {\n      targets: this.hostElement,\n      width: visibility ? ['0', '22rem'] : ['22rem', '0'],\n      opacity: visibility ? [0, 1] : [1, 0],\n      easing: 'easeInSine',\n      duration: Animation.defaultTime,\n    };\n\n    const changeVisibility = () => {\n      this.visible = visibility;\n    };\n\n    if (visibility) {\n      animation.begin = changeVisibility.bind(this);\n    } else {\n      animation.complete = changeVisibility.bind(this);\n    }\n\n    anime(animation);\n  }\n\n  render() {\n    return (\n      <Host\n        slot=\"application-sidebar\"\n        class={{\n          visible: this.visible,\n        }}\n      >\n        {this.visible ? <slot></slot> : null}\n      </Host>\n    );\n  }\n}\n"],"mappings":"4HAAA,MAAMA,EAAwB,kwBAC9B,MAAAC,EAAeD,E,MCkBFE,EAAkB,M,sCAGV,I,CAKnB,iBAAAC,GACE,MAAMC,GAAcC,KAAKC,QACzB,MAAMC,EAA+B,CACnCC,QAASH,KAAKI,YACdC,MAAON,EAAa,CAAC,IAAK,SAAW,CAAC,QAAS,KAC/CO,QAASP,EAAa,CAAC,EAAG,GAAK,CAAC,EAAG,GACnCQ,OAAQ,aACRC,SAAUC,EAAUC,aAGtB,MAAMC,EAAmB,KACvBX,KAAKC,QAAUF,CAAU,EAG3B,GAAIA,EAAY,CACdG,EAAUU,MAAQD,EAAiBE,KAAKb,K,KACnC,CACLE,EAAUY,SAAWH,EAAiBE,KAAKb,K,CAG7Ce,EAAMb,E,CAGR,MAAAc,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,sBACLC,MAAO,CACLpB,QAASD,KAAKC,UAGfD,KAAKC,QAAUgB,EAAA,aAAgB,K"}

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

@@ -0,0 +1,2 @@
+import{r as e,f as t,h as r,H as i,c as o,F as a,g as s}from"./p-26e9d40e.js";import{m as d}from"./p-68a274e7.js";import{D as n,I as c}from"./p-f5e574da.js";import{O as h}from"./p-ced10144.js";const l=":host{position:relative;flex-basis:0;flex-grow:1;width:100%;max-width:100%;min-height:1px;padding:calc(var(--ix-layout-grid-gutter) * 0.5)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}";const u=l;const b=class{constructor(t){e(this,t);this.size=undefined;this.sizeSm=undefined;this.sizeMd=undefined;this.sizeLg=undefined}onResize(){t(this)}getSize(e){if(e===""){return this.size}if(e==="sm"){return this.sizeSm}if(e==="md"){return this.sizeMd}if(e==="lg"){return this.sizeLg}}getColumnSize(){let e;b.Breakpoints.forEach((t=>{const r=t!==""?d(t):true;if(!r){return}const i=this.getSize(t);if(i){e=i}}));return e}getColumnSizeStyling(){const e=this.getColumnSize();if(!e){return}if(e==="auto"){return{flex:"0 0 auto",width:"auto","max-width":"auto"}}const t=`calc(calc(${e} / var(--ix-layout-grid-columns)) * 100%)`;return{flex:`0 0 ${t}`,width:`${t}`,"max-width":`${t}`}}render(){return r(i,{key:"7cbf750f0768a0a1db65aa2651605c89f82ce604",style:Object.assign({},this.getColumnSizeStyling())},r("slot",{key:"d83749089de332574097a8299c265d45b1fd8da7"}))}};b.Breakpoints=["","sm","md","lg"];b.style=u;const f=":host{display:block;position:relative;width:22rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .header{display:flex;align-items:center;justify-content:space-between}:host .disabled-item{pointer-events:none;background-color:var(--theme-datepicker-day--background--disabled);color:var(--theme-datepicker-day--color--disabled);cursor:default}:host .selector{flex-basis:100%;display:flex;align-items:center;justify-content:center;padding:0.25rem 1rem}:host .selector .dropdown{color:var(--theme-menu-item--color);font-size:14px;line-height:20px}:host .selector .fontSize{font-size:16px}:host .selector .capitalize{text-transform:capitalize}:host .selector .month-dropdown-item{margin-left:4px;margin-right:4px}:host .selector .month-dropdown-item:focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .selector .arrowYear{display:flex;position:relative;padding:0.75rem 2rem;align-items:center;cursor:pointer}:host .selector .arrowYear:hover{background-color:var(--theme-select-list-item--background--hover)}:host .selector .arrowYear.selected{background-color:var(--theme-select-list-item--background--selected)}:host .selector .arrowYear .arrowPosition{position:absolute;left:calc(1rem - 6px);top:calc(50% - 6px)}:host .selector .arrowYear .checkPosition{position:absolute;left:calc(1rem - 6px);top:calc(50% - 8px)}:host .selector .arrowYear .monthMargin{margin-left:10px}:host .wrapper{display:flex}:host .wrapper .overflow{overflow-y:scroll;max-height:250px}:host .grid{display:grid;grid-template-columns:repeat(8, 40px);grid-template-rows:repeat(7, 40px);align-items:center;justify-items:center;justify-content:center;color:var(--theme-datepicker-today--color)}:host .grid .calendar-item{position:relative;display:flex;justify-content:center;align-items:center;background-color:var(--theme-datepicker-day--background);border:1px solid var(--theme-datepicker-day--background);width:40px;height:40px;cursor:pointer}:host .grid .calendar-item:focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .grid .calendar-item.today{border:1px solid var(--theme-datepicker-today--border-color)}:host .grid .calendar-item.today:hover{background-color:var(--theme-datepicker-day--background--hover)}:host .grid .calendar-item.today:active{background-color:var(--theme-datepicker-day--background--active)}:host .grid .calendar-item.today.selected{box-shadow:inset 0 0 0 1px white}:host .grid .calendar-item.today.selected:hover{background-color:var(--theme-datepicker-day--background--selected-hover)}:host .grid .calendar-item.today.selected:active{background-color:var(--theme-datepicker-day--background--selected-active)}:host .grid .calendar-item.today.selected.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--selected-disabled);border:1px solid var(--theme-datepicker-day--background--selected-disabled);color:var(--theme-datepicker-day--color--selected-disabled)}:host .grid .calendar-item.today.range{background-color:var(--theme-datepicker-day--background--range);color:var(--theme-datepicker-day--color--range);border:1px solid var(--theme-datepicker-today--border-color--range);box-shadow:inset 0 0 0 1px white}:host .grid .calendar-item.today.range:hover{background-color:var(--theme-datepicker-day--background--range-hover);border:1px solid var(--theme-datepicker-today--border-color--range-hover)}:host .grid .calendar-item.today.range:active{background-color:var(--theme-datepicker-day--background--range-active);border:1px solid var(--theme-datepicker-today--border-color--range-active)}:host .grid .calendar-item.today.range.disabled{background-color:var(--theme-datepicker-day--background--range-disabled);color:var(--theme-datepicker-day--color--range-disabled);border:1px solid var(--theme-datepicker-today--border-color--range-disabled)}:host .grid .calendar-item.today.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--disabled);color:var(--theme-datepicker-day--color--disabled);cursor:default}:host .grid .calendar-item:hover{background-color:var(--theme-datepicker-day--background--hover)}:host .grid .calendar-item:active{background-color:var(--theme-datepicker-day--background--active)}:host .grid .calendar-item.selected{background-color:var(--theme-datepicker-day--background--selected);color:var(--theme-datepicker-day--color--selected);border:1px solid var(--theme-datepicker-day--background--selected)}:host .grid .calendar-item.selected:hover{background-color:var(--theme-datepicker-day--background--selected-hover)}:host .grid .calendar-item.selected:active{background-color:var(--theme-datepicker-day--background--selected-active)}:host .grid .calendar-item.selected.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--selected-disabled);color:var(--theme-datepicker-day--color--selected-disabled)}:host .grid .calendar-item.range{background-color:var(--theme-datepicker-day--background--range);color:var(--theme-datepicker-day--color--range)}:host .grid .calendar-item.range:hover{background-color:var(--theme-datepicker-day--background--range-hover)}:host .grid .calendar-item.range:active{background-color:var(--theme-datepicker-day--background--range-active)}:host .grid .calendar-item.range.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--range-disabled);color:var(--theme-datepicker-day--color--range-disabled)}:host .grid .calendar-item.disabled{pointer-events:none;background-color:var(--theme-datepicker-day--background--disabled);color:var(--theme-datepicker-day--color--disabled)}:host .grid .calendar-item.week-day{color:var(--theme-datepicker-weekday--color);font-size:12px;line-height:20px;border:none;background:none;cursor:initial}:host .grid .calendar-item.empty-day{border:none;background:none;cursor:initial}:host .grid .calendar-item.week-number{font-size:10px;line-height:14px;color:var(--theme-datepicker-weekday--color);border:none;background:none;cursor:initial}:host .grid .calendar-item:focus-visible{background-color:var(--theme-datepicker-day--background--selected);border:inset 1px solid var(--theme-datepicker-day--border-color--selected);color:var(--theme-datepicker-day--color--selected);font-size:14px;line-height:20px;letter-spacing:0}:host .button{display:flex;justify-content:flex-end}:host .hidden{display:none}";const g=f;var m=undefined&&undefined.__decorate||function(e,t,r,i){var o=arguments.length,a=o<3?t:i===null?i=Object.getOwnPropertyDescriptor(t,r):i,s;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")a=Reflect.decorate(e,t,r,i);else for(var d=e.length-1;d>=0;d--)if(s=e[d])a=(o<3?s(a):o>3?s(t,r,a):s(t,r))||a;return o>3&&a&&Object.defineProperty(t,r,a),a};const k=class{constructor(t){e(this,t);this.dateChange=o(this,"dateChange",7);this.dateRangeChange=o(this,"dateRangeChange",7);this.dateSelect=o(this,"dateSelect",7);this.done=o(this,"done",7);this.DAYS_IN_WEEK=7;this.format="yyyy/LL/dd";this.range=true;this.corners="rounded";this.from=undefined;this.to=undefined;this.minDate=undefined;this.maxDate=undefined;this.textSelectDate=undefined;this.i18nDone="Done";this.weekStartIndex=0;this.locale=undefined;this.individual=true;this.eventDelimiter=" - ";this.standaloneAppearance=true;this.today=n.now().toISO();this.currFromDate=undefined;this.currToDate=undefined;this.selectedYear=undefined;this.tempYear=undefined;this.startYear=undefined;this.endYear=undefined;this.selectedMonth=undefined;this.tempMonth=undefined;this.dropdownButtonRef=undefined;this.yearContainerRef=undefined;this.dayNames=undefined;this.monthNames=undefined;this.firstMonthRef=undefined;this.focusedDay=1;this.focusedDayElem=undefined}watchFromPropHandler(e){var t;this.currFromDate=e?n.fromFormat(e,this.format):undefined;if((t=this.currFromDate)===null||t===void 0?void 0:t.isValid){this.selectedYear=this.currFromDate.year;this.selectedMonth=this.currFromDate.month-1}}watchToPropHandler(e){var t;this.currToDate=e?n.fromFormat(e,this.format):undefined;if((t=this.currToDate)===null||t===void 0?void 0:t.isValid){this.selectedYear=this.currToDate.year;this.selectedMonth=this.currToDate.month-1}}onLocaleChange(){this.setTranslations()}async getCurrentDate(){var e,t,r,i;const o=((e=this.currFromDate)===null||e===void 0?void 0:e.isValid)?(t=this.currFromDate)===null||t===void 0?void 0:t.toFormat(this.format):undefined;const a=((r=this.currToDate)===null||r===void 0?void 0:r.isValid)?(i=this.currToDate)===null||i===void 0?void 0:i.toFormat(this.format):undefined;if(this.range){return{from:o,to:a}}return{from:o,to:undefined}}handleKeyUp(e){if(!this.isDayFocus){return}let t=this.focusedDay;switch(e.key){case"ArrowLeft":t--;break;case"ArrowRight":t++;break;case"ArrowUp":t=t-7;break;case"ArrowDown":t=t+7;break;default:return}if(t>this.getDaysInCurrentMonth()){t=t-this.getDaysInCurrentMonth();this.changeToAdjacentMonth(1);this.monthChangedFromFocus=true}else if(t<1){this.changeToAdjacentMonth(-1);t=t+this.getDaysInCurrentMonth();this.monthChangedFromFocus=true}this.focusedDay=t}getDaysInCurrentMonth(){return n.utc(this.selectedYear,this.selectedMonth+1).daysInMonth}getDateTimeNow(){return n.fromISO(this.today)}onDayBlur(){this.isDayFocus=false}onDayFocus(){this.isDayFocus=true}componentWillLoad(){var e,t,r,i;this.setTranslations();this.currFromDate=this.from?n.fromFormat(this.from,this.format):undefined;this.currToDate=this.to?n.fromFormat(this.to,this.format):undefined;const o=(t=(e=this.currFromDate)===null||e===void 0?void 0:e.year)!==null&&t!==void 0?t:this.getDateTimeNow().year;this.startYear=o-5;this.endYear=o+5;this.selectedMonth=((i=(r=this.currFromDate)===null||r===void 0?void 0:r.month)!==null&&i!==void 0?i:this.getDateTimeNow().month)-1;this.selectedYear=o;this.tempMonth=this.selectedMonth;this.tempYear=this.selectedYear}componentWillRender(){this.calculateCalendar()}componentDidRender(){if(!this.monthChangedFromFocus&&!this.isDayFocus){return}const e=this.hostElement.shadowRoot.querySelector(`[id=day-cell-${this.focusedDay}]`);e.focus()}setTranslations(){this.dayNames=this.rotateWeekDayNames(c.weekdays("long",{locale:this.locale}),this.weekStartIndex);this.monthNames=c.months("long",{locale:this.locale})}rotateWeekDayNames(e,t){const r=[...e];if(t===0){return r}t=-t;const i=e.length;r.push(...r.splice(0,(-t%i+i)%i));return r}async onDone(){const e=await this.getCurrentDate();this.dateSelect.emit(e)}calculateCalendar(){const e=[];const t=n.utc(this.selectedYear,this.selectedMonth+1);const r=t.startOf("month");const i=t.endOf("month");let o=r.weekNumber;let a=i.weekNumber;let s=r.weekday-1;let d=i.weekday-1;if(this.weekStartIndex!==0){const e=c.weekdays();const t=e[r.weekday];s=this.dayNames.findIndex((e=>e===t));const o=e[i.weekday];d=this.dayNames.findIndex((e=>e===o))}let h=false;if(a===1){a=i.weeksInWeekYear+1;h=true}let l=false;if(o===r.weeksInWeekYear){o=1;a++;l=true}let u=1;for(let t=o;t<=a&&u<=31;t++){const n=[];for(let e=0;e<this.DAYS_IN_WEEK&&u<=31;e++){if(t===o&&e<s||t===a&&e>d){n.push(undefined)}else{n.push(u++)}}if(l||h){if(t===1){e.push({weekNumber:r.weeksInWeekYear,dayNumbers:n})}else if(t===i.weekNumber){e.push({weekNumber:1,dayNumbers:n})}else{e.push({weekNumber:t-1,dayNumbers:n})}continue}e.push({weekNumber:t,dayNumbers:n})}this.calendar=e}selectTempYear(e,t){e===null||e===void 0?void 0:e.stopPropagation();this.tempYear=t}focusMonth(){this.firstMonthRef.focus()}infiniteScrollYears(){const e=this.yearContainerRef.scrollTop;const t=this.yearContainerRef.scrollHeight;const r=e===0;const i=Math.round(e+this.yearContainerRef.offsetHeight)>=t;const o=200;if(this.endYear-this.startYear>o)return;if(r){const e=this.yearContainerRef.firstElementChild;this.startYear-=5;this.yearContainerRef.scrollTo(0,e.offsetTop);return}if(i){const e=this.yearContainerRef.lastElementChild;this.endYear+=5;this.yearContainerRef.scrollTo(0,e.offsetTop)}}selectMonth(e){this.selectedMonth=e;this.selectedYear=this.tempYear;this.tempMonth=e;this.hostElement.shadowRoot.querySelector("ix-dropdown").show=false}changeToAdjacentMonth(e){if(this.selectedMonth+e<0){this.selectedYear--;this.selectedMonth=11}else if(this.selectedMonth+e>11){this.selectedYear++;this.selectedMonth=0}else{this.selectedMonth+=e}}selectDay(e){const t=n.fromJSDate(new Date(this.selectedYear,this.selectedMonth,e));if(!this.range||this.currFromDate===undefined){this.currFromDate=t;this.onDateChange();return}if(this.currToDate!==undefined){this.currFromDate=t;this.currToDate=undefined;this.onDateChange();return}if(t<this.currFromDate){this.currToDate=this.currFromDate;this.currFromDate=t;this.onDateChange();return}this.currToDate=t;this.onDateChange()}onDateChange(){this.getCurrentDate().then((e=>{this.dateChange.emit(e);if(this.range){this.dateRangeChange.emit(e)}}))}getDayClasses(e){var t,r,i,o;if(!e){return}const a=this.getDateTimeNow();const s=n.fromJSDate(new Date(this.selectedYear,this.selectedMonth,e));return{"calendar-item":true,"empty-day":e===undefined,today:a.hasSame(s,"day"),selected:((t=this.currFromDate)===null||t===void 0?void 0:t.hasSame(s,"day"))||((r=this.currToDate)===null||r===void 0?void 0:r.hasSame(s,"day")),range:s.startOf("day")>((i=this.currFromDate)===null||i===void 0?void 0:i.startOf("day"))&&this.currToDate!==undefined&&s.startOf("day")<((o=this.currToDate)===null||o===void 0?void 0:o.startOf("day")),disabled:!this.isWithinMinMaxDate(s)}}isWithinMinMaxYear(e){const t=this.minDate?n.fromFormat(this.minDate,this.format).year:undefined;const r=this.maxDate?n.fromFormat(this.maxDate,this.format).year:undefined;const i=t?e<t:false;const o=r?e>r:false;return!i&&!o}isWithinMinMaxMonth(e){const t=this.minDate?n.fromFormat(this.minDate,this.format):undefined;const r=this.maxDate?n.fromFormat(this.maxDate,this.format):undefined;const i=t===null||t===void 0?void 0:t.month;const o=r===null||r===void 0?void 0:r.month;const a=i?this.tempYear===t.year&&e<i:false;const s=o?this.tempYear===r.year&&e>o:false;return!a&&!s}isWithinMinMaxDate(e){const t=this.minDate?n.fromFormat(this.minDate,this.format):undefined;const r=this.maxDate?n.fromFormat(this.maxDate,this.format):undefined;const i=t?e.startOf("day")<t.startOf("day"):false;const o=r?e.startOf("day")>r.startOf("day"):false;return!i&&!o}renderYears(){const e=[];for(let t=this.startYear;t<=this.endYear;t++){e.push(r("div",{key:t,class:{arrowYear:true,"month-dropdown-item":true,"disabled-item":!this.isWithinMinMaxYear(t)},onClick:e=>this.selectTempYear(e,t),onKeyUp:e=>{if(e.key==="Enter"){this.selectTempYear(null,t);this.focusMonth()}},tabIndex:0},r("ix-icon",{class:{hidden:this.tempYear!==t,arrowPosition:true},name:"chevron-right",size:"12"}),r("div",{style:{"min-width":"max-content"}},`${t}`)))}return e}render(){return r(i,{key:"e0df5b93b72e32d28ca514b5476f9846b22677c6"},r("ix-date-time-card",{key:"774585ed8c03e12463112ca9e9e44bc30975e8fc",corners:this.corners,standaloneAppearance:this.standaloneAppearance},r("div",{key:"c3710f386338c7410ecb72b42e1a9d4e1d35a3f1",class:"header",slot:"header"},r("ix-icon-button",{key:"70f05d88185459dae9b43e07cc353e61744958b5",onClick:()=>this.changeToAdjacentMonth(-1),ghost:true,icon:"chevron-left",variant:"primary",class:"arrows"}),r("div",{key:"a2237156758b789edd16a2328d12240a74a36d58",class:"selector"},r("ix-button",{key:"297934668f6bbbdd31f28bc16de75e00c2bc9698",ghost:true,ref:e=>this.dropdownButtonRef=e},r("span",{key:"6cccf46d9712970aa98416aec50727796835953e",class:"fontSize capitalize"},this.monthNames[this.selectedMonth]," ",this.selectedYear)),r("ix-dropdown",{key:"85057c5a516639057dd3ee3923243f0d0aecac49",class:"dropdown",trigger:this.dropdownButtonRef,placement:"bottom-start"},r("div",{key:"5afeb00b22a6e13918da4e45b1ba3ea526fadf37",class:"wrapper"},r("div",{key:"3193106b8758960329bd9627599e748bd30b3793",class:"overflow",onScroll:()=>this.infiniteScrollYears(),ref:e=>this.yearContainerRef=e},this.renderYears()),r("div",{key:"57c3e7de1f03942e1022f5d6a72cc066265ed92b",class:"overflow"},this.monthNames.map(((e,t)=>r("div",{key:e,ref:t=>{if(e===this.monthNames[0]){this.firstMonthRef=t}},class:{arrowYear:true,"month-dropdown-item":true,selected:this.tempYear===this.selectedYear&&this.tempMonth===t,"disabled-item":!this.isWithinMinMaxMonth(t)},onClick:()=>this.selectMonth(t),onKeyUp:e=>e.key==="Enter"&&this.selectMonth(t),tabIndex:0},r("ix-icon",{class:{hidden:this.tempYear!==this.selectedYear||this.tempMonth!==t,checkPosition:true},name:"single-check",size:"16"}),r("div",null,r("span",{class:"capitalize monthMargin"},`${e} ${this.tempYear}`))))))))),r("ix-icon-button",{key:"89642ef180a0f2fbf8ef3d9e89e7a81110715a83",onClick:()=>this.changeToAdjacentMonth(1),ghost:true,icon:"chevron-right",variant:"primary",class:"arrows"})),r("div",{key:"0b5d707534c8f295f408f0cafe73a8ab7d3cd20b",class:"grid"},r("div",{key:"b90abf2daf7a3481071dcf2b7bf94c329bed7b05",class:"calendar-item week-day"}),this.dayNames.map((e=>r("div",{key:e,class:"calendar-item week-day"},e.slice(0,3)))),this.calendar.map((e=>r(a,null,r("div",{class:"calendar-item week-number"},e.weekNumber),e.dayNumbers.map((e=>r("div",{key:e,id:`day-cell-${e}`,"date-calender-day":true,class:this.getDayClasses(e),onClick:()=>this.selectDay(e),onKeyUp:t=>t.key==="Enter"&&this.selectDay(e),tabIndex:e===this.focusedDay?0:-1,onFocus:()=>this.onDayFocus(),onBlur:()=>this.onDayBlur()},e))))))),r("div",{key:"8c2f0d4b2943b55fb7597d935ed594c33f2d99ce",class:{button:true,hidden:!this.range||!this.standaloneAppearance}},r("ix-button",{key:"68a8f6aafb0b2e12bfd26008891ef16a2e026813",onClick:()=>this.onDone()},this.textSelectDate||this.i18nDone))))}get hostElement(){return s(this)}static get watchers(){return{from:["watchFromPropHandler"],to:["watchToPropHandler"],locale:["onLocaleChange"]}}};m([h("keydown")],k.prototype,"handleKeyUp",null);k.style=g;const p=":host{--ix-layout-grid-gutter:24px;display:block;flex:1 1 0%;width:100%;padding-left:calc(var(--ix-layout-grid-gutter) * 0.5);padding-right:calc(var(--ix-layout-grid-gutter) * 0.5)}:host(.no-margin){padding-left:0;padding-right:0}";const v=p;const y=class{constructor(t){e(this,t);this.noMargin=false;this.gap="24";this.columns=12}render(){return r(i,{key:"e04816c23d075d12ae1cf1cd935322b48c24e249",class:{"no-margin":this.noMargin},style:{"--ix-layout-grid-columns":`${this.columns}`,"--ix-layout-grid-gutter":`${this.gap}px`}},r("slot",{key:"5068a91f517f248963912a57ff0a0890cfee9410"}))}};y.style=v;const x=":host{display:flex;flex-wrap:wrap}:host(:not(:first-of-type)){margin-block-start:var(--ix-layout-grid-row-margin, 0)}";const w=x;const z=class{constructor(t){e(this,t)}render(){return r(i,{key:"2466651a95ad4ca4c2871ee034342efb743fe6f5"},r("slot",{key:"d1bfd21c5948cc460601e570566d2b321b13b7ba"}))}};z.style=w;export{b as ix_col,k as ix_date_picker,y as ix_layout_grid,z as ix_row};
+//# sourceMappingURL=p-c2f6aaae.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["colCss","IxColStyle0","Col","onResize","forceUpdate","this","getSize","breakpoint","size","sizeSm","sizeMd","sizeLg","getColumnSize","Breakpoints","forEach","isMediaQueryActive","matchBreakpoint","currentSize","getColumnSizeStyling","flex","width","colSize","render","h","Host","key","style","Object","assign","datePickerCss","IxDatePickerStyle0","DatePicker","DAYS_IN_WEEK","undefined","DateTime","now","toISO","watchFromPropHandler","newValue","currFromDate","fromFormat","format","_a","isValid","selectedYear","year","selectedMonth","month","watchToPropHandler","currToDate","onLocaleChange","setTranslations","getCurrentDate","_from","_b","toFormat","_to","_c","_d","range","from","to","handleKeyUp","event","isDayFocus","_focusedDay","focusedDay","getDaysInCurrentMonth","changeToAdjacentMonth","monthChangedFromFocus","utc","daysInMonth","getDateTimeNow","fromISO","today","onDayBlur","onDayFocus","componentWillLoad","startYear","endYear","tempMonth","tempYear","componentWillRender","calculateCalendar","componentDidRender","dayElem","hostElement","shadowRoot","querySelector","focus","dayNames","rotateWeekDayNames","Info","weekdays","locale","weekStartIndex","monthNames","months","index","clone","len","length","push","splice","onDone","date","dateSelect","emit","calendar","monthStart","startOf","monthEnd","endOf","startWeek","weekNumber","endWeek","monthStartWeekDayIndex","weekday","monthEndWeekDayIndex","monthStartWeekDayName","findIndex","d","monthEndWeekDayName","correctLastWeek","weeksInWeekYear","correctFirstWeek","currDayNumber","weekIndex","daysArr","j","dayNumbers","selectTempYear","stopPropagation","focusMonth","firstMonthRef","infiniteScrollYears","scroll","yearContainerRef","scrollTop","maxScroll","scrollHeight","atTop","atBottom","Math","round","offsetHeight","limit","first","firstElementChild","scrollTo","offsetTop","last","lastElementChild","selectMonth","show","number","selectDay","selectedDay","fromJSDate","Date","onDateChange","then","dateChange","dateRangeChange","getDayClasses","day","todayObj","selectedDayObj","hasSame","selected","disabled","isWithinMinMaxDate","isWithinMinMaxYear","minDateYear","minDate","maxDateYear","maxDate","isBefore","isAfter","isWithinMinMaxMonth","minDateObj","maxDateObj","minDateMonth","maxDateMonth","_minDate","_maxDate","renderYears","rows","class","arrowYear","onClick","onKeyUp","tabIndex","hidden","arrowPosition","name","corners","standaloneAppearance","slot","ghost","icon","variant","ref","dropdownButtonRef","trigger","placement","onScroll","map","checkPosition","slice","week","Fragment","id","e","onFocus","onBlur","button","textSelectDate","i18nDone","__decorate","OnListener","layoutGridCss","IxLayoutGridStyle0","LayoutGrid","noMargin","columns","gap","rowCss","IxRowStyle0","Row"],"sources":["src/components/col/col.scss?tag=ix-col&encapsulation=shadow","src/components/col/col.tsx","src/components/date-picker/date-picker.scss?tag=ix-date-picker&encapsulation=shadow","src/components/date-picker/date-picker.tsx","src/components/grid/layout-grid.scss?tag=ix-layout-grid&encapsulation=shadow","src/components/grid/layout-grid.tsx","src/components/row/row.scss?tag=ix-row&encapsulation=shadow","src/components/row/row.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  position: relative;\n  flex-basis: 0;\n  flex-grow: 1;\n  width: 100%;\n  max-width: 100%;\n  min-height: 1px;\n\n  padding: calc(var(--ix-layout-grid-gutter) * 0.5);\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, forceUpdate, h, Host, Listen, Prop } from '@stencil/core';\nimport { Breakpoint, matchBreakpoint } from '../utils/breakpoints';\n\ntype GridBreakpoint = Breakpoint | '';\n\nexport type ColumnSize =\n  | '1'\n  | '2'\n  | '3'\n  | '4'\n  | '5'\n  | '6'\n  | '7'\n  | '8'\n  | '9'\n  | '10'\n  | '11'\n  | '12'\n  | 'auto';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-col',\n  styleUrl: 'col.scss',\n  shadow: true,\n})\nexport class Col {\n  static Breakpoints: GridBreakpoint[] = ['', 'sm', 'md', 'lg'];\n\n  /**\n   * Size of the column\n   */\n  @Prop() size?: ColumnSize;\n\n  /**\n   * Size of the column for sm screens\n   */\n  @Prop() sizeSm?: ColumnSize;\n\n  /**\n   * Size of the column for md screens\n   */\n  @Prop() sizeMd?: ColumnSize;\n\n  /**\n   * Size of the column for lg screens\n   */\n  @Prop() sizeLg?: ColumnSize;\n\n  @Listen('resize', { target: 'window' })\n  onResize() {\n    forceUpdate(this);\n  }\n\n  private getSize(breakpoint: GridBreakpoint) {\n    if (breakpoint === '') {\n      return this.size;\n    }\n\n    if (breakpoint === 'sm') {\n      return this.sizeSm;\n    }\n\n    if (breakpoint === 'md') {\n      return this.sizeMd;\n    }\n\n    if (breakpoint === 'lg') {\n      return this.sizeLg;\n    }\n  }\n\n  private getColumnSize() {\n    let size: ColumnSize;\n    Col.Breakpoints.forEach((breakpoint) => {\n      const isMediaQueryActive =\n        breakpoint !== '' ? matchBreakpoint(breakpoint) : true;\n\n      if (!isMediaQueryActive) {\n        return;\n      }\n\n      const currentSize = this.getSize(breakpoint);\n\n      if (currentSize) {\n        size = currentSize;\n      }\n    });\n\n    return size;\n  }\n\n  private getColumnSizeStyling() {\n    const size = this.getColumnSize();\n\n    if (!size) {\n      return;\n    }\n\n    if (size === 'auto') {\n      return {\n        flex: '0 0 auto',\n        width: 'auto',\n        'max-width': 'auto',\n      };\n    }\n\n    const colSize = `calc(calc(${size} / var(--ix-layout-grid-columns)) * 100%)`;\n\n    return {\n      flex: `0 0 ${colSize}`,\n      width: `${colSize}`,\n      'max-width': `${colSize}`,\n    };\n  }\n\n  render() {\n    return (\n      <Host\n        style={{\n          ...this.getColumnSizeStyling(),\n        }}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: block;\n  position: relative;\n  width: 22rem;\n\n  .header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .disabled-item {\n    pointer-events: none;\n    background-color: var(--theme-datepicker-day--background--disabled);\n    color: var(--theme-datepicker-day--color--disabled);\n    cursor: default;\n  }\n\n  .selector {\n    flex-basis: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: $tiny-space $default-space;\n\n    .dropdown {\n      color: var(--theme-menu-item--color);\n      font-size: 14px;\n      line-height: 20px;\n    }\n\n    .fontSize {\n      font-size: 16px;\n    }\n\n    .capitalize {\n      text-transform: capitalize;\n    }\n\n    .month-dropdown-item {\n      margin-left: 4px;\n      margin-right: 4px;\n\n      &:focus-visible {\n        outline: 1px solid var(--theme-color-focus-bdr);\n        outline-offset: var(--theme-btn--focus--outline-offset);\n      }\n    }\n\n    .arrowYear {\n      display: flex;\n      position: relative;\n      padding: $medium-space $x-large-space;\n      align-items: center;\n      cursor: pointer;\n\n      &:hover {\n        background-color: var(--theme-select-list-item--background--hover);\n      }\n\n      &.selected {\n        background-color: var(--theme-select-list-item--background--selected);\n      }\n\n      .arrowPosition {\n        position: absolute;\n        left: calc(($x-large-space / 2) - 6px);\n        top: calc(50% - 6px);\n      }\n\n      .checkPosition {\n        position: absolute;\n        left: calc(($x-large-space / 2) - 6px);\n        top: calc(50% - 8px);\n      }\n\n      .monthMargin {\n        margin-left: 10px;\n      }\n    }\n  }\n\n  .wrapper {\n    display: flex;\n\n    .overflow {\n      overflow-y: scroll;\n      max-height: 250px;\n    }\n  }\n\n  .grid {\n    display: grid;\n    grid-template-columns: repeat(8, 40px);\n    grid-template-rows: repeat(7, 40px);\n    align-items: center;\n    justify-items: center;\n    justify-content: center;\n    color: var(--theme-datepicker-today--color);\n\n    .calendar-item {\n      position: relative;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      background-color: var(--theme-datepicker-day--background);\n      border: 1px solid var(--theme-datepicker-day--background);\n      width: 40px;\n      height: 40px;\n      cursor: pointer;\n\n      &:focus-visible {\n        outline: 1px solid var(--theme-color-focus-bdr);\n        outline-offset: var(--theme-btn--focus--outline-offset);\n      }\n\n      &.today {\n        border: 1px solid var(--theme-datepicker-today--border-color);\n\n        &:hover {\n          background-color: var(--theme-datepicker-day--background--hover);\n        }\n\n        &:active {\n          background-color: var(--theme-datepicker-day--background--active);\n        }\n\n        &.selected {\n          box-shadow: inset 0 0 0 1px white;\n\n          &:hover {\n            background-color: var(\n                            --theme-datepicker-day--background--selected-hover\n            );\n          }\n\n          &:active {\n            background-color: var(\n                            --theme-datepicker-day--background--selected-active\n            );\n          }\n\n          &.disabled {\n            pointer-events: none;\n            background-color: var(\n                            --theme-datepicker-day--background--selected-disabled\n            );\n            border: 1px solid\n            var(--theme-datepicker-day--background--selected-disabled);\n            color: var(--theme-datepicker-day--color--selected-disabled);\n          }\n        }\n\n        &.range {\n          background-color: var(--theme-datepicker-day--background--range);\n          color: var(--theme-datepicker-day--color--range);\n          border: 1px solid var(--theme-datepicker-today--border-color--range);\n          box-shadow: inset 0 0 0 1px white;\n\n          &:hover {\n            background-color: var(\n                            --theme-datepicker-day--background--range-hover\n            );\n            border: 1px solid\n            var(--theme-datepicker-today--border-color--range-hover);\n          }\n\n          &:active {\n            background-color: var(\n                            --theme-datepicker-day--background--range-active\n            );\n            border: 1px solid\n            var(--theme-datepicker-today--border-color--range-active);\n          }\n\n          &.disabled {\n            background-color: var(\n                            --theme-datepicker-day--background--range-disabled\n            );\n            color: var(--theme-datepicker-day--color--range-disabled);\n            border: 1px solid\n            var(--theme-datepicker-today--border-color--range-disabled);\n          }\n        }\n\n        &.disabled {\n          pointer-events: none;\n          background-color: var(--theme-datepicker-day--background--disabled);\n          color: var(--theme-datepicker-day--color--disabled);\n          cursor: default;\n        }\n      }\n\n      &:hover {\n        background-color: var(--theme-datepicker-day--background--hover);\n      }\n\n      &:active {\n        background-color: var(--theme-datepicker-day--background--active);\n      }\n\n      &.selected {\n        background-color: var(--theme-datepicker-day--background--selected);\n        color: var(--theme-datepicker-day--color--selected);\n        border: 1px solid var(--theme-datepicker-day--background--selected);\n\n        &:hover {\n          background-color: var(\n                          --theme-datepicker-day--background--selected-hover\n          );\n        }\n\n        &:active {\n          background-color: var(\n                          --theme-datepicker-day--background--selected-active\n          );\n        }\n\n        &.disabled {\n          pointer-events: none;\n          background-color: var(\n                          --theme-datepicker-day--background--selected-disabled\n          );\n          color: var(--theme-datepicker-day--color--selected-disabled);\n        }\n      }\n\n      &.range {\n        background-color: var(--theme-datepicker-day--background--range);\n        color: var(--theme-datepicker-day--color--range);\n\n        &:hover {\n          background-color: var(\n                          --theme-datepicker-day--background--range-hover\n          );\n        }\n\n        &:active {\n          background-color: var(\n                          --theme-datepicker-day--background--range-active\n          );\n        }\n\n        &.disabled {\n          pointer-events: none;\n          background-color: var(\n                          --theme-datepicker-day--background--range-disabled\n          );\n          color: var(--theme-datepicker-day--color--range-disabled);\n        }\n      }\n\n      &.disabled {\n        pointer-events: none;\n        background-color: var(--theme-datepicker-day--background--disabled);\n        color: var(--theme-datepicker-day--color--disabled);\n      }\n\n      &.week-day {\n        color: var(--theme-datepicker-weekday--color);\n        font-size: 12px;\n        line-height: 20px;\n        border: none;\n        background: none;\n        cursor: initial;\n      }\n\n      &.empty-day {\n        border: none;\n        background: none;\n        cursor: initial;\n      }\n\n      &.week-number {\n        font-size: 10px;\n        line-height: 14px;\n        color: var(--theme-datepicker-weekday--color);\n        border: none;\n        background: none;\n        cursor: initial;\n      }\n\n      &:focus-visible {\n        background-color: var(--theme-datepicker-day--background--selected);\n        border: inset 1px solid\n        var(--theme-datepicker-day--border-color--selected);\n        color: var(--theme-datepicker-day--color--selected);\n        font-size: 14px;\n        line-height: 20px;\n        letter-spacing: 0;\n      }\n    }\n  }\n\n  .button {\n    display: flex;\n    justify-content: flex-end;\n  }\n\n  .hidden {\n    display: none;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { DateTimeCardCorners } from '../date-time-card/date-time-card';\n\nimport { DateTime, Info } from 'luxon';\nimport { OnListener } from '../utils/listener';\n\nexport type DateChangeEvent = {\n  from: string;\n  to: string;\n};\n\nexport type DateTimeCorners = DateTimeCardCorners;\n\ninterface CalendarWeek {\n  weekNumber: number;\n  dayNumbers: number[];\n}\n\n@Component({\n  tag: 'ix-date-picker',\n  styleUrl: 'date-picker.scss',\n  shadow: true,\n})\nexport class DatePicker {\n  @Element() hostElement: HTMLIxDatePickerElement;\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  @Prop() format: string = 'yyyy/LL/dd';\n\n  /**\n   * If true a date-range can be selected (from/to).\n   */\n  @Prop() range: boolean = true;\n\n  /**\n   * Corner style\n   */\n  @Prop() corners: DateTimeCardCorners = 'rounded';\n\n  /**\n   * The selected starting date. If the date-picker-rework is not in range mode this is the selected date.\n   * Format has to match the `format` property.\n   *\n   * @since 1.1.0\n   */\n  @Prop() from: string | undefined;\n\n  @Watch('from')\n  watchFromPropHandler(newValue: string) {\n    this.currFromDate = newValue\n      ? DateTime.fromFormat(newValue, this.format)\n      : undefined;\n\n    if (this.currFromDate?.isValid) {\n      this.selectedYear = this.currFromDate.year;\n      this.selectedMonth = this.currFromDate.month - 1;\n    }\n  }\n\n  /**\n   * The selected end date. If the the date-picker-rework is not in range mode this property has no impact.\n   * Format has to match the `format` property.\n   *\n   * @since 1.1.0\n   */\n  @Prop() to: string | undefined;\n\n  @Watch('to')\n  watchToPropHandler(newValue: string) {\n    this.currToDate = newValue\n      ? DateTime.fromFormat(newValue, this.format)\n      : undefined;\n\n    if (this.currToDate?.isValid) {\n      this.selectedYear = this.currToDate.year;\n      this.selectedMonth = this.currToDate.month - 1;\n    }\n  }\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   * Text of the button that confirms date selection.\n   *\n   * @since 1.1.0\n   * @deprecated since 2.1.0. Use `i18nDone`\n   */\n  @Prop() textSelectDate: string;\n\n  /**\n   * Text of date select button\n   *\n   * @since 2.1.0\n   */\n  @Prop({ attribute: 'i18n-done' }) i18nDone = 'Done';\n\n  /**\n   * The index of which day to start the week on, based on the Locale#weekdays array.\n   * E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.\n   *\n   * @since 2.1.0\n   */\n  @Prop() weekStartIndex = 0;\n\n  /**\n   * Format of time string\n   * See {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens.\n   *\n   * @since 2.1.0\n   */\n  @Prop() locale: string = undefined;\n  @Watch('locale')\n  onLocaleChange() {\n    this.setTranslations();\n  }\n\n  /**\n   * @deprecated Not supported since 2.0.0.\n   */\n  @Prop() individual: boolean = true;\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   * @deprecated Not used anymore see `this.dateChange`\n   */\n  @Prop() eventDelimiter = ' - ';\n\n  /** @internal */\n  @Prop() standaloneAppearance = true;\n\n  /** @internal */\n  @Prop() today = DateTime.now().toISO();\n\n  /**\n   * Triggers if the date selection changes.\n   * Note: Since 2.0.0 `dateChange` does not dispatch detail property as `string`\n   *\n   * @since 2.1.0\n   */\n  @Event() dateChange: EventEmitter<DateChangeEvent>;\n\n  /**\n   * Triggers if the date selection changes.\n   * Only triggered if date-picker-rework is in range mode.\n   *\n   * @since 2.1.0\n   */\n  @Event() dateRangeChange: EventEmitter<DateChangeEvent>;\n\n  /**\n   * Date selection confirmed via button action\n   *\n   * @since 1.1.0\n   */\n  @Event() dateSelect: EventEmitter<DateChangeEvent>;\n\n  /**\n   * Date selection confirmed via button action\n   *\n   * @deprecated NOT getting dispatched after 2.0.0. Use `dateSelect`.\n   */\n  @Event() done: EventEmitter<string>;\n\n  /**\n   * Get the currently selected date-range.\n   */\n  @Method()\n  async getCurrentDate() {\n    const _from = this.currFromDate?.isValid\n      ? this.currFromDate?.toFormat(this.format)\n      : undefined;\n    const _to = this.currToDate?.isValid\n      ? this.currToDate?.toFormat(this.format)\n      : undefined;\n\n    if (this.range) {\n      return {\n        from: _from,\n        to: _to,\n      };\n    }\n\n    return {\n      from: _from,\n      to: undefined,\n    };\n  }\n\n  @State() currFromDate: DateTime;\n  @State() currToDate: DateTime;\n\n  @State() selectedYear: number;\n  @State() tempYear: number;\n  @State() startYear: number;\n  @State() endYear: number;\n  @State() selectedMonth: number;\n  @State() tempMonth: number;\n\n  @State() dropdownButtonRef: HTMLElement;\n  @State() yearContainerRef: HTMLElement;\n\n  @State() dayNames: string[];\n  @State() monthNames: string[];\n  @State() firstMonthRef: HTMLElement;\n  @State() focusedDay: number = 1;\n  @State() focusedDayElem: HTMLElement;\n\n  private isDayFocus: boolean;\n  private monthChangedFromFocus: boolean;\n  private readonly DAYS_IN_WEEK = 7;\n  private calendar: CalendarWeek[];\n\n  @OnListener<DatePicker>('keydown')\n  handleKeyUp(event: KeyboardEvent) {\n    if (!this.isDayFocus) {\n      return;\n    }\n\n    let _focusedDay = this.focusedDay;\n\n    switch (event.key) {\n      case 'ArrowLeft':\n        _focusedDay--;\n        break;\n      case 'ArrowRight':\n        _focusedDay++;\n        break;\n      case 'ArrowUp':\n        _focusedDay = _focusedDay - 7;\n        break;\n      case 'ArrowDown':\n        _focusedDay = _focusedDay + 7;\n        break;\n      default:\n        return;\n    }\n\n    if (_focusedDay > this.getDaysInCurrentMonth()) {\n      _focusedDay = _focusedDay - this.getDaysInCurrentMonth();\n      this.changeToAdjacentMonth(1);\n      this.monthChangedFromFocus = true;\n    } else if (_focusedDay < 1) {\n      this.changeToAdjacentMonth(-1);\n      _focusedDay = _focusedDay + this.getDaysInCurrentMonth();\n      this.monthChangedFromFocus = true;\n    }\n\n    this.focusedDay = _focusedDay;\n  }\n\n  private getDaysInCurrentMonth(): number {\n    return DateTime.utc(this.selectedYear, this.selectedMonth + 1).daysInMonth;\n  }\n\n  private getDateTimeNow() {\n    return DateTime.fromISO(this.today);\n  }\n\n  onDayBlur() {\n    this.isDayFocus = false;\n  }\n\n  onDayFocus() {\n    this.isDayFocus = true;\n  }\n\n  componentWillLoad() {\n    this.setTranslations();\n\n    this.currFromDate = this.from\n      ? DateTime.fromFormat(this.from, this.format)\n      : undefined;\n    this.currToDate = this.to\n      ? DateTime.fromFormat(this.to, this.format)\n      : undefined;\n\n    const year = this.currFromDate?.year ?? this.getDateTimeNow().year;\n    this.startYear = year - 5;\n    this.endYear = year + 5;\n\n    this.selectedMonth =\n      (this.currFromDate?.month ?? this.getDateTimeNow().month) - 1;\n    this.selectedYear = year;\n    this.tempMonth = this.selectedMonth;\n    this.tempYear = this.selectedYear;\n  }\n\n  componentWillRender() {\n    this.calculateCalendar();\n  }\n\n  componentDidRender() {\n    if (!this.monthChangedFromFocus && !this.isDayFocus) {\n      return;\n    }\n\n    const dayElem = this.hostElement.shadowRoot.querySelector(\n      `[id=day-cell-${this.focusedDay}]`\n    ) as HTMLElement;\n    dayElem.focus();\n  }\n\n  private setTranslations() {\n    this.dayNames = this.rotateWeekDayNames(\n      Info.weekdays('long', {\n        locale: this.locale,\n      }),\n      this.weekStartIndex\n    );\n\n    this.monthNames = Info.months('long', {\n      locale: this.locale,\n    });\n  }\n\n  /**\n   * Rotate the WeekdayNames array.\n   * Based on the position that should be the new 0-index.\n   */\n  private rotateWeekDayNames(weekdays: string[], index: number): string[] {\n    const clone = [...weekdays];\n\n    if (index === 0) {\n      return clone;\n    }\n\n    index = -index;\n    const len = weekdays.length;\n\n    clone.push(...clone.splice(0, ((-index % len) + len) % len));\n    return clone;\n  }\n\n  private async onDone() {\n    const date = await this.getCurrentDate();\n    this.dateSelect.emit(date);\n  }\n\n  private calculateCalendar() {\n    const calendar: CalendarWeek[] = [];\n    const month = DateTime.utc(this.selectedYear, this.selectedMonth + 1);\n    const monthStart = month.startOf('month');\n    const monthEnd = month.endOf('month');\n    let startWeek = monthStart.weekNumber;\n    let endWeek = monthEnd.weekNumber;\n    let monthStartWeekDayIndex = monthStart.weekday - 1;\n    let monthEndWeekDayIndex = monthEnd.weekday - 1;\n\n    if (this.weekStartIndex !== 0) {\n      // Find the positions where to start/stop counting the day-numbers based on which day the week starts\n      const weekdays = Info.weekdays();\n      const monthStartWeekDayName = weekdays[monthStart.weekday];\n\n      monthStartWeekDayIndex = this.dayNames.findIndex(\n        (d) => d === monthStartWeekDayName\n      );\n      const monthEndWeekDayName = weekdays[monthEnd.weekday];\n      monthEndWeekDayIndex = this.dayNames.findIndex(\n        (d) => d === monthEndWeekDayName\n      );\n    }\n\n    let correctLastWeek = false;\n    if (endWeek === 1) {\n      endWeek = monthEnd.weeksInWeekYear + 1;\n      correctLastWeek = true;\n    }\n\n    let correctFirstWeek = false;\n    if (startWeek === monthStart.weeksInWeekYear) {\n      startWeek = 1;\n      endWeek++;\n\n      correctFirstWeek = true;\n    }\n\n    let currDayNumber = 1;\n    for (\n      let weekIndex = startWeek;\n      weekIndex <= endWeek && currDayNumber <= 31;\n      weekIndex++\n    ) {\n      const daysArr: number[] = [];\n\n      for (let j = 0; j < this.DAYS_IN_WEEK && currDayNumber <= 31; j++) {\n        // Display empty cells until the calender starts/has ended\n        if (\n          (weekIndex === startWeek && j < monthStartWeekDayIndex) ||\n          (weekIndex === endWeek && j > monthEndWeekDayIndex)\n        ) {\n          daysArr.push(undefined);\n        } else {\n          daysArr.push(currDayNumber++);\n        }\n      }\n\n      if (correctFirstWeek || correctLastWeek) {\n        if (weekIndex === 1) {\n          calendar.push({\n            weekNumber: monthStart.weeksInWeekYear,\n            dayNumbers: daysArr,\n          });\n        } else if (weekIndex === monthEnd.weekNumber) {\n          calendar.push({\n            weekNumber: 1,\n            dayNumbers: daysArr,\n          });\n        } else {\n          calendar.push({\n            weekNumber: weekIndex - 1,\n            dayNumbers: daysArr,\n          });\n        }\n        continue;\n      }\n\n      calendar.push({\n        weekNumber: weekIndex,\n        dayNumbers: daysArr,\n      });\n    }\n\n    this.calendar = calendar;\n  }\n\n  private selectTempYear(event: MouseEvent, year: number) {\n    event?.stopPropagation();\n    this.tempYear = year;\n  }\n\n  private focusMonth() {\n    this.firstMonthRef.focus();\n  }\n\n  private infiniteScrollYears() {\n    const scroll = this.yearContainerRef.scrollTop;\n    const maxScroll = this.yearContainerRef.scrollHeight;\n    const atTop = scroll === 0;\n    const atBottom =\n      Math.round(scroll + this.yearContainerRef.offsetHeight) >= maxScroll;\n    const limit = 200;\n\n    if (this.endYear - this.startYear > limit) return;\n\n    if (atTop) {\n      const first = this.yearContainerRef.firstElementChild as HTMLElement;\n      this.startYear -= 5;\n      this.yearContainerRef.scrollTo(0, first.offsetTop);\n\n      return;\n    }\n\n    if (atBottom) {\n      const last = this.yearContainerRef.lastElementChild as HTMLElement;\n      this.endYear += 5;\n      this.yearContainerRef.scrollTo(0, last.offsetTop);\n    }\n  }\n\n  private selectMonth(month: number) {\n    this.selectedMonth = month;\n    this.selectedYear = this.tempYear;\n    this.tempMonth = month;\n\n    this.hostElement.shadowRoot.querySelector('ix-dropdown').show = false;\n  }\n\n  private changeToAdjacentMonth(number: -1 | 1) {\n    if (this.selectedMonth + number < 0) {\n      this.selectedYear--;\n      this.selectedMonth = 11;\n    } else if (this.selectedMonth + number > 11) {\n      this.selectedYear++;\n      this.selectedMonth = 0;\n    } else {\n      this.selectedMonth += number;\n    }\n  }\n\n  private selectDay(selectedDay: number) {\n    const date = DateTime.fromJSDate(\n      new Date(this.selectedYear, this.selectedMonth, selectedDay)\n    );\n\n    if (!this.range || this.currFromDate === undefined) {\n      this.currFromDate = date;\n      this.onDateChange();\n\n      return;\n    }\n\n    // Reset the range selection\n    if (this.currToDate !== undefined) {\n      this.currFromDate = date;\n      this.currToDate = undefined;\n      this.onDateChange();\n\n      return;\n    }\n\n    // Swap from/to if the second date is before the current date\n    if (date < this.currFromDate) {\n      this.currToDate = this.currFromDate;\n      this.currFromDate = date;\n      this.onDateChange();\n\n      return;\n    }\n\n    // Set the range normally\n    this.currToDate = date;\n    this.onDateChange();\n  }\n\n  private onDateChange() {\n    this.getCurrentDate().then((date) => {\n      this.dateChange.emit(date);\n      if (this.range) {\n        this.dateRangeChange.emit(date);\n      }\n    });\n  }\n\n  private getDayClasses(day: number): any {\n    if (!day) {\n      return;\n    }\n\n    const todayObj = this.getDateTimeNow();\n    const selectedDayObj = DateTime.fromJSDate(\n      new Date(this.selectedYear, this.selectedMonth, day)\n    );\n\n    return {\n      'calendar-item': true,\n      'empty-day': day === undefined,\n      today: todayObj.hasSame(selectedDayObj, 'day'),\n      selected:\n        this.currFromDate?.hasSame(selectedDayObj, 'day') ||\n        this.currToDate?.hasSame(selectedDayObj, 'day'),\n      range:\n        selectedDayObj.startOf('day') > this.currFromDate?.startOf('day') &&\n        this.currToDate !== undefined &&\n        selectedDayObj.startOf('day') < this.currToDate?.startOf('day'),\n      disabled: !this.isWithinMinMaxDate(selectedDayObj),\n    };\n  }\n\n  private isWithinMinMaxYear(year: number): boolean {\n    const minDateYear = this.minDate\n      ? DateTime.fromFormat(this.minDate, this.format).year\n      : undefined;\n    const maxDateYear = this.maxDate\n      ? DateTime.fromFormat(this.maxDate, this.format).year\n      : undefined;\n    const isBefore = minDateYear ? year < minDateYear : false;\n    const isAfter = maxDateYear ? year > maxDateYear : false;\n\n    return !isBefore && !isAfter;\n  }\n\n  private isWithinMinMaxMonth(month: number): boolean {\n    const minDateObj = this.minDate\n      ? DateTime.fromFormat(this.minDate, this.format)\n      : undefined;\n    const maxDateObj = this.maxDate\n      ? DateTime.fromFormat(this.maxDate, this.format)\n      : undefined;\n    const minDateMonth = minDateObj?.month;\n    const maxDateMonth = maxDateObj?.month;\n    const isBefore = minDateMonth\n      ? this.tempYear === minDateObj.year && month < minDateMonth\n      : false;\n    const isAfter = maxDateMonth\n      ? this.tempYear === maxDateObj.year && month > maxDateMonth\n      : false;\n\n    return !isBefore && !isAfter;\n  }\n\n  private isWithinMinMaxDate(date: DateTime): boolean {\n    const _minDate = this.minDate\n      ? DateTime.fromFormat(this.minDate, this.format)\n      : undefined;\n    const _maxDate = this.maxDate\n      ? DateTime.fromFormat(this.maxDate, this.format)\n      : undefined;\n    const isBefore = _minDate\n      ? date.startOf('day') < _minDate.startOf('day')\n      : false;\n    const isAfter = _maxDate\n      ? date.startOf('day') > _maxDate.startOf('day')\n      : false;\n\n    return !isBefore && !isAfter;\n  }\n\n  private renderYears(): any[] {\n    const rows = [];\n\n    for (let year = this.startYear; year <= this.endYear; year++) {\n      rows.push(\n        <div\n          key={year}\n          class={{\n            arrowYear: true,\n            'month-dropdown-item': true,\n            'disabled-item': !this.isWithinMinMaxYear(year),\n          }}\n          onClick={(event) => this.selectTempYear(event, year)}\n          onKeyUp={(event) => {\n            if (event.key === 'Enter') {\n              this.selectTempYear(null, year);\n              this.focusMonth();\n            }\n          }}\n          tabIndex={0}\n        >\n          <ix-icon\n            class={{\n              hidden: this.tempYear !== year,\n              arrowPosition: true,\n            }}\n            name=\"chevron-right\"\n            size=\"12\"\n          ></ix-icon>\n          <div style={{ 'min-width': 'max-content' }}>{`${year}`}</div>\n        </div>\n      );\n    }\n\n    return rows;\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-date-time-card\n          corners={this.corners}\n          standaloneAppearance={this.standaloneAppearance}\n        >\n          <div class=\"header\" slot=\"header\">\n            <ix-icon-button\n              onClick={() => this.changeToAdjacentMonth(-1)}\n              ghost\n              icon=\"chevron-left\"\n              variant=\"primary\"\n              class=\"arrows\"\n            ></ix-icon-button>\n            <div class=\"selector\">\n              <ix-button ghost ref={(ref) => (this.dropdownButtonRef = ref)}>\n                <span class=\"fontSize capitalize\">\n                  {this.monthNames[this.selectedMonth]} {this.selectedYear}\n                </span>\n              </ix-button>\n              <ix-dropdown\n                class=\"dropdown\"\n                trigger={this.dropdownButtonRef}\n                placement=\"bottom-start\"\n              >\n                <div class=\"wrapper\">\n                  <div\n                    class=\"overflow\"\n                    onScroll={() => this.infiniteScrollYears()}\n                    ref={(ref) => (this.yearContainerRef = ref)}\n                  >\n                    {this.renderYears()}\n                  </div>\n                  <div class=\"overflow\">\n                    {this.monthNames.map((month, index) => (\n                      <div\n                        key={month}\n                        ref={(ref) => {\n                          if (month === this.monthNames[0]) {\n                            this.firstMonthRef = ref as HTMLElement;\n                          }\n                        }}\n                        class={{\n                          arrowYear: true,\n                          'month-dropdown-item': true,\n                          selected:\n                            this.tempYear === this.selectedYear &&\n                            this.tempMonth === index,\n                          'disabled-item': !this.isWithinMinMaxMonth(index),\n                        }}\n                        onClick={() => this.selectMonth(index)}\n                        onKeyUp={(event) =>\n                          event.key === 'Enter' && this.selectMonth(index)\n                        }\n                        tabIndex={0}\n                      >\n                        <ix-icon\n                          class={{\n                            hidden:\n                              this.tempYear !== this.selectedYear ||\n                              this.tempMonth !== index,\n                            checkPosition: true,\n                          }}\n                          name=\"single-check\"\n                          size=\"16\"\n                        ></ix-icon>\n                        <div>\n                          <span class=\"capitalize monthMargin\">{`${month} ${this.tempYear}`}</span>\n                        </div>\n                      </div>\n                    ))}\n                  </div>\n                </div>\n              </ix-dropdown>\n            </div>\n            <ix-icon-button\n              onClick={() => this.changeToAdjacentMonth(1)}\n              ghost\n              icon=\"chevron-right\"\n              variant=\"primary\"\n              class=\"arrows\"\n            ></ix-icon-button>\n          </div>\n          <div class=\"grid\">\n            <div class=\"calendar-item week-day\"></div>\n            {this.dayNames.map((name) => (\n              <div key={name} class=\"calendar-item week-day\">\n                {name.slice(0, 3)}\n              </div>\n            ))}\n            {this.calendar.map((week) => {\n              return (\n                <Fragment>\n                  <div class=\"calendar-item week-number\">{week.weekNumber}</div>\n                  {week.dayNumbers.map((day) => (\n                    <div\n                      key={day}\n                      id={`day-cell-${day}`}\n                      date-calender-day\n                      class={this.getDayClasses(day)}\n                      onClick={() => this.selectDay(day)}\n                      onKeyUp={(e) => e.key === 'Enter' && this.selectDay(day)}\n                      tabIndex={day === this.focusedDay ? 0 : -1}\n                      onFocus={() => this.onDayFocus()}\n                      onBlur={() => this.onDayBlur()}\n                    >\n                      {day}\n                    </div>\n                  ))}\n                </Fragment>\n              );\n            })}\n          </div>\n          <div\n            class={{\n              button: true,\n              hidden: !this.range || !this.standaloneAppearance,\n            }}\n          >\n            <ix-button onClick={() => this.onDone()}>\n              {this.textSelectDate || this.i18nDone}\n            </ix-button>\n          </div>\n        </ix-date-time-card>\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:host {\n  --ix-layout-grid-gutter: 24px;\n\n  display: block;\n  flex: 1 1 0%;\n  width: 100%;\n\n  padding-left: calc(var(--ix-layout-grid-gutter) * 0.5);\n  padding-right: calc(var(--ix-layout-grid-gutter) * 0.5);\n}\n\n:host(.no-margin) {\n  padding-left: 0;\n  padding-right: 0;\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 * @since 2.0.0\n */\n@Component({\n  tag: 'ix-layout-grid',\n  styleUrl: 'layout-grid.scss',\n  shadow: true,\n})\nexport class LayoutGrid {\n  /**\n   * The grid will not have any horizontal padding\n   */\n  @Prop() noMargin = false;\n\n  /**\n   * Grid gap\n   */\n  @Prop() gap: '8' | '12' | '16' | '24' = '24';\n\n  /**\n   * Overwrite the default number of columns. Choose between 2 and 12 columns.\n   */\n  @Prop() columns = 12;\n\n  render() {\n    return (\n      <Host\n        class={{\n          'no-margin': this.noMargin,\n        }}\n        style={{\n          '--ix-layout-grid-columns': `${this.columns}`,\n          '--ix-layout-grid-gutter': `${this.gap}px`,\n        }}\n      >\n        <slot></slot>\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: flex;\n  flex-wrap: wrap;\n}\n\n:host(:not(:first-of-type)) {\n  margin-block-start: var(--ix-layout-grid-row-margin, 0);\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 } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-row',\n  styleUrl: 'row.scss',\n  shadow: true,\n})\nexport class Row {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+import{r as e,h as n,H as t}from"./p-26e9d40e.js";const r=":host{display:flex;justify-content:center;align-items:center;margin-inline-start:1.5rem;margin-inline-end:1.5rem;margin-block-end:0.25rem}:host slot::slotted(*){display:flex;margin-inline-end:0.625rem}";const s=r;const i=class{constructor(n){e(this,n)}render(){return n(t,{key:"5e441f76795c14ce9c89745007b984a758ed6c68"},n("slot",{key:"9134b8e85c0c92f2250305152d102f71cad38e8e"}))}};i.style=s;export{i as ix_dropdown_quick_actions};
+//# sourceMappingURL=p-c3939d35.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["dropdownQuickActionsCss","IxDropdownQuickActionsStyle0","DropdownQuickActions","render","h","Host","key"],"sources":["src/components/dropdown-quick-actions/dropdown-quick-actions.scss?tag=ix-dropdown-quick-actions&encapsulation=shadow","src/components/dropdown-quick-actions/dropdown-quick-actions.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: flex;\n  justify-content: center;\n  align-items: center;\n  margin-inline-start: $large-space;\n  margin-inline-end: $large-space;\n  margin-block-end: $tiny-space;\n\n  slot::slotted(*) {\n    display: flex;\n    margin-inline-end: 0.625rem;\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 */\nimport { Component, h, Host } from '@stencil/core';\n\n/**\n * @since 1.4.0\n */\n@Component({\n  tag: 'ix-dropdown-quick-actions',\n  styleUrl: 'dropdown-quick-actions.scss',\n  shadow: true,\n})\nexport class DropdownQuickActions {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAA0B,4MAChC,MAAAC,EAAeD,E,MCiBFE,EAAoB,M,yBAC/B,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,QAAAE,IAAA,6C"}

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

@@ -0,0 +1,2 @@
+class s{constructor(){this.listeners=[];this.listenersOncer=[];this.on=s=>{this.listeners.push(s);return{dispose:()=>this.off(s)}};this.once=s=>{this.listenersOncer.push(s)};this.off=s=>{const t=this.listeners.indexOf(s);if(t>-1){this.listeners.splice(t,1)}};this.emit=s=>{this.listeners.forEach((t=>t(s)));if(this.listenersOncer.length>0){const t=this.listenersOncer;this.listenersOncer=[];t.forEach((t=>t(s)))}};this.pipe=s=>this.on((t=>s.emit(t)))}}export{s as T};
+//# sourceMappingURL=p-c4749812.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["TypedEvent","constructor","this","listeners","listenersOncer","on","listener","push","dispose","off","once","callbackIndex","indexOf","splice","emit","event","forEach","length","toCall","pipe","te","e"],"sources":["src/components/utils/typed-event.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 interface Listener<T> {\n  (event: T): any;\n}\n\nexport interface Disposable {\n  dispose(): void;\n}\n\nexport class TypedEvent<T> {\n  public readonly listeners: Listener<T>[] = [];\n  public listenersOncer: Listener<T>[] = [];\n\n  on = (listener: Listener<T>): Disposable => {\n    this.listeners.push(listener);\n    return {\n      dispose: () => this.off(listener),\n    };\n  };\n\n  once = (listener: Listener<T>): void => {\n    this.listenersOncer.push(listener);\n  };\n\n  off = (listener: Listener<T>) => {\n    const callbackIndex = this.listeners.indexOf(listener);\n    if (callbackIndex > -1) {\n      this.listeners.splice(callbackIndex, 1);\n    }\n  };\n\n  emit = (event: T) => {\n    /** Update any general listeners */\n    this.listeners.forEach((listener) => listener(event));\n\n    /** Clear the `once` queue */\n    if (this.listenersOncer.length > 0) {\n      const toCall = this.listenersOncer;\n      this.listenersOncer = [];\n      toCall.forEach((listener) => listener(event));\n    }\n  };\n\n  pipe = (te: TypedEvent<T>): Disposable => {\n    return this.on((e) => te.emit(e));\n  };\n}\n"],"mappings":"MAiBaA,EAAb,WAAAC,GACkBC,KAAAC,UAA2B,GACpCD,KAAAE,eAAgC,GAEvCF,KAAAG,GAAMC,IACJJ,KAAKC,UAAUI,KAAKD,GACpB,MAAO,CACLE,QAAS,IAAMN,KAAKO,IAAIH,GACzB,EAGHJ,KAAAQ,KAAQJ,IACNJ,KAAKE,eAAeG,KAAKD,EAAS,EAGpCJ,KAAAO,IAAOH,IACL,MAAMK,EAAgBT,KAAKC,UAAUS,QAAQN,GAC7C,GAAIK,GAAiB,EAAG,CACtBT,KAAKC,UAAUU,OAAOF,EAAe,E,GAIzCT,KAAAY,KAAQC,IAENb,KAAKC,UAAUa,SAASV,GAAaA,EAASS,KAG9C,GAAIb,KAAKE,eAAea,OAAS,EAAG,CAClC,MAAMC,EAAShB,KAAKE,eACpBF,KAAKE,eAAiB,GACtBc,EAAOF,SAASV,GAAaA,EAASS,I,GAI1Cb,KAAAiB,KAAQC,GACClB,KAAKG,IAAIgB,GAAMD,EAAGN,KAAKO,I"}

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

@@ -0,0 +1,2 @@
+import{r as e,h as t,H as s}from"./p-26e9d40e.js";const o=":host(.keyValueList) ::slotted(ix-key-value){border-bottom:1px solid var(--theme-color-weak-bdr)}:host(.keyValueList.keyValueList--striped) ::slotted(ix-key-value:nth-child(odd)){background:var(--theme-color-ghost-alt)}";const r=o;const a=class{constructor(t){e(this,t);this.striped=undefined}render(){return t(s,{key:"93f8b95ef19267858e92d059f1b2840ecf3a2e5c",class:{keyValueList:true,"keyValueList--striped":this.striped}},t("slot",{key:"7a41ec73e964e56550283fc740bb752e54e09882"}))}};a.style=r;export{a as ix_key_value_list};
+//# sourceMappingURL=p-c49701a0.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["keyValueListCss","IxKeyValueListStyle0","KeyValueList","render","h","Host","key","class","keyValueList","this","striped"],"sources":["src/components/key-value-list/key-value-list.scss?tag=ix-key-value-list&encapsulation=shadow","src/components/key-value-list/key-value-list.tsx"],"sourcesContent":[":host(.keyValueList) {\n  ::slotted(ix-key-value) {\n    border-bottom: 1px solid var(--theme-color-weak-bdr);\n  }\n}\n\n:host(.keyValueList.keyValueList--striped) {\n  ::slotted(ix-key-value:nth-child(odd)) {\n    background: var(--theme-color-ghost-alt);\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';\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-key-value-list',\n  styleUrl: 'key-value-list.scss',\n  shadow: true,\n})\nexport class KeyValueList {\n  /**\n   * Optional striped key value list style\n   */\n  @Prop() striped: boolean;\n\n  render() {\n    return (\n      <Host\n        class={{ keyValueList: true, 'keyValueList--striped': this.striped }}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAkB,8NACxB,MAAAC,EAAeD,E,MCkBFE,EAAY,M,gDAMvB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CAAEC,aAAc,KAAM,wBAAyBC,KAAKC,UAE3DN,EAAA,QAAAE,IAAA,6C"}

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

@@ -0,0 +1,2 @@
+import{r as e,c as i,h as o,F as t,H as d,g as l}from"./p-26e9d40e.js";import{a}from"./p-71206084.js";import{a as r}from"./p-4f8ac3bf.js";const n=":host{display:flex;flex-direction:column;border-radius:var(--theme-blind--border-radius);overflow:hidden}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .blind-header-wrapper{position:relative;min-height:3rem;height:3rem;overflow:hidden}:host .blind-header-content{display:flex;position:relative;align-items:center;justify-content:flex-start;width:100%;height:100%;pointer-events:none;padding-left:0.5rem}:host .blind-header-title{display:flex;position:relative;align-items:center;flex-grow:1;margin-right:0.5rem}:host .blind-header{all:unset;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;position:absolute;top:0px;left:0px;pointer-events:all;padding-left:2.5rem;min-height:3rem;height:3rem;width:calc(100% - 2 * var(--theme-blind--border-thickness));border:solid var(--theme-blind--border-thickness) transparent;border-radius:var(--theme-blind--border-radius) var(--theme-blind--border-radius) 0 0;cursor:pointer}:host .blind-header:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-color-focus-bdr);outline:none}:host .blind-header-title-icon,:host .collapse-icon{margin-right:0.5rem}:host .blind-header-title-row{display:flex;width:100%;overflow:hidden}:host .blind-header-title-col{display:inline-flex;align-items:center;width:calc(100% - 1rem);overflow:hidden}:host .blind-header-title-col:not(:first-of-type){justify-content:flex-end}:host ix-typography{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .blind-header-title-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline-end:0.5rem}:host .blind-header-title-sublabel{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:0.5rem}:host .blind-header-title{display:flex;align-items:center;flex-grow:1;height:100%;min-width:0}:host .blind-header-labels{display:inline-flex;flex-grow:1;min-width:0}:host .blind-content{display:block;padding:1rem;transition-property:padding;transition-duration:var(--theme-default-time);transition-timing-function:ease-in}:host .blind-content.hide{max-height:0;padding-top:0px;padding-bottom:0px}:host .header-actions{pointer-events:all;margin-left:auto}:host(.blind-alarm){background-color:var(--theme-blind-base--background)}:host(.blind-alarm) .blind-header{background-color:var(--theme-color-alarm)}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-alarm--hover)}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-alarm) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-alarm--active)}:host(.blind-alarm) .blind-header-title-label,:host(.blind-alarm) .blind-header-title-sublabel{color:var(--theme-color-alarm--contrast)}:host(.blind-critical){background-color:var(--theme-blind-base--background)}:host(.blind-critical) .blind-header{background-color:var(--theme-color-critical)}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-critical--hover)}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-critical) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-critical) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-critical--active)}:host(.blind-critical) .blind-header-title-label,:host(.blind-critical) .blind-header-title-sublabel{color:var(--theme-color-critical--contrast)}:host(.blind-info){background-color:var(--theme-blind-base--background)}:host(.blind-info) .blind-header{background-color:var(--theme-color-info)}:host(.blind-info) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-info) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-info--hover)}:host(.blind-info) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-info) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-info) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-info--active)}:host(.blind-info) .blind-header-title-label,:host(.blind-info) .blind-header-title-sublabel{color:var(--theme-color-info--contrast)}:host(.blind-insight){background-color:var(--theme-blind-base--background)}:host(.blind-insight) .blind-header{background-color:var(--theme-color-insight)}:host(.blind-insight) .blind-header:not(.disabled):not(:disabled).hover,:host(.blind-insight) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host(.blind-insight) .blind-header:not(.disabled):not(:disabled).active,:host(.blind-insight) .blind-header:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host(.blind-insight) .blind-header-title-label{color:var(--theme-color-std-text)}:host(.blind-insight) .blind-header-title-sublabel{color:var(--theme-color-soft-text)}:host(.blind-neutral){background-color:var(--theme-blind-base--background)}:host(.blind-neutral) .blind-header{background-color:var(--theme-color-neutral)}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-neutral--hover)}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-neutral) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-neutral--active)}:host(.blind-neutral) .blind-header-title-label,:host(.blind-neutral) .blind-header-title-sublabel{color:var(--theme-color-neutral--contrast)}:host(.blind-notification){background-color:var(--theme-blind-base--background)}:host(.blind-notification) .blind-header{background-color:var(--theme-color-notification)}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-notification--hover)}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-notification) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-notification) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-notification--active)}:host(.blind-notification) .blind-header-title-label,:host(.blind-notification) .blind-header-title-sublabel{color:var(--theme-color-notification--contrast)}:host(.blind-success){background-color:var(--theme-blind-base--background)}:host(.blind-success) .blind-header{background-color:var(--theme-color-success)}:host(.blind-success) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-success) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-success--hover)}:host(.blind-success) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-success) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-success) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-success--active)}:host(.blind-success) .blind-header-title-label,:host(.blind-success) .blind-header-title-sublabel{color:var(--theme-color-success--contrast)}:host(.blind-warning){background-color:var(--theme-blind-base--background)}:host(.blind-warning) .blind-header{background-color:var(--theme-color-warning)}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-warning--hover)}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-warning) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-warning) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-warning--active)}:host(.blind-warning) .blind-header-title-label,:host(.blind-warning) .blind-header-title-sublabel{color:var(--theme-color-warning--contrast)}:host(.blind-primary){background-color:var(--theme-blind-base--background)}:host(.blind-primary) .blind-header{background-color:var(--theme-color-primary)}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-primary--hover)}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled){cursor:pointer}:host(.blind-primary) .blind-header:not(.disabled):not(:disabled):active,:host(.blind-primary) .blind-header:not(.disabled):not(:disabled).active{background-color:var(--theme-color-primary--active)}:host(.blind-primary) .blind-header-title-label,:host(.blind-primary) .blind-header-title-sublabel{color:var(--theme-color-primary--contrast)}:host(.blind-outline){border:solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color);border-color:var(--theme-color-soft-bdr)}:host(.blind-outline) .blind-header{background-color:var(--theme-color-ghost)}:host(.blind-outline) .blind-header:not(.disabled):not(:disabled).hover,:host(.blind-outline) .blind-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host(.blind-outline) .blind-header:not(.disabled):not(:disabled).active,:host(.blind-outline) .blind-header:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host(.blind-outline) .blind-header-title-label{color:var(--theme-color-std-text)}:host(.blind-outline) .blind-header-title-sublabel{color:var(--theme-color-soft-text)}";const s=n;let b=0;const h=class{constructor(o){e(this,o);this.collapsedChange=i(this,"collapsedChange",7);this.blindId=++b;this.collapsed=false;this.label=undefined;this.sublabel=undefined;this.icon=undefined;this.variant="insight"}onHeaderClick(){this.collapsed=!this.collapsed;this.collapsedChange.emit(this.collapsed)}componentDidLoad(){this.animateCollapse(this.collapsed)}get content(){return this.hostElement.shadowRoot.querySelector(".blind-content")}animation(e){this.animateCollapse(e)}animateCollapse(e){if(e){this.rotateChevronRight()}else{this.rotateChevronDown()}}rotateChevronDown(){a({targets:this.chevronRef,duration:150,easing:"easeInOutSine",rotateZ:90});a({targets:this.content,duration:150,easing:"easeInOutSine",opacity:1})}rotateChevronRight(){a({targets:this.chevronRef,duration:150,easing:"easeInOutSine",rotateZ:0});a({targets:this.content,duration:150,easing:"easeInOutSine",opacity:0})}render(){return o(d,{key:"5ec247be84e5612134ffec1e53730f61a214cd0b",class:{[`blind-${this.variant}`]:true}},o("div",{key:"abe3273f7a820cd6481d7f75a174e3c6c332b438",class:"blind-header-wrapper"},o("button",{key:"12a572e7145c435451a8a9cc89f66c50d58d3cca",class:{"blind-header":true,[`blind-${this.variant}`]:true,closed:this.collapsed},type:"button","aria-labelledby":`ix-blind-header-title-${this.blindId}`,"aria-controls":`ix-blind-content-section-${this.blindId}`,"aria-expanded":r(!this.collapsed),onClick:()=>this.onHeaderClick()},o("slot",{key:"11a9cc78537fac060310eeba7f57a147907e2a14",name:"custom-header"})),o("div",{key:"08abe64452f9841fc50951708ffdbb13f594e80b",class:"blind-header-content"},o("ix-icon",{key:"67a41dada571459470153b03247bc7f175c206de",class:"collapse-icon",name:"chevron-right-small",color:this.variant==="insight"||this.variant==="outline"?"color-primary":`color-${this.variant}--contrast`,ref:e=>this.chevronRef=e}),o("div",{key:"6a898defd05378868577745464956fd8ecc67472",class:"blind-header-title",id:`ix-blind-header-title-${this.blindId}`},this.label!==undefined?o(t,null,this.icon&&o("ix-icon",{class:"blind-header-title-icon",name:this.icon,color:this.variant==="insight"||this.variant==="outline"?"color-std-text":`color-${this.variant}--contrast`}),o("div",{class:"blind-header-title-row"},o("div",{class:"blind-header-title-col"},o("ix-typography",{title:this.label,format:"label-lg",bold:true},o("div",{class:"blind-header-title-label",title:this.label},this.label))),this.sublabel&&o("div",{class:"blind-header-title-col"},o("ix-typography",{title:this.sublabel},o("div",{class:"blind-header-title-sublabel"},this.sublabel)))),o("div",{class:"header-actions"},o("slot",{name:"header-actions"}))):null))),o("section",{key:"909fdaeec7732c55c81833e6f0212cea5b2174b0",id:`ix-blind-content-section-${this.blindId}`,"aria-labelledby":`ix-blind-header-title-${this.blindId}`},o("div",{key:"ace2f5a2269acc3d0c2c79a0cf31df6283038bec",class:{"blind-content":true,hide:this.collapsed}},!this.collapsed?o("slot",null):null)))}get hostElement(){return l(this)}static get watchers(){return{collapsed:["animation"]}}};h.style=s;export{h as ix_blind};
+//# sourceMappingURL=p-c4d3f089.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["blindCss","IxBlindStyle0","sequentialInstanceId","Blind","constructor","hostRef","this","blindId","onHeaderClick","collapsed","collapsedChange","emit","componentDidLoad","animateCollapse","content","hostElement","shadowRoot","querySelector","animation","isCollapsed","rotateChevronRight","rotateChevronDown","anime","targets","chevronRef","duration","easing","rotateZ","opacity","render","h","Host","key","class","variant","closed","type","a11yBoolean","onClick","name","color","ref","id","label","undefined","Fragment","icon","title","format","bold","sublabel","hide"],"sources":["src/components/blind/blind.scss?tag=ix-blind&encapsulation=shadow","src/components/blind/blind.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'legacy/mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n@mixin blind($variant: 'insight') {\n  :host(.blind-#{$variant}) {\n    @if $variant == 'outline' {\n      border: solid\n        var(--theme-blind--border-thickness)\n        var(--theme-blind-base--border-color);\n    }\n\n    .blind-header {\n      @if $variant == 'outline' {\n        background-color: var(--theme-color-ghost);\n      } @else {\n        background-color: var(--theme-color-#{$variant});\n      }\n\n      @if $variant == 'insight' or $variant == 'outline' {\n        @include ghost-hover-pressed;\n      } @else {\n        @include hover {\n          background-color: var(--theme-color-#{$variant}--hover);\n        }\n\n        @include active {\n          background-color: var(--theme-color-#{$variant}--active);\n        }\n      }\n    }\n\n    @if $variant == 'insight' or $variant == 'outline' {\n      .blind-header-title-label {\n        color: var(--theme-color-std-text);\n      }\n      .blind-header-title-sublabel {\n        color: var(--theme-color-soft-text);\n      }\n    } @else {\n      .blind-header-title-label,\n      .blind-header-title-sublabel {\n        color: var(--theme-color-#{$variant}--contrast);\n      }\n    }\n\n    @if $variant == 'outline' {\n      border-color: var(--theme-color-soft-bdr);\n    } @else {\n      background-color: var(--theme-blind-base--background);\n    }\n  }\n}\n\n:host {\n  @include ix-component;\n  display: flex;\n  flex-direction: column;\n  border-radius: var(--theme-blind--border-radius);\n  overflow: hidden;\n\n  .blind-header-wrapper {\n    position: relative;\n    min-height: 3rem;\n    height: 3rem;\n    overflow: hidden;\n  }\n\n  .blind-header-content {\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: flex-start;\n\n    width: 100%;\n    height: 100%;\n\n    pointer-events: none;\n    padding-left: 0.5rem;\n  }\n\n  .blind-header-title {\n    display: flex;\n    position: relative;\n    align-items: center;\n    flex-grow: 1;\n    margin-right: 0.5rem;\n  }\n\n  .blind-header {\n    all: unset;\n    @include ellipsis;\n\n    display: block;\n    position: absolute;\n\n    top: 0px;\n    left: 0px;\n\n    pointer-events: all;\n\n    padding-left: 2.5rem;\n    min-height: 3rem;\n    height: 3rem;\n    width: calc(100% - 2 * var(--theme-blind--border-thickness));\n    border: solid var(--theme-blind--border-thickness) transparent;\n    border-radius: var(--theme-blind--border-radius)\n      var(--theme-blind--border-radius) 0 0;\n    cursor: pointer;\n\n    @include focus-visible {\n      border-color: var(--theme-color-focus-bdr);\n      outline: none;\n    }\n  }\n\n  .blind-header-title-icon,\n  .collapse-icon {\n    margin-right: $small-space;\n  }\n\n  .blind-header-title-row {\n    display: flex;\n    width: 100%;\n    overflow: hidden;\n  }\n\n  .blind-header-title-col {\n    display: inline-flex;\n    align-items: center;\n    width: calc(100% - 1rem);\n    overflow: hidden;\n  }\n\n  .blind-header-title-col:not(:first-of-type) {\n    justify-content: flex-end;\n  }\n  ix-typography {\n    flex-grow: 1;\n    @include ellipsis;\n  }\n\n  .blind-header-title-label {\n    @include ellipsis;\n    padding-inline-end: 0.5rem;\n  }\n\n  .blind-header-title-sublabel {\n    @include ellipsis;\n    padding-inline: 0.5rem;\n  }\n\n  .blind-header-title {\n    display: flex;\n    align-items: center;\n    flex-grow: 1;\n    height: 100%;\n    min-width: 0;\n  }\n\n  .blind-header-labels {\n    display: inline-flex;\n    flex-grow: 1;\n    min-width: 0;\n  }\n\n  .blind-content {\n    display: block;\n    padding: 1rem;\n    transition-property: padding;\n    transition-duration: var(--theme-default-time);\n    transition-timing-function: ease-in;\n\n    &.hide {\n      max-height: 0;\n      padding-top: 0px;\n      padding-bottom: 0px;\n    }\n  }\n\n  .header-actions {\n    pointer-events: all;\n    margin-left: auto;\n  }\n}\n\n$blind-variants: (\n  alarm,\n  critical,\n  info,\n  insight,\n  neutral,\n  notification,\n  success,\n  warning,\n  primary,\n  outline\n);\n\n@each $variant in $blind-variants {\n  @include blind($variant);\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { CardVariant } from '../card/card';\nimport { a11yBoolean } from '../utils/a11y';\n\nexport type BlindVariant = CardVariant | 'outline';\n\nlet sequentialInstanceId = 0;\n\n@Component({\n  tag: 'ix-blind',\n  styleUrl: 'blind.scss',\n  shadow: true,\n})\nexport class Blind {\n  /**\n   * Collapsed state\n   */\n  @Prop({ mutable: true, reflect: true }) collapsed = false;\n\n  /**\n   * Label of blind\n   */\n  @Prop() label: string;\n\n  /**\n   * Secondary label inside blind header\n   * @since 2.0.0\n   */\n  @Prop() sublabel: string;\n\n  /**\n   * Optional icon to be displayed next to the header label\n   * @since 1.5.0\n   */\n  @Prop() icon: string;\n\n  /**\n   * Blind variant\n   * @since 2.0.0\n   */\n  @Prop() variant: BlindVariant = 'insight';\n\n  /**\n   * Collapsed state changed\n   */\n  @Event() collapsedChange: EventEmitter<boolean>;\n\n  @Element() hostElement!: HTMLIxBlindElement;\n\n  private chevronRef: HTMLElement;\n  private blindId = ++sequentialInstanceId;\n\n  constructor() {}\n\n  private onHeaderClick() {\n    this.collapsed = !this.collapsed;\n    this.collapsedChange.emit(this.collapsed);\n  }\n\n  componentDidLoad() {\n    this.animateCollapse(this.collapsed);\n  }\n\n  get content() {\n    return this.hostElement.shadowRoot.querySelector('.blind-content');\n  }\n\n  @Watch('collapsed')\n  animation(isCollapsed: boolean) {\n    this.animateCollapse(isCollapsed);\n  }\n\n  private animateCollapse(isCollapsed: boolean) {\n    if (isCollapsed) {\n      this.rotateChevronRight();\n    } else {\n      this.rotateChevronDown();\n    }\n  }\n\n  private rotateChevronDown() {\n    anime({\n      targets: this.chevronRef,\n      duration: 150,\n      easing: 'easeInOutSine',\n      rotateZ: 90,\n    });\n    anime({\n      targets: this.content,\n      duration: 150,\n      easing: 'easeInOutSine',\n      opacity: 1,\n    });\n  }\n\n  private rotateChevronRight() {\n    anime({\n      targets: this.chevronRef,\n      duration: 150,\n      easing: 'easeInOutSine',\n      rotateZ: 0,\n    });\n    anime({\n      targets: this.content,\n      duration: 150,\n      easing: 'easeInOutSine',\n      opacity: 0,\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          [`blind-${this.variant}`]: true,\n        }}\n      >\n        <div class={'blind-header-wrapper'}>\n          <button\n            class={{\n              'blind-header': true,\n              [`blind-${this.variant}`]: true,\n              closed: this.collapsed,\n            }}\n            type=\"button\"\n            aria-labelledby={`ix-blind-header-title-${this.blindId}`}\n            aria-controls={`ix-blind-content-section-${this.blindId}`}\n            aria-expanded={a11yBoolean(!this.collapsed)}\n            onClick={() => this.onHeaderClick()}\n          >\n            <slot name=\"custom-header\"></slot>\n          </button>\n\n          <div class={'blind-header-content'}>\n            <ix-icon\n              class=\"collapse-icon\"\n              name={'chevron-right-small'}\n              color={\n                this.variant === 'insight' || this.variant === 'outline'\n                  ? 'color-primary'\n                  : `color-${this.variant}--contrast`\n              }\n              ref={(ref) => (this.chevronRef = ref)}\n            ></ix-icon>\n            <div\n              class=\"blind-header-title\"\n              id={`ix-blind-header-title-${this.blindId}`}\n            >\n              {this.label !== undefined ? (\n                <Fragment>\n                  {this.icon && (\n                    <ix-icon\n                      class=\"blind-header-title-icon\"\n                      name={this.icon}\n                      color={\n                        this.variant === 'insight' || this.variant === 'outline'\n                          ? 'color-std-text'\n                          : `color-${this.variant}--contrast`\n                      }\n                    ></ix-icon>\n                  )}\n                  <div class={'blind-header-title-row'}>\n                    <div class=\"blind-header-title-col\">\n                      <ix-typography title={this.label} format=\"label-lg\" bold>\n                        <div\n                          class=\"blind-header-title-label\"\n                          title={this.label}\n                        >\n                          {this.label}\n                        </div>\n                      </ix-typography>\n                    </div>\n\n                    {this.sublabel && (\n                      <div class=\"blind-header-title-col\">\n                        <ix-typography title={this.sublabel}>\n                          <div class=\"blind-header-title-sublabel\">\n                            {this.sublabel}\n                          </div>\n                        </ix-typography>\n                      </div>\n                    )}\n                  </div>\n                  <div class=\"header-actions\">\n                    <slot name=\"header-actions\"></slot>\n                  </div>\n                </Fragment>\n              ) : null}\n            </div>\n          </div>\n        </div>\n        <section\n          id={`ix-blind-content-section-${this.blindId}`}\n          aria-labelledby={`ix-blind-header-title-${this.blindId}`}\n        >\n          <div\n            class={{\n              'blind-content': true,\n              hide: this.collapsed,\n            }}\n          >\n            {!this.collapsed ? <slot></slot> : null}\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n"],"mappings":"0IAAA,MAAMA,EAAW,owUACjB,MAAAC,EAAeD,ECyBf,IAAIE,EAAuB,E,MAOdC,EAAK,MAuChB,WAAAC,CAAAC,G,2DAFQC,KAAAC,UAAYL,E,eAjCgC,M,8EAuBpB,S,CAcxB,aAAAM,GACNF,KAAKG,WAAaH,KAAKG,UACvBH,KAAKI,gBAAgBC,KAAKL,KAAKG,U,CAGjC,gBAAAG,GACEN,KAAKO,gBAAgBP,KAAKG,U,CAG5B,WAAIK,GACF,OAAOR,KAAKS,YAAYC,WAAWC,cAAc,iB,CAInD,SAAAC,CAAUC,GACRb,KAAKO,gBAAgBM,E,CAGf,eAAAN,CAAgBM,GACtB,GAAIA,EAAa,CACfb,KAAKc,oB,KACA,CACLd,KAAKe,mB,EAID,iBAAAA,GACNC,EAAM,CACJC,QAASjB,KAAKkB,WACdC,SAAU,IACVC,OAAQ,gBACRC,QAAS,KAEXL,EAAM,CACJC,QAASjB,KAAKQ,QACdW,SAAU,IACVC,OAAQ,gBACRE,QAAS,G,CAIL,kBAAAR,GACNE,EAAM,CACJC,QAASjB,KAAKkB,WACdC,SAAU,IACVC,OAAQ,gBACRC,QAAS,IAEXL,EAAM,CACJC,QAASjB,KAAKQ,QACdW,SAAU,IACVC,OAAQ,gBACRE,QAAS,G,CAIb,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,CAAC,SAAS3B,KAAK4B,WAAY,OAG7BJ,EAAA,OAAAE,IAAA,2CAAKC,MAAO,wBACVH,EAAA,UAAAE,IAAA,2CACEC,MAAO,CACL,eAAgB,KAChB,CAAC,SAAS3B,KAAK4B,WAAY,KAC3BC,OAAQ7B,KAAKG,WAEf2B,KAAK,SAAQ,kBACI,yBAAyB9B,KAAKC,UAAS,gBACzC,4BAA4BD,KAAKC,UAAS,gBAC1C8B,GAAa/B,KAAKG,WACjC6B,QAAS,IAAMhC,KAAKE,iBAEpBsB,EAAA,QAAAE,IAAA,2CAAMO,KAAK,mBAGbT,EAAA,OAAAE,IAAA,2CAAKC,MAAO,wBACVH,EAAA,WAAAE,IAAA,2CACEC,MAAM,gBACNM,KAAM,sBACNC,MACElC,KAAK4B,UAAY,WAAa5B,KAAK4B,UAAY,UAC3C,gBACA,SAAS5B,KAAK4B,oBAEpBO,IAAMA,GAASnC,KAAKkB,WAAaiB,IAEnCX,EAAA,OAAAE,IAAA,2CACEC,MAAM,qBACNS,GAAI,yBAAyBpC,KAAKC,WAEjCD,KAAKqC,QAAUC,UACdd,EAACe,EAAQ,KACNvC,KAAKwC,MACJhB,EAAA,WACEG,MAAM,0BACNM,KAAMjC,KAAKwC,KACXN,MACElC,KAAK4B,UAAY,WAAa5B,KAAK4B,UAAY,UAC3C,iBACA,SAAS5B,KAAK4B,sBAIxBJ,EAAA,OAAKG,MAAO,0BACVH,EAAA,OAAKG,MAAM,0BACTH,EAAA,iBAAeiB,MAAOzC,KAAKqC,MAAOK,OAAO,WAAWC,KAAI,MACtDnB,EAAA,OACEG,MAAM,2BACNc,MAAOzC,KAAKqC,OAEXrC,KAAKqC,SAKXrC,KAAK4C,UACJpB,EAAA,OAAKG,MAAM,0BACTH,EAAA,iBAAeiB,MAAOzC,KAAK4C,UACzBpB,EAAA,OAAKG,MAAM,+BACR3B,KAAK4C,aAMhBpB,EAAA,OAAKG,MAAM,kBACTH,EAAA,QAAMS,KAAK,qBAGb,QAIVT,EAAA,WAAAE,IAAA,2CACEU,GAAI,4BAA4BpC,KAAKC,UAAS,kBAC7B,yBAAyBD,KAAKC,WAE/CuB,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACL,gBAAiB,KACjBkB,KAAM7C,KAAKG,aAGXH,KAAKG,UAAYqB,EAAA,aAAgB,O"}

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

@@ -0,0 +1,2 @@
+import{r as e,c as a,h as t,H as i,g as n}from"./p-26e9d40e.js";import{a as o}from"./p-71206084.js";import{u as r,A as s}from"./p-7c36d3fa.js";import"./p-c4749812.js";const c=":host{display:flex;position:relative;width:100%;height:100%}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .map-nav{display:flex;margin-left:3.25rem;position:relative;height:100%;flex-grow:1;overflow:hidden}:host .map-nav-sidebar{display:flex;flex-direction:column;align-items:center;width:29.75rem;max-width:29.75rem;min-width:29.75rem;height:100%;left:4rem;background-color:var(--theme-map-navigation--background);border-inline-end:0.125rem solid var(--theme-map-navigation-separator--background);z-index:99}:host .map-nav-sidebar-content{align-items:center;position:relative;overflow:auto;height:100%;width:100%}:host .map-nav-sidebar-content .map-nav-sidebar-static-content{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text);display:flex;justify-content:space-between;margin-top:0.437rem;margin-bottom:0.812rem;margin-left:1rem;margin-right:1rem}:host .map-nav-header{display:flex;position:relative;align-items:center;height:3.5rem;min-height:3.5rem;width:100%}:host .map-nav-header .map-nav-header-brand{background-color:var(--theme-map-navigation-background);display:flex;align-items:center;height:100%;width:100%;padding:0 1rem;--theme-app-header--color:var(--theme-map-navigation-header--color);--theme-app-header-logo--color:var(--theme-map-navigation-logo--color)}:host .map-nav-header .map-nav-header-brand button{margin-left:1rem}:host .map-nav-header-content{display:flex;height:3.5rem;align-items:center;overflow:hidden;padding:0 1rem}:host .map-nav-header-content.empty{height:0}:host .map-nav-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text);display:flex;align-items:center;flex-grow:1}:host .content{display:block;flex-grow:1;position:relative;height:100%;overflow:hidden;z-index:calc(var(--theme-z-index-sticky) - 1)}:host ::slotted(ix-menu){position:absolute}";const d=c;const h=class{constructor(t){e(this,t);this.navigationToggled=a(this,"navigationToggled",7);this.contextMenuClick=a(this,"contextMenuClick",7);this.applicationName=undefined;this.navigationTitle=undefined;this.hideContextMenu=true;this.isSidebarOpen=true;this.hasContentHeader=false}get menu(){return this.hostElement.querySelector("ix-menu")}get menuOverlay(){return this.hostElement.querySelector("ix-menu-overlay")}get mapNavMenu(){return this.hostElement.shadowRoot.querySelector(".map-nav-menu")}get sidebar(){return this.hostElement.shadowRoot.querySelector(".map-nav-sidebar")}get overlay(){return this.hostElement.shadowRoot.querySelector("#overlay")}componentDidRender(){this.appendMenu();this.closeOverlay()}componentWillLoad(){r(this.hostElement,s,{hideHeader:false,host:"map-navigation"})}appendMenu(){this.menu.addEventListener("mapExpandChange",(e=>{const a=!e.detail;this.toggleSidebar(a)}));this.menu.enableMapExpand=true}async toggleSidebar(e){if(e!==undefined){this.isSidebarOpen=e}else{this.isSidebarOpen=!this.isSidebarOpen}if(this.isSidebarOpen){this.openSidebar()}else{this.closeSidebar()}this.navigationToggled.emit(this.isSidebarOpen);this.menu.toggleMapExpand(this.isSidebarOpen)}closeSidebar(){o({targets:this.sidebar,duration:h.defaultTime,marginLeft:[0,"-29.75rem"],opacity:[1,0],easing:"easeInSine",complete:()=>{this.sidebar.classList.add("d-none")}})}openSidebar(){o({targets:this.sidebar,duration:h.defaultTime,marginLeft:["-29.75rem",0],opacity:[0,1],easing:"easeOutSine",begin:()=>{this.sidebar.classList.remove("d-none")}})}async openOverlay(e,a,t,i){o({targets:this.overlay,duration:h.slowTime,backdropFilter:[0,"blur(1rem)"],translateX:["-4rem",0],opacity:[0,1],easing:"easeOutSine",begin:()=>{this.overlay.classList.remove("d-none")}});const n=document.createElement("ix-map-navigation-overlay");n.setAttribute("color",i);n.setAttribute("name",e);n.setAttribute("icon",t);n.setAttribute("slot","overlay");n.addEventListener("closeClick",(()=>this.closeOverlay()));n.appendChild(a);this.hostElement.appendChild(n)}async closeOverlay(){o({targets:this.overlay,duration:h.slowTime,backdropFilter:["blur(1rem)",0],translateX:[0,"-4rem"],opacity:[1,0],easing:"easeInSine",complete:()=>{var e;if(!this.overlay){return}(e=this.overlay.firstChild)===null||e===void 0?void 0:e.remove();this.overlay.classList.add("d-none")}})}checkHasContentHeader(e){const a=e.currentTarget.assignedNodes({flatten:true});this.hasContentHeader=(a===null||a===void 0?void 0:a.length)!==0}render(){return t(i,{key:"da13112a9c8e48074fef6ee0020b430e504f8775"},t("slot",{key:"f1796d6932ecbd587e1a347afb1d2adef4a3cc7a",name:"menu"}),t("div",{key:"be44e812efee522740f272b47c6fa8c5bb92ca12",class:"map-nav"},t("div",{key:"3ca2fc131d03b610fbd3d502c9a3407391edccc7",class:"map-nav-sidebar"},t("div",{key:"9ff12bebf91ca086117a8b96b988cd062fc97a04",class:"map-nav-header"},t("ix-application-header",{key:"6f7db93363381306a8bb841f4bc674c66cf2c1cc",name:this.applicationName,class:"map-nav-header-brand"},t("slot",{key:"ad878765b9f0be087a4885c0a28333ad8e8b7a75",slot:"logo",name:"logo"}))),t("div",{key:"af230a4eb04548576bef004d95b8af4c46318bdd",class:"map-nav-sidebar-content"},t("div",{key:"7100bcc4d0bd30ac9d556d953efb8854f954071c",class:"map-nav-sidebar-static-content"},t("div",{key:"cb8fc4df05ec589ae63a25355430bae657154c02",class:"map-nav-title"},this.navigationTitle),this.hideContextMenu?"":t("ix-icon-button",{icon:"context-menu",ghost:true,size:"24",variant:"secondary",onClick:e=>this.contextMenuClick.emit()})),t("div",{key:"c79ad0be478058858416fa64597efc92efe53006",class:"map-nav-sidebar-user-content"},t("slot",{key:"5af678364192e6cbd18973ff052c42f97332fa26",name:"sidebar-content"})))),t("div",{key:"23f214ac776d9d4049f2e9a6438cd6ee9d915da7",class:"content"},t("div",{key:"1065a1c4ec51653f34700ed66e4ea9cf24e172a4",class:{"map-nav-header-content":true,"bg-2":true,empty:!this.hasContentHeader}},t("slot",{key:"902317e41640c10d20d465f69e234c57905a59ee",name:"content-header",onSlotchange:e=>this.checkHasContentHeader(e)})),t("main",{key:"24be144f96016b88614f6f28e37986cb43a5564d"},t("slot",{key:"eea65a81824e09e9f8e7a315ce4fab99aec83c79"}),t("slot",{key:"9b9e19fc09f21d77e61fd772695c5d9e25e37d98",name:"overlay"})))))}get hostElement(){return n(this)}};h.defaultTime=150;h.slowTime=500;h.style=d;export{h as ix_map_navigation};
+//# sourceMappingURL=p-c5762d6c.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["mapNavigationCss","IxMapNavigationStyle0","MapNavigation","menu","this","hostElement","querySelector","menuOverlay","mapNavMenu","shadowRoot","sidebar","overlay","componentDidRender","appendMenu","closeOverlay","componentWillLoad","useContextProvider","ApplicationLayoutContext","hideHeader","host","addEventListener","event","state","detail","toggleSidebar","enableMapExpand","show","undefined","isSidebarOpen","openSidebar","closeSidebar","navigationToggled","emit","toggleMapExpand","anime","targets","duration","defaultTime","marginLeft","opacity","easing","complete","classList","add","begin","remove","openOverlay","name","component","icon","color","slowTime","backdropFilter","translateX","overlayInstance","document","createElement","setAttribute","appendChild","_a","firstChild","checkHasContentHeader","e","nodes","currentTarget","assignedNodes","flatten","hasContentHeader","length","render","h","Host","key","class","applicationName","slot","navigationTitle","hideContextMenu","ghost","size","variant","onClick","_","contextMenuClick","empty","onSlotchange"],"sources":["src/components/map-navigation/map-navigation.scss?tag=ix-map-navigation&encapsulation=shadow","src/components/map-navigation/map-navigation.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'legacy/mixins/fonts';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  $appHeaderHeight: 3.5rem;\n  $appHeaderGradientHeight: 4rem;\n  $navHeaderHeight: 11.5rem;\n  $sidebarWidth: 29.75rem;\n\n  display: flex;\n  position: relative;\n  width: 100%;\n  height: 100%;\n\n  .map-nav {\n    display: flex;\n    margin-left: 3.25rem;\n    position: relative;\n    height: 100%;\n    flex-grow: 1;\n    overflow: hidden;\n  }\n\n  .map-nav-sidebar {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    width: $sidebarWidth;\n    max-width: $sidebarWidth;\n    min-width: $sidebarWidth;\n    height: 100%;\n    left: 4rem;\n    background-color: var(--theme-map-navigation--background);\n    border-inline-end: 0.125rem solid\n      var(--theme-map-navigation-separator--background);\n    z-index: 99;\n  }\n\n  .map-nav-sidebar-content {\n    align-items: center;\n    position: relative;\n    overflow: auto;\n    height: 100%;\n    width: 100%;\n\n    .map-nav-sidebar-static-content {\n      @include text-h2;\n      display: flex;\n      justify-content: space-between;\n      margin-top: 0.437rem;\n      margin-bottom: 0.812rem;\n      margin-left: $default-space;\n      margin-right: $default-space;\n    }\n  }\n\n  .map-nav-header {\n    display: flex;\n    position: relative;\n    align-items: center;\n    height: $appHeaderHeight;\n    min-height: $appHeaderHeight;\n    width: 100%;\n\n    .map-nav-header-brand {\n      background-color: var(--theme-map-navigation-background);\n      display: flex;\n      align-items: center;\n      height: 100%;\n      width: 100%;\n      padding: 0 $default-space;\n\n      --theme-app-header--color: var(--theme-map-navigation-header--color);\n      --theme-app-header-logo--color: var(--theme-map-navigation-logo--color);\n\n      button {\n        margin-left: $default-space;\n      }\n    }\n  }\n\n  .map-nav-header-content {\n    display: flex;\n    height: $appHeaderHeight;\n    align-items: center;\n    overflow: hidden;\n    padding: 0 $default-space;\n\n    &.empty {\n      height: 0;\n    }\n  }\n\n  .map-nav-title {\n    @include text-h2();\n\n    display: flex;\n    align-items: center;\n    flex-grow: 1;\n  }\n\n  .content {\n    display: block;\n    flex-grow: 1;\n    position: relative;\n    height: 100%;\n    overflow: hidden;\n    z-index: calc(var(--theme-z-index-sticky) - 1);\n  }\n\n  ::slotted(ix-menu) {\n    position: absolute;\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  State,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { useContextProvider } from '../utils/context';\n\n@Component({\n  tag: 'ix-map-navigation',\n  styleUrl: 'map-navigation.scss',\n  shadow: true,\n})\nexport class MapNavigation {\n  private static readonly defaultTime = 150;\n  private static readonly slowTime = 500;\n\n  @Element() hostElement: HTMLIxMapNavigationElement;\n\n  /**\n   * Application name\n   */\n  @Prop() applicationName: string;\n\n  /**\n   * Navigation title\n   */\n  @Prop() navigationTitle: string;\n\n  /**\n   * Hide the sidebar context menu button when set to true\n   */\n  @Prop() hideContextMenu = true;\n\n  /**\n   * Navigation toggled\n   */\n  @Event() navigationToggled: EventEmitter<boolean>;\n\n  /**\n   * Context menu clicked\n   */\n  @Event() contextMenuClick: EventEmitter<void>;\n\n  @State() isSidebarOpen = true;\n  @State() hasContentHeader = false;\n\n  get menu() {\n    return this.hostElement.querySelector('ix-menu');\n  }\n\n  get menuOverlay() {\n    return this.hostElement.querySelector('ix-menu-overlay');\n  }\n\n  get mapNavMenu() {\n    return this.hostElement.shadowRoot.querySelector('.map-nav-menu');\n  }\n\n  get sidebar() {\n    return this.hostElement.shadowRoot.querySelector('.map-nav-sidebar');\n  }\n\n  get overlay() {\n    return this.hostElement.shadowRoot.querySelector('#overlay');\n  }\n\n  componentDidRender() {\n    this.appendMenu();\n    this.closeOverlay();\n  }\n\n  componentWillLoad() {\n    useContextProvider(this.hostElement, ApplicationLayoutContext, {\n      hideHeader: false,\n      host: 'map-navigation',\n    });\n  }\n\n  private appendMenu() {\n    this.menu.addEventListener(\n      'mapExpandChange',\n      (event: CustomEvent<boolean>) => {\n        const state = !event.detail;\n        this.toggleSidebar(state);\n      }\n    );\n    this.menu.enableMapExpand = true;\n  }\n\n  /**\n   * Change the visibility of the sidebar\n   *\n   * @param show new visibility state\n   * @since 1.6.0\n   */\n  @Method()\n  async toggleSidebar(show?: boolean) {\n    if (show !== undefined) {\n      this.isSidebarOpen = show;\n    } else {\n      this.isSidebarOpen = !this.isSidebarOpen;\n    }\n\n    if (this.isSidebarOpen) {\n      this.openSidebar();\n    } else {\n      this.closeSidebar();\n    }\n\n    this.navigationToggled.emit(this.isSidebarOpen);\n    this.menu.toggleMapExpand(this.isSidebarOpen);\n  }\n\n  private closeSidebar() {\n    anime({\n      targets: this.sidebar,\n      duration: MapNavigation.defaultTime,\n      marginLeft: [0, '-29.75rem'],\n      opacity: [1, 0],\n      easing: 'easeInSine',\n      complete: () => {\n        this.sidebar.classList.add('d-none');\n      },\n    });\n  }\n\n  private openSidebar() {\n    anime({\n      targets: this.sidebar,\n      duration: MapNavigation.defaultTime,\n      marginLeft: ['-29.75rem', 0],\n      opacity: [0, 1],\n      easing: 'easeOutSine',\n      begin: () => {\n        this.sidebar.classList.remove('d-none');\n      },\n    });\n  }\n\n  /**\n   * Open a overlay inside content area\n   * @deprecated Will be removed in 2.0.0. Use slot based approach\n   *\n   * @param name\n   * @param component\n   * @param icon\n   * @param color\n   */\n  @Method()\n  async openOverlay(\n    name: string,\n    component: HTMLElement,\n    icon?: string,\n    color?: string\n  ) {\n    anime({\n      targets: this.overlay,\n      duration: MapNavigation.slowTime,\n      backdropFilter: [0, 'blur(1rem)'],\n      translateX: ['-4rem', 0],\n      opacity: [0, 1],\n      easing: 'easeOutSine',\n      begin: () => {\n        this.overlay.classList.remove('d-none');\n      },\n    });\n\n    const overlayInstance = document.createElement('ix-map-navigation-overlay');\n    overlayInstance.setAttribute('color', color);\n    overlayInstance.setAttribute('name', name);\n    overlayInstance.setAttribute('icon', icon);\n    overlayInstance.setAttribute('slot', 'overlay');\n    overlayInstance.addEventListener('closeClick', () => this.closeOverlay());\n    overlayInstance.appendChild(component);\n    this.hostElement.appendChild(overlayInstance);\n  }\n\n  /**\n   * Close current shown overlay\n   * @deprecated Will be removed in 2.0.0. Use slot based approach\n   */\n  @Method()\n  async closeOverlay() {\n    anime({\n      targets: this.overlay,\n      duration: MapNavigation.slowTime,\n      backdropFilter: ['blur(1rem)', 0],\n      translateX: [0, '-4rem'],\n      opacity: [1, 0],\n      easing: 'easeInSine',\n      complete: () => {\n        if (!this.overlay) {\n          return;\n        }\n        this.overlay.firstChild?.remove();\n        this.overlay.classList.add('d-none');\n      },\n    });\n  }\n\n  private checkHasContentHeader(e: Event) {\n    const nodes = (e.currentTarget as HTMLSlotElement).assignedNodes({\n      flatten: true,\n    });\n\n    this.hasContentHeader = nodes?.length !== 0;\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot name=\"menu\"></slot>\n        <div class=\"map-nav\">\n          <div class=\"map-nav-sidebar\">\n            <div class=\"map-nav-header\">\n              <ix-application-header\n                name={this.applicationName}\n                class=\"map-nav-header-brand\"\n              >\n                <slot slot=\"logo\" name=\"logo\"></slot>\n              </ix-application-header>\n            </div>\n            <div class=\"map-nav-sidebar-content\">\n              <div class=\"map-nav-sidebar-static-content\">\n                <div class=\"map-nav-title\">{this.navigationTitle}</div>\n                {this.hideContextMenu ? (\n                  ''\n                ) : (\n                  <ix-icon-button\n                    icon={'context-menu'}\n                    ghost\n                    size=\"24\"\n                    variant=\"secondary\"\n                    onClick={(_) => this.contextMenuClick.emit()}\n                  ></ix-icon-button>\n                )}\n              </div>\n              <div class=\"map-nav-sidebar-user-content\">\n                <slot name=\"sidebar-content\"></slot>\n              </div>\n            </div>\n          </div>\n          <div class=\"content\">\n            <div\n              class={{\n                'map-nav-header-content': true,\n                'bg-2': true,\n                empty: !this.hasContentHeader,\n              }}\n            >\n              <slot\n                name=\"content-header\"\n                onSlotchange={(e) => this.checkHasContentHeader(e)}\n              ></slot>\n            </div>\n            <main>\n              <slot></slot>\n              <slot name=\"overlay\"></slot>\n            </main>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}