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

package/dist/siemens-ix/p-9f55716d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["selectCss","Select","items","Array","from","this","hostElement","querySelectorAll","selectedItems","filter","item","selected","addItemButton","querySelector","isSingleMode","mode","isMultipleMode","watchSelectedIndices","newId","selectValue","isArray","onItemClicked","event","detail","emitItemClick","watchInputText","newValue","editable","itemExists","selectedIndices","includes","i","itemSelectionChange","emit","emitAddItem","value","trim","test","document","createElement","label","addItemRef","appendChild","clearInput","addItem","ids","forEach","some","map","inputValue","_a","length","componentWillLoad","onLabelChange","preventDefault","stopImmediatePropagation","disconnectedCallback","labelMutationObserver","disconnect","find","dropdownVisibilityChanged","dropdownShow","inputRef","focus","select","navigationItem","setHoverEffectForNavigatedSelectItem","removeHiddenFromItems","hasFocus","async","code","onArrowNavigation","onEnterNavigation","inputFilterText","onItemClick","_b","dropdownRef","updatePosition","stopPropagation","selectItems","classList","contains","index","indexOf","hover","filterItemsWithTypeahead","remove","toLowerCase","add","isDropdownEmpty","every","clear","render","h","Host","class","disabled","readonly","ref","dropdownAnchor","dropdownWrapperRef","onCloseClick","e","readOnly","type","allowClear","placeholder","i18nPlaceholderEditable","i18nPlaceholder","onInput","_c","icon","ghost","oval","size","onClick","name","show","anchor","trigger","onShowChanged","placement","overwriteDropdownStyle","delegateConfig","width","triggerRef","clientWidth","title","i18nSelectListHeader","IxSelectItemLabelChangeEvent","CustomEvent","constructor","super","bubbles","selectItemCss","SelectItem","itemClick","componentDidRender","Error","labelChange","oldValue","dispatchEvent","checked"],"sources":["./src/components/select/select.scss?tag=ix-select&encapsulation=scoped","./src/components/select/select.tsx","./src/components/select-item/events.ts","./src/components/select-item/select-item.scss?tag=ix-select-item&encapsulation=scoped","./src/components/select-item/select-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  display: inline-block;\n  position: relative;\n  height: auto;\n  width: 100%;\n\n  .select {\n    position: relative;\n    display: flex;\n    align-items: center;\n    height: auto;\n    background-color: var(--theme-input--background);\n    border: var(--theme-input--border-thickness) solid\n      var(--theme-input--border-color);\n    border-radius: var(--theme-input--border-radius);\n    padding: 0 0 0 $small-space;\n\n    @include hover {\n      background-color: var(--theme-input--background--hover);\n      border-color: var(--theme-input--border-color--hover);\n    }\n\n    &:focus-within {\n      background-color: var(--theme-input--background--focus);\n      border-color: var(--theme-input--border-color--focus);\n      outline: 1px solid #119fff !important;\n      outline-offset: var(--theme-input--focus--outline-offset);\n    }\n  }\n\n  .trigger {\n    display: flex;\n    align-items: center;\n    flex-grow: 1;\n    height: 100%;\n  }\n\n  .input-container {\n    display: flex;\n    position: relative;\n    align-items: flex-start;\n    width: 100%;\n\n    .chips {\n      position: relative;\n      display: flex;\n      align-items: center;\n      flex-wrap: wrap;\n      height: 100%;\n      max-height: 3.5rem;\n      flex-grow: 1;\n      overflow-y: auto;\n\n      > ix-filter-chip {\n        margin: 0 0.1rem;\n      }\n    }\n\n    input {\n      @include ellipsis;\n      @include text-default;\n      background: transparent;\n      height: 1.75rem;\n      width: 100%;\n\n      &,\n      &:hover,\n      &:focus-visible {\n        border: none;\n        outline: none;\n      }\n\n      &::placeholder {\n        color: var(--theme-input-select-icon--color);\n      }\n\n      &.hide-placeholder::placeholder {\n        opacity: 0;\n      }\n    }\n  }\n\n  .chevron-down-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: $x-large-space;\n    min-width: $x-large-space;\n    height: 100%;\n  }\n\n  .editable {\n    .chevron-down-container {\n      @include hover {\n        background-color: var(\n          --theme-btn-invisible-secondary--background--hover\n        );\n      }\n\n      @include active {\n        background-color: var(\n          --theme-btn-invisible-secondary--background--active\n        );\n      }\n    }\n  }\n\n  .add-item {\n    display: flex;\n    justify-content: flex-start;\n    align-items: center;\n    position: relative;\n    width: 100%;\n  }\n\n  .select-list-header {\n    @include ellipsis;\n    display: flex;\n    align-items: center;\n    height: $default-control-height;\n    color: var(--theme-select-list-item-hint--color);\n    margin: 0 $small-space 0 $x-large-space;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { IxSelectItemLabelChangeEvent } from '../select-item/events';\n\n@Component({\n  tag: 'ix-select',\n  styleUrl: 'select.scss',\n  scoped: true,\n})\nexport class Select {\n  @Element() hostElement!: HTMLIxSelectElement;\n\n  /**\n   * Indices of selected items\n   */\n  @Prop({ mutable: true }) selectedIndices: string | string[] = [];\n\n  /**\n   * Show clear button\n   */\n  @Prop() allowClear = false;\n\n  /**\n   * Selection mode\n   */\n  @Prop() mode: 'single' | 'multiple' = 'single';\n\n  /**\n   * Select is extendable\n   */\n  @Prop() editable = false;\n\n  /**\n   * If true the select will be in disabled state\n   */\n  @Prop() disabled = false;\n\n  /**\n   * If true the select will be in readonly mode\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Input field placeholder\n   */\n  @Prop() i18nPlaceholder = 'Select an option';\n\n  /**\n   * Input field placeholder for editable select\n   */\n  @Prop() i18nPlaceholderEditable = 'Type of select option';\n\n  /**\n   * Select list header\n   */\n  @Prop() i18nSelectListHeader = 'Please select an option';\n\n  /**\n   * Item selection changed\n   */\n  @Event() itemSelectionChange: EventEmitter<string | string[]>;\n\n  /**\n   * Item added to selection\n   */\n  @Event() addItem: EventEmitter<string>;\n\n  @State() dropdownShow = false;\n  @State() value: string[];\n  @State() dropdownWrapperRef!: HTMLElement;\n  @State() dropdownAnchor!: HTMLElement;\n  @State() isDropdownEmpty = false;\n  @State() hasFocus = false;\n  @State() navigationItem: HTMLIxSelectItemElement;\n  @State() inputFilterText: string;\n  @State() inputValue: string;\n\n  private inputRef!: HTMLInputElement;\n  private dropdownRef!: HTMLIxDropdownElement;\n  private addItemRef!: HTMLDivElement;\n\n  private labelMutationObserver: MutationObserver;\n\n  get items() {\n    return Array.from(this.hostElement.querySelectorAll('ix-select-item'));\n  }\n\n  get selectedItems() {\n    return this.items.filter((item) => item.selected);\n  }\n\n  get addItemButton() {\n    return this.hostElement.querySelector('.add-item');\n  }\n\n  get isSingleMode() {\n    return this.mode === 'single';\n  }\n\n  get isMultipleMode() {\n    return this.mode === 'multiple';\n  }\n\n  @Watch('selectedIndices')\n  watchSelectedIndices(newId: string | string[]) {\n    if (!newId) {\n      this.selectValue([]);\n      return;\n    }\n\n    if (Array.isArray(newId)) {\n      this.selectValue([...newId]);\n      return;\n    }\n\n    this.selectValue([newId]);\n  }\n\n  @Listen('itemClick')\n  onItemClicked(event: CustomEvent<string>) {\n    const newId = event.detail;\n    this.emitItemClick(newId);\n  }\n\n  @Watch('inputFilterText')\n  watchInputText(newValue: string) {\n    if (!this.editable) {\n      return;\n    }\n\n    if (this.itemExists(newValue)) {\n      return;\n    }\n  }\n\n  private emitItemClick(newId: string) {\n    if (this.isMultipleMode && Array.isArray(this.selectedIndices)) {\n      if (this.selectedIndices.includes(newId)) {\n        this.selectedIndices = this.selectedIndices.filter((i) => i !== newId);\n      } else {\n        this.selectedIndices = [...this.selectedIndices, newId];\n      }\n    } else {\n      this.selectedIndices = [newId];\n    }\n\n    this.selectValue(this.selectedIndices);\n    this.itemSelectionChange.emit(this.selectedIndices);\n  }\n\n  private emitAddItem(value: string) {\n    if (value.trim() === '') {\n      return;\n    }\n\n    const test = document.createElement('ix-select-item');\n    test.value = value;\n    test.label = value;\n\n    this.addItemRef.appendChild(test);\n\n    this.clearInput();\n    this.emitItemClick(value);\n    this.addItem.emit(value);\n  }\n\n  private selectValue(ids: string[]) {\n    this.items.forEach((item) => {\n      item.selected = ids.some((i) => i === item.value);\n    });\n\n    this.value = this.selectedItems.map((item) => item.label);\n\n    if (this.isSingleMode) {\n      this.inputValue = this.value?.length ? this.value[0] : null;\n      return;\n    }\n\n    this.inputValue = null;\n  }\n\n  componentWillLoad() {\n    if (this.selectedIndices) {\n      this.selectValue(\n        Array.isArray(this.selectedIndices)\n          ? this.selectedIndices\n          : [this.selectedIndices]\n      );\n    }\n  }\n\n  @Listen('ix-select-item:labelChange')\n  onLabelChange(event: IxSelectItemLabelChangeEvent) {\n    event.preventDefault();\n    event.stopImmediatePropagation();\n    this.selectValue(\n      Array.isArray(this.selectedIndices)\n        ? this.selectedIndices\n        : [this.selectedIndices]\n    );\n  }\n\n  disconnectedCallback() {\n    if (this.labelMutationObserver) {\n      this.labelMutationObserver.disconnect();\n    }\n  }\n\n  private itemExists(item: string) {\n    return this.items.find((i) => i.label === item);\n  }\n\n  private dropdownVisibilityChanged(event: CustomEvent<boolean>) {\n    this.dropdownShow = event.detail;\n\n    if (event.detail) {\n      this.inputRef.focus();\n      this.inputRef.select();\n\n      this.navigationItem = this.items[0];\n      this.setHoverEffectForNavigatedSelectItem();\n      this.removeHiddenFromItems();\n    }\n    this.hasFocus = event.detail;\n  }\n\n  @Listen('keydown', {\n    target: 'window',\n  })\n  async onKeyDown(event: KeyboardEvent) {\n    if (!this.dropdownShow) {\n      return;\n    }\n\n    if (event.code === 'ArrowDown' || event.code === 'ArrowUp') {\n      this.onArrowNavigation(event);\n    }\n\n    if (event.code === 'Enter' || event.code === 'NumpadEnter') {\n      await this.onEnterNavigation();\n    }\n\n    if (event.code === 'Escape') {\n      this.dropdownShow = false;\n    }\n  }\n\n  private async onEnterNavigation() {\n    if (this.isMultipleMode) {\n      return;\n    }\n\n    if (this.editable && !this.itemExists(this.inputFilterText)) {\n      this.emitAddItem(this.inputFilterText);\n      this.navigationItem = this.items[this.items.length - 1];\n    }\n\n    this.navigationItem?.onItemClick();\n    await this.dropdownRef?.updatePosition();\n\n    if (this.isSingleMode && !this.editable) {\n      this.dropdownShow = false;\n    }\n  }\n\n  private onArrowNavigation(event: KeyboardEvent) {\n    event.stopPropagation();\n    event.preventDefault();\n\n    const selectItems = this.items.filter(\n      (i) => !i.classList.contains('d-none')\n    );\n\n    const index = selectItems.indexOf(this.navigationItem);\n\n    if (event.code === 'ArrowDown' && index < selectItems.length - 1) {\n      this.navigationItem = selectItems[index + 1];\n    } else if (event.code === 'ArrowUp' && index > 0) {\n      this.navigationItem = selectItems[index - 1];\n    }\n\n    this.setHoverEffectForNavigatedSelectItem();\n  }\n\n  private setHoverEffectForNavigatedSelectItem() {\n    this.items.forEach((item: HTMLIxSelectItemElement) => {\n      item.hover = item === this.navigationItem;\n    });\n  }\n\n  private filterItemsWithTypeahead() {\n    this.inputFilterText = this.inputRef.value;\n    if (this.inputFilterText) {\n      this.items.forEach((item) => {\n        item.classList.remove('d-none');\n        if (\n          !item.label.toLowerCase().includes(this.inputFilterText.toLowerCase())\n        ) {\n          item.classList.add('d-none');\n        }\n      });\n    } else {\n      this.removeHiddenFromItems();\n    }\n    this.isDropdownEmpty = this.items.every((item) =>\n      item.classList.contains('d-none')\n    );\n  }\n\n  private removeHiddenFromItems() {\n    this.items.forEach((item) => {\n      item.classList.remove('d-none');\n    });\n  }\n\n  private clearInput() {\n    this.inputRef.value = '';\n    this.inputFilterText = '';\n  }\n\n  private clear() {\n    this.clearInput();\n    this.value = [];\n    this.selectedIndices = [];\n    this.itemSelectionChange.emit(null);\n    this.dropdownShow = false;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'form-control': true,\n            select: true,\n            focus: this.hasFocus,\n            editable: this.editable,\n            disabled: this.disabled,\n            readonly: this.readonly,\n          }}\n          ref={(ref) => {\n            this.dropdownAnchor = ref;\n            if (!this.editable) this.dropdownWrapperRef = ref;\n          }}\n        >\n          <div class=\"input-container\">\n            <div class=\"chips\">\n              {this.isMultipleMode\n                ? this.selectedItems?.map((item) => (\n                    <ix-filter-chip\n                      disabled={this.disabled || this.readonly}\n                      onCloseClick={(e) => {\n                        e.preventDefault();\n                        e.stopPropagation();\n                        this.emitItemClick(item.value);\n                      }}\n                    >\n                      {item.label}\n                    </ix-filter-chip>\n                  ))\n                : ''}\n              <div class=\"trigger\">\n                <input\n                  data-testid=\"input\"\n                  disabled={this.disabled}\n                  readOnly={this.readonly}\n                  type=\"text\"\n                  class={{\n                    'allow-clear': this.allowClear && !!this.value?.length,\n                  }}\n                  placeholder={\n                    this.editable\n                      ? this.i18nPlaceholderEditable\n                      : this.i18nPlaceholder\n                  }\n                  value={this.inputValue}\n                  ref={(ref) => (this.inputRef = ref)}\n                  onInput={() => this.filterItemsWithTypeahead()}\n                />\n                {this.isMultipleMode &&\n                this.allowClear &&\n                (this.value?.length || this.inputFilterText) ? (\n                  <ix-icon-button\n                    class=\"clear\"\n                    icon=\"clear\"\n                    ghost\n                    oval\n                    size=\"24\"\n                    onClick={(e) => {\n                      e.preventDefault();\n                      e.stopPropagation();\n                      this.clear();\n                    }}\n                  />\n                ) : null}\n                {this.disabled || this.readonly ? null : (\n                  <div\n                    class=\"chevron-down-container\"\n                    ref={(ref) => {\n                      if (this.editable) this.dropdownWrapperRef = ref;\n                    }}\n                  >\n                    <ix-icon class=\"chevron\" name=\"chevron-down-small\" />\n                  </div>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n        <ix-dropdown\n          ref={(ref) => (this.dropdownRef = ref)}\n          show={this.dropdownShow}\n          class={{\n            'd-none':\n              this.disabled ||\n              this.readonly ||\n              (this.isDropdownEmpty && !this.editable),\n          }}\n          anchor={this.dropdownAnchor}\n          trigger={this.dropdownWrapperRef}\n          onShowChanged={(e) => this.dropdownVisibilityChanged(e)}\n          placement=\"auto-start\"\n          overwriteDropdownStyle={async (delegateConfig) => {\n            return {\n              width: `${delegateConfig.triggerRef.clientWidth}px`,\n            };\n          }}\n        >\n          <div class=\"select-list-header\" title={this.i18nSelectListHeader}>\n            {this.i18nSelectListHeader}\n          </div>\n          <slot></slot>\n          <div ref={(ref) => (this.addItemRef = ref)} class=\"d-contents\"></div>\n          {this.itemExists(this.inputFilterText) ? (\n            ''\n          ) : (\n            <ix-dropdown-item\n              data-testid=\"add-item\"\n              icon=\"plus\"\n              class={{\n                'add-item': true,\n                'd-none': !(this.editable && this.inputFilterText),\n              }}\n              label={this.inputFilterText}\n              onItemClick={(e) => {\n                e.preventDefault();\n                e.stopPropagation();\n                this.emitAddItem(this.inputFilterText);\n              }}\n            ></ix-dropdown-item>\n          )}\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nexport class IxSelectItemLabelChangeEvent extends CustomEvent<{\n  oldValue: string;\n  newValue: string;\n}> {\n  constructor(detail: { oldValue: string; newValue: string }) {\n    super('ix-select-item:labelChange', {\n      bubbles: true,\n      detail,\n    });\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n  display: block;\n\n  ix-dropdown-item {\n    button {\n      margin-left: 1rem;\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { IxSelectItemLabelChangeEvent } from './events';\n\n@Component({\n  tag: 'ix-select-item',\n  styleUrl: 'select-item.scss',\n  scoped: true,\n})\nexport class SelectItem {\n  @Element() hostElement: HTMLIxSelectItemElement;\n\n  /**\n   * Displayed name of the item\n   */\n  @Prop({ reflect: true }) label: string;\n\n  /**\n   * Item value\n   */\n  @Prop({ reflect: true }) value!: any;\n\n  /**\n   * Whether the item is selected.\n   */\n  @Prop() selected = false;\n\n  /**\n   * @internal\n   */\n  @Prop() hover = false;\n\n  /**\n   * Item clicked\n   */\n  @Event() itemClick: EventEmitter<string>;\n\n  /**\n   * @internal\n   * @param event\n   */\n  @Method()\n  async onItemClick(event?: CustomEvent<HTMLIxDropdownItemElement>) {\n    event?.preventDefault();\n    event?.stopPropagation();\n\n    this.itemClick.emit(this.value);\n  }\n\n  componentDidRender() {\n    if (!this.value) {\n      throw Error('ix-select-item must have a `value` property');\n    }\n  }\n\n  @Watch('label')\n  labelChange(newValue: string, oldValue: string) {\n    this.hostElement.dispatchEvent(\n      new IxSelectItemLabelChangeEvent({\n        newValue: newValue,\n        oldValue: oldValue,\n      })\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-dropdown-item\n          checked={this.selected}\n          hover={this.hover}\n          label={this.label ? this.label : this.value}\n          onItemClick={(e) => this.onItemClick(e)}\n        ></ix-dropdown-item>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

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

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

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

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

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

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

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

@@ -1 +0,0 @@
-{"version":3,"names":["groupCss","Group","dropdownItems","Array","from","this","hostElement","querySelectorAll","groupItems","groupContent","querySelector","footer","constructor","hostRef","registerInstance","selectGroup","createEvent","selectItem","collapsedChanged","suppressHeaderSelection","header","undefined","subHeader","collapsed","selected","index","expandOnHeaderClick","dropdownTriggerRef","async","event","targetElement","target","contains","code","classList","matches","groupItem","onExpandClick","wasCollapsed","setGroupSelection","emit","stopPropagation","onHeaderClick","onItemClick","selection","componentWillRender","forEach","item","remove","_a","children","length","add","childElementCount","appendChild","componentDidLoad","addEventListener","evt","detail","render","h","Host","class","expand","tabindex","onClick","e","name","title","suppressSelection","focusable","groupDropdownItemCss","GroupDropdownItem","label","icon","groupItemCss","GroupItem","clickListen","selectedChanged","size","text","secondaryText"],"sources":["./src/components/group/group.scss?tag=ix-group&encapsulation=scoped","./src/components/group/group.tsx","./src/components/group-dropdown-item/group-dropdown-item.scss?tag=ix-group-dropdown-item&encapsulation=scoped","./src/components/group-dropdown-item/group-dropdown-item.tsx","./src/components/group-item/group-item.scss?tag=ix-group-item&encapsulation=scoped","./src/components/group-item/group-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  @include ellipsis;\n\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  max-width: 19.75rem;\n  border-color: var(--theme-group-item--border-color);\n\n  .group-header {\n    height: 4rem;\n    min-height: 4rem;\n    max-height: 4rem;\n    border-radius: 0.25rem;\n    display: flex;\n    background-color: var(--theme-group-item--background);\n    border: 1px solid var(--theme-group-item--border-color);\n    color: var(--theme-group-header--color);\n\n    cursor: pointer;\n\n    @include hover {\n      background-color: var(--theme-group-item--background--hover);\n      border-color: var(--theme-group-item--border-color--hover);\n    }\n\n    @include active {\n      background-color: var(--theme-group-item--background--active);\n      border-color: var(--theme-group-item--border-color--active);\n    }\n\n    @include focus-visible {\n      border-color: var(--focus--border-color);\n      border-radius: var(--theme-group--border-radius--focus);\n      outline: none;\n    }\n\n    &.selected {\n      border: var(--theme-primary-bdr-2);\n      background-color: var(--theme-group-item--background--selected);\n    }\n\n    .group-header-selection-indicator {\n      background-color: var(--theme-color-input--focus);\n    }\n  }\n\n  .group-header-clickable {\n    @include ellipsis;\n\n    display: flex;\n    width: 100%;\n    min-width: 0;\n  }\n\n  .group-header.expand {\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n\n  .group-header-selection-indicator {\n    width: $tiny-space;\n  }\n\n  .group-header-content {\n    @include ellipsis;\n\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    min-width: 0;\n    padding: 0.5rem;\n    padding-left: 0;\n    width: 100%;\n\n    .group-header-props-container {\n      width: 100%;\n    }\n\n    .group-header-title {\n      display: flex;\n      align-items: center;\n      font-size: 1rem;\n      font-weight: $font-weight-bold;\n      height: 1.5rem;\n\n      & > * {\n        @include ellipsis;\n\n        min-width: 0;\n      }\n    }\n\n    .group-subheader {\n      @include ellipsis();\n\n      height: 1.25rem;\n      font-size: 0.875rem;\n      color: var(--theme-group-subheader--color);\n    }\n  }\n\n  .expand-icon {\n    padding: 0.125rem 0.437rem;\n    color: var(--theme-color-std-text);\n  }\n\n  .btn-expand-header {\n    margin: $small-space;\n    margin-inline-end: $tiny-space;\n  }\n\n  .group-content {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .footer {\n    height: auto;\n    min-height: 0;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-group',\n  styleUrl: 'group.scss',\n  scoped: true,\n})\nexport class Group {\n  /**\n   * Prevent header from being selectable\n   */\n  @Prop() suppressHeaderSelection = false;\n\n  /**\n   * Group header\n   */\n  @Prop() header: string;\n\n  /**\n   * Group header subtitle\n   */\n  @Prop() subHeader: string;\n\n  /**\n   * Whether the group is collapsed or expanded. Defaults to true.\n   */\n  @Prop({ mutable: true, reflect: true }) collapsed = true;\n\n  /**\n   * Whether the group is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) selected: boolean;\n\n  /**\n   * The index of the selected group entry.\n   * If undefined no group item is selected.\n   */\n  @Prop({ mutable: true, reflect: true }) index: number;\n\n  /**\n   * Expand the group if the header is clicked\n   */\n  @Prop() expandOnHeaderClick = false;\n\n  /**\n   * Emits when whole group gets selected.\n   */\n  @Event() selectGroup: EventEmitter<boolean>;\n\n  /**\n   * Emits when group item gets selected.\n   */\n  @Event() selectItem: EventEmitter<number>;\n\n  /**\n   * Group collapsed\n   */\n  @Event() collapsedChanged: EventEmitter<boolean>;\n\n  @Element() hostElement!: HTMLIxGroupElement;\n\n  get dropdownItems() {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-group-dropdown-item')\n    );\n  }\n\n  get groupItems(): Array<HTMLIxGroupItemElement> {\n    return Array.from(\n      this.hostElement.querySelectorAll('ix-group-item:not(.footer)')\n    );\n  }\n\n  get groupContent() {\n    return this.hostElement.querySelector('.group-content');\n  }\n\n  get footer() {\n    return this.hostElement.querySelector('.footer');\n  }\n\n  @State() dropdownTriggerRef: HTMLElement;\n\n  constructor() {}\n\n  @Listen('keydown', {\n    target: 'window',\n  })\n  async onKeyDown(event: KeyboardEvent) {\n    const targetElement = event.target as HTMLElement;\n\n    if (!this.hostElement.contains(targetElement)) {\n      return;\n    }\n\n    if (event.code === 'Enter' || event.code === 'NumpadEnter') {\n      if (targetElement.classList.contains('group-header')) {\n        if (this.suppressHeaderSelection) {\n          this.collapsed = !this.collapsed;\n        } else {\n          this.selected = !this.selected;\n        }\n      } else if (targetElement.matches('ix-group-item')) {\n        const groupItem = targetElement as HTMLIxGroupItemElement;\n        groupItem.selected = !groupItem.selected;\n      }\n    }\n  }\n\n  private onExpandClick(event: Event) {\n    const wasCollapsed = this.collapsed;\n    this.collapsed = !this.collapsed;\n\n    if (!wasCollapsed && this.index !== undefined) {\n      this.index = undefined;\n      this.setGroupSelection(true);\n    }\n\n    this.collapsedChanged.emit(this.collapsed);\n    event.stopPropagation();\n  }\n\n  private onHeaderClick(event: Event) {\n    this.setGroupSelection(!this.selected);\n\n    if (this.suppressHeaderSelection) {\n      this.onExpandClick(event);\n    }\n  }\n\n  private onItemClick(index: number) {\n    if (index === this.index) {\n      this.index = undefined;\n      this.selectItem.emit(undefined);\n    } else {\n      this.index = index;\n      this.selectItem.emit(index);\n    }\n\n    this.setGroupSelection(false);\n  }\n\n  private setGroupSelection(selection: boolean) {\n    if (!this.suppressHeaderSelection) {\n      this.selected = selection;\n      this.selectGroup.emit(this.selected);\n    }\n  }\n\n  componentWillRender() {\n    this.groupItems.forEach((item, index) => {\n      item.selected = index === this.index;\n      item.index = index;\n      item.classList.remove('last');\n      if (\n        !this.footer?.children.length &&\n        index === this.groupItems.length - 1\n      ) {\n        item.classList.add('last');\n      }\n    });\n\n    if (this.footer?.childElementCount > 1) {\n      this.groupContent.appendChild(this.footer);\n    }\n  }\n\n  componentDidLoad() {\n    this.groupContent.addEventListener(\n      'selectedChanged',\n      (evt: CustomEvent<HTMLIxGroupItemElement>) => {\n        this.onItemClick(evt.detail.index);\n      }\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'group-header': true,\n            expand: !this.collapsed,\n            selected: this.selected,\n          }}\n          tabindex=\"0\"\n        >\n          <div\n            class=\"group-header-clickable\"\n            onClick={(e) => this.onHeaderClick(e)}\n          >\n            <div class=\"group-header-selection-indicator\"></div>\n            <ix-icon\n              class=\"btn-expand-header\"\n              name={`chevron-${this.collapsed ? 'right' : 'down'}-small`}\n              onClick={(e) => this.onExpandClick(e)}\n            ></ix-icon>\n            <div class=\"group-header-content\">\n              {this.header ? (\n                <div class=\"group-header-props-container\">\n                  <div class=\"group-header-title\">\n                    <span title={this.header}>{this.header}</span>\n                  </div>\n                  <div class=\"group-subheader\" title={this.subHeader}>\n                    {this.subHeader}\n                  </div>\n                </div>\n              ) : null}\n              <slot name=\"header\"></slot>\n            </div>\n          </div>\n          <ix-group-context-menu>\n            <slot name=\"dropdown\"></slot>\n          </ix-group-context-menu>\n        </div>\n        <div\n          class={{\n            'group-content': true,\n            'd-none': this.collapsed,\n          }}\n        >\n          <slot></slot>\n        </div>\n        <div class=\"d-none\">\n          <ix-group-item\n            class=\"footer last\"\n            suppressSelection={true}\n            focusable={false}\n          >\n            <slot name=\"footer\"></slot>\n          </ix-group-item>\n        </div>\n      </Host>\n    );\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n  display: contents;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-group-dropdown-item',\n  styleUrl: 'group-dropdown-item.scss',\n  scoped: true,\n})\nexport class GroupDropdownItem {\n  /**\n   * Group dropdown label\n   */\n  @Prop() label: string;\n\n  /**\n   * Group dropdown icon\n   */\n  @Prop() icon: string;\n\n  render() {\n    return (\n      <Host>\n        <ix-dropdown-item label={this.label} icon={this.icon}>\n          <slot></slot>\n        </ix-dropdown-item>\n      </Host>\n    );\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  display: flex;\n  min-height: 2.25rem;\n  height: 2.25rem;\n  align-items: center;\n  justify-content: space-between;\n  padding: $small-space $large-space $small-space 2.5rem;\n  position: relative;\n  margin-top: 0.0625rem;\n  border: 1px solid var(--theme-group-item--border-color);\n  outline: none;\n\n  background-color: var(--theme-group-item--background);\n\n  &.last {\n    border-bottom-left-radius: 0.25rem;\n    border-bottom-right-radius: 0.25rem;\n  }\n\n  ix-icon {\n    margin-right: $tiny-space;\n    margin-top: -0.125rem;\n  }\n\n  .group-entry-selection-indicator {\n    position: absolute;\n    left: 0;\n    height: 100%;\n    width: $tiny-space;\n  }\n\n  .group-entry-text {\n    @include ellipsis();\n    flex-grow: 1;\n  }\n\n  .group-entry-text-secondary {\n    &,\n    span {\n      @include ellipsis;\n    }\n\n    display: flex;\n    justify-content: flex-end;\n    flex-grow: 1;\n    white-space: nowrap;\n    color: var(--theme-color-soft-text);\n    font-size: 0.875rem;\n  }\n\n  &:not(.suppress-selection) {\n    @include hover {\n      background-color: var(--theme-group-item--background--hover);\n      border-color: var(--theme-group-item--border-color--hover);\n    }\n\n    @include active {\n      background-color: var(--theme-group-item--background--active);\n      border-color: var(--theme-group-item--border-color--active);\n    }\n  }\n\n  &.selected {\n    border-top-width: 0.062rem !important;\n    border-color: var(--theme-group-item--border-color--selected);\n    background-color: var(--theme-group-item--background--selected);\n\n    .group-entry-selection-indicator {\n      background-color: var(--theme-color-input--focus);\n    }\n  }\n\n  @include focus-visible {\n    border-color: var(--focus--border-color) !important;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-group-item',\n  styleUrl: 'group-item.scss',\n  scoped: true,\n})\nexport class GroupItem {\n  @Element() hostElement!: HTMLIxGroupItemElement;\n\n  /**\n   * Group item icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Group item text\n   */\n  @Prop() text: string;\n\n  /**\n   * Group item secondary text\n   */\n  @Prop() secondaryText: string;\n\n  /**\n   * Supress the selection of the group\n   */\n  @Prop() suppressSelection = false;\n\n  /**\n   * Show selected state\n   */\n  @Prop() selected: boolean;\n\n  /**\n   * The elements tabindex attribute will get set accordingly.\n   * If true tabindex will be 0, -1 otherwise.\n   */\n  @Prop() focusable = true;\n\n  /**\n   * Selection changed\n   */\n  @Event() selectedChanged: EventEmitter<HTMLIxGroupItemElement>;\n\n  /**\n   * Index\n   */\n  @Prop() index: number;\n\n  @Listen('click', { passive: true })\n  clickListen() {\n    if (this.suppressSelection) {\n      return;\n    }\n    this.selectedChanged.emit(this.hostElement);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          selected: this.selected && !this.suppressSelection,\n          'suppress-selection': this.suppressSelection,\n        }}\n        tabindex={this.focusable ? 0 : -1}\n      >\n        <div class=\"group-entry-selection-indicator\"></div>\n        {this.icon ? <ix-icon size=\"16\" name={this.icon}></ix-icon> : null}\n        {this.text ? (\n          <span class=\"group-entry-text\">\n            <span title={this.text}>{this.text}</span>\n          </span>\n        ) : null}\n        {this.secondaryText ? (\n          <span class=\"group-entry-text-secondary\">\n            <span title={this.secondaryText}>{this.secondaryText}</span>\n          </span>\n        ) : null}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAW,g/F,MC0BJC,EAAK,MAsDZC,oBACF,OAAOC,MAAMC,KACXC,KAAKC,YAAYC,iBAAiB,0B,CAIlCC,iBACF,OAAOL,MAAMC,KACXC,KAAKC,YAAYC,iBAAiB,8B,CAIlCE,mBACF,OAAOJ,KAAKC,YAAYI,cAAc,iB,CAGpCC,aACF,OAAON,KAAKC,YAAYI,cAAc,U,CAKxCE,YAAAC,GAAAC,EAAAT,KAAAQ,GAAAR,KAAAU,YAAAC,EAAAX,KAAA,iBAAAA,KAAAY,WAAAD,EAAAX,KAAA,gBAAAA,KAAAa,iBAAAF,EAAAX,KAAA,sBAAAA,KAAAc,wBAxEkC,MAAKd,KAAAe,OAAAC,UAAAhB,KAAAiB,UAAAD,UAAAhB,KAAAkB,UAea,KAAIlB,KAAAmB,SAAAH,UAAAhB,KAAAoB,MAAAJ,UAAAhB,KAAAqB,oBAgB1B,MAAKrB,KAAAsB,mBAAAN,SAAA,CA8CnCO,gBAAgBC,GACd,MAAMC,EAAgBD,EAAME,OAE5B,IAAK1B,KAAKC,YAAY0B,SAASF,GAAgB,CAC7C,M,CAGF,GAAID,EAAMI,OAAS,SAAWJ,EAAMI,OAAS,cAAe,CAC1D,GAAIH,EAAcI,UAAUF,SAAS,gBAAiB,CACpD,GAAI3B,KAAKc,wBAAyB,CAChCd,KAAKkB,WAAalB,KAAKkB,S,KAClB,CACLlB,KAAKmB,UAAYnB,KAAKmB,Q,OAEnB,GAAIM,EAAcK,QAAQ,iBAAkB,CACjD,MAAMC,EAAYN,EAClBM,EAAUZ,UAAYY,EAAUZ,Q,GAK9Ba,cAAcR,GACpB,MAAMS,EAAejC,KAAKkB,UAC1BlB,KAAKkB,WAAalB,KAAKkB,UAEvB,IAAKe,GAAgBjC,KAAKoB,QAAUJ,UAAW,CAC7ChB,KAAKoB,MAAQJ,UACbhB,KAAKkC,kBAAkB,K,CAGzBlC,KAAKa,iBAAiBsB,KAAKnC,KAAKkB,WAChCM,EAAMY,iB,CAGAC,cAAcb,GACpBxB,KAAKkC,mBAAmBlC,KAAKmB,UAE7B,GAAInB,KAAKc,wBAAyB,CAChCd,KAAKgC,cAAcR,E,EAIfc,YAAYlB,GAClB,GAAIA,IAAUpB,KAAKoB,MAAO,CACxBpB,KAAKoB,MAAQJ,UACbhB,KAAKY,WAAWuB,KAAKnB,U,KAChB,CACLhB,KAAKoB,MAAQA,EACbpB,KAAKY,WAAWuB,KAAKf,E,CAGvBpB,KAAKkC,kBAAkB,M,CAGjBA,kBAAkBK,GACxB,IAAKvC,KAAKc,wBAAyB,CACjCd,KAAKmB,SAAWoB,EAChBvC,KAAKU,YAAYyB,KAAKnC,KAAKmB,S,EAI/BqB,sB,MACExC,KAAKG,WAAWsC,SAAQ,CAACC,EAAMtB,K,MAC7BsB,EAAKvB,SAAWC,IAAUpB,KAAKoB,MAC/BsB,EAAKtB,MAAQA,EACbsB,EAAKb,UAAUc,OAAO,QACtB,MACGC,EAAA5C,KAAKM,UAAM,MAAAsC,SAAA,SAAAA,EAAEC,SAASC,SACvB1B,IAAUpB,KAAKG,WAAW2C,OAAS,EACnC,CACAJ,EAAKb,UAAUkB,IAAI,O,KAIvB,KAAIH,EAAA5C,KAAKM,UAAM,MAAAsC,SAAA,SAAAA,EAAEI,mBAAoB,EAAG,CACtChD,KAAKI,aAAa6C,YAAYjD,KAAKM,O,EAIvC4C,mBACElD,KAAKI,aAAa+C,iBAChB,mBACCC,IACCpD,KAAKsC,YAAYc,EAAIC,OAAOjC,MAAM,G,CAKxCkC,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,OACEE,MAAO,CACL,eAAgB,KAChBC,QAAS1D,KAAKkB,UACdC,SAAUnB,KAAKmB,UAEjBwC,SAAS,KAETJ,EAAA,OACEE,MAAM,yBACNG,QAAUC,GAAM7D,KAAKqC,cAAcwB,IAEnCN,EAAA,OAAKE,MAAM,qCACXF,EAAA,WACEE,MAAM,oBACNK,KAAM,WAAW9D,KAAKkB,UAAY,QAAU,eAC5C0C,QAAUC,GAAM7D,KAAKgC,cAAc6B,KAErCN,EAAA,OAAKE,MAAM,wBACRzD,KAAKe,OACJwC,EAAA,OAAKE,MAAM,gCACTF,EAAA,OAAKE,MAAM,sBACTF,EAAA,QAAMQ,MAAO/D,KAAKe,QAASf,KAAKe,SAElCwC,EAAA,OAAKE,MAAM,kBAAkBM,MAAO/D,KAAKiB,WACtCjB,KAAKiB,YAGR,KACJsC,EAAA,QAAMO,KAAK,aAGfP,EAAA,6BACEA,EAAA,QAAMO,KAAK,eAGfP,EAAA,OACEE,MAAO,CACL,gBAAiB,KACjB,SAAUzD,KAAKkB,YAGjBqC,EAAA,cAEFA,EAAA,OAAKE,MAAM,UACTF,EAAA,iBACEE,MAAM,cACNO,kBAAmB,KACnBC,UAAW,OAEXV,EAAA,QAAMO,KAAK,a,8CCxPvB,MAAMI,EAAuB,iD,MCgBhBC,EAAiB,M,kEAW5Bb,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,oBAAkBa,MAAOpE,KAAKoE,MAAOC,KAAMrE,KAAKqE,MAC9Cd,EAAA,c,aC/BV,MAAMe,EAAe,0mE,MCyBRC,EAAS,M,sKAqBQ,M,uCAWR,K,qBAapBC,cACE,GAAIxE,KAAKgE,kBAAmB,CAC1B,M,CAEFhE,KAAKyE,gBAAgBtC,KAAKnC,KAAKC,Y,CAGjCqD,SACE,OACEC,EAACC,EAAI,CACHC,MAAO,CACLtC,SAAUnB,KAAKmB,WAAanB,KAAKgE,kBACjC,qBAAsBhE,KAAKgE,mBAE7BL,SAAU3D,KAAKiE,UAAY,GAAK,GAEhCV,EAAA,OAAKE,MAAM,oCACVzD,KAAKqE,KAAOd,EAAA,WAASmB,KAAK,KAAKZ,KAAM9D,KAAKqE,OAAmB,KAC7DrE,KAAK2E,KACJpB,EAAA,QAAME,MAAM,oBACVF,EAAA,QAAMQ,MAAO/D,KAAK2E,MAAO3E,KAAK2E,OAE9B,KACH3E,KAAK4E,cACJrB,EAAA,QAAME,MAAM,8BACVF,EAAA,QAAMQ,MAAO/D,KAAK4E,eAAgB5E,KAAK4E,gBAEvC,KACJrB,EAAA,a"}

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

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

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

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

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

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

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

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

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

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

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

@@ -1,2 +0,0 @@
-import{r as i,c as e,h as t,H as s,g as r}from"./p-8fcd6f85.js";const c=".sc-ix-filter-chip-h{display:flex;align-items:center;justify-content:space-between;height:1.5rem;padding-left:0.5rem;border:var(--theme-focus--border-thickness) solid transparent;border-radius:2rem;background-color:var(--theme-chip--background);color:var(--theme-chip--color)}.sc-ix-filter-chip-h:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-filter-chip-h:not(.disabled):not(:disabled):hover{background-color:var(--theme-chip--background--hover)}.sc-ix-filter-chip-h:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-filter-chip-h:not(.disabled):not(:disabled):active{background-color:var(--theme-chip--background--active)}.sc-ix-filter-chip-h:not(.disabled):not(:disabled):focus-visible{border-color:#199fff}.sc-ix-filter-chip-h .slot-container.sc-ix-filter-chip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-ix-filter-chip-h .slot-container.sc-ix-filter-chip .disabled.sc-ix-filter-chip-h,.disabled .sc-ix-filter-chip-h{color:var(--theme-chip--color-diabled)}.sc-ix-filter-chip-h .btn-oval.sc-ix-filter-chip{height:1.5rem;width:1.5rem;min-width:1.5rem;margin-left:0.25rem;padding:0;vertical-align:top}.sc-ix-filter-chip-h .btn-oval.sc-ix-filter-chip:not(.disabled):not(:disabled):focus-visible{outline:none;border-color:#199fff}";const o=class{constructor(t){i(this,t);this.closeClick=e(this,"closeClick",7);this.disabled=false}onCloseClick(i){i.preventDefault();i.stopPropagation();this.closeClick.emit()}render(){return t(s,{class:{disabled:this.disabled},title:this.el.textContent},t("div",{class:"slot-container"},t("slot",null)),t("button",{disabled:this.disabled,class:"btn btn-invisible-secondary btn-oval",onClick:i=>this.onCloseClick(i)},t("ix-icon",{name:"close-small",size:"16"})))}get el(){return r(this)}};o.style=c;export{o as ix_filter_chip};
-//# sourceMappingURL=p-f961c22a.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["filterChipCss","FilterChip","onCloseClick","event","preventDefault","stopPropagation","this","closeClick","emit","render","h","Host","class","disabled","title","el","textContent","onClick","e","name","size"],"sources":["./src/components/filter-chip/filter-chip.scss?tag=ix-filter-chip&encapsulation=scoped","./src/components/filter-chip/filter-chip.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: $large-space;\n  padding-left: $small-space;\n  border: var(--theme-focus--border-thickness) solid transparent;\n  border-radius: $x-large-space;\n  background-color: var(--theme-chip--background);\n  color: var(--theme-chip--color);\n\n  @include hover {\n    background-color: var(--theme-chip--background--hover);\n  }\n\n  @include active {\n    background-color: var(--theme-chip--background--active);\n  }\n\n  @include focus-visible {\n    border-color: #199fff;\n  }\n\n  .slot-container {\n    @include ellipsis;\n\n    :host-context(.disabled) {\n      color: var(--theme-chip--color-diabled);\n    }\n  }\n\n  .btn-oval {\n    height: $large-space;\n    width: $large-space;\n    min-width: $large-space;\n    margin-left: $tiny-space;\n    padding: 0;\n    vertical-align: top;\n\n    @include focus-visible {\n      outline: none;\n      border-color: #199fff;\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-filter-chip',\n  styleUrl: 'filter-chip.scss',\n  scoped: true,\n})\nexport class FilterChip {\n  @Element() el: HTMLIxFilterChipElement;\n\n  /**\n   * If true the filter chip will be in disabled state\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Close clicked\n   */\n  @Event() closeClick: EventEmitter<void>;\n\n  private onCloseClick(event: Event) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.closeClick.emit();\n  }\n\n  render() {\n    return (\n      <Host class={{ disabled: this.disabled }} title={this.el.textContent}>\n        <div class=\"slot-container\">\n          <slot></slot>\n        </div>\n        <button\n          disabled={this.disabled}\n          class=\"btn btn-invisible-secondary btn-oval\"\n          onClick={(e) => this.onCloseClick(e)}\n        >\n          <ix-icon name=\"close-small\" size=\"16\"></ix-icon>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAgB,0uC,MCwBTC,EAAU,M,8EAMF,K,CAOXC,aAAaC,GACnBA,EAAMC,iBACND,EAAME,kBACNC,KAAKC,WAAWC,M,CAGlBC,SACE,OACEC,EAACC,EAAI,CAACC,MAAO,CAAEC,SAAUP,KAAKO,UAAYC,MAAOR,KAAKS,GAAGC,aACvDN,EAAA,OAAKE,MAAM,kBACTF,EAAA,cAEFA,EAAA,UACEG,SAAUP,KAAKO,SACfD,MAAM,uCACNK,QAAUC,GAAMZ,KAAKJ,aAAagB,IAElCR,EAAA,WAASS,KAAK,cAAcC,KAAK,Q"}

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

@@ -1,2 +0,0 @@
-import{r as i,h as e,H as t,g as l}from"./p-8fcd6f85.js";import{F as r}from"./p-15bebd8a.js";const o="@keyframes flip-animation{0%{transform:rotateY(0)}50%{transform:rotateY(90deg)}51%{transform:rotateY(270deg)}100%{transform:rotateY(360deg)}}.sc-ix-flip-tile-h{display:flex;flex-direction:column;width:16rem;min-width:16rem;max-width:16rem;height:15.125rem;perspective:1000px}.sc-ix-flip-tile-h .flip-tile-header.sc-ix-flip-tile{display:flex;align-items:center;height:2.5rem;padding:0 0.5rem 0 1rem}.sc-ix-flip-tile-h .flip-tile-header.sc-ix-flip-tile .header-slot-container.sc-ix-flip-tile{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1;min-width:0}.sc-ix-flip-tile-h .content-container.sc-ix-flip-tile{flex-grow:1;margin:1rem}.sc-ix-flip-tile-h .flip-tile-container.sc-ix-flip-tile{display:flex;flex-direction:column;height:100%;background-color:var(--theme-blind-base--background);border:solid 1px var(--theme-blind-base--border-color);border-radius:var(--theme-flip-tile--border-radius) var(--theme-flip-tile--border-radius) 0 0;transform-style:preserve-3d}.sc-ix-flip-tile-h .flip-tile-container.flip-animation-active.sc-ix-flip-tile{animation:flip-animation 300ms, ease-in-out}.sc-ix-flip-tile-h .flip-tile-container.sc-ix-flip-tile .footer.sc-ix-flip-tile{display:flex;height:3rem;align-items:center;justify-content:center;padding:0 0.5rem;color:var(--theme-flip-footer--color);background-color:var(--theme-blind-base--background)}.sc-ix-flip-tile-h .flip-tile-container.sc-ix-flip-tile .footer.sc-ix-flip-tile .sc-ix-flip-tile:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:100%}.sc-ix-flip-tile-h .flip-tile-container .sc-ix-flip-tile-s>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-direction:column;align-items:center;min-width:0}.sc-ix-flip-tile-h .flip-tile-container.primary.sc-ix-flip-tile{border-color:var(--theme-color-primary)}.sc-ix-flip-tile-h .flip-tile-container.primary.sc-ix-flip-tile .footer.sc-ix-flip-tile{background-color:var(--theme-color-primary);color:var(--theme-color-primary--contrast)}.sc-ix-flip-tile-h .flip-tile-container.info.sc-ix-flip-tile{border-color:var(--theme-color-info)}.sc-ix-flip-tile-h .flip-tile-container.info.sc-ix-flip-tile .footer.sc-ix-flip-tile{background-color:var(--theme-color-info);color:var(--theme-color-info--contrast)}.sc-ix-flip-tile-h .flip-tile-container.warning.sc-ix-flip-tile{border-color:var(--theme-color-warning)}.sc-ix-flip-tile-h .flip-tile-container.warning.sc-ix-flip-tile .footer.sc-ix-flip-tile{background-color:var(--theme-color-warning);color:var(--theme-color-warning--contrast)}.sc-ix-flip-tile-h .flip-tile-container.alarm.sc-ix-flip-tile{border-color:var(--theme-color-alarm)}.sc-ix-flip-tile-h .flip-tile-container.alarm.sc-ix-flip-tile .footer.sc-ix-flip-tile{background-color:var(--theme-color-alarm);color:var(--theme-color-alarm--contrast)}.sc-ix-flip-tile-h:hover .flip-tile-container.sc-ix-flip-tile .footer.sc-ix-flip-tile ix-icon.sc-ix-flip-tile{color:var(--theme-color-std-text)}";const s=class{constructor(e){i(this,e);this.ANIMATION_DURATION=150;this.index=0;this.isFlipAnimationActive=undefined;this.state=undefined;this.footer=undefined}componentDidLoad(){this.contentItems=this.contentContainerElement.querySelectorAll("ix-flip-tile-content");this.contentItems.forEach(((i,e)=>{if(e!==this.index){this.toggleContentItem(e)}}))}toggleIndex(){this.doFlipAnimation()}toggleContentItem(i){const e=this.contentItems[i];e.classList.toggle("d-none")}doFlipAnimation(){this.isFlipAnimationActive=true;setTimeout((()=>{this.toggleContentItem(this.index);if(this.index>=this.contentItems.length-1){this.index=0}else{this.index++}this.toggleContentItem(this.index)}),this.ANIMATION_DURATION);setTimeout((()=>{this.isFlipAnimationActive=false}),2*this.ANIMATION_DURATION)}render(){return e(t,null,e("div",{class:{"flip-tile-container":true,info:this.state===r.Info,warning:this.state===r.Warning,alarm:this.state===r.Alarm,primary:this.state===r.Primary,"flip-animation-active":this.isFlipAnimationActive}},e("div",{class:"flip-tile-header"},e("div",{class:"header-slot-container text-l-title"},e("slot",{name:"header"})),e("ix-icon-button",{icon:"eye",variant:"Primary",ghost:true,onClick:()=>this.toggleIndex()})),e("div",{class:"content-container",ref:i=>this.contentContainerElement=i},e("slot",null)),e("div",{class:{footer:true,"contrast-light":this.state===r.Warning,"contrast-dark":this.state===r.Info||this.state===r.Alarm}},e("slot",{name:"footer"}))))}get hostElement(){return l(this)}};s.style=o;const n=":host{display:block}";const c=class{constructor(e){i(this,e)}render(){return e(t,null,e("slot",null))}};c.style=n;export{s as ix_flip_tile,c as ix_flip_tile_content};
-//# sourceMappingURL=p-fe690347.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["flipTileCss","FlipTile","this","ANIMATION_DURATION","componentDidLoad","contentItems","contentContainerElement","querySelectorAll","forEach","_","index","toggleContentItem","toggleIndex","doFlipAnimation","item","classList","toggle","isFlipAnimationActive","setTimeout","length","render","h","Host","class","info","state","FlipTileState","Info","warning","Warning","alarm","Alarm","primary","Primary","name","icon","variant","ghost","onClick","ref","el","footer","flipTileContentCss","FlipTileContent"],"sources":["./src/components/flip-tile/flip-tile.scss?tag=ix-flip-tile&encapsulation=scoped","./src/components/flip-tile/flip-tile.tsx","./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@import 'common-variables';\n@import 'mixins/animations';\n@import 'mixins/text-truncation';\n\n@include keyframes(flip-animation) {\n  0% {\n    transform: rotateY(0);\n  }\n  50% {\n    transform: rotateY(90deg);\n  }\n  51% {\n    transform: rotateY(270deg);\n  }\n  100% {\n    transform: rotateY(360deg);\n  }\n}\n\n:host {\n  display: flex;\n  flex-direction: column;\n  width: 16rem;\n  min-width: 16rem;\n  max-width: 16rem;\n  height: 15.125rem;\n  perspective: 1000px;\n\n  .flip-tile-header {\n    display: flex;\n    align-items: center;\n    height: $large-control-height;\n    padding: 0 $small-space 0 $default-space;\n\n    .header-slot-container {\n      @include ellipsis;\n      flex-grow: 1;\n      min-width: 0;\n    }\n  }\n\n  .content-container {\n    flex-grow: 1;\n    margin: $default-space;\n  }\n\n  .flip-tile-container {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background-color: var(--theme-blind-base--background);\n    border: solid 1px var(--theme-blind-base--border-color);\n    border-radius: var(--theme-flip-tile--border-radius)\n      var(--theme-flip-tile--border-radius) 0 0;\n    transform-style: preserve-3d;\n\n    &.flip-animation-active {\n      @include animation(flip-animation, 2 * $default-time, ease-in-out);\n    }\n\n    .footer {\n      display: flex;\n      height: 3rem;\n      align-items: center;\n      justify-content: center;\n      padding: 0 $small-space;\n      color: var(--theme-flip-footer--color);\n      background-color: var(--theme-blind-base--background);\n\n      :first-child {\n        @include ellipsis;\n        height: 100%;\n      }\n    }\n\n    ::slotted(*) {\n      @include ellipsis;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      min-width: 0;\n    }\n\n    &.primary {\n      border-color: var(--theme-color-primary);\n\n      .footer {\n        background-color: var(--theme-color-primary);\n        color: var(--theme-color-primary--contrast);\n      }\n    }\n\n    &.info {\n      border-color: var(--theme-color-info);\n\n      .footer {\n        background-color: var(--theme-color-info);\n        color: var(--theme-color-info--contrast);\n      }\n    }\n\n    &.warning {\n      border-color: var(--theme-color-warning);\n\n      .footer {\n        background-color: var(--theme-color-warning);\n        color: var(--theme-color-warning--contrast);\n      }\n    }\n\n    &.alarm {\n      border-color: var(--theme-color-alarm);\n\n      .footer {\n        background-color: var(--theme-color-alarm);\n        color: var(--theme-color-alarm--contrast);\n      }\n    }\n  }\n\n  &:hover .flip-tile-container .footer ix-icon {\n    color: var(--theme-color-std-text);\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { FlipTileState } from './flip-tile-state';\n\n@Component({\n  tag: 'ix-flip-tile',\n  styleUrl: 'flip-tile.scss',\n  scoped: true,\n})\nexport class FlipTile {\n  private readonly ANIMATION_DURATION = 150;\n  private contentContainerElement: HTMLDivElement;\n  private contentItems: NodeList;\n\n  @Element() hostElement: HTMLIxFlipTileElement;\n\n  @State() index = 0;\n\n  @State() isFlipAnimationActive: boolean;\n\n  /**\n   * Variation of the Flip\n   */\n  @Prop() state: FlipTileState;\n\n  /**\n   * Tmp property name\n   */\n  @Prop() footer: string;\n\n  componentDidLoad() {\n    this.contentItems = this.contentContainerElement.querySelectorAll(\n      'ix-flip-tile-content'\n    );\n    this.contentItems.forEach((_, index) => {\n      if (index !== this.index) {\n        this.toggleContentItem(index);\n      }\n    });\n  }\n\n  private toggleIndex() {\n    this.doFlipAnimation();\n  }\n\n  private toggleContentItem(index: number) {\n    const item = this.contentItems[index] as HTMLElement;\n    item.classList.toggle('d-none');\n  }\n\n  private doFlipAnimation() {\n    this.isFlipAnimationActive = true;\n\n    setTimeout(() => {\n      this.toggleContentItem(this.index);\n\n      if (this.index >= this.contentItems.length - 1) {\n        this.index = 0;\n      } else {\n        this.index++;\n      }\n\n      this.toggleContentItem(this.index);\n    }, this.ANIMATION_DURATION);\n\n    setTimeout(() => {\n      this.isFlipAnimationActive = false;\n    }, 2 * this.ANIMATION_DURATION);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'flip-tile-container': true,\n            info: this.state === FlipTileState.Info,\n            warning: this.state === FlipTileState.Warning,\n            alarm: this.state === FlipTileState.Alarm,\n            primary: this.state === FlipTileState.Primary,\n            'flip-animation-active': this.isFlipAnimationActive,\n          }}\n        >\n          <div class=\"flip-tile-header\">\n            <div class=\"header-slot-container text-l-title\">\n              <slot name=\"header\"></slot>\n            </div>\n            <ix-icon-button\n              icon=\"eye\"\n              variant=\"Primary\"\n              ghost\n              onClick={() => this.toggleIndex()}\n            ></ix-icon-button>\n          </div>\n\n          <div\n            class=\"content-container\"\n            ref={(el) => (this.contentContainerElement = el)}\n          >\n            <slot></slot>\n          </div>\n          <div\n            class={{\n              footer: true,\n              'contrast-light': this.state === FlipTileState.Warning,\n              'contrast-dark':\n                this.state === FlipTileState.Info ||\n                this.state === FlipTileState.Alarm,\n            }}\n          >\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n  display: block;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host } 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  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAc,k5F,MCiBPC,EAAQ,M,yBACFC,KAAAC,mBAAqB,I,WAMrB,E,gFAcjBC,mBACEF,KAAKG,aAAeH,KAAKI,wBAAwBC,iBAC/C,wBAEFL,KAAKG,aAAaG,SAAQ,CAACC,EAAGC,KAC5B,GAAIA,IAAUR,KAAKQ,MAAO,CACxBR,KAAKS,kBAAkBD,E,KAKrBE,cACNV,KAAKW,iB,CAGCF,kBAAkBD,GACxB,MAAMI,EAAOZ,KAAKG,aAAaK,GAC/BI,EAAKC,UAAUC,OAAO,S,CAGhBH,kBACNX,KAAKe,sBAAwB,KAE7BC,YAAW,KACThB,KAAKS,kBAAkBT,KAAKQ,OAE5B,GAAIR,KAAKQ,OAASR,KAAKG,aAAac,OAAS,EAAG,CAC9CjB,KAAKQ,MAAQ,C,KACR,CACLR,KAAKQ,O,CAGPR,KAAKS,kBAAkBT,KAAKQ,MAAM,GACjCR,KAAKC,oBAERe,YAAW,KACThB,KAAKe,sBAAwB,KAAK,GACjC,EAAIf,KAAKC,mB,CAGdiB,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,OACEE,MAAO,CACL,sBAAuB,KACvBC,KAAMtB,KAAKuB,QAAUC,EAAcC,KACnCC,QAAS1B,KAAKuB,QAAUC,EAAcG,QACtCC,MAAO5B,KAAKuB,QAAUC,EAAcK,MACpCC,QAAS9B,KAAKuB,QAAUC,EAAcO,QACtC,wBAAyB/B,KAAKe,wBAGhCI,EAAA,OAAKE,MAAM,oBACTF,EAAA,OAAKE,MAAM,sCACTF,EAAA,QAAMa,KAAK,YAEbb,EAAA,kBACEc,KAAK,MACLC,QAAQ,UACRC,MAAK,KACLC,QAAS,IAAMpC,KAAKU,iBAIxBS,EAAA,OACEE,MAAM,oBACNgB,IAAMC,GAAQtC,KAAKI,wBAA0BkC,GAE7CnB,EAAA,cAEFA,EAAA,OACEE,MAAO,CACLkB,OAAQ,KACR,iBAAkBvC,KAAKuB,QAAUC,EAAcG,QAC/C,gBACE3B,KAAKuB,QAAUC,EAAcC,MAC7BzB,KAAKuB,QAAUC,EAAcK,QAGjCV,EAAA,QAAMa,KAAK,a,8CCtHvB,MAAMQ,EAAqB,uB,MCgBdC,EAAe,M,yBAC1BvB,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,a"}