@siemens/ix 2.6.0 → 2.7.0

package/dist/siemens-ix/p-6635972c.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["dateInputCss","IxDateInputStyle0","DateInput","this","slotStartRef","makeRef","slotEndRef","datepickerRef","inputElementRef","dropdownElementRef","updateFormInternalValue","value","formInternals","setFormValue","connectedCallback","classObserver","createClassMutationObserver","hostElement","checkClassList","disposableChangesAndVisibilityObservers","addDisposableChangesAndVisibilityObservers","updatePaddings","bind","componentWillLoad","onInput","isInputInvalid","from","watchValue","adjustPaddingForStartAndEnd","current","disconnectedCallback","_a","destroy","_b","call","hasValidValue","Promise","resolve","getAssociatedFormElement","form","valueChange","emit","format","date","DateTime","fromFormat","isValid","closeDropdown","invalidReason","onCalenderClick","event","show","stopPropagation","preventDefault","openDropdown","focus","dropdownElement","waitForCurrent","id","getAttribute","dropdownController","dismissAll","dropdown","getDropdownById","present","dismiss","isInvalid","classList","contains","renderInput","h","class","SlotStart","onSlotChange","autoComplete","disabled","readOnly","readonly","required","ref","type","target","onClick","onFocus","async","ixFocus","onBlur","ixBlur","SlotEnd","ghost","icon","iconCalendar","hookValidationLifecycle","isInfo","isInvalidByRequired","isWarning","onInputValidationChange","state","getValidityState","validityStateChange","patternMismatch","badInput","customError","rangeOverflow","rangeUnderflow","stepMismatch","tooLong","tooShort","typeMismatch","valid","valueMissing","getNativeInputElement","focusInput","render","invalidText","i18nErrorDateUnparsable","Host","key","label","helperText","infoText","warningText","validText","showTextAsTooltip","controlRef","trigger","closeBehavior","suppressOverflowBehavior","onShowChanged","detail","locale","range","onDateChange","__decorate","HookValidationLifecycle"],"sources":["src/components/date-input/date-input.scss?tag=ix-date-input&encapsulation=shadow","src/components/date-input/date-input.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n@import 'components/form/input';\n@import './../input/input.mixins.scss';\n\n@include input-field;\n\n:host {\n  @include ix-component;\n\n  display: inline-block;\n  position: relative;\n\n  input {\n    width: 100%;\n    height: 100%;\n  }\n\n  .calendar-hidden {\n    display: none;\n  }\n}\n\n:host(.readonly) {\n  input {\n    pointer-events: none;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2024 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 { iconCalendar } from '@siemens/ix-icons/icons';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n} from '@stencil/core';\nimport { DateTime } from 'luxon';\nimport { dropdownController } from '../dropdown/dropdown-controller';\nimport { SlotEnd, SlotStart } from '../input/input.fc';\nimport {\n  DisposableChangesAndVisibilityObservers,\n  addDisposableChangesAndVisibilityObservers,\n  adjustPaddingForStartAndEnd,\n} from '../input/input.util';\nimport {\n  ClassMutationObserver,\n  HookValidationLifecycle,\n  IxInputFieldComponent,\n  ValidationResults,\n  createClassMutationObserver,\n} from '../utils/input';\nimport { makeRef } from '../utils/make-ref';\n\nexport type DateInputValidityState = {\n  patternMismatch: boolean;\n  invalidReason?: string;\n};\n\n/**\n * @since 2.6.0\n * @form-ready 2.6.0\n * @slot start - Element will be displayed at the start of the input\n * @slot end - Element will be displayed at the end of the input\n */\n@Component({\n  tag: 'ix-date-input',\n  styleUrl: 'date-input.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DateInput implements IxInputFieldComponent<string> {\n  @Element() hostElement!: HTMLIxDateInputElement;\n  @AttachInternals() formInternals!: ElementInternals;\n\n  /**\n   * name of the input element\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * placeholder of the input element\n   */\n  @Prop({ reflect: true }) placeholder?: string;\n\n  /**\n   * value of the input element\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = '';\n\n  /**\n   * Locale identifier (e.g. 'en' or 'de').\n   *\n   * @since 2.6.0\n   */\n  @Prop() locale?: 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  @Prop() format: string = 'yyyy/LL/dd';\n\n  /**\n   * required attribute\n   */\n  @Prop() required?: boolean;\n\n  /**\n   * helper text below the input field\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * label of the input field\n   */\n  @Prop() label?: string;\n\n  /**\n   * error text below the input field\n   */\n  @Prop({ reflect: true }) invalidText?: string;\n\n  /**\n   * readonly attribute\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * disabled attribute\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * info text below the input field\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * warning text below the input field\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * valid text below the input field\n   */\n  @Prop() validText?: string;\n\n  /**\n   * show text as tooltip\n   */\n  @Prop() showTextAsTooltip?: boolean;\n\n  /**\n   * i18n string for the error message when the date is not parsable\n   */\n  @Prop({ attribute: 'i18n-error-date-unparsable' }) i18nErrorDateUnparsable =\n    'Date is not valid';\n\n  /**\n   * Input change event.\n   */\n  @Event({ cancelable: false }) valueChange!: EventEmitter<string>;\n\n  /**\n   * Validation state change event.\n   */\n  @Event() validityStateChange!: EventEmitter<DateInputValidityState>;\n\n  /** @internal */\n  @Event() ixFocus!: EventEmitter<void>;\n\n  /** @internal */\n  @Event() ixBlur!: EventEmitter<void>;\n\n  @State() show = false;\n  @State() from: string | null = null;\n  @State() isInputInvalid = false;\n  @State() isInvalid = false;\n  @State() isValid = false;\n  @State() isInfo = false;\n  @State() isWarning = false;\n  @State() focus = false;\n\n  private readonly slotStartRef = makeRef<HTMLDivElement>();\n  private readonly slotEndRef = makeRef<HTMLDivElement>();\n\n  private readonly datepickerRef = makeRef<HTMLIxDatePickerElement>();\n\n  private readonly inputElementRef = makeRef<HTMLInputElement>();\n  private readonly dropdownElementRef = makeRef<HTMLIxDropdownElement>();\n  private classObserver?: ClassMutationObserver;\n  private invalidReason?: string;\n\n  private disposableChangesAndVisibilityObservers?: DisposableChangesAndVisibilityObservers;\n\n  updateFormInternalValue(value: string): void {\n    this.formInternals.setFormValue(value);\n    this.value = value;\n  }\n\n  connectedCallback(): void {\n    this.classObserver = createClassMutationObserver(this.hostElement, () =>\n      this.checkClassList()\n    );\n\n    this.disposableChangesAndVisibilityObservers =\n      addDisposableChangesAndVisibilityObservers(\n        this.hostElement,\n        this.updatePaddings.bind(this)\n      );\n  }\n\n  componentWillLoad(): void {\n    this.onInput(this.value);\n    if (this.isInputInvalid) {\n      this.from = null;\n    } else {\n      this.watchValue();\n    }\n\n    this.checkClassList();\n    this.updateFormInternalValue(this.value);\n  }\n\n  private updatePaddings() {\n    adjustPaddingForStartAndEnd(\n      this.slotStartRef.current,\n      this.slotEndRef.current,\n      this.inputElementRef.current\n    );\n  }\n\n  disconnectedCallback(): void {\n    this.classObserver?.destroy();\n    this.disposableChangesAndVisibilityObservers?.();\n  }\n\n  @Watch('value')\n  watchValue() {\n    this.from = this.value;\n  }\n\n  /** @internal */\n  @Method()\n  hasValidValue(): Promise<boolean> {\n    return Promise.resolve(!!this.value);\n  }\n\n  /** @internal */\n  @Method()\n  getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n    return Promise.resolve(this.formInternals.form);\n  }\n\n  async onInput(value: string) {\n    this.value = value;\n    if (!value) {\n      this.valueChange.emit(value);\n      return;\n    }\n\n    if (!this.format) {\n      return;\n    }\n\n    const date = DateTime.fromFormat(value, this.format);\n    if (date.isValid) {\n      this.isInputInvalid = false;\n\n      this.updateFormInternalValue(value);\n      this.closeDropdown();\n    } else {\n      this.isInputInvalid = true;\n      this.invalidReason = date.invalidReason;\n    }\n\n    this.valueChange.emit(value);\n  }\n\n  onCalenderClick(event: Event) {\n    if (!this.show) {\n      event.stopPropagation();\n      event.preventDefault();\n      this.openDropdown();\n    }\n\n    if (this.inputElementRef.current) {\n      this.inputElementRef.current.focus();\n    }\n  }\n\n  async openDropdown() {\n    const dropdownElement = await this.dropdownElementRef.waitForCurrent();\n    const id = dropdownElement.getAttribute('data-ix-dropdown');\n\n    dropdownController.dismissAll();\n    if (!id) {\n      return;\n    }\n\n    const dropdown = dropdownController.getDropdownById(id);\n    if (!dropdown) {\n      return;\n    }\n    dropdownController.present(dropdown);\n  }\n\n  async closeDropdown() {\n    const dropdownElement = await this.dropdownElementRef.waitForCurrent();\n    const id = dropdownElement.getAttribute('data-ix-dropdown');\n\n    if (!id) {\n      return;\n    }\n\n    const dropdown = dropdownController.getDropdownById(id);\n    if (!dropdown) {\n      return;\n    }\n    dropdownController.dismiss(dropdown);\n  }\n\n  private checkClassList() {\n    this.isInvalid = this.hostElement.classList.contains('ix-invalid');\n  }\n\n  private renderInput() {\n    return (\n      <div class=\"input-wrapper\">\n        <SlotStart\n          slotStartRef={this.slotStartRef}\n          onSlotChange={() => this.updatePaddings()}\n        ></SlotStart>\n        <input\n          autoComplete=\"off\"\n          class={{\n            'is-invalid': this.isInputInvalid,\n          }}\n          disabled={this.disabled}\n          readOnly={this.readonly}\n          readonly={this.readonly}\n          required={this.required}\n          ref={this.inputElementRef}\n          type=\"text\"\n          value={this.value}\n          onInput={(event) => {\n            const target = event.target as HTMLInputElement;\n            this.onInput(target.value);\n          }}\n          onClick={(event) => {\n            if (this.show) {\n              event.stopPropagation();\n              event.preventDefault();\n            }\n          }}\n          onFocus={async () => {\n            this.openDropdown();\n            this.ixFocus.emit();\n          }}\n          onBlur={() => this.ixBlur.emit()}\n        ></input>\n        <SlotEnd\n          slotEndRef={this.slotEndRef}\n          onSlotChange={() => this.updatePaddings()}\n        >\n          <ix-icon-button\n            data-testid=\"open-calendar\"\n            class={{ 'calendar-hidden': this.disabled || this.readonly }}\n            ghost\n            icon={iconCalendar}\n            onClick={(event) => this.onCalenderClick(event)}\n          ></ix-icon-button>\n        </SlotEnd>\n      </div>\n    );\n  }\n\n  @HookValidationLifecycle()\n  hookValidationLifecycle({\n    isInfo,\n    isInvalid,\n    isInvalidByRequired,\n    isValid,\n    isWarning,\n  }: ValidationResults) {\n    this.isInvalid = isInvalid || isInvalidByRequired || this.isInputInvalid;\n    this.isInfo = isInfo;\n    this.isValid = isValid;\n    this.isWarning = isWarning;\n  }\n\n  @Watch('isInputInvalid')\n  async onInputValidationChange() {\n    const state = await this.getValidityState();\n    this.validityStateChange.emit({\n      patternMismatch: state.patternMismatch,\n      invalidReason: this.invalidReason,\n    });\n  }\n\n  /** @internal */\n  @Method()\n  getValidityState(): Promise<ValidityState> {\n    return Promise.resolve({\n      badInput: false,\n      customError: false,\n      patternMismatch: this.isInputInvalid,\n      rangeOverflow: false,\n      rangeUnderflow: false,\n      stepMismatch: false,\n      tooLong: false,\n      tooShort: false,\n      typeMismatch: false,\n      valid: !this.isInputInvalid,\n      valueMissing: !!this.required && !this.value,\n    });\n  }\n\n  /**\n   * Get the native input element\n   */\n  @Method()\n  getNativeInputElement(): Promise<HTMLInputElement> {\n    return this.inputElementRef.waitForCurrent();\n  }\n\n  /**\n   * Focuses the input field\n   */\n  @Method()\n  async focusInput(): Promise<void> {\n    return (await this.getNativeInputElement()).focus();\n  }\n\n  render() {\n    const invalidText = this.isInputInvalid\n      ? this.i18nErrorDateUnparsable\n      : this.invalidText;\n\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          readonly: this.readonly,\n        }}\n      >\n        <ix-field-wrapper\n          label={this.label}\n          helperText={this.helperText}\n          isInvalid={this.isInvalid}\n          invalidText={invalidText}\n          infoText={this.infoText}\n          isInfo={this.isInfo}\n          isWarning={this.isWarning}\n          warningText={this.warningText}\n          isValid={this.isValid}\n          validText={this.validText}\n          showTextAsTooltip={this.showTextAsTooltip}\n          required={this.required}\n          controlRef={this.inputElementRef}\n        >\n          {this.renderInput()}\n        </ix-field-wrapper>\n        <ix-dropdown\n          data-testid=\"date-dropdown\"\n          trigger={this.inputElementRef.waitForCurrent()}\n          ref={this.dropdownElementRef}\n          closeBehavior=\"outside\"\n          suppressOverflowBehavior={true}\n          show={this.show}\n          onShowChanged={(event) => {\n            this.show = event.detail;\n          }}\n        >\n          <ix-date-picker\n            ref={this.datepickerRef}\n            format={this.format}\n            locale={this.locale}\n            range={false}\n            from={this.from ?? ''}\n            onDateChange={(event) => {\n              const { from } = event.detail;\n              this.onInput(from);\n            }}\n          ></ix-date-picker>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/siemens-ix/{p-48718dc1.entry.js → p-67209151.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as o,h as r,H as t,g as n}from"./p-5806df2b.js";import{B as i}from"./p-6bf208b8.js";import{a as d}from"./p-5fe87e71.js";import"./p-35e14912.js";const a=":host{display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host button{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host ix-spinner{margin-right:0.25rem}:host ix-icon{margin-right:0.25rem}:host .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host .icon{pointer-events:none}:host(.disabled){cursor:default}*,*::after,*::before{box-sizing:border-box}::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){*{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}::-webkit-scrollbar{width:0.5rem;height:0.5rem}::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}::-webkit-scrollbar-corner{display:none}:host .btn-danger{border-radius:var(--theme-btn--border-radius)}:host .btn-danger,:host .btn-danger.focus,:host .btn-danger:focus-visible{background-color:var(--theme-btn-danger--background);color:var(--theme-btn-danger--color);--ix-button-color:var(--theme-btn-danger--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-danger--border-color);border-style:solid}:host .btn-danger:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-danger.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger.selected:not(.disabled):not(:disabled):active,:host .btn-danger.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-danger--border-color--hover);background-color:var(--theme-btn-danger--background--hover);color:var(--theme-btn-danger--color--hover)}:host .btn-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger:not(.disabled):not(:disabled):active,:host .btn-danger:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-danger--border-color--active);background-color:var(--theme-btn-danger--background--active);color:var(--theme-btn-danger--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-danger.disabled,:host(.disabled) .btn-danger:disabled{pointer-events:none;border-color:var(--theme-btn-danger--border-color--disabled);background-color:var(--theme-btn-danger--background--disabled);color:var(--theme-btn-danger--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-danger--color--disabled)}:host .btn-outline-danger{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-danger,:host .btn-outline-danger.focus,:host .btn-outline-danger:focus-visible{background-color:var(--theme-btn-outline-danger--background);color:var(--theme-btn-outline-danger--color);--ix-button-color:var(--theme-btn-outline-danger--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-danger--border-color);border-style:solid}:host .btn-outline-danger:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-danger.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger.selected:not(.disabled):not(:disabled):active,:host .btn-outline-danger.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-danger--border-color--hover);background-color:var(--theme-btn-outline-danger--background--hover);color:var(--theme-btn-outline-danger--color--hover)}:host .btn-outline-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger:not(.disabled):not(:disabled):active,:host .btn-outline-danger:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-danger--border-color--active);background-color:var(--theme-btn-outline-danger--background--active);color:var(--theme-btn-outline-danger--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-danger.disabled,:host(.disabled) .btn-outline-danger:disabled{pointer-events:none;border-color:var(--theme-btn-outline-danger--border-color--disabled);background-color:var(--theme-btn-outline-danger--background--disabled);color:var(--theme-btn-outline-danger--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-danger--color--disabled)}:host .btn-invisible-danger{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-danger,:host .btn-invisible-danger.focus,:host .btn-invisible-danger:focus-visible{background-color:var(--theme-btn-invisible-danger--background);color:var(--theme-btn-invisible-danger--color);--ix-button-color:var(--theme-btn-invisible-danger--color);border-color:transparent}:host .btn-invisible-danger:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-danger.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-danger.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-danger--background--hover);color:var(--theme-btn-invisible-danger--color--hover)}:host .btn-invisible-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger:not(.disabled):not(:disabled):active,:host .btn-invisible-danger:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-danger--background--active);color:var(--theme-btn-invisible-danger--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-danger.disabled,:host(.disabled) .btn-invisible-danger:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-danger--background--disabled);color:var(--theme-btn-invisible-danger--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-danger--color--disabled)}:host .btn-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-primary,:host .btn-primary.focus,:host .btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}:host .btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):active,:host .btn-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):active,:host .btn-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-primary.disabled,:host(.disabled) .btn-primary:disabled{pointer-events:none;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}:host .btn-outline-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-primary,:host .btn-outline-primary.focus,:host .btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);--ix-button-color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}:host .btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-primary--border-color--hover);background-color:var(--theme-btn-outline-primary--background--hover);color:var(--theme-btn-outline-primary--color--hover)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):active,:host .btn-outline-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-primary--border-color--active);background-color:var(--theme-btn-outline-primary--background--active);color:var(--theme-btn-outline-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-primary.disabled,:host(.disabled) .btn-outline-primary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-primary--color--disabled)}:host .btn-invisible-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-primary,:host .btn-invisible-primary.focus,:host .btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}:host .btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):active,:host .btn-invisible-primary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-primary.disabled,:host(.disabled) .btn-invisible-primary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-primary--color--disabled)}:host .btn-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-secondary,:host .btn-secondary.focus,:host .btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}:host .btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):active,:host .btn-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-secondary.disabled,:host(.disabled) .btn-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}:host .btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-secondary,:host .btn-outline-secondary.focus,:host .btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);--ix-button-color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}:host .btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-secondary--border-color--hover);background-color:var(--theme-btn-outline-secondary--background--hover);color:var(--theme-btn-outline-secondary--color--hover)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):active,:host .btn-outline-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-secondary--border-color--active);background-color:var(--theme-btn-outline-secondary--background--active);color:var(--theme-btn-outline-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-secondary.disabled,:host(.disabled) .btn-outline-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-secondary--color--disabled)}:host .btn-invisible-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-secondary,:host .btn-invisible-secondary.focus,:host .btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);--ix-button-color:var(--theme-btn-invisible-secondary--color);border-color:transparent}:host .btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-secondary--background--active);color:var(--theme-btn-invisible-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-secondary.disabled,:host(.disabled) .btn-invisible-secondary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}:host{display:inline-flex;justify-content:center;align-items:center}:host button{width:100%;height:100%;overflow:hidden;padding:0}:host button.btn-oval{border-radius:6.25rem}:host ix-icon{color:var(--ix-icon-button-color, currentColor);margin:0}:host ix-spinner{margin:0}:host(.btn-icon-12){height:1rem;width:1rem;min-width:1rem;min-height:1rem}:host(.btn-icon-16){height:1.5rem;width:1.5rem;min-width:1.5rem;min-height:1.5rem}:host(.btn-icon-32){height:2rem;width:2rem;min-width:2rem;min-height:2rem}";const s=a;const l=class{constructor(r){e(this,r);this.pressedChange=o(this,"pressedChange",7);this.variant="secondary";this.outline=false;this.ghost=false;this.icon=undefined;this.pressed=false;this.size="24";this.disabled=false;this.loading=false}isIllegalToggleButtonConfig(){return this.variant==="primary"&&(this.outline||this.ghost)}logIllegalConfig(){console.warn('iX toggle button with illegal configuration detected. Variant "primary" can only be combined with "outline" or "ghost".')}onVariantChange(){if(this.isIllegalToggleButtonConfig()){this.logIllegalConfig()}}onGhostChange(){this.onVariantChange()}onOutlineChange(){this.onVariantChange()}componentDidLoad(){this.onVariantChange()}dispatchPressedChange(){this.pressedChange.emit(!this.pressed)}getIconSizeClass(){return{"btn-icon-12":this.size==="12","btn-icon-16":this.size==="16","btn-icon-32":this.size==="24"}}render(){const e={variant:this.variant,outline:this.outline,ghost:this.ghost,iconOnly:true,iconOval:false,selected:this.pressed,disabled:this.disabled||this.loading,icon:this.icon,iconSize:this.size,loading:this.loading,onClick:()=>this.dispatchPressedChange(),type:"button",ariaAttributes:{"aria-pressed":d(this.pressed)},extraClasses:Object.assign({"icon-button":true},this.getIconSizeClass())};return r(t,{key:"99ab49dda5fcdc55bbbaff72b2af203317cb56c0",class:Object.assign(Object.assign({},this.getIconSizeClass()),{disabled:this.disabled||this.loading})},r(i,Object.assign({key:"7ba2608c0e1ac7d8e9e02966037f7b7a4facc66d"},e)))}get hostElement(){return n(this)}static get watchers(){return{variant:["onVariantChange"],ghost:["onGhostChange"],outline:["onOutlineChange"]}}};l.style=s;export{l as ix_icon_toggle_button};
-//# sourceMappingURL=p-48718dc1.entry.js.map
+import{r as e,c as o,h as r,H as t,g as n}from"./p-5806df2b.js";import{B as i}from"./p-6bf208b8.js";import{a as d}from"./p-5fe87e71.js";import"./p-35e14912.js";const a=":host{display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host button{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host ix-spinner{margin-right:0.25rem}:host ix-icon{margin-right:0.25rem}:host .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host .icon{pointer-events:none}:host(.disabled){cursor:default}*,*::after,*::before{box-sizing:border-box}::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){*{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}::-webkit-scrollbar{width:0.5rem;height:0.5rem}::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}::-webkit-scrollbar-corner{display:none}:host .btn-danger{border-radius:var(--theme-btn--border-radius)}:host .btn-danger,:host .btn-danger.focus,:host .btn-danger:focus-visible{background-color:var(--theme-btn-danger--background);color:var(--theme-btn-danger--color);--ix-button-color:var(--theme-btn-danger--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-danger--border-color);border-style:solid}:host .btn-danger:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-danger.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger.selected:not(.disabled):not(:disabled):active,:host .btn-danger.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-danger--border-color--hover);background-color:var(--theme-btn-danger--background--hover);color:var(--theme-btn-danger--color--hover)}:host .btn-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger:not(.disabled):not(:disabled):active,:host .btn-danger:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-danger--border-color--active);background-color:var(--theme-btn-danger--background--active);color:var(--theme-btn-danger--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-danger.disabled,:host(.disabled) .btn-danger:disabled{pointer-events:none;border-color:var(--theme-btn-danger--border-color--disabled);background-color:var(--theme-btn-danger--background--disabled);color:var(--theme-btn-danger--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-danger--color--disabled)}:host .btn-outline-danger{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-danger,:host .btn-outline-danger.focus,:host .btn-outline-danger:focus-visible{background-color:var(--theme-btn-outline-danger--background);color:var(--theme-btn-outline-danger--color);--ix-button-color:var(--theme-btn-outline-danger--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-danger--border-color);border-style:solid}:host .btn-outline-danger:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-danger.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger.selected:not(.disabled):not(:disabled):active,:host .btn-outline-danger.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-danger--border-color--hover);background-color:var(--theme-btn-outline-danger--background--hover);color:var(--theme-btn-outline-danger--color--hover)}:host .btn-outline-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger:not(.disabled):not(:disabled):active,:host .btn-outline-danger:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-danger--border-color--active);background-color:var(--theme-btn-outline-danger--background--active);color:var(--theme-btn-outline-danger--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-danger.disabled,:host(.disabled) .btn-outline-danger:disabled{pointer-events:none;border-color:var(--theme-btn-outline-danger--border-color--disabled);background-color:var(--theme-btn-outline-danger--background--disabled);color:var(--theme-btn-outline-danger--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-danger--color--disabled)}:host .btn-invisible-danger{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-danger,:host .btn-invisible-danger.focus,:host .btn-invisible-danger:focus-visible{background-color:var(--theme-btn-invisible-danger--background);color:var(--theme-btn-invisible-danger--color);--ix-button-color:var(--theme-btn-invisible-danger--color);border-color:transparent}:host .btn-invisible-danger:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-danger.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-danger.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-danger--background--hover);color:var(--theme-btn-invisible-danger--color--hover)}:host .btn-invisible-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger:not(.disabled):not(:disabled):active,:host .btn-invisible-danger:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-danger--background--active);color:var(--theme-btn-invisible-danger--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-danger.disabled,:host(.disabled) .btn-invisible-danger:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-danger--background--disabled);color:var(--theme-btn-invisible-danger--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-danger--color--disabled)}:host .btn-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-primary,:host .btn-primary.focus,:host .btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}:host .btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):active,:host .btn-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):active,:host .btn-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-primary.disabled,:host(.disabled) .btn-primary:disabled{pointer-events:none;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}:host .btn-outline-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-primary,:host .btn-outline-primary.focus,:host .btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);--ix-button-color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}:host .btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-primary--border-color--hover);background-color:var(--theme-btn-outline-primary--background--hover);color:var(--theme-btn-outline-primary--color--hover)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):active,:host .btn-outline-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-primary--border-color--active);background-color:var(--theme-btn-outline-primary--background--active);color:var(--theme-btn-outline-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-primary.disabled,:host(.disabled) .btn-outline-primary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-primary--color--disabled)}:host .btn-invisible-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-primary,:host .btn-invisible-primary.focus,:host .btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}:host .btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):active,:host .btn-invisible-primary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-primary.disabled,:host(.disabled) .btn-invisible-primary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-primary--color--disabled)}:host .btn-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-secondary,:host .btn-secondary.focus,:host .btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}:host .btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):active,:host .btn-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-secondary.disabled,:host(.disabled) .btn-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}:host .btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-secondary,:host .btn-outline-secondary.focus,:host .btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);--ix-button-color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}:host .btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-secondary--border-color--hover);background-color:var(--theme-btn-outline-secondary--background--hover);color:var(--theme-btn-outline-secondary--color--hover)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):active,:host .btn-outline-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-secondary--border-color--active);background-color:var(--theme-btn-outline-secondary--background--active);color:var(--theme-btn-outline-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-secondary.disabled,:host(.disabled) .btn-outline-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-secondary--color--disabled)}:host .btn-invisible-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-secondary,:host .btn-invisible-secondary.focus,:host .btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);--ix-button-color:var(--theme-btn-invisible-secondary--color);border-color:transparent}:host .btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-secondary--background--active);color:var(--theme-btn-invisible-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-secondary.disabled,:host(.disabled) .btn-invisible-secondary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}:host{display:inline-flex;justify-content:center;align-items:center}:host button{width:100%;height:100%;overflow:hidden;padding:0}:host button.btn-oval{border-radius:6.25rem}:host ix-icon{color:var(--ix-icon-button-color, currentColor);margin:0}:host ix-spinner{margin:0}:host(.btn-icon-12){height:1rem;width:1rem;min-width:1rem;min-height:1rem}:host(.btn-icon-16){height:1.5rem;width:1.5rem;min-width:1.5rem;min-height:1.5rem}:host(.btn-icon-32){height:2rem;width:2rem;min-width:2rem;min-height:2rem}";const s=a;const l=class{constructor(r){e(this,r);this.pressedChange=o(this,"pressedChange",7);this.variant="secondary";this.outline=false;this.ghost=false;this.icon=undefined;this.pressed=false;this.size="24";this.disabled=false;this.loading=false}isIllegalToggleButtonConfig(){return this.variant==="primary"&&(this.outline||this.ghost)}logIllegalConfig(){console.warn('iX toggle button with illegal configuration detected. Variant "primary" can only be combined with "outline" or "ghost".')}onVariantChange(){if(this.isIllegalToggleButtonConfig()){this.logIllegalConfig()}}onGhostChange(){this.onVariantChange()}onOutlineChange(){this.onVariantChange()}componentDidLoad(){this.onVariantChange()}dispatchPressedChange(){this.pressedChange.emit(!this.pressed)}getIconSizeClass(){return{"btn-icon-12":this.size==="12","btn-icon-16":this.size==="16","btn-icon-32":this.size==="24"}}render(){const e={variant:this.variant,outline:this.outline,ghost:this.ghost,iconOnly:true,iconOval:false,selected:this.pressed,disabled:this.disabled||this.loading,icon:this.icon,iconSize:this.size,loading:this.loading,onClick:()=>this.dispatchPressedChange(),type:"button",ariaAttributes:{"aria-pressed":d(this.pressed)},extraClasses:Object.assign({"icon-button":true},this.getIconSizeClass())};return r(t,{key:"588ebac02e4d670f5dd68986da1b6f2916e3fe18",class:Object.assign(Object.assign({},this.getIconSizeClass()),{disabled:this.disabled||this.loading})},r(i,Object.assign({key:"701cb0fa92d957479f6f65846856149e3b0a6e60"},e)))}get hostElement(){return n(this)}static get watchers(){return{variant:["onVariantChange"],ghost:["onGhostChange"],outline:["onOutlineChange"]}}};l.style=s;export{l as ix_icon_toggle_button};
+//# sourceMappingURL=p-67209151.entry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["iconToggleButtonCss","IxIconToggleButtonStyle0","IconToggleButton","isIllegalToggleButtonConfig","this","variant","outline","ghost","logIllegalConfig","console","warn","onVariantChange","onGhostChange","onOutlineChange","componentDidLoad","dispatchPressedChange","pressedChange","emit","pressed","getIconSizeClass","size","render","baseButtonProps","iconOnly","iconOval","selected","disabled","loading","icon","iconSize","onClick","type","ariaAttributes","a11yBoolean","extraClasses","Object","assign","h","Host","key","class","BaseIconButton"],"sources":["src/components/icon-toggle-button/icon-toggle-button.scss?tag=ix-icon-toggle-button&encapsulation=shadow","src/components/icon-toggle-button/icon-toggle-button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import '../icon-button/icon-button-mixin.scss';\n\n@include base-icon-button;\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  Watch,\n} from '@stencil/core';\nimport { BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\nimport { a11yBoolean } from '../utils/a11y';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-icon-toggle-button',\n  shadow: true,\n  styleUrl: './icon-toggle-button.scss',\n})\nexport class IconToggleButton {\n  /**\n   * Button variant.\n   * Important: Variant 'primary' can only be combined with either outline or ghost.\n   */\n  @Prop() variant: ButtonVariant = 'secondary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Icon name\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Show button as pressed\n   */\n  @Prop() pressed = false;\n\n  /**\n   * Size of icon in button\n   */\n  @Prop() size: '24' | '16' | '12' = '24';\n\n  /**\n   * Disable the button\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Loading button\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * Pressed change event\n   */\n  @Event() pressedChange!: EventEmitter<boolean>;\n\n  @Element() hostElement!: HTMLIxIconToggleButtonElement;\n\n  private isIllegalToggleButtonConfig() {\n    return this.variant === 'primary' && (this.outline || this.ghost);\n  }\n\n  private logIllegalConfig() {\n    console.warn(\n      'iX toggle button with illegal configuration detected. Variant \"primary\" can only be combined with \"outline\" or \"ghost\".'\n    );\n  }\n\n  @Watch('variant')\n  onVariantChange() {\n    if (this.isIllegalToggleButtonConfig()) {\n      this.logIllegalConfig();\n    }\n  }\n\n  @Watch('ghost')\n  onGhostChange() {\n    this.onVariantChange();\n  }\n\n  @Watch('outline')\n  onOutlineChange() {\n    this.onVariantChange();\n  }\n\n  componentDidLoad() {\n    this.onVariantChange();\n  }\n\n  private dispatchPressedChange() {\n    this.pressedChange.emit(!this.pressed);\n  }\n\n  private getIconSizeClass() {\n    return {\n      'btn-icon-12': this.size === '12',\n      'btn-icon-16': this.size === '16',\n      'btn-icon-32': this.size === '24',\n    };\n  }\n\n  render() {\n    const baseButtonProps: BaseButtonProps = {\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      iconOnly: true,\n      iconOval: false,\n      selected: this.pressed,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      iconSize: this.size,\n      loading: this.loading,\n      onClick: () => this.dispatchPressedChange(),\n      type: 'button',\n      ariaAttributes: {\n        'aria-pressed': a11yBoolean(this.pressed),\n      },\n      extraClasses: {\n        'icon-button': true,\n        ...this.getIconSizeClass(),\n      },\n    };\n\n    return (\n      <Host\n        class={{\n          ...this.getIconSizeClass(),\n          disabled: this.disabled || this.loading,\n        }}\n      >\n        <BaseIconButton {...baseButtonProps}></BaseIconButton>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gKAAA,MAAMA,EAAsB,07tBAC5B,MAAAC,EAAeD,E,MC+BFE,EAAgB,M,mFAKM,Y,aAKf,M,WAKF,M,iCAUE,M,UAKiB,K,cAKC,M,aAKT,K,CASnB,2BAAAC,GACN,OAAOC,KAAKC,UAAY,YAAcD,KAAKE,SAAWF,KAAKG,M,CAGrD,gBAAAC,GACNC,QAAQC,KACN,0H,CAKJ,eAAAC,GACE,GAAIP,KAAKD,8BAA+B,CACtCC,KAAKI,kB,EAKT,aAAAI,GACER,KAAKO,iB,CAIP,eAAAE,GACET,KAAKO,iB,CAGP,gBAAAG,GACEV,KAAKO,iB,CAGC,qBAAAI,GACNX,KAAKY,cAAcC,MAAMb,KAAKc,Q,CAGxB,gBAAAC,GACN,MAAO,CACL,cAAef,KAAKgB,OAAS,KAC7B,cAAehB,KAAKgB,OAAS,KAC7B,cAAehB,KAAKgB,OAAS,K,CAIjC,MAAAC,GACE,MAAMC,EAAmC,CACvCjB,QAASD,KAAKC,QACdC,QAASF,KAAKE,QACdC,MAAOH,KAAKG,MACZgB,SAAU,KACVC,SAAU,MACVC,SAAUrB,KAAKc,QACfQ,SAAUtB,KAAKsB,UAAYtB,KAAKuB,QAChCC,KAAMxB,KAAKwB,KACXC,SAAUzB,KAAKgB,KACfO,QAASvB,KAAKuB,QACdG,QAAS,IAAM1B,KAAKW,wBACpBgB,KAAM,SACNC,eAAgB,CACd,eAAgBC,EAAY7B,KAAKc,UAEnCgB,aAAYC,OAAAC,OAAA,CACV,cAAe,MACZhC,KAAKe,qBAIZ,OACEkB,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAKL,OAAAC,OAAAD,OAAAC,OAAA,GACAhC,KAAKe,oBAAkB,CAC1BO,SAAUtB,KAAKsB,UAAYtB,KAAKuB,WAGlCU,EAACI,EAAcN,OAAAC,OAAA,CAAAG,IAAA,4CAAKjB,I"}

package/dist/siemens-ix/{p-1c5ebea3.entry.js → p-676a4bd0.entry.js}

@@ -1,2 +1,2 @@
-import{r,h as o,H as t}from"./p-5806df2b.js";const e=":host{display:flex;align-items:center;position:relative;height:2.5rem;width:auto;padding:0.25rem 1rem;overflow:hidden;cursor:default;color:var(--theme-color-soft-text)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}";const a=e;const s=class{constructor(o){r(this,o);this.label=undefined}render(){return o(t,{key:"7532adf5a41a91f4d60927e1ef8756216fac8dfb"},o("ix-typography",{key:"b9222fc010a499d6a2493e43ea0212da2d14c664",class:"category-text",format:"h5"},this.label))}};s.style=a;export{s as ix_dropdown_header};
-//# sourceMappingURL=p-1c5ebea3.entry.js.map
+import{r,h as o,H as e}from"./p-5806df2b.js";const t=":host{display:flex;align-items:center;position:relative;height:2.5rem;width:auto;padding:0.25rem 1rem;overflow:hidden;cursor:default;color:var(--theme-color-soft-text)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}";const a=t;const s=class{constructor(o){r(this,o);this.label=undefined}render(){return o(e,{key:"0e1242771eaad701539d47e6953308d3d8fb2d77"},o("ix-typography",{key:"b8e5875946afbd41ebff44cf304e7652141c655b",class:"category-text",format:"h5"},this.label))}};s.style=a;export{s as ix_dropdown_header};
+//# sourceMappingURL=p-676a4bd0.entry.js.map

package/dist/siemens-ix/{p-1c5ebea3.entry.js.map → p-676a4bd0.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["dropdownHeaderCss","IxDropdownHeaderStyle0","DropdownHeader","render","h","Host","key","class","format","this","label"],"sources":["src/components/dropdown-header/dropdown-header.scss?tag=ix-dropdown-header&encapsulation=shadow","src/components/dropdown-header/dropdown-header.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  align-items: center;\n  position: relative;\n  height: 2.5rem;\n  width: auto;\n\n  padding: 0.25rem 1rem;\n\n  overflow: hidden;\n  cursor: default;\n\n  color: var(--theme-color-soft-text);\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-dropdown-header',\n  styleUrl: 'dropdown-header.scss',\n  shadow: true,\n})\nexport class DropdownHeader {\n  /**\n   * Display name of the header\n   */\n  @Prop() label: string;\n\n  render() {\n    return (\n      <Host>\n        <ix-typography class={'category-text'} format={'h5'}>\n          {this.label}\n        </ix-typography>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6CAAA,MAAMA,EAAoB,m6BAC1B,MAAAC,EAAeD,E,MCkBFE,EAAc,M,8CAMzB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,iBAAAE,IAAA,2CAAeC,MAAO,gBAAiBC,OAAQ,MAC5CC,KAAKC,O"}
+{"version":3,"names":["dropdownHeaderCss","IxDropdownHeaderStyle0","DropdownHeader","render","h","Host","key","class","format","this","label"],"sources":["src/components/dropdown-header/dropdown-header.scss?tag=ix-dropdown-header&encapsulation=shadow","src/components/dropdown-header/dropdown-header.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  align-items: center;\n  position: relative;\n  height: 2.5rem;\n  width: auto;\n\n  padding: 0.25rem 1rem;\n\n  overflow: hidden;\n  cursor: default;\n\n  color: var(--theme-color-soft-text);\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-dropdown-header',\n  styleUrl: 'dropdown-header.scss',\n  shadow: true,\n})\nexport class DropdownHeader {\n  /**\n   * Display name of the header\n   */\n  @Prop() label?: string;\n\n  render() {\n    return (\n      <Host>\n        <ix-typography class={'category-text'} format={'h5'}>\n          {this.label}\n        </ix-typography>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6CAAA,MAAMA,EAAoB,m6BAC1B,MAAAC,EAAeD,E,MCkBFE,EAAc,M,8CAMzB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,iBAAAE,IAAA,2CAAeC,MAAO,gBAAiBC,OAAQ,MAC5CC,KAAKC,O"}

package/dist/siemens-ix/{p-3205726a.entry.js → p-6af64cf4.entry.js}

@@ -1,2 +1,2 @@
-import{r,h as o,H as e,g as t}from"./p-5806df2b.js";import"./p-46a6cd9d.js";import{d as a}from"./p-23a4b81f.js";import"./p-c4749812.js";const i=":host{display:block}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .content{padding:2rem;padding-right:0}:host .content-apps{display:flex;position:relative;flex-wrap:wrap;justify-content:space-evenly;max-height:50vh;margin-right:0.25rem;gap:1.5rem}:host .loading{display:flex;flex-direction:row;align-items:center}:host .loading ix-spinner{margin-right:1rem}:host .AppEntry{all:unset;display:flex;flex-direction:row;align-items:center;gap:1rem;padding:0.5rem;flex:1 1 45%;cursor:pointer;border:0.0625rem solid transparent}:host .AppEntry.Selected{background-color:var(--theme-color-ghost--selected);border:var(--theme-dynamic-bdr-1)}:host .AppEntry:not(.disabled):not(:disabled).hover,:host .AppEntry:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host .AppEntry:not(.disabled):not(:disabled).active,:host .AppEntry:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host .AppEntry:focus-visible{border:1px solid var(--theme-color-focus-bdr)}:host .AppName{display:flex;flex-direction:column}:host .AppName ix-icon{margin-left:1rem}:host .AppIcon{width:3rem;height:3rem;border-radius:0.25rem}";const s=i;function n(r){function e(r){if(r!=="_blank"&&r!=="_parent"&&r!=="_self"&&r!=="_top"){return true}if(r==="_blank"){return true}return false}return o("button",{class:{AppEntry:true,Selected:r.selected},onClick:()=>{a(r.host);window.open(r.url,r.target)}},o("div",null,o("img",{class:"AppIcon",src:r.iconSrc})),o("div",{class:"AppName"},o("ix-typography",{format:"h4"},r.name,e(r.target)&&o("ix-icon",{size:"12",name:"open-external",color:"color-soft-text"})),o("ix-typography",{format:"label-sm",color:"soft"},r.description)))}const l=class{constructor(o){r(this,o);this.config=undefined}componentWillLoad(){if(!this.config){throw Error("ApplicationConfig not provided")}}render(){var r,t,a,i;return o(e,{key:"caf7fe96f12fdef398b1316120127157463703e0"},o("ix-modal-header",{key:"17031f7879a38d312f9520555dae9879d35cdb65",icon:"apps"},((r=this.config)===null||r===void 0?void 0:r.i18nAppSwitch)||"Switch to application"),o("ix-modal-content",{key:"1664cb4c2b142d8bcd84f723a11016ee883a3684",class:"content"},o("div",{key:"85d188516ccf77964b47a9592bdb05c872d2c9c8",class:"content-apps"},(!this.config||((t=this.config)===null||t===void 0?void 0:t.apps.length)===0)&&o("div",{key:"d5b97278041f3c268774ce1345847d3688728931",class:"loading"},o("ix-spinner",{key:"0b2e26ebb92bc0263bb78fa6a9757a2cf67a59df",size:"medium",variant:"primary"}),o("span",{key:"75845935e375bd8f2ea3e68562acb7fadd3d33b5"},((a=this.config)===null||a===void 0?void 0:a.i18nLoadingApps)||"Loading available applications...")),(i=this.config)===null||i===void 0?void 0:i.apps.map((r=>{var e;return o(n,{host:this.hostElement,name:r.name,description:r.description,iconSrc:r.iconSrc,target:r.target,url:r.url,selected:r.id===((e=this.config)===null||e===void 0?void 0:e.currentAppId)})})))))}get hostElement(){return t(this)}};l.style=s;export{l as ix_application_switch_modal};
-//# sourceMappingURL=p-3205726a.entry.js.map
+import{r,h as o,H as e,g as t}from"./p-5806df2b.js";import"./p-46a6cd9d.js";import{d as a}from"./p-38d9d569.js";import"./p-c4749812.js";const i=":host{display:block}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .content{padding:2rem;padding-right:0}:host .content-apps{display:flex;position:relative;flex-wrap:wrap;justify-content:space-evenly;max-height:50vh;margin-right:0.25rem;gap:1.5rem}:host .loading{display:flex;flex-direction:row;align-items:center}:host .loading ix-spinner{margin-right:1rem}:host .AppEntry{all:unset;display:flex;flex-direction:row;align-items:center;gap:1rem;padding:0.5rem;flex:1 1 45%;cursor:pointer;border:0.0625rem solid transparent}:host .AppEntry.Selected{background-color:var(--theme-color-ghost--selected);border:var(--theme-dynamic-bdr-1)}:host .AppEntry:not(.disabled):not(:disabled).hover,:host .AppEntry:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}:host .AppEntry:not(.disabled):not(:disabled).active,:host .AppEntry:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}:host .AppEntry:focus-visible{border:1px solid var(--theme-color-focus-bdr)}:host .AppName{display:flex;flex-direction:column}:host .AppName ix-icon{margin-left:1rem}:host .AppIcon{width:3rem;height:3rem;border-radius:0.25rem}";const s=i;function n(r){function e(r){if(r!=="_blank"&&r!=="_parent"&&r!=="_self"&&r!=="_top"){return true}if(r==="_blank"){return true}return false}return o("button",{class:{AppEntry:true,Selected:r.selected},onClick:()=>{a(r.host);window.open(r.url,r.target)}},o("div",null,o("img",{class:"AppIcon",src:r.iconSrc})),o("div",{class:"AppName"},o("ix-typography",{format:"h4"},r.name,e(r.target)&&o("ix-icon",{size:"12",name:"open-external",color:"color-soft-text"})),o("ix-typography",{format:"label-sm",color:"soft"},r.description)))}const c=class{constructor(o){r(this,o);this.config=undefined}componentWillLoad(){if(!this.config){throw Error("ApplicationConfig not provided")}}render(){var r,t,a,i;return o(e,{key:"dad36a353095fd4fefe76a6e30689c337a386ad9"},o("ix-modal-header",{key:"aeecc9cceec3af4229c50f2485192e10b91f2b70",icon:"apps"},((r=this.config)===null||r===void 0?void 0:r.i18nAppSwitch)||"Switch to application"),o("ix-modal-content",{key:"b61ec923a488f02bccff232c9da0f3e0f779b48c",class:"content"},o("div",{key:"12341ea0223935f515eee8809b4f941f1d5e19a7",class:"content-apps"},(!this.config||((t=this.config)===null||t===void 0?void 0:t.apps.length)===0)&&o("div",{key:"bec8b7c136982629f6700202c2f4add9ae160f36",class:"loading"},o("ix-spinner",{key:"d0fa62e5041053ada470731bbdf8a21aa2a08200",size:"medium",variant:"primary"}),o("span",{key:"9fd6f8cbc36c4c74a52f192858d124bd85d481c0"},((a=this.config)===null||a===void 0?void 0:a.i18nLoadingApps)||"Loading available applications...")),(i=this.config)===null||i===void 0?void 0:i.apps.map((r=>{var e;return o(n,{host:this.hostElement,name:r.name,description:r.description,iconSrc:r.iconSrc,target:r.target,url:r.url,selected:r.id===((e=this.config)===null||e===void 0?void 0:e.currentAppId)})})))))}get hostElement(){return t(this)}};c.style=s;export{c as ix_application_switch_modal};
+//# sourceMappingURL=p-6af64cf4.entry.js.map

package/dist/siemens-ix/{p-3205726a.entry.js.map → p-6af64cf4.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["applicationSwitchModalCss","IxApplicationSwitchModalStyle0","ApplicationItem","props","isExternal","target","h","class","AppEntry","Selected","selected","onClick","dismissModal","host","window","open","url","src","iconSrc","format","name","size","color","description","ApplicationSwitchModal","componentWillLoad","this","config","Error","render","Host","key","icon","_a","i18nAppSwitch","_b","apps","length","variant","_c","i18nLoadingApps","_d","map","appEntry","hostElement","id","currentAppId"],"sources":["src/components/application-header/application-switch-modal/application-switch-modal.scss?tag=ix-application-switch-modal&encapsulation=shadow","src/components/application-header/application-switch-modal/application-switch-modal.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n@import 'mixins/hover';\n\n:host {\n  @include ix-component;\n  display: block;\n\n  .content {\n    padding: 2rem;\n    padding-right: 0;\n  }\n\n  .content-apps {\n    display: flex;\n    position: relative;\n    flex-wrap: wrap;\n    justify-content: space-evenly;\n    max-height: 50vh;\n    margin-right: 0.25rem;\n    gap: 1.5rem;\n  }\n\n  .loading {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    ix-spinner {\n      margin-right: 1rem;\n    }\n  }\n}\n\n:host {\n  .AppEntry {\n    all: unset;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 1rem;\n    padding: 0.5rem;\n    flex: 1 1 calc(45%);\n    cursor: pointer;\n    border: 0.0625rem solid transparent;\n  }\n\n  .AppEntry.Selected {\n    background-color: var(--theme-color-ghost--selected);\n    border: var(--theme-dynamic-bdr-1);\n  }\n\n  .AppEntry {\n    @include ghost-hover-pressed;\n  }\n\n  .AppEntry:focus-visible {\n    border: 1px solid var(--theme-color-focus-bdr);\n  }\n\n  .AppName {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .AppName ix-icon {\n    margin-left: 1rem;\n  }\n\n  .AppIcon {\n    width: 3rem;\n    height: 3rem;\n    border-radius: 0.25rem;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\nimport {\n  AppSwitchConfiguration,\n  AppSwitchConfigurationTarget,\n} from '../../utils/application-layout/context';\nimport { dismissModal } from '../../utils/modal';\n\nfunction ApplicationItem(props: {\n  host: HTMLIxApplicationSwitchModalElement;\n  name: string;\n  description: string;\n  iconSrc: string;\n  url: string;\n  target: AppSwitchConfigurationTarget;\n  selected: boolean;\n}) {\n  function isExternal(target: AppSwitchConfigurationTarget) {\n    if (\n      target !== '_blank' &&\n      target !== '_parent' &&\n      target !== '_self' &&\n      target !== '_top'\n    ) {\n      // Check if its one of the target keywords\n      // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a?retiredLocale=de#target\n      return true;\n    }\n\n    if (target === '_blank') {\n      return true;\n    }\n\n    return false;\n  }\n\n  return (\n    <button\n      class={{\n        AppEntry: true,\n        Selected: props.selected,\n      }}\n      onClick={() => {\n        dismissModal(props.host);\n        window.open(props.url, props.target);\n      }}\n    >\n      <div>\n        <img class=\"AppIcon\" src={props.iconSrc}></img>\n      </div>\n      <div class=\"AppName\">\n        <ix-typography format=\"h4\">\n          {props.name}\n          {isExternal(props.target) && (\n            <ix-icon\n              size=\"12\"\n              name=\"open-external\"\n              color=\"color-soft-text\"\n            ></ix-icon>\n          )}\n        </ix-typography>\n        <ix-typography format=\"label-sm\" color=\"soft\">\n          {props.description}\n        </ix-typography>\n      </div>\n    </button>\n  );\n}\n\n/** @internal */\n@Component({\n  tag: 'ix-application-switch-modal',\n  styleUrl: 'application-switch-modal.scss',\n  shadow: true,\n})\nexport class ApplicationSwitchModal {\n  @Element() hostElement!: HTMLIxApplicationSwitchModalElement;\n\n  /** @internal */\n  @Prop() config: AppSwitchConfiguration;\n\n  componentWillLoad() {\n    if (!this.config) {\n      throw Error('ApplicationConfig not provided');\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-modal-header icon=\"apps\">\n          {this.config?.i18nAppSwitch || 'Switch to application'}\n        </ix-modal-header>\n        <ix-modal-content class=\"content\">\n          <div class=\"content-apps\">\n            {(!this.config || this.config?.apps.length === 0) && (\n              <div class=\"loading\">\n                <ix-spinner size=\"medium\" variant=\"primary\"></ix-spinner>\n                <span>\n                  {this.config?.i18nLoadingApps ||\n                    'Loading available applications...'}\n                </span>\n              </div>\n            )}\n            {this.config?.apps.map((appEntry) => (\n              <ApplicationItem\n                host={this.hostElement}\n                name={appEntry.name}\n                description={appEntry.description}\n                iconSrc={appEntry.iconSrc}\n                target={appEntry.target}\n                url={appEntry.url}\n                selected={appEntry.id === this.config?.currentAppId}\n              ></ApplicationItem>\n            ))}\n          </div>\n        </ix-modal-content>\n      </Host>\n    );\n  }\n}\n"],"mappings":"wIAAA,MAAMA,EAA4B,82DAClC,MAAAC,EAAeD,ECef,SAASE,EAAgBC,GASvB,SAASC,EAAWC,GAClB,GACEA,IAAW,UACXA,IAAW,WACXA,IAAW,SACXA,IAAW,OACX,CAGA,OAAO,I,CAGT,GAAIA,IAAW,SAAU,CACvB,OAAO,I,CAGT,OAAO,K,CAGT,OACEC,EAAA,UACEC,MAAO,CACLC,SAAU,KACVC,SAAUN,EAAMO,UAElBC,QAAS,KACPC,EAAaT,EAAMU,MACnBC,OAAOC,KAAKZ,EAAMa,IAAKb,EAAME,OAAO,GAGtCC,EAAA,WACEA,EAAA,OAAKC,MAAM,UAAUU,IAAKd,EAAMe,WAElCZ,EAAA,OAAKC,MAAM,WACTD,EAAA,iBAAea,OAAO,MACnBhB,EAAMiB,KACNhB,EAAWD,EAAME,SAChBC,EAAA,WACEe,KAAK,KACLD,KAAK,gBACLE,MAAM,qBAIZhB,EAAA,iBAAea,OAAO,WAAWG,MAAM,QACpCnB,EAAMoB,cAKjB,C,MAQaC,EAAsB,M,+CAMjC,iBAAAC,GACE,IAAKC,KAAKC,OAAQ,CAChB,MAAMC,MAAM,iC,EAIhB,MAAAC,G,YACE,OACEvB,EAACwB,EAAI,CAAAC,IAAA,4CACHzB,EAAA,mBAAAyB,IAAA,2CAAiBC,KAAK,UACnBC,EAAAP,KAAKC,UAAM,MAAAM,SAAA,SAAAA,EAAEC,gBAAiB,yBAEjC5B,EAAA,oBAAAyB,IAAA,2CAAkBxB,MAAM,WACtBD,EAAA,OAAAyB,IAAA,2CAAKxB,MAAM,kBACNmB,KAAKC,UAAUQ,EAAAT,KAAKC,UAAM,MAAAQ,SAAA,SAAAA,EAAEC,KAAKC,UAAW,IAC7C/B,EAAA,OAAAyB,IAAA,2CAAKxB,MAAM,WACTD,EAAA,cAAAyB,IAAA,2CAAYV,KAAK,SAASiB,QAAQ,YAClChC,EAAA,QAAAyB,IAAA,8CACGQ,EAAAb,KAAKC,UAAM,MAAAY,SAAA,SAAAA,EAAEC,kBACZ,uCAIPC,EAAAf,KAAKC,UAAM,MAAAc,SAAA,S,EAAEL,KAAKM,KAAKC,I,MAAa,OACnCrC,EAACJ,EAAe,CACdW,KAAMa,KAAKkB,YACXxB,KAAMuB,EAASvB,KACfG,YAAaoB,EAASpB,YACtBL,QAASyB,EAASzB,QAClBb,OAAQsC,EAAStC,OACjBW,IAAK2B,EAAS3B,IACdN,SAAUiC,EAASE,OAAOZ,EAAAP,KAAKC,UAAM,MAAAM,SAAA,SAAAA,EAAEa,eACtB,M"}
+{"version":3,"names":["applicationSwitchModalCss","IxApplicationSwitchModalStyle0","ApplicationItem","props","isExternal","target","h","class","AppEntry","Selected","selected","onClick","dismissModal","host","window","open","url","src","iconSrc","format","name","size","color","description","ApplicationSwitchModal","componentWillLoad","this","config","Error","render","Host","key","icon","_a","i18nAppSwitch","_b","apps","length","variant","_c","i18nLoadingApps","_d","map","appEntry","hostElement","id","currentAppId"],"sources":["src/components/application-header/application-switch-modal/application-switch-modal.scss?tag=ix-application-switch-modal&encapsulation=shadow","src/components/application-header/application-switch-modal/application-switch-modal.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n@import 'mixins/hover';\n\n:host {\n  @include ix-component;\n  display: block;\n\n  .content {\n    padding: 2rem;\n    padding-right: 0;\n  }\n\n  .content-apps {\n    display: flex;\n    position: relative;\n    flex-wrap: wrap;\n    justify-content: space-evenly;\n    max-height: 50vh;\n    margin-right: 0.25rem;\n    gap: 1.5rem;\n  }\n\n  .loading {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    ix-spinner {\n      margin-right: 1rem;\n    }\n  }\n}\n\n:host {\n  .AppEntry {\n    all: unset;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 1rem;\n    padding: 0.5rem;\n    flex: 1 1 calc(45%);\n    cursor: pointer;\n    border: 0.0625rem solid transparent;\n  }\n\n  .AppEntry.Selected {\n    background-color: var(--theme-color-ghost--selected);\n    border: var(--theme-dynamic-bdr-1);\n  }\n\n  .AppEntry {\n    @include ghost-hover-pressed;\n  }\n\n  .AppEntry:focus-visible {\n    border: 1px solid var(--theme-color-focus-bdr);\n  }\n\n  .AppName {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .AppName ix-icon {\n    margin-left: 1rem;\n  }\n\n  .AppIcon {\n    width: 3rem;\n    height: 3rem;\n    border-radius: 0.25rem;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\nimport {\n  AppSwitchConfiguration,\n  AppSwitchConfigurationTarget,\n} from '../../utils/application-layout/context';\nimport { dismissModal } from '../../utils/modal';\n\nfunction ApplicationItem(props: {\n  host: HTMLIxApplicationSwitchModalElement;\n  name: string;\n  description: string;\n  iconSrc: string;\n  url: string;\n  target: AppSwitchConfigurationTarget;\n  selected: boolean;\n}) {\n  function isExternal(target: AppSwitchConfigurationTarget) {\n    if (\n      target !== '_blank' &&\n      target !== '_parent' &&\n      target !== '_self' &&\n      target !== '_top'\n    ) {\n      // Check if its one of the target keywords\n      // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a?retiredLocale=de#target\n      return true;\n    }\n\n    if (target === '_blank') {\n      return true;\n    }\n\n    return false;\n  }\n\n  return (\n    <button\n      class={{\n        AppEntry: true,\n        Selected: props.selected,\n      }}\n      onClick={() => {\n        dismissModal(props.host);\n        window.open(props.url, props.target);\n      }}\n    >\n      <div>\n        <img class=\"AppIcon\" src={props.iconSrc}></img>\n      </div>\n      <div class=\"AppName\">\n        <ix-typography format=\"h4\">\n          {props.name}\n          {isExternal(props.target) && (\n            <ix-icon\n              size=\"12\"\n              name=\"open-external\"\n              color=\"color-soft-text\"\n            ></ix-icon>\n          )}\n        </ix-typography>\n        <ix-typography format=\"label-sm\" color=\"soft\">\n          {props.description}\n        </ix-typography>\n      </div>\n    </button>\n  );\n}\n\n/** @internal */\n@Component({\n  tag: 'ix-application-switch-modal',\n  styleUrl: 'application-switch-modal.scss',\n  shadow: true,\n})\nexport class ApplicationSwitchModal {\n  @Element() hostElement!: HTMLIxApplicationSwitchModalElement;\n\n  /** @internal */\n  @Prop() config?: AppSwitchConfiguration;\n\n  componentWillLoad() {\n    if (!this.config) {\n      throw Error('ApplicationConfig not provided');\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-modal-header icon=\"apps\">\n          {this.config?.i18nAppSwitch || 'Switch to application'}\n        </ix-modal-header>\n        <ix-modal-content class=\"content\">\n          <div class=\"content-apps\">\n            {(!this.config || this.config?.apps.length === 0) && (\n              <div class=\"loading\">\n                <ix-spinner size=\"medium\" variant=\"primary\"></ix-spinner>\n                <span>\n                  {this.config?.i18nLoadingApps ||\n                    'Loading available applications...'}\n                </span>\n              </div>\n            )}\n            {this.config?.apps.map((appEntry) => (\n              <ApplicationItem\n                host={this.hostElement}\n                name={appEntry.name}\n                description={appEntry.description}\n                iconSrc={appEntry.iconSrc}\n                target={appEntry.target}\n                url={appEntry.url}\n                selected={appEntry.id === this.config?.currentAppId}\n              ></ApplicationItem>\n            ))}\n          </div>\n        </ix-modal-content>\n      </Host>\n    );\n  }\n}\n"],"mappings":"wIAAA,MAAMA,EAA4B,82DAClC,MAAAC,EAAeD,ECef,SAASE,EAAgBC,GASvB,SAASC,EAAWC,GAClB,GACEA,IAAW,UACXA,IAAW,WACXA,IAAW,SACXA,IAAW,OACX,CAGA,OAAO,I,CAGT,GAAIA,IAAW,SAAU,CACvB,OAAO,I,CAGT,OAAO,K,CAGT,OACEC,EAAA,UACEC,MAAO,CACLC,SAAU,KACVC,SAAUN,EAAMO,UAElBC,QAAS,KACPC,EAAaT,EAAMU,MACnBC,OAAOC,KAAKZ,EAAMa,IAAKb,EAAME,OAAO,GAGtCC,EAAA,WACEA,EAAA,OAAKC,MAAM,UAAUU,IAAKd,EAAMe,WAElCZ,EAAA,OAAKC,MAAM,WACTD,EAAA,iBAAea,OAAO,MACnBhB,EAAMiB,KACNhB,EAAWD,EAAME,SAChBC,EAAA,WACEe,KAAK,KACLD,KAAK,gBACLE,MAAM,qBAIZhB,EAAA,iBAAea,OAAO,WAAWG,MAAM,QACpCnB,EAAMoB,cAKjB,C,MAQaC,EAAsB,M,+CAMjC,iBAAAC,GACE,IAAKC,KAAKC,OAAQ,CAChB,MAAMC,MAAM,iC,EAIhB,MAAAC,G,YACE,OACEvB,EAACwB,EAAI,CAAAC,IAAA,4CACHzB,EAAA,mBAAAyB,IAAA,2CAAiBC,KAAK,UACnBC,EAAAP,KAAKC,UAAM,MAAAM,SAAA,SAAAA,EAAEC,gBAAiB,yBAEjC5B,EAAA,oBAAAyB,IAAA,2CAAkBxB,MAAM,WACtBD,EAAA,OAAAyB,IAAA,2CAAKxB,MAAM,kBACNmB,KAAKC,UAAUQ,EAAAT,KAAKC,UAAM,MAAAQ,SAAA,SAAAA,EAAEC,KAAKC,UAAW,IAC7C/B,EAAA,OAAAyB,IAAA,2CAAKxB,MAAM,WACTD,EAAA,cAAAyB,IAAA,2CAAYV,KAAK,SAASiB,QAAQ,YAClChC,EAAA,QAAAyB,IAAA,8CACGQ,EAAAb,KAAKC,UAAM,MAAAY,SAAA,SAAAA,EAAEC,kBACZ,uCAIPC,EAAAf,KAAKC,UAAM,MAAAc,SAAA,S,EAAEL,KAAKM,KAAKC,I,MAAa,OACnCrC,EAACJ,EAAe,CACdW,KAAMa,KAAKkB,YACXxB,KAAMuB,EAASvB,KACfG,YAAaoB,EAASpB,YACtBL,QAASyB,EAASzB,QAClBb,OAAQsC,EAAStC,OACjBW,IAAK2B,EAAS3B,IACdN,SAAUiC,EAASE,OAAOZ,EAAAP,KAAKC,UAAM,MAAAM,SAAA,SAAAA,EAAEa,eACtB,M"}

package/dist/siemens-ix/{p-392b4297.entry.js → p-6b84501c.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,h as o,H as r}from"./p-5806df2b.js";const t=":host{display:flex;flex-grow:1;height:2.5rem;border-radius:var(--theme-kpi--border-radius);padding:0.375rem 0.25rem;min-width:0}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .kpi-container{display:flex;height:100%;width:100%;border-block-end:2px solid grey}:host .kpi-container.alarm{border-block-end-color:var(--theme-color-alarm)}:host .kpi-container.warning{border-block-end-color:var(--theme-color-warning)}:host .kpi-container .kpi-label{display:flex;align-items:center;color:var(--theme-kpi-display-label--color);flex-grow:1;flex-shrink:9999}:host .kpi-container .kpi-label ix-icon{margin-inline-end:0.25rem}:host .kpi-container .kpi-value-container{display:flex;align-items:flex-end}:host .kpi-container .kpi-value{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text);color:var(--theme-kpi-display-value--color)}:host .kpi-container .kpi-unit{margin-inline-start:0.5rem;color:var(--theme-kpi-display-units--color)}:host .kpi-container .kpi-label,:host .kpi-container .kpi-unit{margin-block-start:0.125rem}:host:not(.disabled):not(:disabled){cursor:pointer}:host:not(.disabled):not(:disabled):hover{background-color:var(--theme-kpi-display--background--hover)}:host:not(.disabled):not(:disabled){cursor:pointer}:host:not(.disabled):not(:disabled):active,:host:not(.disabled):not(:disabled).active{background-color:var(--theme-kpi-display--background--active)}:host:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--focus--border-color)}:host(.stacked){height:3.75rem}:host(.stacked) .kpi-container{justify-content:center;flex-wrap:wrap}:host(.stacked) .kpi-container .kpi-label{width:100%;justify-content:center}";const a=t;const i=class{constructor(o){e(this,o);this.label=undefined;this.value=undefined;this.unit=undefined;this.state="neutral";this.orientation="horizontal"}getStateIcon(){switch(this.state){case"alarm":return o("ix-icon",{color:"kpi-display-icon--color",name:"alarm",size:"16"});case"warning":return o("ix-icon",{color:"kpi-display-icon--color",name:"warning",size:"16"});default:return""}}getTooltipText(){let e=`${this.label}: ${this.value}`;if(this.unit){e=e.concat(` ${this.unit}`)}return e}render(){return o(r,{key:"a15aba9d140c89b2072909e2518c344da4c93a5d",title:this.getTooltipText(),tabindex:"1",class:{stacked:this.orientation==="vertical"}},o("div",{key:"5116d6ee8bf39c59b5a75de087e819544e5d55d7",class:{"kpi-container":true,alarm:this.state==="alarm",warning:this.state==="warning"}},o("span",{key:"55034df17c563c3d11d8b04fbd09417dbc33aa39",class:"kpi-label"},this.getStateIcon(),o("span",{key:"7034420124a2120271bbde7b36012de65aecb2e1",class:"kpi-label-text"},this.label)),o("span",{key:"2985854b162f37b387f3f9d7a1a2ad07d42cd8bd",class:"kpi-value-container"},o("span",{key:"a3ef308e885ddd1c2b521a76afa2af8ea9a5562d",class:"kpi-value"},this.value),this.unit?o("span",{class:"kpi-unit"},this.unit):"")))}};i.style=a;export{i as ix_kpi};
-//# sourceMappingURL=p-392b4297.entry.js.map
+import{r as e,h as o,H as r}from"./p-5806df2b.js";const t=":host{display:flex;flex-grow:1;height:2.5rem;border-radius:var(--theme-kpi--border-radius);padding:0.375rem 0.25rem;min-width:0}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .kpi-container{display:flex;height:100%;width:100%;border-block-end:2px solid grey}:host .kpi-container.alarm{border-block-end-color:var(--theme-color-alarm)}:host .kpi-container.warning{border-block-end-color:var(--theme-color-warning)}:host .kpi-container .kpi-label{display:flex;align-items:center;color:var(--theme-kpi-display-label--color);flex-grow:1;flex-shrink:9999}:host .kpi-container .kpi-label ix-icon{margin-inline-end:0.25rem}:host .kpi-container .kpi-value-container{display:flex;align-items:flex-end}:host .kpi-container .kpi-value{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text);color:var(--theme-kpi-display-value--color)}:host .kpi-container .kpi-unit{margin-inline-start:0.5rem;color:var(--theme-kpi-display-units--color)}:host .kpi-container .kpi-label,:host .kpi-container .kpi-unit{margin-block-start:0.125rem}:host:not(.disabled):not(:disabled){cursor:pointer}:host:not(.disabled):not(:disabled):hover{background-color:var(--theme-kpi-display--background--hover)}:host:not(.disabled):not(:disabled){cursor:pointer}:host:not(.disabled):not(:disabled):active,:host:not(.disabled):not(:disabled).active{background-color:var(--theme-kpi-display--background--active)}:host:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--focus--border-color)}:host(.stacked){height:3.75rem}:host(.stacked) .kpi-container{justify-content:center;flex-wrap:wrap}:host(.stacked) .kpi-container .kpi-label{width:100%;justify-content:center}";const a=t;const i=class{constructor(o){e(this,o);this.label=undefined;this.value=undefined;this.unit=undefined;this.state="neutral";this.orientation="horizontal"}getStateIcon(){switch(this.state){case"alarm":return o("ix-icon",{color:"kpi-display-icon--color",name:"alarm",size:"16"});case"warning":return o("ix-icon",{color:"kpi-display-icon--color",name:"warning",size:"16"});default:return""}}getTooltipText(){let e=`${this.label}: ${this.value}`;if(this.unit){e=e.concat(` ${this.unit}`)}return e}render(){return o(r,{key:"42de079241d3111b251c1b21a62da8648dba75ae",title:this.getTooltipText(),tabindex:"1",class:{stacked:this.orientation==="vertical"}},o("div",{key:"4ccd603dc47d5862edde0df1574befdc7b7403e3",class:{"kpi-container":true,alarm:this.state==="alarm",warning:this.state==="warning"}},o("span",{key:"298b314f3c06a1ce37e02df95a24b6d04420e709",class:"kpi-label"},this.getStateIcon(),o("span",{key:"f5b66bf28c956724d83da05b818d55b29cd327f4",class:"kpi-label-text"},this.label)),o("span",{key:"2e6d79c01baa2015d44a0f28aa5c945227abba83",class:"kpi-value-container"},o("span",{key:"fabe09ae4c0eb74f5343aebbef54ac2695f2ce72",class:"kpi-value"},this.value),this.unit?o("span",{class:"kpi-unit"},this.unit):"")))}};i.style=a;export{i as ix_kpi};
+//# sourceMappingURL=p-6b84501c.entry.js.map

package/dist/siemens-ix/{p-392b4297.entry.js.map → p-6b84501c.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["kpiCss","IxKpiStyle0","Kpi","getStateIcon","this","state","h","color","name","size","getTooltipText","tooltip","label","value","unit","concat","render","Host","key","title","tabindex","class","stacked","orientation","alarm","warning"],"sources":["src/components/kpi/kpi.scss?tag=ix-kpi&encapsulation=shadow","src/components/kpi/kpi.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'legacy/mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  flex-grow: 1;\n  height: $large-control-height;\n  border-radius: var(--theme-kpi--border-radius);\n  padding: 0.375rem $tiny-space;\n  min-width: 0;\n\n  span {\n    @include ellipsis;\n  }\n\n  .kpi-container {\n    display: flex;\n    height: 100%;\n    width: 100%;\n    border-block-end: 2px solid grey;\n\n    &.alarm {\n      border-block-end-color: var(--theme-color-alarm);\n    }\n\n    &.warning {\n      border-block-end-color: var(--theme-color-warning);\n    }\n\n    .kpi-label {\n      display: flex;\n      align-items: center;\n      color: var(--theme-kpi-display-label--color);\n      flex-grow: 1;\n      flex-shrink: 9999;\n\n      ix-icon {\n        margin-inline-end: $tiny-space;\n      }\n    }\n\n    .kpi-value-container {\n      display: flex;\n      align-items: flex-end;\n    }\n\n    .kpi-value {\n      @include text-xl;\n\n      color: var(--theme-kpi-display-value--color);\n    }\n\n    .kpi-unit {\n      margin-inline-start: $small-space;\n      color: var(--theme-kpi-display-units--color);\n    }\n\n    .kpi-label,\n    .kpi-unit {\n      margin-block-start: 0.125rem;\n    }\n  }\n\n  @include hover {\n    background-color: var(--theme-kpi-display--background--hover);\n  }\n\n  @include active {\n    background-color: var(--theme-kpi-display--background--active);\n  }\n\n  @include focus-visible {\n    outline: 1px solid var(--focus--border-color);\n  }\n}\n\n:host(.stacked) {\n  height: 3.75rem;\n\n  .kpi-container {\n    justify-content: center;\n    flex-wrap: wrap;\n\n    .kpi-label {\n      width: 100%;\n      justify-content: center;\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2024 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-kpi',\n  styleUrl: 'kpi.scss',\n  shadow: true,\n})\nexport class Kpi {\n  /**\n   *\n   */\n  @Prop() label: string;\n\n  /**\n   *\n   */\n  @Prop() value: string | number;\n\n  /**\n   *\n   */\n  @Prop() unit: string;\n\n  /**\n   *\n   */\n  @Prop() state: 'neutral' | 'warning' | 'alarm' = 'neutral';\n\n  /**\n   *\n   */\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  private getStateIcon() {\n    switch (this.state) {\n      case 'alarm':\n        return (\n          <ix-icon\n            color=\"kpi-display-icon--color\"\n            name={'alarm'}\n            size=\"16\"\n          ></ix-icon>\n        );\n\n      case 'warning':\n        return (\n          <ix-icon\n            color=\"kpi-display-icon--color\"\n            name={'warning'}\n            size=\"16\"\n          ></ix-icon>\n        );\n\n      default:\n        return '';\n    }\n  }\n\n  private getTooltipText() {\n    let tooltip = `${this.label}: ${this.value}`;\n\n    if (this.unit) {\n      tooltip = tooltip.concat(` ${this.unit}`);\n    }\n\n    return tooltip;\n  }\n\n  render() {\n    return (\n      <Host\n        title={this.getTooltipText()}\n        tabindex=\"1\"\n        class={{\n          stacked: this.orientation === 'vertical',\n        }}\n      >\n        <div\n          class={{\n            'kpi-container': true,\n            alarm: this.state === 'alarm',\n            warning: this.state === 'warning',\n          }}\n        >\n          <span class=\"kpi-label\">\n            {this.getStateIcon()}\n            <span class=\"kpi-label-text\">{this.label}</span>\n          </span>\n          <span class=\"kpi-value-container\">\n            <span class=\"kpi-value\">{this.value}</span>\n            {this.unit ? <span class=\"kpi-unit\">{this.unit}</span> : ''}\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAS,ygFACf,MAAAC,EAAeD,E,MCeFE,EAAG,M,kGAmBmC,U,iBAKA,Y,CAEzC,YAAAC,GACN,OAAQC,KAAKC,OACX,IAAK,QACH,OACEC,EAAA,WACEC,MAAM,0BACNC,KAAM,QACNC,KAAK,OAIX,IAAK,UACH,OACEH,EAAA,WACEC,MAAM,0BACNC,KAAM,UACNC,KAAK,OAIX,QACE,MAAO,G,CAIL,cAAAC,GACN,IAAIC,EAAU,GAAGP,KAAKQ,UAAUR,KAAKS,QAErC,GAAIT,KAAKU,KAAM,CACbH,EAAUA,EAAQI,OAAO,IAAIX,KAAKU,O,CAGpC,OAAOH,C,CAGT,MAAAK,GACE,OACEV,EAACW,EAAI,CAAAC,IAAA,2CACHC,MAAOf,KAAKM,iBACZU,SAAS,IACTC,MAAO,CACLC,QAASlB,KAAKmB,cAAgB,aAGhCjB,EAAA,OAAAY,IAAA,2CACEG,MAAO,CACL,gBAAiB,KACjBG,MAAOpB,KAAKC,QAAU,QACtBoB,QAASrB,KAAKC,QAAU,YAG1BC,EAAA,QAAAY,IAAA,2CAAMG,MAAM,aACTjB,KAAKD,eACNG,EAAA,QAAAY,IAAA,2CAAMG,MAAM,kBAAkBjB,KAAKQ,QAErCN,EAAA,QAAAY,IAAA,2CAAMG,MAAM,uBACVf,EAAA,QAAAY,IAAA,2CAAMG,MAAM,aAAajB,KAAKS,OAC7BT,KAAKU,KAAOR,EAAA,QAAMe,MAAM,YAAYjB,KAAKU,MAAe,K"}
+{"version":3,"names":["kpiCss","IxKpiStyle0","Kpi","getStateIcon","this","state","h","color","name","size","getTooltipText","tooltip","label","value","unit","concat","render","Host","key","title","tabindex","class","stacked","orientation","alarm","warning"],"sources":["src/components/kpi/kpi.scss?tag=ix-kpi&encapsulation=shadow","src/components/kpi/kpi.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'legacy/mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  flex-grow: 1;\n  height: $large-control-height;\n  border-radius: var(--theme-kpi--border-radius);\n  padding: 0.375rem $tiny-space;\n  min-width: 0;\n\n  span {\n    @include ellipsis;\n  }\n\n  .kpi-container {\n    display: flex;\n    height: 100%;\n    width: 100%;\n    border-block-end: 2px solid grey;\n\n    &.alarm {\n      border-block-end-color: var(--theme-color-alarm);\n    }\n\n    &.warning {\n      border-block-end-color: var(--theme-color-warning);\n    }\n\n    .kpi-label {\n      display: flex;\n      align-items: center;\n      color: var(--theme-kpi-display-label--color);\n      flex-grow: 1;\n      flex-shrink: 9999;\n\n      ix-icon {\n        margin-inline-end: $tiny-space;\n      }\n    }\n\n    .kpi-value-container {\n      display: flex;\n      align-items: flex-end;\n    }\n\n    .kpi-value {\n      @include text-xl;\n\n      color: var(--theme-kpi-display-value--color);\n    }\n\n    .kpi-unit {\n      margin-inline-start: $small-space;\n      color: var(--theme-kpi-display-units--color);\n    }\n\n    .kpi-label,\n    .kpi-unit {\n      margin-block-start: 0.125rem;\n    }\n  }\n\n  @include hover {\n    background-color: var(--theme-kpi-display--background--hover);\n  }\n\n  @include active {\n    background-color: var(--theme-kpi-display--background--active);\n  }\n\n  @include focus-visible {\n    outline: 1px solid var(--focus--border-color);\n  }\n}\n\n:host(.stacked) {\n  height: 3.75rem;\n\n  .kpi-container {\n    justify-content: center;\n    flex-wrap: wrap;\n\n    .kpi-label {\n      width: 100%;\n      justify-content: center;\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2024 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-kpi',\n  styleUrl: 'kpi.scss',\n  shadow: true,\n})\nexport class Kpi {\n  /**\n   *\n   */\n  @Prop() label?: string;\n\n  /**\n   *\n   */\n  @Prop() value?: string | number;\n\n  /**\n   *\n   */\n  @Prop() unit?: string;\n\n  /**\n   *\n   */\n  @Prop() state: 'neutral' | 'warning' | 'alarm' = 'neutral';\n\n  /**\n   *\n   */\n  @Prop() orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  private getStateIcon() {\n    switch (this.state) {\n      case 'alarm':\n        return (\n          <ix-icon\n            color=\"kpi-display-icon--color\"\n            name={'alarm'}\n            size=\"16\"\n          ></ix-icon>\n        );\n\n      case 'warning':\n        return (\n          <ix-icon\n            color=\"kpi-display-icon--color\"\n            name={'warning'}\n            size=\"16\"\n          ></ix-icon>\n        );\n\n      default:\n        return '';\n    }\n  }\n\n  private getTooltipText() {\n    let tooltip = `${this.label}: ${this.value}`;\n\n    if (this.unit) {\n      tooltip = tooltip.concat(` ${this.unit}`);\n    }\n\n    return tooltip;\n  }\n\n  render() {\n    return (\n      <Host\n        title={this.getTooltipText()}\n        tabindex=\"1\"\n        class={{\n          stacked: this.orientation === 'vertical',\n        }}\n      >\n        <div\n          class={{\n            'kpi-container': true,\n            alarm: this.state === 'alarm',\n            warning: this.state === 'warning',\n          }}\n        >\n          <span class=\"kpi-label\">\n            {this.getStateIcon()}\n            <span class=\"kpi-label-text\">{this.label}</span>\n          </span>\n          <span class=\"kpi-value-container\">\n            <span class=\"kpi-value\">{this.value}</span>\n            {this.unit ? <span class=\"kpi-unit\">{this.unit}</span> : ''}\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAS,ygFACf,MAAAC,EAAeD,E,MCeFE,EAAG,M,kGAmBmC,U,iBAKA,Y,CAEzC,YAAAC,GACN,OAAQC,KAAKC,OACX,IAAK,QACH,OACEC,EAAA,WACEC,MAAM,0BACNC,KAAM,QACNC,KAAK,OAIX,IAAK,UACH,OACEH,EAAA,WACEC,MAAM,0BACNC,KAAM,UACNC,KAAK,OAIX,QACE,MAAO,G,CAIL,cAAAC,GACN,IAAIC,EAAU,GAAGP,KAAKQ,UAAUR,KAAKS,QAErC,GAAIT,KAAKU,KAAM,CACbH,EAAUA,EAAQI,OAAO,IAAIX,KAAKU,O,CAGpC,OAAOH,C,CAGT,MAAAK,GACE,OACEV,EAACW,EAAI,CAAAC,IAAA,2CACHC,MAAOf,KAAKM,iBACZU,SAAS,IACTC,MAAO,CACLC,QAASlB,KAAKmB,cAAgB,aAGhCjB,EAAA,OAAAY,IAAA,2CACEG,MAAO,CACL,gBAAiB,KACjBG,MAAOpB,KAAKC,QAAU,QACtBoB,QAASrB,KAAKC,QAAU,YAG1BC,EAAA,QAAAY,IAAA,2CAAMG,MAAM,aACTjB,KAAKD,eACNG,EAAA,QAAAY,IAAA,2CAAMG,MAAM,kBAAkBjB,KAAKQ,QAErCN,EAAA,QAAAY,IAAA,2CAAMG,MAAM,uBACVf,EAAA,QAAAY,IAAA,2CAAMG,MAAM,aAAajB,KAAKS,OAC7BT,KAAKU,KAAOR,EAAA,QAAMe,MAAM,YAAYjB,KAAKU,MAAe,K"}

package/dist/siemens-ix/{p-484aa96b.js → p-6ccf39dd.js}

@@ -1,2 +1,2 @@
-import{r as t,c as e,f as o,h as s,g as i,H as n}from"./p-5806df2b.js";const a=".text-xs{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text)}.text-s{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text)}.text-default{-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)}.text-default-single{-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)}.text-default-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-title-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text)}.text-l{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text)}.text-l-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-title-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text)}.text-h2{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text)}.text-xl{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text)}a{color:var(--theme-color-primary)}:host{display:block;background-color:var(--theme-nav-overlay--background);padding:0.75rem 1rem 1rem 2rem;flex-grow:1;position:absolute;width:100%;height:100%}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .settings-header{display:flex;justify-content:space-between;flex-direction:row;align-items:center;height:2rem;margin-bottom:0.5rem}:host .settings-header h2{color:var(--theme-nav-overlay-header--color);margin-bottom:1rem}:host ix-tabs{margin-bottom:1.5rem}:host .settings-tabs{margin-bottom:1.5rem}";const r=a;const l=class{constructor(o){t(this,o);this.close=e(this,"close",7);this.activeTabLabel=undefined;this.label="Settings";this.show=false;this.items=undefined}updateTab(t){h(this,t)}componentWillLoad(){c(this)}componentDidLoad(){o(this.el)}render(){return s(g,{key:"9ec0ad1f36b3faf9e1c688489b26e10b8cf0c982",context:this})}get el(){return i(this)}static get watchers(){return{activeTabLabel:["updateTab"]}}};l.style=r;function m(t){return Array.from(t.el.querySelectorAll(t instanceof l?"ix-menu-settings-item":"ix-menu-about-item"))}function h(t,e){t.activeTabLabel=e;t.items.forEach((e=>{e.style.display="none";if(e.label===t.activeTabLabel){e.style.display="block"}}))}function c(t){t.items=m(t);if(t.items.length){h(t,t.activeTabLabel||t.items[0].label)}t.items.forEach((e=>{e.addEventListener("labelChange",(e=>{t.items=m(t);if(e.detail.oldLabel===t.activeTabLabel){t.activeTabLabel=e.detail.newLabel}}))}))}const f=t=>t.items.map((({label:e})=>s("ix-tab-item",{selected:e===t.activeTabLabel,onClick:()=>h(t,e)},e)));const g=({context:t})=>{const e=t.items.findIndex((e=>e.label===t.activeTabLabel));return s(n,{slot:t instanceof l?"ix-menu-settings":"ix-menu-about",class:{show:t.show}},s("div",{class:t instanceof l?"settings-header":"about-header"},s("h2",{class:"text-h2"},t.label),s("ix-icon-button",{ghost:true,size:"24",icon:"close",onClick:e=>t.close.emit({name:t instanceof l?"ix-menu-settings":"ix-menu-about",nativeEvent:e})})),s("ix-tabs",{selected:e!==-1?e:0},f(t)),s("slot",null))};export{g as M,l as a,c as i,h as s};
-//# sourceMappingURL=p-484aa96b.js.map
+import{r as t,c as e,f as o,h as s,g as i,H as n}from"./p-5806df2b.js";const a=".text-xs{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text)}.text-s{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text)}.text-default{-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)}.text-default-single{-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)}.text-default-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}.text-default-title-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text)}.text-l{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text)}.text-l-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-title-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text)}.text-h2{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text)}.text-xl{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text)}a{color:var(--theme-color-primary)}:host{display:block;background-color:var(--theme-nav-overlay--background);padding:0.75rem 1rem 1rem 2rem;flex-grow:1;position:absolute;width:100%;height:100%}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .settings-header{display:flex;justify-content:space-between;flex-direction:row;align-items:center;height:2rem;margin-bottom:0.5rem}:host .settings-header h2{color:var(--theme-nav-overlay-header--color);margin-bottom:1rem}:host ix-tabs{margin-bottom:1.5rem}:host .settings-tabs{margin-bottom:1.5rem}";const r=a;const l=class{constructor(o){t(this,o);this.close=e(this,"close",7);this.activeTabLabel=undefined;this.label="Settings";this.show=false;this.items=undefined}updateTab(t){h(this,t)}componentWillLoad(){c(this)}componentDidLoad(){o(this.el)}render(){return s(g,{key:"e5a0d1cc238a2c88d9a0c572fbfecefd3a589c38",context:this})}get el(){return i(this)}static get watchers(){return{activeTabLabel:["updateTab"]}}};l.style=r;function m(t){return Array.from(t.el.querySelectorAll(t instanceof l?"ix-menu-settings-item":"ix-menu-about-item"))}function h(t,e){t.activeTabLabel=e;t.items.forEach((e=>{e.style.display="none";if(e.label===t.activeTabLabel){e.style.display="block"}}))}function c(t){t.items=m(t);if(t.items.length){const e=t.activeTabLabel||t.items[0].label;if(e){h(t,e)}}t.items.forEach((e=>{e.addEventListener("labelChange",(e=>{t.items=m(t);if(e.detail.oldLabel===t.activeTabLabel){t.activeTabLabel=e.detail.newLabel}}))}))}const f=t=>t.items.map((({label:e})=>s("ix-tab-item",{selected:e===t.activeTabLabel,onClick:()=>{if(e){h(t,e)}}},e)));const g=({context:t})=>{const e=t.items.findIndex((e=>e.label===t.activeTabLabel));return s(n,{slot:t instanceof l?"ix-menu-settings":"ix-menu-about",class:{show:t.show}},s("div",{class:t instanceof l?"settings-header":"about-header"},s("h2",{class:"text-h2"},t.label),s("ix-icon-button",{ghost:true,size:"24",icon:"close",onClick:e=>t.close.emit({name:t instanceof l?"ix-menu-settings":"ix-menu-about",nativeEvent:e})})),s("ix-tabs",{selected:e!==-1?e:0},f(t)),s("slot",null))};export{g as M,l as a,c as i,h as s};
+//# sourceMappingURL=p-6ccf39dd.js.map

package/dist/siemens-ix/p-6ccf39dd.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["menuSettingsCss","IxMenuSettingsStyle0","MenuSettings","updateTab","label","setTab","this","componentWillLoad","initialize","componentDidLoad","forceUpdate","el","render","h","MenuTabs","key","context","getItems","Array","from","querySelectorAll","activeTabLabel","items","forEach","i","style","display","length","selectedLabel","item","addEventListener","e","detail","oldLabel","newLabel","getTabItems","map","selected","onClick","selectedIndex","findIndex","Host","slot","class","show","ghost","size","icon","close","emit","name","nativeEvent"],"sources":["src/components/menu-settings/menu-settings.scss?tag=ix-menu-settings&encapsulation=shadow","src/components/menu-settings/menu-settings.tsx","src/components/utils/menu-tabs/menu-tabs-utils.ts","src/components/utils/menu-tabs/menu-tabs-fc.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'legacy/fonts';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: block;\n  background-color: var(--theme-nav-overlay--background);\n  padding: $medium-space $default-space $default-space $x-large-space;\n  flex-grow: 1;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n\n  .settings-header {\n    display: flex;\n    justify-content: space-between;\n    flex-direction: row;\n    align-items: center;\n    height: $x-large-space;\n    margin-bottom: $small-space;\n\n    h2 {\n      color: var(--theme-nav-overlay-header--color);\n      margin-bottom: 1rem;\n    }\n  }\n\n  ix-tabs {\n    margin-bottom: 1.5rem;\n  }\n\n  .settings-tabs {\n    margin-bottom: $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  forceUpdate,\n  h,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { MenuTabs } from '../utils/menu-tabs/menu-tabs-fc';\nimport {\n  CustomCloseEvent,\n  initialize,\n  setTab,\n} from '../utils/menu-tabs/menu-tabs-utils';\n\n@Component({\n  tag: 'ix-menu-settings',\n  styleUrl: 'menu-settings.scss',\n  shadow: true,\n})\nexport class MenuSettings {\n  @Element() el!: HTMLIxMenuSettingsElement;\n\n  /**\n   * Active tab\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable\n  @Prop({ mutable: true }) activeTabLabel?: string;\n\n  /**\n   * Label of first tab\n   */\n  @Prop() label = 'Settings';\n\n  /**\n   * Internal\n   */\n  @Prop() show = false;\n\n  /**\n   * Popover closed\n   */\n  @Event() close!: EventEmitter<CustomCloseEvent>;\n\n  @State() items!: HTMLIxMenuSettingsItemElement[];\n\n  @Watch('activeTabLabel')\n  updateTab(label: string) {\n    setTab(this, label);\n  }\n\n  componentWillLoad() {\n    initialize(this);\n  }\n\n  componentDidLoad() {\n    forceUpdate(this.el);\n  }\n\n  render() {\n    return <MenuTabs context={this} />;\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 { MenuAbout } from '../../menu-about/menu-about';\nimport { MenuSettings } from '../../menu-settings/menu-settings';\n\nfunction getItems(\n  context: MenuSettings | MenuAbout\n): HTMLIxMenuSettingsItemElement[] | HTMLIxMenuAboutItemElement[] {\n  return Array.from(\n    context.el.querySelectorAll(\n      context instanceof MenuSettings\n        ? 'ix-menu-settings-item'\n        : 'ix-menu-about-item'\n    )\n  );\n}\n\nexport function setTab(context: MenuSettings | MenuAbout, label: string) {\n  context.activeTabLabel = label;\n  context.items.forEach((i) => {\n    i.style.display = 'none';\n    if (i.label === context.activeTabLabel) {\n      i.style.display = 'block';\n    }\n  });\n}\n\nexport function initialize(context: MenuSettings | MenuAbout) {\n  context.items = getItems(context);\n\n  if (context.items.length) {\n    const selectedLabel = context.activeTabLabel || context.items[0].label;\n    if (selectedLabel) {\n      setTab(context, selectedLabel);\n    }\n  }\n\n  context.items.forEach((item) => {\n    item.addEventListener('labelChange', (e: CustomEvent) => {\n      context.items = getItems(context);\n\n      if (e.detail.oldLabel === context.activeTabLabel) {\n        context.activeTabLabel = e.detail.newLabel;\n      }\n    });\n  });\n}\n\nexport interface CustomLabelChangeEvent {\n  name: string;\n  oldLabel: string;\n  newLabel: string;\n}\n\nexport interface CustomCloseEvent {\n  nativeEvent: MouseEvent;\n  name: string;\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 { FunctionalComponent, h, Host } from '@stencil/core';\nimport { setTab } from './menu-tabs-utils';\nimport { MenuAbout } from '../../menu-about/menu-about';\nimport { MenuSettings } from '../../menu-settings/menu-settings';\n\ninterface MenuTabsProps {\n  context: MenuSettings | MenuAbout;\n}\n\nconst getTabItems = (context: MenuSettings | MenuAbout) => {\n  return context.items.map(({ label }) => {\n    return (\n      <ix-tab-item\n        selected={label === context.activeTabLabel}\n        onClick={() => {\n          if (label) {\n            setTab(context, label);\n          }\n        }}\n      >\n        {label}\n      </ix-tab-item>\n    );\n  });\n};\n\nexport const MenuTabs: FunctionalComponent<MenuTabsProps> = ({ context }) => {\n  const selectedIndex = context.items.findIndex(\n    (item) => item.label === context.activeTabLabel\n  );\n  return (\n    <Host\n      slot={\n        context instanceof MenuSettings ? 'ix-menu-settings' : 'ix-menu-about'\n      }\n      class={{\n        show: context.show,\n      }}\n    >\n      <div\n        class={\n          context instanceof MenuSettings ? 'settings-header' : 'about-header'\n        }\n      >\n        <h2 class=\"text-h2\">{context.label}</h2>\n        <ix-icon-button\n          ghost\n          size=\"24\"\n          icon={'close'}\n          onClick={(e) =>\n            context.close.emit({\n              name:\n                context instanceof MenuSettings\n                  ? 'ix-menu-settings'\n                  : 'ix-menu-about',\n              nativeEvent: e,\n            })\n          }\n        ></ix-icon-button>\n      </div>\n      <ix-tabs selected={selectedIndex !== -1 ? selectedIndex : 0}>\n        {getTabItems(context)}\n      </ix-tabs>\n      <slot></slot>\n    </Host>\n  );\n};\n"],"mappings":"uEAAA,MAAMA,EAAkB,ujIACxB,MAAAC,EAAeD,E,MC+BFE,EAAY,M,+FAYP,W,UAKD,M,qBAUf,SAAAC,CAAUC,GACRC,EAAOC,KAAMF,E,CAGf,iBAAAG,GACEC,EAAWF,K,CAGb,gBAAAG,GACEC,EAAYJ,KAAKK,G,CAGnB,MAAAC,GACE,OAAOC,EAACC,EAAQ,CAAAC,IAAA,2CAACC,QAASV,M,gGC5D9B,SAASW,EACPD,GAEA,OAAOE,MAAMC,KACXH,EAAQL,GAAGS,iBACTJ,aAAmBd,EACf,wBACA,sBAGV,C,SAEgBG,EAAOW,EAAmCZ,GACxDY,EAAQK,eAAiBjB,EACzBY,EAAQM,MAAMC,SAASC,IACrBA,EAAEC,MAAMC,QAAU,OAClB,GAAIF,EAAEpB,QAAUY,EAAQK,eAAgB,CACtCG,EAAEC,MAAMC,QAAU,O,IAGxB,C,SAEgBlB,EAAWQ,GACzBA,EAAQM,MAAQL,EAASD,GAEzB,GAAIA,EAAQM,MAAMK,OAAQ,CACxB,MAAMC,EAAgBZ,EAAQK,gBAAkBL,EAAQM,MAAM,GAAGlB,MACjE,GAAIwB,EAAe,CACjBvB,EAAOW,EAASY,E,EAIpBZ,EAAQM,MAAMC,SAASM,IACrBA,EAAKC,iBAAiB,eAAgBC,IACpCf,EAAQM,MAAQL,EAASD,GAEzB,GAAIe,EAAEC,OAAOC,WAAajB,EAAQK,eAAgB,CAChDL,EAAQK,eAAiBU,EAAEC,OAAOE,Q,IAEpC,GAEN,CCnCA,MAAMC,EAAenB,GACZA,EAAQM,MAAMc,KAAI,EAAGhC,WAExBS,EAAA,eACEwB,SAAUjC,IAAUY,EAAQK,eAC5BiB,QAAS,KACP,GAAIlC,EAAO,CACTC,EAAOW,EAASZ,E,IAInBA,K,MAMIU,EAA+C,EAAGE,cAC7D,MAAMuB,EAAgBvB,EAAQM,MAAMkB,WACjCX,GAASA,EAAKzB,QAAUY,EAAQK,iBAEnC,OACER,EAAC4B,EAAI,CACHC,KACE1B,aAAmBd,EAAe,mBAAqB,gBAEzDyC,MAAO,CACLC,KAAM5B,EAAQ4B,OAGhB/B,EAAA,OACE8B,MACE3B,aAAmBd,EAAe,kBAAoB,gBAGxDW,EAAA,MAAI8B,MAAM,WAAW3B,EAAQZ,OAC7BS,EAAA,kBACEgC,MAAK,KACLC,KAAK,KACLC,KAAM,QACNT,QAAUP,GACRf,EAAQgC,MAAMC,KAAK,CACjBC,KACElC,aAAmBd,EACf,mBACA,gBACNiD,YAAapB,OAKrBlB,EAAA,WAASwB,SAAUE,KAAmB,EAAIA,EAAgB,GACvDJ,EAAYnB,IAEfH,EAAA,aACK,S"}

package/dist/siemens-ix/{p-66178fe6.entry.js → p-6f3b0a66.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,d as r,h as e,F as a,H as o,g as i,c as s}from"./p-5806df2b.js";import{B as n}from"./p-35e14912.js";import{c as l,h as c}from"./p-345e1c73.js";import{m as d}from"./p-ce563a48.js";const b=":host{display:flex;position:relative;width:-moz-fit-content;width:fit-content}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .avatar{display:flex;align-items:center}:host .avatar>.avatar-image{height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px}:host .avatar>.avatar-initials{display:flex;align-items:center;justify-content:center;height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px;background-color:var(--theme-avatar--background);color:var(--theme-avatar--color)}:host .avatar #avatar-path-background{fill:var(--theme-avatar--background)}:host .avatar #avatar-path-person{fill:var(--theme-avatar--color)}:host .user-info{display:flex;flex-direction:row;position:relative;height:2.5rem;padding:1rem;width:12.75rem;min-width:12.75rem;max-width:12.75rem;gap:1rem}:host .user-info .avatar{width:2rem;pointer-events:none}:host .user-info .user{display:flex;position:relative;flex-direction:column;justify-content:center;max-width:10rem;width:100%;overflow:hidden}:host .user-info .username{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .user-info .extra{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host(.avatar-button) button{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem;padding:0px;border-radius:100px !important}:host(.avatar-button) .btn-invisible-primary{border-radius:var(--theme-btn--border-radius)}:host(.avatar-button) .btn-invisible-primary,:host(.avatar-button) .btn-invisible-primary.focus,:host(.avatar-button) .btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host(.avatar-button) .btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled):active,:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled):active,:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}:host(.avatar-button) .avatar{transform:scale(0.8)}";const h=b;function v(t){const{initials:r}=t;if(r){return e("div",{class:"avatar-initials"},r)}return e("svg",{class:"avatar-image",xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",viewBox:"0 0 32 32"},e("g",{fill:"none","fill-rule":"evenodd"},e("path",{id:"avatar-path-background",d:"M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n          16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z"}),e("path",{id:"avatar-path-person",d:"M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n        6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n        9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n        6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z"})))}function u(t){return e("div",{class:"avatar"},t.image?e("img",{src:t.image,class:"avatar-image"}):e(v,{initials:t.initials}))}function m(t){return e(a,null,e("div",{class:"user-info",onClick:t=>t.preventDefault()},e(u,{image:t.image,initials:t.initials}),e("div",{class:"user"},e("div",{class:"username"},t.userName),t.extra&&e("ix-typography",{class:"extra",color:"soft"},t.extra))))}const p=class{constructor(r){t(this,r);this.image=undefined;this.initials=undefined;this.username=undefined;this.extra=undefined;this.isClosestApplicationHeader=false;this.hasSlottedElements=false}componentWillLoad(){const t=l("ix-application-header",this.hostElement);this.isClosestApplicationHeader=t!==null}slottedChanged(){this.hasSlottedElements=c(this.slotElement)}resolveAvatarTrigger(){return new Promise(((t,e)=>{r((()=>{const r=this.hostElement.shadowRoot.querySelector("button");if(r){t(r)}else{e(new Error("ix-avatar - trigger element not found"))}}))}))}onDropdownClick(t){if(t.target===this.dropdownElement){t.preventDefault()}}render(){if(this.isClosestApplicationHeader){return e(o,{slot:"ix-application-header-avatar",class:"avatar-button"},e(n,{disabled:false,ghost:true,iconOval:false,icon:undefined,iconOnly:false,loading:false,outline:false,selected:false,type:"button",variant:"primary"},e(u,{image:this.image,initials:this.initials})),e("ix-dropdown",{ref:t=>this.dropdownElement=t,trigger:this.resolveAvatarTrigger(),class:"avatar-dropdown",onClick:t=>this.onDropdownClick(t)},this.username&&e(a,null,e(m,{extra:this.extra,image:this.image,initials:this.initials,userName:this.username}),this.hasSlottedElements&&e("ix-divider",{onClick:t=>t.preventDefault()})),e("slot",{onSlotchange:()=>this.slottedChanged(),ref:t=>this.slotElement=t})))}return e(o,null,e(u,{image:this.image,initials:this.initials}))}get hostElement(){return i(this)}};p.style=h;const g=":host{display:block;color:var(--theme-color-std-text)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}";const f=g;const k=class{constructor(r){t(this,r);this.itemClick=s(this,"itemClick",7);this.dropdownItemRef=d();this.icon=undefined;this.label=undefined}async getDropdownItemElement(){return this.dropdownItemRef.waitForCurrent()}render(){return e("ix-dropdown-item",{key:"c4025c590bebeebd3a3bdf90cd2fd5a0cb1472a4",ref:this.dropdownItemRef,icon:this.icon,label:this.label,onClick:t=>this.itemClick.emit(t)})}get hostElement(){return i(this)}};k.style=f;export{p as ix_avatar,k as ix_menu_avatar_item};
-//# sourceMappingURL=p-66178fe6.entry.js.map
+import{r as t,d as r,h as a,F as e,H as o,g as i,c as s}from"./p-5806df2b.js";import{B as n}from"./p-35e14912.js";import{c as l,h as d}from"./p-345e1c73.js";import{m as c}from"./p-ce563a48.js";const b=":host{display:flex;position:relative;width:-moz-fit-content;width:fit-content}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .avatar{display:flex;align-items:center}:host .avatar>.avatar-image{height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px}:host .avatar>.avatar-initials{display:flex;align-items:center;justify-content:center;height:2rem;width:2rem;min-height:2rem;min-width:2rem;border-radius:100px;background-color:var(--theme-avatar--background);color:var(--theme-avatar--color)}:host .avatar #avatar-path-background{fill:var(--theme-avatar--background)}:host .avatar #avatar-path-person{fill:var(--theme-avatar--color)}:host .user-info{display:flex;flex-direction:row;position:relative;height:2.5rem;padding:1rem;width:12.75rem;min-width:12.75rem;max-width:12.75rem;gap:1rem}:host .user-info .avatar{width:2rem;pointer-events:none}:host .user-info .user{display:flex;position:relative;flex-direction:column;justify-content:center;max-width:10rem;width:100%;overflow:hidden}:host .user-info .username{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .user-info .extra{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host(.avatar-button) button{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem;padding:0px;border-radius:100px !important}:host(.avatar-button) .btn-invisible-primary{border-radius:var(--theme-btn--border-radius)}:host(.avatar-button) .btn-invisible-primary,:host(.avatar-button) .btn-invisible-primary.focus,:host(.avatar-button) .btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host(.avatar-button) .btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled):active,:host(.avatar-button) .btn-invisible-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled):active,:host(.avatar-button) .btn-invisible-primary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}:host(.avatar-button) .avatar{transform:scale(0.8)}";const h=b;function v(t){const{initials:r}=t;if(r){return a("div",{class:"avatar-initials"},r)}return a("svg",{class:"avatar-image",xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",viewBox:"0 0 32 32"},a("g",{fill:"none","fill-rule":"evenodd"},a("path",{id:"avatar-path-background",d:"M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n          16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z"}),a("path",{id:"avatar-path-person",d:"M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n        6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n        9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n        6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z"})))}function u(t){return a("div",{class:"avatar"},t.image?a("img",{src:t.image,class:"avatar-image"}):a(v,{initials:t.initials}))}function m(t){return a(e,null,a("div",{class:"user-info",onClick:t=>t.preventDefault()},a(u,{image:t.image,initials:t.initials}),a("div",{class:"user"},a("div",{class:"username"},t.userName),t.extra&&a("ix-typography",{class:"extra",color:"soft"},t.extra))))}const p=class{constructor(r){t(this,r);this.image=undefined;this.initials=undefined;this.username=undefined;this.extra=undefined;this.isClosestApplicationHeader=false;this.hasSlottedElements=false}componentWillLoad(){const t=l("ix-application-header",this.hostElement);this.isClosestApplicationHeader=t!==null}slottedChanged(){this.hasSlottedElements=d(this.slotElement)}resolveAvatarTrigger(){return new Promise(((t,a)=>{r((()=>{const r=this.hostElement.shadowRoot.querySelector("button");if(r){t(r)}else{a(new Error("ix-avatar - trigger element not found"))}}))}))}onDropdownClick(t){if(t.target===this.dropdownElement){t.preventDefault()}}render(){if(this.isClosestApplicationHeader){return a(o,{slot:"ix-application-header-avatar",class:"avatar-button"},a(n,{disabled:false,ghost:true,iconOval:false,icon:undefined,iconOnly:false,loading:false,outline:false,selected:false,type:"button",variant:"primary"},a(u,{image:this.image,initials:this.initials})),a("ix-dropdown",{ref:t=>this.dropdownElement=t,trigger:this.resolveAvatarTrigger(),class:"avatar-dropdown",onClick:t=>this.onDropdownClick(t)},this.username&&a(e,null,a(m,{extra:this.extra,image:this.image,initials:this.initials,userName:this.username}),this.hasSlottedElements&&a("ix-divider",{onClick:t=>t.preventDefault()})),a("slot",{onSlotchange:()=>this.slottedChanged(),ref:t=>this.slotElement=t})))}return a(o,null,a(u,{image:this.image,initials:this.initials}))}get hostElement(){return i(this)}};p.style=h;const g=":host{display:block;color:var(--theme-color-std-text)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}";const f=g;const k=class{constructor(r){t(this,r);this.itemClick=s(this,"itemClick",7);this.dropdownItemRef=c();this.icon=undefined;this.label=undefined}async getDropdownItemElement(){return this.dropdownItemRef.waitForCurrent()}render(){return a("ix-dropdown-item",{key:"ab0a400a5c753a7dd76b30b28cf1db867b97773a",ref:this.dropdownItemRef,icon:this.icon,label:this.label,onClick:t=>this.itemClick.emit(t)})}get hostElement(){return i(this)}};k.style=f;export{p as ix_avatar,k as ix_menu_avatar_item};
+//# sourceMappingURL=p-6f3b0a66.entry.js.map

package/dist/siemens-ix/{p-66178fe6.entry.js.map → p-6f3b0a66.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["avatarCss","IxAvatarStyle0","DefaultAvatar","props","initials","h","class","xmlns","width","height","viewBox","fill","id","d","AvatarImage","image","src","UserInfo","Fragment","onClick","event","preventDefault","userName","extra","color","Avatar","componentWillLoad","closest","closestElement","this","hostElement","isClosestApplicationHeader","slottedChanged","hasSlottedElements","slotElement","resolveAvatarTrigger","Promise","resolve","reject","readTask","button","shadowRoot","querySelector","Error","onDropdownClick","target","dropdownElement","render","Host","slot","BaseButton","disabled","ghost","iconOval","icon","undefined","iconOnly","loading","outline","selected","type","variant","ref","trigger","e","username","onSlotchange","menuAvatarItemCss","IxMenuAvatarItemStyle0","MenuAvatarItem","dropdownItemRef","makeRef","getDropdownItemElement","waitForCurrent","key","label","itemClick","emit"],"sources":["src/components/avatar/avatar.scss?tag=ix-avatar&encapsulation=shadow","src/components/avatar/avatar.tsx","src/components/menu-avatar-item/menu-avatar-item.scss?tag=ix-menu-avatar-item&encapsulation=shadow","src/components/menu-avatar-item/menu-avatar-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/text-truncation';\n@import 'mixins/hover';\n@import './../button/button-mixin';\n@import 'mixins/scrollbar';\n\n:host {\n  @include scrollbar();\n  display: flex;\n  position: relative;\n  width: fit-content;\n\n  .avatar {\n    display: flex;\n    align-items: center;\n\n    > .avatar-image {\n      height: 2rem;\n      width: 2rem;\n      min-height: 2rem;\n      min-width: 2rem;\n      border-radius: 100px;\n    }\n\n    > .avatar-initials {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 2rem;\n      width: 2rem;\n      min-height: 2rem;\n      min-width: 2rem;\n      border-radius: 100px;\n      background-color: var(--theme-avatar--background);\n      color: var(--theme-avatar--color);\n    }\n\n    #avatar-path-background {\n      fill: var(--theme-avatar--background);\n    }\n\n    #avatar-path-person {\n      fill:var(--theme-avatar--color);\n    }\n  }\n}\n\n:host {\n  .user-info {\n    display: flex;\n    flex-direction: row;\n    position: relative;\n    height: 2.5rem;\n    padding: 1rem;\n    width: 12.75rem;\n    min-width: 12.75rem;\n    max-width: 12.75rem;\n\n    gap: 1rem;\n\n    .avatar {\n      width: 2rem;\n      pointer-events: none;\n    }\n\n    .user {\n      display: flex;\n      position: relative;\n      flex-direction: column;\n      justify-content: center;\n      max-width: 10rem;\n      width: 100%;\n      overflow: hidden;\n    }\n\n    .username {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .extra {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n}\n\n:host(.avatar-button) {\n  button {\n    @include btn-base;\n    padding: 0px;\n\n    border-radius: 100px !important;\n  }\n\n  @include btn-base-variant('invisible-primary', false);\n\n  .avatar {\n    transform: scale(0.8);\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  Fragment,\n  h,\n  Host,\n  Prop,\n  readTask,\n  State,\n} from '@stencil/core';\nimport { BaseButton } from '../button/base-button';\nimport { closestElement, hasSlottedElements } from '../utils/shadow-dom';\n\nfunction DefaultAvatar(props: { initials?: string }) {\n  const { initials } = props;\n\n  if (initials) {\n    return <div class={'avatar-initials'}>{initials}</div>;\n  }\n\n  return (\n    <svg\n      class={'avatar-image'}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n      viewBox=\"0 0 32 32\"\n    >\n      <g fill=\"none\" fill-rule=\"evenodd\">\n        <path\n          id=\"avatar-path-background\"\n          d=\"M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n          16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z\"\n        />\n        <path\n          id=\"avatar-path-person\"\n          d=\"M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n        6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n        9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n        6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z\"\n        />\n      </g>\n    </svg>\n  );\n}\n\nfunction AvatarImage(props: { image?: string; initials?: string }) {\n  return (\n    <div class=\"avatar\">\n      {props.image ? (\n        <img src={props.image} class=\"avatar-image\"></img>\n      ) : (\n        <DefaultAvatar initials={props.initials} />\n      )}\n    </div>\n  );\n}\n\nfunction UserInfo(props: {\n  image?: string;\n  initials?: string;\n  userName: string;\n  extra?: string;\n}) {\n  return (\n    <Fragment>\n      <div class=\"user-info\" onClick={(event) => event.preventDefault()}>\n        <AvatarImage image={props.image} initials={props.initials} />\n        <div class=\"user\">\n          <div class=\"username\">{props.userName}</div>\n          {props.extra && (\n            <ix-typography class=\"extra\" color={'soft'}>\n              {props.extra}\n            </ix-typography>\n          )}\n        </div>\n      </div>\n    </Fragment>\n  );\n}\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-avatar',\n  styleUrl: 'avatar.scss',\n  shadow: true,\n})\nexport class Avatar {\n  @Element() hostElement!: HTMLIxAvatarElement;\n\n  /**\n   * Display an avatar image\n   *\n   */\n  @Prop() image?: string;\n\n  /**\n   * Display the initials of the user. Will be overwritten by image\n   *\n   */\n  @Prop() initials?: string;\n\n  /**\n   * If set an info card displaying the username will be placed inside the dropdown.\n   * Note: Only working if avatar is part of the ix-application-header\n   *\n   * @since 2.1.0\n   */\n  @Prop() username?: string;\n\n  /**\n   * Optional description text that will be displayed underneath the username.\n   * Note: Only working if avatar is part of the ix-application-header\n   *\n   * @since 2.1.0\n   */\n  @Prop() extra?: string;\n\n  @State() isClosestApplicationHeader = false;\n  @State() hasSlottedElements = false;\n\n  private slotElement?: HTMLSlotElement;\n  private dropdownElement?: HTMLIxDropdownElement;\n\n  componentWillLoad() {\n    const closest = closestElement('ix-application-header', this.hostElement);\n    this.isClosestApplicationHeader = closest !== null;\n  }\n\n  private slottedChanged() {\n    this.hasSlottedElements = hasSlottedElements(this.slotElement);\n  }\n\n  private resolveAvatarTrigger() {\n    return new Promise<HTMLElement>((resolve, reject) => {\n      readTask(() => {\n        const button = this.hostElement.shadowRoot!.querySelector('button');\n        if (button) {\n          resolve(button);\n        } else {\n          reject(new Error('ix-avatar - trigger element not found'));\n        }\n      });\n    });\n  }\n\n  private onDropdownClick(event: MouseEvent) {\n    if (event.target === this.dropdownElement) {\n      event.preventDefault();\n    }\n  }\n\n  render() {\n    if (this.isClosestApplicationHeader) {\n      return (\n        <Host slot=\"ix-application-header-avatar\" class={'avatar-button'}>\n          <BaseButton\n            disabled={false}\n            ghost={true}\n            iconOval={false}\n            icon={undefined}\n            iconOnly={false}\n            loading={false}\n            outline={false}\n            selected={false}\n            type=\"button\"\n            variant=\"primary\"\n          >\n            <AvatarImage image={this.image} initials={this.initials} />\n          </BaseButton>\n          <ix-dropdown\n            ref={(ref: HTMLIxDropdownElement) => (this.dropdownElement = ref)}\n            trigger={this.resolveAvatarTrigger()}\n            class=\"avatar-dropdown\"\n            onClick={(e) => this.onDropdownClick(e)}\n          >\n            {this.username && (\n              <Fragment>\n                <UserInfo\n                  extra={this.extra}\n                  image={this.image}\n                  initials={this.initials}\n                  userName={this.username}\n                />\n                {this.hasSlottedElements && (\n                  <ix-divider onClick={(e) => e.preventDefault()}></ix-divider>\n                )}\n              </Fragment>\n            )}\n            <slot\n              onSlotchange={() => this.slottedChanged()}\n              ref={(ref: HTMLSlotElement) => (this.slotElement = ref)}\n            ></slot>\n          </ix-dropdown>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <AvatarImage image={this.image} initials={this.initials} />\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@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: block;\n  color: var(--theme-color-std-text);\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  Method,\n  Prop,\n} from '@stencil/core';\nimport { DropdownItemWrapper } from '../dropdown/dropdown-controller';\nimport { makeRef } from '../utils/make-ref';\n\n@Component({\n  tag: 'ix-menu-avatar-item',\n  styleUrl: 'menu-avatar-item.scss',\n  shadow: true,\n})\nexport class MenuAvatarItem implements DropdownItemWrapper {\n  /**\n   * Avatar dropdown icon\n   */\n  @Prop() icon: string;\n\n  /**\n   * Avatar dropdown label\n   */\n  @Prop() label: string;\n\n  /**\n   * Avatar dropdown item clicked\n   */\n  @Event() itemClick: EventEmitter<MouseEvent>;\n\n  @Element() hostElement: HTMLIxMenuAvatarItemElement;\n\n  private dropdownItemRef = makeRef<HTMLIxDropdownItemElement>();\n\n  /** @internal */\n  @Method()\n  async getDropdownItemElement() {\n    return this.dropdownItemRef.waitForCurrent();\n  }\n\n  render() {\n    return (\n      <ix-dropdown-item\n        ref={this.dropdownItemRef}\n        icon={this.icon}\n        label={this.label}\n        onClick={(e) => this.itemClick.emit(e)}\n      ></ix-dropdown-item>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["avatarCss","IxAvatarStyle0","DefaultAvatar","props","initials","h","class","xmlns","width","height","viewBox","fill","id","d","AvatarImage","image","src","UserInfo","Fragment","onClick","event","preventDefault","userName","extra","color","Avatar","componentWillLoad","closest","closestElement","this","hostElement","isClosestApplicationHeader","slottedChanged","hasSlottedElements","slotElement","resolveAvatarTrigger","Promise","resolve","reject","readTask","button","shadowRoot","querySelector","Error","onDropdownClick","target","dropdownElement","render","Host","slot","BaseButton","disabled","ghost","iconOval","icon","undefined","iconOnly","loading","outline","selected","type","variant","ref","trigger","e","username","onSlotchange","menuAvatarItemCss","IxMenuAvatarItemStyle0","MenuAvatarItem","dropdownItemRef","makeRef","getDropdownItemElement","waitForCurrent","key","label","itemClick","emit"],"sources":["src/components/avatar/avatar.scss?tag=ix-avatar&encapsulation=shadow","src/components/avatar/avatar.tsx","src/components/menu-avatar-item/menu-avatar-item.scss?tag=ix-menu-avatar-item&encapsulation=shadow","src/components/menu-avatar-item/menu-avatar-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/text-truncation';\n@import 'mixins/hover';\n@import './../button/button-mixin';\n@import 'mixins/scrollbar';\n\n:host {\n  @include scrollbar();\n  display: flex;\n  position: relative;\n  width: fit-content;\n\n  .avatar {\n    display: flex;\n    align-items: center;\n\n    > .avatar-image {\n      height: 2rem;\n      width: 2rem;\n      min-height: 2rem;\n      min-width: 2rem;\n      border-radius: 100px;\n    }\n\n    > .avatar-initials {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 2rem;\n      width: 2rem;\n      min-height: 2rem;\n      min-width: 2rem;\n      border-radius: 100px;\n      background-color: var(--theme-avatar--background);\n      color: var(--theme-avatar--color);\n    }\n\n    #avatar-path-background {\n      fill: var(--theme-avatar--background);\n    }\n\n    #avatar-path-person {\n      fill:var(--theme-avatar--color);\n    }\n  }\n}\n\n:host {\n  .user-info {\n    display: flex;\n    flex-direction: row;\n    position: relative;\n    height: 2.5rem;\n    padding: 1rem;\n    width: 12.75rem;\n    min-width: 12.75rem;\n    max-width: 12.75rem;\n\n    gap: 1rem;\n\n    .avatar {\n      width: 2rem;\n      pointer-events: none;\n    }\n\n    .user {\n      display: flex;\n      position: relative;\n      flex-direction: column;\n      justify-content: center;\n      max-width: 10rem;\n      width: 100%;\n      overflow: hidden;\n    }\n\n    .username {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .extra {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n}\n\n:host(.avatar-button) {\n  button {\n    @include btn-base;\n    padding: 0px;\n\n    border-radius: 100px !important;\n  }\n\n  @include btn-base-variant('invisible-primary', false);\n\n  .avatar {\n    transform: scale(0.8);\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  Fragment,\n  h,\n  Host,\n  Prop,\n  readTask,\n  State,\n} from '@stencil/core';\nimport { BaseButton } from '../button/base-button';\nimport { closestElement, hasSlottedElements } from '../utils/shadow-dom';\n\nfunction DefaultAvatar(props: { initials?: string }) {\n  const { initials } = props;\n\n  if (initials) {\n    return <div class={'avatar-initials'}>{initials}</div>;\n  }\n\n  return (\n    <svg\n      class={'avatar-image'}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"32\"\n      height=\"32\"\n      viewBox=\"0 0 32 32\"\n    >\n      <g fill=\"none\" fill-rule=\"evenodd\">\n        <path\n          id=\"avatar-path-background\"\n          d=\"M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163\n          16-16c0-4.243-1.686-8.313-4.686-11.314C24.314 1.686 20.244 0 16 0z\"\n        />\n        <path\n          id=\"avatar-path-person\"\n          d=\"M17.897 17.91c3.8-.018 7.358 1.875 9.485 5.046-2.417 3.999-6.734 6.434-11.382\n        6.42-4.648.014-8.965-2.421-11.382-6.42 2.127-3.171 5.685-5.064\n        9.485-5.045h3.794zM15.821 2.129c3.682 0 6.667 2.984 6.667 6.666 0 3.682-2.985\n        6.667-6.667 6.667s-6.667-2.985-6.667-6.667 2.985-6.666 6.667-6.666z\"\n        />\n      </g>\n    </svg>\n  );\n}\n\nfunction AvatarImage(props: { image?: string; initials?: string }) {\n  return (\n    <div class=\"avatar\">\n      {props.image ? (\n        <img src={props.image} class=\"avatar-image\"></img>\n      ) : (\n        <DefaultAvatar initials={props.initials} />\n      )}\n    </div>\n  );\n}\n\nfunction UserInfo(props: {\n  image?: string;\n  initials?: string;\n  userName: string;\n  extra?: string;\n}) {\n  return (\n    <Fragment>\n      <div class=\"user-info\" onClick={(event) => event.preventDefault()}>\n        <AvatarImage image={props.image} initials={props.initials} />\n        <div class=\"user\">\n          <div class=\"username\">{props.userName}</div>\n          {props.extra && (\n            <ix-typography class=\"extra\" color={'soft'}>\n              {props.extra}\n            </ix-typography>\n          )}\n        </div>\n      </div>\n    </Fragment>\n  );\n}\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-avatar',\n  styleUrl: 'avatar.scss',\n  shadow: true,\n})\nexport class Avatar {\n  @Element() hostElement!: HTMLIxAvatarElement;\n\n  /**\n   * Display an avatar image\n   *\n   */\n  @Prop() image?: string;\n\n  /**\n   * Display the initials of the user. Will be overwritten by image\n   *\n   */\n  @Prop() initials?: string;\n\n  /**\n   * If set an info card displaying the username will be placed inside the dropdown.\n   * Note: Only working if avatar is part of the ix-application-header\n   *\n   * @since 2.1.0\n   */\n  @Prop() username?: string;\n\n  /**\n   * Optional description text that will be displayed underneath the username.\n   * Note: Only working if avatar is part of the ix-application-header\n   *\n   * @since 2.1.0\n   */\n  @Prop() extra?: string;\n\n  @State() isClosestApplicationHeader = false;\n  @State() hasSlottedElements = false;\n\n  private slotElement?: HTMLSlotElement;\n  private dropdownElement?: HTMLIxDropdownElement;\n\n  componentWillLoad() {\n    const closest = closestElement('ix-application-header', this.hostElement);\n    this.isClosestApplicationHeader = closest !== null;\n  }\n\n  private slottedChanged() {\n    this.hasSlottedElements = hasSlottedElements(this.slotElement);\n  }\n\n  private resolveAvatarTrigger() {\n    return new Promise<HTMLElement>((resolve, reject) => {\n      readTask(() => {\n        const button = this.hostElement.shadowRoot!.querySelector('button');\n        if (button) {\n          resolve(button);\n        } else {\n          reject(new Error('ix-avatar - trigger element not found'));\n        }\n      });\n    });\n  }\n\n  private onDropdownClick(event: MouseEvent) {\n    if (event.target === this.dropdownElement) {\n      event.preventDefault();\n    }\n  }\n\n  render() {\n    if (this.isClosestApplicationHeader) {\n      return (\n        <Host slot=\"ix-application-header-avatar\" class={'avatar-button'}>\n          <BaseButton\n            disabled={false}\n            ghost={true}\n            iconOval={false}\n            icon={undefined}\n            iconOnly={false}\n            loading={false}\n            outline={false}\n            selected={false}\n            type=\"button\"\n            variant=\"primary\"\n          >\n            <AvatarImage image={this.image} initials={this.initials} />\n          </BaseButton>\n          <ix-dropdown\n            ref={(ref) => (this.dropdownElement = ref as HTMLIxDropdownElement)}\n            trigger={this.resolveAvatarTrigger()}\n            class=\"avatar-dropdown\"\n            onClick={(e) => this.onDropdownClick(e)}\n          >\n            {this.username && (\n              <Fragment>\n                <UserInfo\n                  extra={this.extra}\n                  image={this.image}\n                  initials={this.initials}\n                  userName={this.username}\n                />\n                {this.hasSlottedElements && (\n                  <ix-divider onClick={(e) => e.preventDefault()}></ix-divider>\n                )}\n              </Fragment>\n            )}\n            <slot\n              onSlotchange={() => this.slottedChanged()}\n              ref={(ref) => (this.slotElement = ref as HTMLSlotElement)}\n            ></slot>\n          </ix-dropdown>\n        </Host>\n      );\n    }\n\n    return (\n      <Host>\n        <AvatarImage image={this.image} initials={this.initials} />\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@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: block;\n  color: var(--theme-color-std-text);\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  Method,\n  Prop,\n} from '@stencil/core';\nimport { DropdownItemWrapper } from '../dropdown/dropdown-controller';\nimport { makeRef } from '../utils/make-ref';\n\n@Component({\n  tag: 'ix-menu-avatar-item',\n  styleUrl: 'menu-avatar-item.scss',\n  shadow: true,\n})\nexport class MenuAvatarItem implements DropdownItemWrapper {\n  @Element() hostElement!: HTMLIxMenuAvatarItemElement;\n\n  /**\n   * Avatar dropdown icon\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Avatar dropdown label\n   */\n  @Prop() label?: string;\n\n  /**\n   * Avatar dropdown item clicked\n   */\n  @Event() itemClick!: EventEmitter<MouseEvent>;\n\n  private dropdownItemRef = makeRef<HTMLIxDropdownItemElement>();\n\n  /** @internal */\n  @Method()\n  async getDropdownItemElement() {\n    return this.dropdownItemRef.waitForCurrent();\n  }\n\n  render() {\n    return (\n      <ix-dropdown-item\n        ref={this.dropdownItemRef}\n        icon={this.icon}\n        label={this.label}\n        onClick={(e) => this.itemClick.emit(e)}\n      ></ix-dropdown-item>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/siemens-ix/{p-edc1d44a.entry.js → p-6f970ba4.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,c as r,h as o,H as i,g as s}from"./p-5806df2b.js";const e=".btn-group ix-button:first-child .btn{border-top-right-radius:0px;border-bottom-right-radius:0px;border-right:0px}.btn-group ix-button:last-child .btn{border-top-left-radius:0px;border-bottom-left-radius:0px}.btn-group ix-button:not(:first-child):not(:last-child) .btn{border-radius:0px;border-right:0px}:host{display:inline-block}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .btn-group{position:relative;display:inline-flex;vertical-align:middle;width:100%}:host .btn-group>ix-button:nth-child(1){width:calc(100% - 2rem)}:host .btn-group>ix-button:nth-child(2){width:2rem}:host .middle-gap{gap:0.125rem}:host .left-button-border{border-top-width:0.125rem;border-right-width:0;border-left-width:0.125rem;border-bottom-width:0.125rem}";const h=e;const b=class{constructor(o){t(this,o);this.buttonClick=r(this,"buttonClick",7);this.variant="primary";this.closeBehavior="both";this.outline=false;this.ghost=false;this.label=undefined;this.icon="";this.splitIcon="context-menu";this.disabled=false;this.placement="bottom-start";this.toggle=false}linkTriggerRef(){if(this.triggerElement&&this.dropdownElement){this.dropdownElement.trigger=this.triggerElement}}componentDidLoad(){this.linkTriggerRef()}render(){const t={variant:this.variant,outline:this.outline,ghost:this.ghost,disabled:this.disabled,class:{"left-button-border":!this.outline}};return o(i,{key:"ef6b9460140253c93d73fcdde4dd2dfd1a585167"},o("div",{key:"084920621d13d2c3f2591a8023792615a5e0328f",class:{"btn-group":true,"middle-gap":!this.outline}},this.label?o("ix-button",Object.assign({},t,{icon:this.icon,onClick:t=>this.buttonClick.emit(t)}),this.label):o("ix-icon-button",Object.assign({},t,{icon:this.icon,onClick:t=>this.buttonClick.emit(t)})),o("ix-icon-button",Object.assign({key:"8912184bad2d9c33c8115860521e29d77093551c"},t,{ref:t=>this.triggerElement=t,class:"anchor",icon:this.splitIcon}))),o("ix-dropdown",{key:"261c7ffd4edc2a34c5314e6649286aa19649815b",ref:t=>this.dropdownElement=t,closeBehavior:this.closeBehavior},o("slot",{key:"092a0646953fccd7118b8d844dd8af12244f87fe"})))}get hostElement(){return s(this)}};b.style=h;export{b as ix_split_button};
-//# sourceMappingURL=p-edc1d44a.entry.js.map
+import{r as t,c as r,h as o,H as i,g as e}from"./p-5806df2b.js";const s=".btn-group ix-button:first-child .btn{border-top-right-radius:0px;border-bottom-right-radius:0px;border-right:0px}.btn-group ix-button:last-child .btn{border-top-left-radius:0px;border-bottom-left-radius:0px}.btn-group ix-button:not(:first-child):not(:last-child) .btn{border-radius:0px;border-right:0px}:host{display:inline-block}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .btn-group{position:relative;display:inline-flex;vertical-align:middle;width:100%}:host .btn-group>ix-button:nth-child(1){width:calc(100% - 2rem)}:host .btn-group>ix-button:nth-child(2){width:2rem}:host .middle-gap{gap:0.125rem}:host .left-button-border{border-top-width:0.125rem;border-right-width:0;border-left-width:0.125rem;border-bottom-width:0.125rem}";const b=s;const h=class{constructor(o){t(this,o);this.buttonClick=r(this,"buttonClick",7);this.variant="primary";this.closeBehavior="both";this.outline=false;this.ghost=false;this.label=undefined;this.icon="";this.splitIcon="context-menu";this.disabled=false;this.placement="bottom-start";this.toggle=false}linkTriggerRef(){if(this.triggerElement&&this.dropdownElement){this.dropdownElement.trigger=this.triggerElement}}componentDidLoad(){this.linkTriggerRef()}render(){const t={variant:this.variant,outline:this.outline,ghost:this.ghost,disabled:this.disabled,class:{"left-button-border":!this.outline}};return o(i,{key:"816824c8c9642cd1620894baeda6c3227bebb371"},o("div",{key:"251feccf5992525d8544085541fe1eefe455b3ac",class:{"btn-group":true,"middle-gap":!this.outline}},this.label?o("ix-button",Object.assign({},t,{icon:this.icon,onClick:t=>this.buttonClick.emit(t)}),this.label):o("ix-icon-button",Object.assign({},t,{icon:this.icon,onClick:t=>this.buttonClick.emit(t)})),o("ix-icon-button",Object.assign({key:"4cd4ced7be125a33bf978c4a252901ffa2b822eb"},t,{ref:t=>this.triggerElement=t,class:"anchor",icon:this.splitIcon}))),o("ix-dropdown",{key:"a0a01f2b7dd0684ebfc53cfff55fa7c24c595b66",ref:t=>this.dropdownElement=t,closeBehavior:this.closeBehavior},o("slot",{key:"2c653cd56349aa56c269b3e59a63dfea549b4165"})))}get hostElement(){return e(this)}};h.style=b;export{h as ix_split_button};
+//# sourceMappingURL=p-6f970ba4.entry.js.map

package/dist/siemens-ix/p-6f970ba4.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["splitButtonCss","IxSplitButtonStyle0","SplitButton","linkTriggerRef","this","triggerElement","dropdownElement","trigger","componentDidLoad","render","buttonAttributes","variant","outline","ghost","disabled","class","h","Host","key","label","Object","assign","icon","onClick","e","buttonClick","emit","ref","r","splitIcon","closeBehavior"],"sources":["src/components/split-button/split-button.scss?tag=ix-split-button&encapsulation=shadow","src/components/split-button/split-button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n@import 'legacy/components/button-group';\n\n:host {\n  @include ix-component;\n  display: inline-block;\n\n  .btn-group {\n    position: relative;\n    display: inline-flex;\n    vertical-align: middle;\n    width: 100%;\n\n    > ix-button:nth-child(1) {\n      width: calc(100% - 2rem);\n    }\n\n    > ix-button:nth-child(2) {\n      width: 2rem;\n    }\n  }\n\n  .middle-gap {\n    gap: 0.125rem;\n  }\n\n  .left-button-border {\n    border-top-width: 0.125rem;\n    border-right-width: 0;\n    border-left-width: 0.125rem;\n    border-bottom-width: 0.125rem;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { ButtonVariant } from '../button/button';\nimport { AlignedPlacement } from '../dropdown/placement';\nimport { CloseBehavior } from '../dropdown/dropdown-controller';\n\nexport type SplitButtonVariant = ButtonVariant;\n\n@Component({\n  tag: 'ix-split-button',\n  styleUrl: 'split-button.scss',\n  shadow: true,\n})\nexport class SplitButton {\n  @Element() hostElement!: HTMLIxSplitButtonElement;\n\n  /**\n   * Color variant of button\n   */\n  @Prop() variant: SplitButtonVariant = 'primary';\n\n  /**\n   * Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.\n   * @since 2.3.0\n   */\n  @Prop() closeBehavior: CloseBehavior = 'both';\n\n  /**\n   * Button outline variant\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button invisible\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Button label\n   */\n  @Prop() label?: string;\n\n  /**\n   * Button icon\n   */\n  @Prop() icon = '';\n\n  /**\n   * Icon of the button on the right\n   */\n  @Prop() splitIcon = 'context-menu';\n\n  /**\n   * Disabled\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Placement of the dropdown\n   */\n  @Prop() placement: AlignedPlacement = 'bottom-start';\n\n  @State() toggle = false;\n\n  /**\n   * Button clicked\n   */\n  @Event() buttonClick!: EventEmitter<MouseEvent>;\n\n  private triggerElement?: HTMLElement;\n  private dropdownElement?: HTMLIxDropdownElement;\n\n  private linkTriggerRef() {\n    if (this.triggerElement && this.dropdownElement) {\n      this.dropdownElement.trigger = this.triggerElement;\n    }\n  }\n\n  componentDidLoad() {\n    this.linkTriggerRef();\n  }\n\n  render() {\n    const buttonAttributes = {\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      disabled: this.disabled,\n      class: {\n        'left-button-border': !this.outline,\n      },\n    };\n    return (\n      <Host>\n        <div class={{ 'btn-group': true, 'middle-gap': !this.outline }}>\n          {this.label ? (\n            <ix-button\n              {...buttonAttributes}\n              icon={this.icon}\n              onClick={(e) => this.buttonClick.emit(e)}\n            >\n              {this.label}\n            </ix-button>\n          ) : (\n            <ix-icon-button\n              {...buttonAttributes}\n              icon={this.icon}\n              onClick={(e) => this.buttonClick.emit(e)}\n            ></ix-icon-button>\n          )}\n          <ix-icon-button\n            {...buttonAttributes}\n            ref={(r) => (this.triggerElement = r)}\n            class={'anchor'}\n            icon={this.splitIcon}\n          ></ix-icon-button>\n        </div>\n\n        <ix-dropdown\n          ref={(r) => (this.dropdownElement = r)}\n          closeBehavior={this.closeBehavior}\n        >\n          <slot></slot>\n        </ix-dropdown>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAiB,i7CACvB,MAAAC,EAAeD,E,MC6BFE,EAAW,M,+EAMgB,U,mBAMC,O,aAKrB,M,WAKF,M,+BAUD,G,eAKK,e,cAKD,M,eAKmB,e,YAEpB,K,CAUV,cAAAC,GACN,GAAIC,KAAKC,gBAAkBD,KAAKE,gBAAiB,CAC/CF,KAAKE,gBAAgBC,QAAUH,KAAKC,c,EAIxC,gBAAAG,GACEJ,KAAKD,gB,CAGP,MAAAM,GACE,MAAMC,EAAmB,CACvBC,QAASP,KAAKO,QACdC,QAASR,KAAKQ,QACdC,MAAOT,KAAKS,MACZC,SAAUV,KAAKU,SACfC,MAAO,CACL,sBAAuBX,KAAKQ,UAGhC,OACEI,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKH,MAAO,CAAE,YAAa,KAAM,cAAeX,KAAKQ,UAClDR,KAAKe,MACJH,EAAA,YAAAI,OAAAC,OAAA,GACMX,EAAgB,CACpBY,KAAMlB,KAAKkB,KACXC,QAAUC,GAAMpB,KAAKqB,YAAYC,KAAKF,KAErCpB,KAAKe,OAGRH,EAAA,iBAAAI,OAAAC,OAAA,GACMX,EAAgB,CACpBY,KAAMlB,KAAKkB,KACXC,QAAUC,GAAMpB,KAAKqB,YAAYC,KAAKF,MAG1CR,EAAA,iBAAAI,OAAAC,OAAA,CAAAH,IAAA,4CACMR,EAAgB,CACpBiB,IAAMC,GAAOxB,KAAKC,eAAiBuB,EACnCb,MAAO,SACPO,KAAMlB,KAAKyB,cAIfb,EAAA,eAAAE,IAAA,2CACES,IAAMC,GAAOxB,KAAKE,gBAAkBsB,EACpCE,cAAe1B,KAAK0B,eAEpBd,EAAA,QAAAE,IAAA,8C"}