@siemens/ix 3.0.0-alpha.4 → 3.0.0

package/dist/siemens-ix/ix-typography.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-typography.entry.esm.js","sources":["src/components/typography/typography.scss?tag=ix-typography&encapsulation=shadow","src/components/typography/typography.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n@import 'legacy/mixins/fonts';\n@import 'components/fonts';\n@import 'mixins/fonts';\n\n:host {\n  @include ix-component;\n\n  display: block;\n  position: relative;\n}\n\n:host(.text-xs) {\n  @include text-xs;\n}\n\n:host(.text-s) {\n  @include text-s;\n}\n\n:host(.text-caption) {\n  @include text-caption;\n}\n\n:host(.text-caption-single) {\n  @include text-caption-single;\n}\n\n:host(.text-default) {\n  @include text-default;\n}\n\n:host(.text-default-single) {\n  @include text-default-single;\n}\n\n:host(.text-default-title) {\n  @include text-default-title;\n}\n\n:host(.text-default-title-single) {\n  @include text-default-title-single;\n}\n\n:host(.text-l) {\n  @include text-l;\n}\n\n:host(.text-l-single) {\n  @include text-l-single;\n}\n\n:host(.text-l-title) {\n  @include text-l-title;\n}\n\n:host(.text-l-title-single) {\n  @include text-l-title-single;\n}\n\n:host(.text-h2) {\n  @include text-h2;\n}\n\n:host(.text-xl) {\n  @include text-xl;\n}\n\n$typography-formats: label, label-xs, label-sm, label-lg, body, body-xs, body-sm,\n  body-lg, display, display-xs, display-sm, display-lg, display-xl, display-xxl,\n  h6, h5, h4, h3, h2, h1, code, code-sm, code-lg;\n\n@each $format in $typography-formats {\n  :host(.typography-#{$format}) {\n    @extend .typography-#{$format};\n  }\n}\n\n$typography-decoration: none, underline, line-through;\n@each $decoration in $typography-decoration {\n  :host(.typography-decoration-#{$decoration}) {\n    @extend .typography-decoration-#{$decoration};\n  }\n}\n\n:host(.typography-weight-bold) {\n  @extend .typography-weight-bold;\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\nexport type TypographyVariants =\n  | 'x-small'\n  | 'small'\n  | 'caption'\n  | 'caption-single'\n  | 'default'\n  | 'default-single'\n  | 'default-title'\n  | 'default-title-single'\n  | 'large'\n  | 'large-single'\n  | 'large-title'\n  | 'large-title-single'\n  | 'h2'\n  | 'display-large';\n\nexport type TypographyColors =\n  | 'alarm'\n  | 'alarm-contrast'\n  | 'contrast'\n  | 'critical-contrast'\n  | 'info-contrast'\n  | 'inv-contrast'\n  | 'inv-soft'\n  | 'inv-std'\n  | 'inv-weak'\n  | 'neutral-contrast'\n  | 'primary-contrast'\n  | 'soft'\n  | 'std'\n  | 'success-contrast'\n  | 'warning-contrast'\n  | 'weak';\n\ntype TypographyFormatLabel = 'label' | 'label-xs' | 'label-sm' | 'label-lg';\ntype TypographyFormatBody = 'body' | 'body-xs' | 'body-sm' | 'body-lg';\ntype TypographyFormatDisplay =\n  | 'display'\n  | 'display-xs'\n  | 'display-sm'\n  | 'display-lg'\n  | 'display-xl'\n  | 'display-xxl';\ntype TypographyFormatHeading = 'h6' | 'h5' | 'h4' | 'h3' | 'h2' | 'h1';\ntype TypographyFormatCode = 'code' | 'code-sm' | 'code-lg';\n\nexport type TypographyFormat =\n  | TypographyFormatLabel\n  | TypographyFormatBody\n  | TypographyFormatDisplay\n  | TypographyFormatHeading\n  | TypographyFormatCode;\n\nexport type TextDecoration = 'none' | 'underline' | 'line-through';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-typography',\n  styleUrl: 'typography.scss',\n  shadow: true,\n})\nexport class IxTypography {\n  /**\n   * Text format\n   */\n  @Prop() format?: TypographyFormat;\n\n  /**\n   * Text color based on theme variables\n   */\n  @Prop() textColor?: TypographyColors;\n\n  /**\n   * Display text bold\n   */\n  @Prop() bold = false;\n\n  /**\n   * Text decoration\n   */\n  @Prop() textDecoration: TextDecoration = 'none';\n\n  private static getTextColor(color: TypographyColors) {\n    if (color.startsWith('inv-') || !color.endsWith('-contrast')) {\n      return `var(--theme-color-${color}-text)`;\n    }\n\n    return `var(--theme-color-${color.replace('-', '--')})`;\n  }\n\n  render() {\n    let typographyClass: Record<string, boolean> = {};\n    typographyClass[`typography-${this.format ?? 'body'}`] = true;\n\n    if (this.textDecoration !== 'none') {\n      typographyClass[`typography-decoration-${this.textDecoration}`] = true;\n    }\n\n    typographyClass['typography-weight-bold'] = this.bold;\n\n    let style = {};\n\n    if (this.textColor) {\n      style = {\n        color: IxTypography.getTextColor(this.textColor),\n      };\n    }\n\n    return (\n      <Host class={typographyClass} style={style}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,aAAa,GAAG,+2bAA+2b;;MC0Ex3b,YAAY,GAAA,MAAA;AALzB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAgBE;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAG,KAAK;AAEpB;;AAEG;AACK,QAAA,IAAc,CAAA,cAAA,GAAmB,MAAM;AAkChD;IAhCS,OAAO,YAAY,CAAC,KAAuB,EAAA;AACjD,QAAA,IAAI,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE;YAC5D,OAAO,CAAA,kBAAA,EAAqB,KAAK,CAAA,MAAA,CAAQ;;QAG3C,OAAO,CAAA,kBAAA,EAAqB,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC,CAAA,CAAA,CAAG;;IAGzD,MAAM,GAAA;;QACJ,IAAI,eAAe,GAA4B,EAAE;AACjD,QAAA,eAAe,CAAC,CAAA,WAAA,EAAc,CAAA,EAAA,GAAA,IAAI,CAAC,MAAM,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,MAAM,CAAE,CAAA,CAAC,GAAG,IAAI;AAE7D,QAAA,IAAI,IAAI,CAAC,cAAc,KAAK,MAAM,EAAE;YAClC,eAAe,CAAC,yBAAyB,IAAI,CAAC,cAAc,CAAE,CAAA,CAAC,GAAG,IAAI;;AAGxE,QAAA,eAAe,CAAC,wBAAwB,CAAC,GAAG,IAAI,CAAC,IAAI;QAErD,IAAI,KAAK,GAAG,EAAE;AAEd,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAClB,YAAA,KAAK,GAAG;gBACN,KAAK,EAAE,YAAY,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC;aACjD;;AAGH,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,EAAA,EACxC,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;"}
+{"version":3,"file":"ix-typography.entry.esm.js","sources":["src/components/typography/typography.scss?tag=ix-typography&encapsulation=shadow","src/components/typography/typography.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n@import 'legacy/mixins/fonts';\n@import 'components/fonts';\n@import 'mixins/fonts';\n\n:host {\n  @include ix-component;\n\n  display: block;\n  position: relative;\n}\n\n:host(.text-xs) {\n  @include text-xs;\n}\n\n:host(.text-s) {\n  @include text-s;\n}\n\n:host(.text-caption) {\n  @include text-caption;\n}\n\n:host(.text-caption-single) {\n  @include text-caption-single;\n}\n\n:host(.text-default) {\n  @include text-default;\n}\n\n:host(.text-default-single) {\n  @include text-default-single;\n}\n\n:host(.text-default-title) {\n  @include text-default-title;\n}\n\n:host(.text-default-title-single) {\n  @include text-default-title-single;\n}\n\n:host(.text-l) {\n  @include text-l;\n}\n\n:host(.text-l-single) {\n  @include text-l-single;\n}\n\n:host(.text-l-title) {\n  @include text-l-title;\n}\n\n:host(.text-l-title-single) {\n  @include text-l-title-single;\n}\n\n:host(.text-h2) {\n  @include text-h2;\n}\n\n:host(.text-xl) {\n  @include text-xl;\n}\n\n$typography-formats: label, label-xs, label-sm, label-lg, body, body-xs, body-sm,\n  body-lg, display, display-xs, display-sm, display-lg, display-xl, display-xxl,\n  h6, h5, h4, h3, h2, h1, code, code-sm, code-lg;\n\n@each $format in $typography-formats {\n  :host(.typography-#{$format}) {\n    @extend .typography-#{$format};\n  }\n}\n\n$typography-decoration: none, underline, line-through;\n@each $decoration in $typography-decoration {\n  :host(.typography-decoration-#{$decoration}) {\n    @extend .typography-decoration-#{$decoration};\n  }\n}\n\n:host(.typography-weight-bold) {\n  @extend .typography-weight-bold;\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\nexport type TypographyVariants =\n  | 'x-small'\n  | 'small'\n  | 'caption'\n  | 'caption-single'\n  | 'default'\n  | 'default-single'\n  | 'default-title'\n  | 'default-title-single'\n  | 'large'\n  | 'large-single'\n  | 'large-title'\n  | 'large-title-single'\n  | 'h2'\n  | 'display-large';\n\nexport type TypographyColors =\n  | 'alarm'\n  | 'alarm-contrast'\n  | 'contrast'\n  | 'critical-contrast'\n  | 'info-contrast'\n  | 'inv-contrast'\n  | 'inv-soft'\n  | 'inv-std'\n  | 'inv-weak'\n  | 'neutral-contrast'\n  | 'primary-contrast'\n  | 'soft'\n  | 'std'\n  | 'success-contrast'\n  | 'warning-contrast'\n  | 'weak';\n\ntype TypographyFormatLabel = 'label' | 'label-xs' | 'label-sm' | 'label-lg';\ntype TypographyFormatBody = 'body' | 'body-xs' | 'body-sm' | 'body-lg';\ntype TypographyFormatDisplay =\n  | 'display'\n  | 'display-xs'\n  | 'display-sm'\n  | 'display-lg'\n  | 'display-xl'\n  | 'display-xxl';\ntype TypographyFormatHeading = 'h6' | 'h5' | 'h4' | 'h3' | 'h2' | 'h1';\ntype TypographyFormatCode = 'code' | 'code-sm' | 'code-lg';\n\nexport type TypographyFormat =\n  | TypographyFormatLabel\n  | TypographyFormatBody\n  | TypographyFormatDisplay\n  | TypographyFormatHeading\n  | TypographyFormatCode;\n\nexport type TextDecoration = 'none' | 'underline' | 'line-through';\n\n@Component({\n  tag: 'ix-typography',\n  styleUrl: 'typography.scss',\n  shadow: true,\n})\nexport class IxTypography {\n  /**\n   * Text format\n   */\n  @Prop() format?: TypographyFormat;\n\n  /**\n   * Text color based on theme variables\n   */\n  @Prop() textColor?: TypographyColors;\n\n  /**\n   * Display text bold\n   */\n  @Prop() bold = false;\n\n  /**\n   * Text decoration\n   */\n  @Prop() textDecoration: TextDecoration = 'none';\n\n  private static getTextColor(color: TypographyColors) {\n    if (color.startsWith('inv-') || !color.endsWith('-contrast')) {\n      return `var(--theme-color-${color}-text)`;\n    }\n\n    return `var(--theme-color-${color.replace('-', '--')})`;\n  }\n\n  render() {\n    let typographyClass: Record<string, boolean> = {};\n    typographyClass[`typography-${this.format ?? 'body'}`] = true;\n\n    if (this.textDecoration !== 'none') {\n      typographyClass[`typography-decoration-${this.textDecoration}`] = true;\n    }\n\n    typographyClass['typography-weight-bold'] = this.bold;\n\n    let style = {};\n\n    if (this.textColor) {\n      style = {\n        color: IxTypography.getTextColor(this.textColor),\n      };\n    }\n\n    return (\n      <Host class={typographyClass} style={style}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,aAAa,GAAG,+2bAA+2b;;MCuEx3b,YAAY,GAAA,MAAA;AALzB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAgBE;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAG,KAAK;AAEpB;;AAEG;AACK,QAAA,IAAc,CAAA,cAAA,GAAmB,MAAM;AAkChD;IAhCS,OAAO,YAAY,CAAC,KAAuB,EAAA;AACjD,QAAA,IAAI,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE;YAC5D,OAAO,CAAA,kBAAA,EAAqB,KAAK,CAAA,MAAA,CAAQ;;QAG3C,OAAO,CAAA,kBAAA,EAAqB,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC,CAAA,CAAA,CAAG;;IAGzD,MAAM,GAAA;;QACJ,IAAI,eAAe,GAA4B,EAAE;AACjD,QAAA,eAAe,CAAC,CAAA,WAAA,EAAc,CAAA,EAAA,GAAA,IAAI,CAAC,MAAM,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,MAAM,CAAE,CAAA,CAAC,GAAG,IAAI;AAE7D,QAAA,IAAI,IAAI,CAAC,cAAc,KAAK,MAAM,EAAE;YAClC,eAAe,CAAC,yBAAyB,IAAI,CAAC,cAAc,CAAE,CAAA,CAAC,GAAG,IAAI;;AAGxE,QAAA,eAAe,CAAC,wBAAwB,CAAC,GAAG,IAAI,CAAC,IAAI;QAErD,IAAI,KAAK,GAAG,EAAE;AAEd,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAClB,YAAA,KAAK,GAAG;gBACN,KAAK,EAAE,YAAY,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC;aACjD;;AAGH,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,EAAA,EACxC,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;"}

package/dist/siemens-ix/ix-validation-tooltip.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-validation-tooltip.entry.esm.js","sources":["src/components/validation-tooltip/validation-tooltip.scss?tag=ix-validation-tooltip&encapsulation=shadow","src/components/validation-tooltip/validation-tooltip.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\n:host {\n  display: inline-block;\n  position: relative;\n  $padding: 5px;\n  width: 100%;\n\n  .validation-tooltip {\n    background-color: var(--theme-tootlip--background);\n    color: var(--theme-tooltip--color);\n    padding: $padding 10px;\n    border-radius: 4px;\n    font-size: 13px;\n    border: 1px solid var(--theme-tooltip--border-color);\n    box-shadow: 0 0 2px 0 rgba(0, 0, 40, 0.1), 0 4px 8px 0 rgba(0, 0, 40, 0.1),\n      0 12px 18px 0 rgba(0, 0, 40, 0.1);\n\n    #arrow,\n    #arrow::before {\n      position: absolute;\n      width: 8px;\n      height: 8px;\n      background: inherit;\n    }\n\n    #arrow {\n      visibility: hidden;\n    }\n\n    #arrow::before {\n      visibility: visible;\n      content: '';\n      transform: rotate(45deg);\n      background-color: var(--theme-tootlip--background);\n    }\n  }\n\n  .validation-tooltip > #arrow {\n    bottom: -5px;\n\n    &::before {\n      border-right: 1px solid var(--theme-tooltip--border-color);\n      border-bottom: 1px solid var(--theme-tooltip--border-color);\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 */\nimport {\n  arrow,\n  autoUpdate,\n  computePosition,\n  ComputePositionConfig,\n  flip,\n  inline,\n  offset,\n  shift,\n} from '@floating-ui/dom';\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { Side } from '../dropdown/placement';\n\ntype Position = { x: number; y: number };\n\n/**\n * @slot tooltip-message - Custom tooltip message with html support\n */\n@Component({\n  tag: 'ix-validation-tooltip',\n  styleUrl: 'validation-tooltip.scss',\n  shadow: true,\n})\nexport class ValidationTooltip {\n  @Element() hostElement!: HTMLIxValidationTooltipElement;\n\n  /**\n   * Message of the tooltip\n   */\n  @Prop() message?: string;\n\n  /**\n   * Placement of the tooltip\n   */\n  @Prop() placement: Side = 'top';\n\n  /**\n   * Suppress the automatic placement of the dropdown.\n   *\n   * @since 2.0.0\n   */\n  @Prop() suppressAutomaticPlacement = false;\n\n  @State() isInputValid = true;\n  @State() tooltipPosition?: Position;\n  @State() arrowPosition?: Position;\n\n  private onSubmitBind = this.onSubmit.bind(this);\n  private onInputFocusBind = this.onInputFocus.bind(this);\n  private autoUpdateCleanup?: () => void;\n  private observer?: MutationObserver;\n\n  get arrow() {\n    return this.hostElement.shadowRoot!.querySelector('#arrow') as HTMLElement;\n  }\n\n  get inputElement() {\n    return this.hostElement.querySelector('input');\n  }\n\n  get formElement() {\n    return this.inputElement?.form;\n  }\n\n  get tooltipElement(): HTMLElement {\n    return this.hostElement.shadowRoot!.querySelector('.validation-tooltip')!;\n  }\n\n  private destroyAutoUpdate() {\n    if (this.tooltipElement) {\n      this.tooltipElement.style.display = 'none';\n    }\n\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n    }\n  }\n\n  private applyTooltipPosition() {\n    this.tooltipElement.style.display = 'block';\n\n    let positionConfig: Partial<ComputePositionConfig> = {\n      strategy: 'fixed',\n      middleware: [\n        inline(),\n        shift(),\n        offset({\n          mainAxis: 8,\n        }),\n      ],\n    };\n\n    if (!positionConfig.middleware) {\n      positionConfig.middleware = [];\n    }\n\n    if (!this.suppressAutomaticPlacement) {\n      positionConfig.middleware.push(\n        flip({ fallbackStrategy: 'initialPlacement' })\n      );\n    }\n    positionConfig.placement = this.placement;\n\n    this.autoUpdateCleanup = autoUpdate(\n      this.inputElement!,\n      this.tooltipElement,\n      async () => {\n        positionConfig.middleware = [\n          ...positionConfig.middleware!,\n          arrow({\n            element: this.arrow,\n          }),\n        ];\n        const computeResponse = await computePosition(\n          this.inputElement!,\n          this.tooltipElement,\n          positionConfig\n        );\n\n        if (computeResponse.middlewareData.arrow) {\n          const { x, y } = computeResponse.middlewareData.arrow as {\n            x: number;\n            y: number;\n          };\n          this.arrowPosition = {\n            x,\n            y,\n          };\n          Object.assign(this.arrow.style, {\n            left: x != null ? `${x}px` : '',\n            top: y != null ? `${y}px` : '',\n          });\n        }\n\n        this.tooltipPosition = {\n          x: computeResponse.x,\n          y: computeResponse.y,\n        };\n      },\n      {\n        ancestorResize: true,\n        ancestorScroll: true,\n        elementResize: true,\n      }\n    );\n  }\n\n  componentDidLoad() {\n    if (!this.inputElement) {\n      throw Error(\n        'Validation tooltip is only working with an direct input child.'\n      );\n    }\n\n    if (!this.formElement) {\n      throw Error('Validation tooltip is only working with an form element.');\n    }\n\n    this.formElement.addEventListener('submit', this.onSubmitBind);\n    this.inputElement.addEventListener('focus', this.onInputFocusBind);\n\n    this.observer = new MutationObserver(() => {\n      if (this.inputElement!.classList.contains('is-invalid')) {\n        this.isInputValid = false;\n        this.validationChanged();\n      }\n    });\n\n    this.observer.observe(this.inputElement, {\n      childList: false,\n      subtree: false,\n      attributes: true,\n      attributeFilter: ['class'],\n    });\n  }\n\n  private onInputFocus() {\n    this.isInputValid = true;\n  }\n\n  private onSubmit() {\n    if (this.formElement!.classList.contains('needs-validation')) {\n      this.isInputValid = this.inputElement!.validity.valid;\n    }\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect();\n    this.destroyAutoUpdate();\n\n    this.formElement?.removeEventListener('submit', this.onSubmitBind);\n    this.inputElement?.removeEventListener('focus', this.onInputFocusBind);\n  }\n\n  @Watch('isInputValid')\n  validationChanged() {\n    if (!this.isInputValid) {\n      this.applyTooltipPosition();\n    } else {\n      this.destroyAutoUpdate();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n        <div\n          role=\"tooltip\"\n          style={{\n            display: 'none',\n            position: 'fixed',\n            top: '0',\n            left: '0',\n            transform: `translate(${Math.round(\n              this.tooltipPosition?.x ?? 0\n            )}px,${Math.round(this.tooltipPosition?.y ?? 0)}px)`,\n          }}\n          class=\"validation-tooltip text-default\"\n        >\n          {this.message}\n          <slot name=\"tooltip-message\"></slot>\n          <div id=\"arrow\"></div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ix-validation-tooltip.entry.esm.js","sources":["src/components/validation-tooltip/validation-tooltip.scss?tag=ix-validation-tooltip&encapsulation=shadow","src/components/validation-tooltip/validation-tooltip.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\n:host {\n  display: inline-block;\n  position: relative;\n  $padding: 5px;\n  width: 100%;\n  z-index: var(--theme-z-index-tooltip);\n\n  .validation-tooltip {\n    background-color: var(--theme-tootlip--background);\n    color: var(--theme-tooltip--color);\n    padding: $padding 10px;\n    border-radius: 4px;\n    font-size: 13px;\n    border: 1px solid var(--theme-tooltip--border-color);\n    box-shadow: 0 0 2px 0 rgba(0, 0, 40, 0.1), 0 4px 8px 0 rgba(0, 0, 40, 0.1),\n      0 12px 18px 0 rgba(0, 0, 40, 0.1);\n\n    #arrow,\n    #arrow::before {\n      position: absolute;\n      width: 8px;\n      height: 8px;\n      background: inherit;\n    }\n\n    #arrow {\n      visibility: hidden;\n    }\n\n    #arrow::before {\n      visibility: visible;\n      content: '';\n      transform: rotate(45deg);\n      background-color: var(--theme-tootlip--background);\n    }\n  }\n\n  .validation-tooltip > #arrow {\n    bottom: -5px;\n\n    &::before {\n      border-right: 1px solid var(--theme-tooltip--border-color);\n      border-bottom: 1px solid var(--theme-tooltip--border-color);\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 */\nimport {\n  arrow,\n  autoUpdate,\n  computePosition,\n  ComputePositionConfig,\n  flip,\n  inline,\n  offset,\n  shift,\n} from '@floating-ui/dom';\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { Side } from '../dropdown/placement';\n\ntype Position = { x: number; y: number };\n\n/**\n * @slot tooltip-message - Custom tooltip message with html support\n *\n * @deprecated Will be removed with 4.0.0\n */\n@Component({\n  tag: 'ix-validation-tooltip',\n  styleUrl: 'validation-tooltip.scss',\n  shadow: true,\n})\nexport class ValidationTooltip {\n  @Element() hostElement!: HTMLIxValidationTooltipElement;\n\n  /**\n   * Message of the tooltip\n   */\n  @Prop() message?: string;\n\n  /**\n   * Placement of the tooltip\n   */\n  @Prop() placement: Side = 'top';\n\n  /**\n   * Suppress the automatic placement of the dropdown.\n   */\n  @Prop() suppressAutomaticPlacement = false;\n\n  @State() isInputValid = true;\n  @State() tooltipPosition?: Position;\n  @State() arrowPosition?: Position;\n\n  private onSubmitBind = this.onSubmit.bind(this);\n  private onInputFocusBind = this.onInputFocus.bind(this);\n  private autoUpdateCleanup?: () => void;\n  private observer?: MutationObserver;\n\n  get arrow() {\n    return this.hostElement.shadowRoot!.querySelector('#arrow') as HTMLElement;\n  }\n\n  get inputElement() {\n    return this.hostElement.querySelector('input');\n  }\n\n  get formElement() {\n    return this.inputElement?.form;\n  }\n\n  get tooltipElement(): HTMLElement {\n    return this.hostElement.shadowRoot!.querySelector('.validation-tooltip')!;\n  }\n\n  private destroyAutoUpdate() {\n    if (this.tooltipElement) {\n      this.tooltipElement.style.display = 'none';\n    }\n\n    if (this.autoUpdateCleanup) {\n      this.autoUpdateCleanup();\n    }\n  }\n\n  private applyTooltipPosition() {\n    this.tooltipElement.style.display = 'block';\n\n    let positionConfig: Partial<ComputePositionConfig> = {\n      strategy: 'fixed',\n      middleware: [\n        inline(),\n        shift(),\n        offset({\n          mainAxis: 8,\n        }),\n      ],\n    };\n\n    if (!positionConfig.middleware) {\n      positionConfig.middleware = [];\n    }\n\n    if (!this.suppressAutomaticPlacement) {\n      positionConfig.middleware.push(\n        flip({ fallbackStrategy: 'initialPlacement' })\n      );\n    }\n    positionConfig.placement = this.placement;\n\n    this.autoUpdateCleanup = autoUpdate(\n      this.inputElement!,\n      this.tooltipElement,\n      async () => {\n        positionConfig.middleware = [\n          ...positionConfig.middleware!,\n          arrow({\n            element: this.arrow,\n          }),\n        ];\n        const computeResponse = await computePosition(\n          this.inputElement!,\n          this.tooltipElement,\n          positionConfig\n        );\n\n        if (computeResponse.middlewareData.arrow) {\n          const { x, y } = computeResponse.middlewareData.arrow as {\n            x: number;\n            y: number;\n          };\n          this.arrowPosition = {\n            x,\n            y,\n          };\n          Object.assign(this.arrow.style, {\n            left: x != null ? `${x}px` : '',\n            top: y != null ? `${y}px` : '',\n          });\n        }\n\n        this.tooltipPosition = {\n          x: computeResponse.x,\n          y: computeResponse.y,\n        };\n      },\n      {\n        ancestorResize: true,\n        ancestorScroll: true,\n        elementResize: true,\n      }\n    );\n  }\n\n  componentDidLoad() {\n    if (!this.inputElement) {\n      throw Error(\n        'Validation tooltip is only working with an direct input child.'\n      );\n    }\n\n    if (!this.formElement) {\n      throw Error('Validation tooltip is only working with an form element.');\n    }\n\n    this.formElement.addEventListener('submit', this.onSubmitBind);\n    this.inputElement.addEventListener('focus', this.onInputFocusBind);\n\n    this.observer = new MutationObserver(() => {\n      if (this.inputElement!.classList.contains('is-invalid')) {\n        this.isInputValid = false;\n        this.validationChanged();\n      }\n    });\n\n    this.observer.observe(this.inputElement, {\n      childList: false,\n      subtree: false,\n      attributes: true,\n      attributeFilter: ['class'],\n    });\n  }\n\n  private onInputFocus() {\n    this.isInputValid = true;\n  }\n\n  private onSubmit() {\n    if (this.formElement!.classList.contains('needs-validation')) {\n      this.isInputValid = this.inputElement!.validity.valid;\n    }\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect();\n    this.destroyAutoUpdate();\n\n    this.formElement?.removeEventListener('submit', this.onSubmitBind);\n    this.inputElement?.removeEventListener('focus', this.onInputFocusBind);\n  }\n\n  @Watch('isInputValid')\n  validationChanged() {\n    if (!this.isInputValid) {\n      this.applyTooltipPosition();\n    } else {\n      this.destroyAutoUpdate();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n        <div\n          role=\"tooltip\"\n          style={{\n            display: 'none',\n            position: 'fixed',\n            top: '0',\n            left: '0',\n            transform: `translate(${Math.round(\n              this.tooltipPosition?.x ?? 0\n            )}px,${Math.round(this.tooltipPosition?.y ?? 0)}px)`,\n          }}\n          class=\"validation-tooltip text-default\"\n        >\n          {this.message}\n          <slot name=\"tooltip-message\"></slot>\n          <div id=\"arrow\"></div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/siemens-ix/{p-0c830977.entry.js → p-04338b3f.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,c as o,h as r,H as t,g as n}from"./p-BNpBEtDH.js";import{B as i}from"./p-1HUk727A.js";import{a as d}from"./p-Bb7pDeaQ.js";import"./p-Df9aoecP.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=class{constructor(r){e(this,r);this.pressedChange=o(this,"pressedChange",7);this.variant="secondary";this.outline=false;this.ghost=false;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:"4eaf3eebcdaddee356a4c0ab41de10ef47eb45a6",class:Object.assign(Object.assign({},this.getIconSizeClass()),{disabled:this.disabled||this.loading})},r(i,Object.assign({key:"5d137a0c0c34cd940efb6be5ec02acde47e2a660"},e)))}get hostElement(){return n(this)}static get watchers(){return{variant:["onVariantChange"],ghost:["onGhostChange"],outline:["onOutlineChange"]}}};s.style=a;export{s as ix_icon_toggle_button};
-//# sourceMappingURL=p-0c830977.entry.js.map
+import{r as e,c as o,h as r,H as t,g as n}from"./p-BNpBEtDH.js";import{B as i}from"./p-1HUk727A.js";import{a as d}from"./p-Bb7pDeaQ.js";import"./p-Df9aoecP.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=class{constructor(r){e(this,r);this.pressedChange=o(this,"pressedChange",7);this.variant="secondary";this.outline=false;this.ghost=false;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:"c6ee50eeae6633065e5de88f97596caf8eb0e281",class:Object.assign(Object.assign({},this.getIconSizeClass()),{disabled:this.disabled||this.loading})},r(i,Object.assign({key:"7d47806873919e9f74da8531c1fe2b087902c56f"},e)))}get hostElement(){return n(this)}static get watchers(){return{variant:["onVariantChange"],ghost:["onGhostChange"],outline:["onOutlineChange"]}}};s.style=a;export{s as ix_icon_toggle_button};
+//# sourceMappingURL=p-04338b3f.entry.js.map

package/dist/siemens-ix/p-04338b3f.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["iconToggleButtonCss","IconToggleButton","constructor","hostRef","this","variant","outline","ghost","pressed","size","disabled","loading","isIllegalToggleButtonConfig","logIllegalConfig","console","warn","onVariantChange","onGhostChange","onOutlineChange","componentDidLoad","dispatchPressedChange","pressedChange","emit","getIconSizeClass","render","baseButtonProps","iconOnly","iconOval","selected","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@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,07tB,MC6BfC,EAAgB,MAL7B,WAAAC,CAAAC,G,uDAUUC,KAAOC,QAAkB,YAKzBD,KAAOE,QAAG,MAKVF,KAAKG,MAAG,MAURH,KAAOI,QAAG,MAKVJ,KAAIK,KAAuB,KAKVL,KAAQM,SAAG,MAK5BN,KAAOO,QAAY,KAsF5B,CA7ES,2BAAAC,GACN,OAAOR,KAAKC,UAAY,YAAcD,KAAKE,SAAWF,KAAKG,M,CAGrD,gBAAAM,GACNC,QAAQC,KACN,0H,CAKJ,eAAAC,GACE,GAAIZ,KAAKQ,8BAA+B,CACtCR,KAAKS,kB,EAKT,aAAAI,GACEb,KAAKY,iB,CAIP,eAAAE,GACEd,KAAKY,iB,CAGP,gBAAAG,GACEf,KAAKY,iB,CAGC,qBAAAI,GACNhB,KAAKiB,cAAcC,MAAMlB,KAAKI,Q,CAGxB,gBAAAe,GACN,MAAO,CACL,cAAenB,KAAKK,OAAS,KAC7B,cAAeL,KAAKK,OAAS,KAC7B,cAAeL,KAAKK,OAAS,K,CAIjC,MAAAe,GACE,MAAMC,EAAmC,CACvCpB,QAASD,KAAKC,QACdC,QAASF,KAAKE,QACdC,MAAOH,KAAKG,MACZmB,SAAU,KACVC,SAAU,MACVC,SAAUxB,KAAKI,QACfE,SAAUN,KAAKM,UAAYN,KAAKO,QAChCkB,KAAMzB,KAAKyB,KACXC,SAAU1B,KAAKK,KACfE,QAASP,KAAKO,QACdoB,QAAS,IAAM3B,KAAKgB,wBACpBY,KAAM,SACNC,eAAgB,CACd,eAAgBC,EAAY9B,KAAKI,UAEnC2B,aAAYC,OAAAC,OAAA,CACV,cAAe,MACZjC,KAAKmB,qBAIZ,OACEe,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAKL,OAAAC,OAAAD,OAAAC,OAAA,GACAjC,KAAKmB,oBACR,CAAAb,SAAUN,KAAKM,UAAYN,KAAKO,WAGlC2B,EAACI,EAAmBN,OAAAC,OAAA,CAAAG,IAAA,4CAAAf,I","ignoreList":[]}

package/dist/siemens-ix/p-0443dc8d.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as o,H as r,g as h}from"./p-BNpBEtDH.js";import{a as i}from"./p-Bb7pDeaQ.js";import{H as c}from"./p-DHml78Yc.js";const n=':host{display:inline-flex;flex-direction:row;position:relative;height:1.5rem;margin-block-start:0.25rem;margin-block-end:0.25rem}: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 input[type=checkbox]{display:none}:host .wrapper{display:flex;align-items:flex-start;width:100%;height:100%}:host .label{display:inline-block;white-space:normal;overflow:hidden;text-overflow:ellipsis;margin-block-start:0.125rem;margin-inline-start:0.5625rem}:host .switch{all:unset;position:relative;display:inline-block;width:3rem;min-width:3rem;max-width:3rem;height:1.5rem}:host .slider{position:absolute;top:0;left:0;right:0;bottom:0;background-color:var(--theme-switch-off--background);transition:var(--theme-default-time);border-radius:1.5rem;border:0.0625rem solid transparent}:host .slider:before{position:absolute;content:"";height:1.125rem;width:1.125rem;left:0.125rem;bottom:0.125rem;background-color:var(--theme-switch-thumb-off--background);transition:var(--theme-default-time);border-radius:50%}:host .switch.checked>.slider::before{background-color:var(--theme-switch-thumb-on--background);transform:translateX(1.5rem)}:host .switch>.slider{border-color:var(--theme-switch-off--border-color)}:host .switch:hover>.slider{background-color:var(--theme-switch-off--background--hover);border-color:var(--theme-switch-off--border-color--hover)}:host .switch:hover>.slider:before{background-color:var(--theme-switch-thumb-off--background--hover)}:host .switch:active>.slider{background-color:var(--theme-switch-off--background--active);border-color:var(--theme-switch-off--border-color--active)}:host .switch:active>.slider:before{background-color:var(--theme-switch-thumb-off--background--active)}:host .switch.checked>.slider{background-color:var(--theme-switch-on--background);border-color:var(--theme-switch-on--border-color)}:host .switch.checked:hover>.slider{background-color:var(--theme-switch-on--background--hover);border-color:var(--theme-switch-on--border-color--hover)}:host .switch.checked:hover>.slider:before{background-color:var(--theme-switch-thumb-on--background--hover)}:host .switch.checked:active>.slider{background-color:var(--theme-switch-on--background--active);border-color:var(--theme-switch-on--border-color--active)}:host .switch.checked:active>.slider:before{background-color:var(--theme-switch-thumb-on--background--active)}:host .switch.indeterminate>.slider::before{transform:translateX(0.75rem)}:host(:not(.disabled)) .wrapper{cursor:pointer}:host(:not(.disabled)) .switch:focus-visible>.slider{outline:0.0625rem solid var(--theme-color-focus-bdr);outline-offset:0.0625rem}:host(.disabled){pointer-events:none}:host(.disabled) .switch{opacity:0.5}:host(.disabled) .switch>.slider{background-color:var(--theme-switch-off--background--disabled)}:host(.disabled) .switch>.slider:before{background-color:var(--theme-switch-thumb-off--background--disabled)}:host(.disabled) .switch.checked>.slider{background-color:var(--theme-switch-on--background--disabled)}:host(.disabled) .switch.checked>.slider:before{background-color:var(--theme-switch-thumb-on--background--disabled)}:host(.disabled) .label{color:var(--theme-color-weak-text)}:host(.ix-info:not(.disabled)) .slider{--theme-switch-off--background:var(\n    --theme-switch-off--background--info\n  );--theme-switch-off--background--hover:var(\n    --theme-switch-off--background--info--hover\n  );--theme-switch-off--background--active:var(\n    --theme-switch-off--background--info--active\n  );--theme-switch-thumb-off--background:var(\n    --theme-switch-thumb-off--background--info\n  );--theme-switch-thumb-off--background--hover:var(\n    --theme-switch-thumb-off--background--info--hover\n  );--theme-switch-thumb-off--background--active:var(\n    --theme-switch-thumb-off--background--info--active\n  );--theme-switch-off--border-color:var(\n    --theme-switch-off--border-color--info\n  );--theme-switch-off--border-color--hover:var(\n    --theme-switch-off--border-color--info--hover\n  );--theme-switch-off--border-color--active:var(\n    --theme-switch-off--border-color--info--active\n  );--theme-switch-on--background:var(\n    --theme-switch-on--background--info\n  );--theme-switch-on--background--hover:var(\n    --theme-switch-on--background--info--hover\n  );--theme-switch-on--background--active:var(\n    --theme-switch-on--background--info--active\n  );--theme-switch-thumb-on--background:var(\n    --theme-switch-thumb-on--background--info\n  );--theme-switch-thumb-on--background--hover:var(\n    --theme-switch-thumb-on--background--info--hover\n  );--theme-switch-thumb-on--background--active:var(\n    --theme-switch-thumb-on--background--info--active\n  );--theme-switch-on--border-color:var(\n    --theme-switch-on--border-color--info\n  );--theme-switch-on--border-color--hover:var(\n    --theme-switch-on--border-color--info--hover\n  );--theme-switch-on--border-color--active:var(\n    --theme-switch-on--border-color--info--active\n  );--theme-switch-mixed--background:var(\n    --theme-switch-mixed--background--info\n  );--theme-switch-mixed--background--hover:var(\n    --theme-switch-mixed--background--info--hover\n  );--theme-switch-mixed--background--active:var(\n    --theme-switch-mixed--background--info--active\n  );--theme-switch-thumb-mixed--background:var(\n    --theme-switch-thumb-mixed--background--info\n  );--theme-switch-thumb-mixed--background--hover:var(\n    --theme-switch-thumb-mixed--background--info--hover\n  );--theme-switch-thumb-mixed--background--active:var(\n    --theme-switch-thumb-mixed--background--info--active\n  );--theme-switch-mixed--border-color:var(\n    --theme-switch-mixed--border-color--info\n  );--theme-switch-mixed--border-color--hover:var(\n    --theme-switch-mixed--border-color--info--hover\n  );--theme-switch-mixed--border-color--active:var(\n    --theme-switch-mixed--border-color--info--active\n  )}:host(.ix-warning:not(.disabled)) .slider{--theme-switch-off--background:var(\n    --theme-switch-off--background--warning\n  );--theme-switch-off--background--hover:var(\n    --theme-switch-off--background--warning--hover\n  );--theme-switch-off--background--active:var(\n    --theme-switch-off--background--warning--active\n  );--theme-switch-thumb-off--background:var(\n    --theme-switch-thumb-off--background--warning\n  );--theme-switch-thumb-off--background--hover:var(\n    --theme-switch-thumb-off--background--warning--hover\n  );--theme-switch-thumb-off--background--active:var(\n    --theme-switch-thumb-off--background--warning--active\n  );--theme-switch-off--border-color:var(\n    --theme-switch-off--border-color--warning\n  );--theme-switch-off--border-color--hover:var(\n    --theme-switch-off--border-color--warning--hover\n  );--theme-switch-off--border-color--active:var(\n    --theme-switch-off--border-color--warning--active\n  );--theme-switch-on--background:var(\n    --theme-switch-on--background--warning\n  );--theme-switch-on--background--hover:var(\n    --theme-switch-on--background--warning--hover\n  );--theme-switch-on--background--active:var(\n    --theme-switch-on--background--warning--active\n  );--theme-switch-thumb-on--background:var(\n    --theme-switch-thumb-on--background--warning\n  );--theme-switch-thumb-on--background--hover:var(\n    --theme-switch-thumb-on--background--warning--hover\n  );--theme-switch-thumb-on--background--active:var(\n    --theme-switch-thumb-on--background--warning--active\n  );--theme-switch-on--border-color:var(\n    --theme-switch-on--border-color--warning\n  );--theme-switch-on--border-color--hover:var(\n    --theme-switch-on--border-color--warning--hover\n  );--theme-switch-on--border-color--active:var(\n    --theme-switch-on--border-color--warning--active\n  );--theme-switch-mixed--background:var(\n    --theme-switch-mixed--background--warning\n  );--theme-switch-mixed--background--hover:var(\n    --theme-switch-mixed--background--warning--hover\n  );--theme-switch-mixed--background--active:var(\n    --theme-switch-mixed--background--warning--active\n  );--theme-switch-thumb-mixed--background:var(\n    --theme-switch-thumb-mixed--background--warning\n  );--theme-switch-thumb-mixed--background--hover:var(\n    --theme-switch-thumb-mixed--background--warning--hover\n  );--theme-switch-thumb-mixed--background--active:var(\n    --theme-switch-thumb-mixed--background--warning--active\n  );--theme-switch-mixed--border-color:var(\n    --theme-switch-mixed--border-color--warning\n  );--theme-switch-mixed--border-color--hover:var(\n    --theme-switch-mixed--border-color--warning--hover\n  );--theme-switch-mixed--border-color--active:var(\n    --theme-switch-mixed--border-color--warning--active\n  )}:host(.ix-invalid--required:not(.disabled)) .slider{--theme-switch-off--background:var(\n    --theme-switch-off--background--invalid\n  );--theme-switch-off--background--hover:var(\n    --theme-switch-off--background--invalid--hover\n  );--theme-switch-off--background--active:var(\n    --theme-switch-off--background--invalid--active\n  );--theme-switch-thumb-off--background:var(\n    --theme-switch-thumb-off--background--invalid\n  );--theme-switch-thumb-off--background--hover:var(\n    --theme-switch-thumb-off--background--invalid--hover\n  );--theme-switch-thumb-off--background--active:var(\n    --theme-switch-thumb-off--background--invalid--active\n  );--theme-switch-off--border-color:var(\n    --theme-switch-off--border-color--invalid\n  );--theme-switch-off--border-color--hover:var(\n    --theme-switch-off--border-color--invalid--hover\n  );--theme-switch-off--border-color--active:var(\n    --theme-switch-off--border-color--invalid--active\n  );--theme-switch-on--background:var(\n    --theme-switch-on--background--invalid\n  );--theme-switch-on--background--hover:var(\n    --theme-switch-on--background--invalid--hover\n  );--theme-switch-on--background--active:var(\n    --theme-switch-on--background--invalid--active\n  );--theme-switch-thumb-on--background:var(\n    --theme-switch-thumb-on--background--invalid\n  );--theme-switch-thumb-on--background--hover:var(\n    --theme-switch-thumb-on--background--invalid--hover\n  );--theme-switch-thumb-on--background--active:var(\n    --theme-switch-thumb-on--background--invalid--active\n  );--theme-switch-on--border-color:var(\n    --theme-switch-on--border-color--invalid\n  );--theme-switch-on--border-color--hover:var(\n    --theme-switch-on--border-color--invalid--hover\n  );--theme-switch-on--border-color--active:var(\n    --theme-switch-on--border-color--invalid--active\n  );--theme-switch-mixed--background:var(\n    --theme-switch-mixed--background--invalid\n  );--theme-switch-mixed--background--hover:var(\n    --theme-switch-mixed--background--invalid--hover\n  );--theme-switch-mixed--background--active:var(\n    --theme-switch-mixed--background--invalid--active\n  );--theme-switch-thumb-mixed--background:var(\n    --theme-switch-thumb-mixed--background--invalid\n  );--theme-switch-thumb-mixed--background--hover:var(\n    --theme-switch-thumb-mixed--background--invalid--hover\n  );--theme-switch-thumb-mixed--background--active:var(\n    --theme-switch-thumb-mixed--background--invalid--active\n  );--theme-switch-mixed--border-color:var(\n    --theme-switch-mixed--border-color--invalid\n  );--theme-switch-mixed--border-color--hover:var(\n    --theme-switch-mixed--border-color--invalid--hover\n  );--theme-switch-mixed--border-color--active:var(\n    --theme-switch-mixed--border-color--invalid--active\n  )}:host(.ix-invalid:not(.disabled)) .slider{--theme-switch-off--background:var(\n    --theme-switch-off--background--invalid\n  );--theme-switch-off--background--hover:var(\n    --theme-switch-off--background--invalid--hover\n  );--theme-switch-off--background--active:var(\n    --theme-switch-off--background--invalid--active\n  );--theme-switch-thumb-off--background:var(\n    --theme-switch-thumb-off--background--invalid\n  );--theme-switch-thumb-off--background--hover:var(\n    --theme-switch-thumb-off--background--invalid--hover\n  );--theme-switch-thumb-off--background--active:var(\n    --theme-switch-thumb-off--background--invalid--active\n  );--theme-switch-off--border-color:var(\n    --theme-switch-off--border-color--invalid\n  );--theme-switch-off--border-color--hover:var(\n    --theme-switch-off--border-color--invalid--hover\n  );--theme-switch-off--border-color--active:var(\n    --theme-switch-off--border-color--invalid--active\n  );--theme-switch-on--background:var(\n    --theme-switch-on--background--invalid\n  );--theme-switch-on--background--hover:var(\n    --theme-switch-on--background--invalid--hover\n  );--theme-switch-on--background--active:var(\n    --theme-switch-on--background--invalid--active\n  );--theme-switch-thumb-on--background:var(\n    --theme-switch-thumb-on--background--invalid\n  );--theme-switch-thumb-on--background--hover:var(\n    --theme-switch-thumb-on--background--invalid--hover\n  );--theme-switch-thumb-on--background--active:var(\n    --theme-switch-thumb-on--background--invalid--active\n  );--theme-switch-on--border-color:var(\n    --theme-switch-on--border-color--invalid\n  );--theme-switch-on--border-color--hover:var(\n    --theme-switch-on--border-color--invalid--hover\n  );--theme-switch-on--border-color--active:var(\n    --theme-switch-on--border-color--invalid--active\n  );--theme-switch-mixed--background:var(\n    --theme-switch-mixed--background--invalid\n  );--theme-switch-mixed--background--hover:var(\n    --theme-switch-mixed--background--invalid--hover\n  );--theme-switch-mixed--background--active:var(\n    --theme-switch-mixed--background--invalid--active\n  );--theme-switch-thumb-mixed--background:var(\n    --theme-switch-thumb-mixed--background--invalid\n  );--theme-switch-thumb-mixed--background--hover:var(\n    --theme-switch-thumb-mixed--background--invalid--hover\n  );--theme-switch-thumb-mixed--background--active:var(\n    --theme-switch-thumb-mixed--background--invalid--active\n  );--theme-switch-mixed--border-color:var(\n    --theme-switch-mixed--border-color--invalid\n  );--theme-switch-mixed--border-color--hover:var(\n    --theme-switch-mixed--border-color--invalid--hover\n  );--theme-switch-mixed--border-color--active:var(\n    --theme-switch-mixed--border-color--invalid--active\n  )}';var a=undefined&&undefined.__decorate||function(e,t,o,r){var h=arguments.length,i=h<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,o):r,c;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")i=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)if(c=e[n])i=(h<3?c(i):h>3?c(t,o,i):c(t,o))||i;return h>3&&i&&Object.defineProperty(t,o,i),i};const d=class{constructor(o){e(this,o);this.checkedChange=t(this,"checkedChange",7);this.valueChange=t(this,"valueChange",7);this.ixBlur=t(this,"ixBlur",7);if(o.$hostElement$["s-ei"]){this.formInternals=o.$hostElement$["s-ei"]}else{this.formInternals=o.$hostElement$.attachInternals();o.$hostElement$["s-ei"]=this.formInternals}this.value="on";this.checked=false;this.disabled=false;this.indeterminate=false;this.textOn="On";this.textOff="Off";this.textIndeterminate="Mixed";this.hideText=false;this.required=false;this.touched=false}onCheckedChange(e){if(this.disabled){return}const t=this.indeterminate;const o=this.checked;if(this.indeterminate){this.indeterminate=false}this.checked=e;const{defaultPrevented:r}=this.checkedChange.emit(this.checked);if(r){this.indeterminate=t;this.checked=o}}componentWillLoad(){this.updateFormInternalValue()}updateFormInternalValue(){if(this.checked){this.formInternals.setFormValue(this.value)}else{this.formInternals.setFormValue(null)}}watchCheckedChange(){this.touched=true;this.updateFormInternalValue()}hasValidValue(){return Promise.resolve(this.checked)}getAssociatedFormElement(){return Promise.resolve(this.formInternals.form)}isTouched(){return Promise.resolve(this.touched)}updateClassMappings(){}render(){let e=this.textOff;if(this.checked){e=this.textOn}if(this.indeterminate){e=this.textIndeterminate}return o(r,{key:"2006d13cafca2fdd354b0481d45f06a08fba1eed",class:{disabled:this.disabled},onBlur:()=>this.ixBlur.emit(),onFocus:()=>this.touched=true},o("label",{key:"aa118214cf466c2dc95c494ae3762128258bbc0e",class:"wrapper"},o("button",{key:"952c8bd4175f6a87b424aab3740a79b9aafca0c4",role:"switch","aria-checked":i(this.checked),class:{switch:true,checked:this.checked,indeterminate:this.indeterminate},onClick:()=>this.onCheckedChange(!this.checked)},o("div",{key:"9eb7fd9a73b7cbc1b001c0d6a32972c94dd46b05",class:"slider"})),o("input",{key:"7fb350a1e6096e5e33011cf1c031d426b4a1d598",type:"checkbox",disabled:this.disabled,indeterminate:this.indeterminate,checked:this.checked,tabindex:0,"aria-hidden":i(true),"aria-checked":i(this.checked),onChange:e=>this.onCheckedChange(e.target.checked)}),!this.hideText&&o("ix-typography",{key:"d1dfac3bbcb0e01a3ea1862539c59467a3abd860",class:"label"},e)))}static get formAssociated(){return true}get hostElement(){return h(this)}static get watchers(){return{checked:["watchCheckedChange"]}}};a([c()],d.prototype,"updateClassMappings",null);d.style=n;export{d as ix_toggle};
+//# sourceMappingURL=p-0443dc8d.entry.js.map

package/dist/siemens-ix/p-0443dc8d.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["toggleCss","Toggle","constructor","hostRef","this","value","checked","disabled","indeterminate","textOn","textOff","textIndeterminate","hideText","required","touched","onCheckedChange","newChecked","wasIndeterminate","oldChecked","defaultPrevented","checkedChange","emit","componentWillLoad","updateFormInternalValue","formInternals","setFormValue","watchCheckedChange","hasValidValue","Promise","resolve","getAssociatedFormElement","form","isTouched","updateClassMappings","render","toggleText","h","Host","key","class","onBlur","ixBlur","onFocus","role","a11yBoolean","switch","onClick","type","tabindex","onChange","event","target","__decorate","HookValidationLifecycle","prototype"],"sources":["src/components/toggle/toggle.scss?tag=ix-toggle&encapsulation=shadow","src/components/toggle/toggle.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: inline-flex;\n  flex-direction: row;\n  position: relative;\n  height: 1.5rem;\n  margin-block-start: 0.25rem;\n  margin-block-end: 0.25rem;\n\n  input[type='checkbox'] {\n    display: none;\n  }\n\n  .wrapper {\n    display: flex;\n    align-items: flex-start;\n    width: 100%;\n    height: 100%;\n  }\n\n  .label {\n    display: inline-block;\n    white-space: normal;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    margin-block-start: 0.125rem;\n    margin-inline-start: 0.5625rem;\n  }\n\n  .switch {\n    all: unset;\n    position: relative;\n    display: inline-block;\n    width: 3rem;\n    min-width: 3rem;\n    max-width: 3rem;\n    height: 1.5rem;\n  }\n\n  .slider {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: var(--theme-switch-off--background);\n    transition: var(--theme-default-time);\n    border-radius: 1.5rem;\n    border: 0.0625rem solid transparent;\n  }\n\n  .slider:before {\n    position: absolute;\n    content: '';\n    height: 1.125rem;\n    width: 1.125rem;\n    left: 0.125rem;\n    bottom: 0.125rem;\n    background-color: var(--theme-switch-thumb-off--background);\n    transition: var(--theme-default-time);\n    border-radius: 50%;\n  }\n\n  .switch.checked > .slider::before {\n    background-color: var(--theme-switch-thumb-on--background);\n    transform: translateX(1.5rem);\n  }\n\n  .switch > .slider {\n    border-color: var(--theme-switch-off--border-color);\n  }\n\n  .switch:hover > .slider {\n    background-color: var(--theme-switch-off--background--hover);\n    border-color: var(--theme-switch-off--border-color--hover);\n  }\n\n  .switch:hover > .slider:before {\n    background-color: var(--theme-switch-thumb-off--background--hover);\n  }\n\n  .switch:active > .slider {\n    background-color: var(--theme-switch-off--background--active);\n    border-color: var(--theme-switch-off--border-color--active);\n  }\n\n  .switch:active > .slider:before {\n    background-color: var(--theme-switch-thumb-off--background--active);\n  }\n\n  .switch.checked > .slider {\n    background-color: var(--theme-switch-on--background);\n    border-color: var(--theme-switch-on--border-color);\n  }\n\n  .switch.checked:hover > .slider {\n    background-color: var(--theme-switch-on--background--hover);\n    border-color: var(--theme-switch-on--border-color--hover);\n  }\n\n  .switch.checked:hover > .slider:before {\n    background-color: var(--theme-switch-thumb-on--background--hover);\n  }\n\n  .switch.checked:active > .slider {\n    background-color: var(--theme-switch-on--background--active);\n    border-color: var(--theme-switch-on--border-color--active);\n  }\n\n  .switch.checked:active > .slider:before {\n    background-color: var(--theme-switch-thumb-on--background--active);\n  }\n\n  .switch.indeterminate > .slider::before {\n    transform: translateX(0.75rem);\n  }\n}\n\n:host(:not(.disabled)) {\n  .wrapper {\n    cursor: pointer;\n  }\n\n  .switch:focus-visible > .slider {\n    outline: 0.0625rem solid var(--theme-color-focus-bdr);\n    outline-offset: 0.0625rem;\n  }\n}\n\n:host(.disabled) {\n  pointer-events: none;\n\n  .switch {\n    opacity: 0.5;\n  }\n\n  .switch > .slider {\n    background-color: var(--theme-switch-off--background--disabled);\n  }\n\n  .switch > .slider:before {\n    background-color: var(--theme-switch-thumb-off--background--disabled);\n  }\n\n  .switch.checked > .slider {\n    background-color: var(--theme-switch-on--background--disabled);\n  }\n\n  .switch.checked > .slider:before {\n    background-color: var(--theme-switch-thumb-on--background--disabled);\n  }\n\n  .label {\n    color: var(--theme-color-weak-text);\n  }\n}\n\n@mixin toggle-variant($selector) {\n  :host(#{$selector}:not(.disabled)) {\n    .slider {\n      @content;\n    }\n  }\n}\n\n@mixin define-toggle-vars($state, $type) {\n  --theme-switch-#{$state}--background: var(\n    --theme-switch-#{$state}--background--#{$type}\n  );\n  --theme-switch-#{$state}--background--hover: var(\n    --theme-switch-#{$state}--background--#{$type}--hover\n  );\n  --theme-switch-#{$state}--background--active: var(\n    --theme-switch-#{$state}--background--#{$type}--active\n  );\n\n  --theme-switch-thumb-#{$state}--background: var(\n    --theme-switch-thumb-#{$state}--background--#{$type}\n  );\n  --theme-switch-thumb-#{$state}--background--hover: var(\n    --theme-switch-thumb-#{$state}--background--#{$type}--hover\n  );\n  --theme-switch-thumb-#{$state}--background--active: var(\n    --theme-switch-thumb-#{$state}--background--#{$type}--active\n  );\n\n  --theme-switch-#{$state}--border-color: var(\n    --theme-switch-#{$state}--border-color--#{$type}\n  );\n  --theme-switch-#{$state}--border-color--hover: var(\n    --theme-switch-#{$state}--border-color--#{$type}--hover\n  );\n  --theme-switch-#{$state}--border-color--active: var(\n    --theme-switch-#{$state}--border-color--#{$type}--active\n  );\n}\n\n@include toggle-variant($selector: '.ix-info') {\n  @include define-toggle-vars('off', 'info');\n  @include define-toggle-vars('on', 'info');\n  @include define-toggle-vars('mixed', 'info');\n}\n\n@include toggle-variant($selector: '.ix-warning') {\n  @include define-toggle-vars('off', 'warning');\n  @include define-toggle-vars('on', 'warning');\n  @include define-toggle-vars('mixed', 'warning');\n}\n\n@include toggle-variant($selector: '.ix-invalid--required') {\n  @include define-toggle-vars('off', 'invalid');\n  @include define-toggle-vars('on', 'invalid');\n  @include define-toggle-vars('mixed', 'invalid');\n}\n\n@include toggle-variant($selector: '.ix-invalid') {\n  @include define-toggle-vars('off', 'invalid');\n  @include define-toggle-vars('on', 'invalid');\n  @include define-toggle-vars('mixed', 'invalid');\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  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { a11yBoolean } from '../utils/a11y';\nimport { IxFormComponent, HookValidationLifecycle } from '../utils/input';\n\n/**\n * @form-ready\n */\n@Component({\n  tag: 'ix-toggle',\n  styleUrl: 'toggle.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Toggle implements IxFormComponent<string> {\n  @AttachInternals() formInternals!: ElementInternals;\n\n  @Element() hostElement!: HTMLIxToggleElement;\n\n  /**\n   * Name of the checkbox component\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * Value of the checkbox component\n   */\n  @Prop({ reflect: true }) value: string = 'on';\n\n  /**\n   * Whether the slide-toggle element is checked or not.\n   */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /**\n   * Whether the slide-toggle element is disabled or not.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * If true the control is in indeterminate state\n   */\n  @Prop({ mutable: true, reflect: true }) indeterminate = false;\n\n  /**\n   * Text for on state\n   */\n  @Prop() textOn = 'On';\n\n  /**\n   * Text for off state\n   */\n  @Prop() textOff = 'Off';\n\n  /**\n   * Text for indeterminate state\n   */\n  @Prop() textIndeterminate = 'Mixed';\n\n  /**\n   * Hide `on` and `off` text\n   */\n  @Prop() hideText = false;\n\n  /**\n   * Required state of the checkbox component.\n   *\n   * If true, checkbox needs to be checked to be valid\n   */\n  @Prop({ reflect: true }) required = false;\n\n  /**\n   * An event will be dispatched each time the slide-toggle changes its value.\n   */\n  @Event() checkedChange!: EventEmitter<boolean>;\n\n  /** @internal */\n  @Event() valueChange!: EventEmitter<string>;\n\n  /**\n   * An event will be dispatched each time the toggle is blurred.\n   */\n  @Event() ixBlur!: EventEmitter<void>;\n\n  private touched = false;\n\n  onCheckedChange(newChecked: boolean) {\n    if (this.disabled) {\n      return;\n    }\n\n    const wasIndeterminate = this.indeterminate;\n    const oldChecked = this.checked;\n\n    if (this.indeterminate) {\n      this.indeterminate = false;\n    }\n\n    this.checked = newChecked;\n\n    const { defaultPrevented } = this.checkedChange.emit(this.checked);\n\n    if (defaultPrevented) {\n      this.indeterminate = wasIndeterminate;\n      this.checked = oldChecked;\n    }\n  }\n\n  componentWillLoad() {\n    this.updateFormInternalValue();\n  }\n\n  updateFormInternalValue(): void {\n    if (this.checked) {\n      this.formInternals.setFormValue(this.value);\n    } else {\n      this.formInternals.setFormValue(null);\n    }\n  }\n\n  @Watch('checked')\n  watchCheckedChange() {\n    this.touched = true;\n    this.updateFormInternalValue();\n  }\n\n  /** @internal */\n  @Method()\n  hasValidValue(): Promise<boolean> {\n    return Promise.resolve(this.checked);\n  }\n\n  /** @internal */\n  @Method()\n  getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n    return Promise.resolve(this.formInternals.form);\n  }\n\n  /** @internal */\n  @Method()\n  isTouched(): Promise<boolean> {\n    return Promise.resolve(this.touched);\n  }\n\n  @HookValidationLifecycle()\n  updateClassMappings() {\n    /** This function is intentionally empty */\n  }\n\n  render() {\n    let toggleText = this.textOff;\n\n    if (this.checked) {\n      toggleText = this.textOn;\n    }\n\n    if (this.indeterminate) {\n      toggleText = this.textIndeterminate;\n    }\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n        onBlur={() => this.ixBlur.emit()}\n        onFocus={() => (this.touched = true)}\n      >\n        <label class=\"wrapper\">\n          <button\n            role=\"switch\"\n            aria-checked={a11yBoolean(this.checked)}\n            class={{\n              switch: true,\n              checked: this.checked,\n              indeterminate: this.indeterminate,\n            }}\n            onClick={() => this.onCheckedChange(!this.checked)}\n          >\n            <div class=\"slider\"></div>\n          </button>\n          <input\n            type=\"checkbox\"\n            disabled={this.disabled}\n            indeterminate={this.indeterminate}\n            checked={this.checked}\n            tabindex={0}\n            aria-hidden={a11yBoolean(true)}\n            aria-checked={a11yBoolean(this.checked)}\n            onChange={(event) =>\n              this.onCheckedChange((event.target as HTMLInputElement).checked)\n            }\n          />\n          {!this.hideText && (\n            <ix-typography class=\"label\">{toggleText}</ix-typography>\n          )}\n        </label>\n      </Host>\n    );\n  }\n}\n"],"mappings":"wIAAA,MAAMA,EAAY,ood,iXCiCLC,EAAM,MANnB,WAAAC,CAAAC,G,2SAmB2BC,KAAKC,MAAW,KAKDD,KAAOE,QAAG,MAK1CF,KAAQG,SAAG,MAKqBH,KAAaI,cAAG,MAKhDJ,KAAMK,OAAG,KAKTL,KAAOM,QAAG,MAKVN,KAAiBO,kBAAG,QAKpBP,KAAQQ,SAAG,MAOMR,KAAQS,SAAG,MAe5BT,KAAOU,QAAG,KAmHnB,CAjHC,eAAAC,CAAgBC,GACd,GAAIZ,KAAKG,SAAU,CACjB,M,CAGF,MAAMU,EAAmBb,KAAKI,cAC9B,MAAMU,EAAad,KAAKE,QAExB,GAAIF,KAAKI,cAAe,CACtBJ,KAAKI,cAAgB,K,CAGvBJ,KAAKE,QAAUU,EAEf,MAAMG,iBAAEA,GAAqBf,KAAKgB,cAAcC,KAAKjB,KAAKE,SAE1D,GAAIa,EAAkB,CACpBf,KAAKI,cAAgBS,EACrBb,KAAKE,QAAUY,C,EAInB,iBAAAI,GACElB,KAAKmB,yB,CAGP,uBAAAA,GACE,GAAInB,KAAKE,QAAS,CAChBF,KAAKoB,cAAcC,aAAarB,KAAKC,M,KAChC,CACLD,KAAKoB,cAAcC,aAAa,K,EAKpC,kBAAAC,GACEtB,KAAKU,QAAU,KACfV,KAAKmB,yB,CAKP,aAAAI,GACE,OAAOC,QAAQC,QAAQzB,KAAKE,Q,CAK9B,wBAAAwB,GACE,OAAOF,QAAQC,QAAQzB,KAAKoB,cAAcO,K,CAK5C,SAAAC,GACE,OAAOJ,QAAQC,QAAQzB,KAAKU,Q,CAI9B,mBAAAmB,G,CAIA,MAAAC,GACE,IAAIC,EAAa/B,KAAKM,QAEtB,GAAIN,KAAKE,QAAS,CAChB6B,EAAa/B,KAAKK,M,CAGpB,GAAIL,KAAKI,cAAe,CACtB2B,EAAa/B,KAAKO,iB,CAEpB,OACEyB,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACLhC,SAAUH,KAAKG,UAEjBiC,OAAQ,IAAMpC,KAAKqC,OAAOpB,OAC1BqB,QAAS,IAAOtC,KAAKU,QAAU,MAE/BsB,EAAO,SAAAE,IAAA,2CAAAC,MAAM,WACXH,EAAA,UAAAE,IAAA,2CACEK,KAAK,SAAQ,eACCC,EAAYxC,KAAKE,SAC/BiC,MAAO,CACLM,OAAQ,KACRvC,QAASF,KAAKE,QACdE,cAAeJ,KAAKI,eAEtBsC,QAAS,IAAM1C,KAAKW,iBAAiBX,KAAKE,UAE1C8B,EAAA,OAAAE,IAAA,2CAAKC,MAAM,YAEbH,EACE,SAAAE,IAAA,2CAAAS,KAAK,WACLxC,SAAUH,KAAKG,SACfC,cAAeJ,KAAKI,cACpBF,QAASF,KAAKE,QACd0C,SAAU,EACG,cAAAJ,EAAY,MACX,eAAAA,EAAYxC,KAAKE,SAC/B2C,SAAWC,GACT9C,KAAKW,gBAAiBmC,EAAMC,OAA4B7C,YAG1DF,KAAKQ,UACLwB,EAAA,iBAAAE,IAAA,2CAAeC,MAAM,SAASJ,I,yIAhDxCiB,EAAA,CADCC,KAGApD,EAAAqD,UAAA,4B","ignoreList":[]}

package/dist/siemens-ix/p-054136c2.entry.js

@@ -0,0 +1,2 @@
+import{r as t,c as e,h as o,H as i}from"./p-BNpBEtDH.js";const a=":host{display:block;background-color:var(--theme-menu--background);border-radius:4px;position:relative;width:-moz-min-content;width:min-content}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-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 ix-layout-grid{border-radius:0.25rem;box-shadow:var(--theme-shadow-4)}:host .no-padding{padding:0}:host ix-col{display:flex;flex-direction:column;padding:0}:host .flex{display:flex;justify-content:center;flex-direction:column}@media (min-width: 576px){:host{min-width:-moz-max-content;min-width:max-content}:host .btn-select-date-container{display:inline-flex;flex-grow:1}:host .btn-select-date-container ix-button{margin-left:auto;margin-top:auto}:host .min-width{width:-moz-min-content;width:min-content}}:host .individual{box-shadow:none;border:none}:host .btn-select-date-container{padding:0 1rem 1rem}@media (max-width: 576px){:host .btn-select-date-container .btn-select-date{width:100%}}";const s=class{constructor(o){t(this,o);this.timeChange=e(this,"timeChange",7);this.dateChange=e(this,"dateChange",7);this.dateSelect=e(this,"dateSelect",7);this.range=true;this.showHour=true;this.showMinutes=true;this.showSeconds=true;this.dateFormat="yyyy/LL/dd";this.timeFormat="HH:mm:ss";this.showTimeReference=false;this.i18nDone="Done";this.i18nTime="Time";this.weekStartIndex=0;this.showWeekNumbers=false}async onDone(){var t,e,o,i;const a=await((t=this.datePickerElement)===null||t===void 0?void 0:t.getCurrentDate());const s=await((e=this.timePickerElement)===null||e===void 0?void 0:e.getCurrentTime());this.dateSelect.emit({from:(o=a===null||a===void 0?void 0:a.from)!==null&&o!==void 0?o:"",to:(i=a===null||a===void 0?void 0:a.to)!==null&&i!==void 0?i:"",time:s!==null&&s!==void 0?s:""})}async onDateChange(t){t.preventDefault();t.stopPropagation();const{detail:e}=t;this.dateChange.emit(e)}async onTimeChange(t){t.preventDefault();t.stopPropagation();const{detail:e}=t;this.timeChange.emit(e)}render(){return o(i,{key:"7f08479621490c4064f5e0ba7c54f10730fabfbb"},o("ix-layout-grid",{key:"1c073d0809bec9ea46b1fa1882f8aa4830869578",class:"no-padding"},o("ix-row",{key:"523b1b08bcc3def18772b0b04c744863603f561d"},o("ix-col",{key:"3092eb9778936db8559cc24e39c648b309543096"},o("ix-date-picker",{key:"b225445c1dd4b5fbbbca4e6152e98ac70a0ce7d0",ref:t=>this.datePickerElement=t,corners:"left",range:this.range,onDateChange:t=>this.onDateChange(t),from:this.from,to:this.to,format:this.dateFormat,minDate:this.minDate,maxDate:this.maxDate,weekStartIndex:this.weekStartIndex,standaloneAppearance:false,locale:this.locale,showWeekNumbers:this.showWeekNumbers})),o("ix-col",{key:"57a99bb035b4a03f0b6314bc91a5f93080c3b78d"},o("ix-time-picker",{key:"0962e9171c364b9cf6a23bb9d4fe6efcbe56a702",class:"min-width",ref:t=>this.timePickerElement=t,standaloneAppearance:false,showHour:this.showHour,showMinutes:this.showMinutes,showSeconds:this.showSeconds,onTimeChange:t=>this.onTimeChange(t),format:this.timeFormat,textTime:this.i18nTime,time:this.time}),o("div",{key:"df8026657b45a30edfab788f913d968909fc9ad7",class:"btn-select-date-container"},o("ix-button",{key:"30274b4bc1dcbf89415f8d1ca8f5a46010320ec9",class:"btn-select-date",onClick:()=>this.onDone()},this.i18nDone))))))}};s.style=a;export{s as ix_datetime_picker};
+//# sourceMappingURL=p-054136c2.entry.js.map

package/dist/siemens-ix/{p-518b1e6b.entry.js.map → p-054136c2.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["datetimePickerCss","DatetimePicker","constructor","hostRef","this","range","showHour","showMinutes","showSeconds","dateFormat","timeFormat","showTimeReference","i18nDone","i18nTime","weekStartIndex","showWeekNumbers","onDone","date","_a","datePickerElement","getCurrentDate","time","_b","timePickerElement","getCurrentTime","dateSelect","emit","from","_c","to","_d","onDateChange","event","preventDefault","stopPropagation","detail","dateChange","onTimeChange","timeChange","render","h","Host","key","class","ref","corners","format","minDate","maxDate","standaloneAppearance","locale","textTime","onClick"],"sources":["src/components/datetime-picker/datetime-picker.scss?tag=ix-datetime-picker&encapsulation=shadow","src/components/datetime-picker/datetime-picker.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: block;\n  background-color: var(--theme-menu--background);\n  border-radius: 4px;\n  position: relative;\n  width: min-content;\n\n  .no-padding {\n    padding: 0;\n  }\n\n  ix-col {\n    display: flex;\n    flex-direction: column;\n    padding: 0;\n  }\n\n  .flex {\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n  }\n\n  @media (min-width: 576px) {\n    min-width: max-content;\n\n    .btn-select-date-container {\n      display: inline-flex;\n      flex-grow: 1;\n\n      ix-button {\n        margin-left: auto;\n        margin-top: auto;\n      }\n    }\n\n    .min-width {\n      width: min-content;\n    }\n  }\n\n  .individual {\n    box-shadow: none;\n    border: none;\n  }\n\n  .btn-select-date-container {\n    padding: 0 $default-space $default-space;\n\n    @media (max-width: 576px) {\n      & .btn-select-date {\n        width: 100%;\n      }\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport type { DateChangeEvent } from '../date-picker/date-picker';\nimport { IxDatePickerComponent } from '../date-picker/date-picker-component';\n\nexport type DateTimeSelectEvent = {\n  from?: string;\n  to?: string;\n  time: string;\n};\n\nexport type DateTimeDateChangeEvent =\n  | string\n  | Omit<DateTimeSelectEvent, 'time'>;\n\n@Component({\n  tag: 'ix-datetime-picker',\n  styleUrl: 'datetime-picker.scss',\n  shadow: true,\n})\nexport class DatetimePicker\n  implements Omit<IxDatePickerComponent, 'corners' | 'format'>\n{\n  /**\n   * If true a date-range can be selected (from/to).\n   */\n  @Prop() range = true;\n\n  /**\n   * Show hour input\n   */\n  @Prop() showHour = true;\n\n  /**\n   * Show minutes input\n   */\n  @Prop() showMinutes = true;\n\n  /**\n   * Show seconds input\n   */\n  @Prop() showSeconds = true;\n\n  /**\n   * The earliest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   *\n   * @since 1.1.0\n   */\n  @Prop() minDate?: string;\n\n  /**\n   * The latest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   *\n   * @since 1.1.0\n   */\n  @Prop() maxDate?: string;\n\n  /**\n   * Date format string.\n   * See {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens.\n   *\n   * @since 1.1.0\n   */\n  @Prop() dateFormat: string = 'yyyy/LL/dd';\n\n  /**\n   * Time format string.\n   * See {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens.\n   *\n   * @since 1.1.0\n   */\n  @Prop() timeFormat: string = 'HH:mm:ss';\n\n  /**\n   * The selected starting date. If the picker is not in range mode this is the selected date.\n   * Format has to match the `format` property.\n   *\n   * @since 1.1.0\n   */\n  @Prop() from?: string;\n\n  /**\n   * The selected end date. If the the picker is not in range mode this property has no impact.\n   * Format has to match the `format` property.\n   *\n   * @since 1.1.0\n   */\n  @Prop() to?: string;\n\n  /**\n   * Select time with format string\n   *\n   * @since 1.1.0\n   */\n  @Prop() time?: string;\n\n  /**\n   * Show time reference input\n   * Time reference is default aligned with @see {this.timeFormat}\n   *\n   * @since 1.1.0\n   */\n  @Prop() showTimeReference: boolean = false;\n\n  /**\n   * Set time reference\n   */\n  @Prop() timeReference?: 'AM' | 'PM';\n\n  /**\n   * Text of date select button\n   *\n   * @since 2.1.0\n   */\n  @Prop({ attribute: 'i18n-done' }) i18nDone: string = 'Done';\n\n  /**\n   * Top label of time picker\n   *\n   * @since 3.0.0\n   */\n  @Prop() i18nTime: string = 'Time';\n\n  /**\n   * The index of which day to start the week on, based on the Locale#weekdays array.\n   * E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.\n   *\n   * @since 2.1.0\n   */\n  @Prop() weekStartIndex = 0;\n\n  /**\n   * Format of time string\n   * See {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens.\n   *\n   * @since 2.1.0\n   */\n  @Prop() locale?: string;\n\n  /**\n   * Shows week numbers displayed on the left side of the date picker\n   *\n   * @since 3.0.0\n   */\n  @Prop() showWeekNumbers = false;\n\n  /**\n\n   * Time change\n   *\n   * @since 1.1.0\n   */\n  @Event() timeChange!: EventEmitter<string>;\n\n  /**\n   * Date change\n   *\n   * @since 1.1.0\n   */\n  @Event() dateChange!: EventEmitter<DateTimeDateChangeEvent>;\n\n  /**\n   * Datetime selection event is fired after confirm button is pressed\n   *\n   * @since 1.1.0\n   */\n  @Event() dateSelect!: EventEmitter<DateTimeSelectEvent>;\n\n  private datePickerElement?: HTMLIxDatePickerElement;\n  private timePickerElement?: HTMLIxTimePickerElement;\n\n  private async onDone() {\n    const date = await this.datePickerElement?.getCurrentDate();\n    const time = await this.timePickerElement?.getCurrentTime();\n\n    this.dateSelect.emit({\n      from: date?.from ?? '',\n      to: date?.to ?? '',\n      time: time ?? '',\n    });\n  }\n\n  private async onDateChange(event: CustomEvent<string | DateChangeEvent>) {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const { detail: date } = event;\n    this.dateChange.emit(date);\n  }\n\n  private async onTimeChange(event: CustomEvent<string>) {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const { detail: time } = event;\n    this.timeChange.emit(time);\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-layout-grid class=\"no-padding\">\n          <ix-row>\n            <ix-col>\n              <ix-date-picker\n                ref={(ref) => (this.datePickerElement = ref)}\n                corners=\"left\"\n                range={this.range}\n                onDateChange={(event) => this.onDateChange(event)}\n                from={this.from}\n                to={this.to}\n                format={this.dateFormat}\n                minDate={this.minDate}\n                maxDate={this.maxDate}\n                weekStartIndex={this.weekStartIndex}\n                standaloneAppearance={false}\n                locale={this.locale}\n                showWeekNumbers={this.showWeekNumbers}\n              ></ix-date-picker>\n            </ix-col>\n\n            <ix-col>\n              <ix-time-picker\n                class=\"min-width\"\n                ref={(ref) => (this.timePickerElement = ref)}\n                standaloneAppearance={false}\n                showHour={this.showHour}\n                showMinutes={this.showMinutes}\n                showSeconds={this.showSeconds}\n                onTimeChange={(event) => this.onTimeChange(event)}\n                format={this.timeFormat}\n                textTime={this.i18nTime}\n                time={this.time}\n              ></ix-time-picker>\n              <div class=\"btn-select-date-container\">\n                <ix-button\n                  class=\"btn-select-date\"\n                  onClick={() => this.onDone()}\n                >\n                  {this.i18nDone}\n                </ix-button>\n              </div>\n            </ix-col>\n          </ix-row>\n        </ix-layout-grid>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAoB,2/C,MC4BbC,EAAc,MAL3B,WAAAC,CAAAC,G,+HAWUC,KAAKC,MAAG,KAKRD,KAAQE,SAAG,KAKXF,KAAWG,YAAG,KAKdH,KAAWI,YAAG,KAwBdJ,KAAUK,WAAW,aAQrBL,KAAUM,WAAW,WA+BrBN,KAAiBO,kBAAY,MAYHP,KAAQQ,SAAW,OAO7CR,KAAQS,SAAW,OAQnBT,KAAcU,eAAG,EAejBV,KAAeW,gBAAG,KAwG3B,CA7ES,YAAMC,G,YACZ,MAAMC,SAAaC,EAAAd,KAAKe,qBAAmB,MAAAD,SAAA,SAAAA,EAAAE,kBAC3C,MAAMC,SAAaC,EAAAlB,KAAKmB,qBAAmB,MAAAD,SAAA,SAAAA,EAAAE,kBAE3CpB,KAAKqB,WAAWC,KAAK,CACnBC,MAAMC,EAAAX,IAAA,MAAAA,SAAI,SAAJA,EAAMU,QAAI,MAAAC,SAAA,EAAAA,EAAI,GACpBC,IAAIC,EAAAb,IAAA,MAAAA,SAAI,SAAJA,EAAMY,MAAE,MAAAC,SAAA,EAAAA,EAAI,GAChBT,KAAMA,IAAI,MAAJA,SAAA,EAAAA,EAAQ,I,CAIV,kBAAMU,CAAaC,GACzBA,EAAMC,iBACND,EAAME,kBAEN,MAAQC,OAAQlB,GAASe,EACzB5B,KAAKgC,WAAWV,KAAKT,E,CAGf,kBAAMoB,CAAaL,GACzBA,EAAMC,iBACND,EAAME,kBAEN,MAAQC,OAAQd,GAASW,EACzB5B,KAAKkC,WAAWZ,KAAKL,E,CAGvB,MAAAkB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAgB,kBAAAE,IAAA,2CAAAC,MAAM,cACpBH,EAAA,UAAAE,IAAA,4CACEF,EAAA,UAAAE,IAAA,4CACEF,EAAA,kBAAAE,IAAA,2CACEE,IAAMA,GAASxC,KAAKe,kBAAoByB,EACxCC,QAAQ,OACRxC,MAAOD,KAAKC,MACZ0B,aAAeC,GAAU5B,KAAK2B,aAAaC,GAC3CL,KAAMvB,KAAKuB,KACXE,GAAIzB,KAAKyB,GACTiB,OAAQ1C,KAAKK,WACbsC,QAAS3C,KAAK2C,QACdC,QAAS5C,KAAK4C,QACdlC,eAAgBV,KAAKU,eACrBmC,qBAAsB,MACtBC,OAAQ9C,KAAK8C,OACbnC,gBAAiBX,KAAKW,mBAI1ByB,EAAA,UAAAE,IAAA,4CACEF,EAAA,kBAAAE,IAAA,2CACEC,MAAM,YACNC,IAAMA,GAASxC,KAAKmB,kBAAoBqB,EACxCK,qBAAsB,MACtB3C,SAAUF,KAAKE,SACfC,YAAaH,KAAKG,YAClBC,YAAaJ,KAAKI,YAClB6B,aAAeL,GAAU5B,KAAKiC,aAAaL,GAC3Cc,OAAQ1C,KAAKM,WACbyC,SAAU/C,KAAKS,SACfQ,KAAMjB,KAAKiB,OAEbmB,EAAK,OAAAE,IAAA,2CAAAC,MAAM,6BACTH,EACE,aAAAE,IAAA,2CAAAC,MAAM,kBACNS,QAAS,IAAMhD,KAAKY,UAEnBZ,KAAKQ,c","ignoreList":[]}
+{"version":3,"names":["datetimePickerCss","DatetimePicker","constructor","hostRef","this","range","showHour","showMinutes","showSeconds","dateFormat","timeFormat","showTimeReference","i18nDone","i18nTime","weekStartIndex","showWeekNumbers","onDone","date","_a","datePickerElement","getCurrentDate","time","_b","timePickerElement","getCurrentTime","dateSelect","emit","from","_c","to","_d","onDateChange","event","preventDefault","stopPropagation","detail","dateChange","onTimeChange","timeChange","render","h","Host","key","class","ref","corners","format","minDate","maxDate","standaloneAppearance","locale","textTime","onClick"],"sources":["src/components/datetime-picker/datetime-picker.scss?tag=ix-datetime-picker&encapsulation=shadow","src/components/datetime-picker/datetime-picker.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: block;\n  background-color: var(--theme-menu--background);\n  border-radius: 4px;\n  position: relative;\n  width: min-content;\n\n  ix-layout-grid {\n    border-radius: 0.25rem;\n    box-shadow: var(--theme-shadow-4);\n  }\n\n  .no-padding {\n    padding: 0;\n  }\n\n  ix-col {\n    display: flex;\n    flex-direction: column;\n    padding: 0;\n  }\n\n  .flex {\n    display: flex;\n    justify-content: center;\n    flex-direction: column;\n  }\n\n  @media (min-width: 576px) {\n    min-width: max-content;\n\n    .btn-select-date-container {\n      display: inline-flex;\n      flex-grow: 1;\n\n      ix-button {\n        margin-left: auto;\n        margin-top: auto;\n      }\n    }\n\n    .min-width {\n      width: min-content;\n    }\n  }\n\n  .individual {\n    box-shadow: none;\n    border: none;\n  }\n\n  .btn-select-date-container {\n    padding: 0 $default-space $default-space;\n\n    @media (max-width: 576px) {\n      & .btn-select-date {\n        width: 100%;\n      }\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport type { DateChangeEvent } from '../date-picker/date-picker';\nimport { IxDatePickerComponent } from '../date-picker/date-picker-component';\n\nexport type DateTimeSelectEvent = {\n  from?: string;\n  to?: string;\n  time: string;\n};\n\nexport type DateTimeDateChangeEvent =\n  | string\n  | Omit<DateTimeSelectEvent, 'time'>;\n\n@Component({\n  tag: 'ix-datetime-picker',\n  styleUrl: 'datetime-picker.scss',\n  shadow: true,\n})\nexport class DatetimePicker\n  implements Omit<IxDatePickerComponent, 'corners' | 'format'>\n{\n  /**\n   * If true a date-range can be selected (from/to).\n   */\n  @Prop() range = true;\n\n  /**\n   * Show hour input\n   */\n  @Prop() showHour = true;\n\n  /**\n   * Show minutes input\n   */\n  @Prop() showMinutes = true;\n\n  /**\n   * Show seconds input\n   */\n  @Prop() showSeconds = true;\n\n  /**\n   * The earliest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   */\n  @Prop() minDate?: string;\n\n  /**\n   * The latest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   */\n  @Prop() maxDate?: string;\n\n  /**\n   * Date format string.\n   * See {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens.\n   */\n  @Prop() dateFormat: string = 'yyyy/LL/dd';\n\n  /**\n   * Time format string.\n   * See {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens.\n   */\n  @Prop() timeFormat: string = 'HH:mm:ss';\n\n  /**\n   * The selected starting date. If the picker is not in range mode this is the selected date.\n   * Format has to match the `format` property.\n   */\n  @Prop() from?: string;\n\n  /**\n   * The selected end date. If the the picker is not in range mode this property has no impact.\n   * Format has to match the `format` property.\n   */\n  @Prop() to?: string;\n\n  /**\n   * Select time with format string\n   */\n  @Prop() time?: string;\n\n  /**\n   * Show time reference input\n   * Time reference is default aligned with @see {this.timeFormat}\n   */\n  @Prop() showTimeReference: boolean = false;\n\n  /**\n   * Set time reference\n   */\n  @Prop() timeReference?: 'AM' | 'PM';\n\n  /**\n   * Text of date select button\n   */\n  @Prop({ attribute: 'i18n-done' }) i18nDone: string = 'Done';\n\n  /**\n   * Top label of time picker\n   *\n   * @since 3.0.0\n   */\n  @Prop() i18nTime: string = 'Time';\n\n  /**\n   * The index of which day to start the week on, based on the Locale#weekdays array.\n   * E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.\n   */\n  @Prop() weekStartIndex = 0;\n\n  /**\n   * Format of time string\n   * See {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens.\n   */\n  @Prop() locale?: string;\n\n  /**\n   * Shows week numbers displayed on the left side of the date picker\n   *\n   * @since 3.0.0\n   */\n  @Prop() showWeekNumbers = false;\n\n  /**\n   * Time change\n   */\n  @Event() timeChange!: EventEmitter<string>;\n\n  /**\n   * Date change\n   */\n  @Event() dateChange!: EventEmitter<DateTimeDateChangeEvent>;\n\n  /**\n   * Datetime selection event is fired after confirm button is pressed\n   */\n  @Event() dateSelect!: EventEmitter<DateTimeSelectEvent>;\n\n  private datePickerElement?: HTMLIxDatePickerElement;\n  private timePickerElement?: HTMLIxTimePickerElement;\n\n  private async onDone() {\n    const date = await this.datePickerElement?.getCurrentDate();\n    const time = await this.timePickerElement?.getCurrentTime();\n\n    this.dateSelect.emit({\n      from: date?.from ?? '',\n      to: date?.to ?? '',\n      time: time ?? '',\n    });\n  }\n\n  private async onDateChange(event: CustomEvent<string | DateChangeEvent>) {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const { detail: date } = event;\n    this.dateChange.emit(date);\n  }\n\n  private async onTimeChange(event: CustomEvent<string>) {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const { detail: time } = event;\n    this.timeChange.emit(time);\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-layout-grid class=\"no-padding\">\n          <ix-row>\n            <ix-col>\n              <ix-date-picker\n                ref={(ref) => (this.datePickerElement = ref)}\n                corners=\"left\"\n                range={this.range}\n                onDateChange={(event) => this.onDateChange(event)}\n                from={this.from}\n                to={this.to}\n                format={this.dateFormat}\n                minDate={this.minDate}\n                maxDate={this.maxDate}\n                weekStartIndex={this.weekStartIndex}\n                standaloneAppearance={false}\n                locale={this.locale}\n                showWeekNumbers={this.showWeekNumbers}\n              ></ix-date-picker>\n            </ix-col>\n\n            <ix-col>\n              <ix-time-picker\n                class=\"min-width\"\n                ref={(ref) => (this.timePickerElement = ref)}\n                standaloneAppearance={false}\n                showHour={this.showHour}\n                showMinutes={this.showMinutes}\n                showSeconds={this.showSeconds}\n                onTimeChange={(event) => this.onTimeChange(event)}\n                format={this.timeFormat}\n                textTime={this.i18nTime}\n                time={this.time}\n              ></ix-time-picker>\n              <div class=\"btn-select-date-container\">\n                <ix-button\n                  class=\"btn-select-date\"\n                  onClick={() => this.onDone()}\n                >\n                  {this.i18nDone}\n                </ix-button>\n              </div>\n            </ix-col>\n          </ix-row>\n        </ix-layout-grid>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAoB,ukD,MC4BbC,EAAc,MAL3B,WAAAC,CAAAC,G,+HAWUC,KAAKC,MAAG,KAKRD,KAAQE,SAAG,KAKXF,KAAWG,YAAG,KAKdH,KAAWI,YAAG,KAkBdJ,KAAUK,WAAW,aAMrBL,KAAUM,WAAW,WAuBrBN,KAAiBO,kBAAY,MAUHP,KAAQQ,SAAW,OAO7CR,KAAQS,SAAW,OAMnBT,KAAcU,eAAG,EAajBV,KAAeW,gBAAG,KAiG3B,CA7ES,YAAMC,G,YACZ,MAAMC,SAAaC,EAAAd,KAAKe,qBAAmB,MAAAD,SAAA,SAAAA,EAAAE,kBAC3C,MAAMC,SAAaC,EAAAlB,KAAKmB,qBAAmB,MAAAD,SAAA,SAAAA,EAAAE,kBAE3CpB,KAAKqB,WAAWC,KAAK,CACnBC,MAAMC,EAAAX,IAAA,MAAAA,SAAI,SAAJA,EAAMU,QAAI,MAAAC,SAAA,EAAAA,EAAI,GACpBC,IAAIC,EAAAb,IAAA,MAAAA,SAAI,SAAJA,EAAMY,MAAE,MAAAC,SAAA,EAAAA,EAAI,GAChBT,KAAMA,IAAI,MAAJA,SAAA,EAAAA,EAAQ,I,CAIV,kBAAMU,CAAaC,GACzBA,EAAMC,iBACND,EAAME,kBAEN,MAAQC,OAAQlB,GAASe,EACzB5B,KAAKgC,WAAWV,KAAKT,E,CAGf,kBAAMoB,CAAaL,GACzBA,EAAMC,iBACND,EAAME,kBAEN,MAAQC,OAAQd,GAASW,EACzB5B,KAAKkC,WAAWZ,KAAKL,E,CAGvB,MAAAkB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAgB,kBAAAE,IAAA,2CAAAC,MAAM,cACpBH,EAAA,UAAAE,IAAA,4CACEF,EAAA,UAAAE,IAAA,4CACEF,EAAA,kBAAAE,IAAA,2CACEE,IAAMA,GAASxC,KAAKe,kBAAoByB,EACxCC,QAAQ,OACRxC,MAAOD,KAAKC,MACZ0B,aAAeC,GAAU5B,KAAK2B,aAAaC,GAC3CL,KAAMvB,KAAKuB,KACXE,GAAIzB,KAAKyB,GACTiB,OAAQ1C,KAAKK,WACbsC,QAAS3C,KAAK2C,QACdC,QAAS5C,KAAK4C,QACdlC,eAAgBV,KAAKU,eACrBmC,qBAAsB,MACtBC,OAAQ9C,KAAK8C,OACbnC,gBAAiBX,KAAKW,mBAI1ByB,EAAA,UAAAE,IAAA,4CACEF,EAAA,kBAAAE,IAAA,2CACEC,MAAM,YACNC,IAAMA,GAASxC,KAAKmB,kBAAoBqB,EACxCK,qBAAsB,MACtB3C,SAAUF,KAAKE,SACfC,YAAaH,KAAKG,YAClBC,YAAaJ,KAAKI,YAClB6B,aAAeL,GAAU5B,KAAKiC,aAAaL,GAC3Cc,OAAQ1C,KAAKM,WACbyC,SAAU/C,KAAKS,SACfQ,KAAMjB,KAAKiB,OAEbmB,EAAK,OAAAE,IAAA,2CAAAC,MAAM,6BACTH,EACE,aAAAE,IAAA,2CAAAC,MAAM,kBACNS,QAAS,IAAMhD,KAAKY,UAEnBZ,KAAKQ,c","ignoreList":[]}

package/dist/siemens-ix/{p-0488a734.entry.js → p-06843648.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as e,H as i,g as s}from"./p-BNpBEtDH.js";import{b as o}from"./p-Bb7pDeaQ.js";import{m as a}from"./p-bcj7UEIC.js";import{c as r}from"./p-2j3Ly91D.js";import{h as n,r as h}from"./p-CFHLJNAe.js";import"./p-CrTP-icT.js";function l(t){return t&&"getAssociatedFormElement"in t&&typeof t.getAssociatedFormElement==="function"&&"getNativeInputElement"in t&&typeof t.getNativeInputElement==="function"}const c=":host{display:inline-block;position:relative;margin-top:0.5rem;margin-bottom:0.25rem}";const f=class{constructor(e){t(this,e);this.isInvalid=false;this.htmlForObserver=new MutationObserver((()=>this.checkForInternalState()));this.a11yAttributes={};this.labelRef=a()}connectedCallback(){this.registerHtmlForObserver();this.registerControlRefObserver()}disconnectedCallback(){if(this.htmlForObserver){this.htmlForObserver.disconnect()}if(this.htmlForClassObserver){this.htmlForClassObserver.destroy()}if(this.controlRefClassObserver){this.controlRefClassObserver.destroy()}}componentWillRender(){this.checkForInternalState()}componentWillLoad(){this.a11yAttributes=o(this.hostElement)}registerHtmlForObserver(){if(typeof window==="undefined"){return}if(this.htmlForObserver){this.htmlForObserver.disconnect()}if(this.htmlFor){this.htmlForObserver.observe(window.document,{childList:true,subtree:true})}}async registerControlRefObserver(){if(typeof window==="undefined"){return}if(this.controlRefClassObserver){this.controlRefClassObserver.destroy()}if(this.controlRef){const t=await this.controlRef.waitForCurrent();this.controlRefClassObserver=r(t,(()=>this.checkForInvalidState(t)))}}registerHtmlForClassObserver(t){if(this.htmlForClassObserver){this.htmlForClassObserver.destroy()}this.htmlForClassObserver=r(t,(()=>this.checkForInvalidState(t)))}checkForInvalidState(t){this.isInvalid=t.classList.contains("is-invalid")||t.classList.contains("ix-invalid")}async checkForInternalState(){if(this.htmlFor){const t=document.getElementById(this.htmlFor);if(t){if(typeof t.required==="boolean"){this.required=t.required}this.registerHtmlForClassObserver(t);this.checkForInvalidState(t)}}if(this.controlRef){const t=await this.controlRef.waitForCurrent();this.required=t.required}}async focusOnClick(){if(this.htmlFor){const t=document.getElementById(this.htmlFor);if(t){let e=null;if(l(t)){e=await t.getNativeInputElement()}else{e=t}if(typeof e.focus==="function"){e.focus()}}}if(this.controlRef){(await this.controlRef.waitForCurrent()).focus()}}render(){return e(i,{key:"4b00ea62a90eae362b7236d82a08f031c075c10d",onClick:()=>this.focusOnClick()},e("label",Object.assign({key:"1c3e406baa6b6414cacf17961279bcd7ad1545ca",htmlFor:this.htmlFor},this.a11yAttributes,{ref:this.labelRef}),e("ix-typography",{key:"54c5e7cbd6c505edbe2c37a20ecbecd91deb441b",textColor:this.isInvalid?"alarm":"soft",format:"label"},e("slot",{key:"9638a38954088cff1cd539f1b49ef70778b4ff21"}),this.required&&e("span",{key:"b30063403d1e99121191ce945665781cba7ba34b"},"*"))))}get hostElement(){return s(this)}static get watchers(){return{htmlFor:["registerHtmlForObserver"],controlRef:["registerControlRefObserver"]}}};f.style=c;const d=":host{display:flex;position:relative;flex-direction:column}:host .slot-wrapper{display:flex;position:relative;align-items:center;justify-content:flex-start;gap:0.25rem}:host .field-bottom,:host .field-top{display:flex;flex-direction:row;position:relative;justify-content:space-between;gap:1rem;width:-moz-min-content;width:min-content;min-width:100%}:host .field-bottom .bottom-right{margin-left:auto;margin-right:0px}:host .bottom-text{display:flex;position:relative;align-items:flex-start;justify-content:flex-start;gap:0.25rem;margin-right:0.25rem}:host .text-icon{margin:0.125rem}:host .text-icon.invalid{color:var(--theme-helper-icon--color--invalid)}:host .text-icon.info{color:var(--theme-helper-icon--color--info)}:host .text-icon.warning{color:var(--theme-helper-icon--color--warning)}:host .text-icon.valid{color:var(--theme-helper-icon--color--valid)}:host .bottom-text{margin-top:0.25rem;margin-bottom:0.25rem}";const b=class{constructor(e){t(this,e);this.isInvalid=false;this.isValid=false;this.isInfo=false;this.isWarning=false;this.showTextAsTooltip=false;this.required=false;this.slotRef=a()}render(){const t={invalidText:this.invalidText,isInvalid:this.isInvalid,isValid:this.isValid,validText:this.validText,isWarning:this.isWarning,warningText:this.warningText,isInfo:this.isInfo,infoText:this.infoText,helperText:this.helperText};return e(i,{key:"2dd925820a3b4fa7529956e90ad8df1268bd59d9"},this.label&&e("div",{key:"f70725574cea826e7c541a95de2a0d373fcb67f7",class:"field-top"},e("ix-field-label",{key:"b589dc77ba975991962c4e53e6344bc4bf5ececb",required:this.required,htmlFor:this.htmlForLabel,controlRef:this.controlRef,isInvalid:this.isInvalid},this.label)),e("div",{key:"e79a3c3631908b280521dd9d86cf6e1a2b879b72",class:{"slot-wrapper":true},ref:this.slotRef},e("slot",{key:"6ee9b4b8656d366e1792b0eebbcb88968e39dfcf"})),e("div",{key:"0cffa6f40dbcfed07670b2730aeab71d0b2a42fa",class:"field-bottom"},!this.showTextAsTooltip&&h(t),e("div",{key:"9ddbc2218a776d6b8a9b0a82ca1903ceca3253f8",class:"bottom-right"},e("slot",{key:"e03a7d476ea203967beae72fe4f1296d0656da17",name:"bottom-right"}))),this.showTextAsTooltip===true&&n(t)&&e("ix-tooltip",{key:"a735c861da75636163beb5484909b51271a46297",for:this.slotRef.waitForCurrent(),showDelay:500,placement:"bottom"},h(t)))}get hostElement(){return s(this)}};b.style=d;export{f as ix_field_label,b as ix_field_wrapper};
-//# sourceMappingURL=p-0488a734.entry.js.map
+import{r as t,h as e,H as i,g as s}from"./p-BNpBEtDH.js";import{b as o}from"./p-Bb7pDeaQ.js";import{m as a}from"./p-bcj7UEIC.js";import{c as r}from"./p-DHml78Yc.js";import{h as n,r as l}from"./p-CFHLJNAe.js";import"./p-CrTP-icT.js";function h(t){return t&&"getAssociatedFormElement"in t&&typeof t.getAssociatedFormElement==="function"&&"getNativeInputElement"in t&&typeof t.getNativeInputElement==="function"}const c=":host{display:inline-block;position:relative;margin-top:0.5rem;margin-bottom:0.25rem}";const f=class{constructor(e){t(this,e);this.isInvalid=false;this.htmlForObserver=new MutationObserver((()=>this.checkForInternalState()));this.a11yAttributes={};this.labelRef=a()}connectedCallback(){this.registerHtmlForObserver();this.registerControlRefObserver()}disconnectedCallback(){if(this.htmlForObserver){this.htmlForObserver.disconnect()}if(this.htmlForClassObserver){this.htmlForClassObserver.destroy()}if(this.controlRefClassObserver){this.controlRefClassObserver.destroy()}}componentWillRender(){this.checkForInternalState()}componentWillLoad(){this.a11yAttributes=o(this.hostElement)}registerHtmlForObserver(){if(typeof window==="undefined"){return}if(this.htmlForObserver){this.htmlForObserver.disconnect()}if(this.htmlFor){this.htmlForObserver.observe(window.document,{childList:true,subtree:true})}}async registerControlRefObserver(){if(typeof window==="undefined"){return}if(this.controlRefClassObserver){this.controlRefClassObserver.destroy()}if(this.controlRef){const t=await this.controlRef.waitForCurrent();this.controlRefClassObserver=r(t,(()=>this.checkForInvalidState(t)))}}registerHtmlForClassObserver(t){if(this.htmlForClassObserver){this.htmlForClassObserver.destroy()}this.htmlForClassObserver=r(t,(()=>this.checkForInvalidState(t)))}checkForInvalidState(t){this.isInvalid=t.classList.contains("is-invalid")||t.classList.contains("ix-invalid")}async checkForInternalState(){if(this.htmlFor){const t=document.getElementById(this.htmlFor);if(t){if(typeof t.required==="boolean"){this.required=t.required}this.registerHtmlForClassObserver(t);this.checkForInvalidState(t)}}if(this.controlRef){const t=await this.controlRef.waitForCurrent();this.required=t.required}}async focusOnClick(){if(this.htmlFor){const t=document.getElementById(this.htmlFor);if(t){let e=null;if(h(t)){e=await t.getNativeInputElement()}else{e=t}if(typeof e.focus==="function"){e.focus()}}}if(this.controlRef){(await this.controlRef.waitForCurrent()).focus()}}render(){return e(i,{key:"4b00ea62a90eae362b7236d82a08f031c075c10d",onClick:()=>this.focusOnClick()},e("label",Object.assign({key:"1c3e406baa6b6414cacf17961279bcd7ad1545ca",htmlFor:this.htmlFor},this.a11yAttributes,{ref:this.labelRef}),e("ix-typography",{key:"54c5e7cbd6c505edbe2c37a20ecbecd91deb441b",textColor:this.isInvalid?"alarm":"soft",format:"label"},e("slot",{key:"9638a38954088cff1cd539f1b49ef70778b4ff21"}),this.required&&e("span",{key:"b30063403d1e99121191ce945665781cba7ba34b"},"*"))))}get hostElement(){return s(this)}static get watchers(){return{htmlFor:["registerHtmlForObserver"],controlRef:["registerControlRefObserver"]}}};f.style=c;const d=":host{display:flex;position:relative;flex-direction:column}:host .slot-wrapper{display:flex;position:relative;align-items:center;justify-content:flex-start;gap:0.25rem}:host .field-bottom,:host .field-top{display:flex;flex-direction:row;position:relative;justify-content:space-between;gap:1rem;width:-moz-min-content;width:min-content;min-width:100%}:host .field-bottom .bottom-right{margin-left:auto;margin-right:0px}:host .bottom-text{display:flex;position:relative;align-items:flex-start;justify-content:flex-start;gap:0.25rem;margin-right:0.25rem}:host .text-icon{margin:0.125rem}:host .text-icon.invalid{color:var(--theme-helper-icon--color--invalid)}:host .text-icon.info{color:var(--theme-helper-icon--color--info)}:host .text-icon.warning{color:var(--theme-helper-icon--color--warning)}:host .text-icon.valid{color:var(--theme-helper-icon--color--valid)}:host .bottom-text{margin-top:0.25rem;margin-bottom:0.25rem}";const b=class{constructor(e){t(this,e);this.isInvalid=false;this.isValid=false;this.isInfo=false;this.isWarning=false;this.showTextAsTooltip=false;this.required=false;this.slotRef=a()}render(){const t={invalidText:this.invalidText,isInvalid:this.isInvalid,isValid:this.isValid,validText:this.validText,isWarning:this.isWarning,warningText:this.warningText,isInfo:this.isInfo,infoText:this.infoText,helperText:this.helperText};return e(i,{key:"2dd925820a3b4fa7529956e90ad8df1268bd59d9"},this.label&&e("div",{key:"f70725574cea826e7c541a95de2a0d373fcb67f7",class:"field-top"},e("ix-field-label",{key:"b589dc77ba975991962c4e53e6344bc4bf5ececb",required:this.required,htmlFor:this.htmlForLabel,controlRef:this.controlRef,isInvalid:this.isInvalid},this.label)),e("div",{key:"e79a3c3631908b280521dd9d86cf6e1a2b879b72",class:{"slot-wrapper":true},ref:this.slotRef},e("slot",{key:"6ee9b4b8656d366e1792b0eebbcb88968e39dfcf"})),e("div",{key:"0cffa6f40dbcfed07670b2730aeab71d0b2a42fa",class:"field-bottom"},!this.showTextAsTooltip&&l(t),e("div",{key:"9ddbc2218a776d6b8a9b0a82ca1903ceca3253f8",class:"bottom-right"},e("slot",{key:"e03a7d476ea203967beae72fe4f1296d0656da17",name:"bottom-right"}))),this.showTextAsTooltip===true&&n(t)&&e("ix-tooltip",{key:"a735c861da75636163beb5484909b51271a46297",for:this.slotRef.waitForCurrent(),showDelay:500,placement:"bottom"},l(t)))}get hostElement(){return s(this)}};b.style=d;export{f as ix_field_label,b as ix_field_wrapper};
+//# sourceMappingURL=p-06843648.entry.js.map

package/dist/siemens-ix/{p-0488a734.entry.js.map → p-06843648.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["isIxInputFieldComponent","obj","getAssociatedFormElement","getNativeInputElement","fieldLabelCss","FormFieldLabel","constructor","hostRef","this","isInvalid","htmlForObserver","MutationObserver","checkForInternalState","a11yAttributes","labelRef","makeRef","connectedCallback","registerHtmlForObserver","registerControlRefObserver","disconnectedCallback","disconnect","htmlForClassObserver","destroy","controlRefClassObserver","componentWillRender","componentWillLoad","a11yHostAttributes","hostElement","window","htmlFor","observe","document","childList","subtree","controlRef","input","waitForCurrent","createClassMutationObserver","checkForInvalidState","registerHtmlForClassObserver","forElement","elementToCheck","classList","contains","getElementById","required","focusOnClick","target","focus","render","h","Host","key","onClick","Object","assign","ref","textColor","format","fieldWrapperCss","FieldWrapper","isValid","isInfo","isWarning","showTextAsTooltip","slotRef","textOptions","invalidText","validText","warningText","infoText","helperText","label","class","htmlForLabel","renderHelperText","name","hasAnyText","for","showDelay","placement"],"sources":["src/components/utils/input/index.ts","src/components/field-label/field-label.scss?tag=ix-field-label&encapsulation=shadow","src/components/field-label/field-label.tsx","src/components/field-wrapper/field-wrapper.scss?tag=ix-field-wrapper&encapsulation=shadow","src/components/field-wrapper/field-wrapper.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 */\nimport { EventEmitter } from '@stencil/core';\nimport { IxComponent } from '../internal';\n\nexport * from './validation';\n\nexport interface FieldWrapperInterface {\n  /**\n   * Label for the field component\n   */\n  label?: string;\n  /**\n   * Show text below the field component which show additional information\n   */\n  helperText?: string;\n  /**\n   * Info text for the field component\n   */\n  infoText?: string;\n  /**\n   * Warning text for the field component\n   */\n  warningText?: string;\n  /**\n   * Error text for the field component\n   */\n  invalidText?: string;\n  /**\n   * Valid text for the field component\n   */\n  validText?: string;\n  /**\n   * Show helper, info, warning, error and valid text as tooltip\n   */\n  showTextAsTooltip?: boolean;\n}\n\nexport type HTMLIxFormComponentElement<T> = HTMLElement & IxFormComponent<T>;\nexport type HTMLIxInputFieldComponentElement<T> =\n  HTMLIxFormComponentElement<T> & IxInputFieldComponent<T>;\n\nexport interface IxFormValidationState {\n  // Annotate as @State()\n  isInvalid: boolean;\n  // Annotate as @State()\n  isValid: boolean;\n  // Annotate as @State()\n  isInfo: boolean;\n  // Annotate as @State()\n  isWarning: boolean;\n}\n\nexport interface IxFormComponent<T = string> extends IxComponent {\n  // Private internal\n  formInternals: ElementInternals;\n\n  // Annotate as @Prop({ reflect: true })\n  required?: boolean;\n  // Annotate as @Prop({ reflect: true })\n  name?: string;\n  // Annotate as @Prop()\n  value?: T;\n  // Annotate as @Prop()\n  disabled: boolean;\n\n  valueChange: EventEmitter<T>;\n  updateFormInternalValue(value: T): void | Promise<void>;\n  hasValidValue(): Promise<boolean>;\n  getValidityState?(): Promise<ValidityState>;\n  getAssociatedFormElement(): Promise<HTMLFormElement | null>;\n  isTouched?(): Promise<boolean>;\n}\n\nexport interface IxInputFieldComponent<T = string>\n  extends IxFormComponent<T>,\n    IxFormValidationState,\n    FieldWrapperInterface {\n  // Annotate as @Prop()\n  placeholder?: string;\n  // Annotate as @Prop()\n  readonly: boolean;\n\n  ixBlur: EventEmitter<void>;\n\n  // Annotate as @Method()\n  getNativeInputElement(): Promise<HTMLInputElement | HTMLTextAreaElement>;\n\n  // Annotate as @Method()\n  focusInput(): Promise<void>;\n}\n\nexport function isIxInputFieldComponent<T>(\n  obj: HTMLElement | IxFormComponent<T>\n): obj is HTMLIxInputFieldComponentElement<T> {\n  return (\n    obj &&\n    'getAssociatedFormElement' in obj &&\n    typeof obj.getAssociatedFormElement === 'function' &&\n    'getNativeInputElement' in obj &&\n    typeof obj.getNativeInputElement === 'function'\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\n:host {\n  display: inline-block;\n  position: relative;\n\n  margin-top: 0.5rem;\n  margin-bottom: 0.25rem;\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, Element, h, Host, Prop, Watch } from '@stencil/core';\nimport { A11yAttributes, a11yHostAttributes } from '../utils/a11y';\nimport {\n  ClassMutationObserver,\n  createClassMutationObserver,\n  HTMLIxFormComponentElement,\n  isIxInputFieldComponent,\n} from '../utils/input';\nimport { IxComponent } from '../utils/internal';\nimport { MakeRef, makeRef } from '../utils/make-ref';\n\n@Component({\n  tag: 'ix-field-label',\n  styleUrl: 'field-label.scss',\n  shadow: true,\n})\nexport class FormFieldLabel implements IxComponent {\n  @Element() hostElement!: HTMLIxFieldLabelElement;\n\n  /**\n   * A value is required or must be checked for the form to be submittable\n   */\n  @Prop({ reflect: true, mutable: true }) required?: boolean;\n\n  /**\n   * The id of the form element that the label is associated with\n   */\n  @Prop({ reflect: true }) htmlFor?: string;\n\n  /** @internal */\n  @Prop() controlRef?:\n    | MakeRef<HTMLElement>\n    | MakeRef<HTMLInputElement>\n    | MakeRef<HTMLTextAreaElement>;\n\n  /** @internal */\n  @Prop({ mutable: true }) isInvalid: boolean = false;\n\n  private readonly htmlForObserver = new MutationObserver(() =>\n    this.checkForInternalState()\n  );\n  private htmlForClassObserver?: ClassMutationObserver;\n  private controlRefClassObserver?: ClassMutationObserver;\n  private a11yAttributes: A11yAttributes = {};\n  private readonly labelRef = makeRef<HTMLLabelElement>();\n\n  connectedCallback() {\n    this.registerHtmlForObserver();\n    this.registerControlRefObserver();\n  }\n\n  disconnectedCallback(): void {\n    if (this.htmlForObserver) {\n      this.htmlForObserver.disconnect();\n    }\n    if (this.htmlForClassObserver) {\n      this.htmlForClassObserver.destroy();\n    }\n    if (this.controlRefClassObserver) {\n      this.controlRefClassObserver.destroy();\n    }\n  }\n\n  componentWillRender() {\n    this.checkForInternalState();\n  }\n\n  componentWillLoad(): void | Promise<void> {\n    this.a11yAttributes = a11yHostAttributes(this.hostElement);\n  }\n\n  @Watch('htmlFor')\n  private registerHtmlForObserver() {\n    if (typeof window === 'undefined') {\n      return;\n    }\n\n    if (this.htmlForObserver) {\n      this.htmlForObserver.disconnect();\n    }\n\n    if (this.htmlFor) {\n      this.htmlForObserver.observe(window.document, {\n        childList: true,\n        subtree: true,\n      });\n    }\n  }\n\n  @Watch('controlRef')\n  private async registerControlRefObserver() {\n    if (typeof window === 'undefined') {\n      return;\n    }\n\n    if (this.controlRefClassObserver) {\n      this.controlRefClassObserver.destroy();\n    }\n\n    if (this.controlRef) {\n      const input = await this.controlRef.waitForCurrent();\n\n      this.controlRefClassObserver = createClassMutationObserver(input, () =>\n        this.checkForInvalidState(input)\n      );\n    }\n  }\n\n  private registerHtmlForClassObserver(\n    forElement: HTMLIxFormComponentElement<unknown>\n  ) {\n    if (this.htmlForClassObserver) {\n      this.htmlForClassObserver.destroy();\n    }\n\n    this.htmlForClassObserver = createClassMutationObserver(forElement, () =>\n      this.checkForInvalidState(forElement)\n    );\n  }\n\n  private checkForInvalidState(elementToCheck: HTMLElement) {\n    this.isInvalid =\n      elementToCheck.classList.contains('is-invalid') ||\n      elementToCheck.classList.contains('ix-invalid');\n  }\n\n  private async checkForInternalState() {\n    if (this.htmlFor) {\n      const forElement = document.getElementById(\n        this.htmlFor\n      ) as HTMLIxFormComponentElement<unknown>;\n      if (forElement) {\n        if (typeof forElement.required === 'boolean') {\n          this.required = forElement.required;\n        }\n\n        this.registerHtmlForClassObserver(forElement);\n        this.checkForInvalidState(forElement);\n      }\n    }\n\n    if (this.controlRef) {\n      const input = await this.controlRef.waitForCurrent();\n      this.required = (\n        input as HTMLInputElement | HTMLTextAreaElement\n      ).required;\n    }\n  }\n\n  private async focusOnClick() {\n    if (this.htmlFor) {\n      const target = document.getElementById(this.htmlFor);\n      if (target) {\n        let input: HTMLElement | null = null;\n        if (isIxInputFieldComponent(target)) {\n          input = await target.getNativeInputElement();\n        } else {\n          input = target;\n        }\n        if (typeof input.focus === 'function') {\n          input.focus();\n        }\n      }\n    }\n\n    if (this.controlRef) {\n      (await this.controlRef.waitForCurrent()).focus();\n    }\n  }\n\n  render() {\n    return (\n      <Host onClick={() => this.focusOnClick()}>\n        <label\n          htmlFor={this.htmlFor}\n          {...this.a11yAttributes}\n          ref={this.labelRef}\n        >\n          <ix-typography\n            textColor={this.isInvalid ? 'alarm' : 'soft'}\n            format=\"label\"\n          >\n            <slot></slot>\n            {this.required && <span>*</span>}\n          </ix-typography>\n        </label>\n      </Host>\n    );\n  }\n}\n","@import \"./field-wrapper.mixins.scss\";\n\n:host {\n  display: flex;\n  position: relative;\n  flex-direction: column;\n\n  .slot-wrapper {\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 0.25rem;\n  }\n\n  .field-bottom,\n  .field-top {\n    display: flex;\n    flex-direction: row;\n    position: relative;\n    justify-content: space-between;\n    gap: 1rem;\n    width: min-content;\n    min-width: 100%;\n  }\n\n  .field-bottom .bottom-right {\n    margin-left: auto;\n    margin-right: 0px;\n  }\n\n  @include helper-text;\n\n  .bottom-text {\n    margin-top: 0.25rem;\n    margin-bottom: 0.25rem;\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 */\nimport { Component, Element, Host, Prop, h } from '@stencil/core';\nimport { FieldWrapperInterface } from '../utils/input';\nimport { MakeRef, makeRef } from '../utils/make-ref';\nimport { hasAnyText, renderHelperText } from './helper-text-util';\n\n/** @internal */\n@Component({\n  tag: 'ix-field-wrapper',\n  styleUrl: 'field-wrapper.scss',\n  shadow: true,\n})\nexport class FieldWrapper implements FieldWrapperInterface {\n  @Element() hostElement!: HTMLIxFieldWrapperElement;\n\n  /**\n   * Show text below the field component\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * Label for the field component\n   */\n  @Prop() label?: string;\n\n  /**\n   * Error text for the field component\n   */\n  @Prop() invalidText?: string;\n\n  /**\n   * Valid text for the field component\n   */\n  @Prop() validText?: string;\n\n  /**\n   * Info text for the field component\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * Warning text for the field component\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * Is the field component invalid\n   */\n  @Prop() isInvalid: boolean = false;\n\n  /**\n   * Is the field component valid\n   */\n  @Prop() isValid: boolean = false;\n\n  /**\n   * Is the field component info\n   */\n  @Prop() isInfo: boolean = false;\n\n  /**\n   * Is the field component warning\n   */\n  @Prop() isWarning: boolean = false;\n\n  /**\n   * Show helper, error, info, warning text as tooltip\n   */\n  @Prop() showTextAsTooltip: boolean = false;\n\n  /**\n   * Show label as required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * The id of the form element that the label is associated with\n   */\n  @Prop() htmlForLabel?: string;\n\n  /**\n   * The control element that the label is associated with\n   */\n  @Prop() controlRef?:\n    | MakeRef<HTMLElement>\n    | MakeRef<HTMLInputElement>\n    | MakeRef<HTMLTextAreaElement>;\n\n  private readonly slotRef = makeRef<HTMLDivElement>();\n\n  render() {\n    const textOptions = {\n      invalidText: this.invalidText,\n      isInvalid: this.isInvalid,\n      isValid: this.isValid,\n      validText: this.validText,\n      isWarning: this.isWarning,\n      warningText: this.warningText,\n      isInfo: this.isInfo,\n      infoText: this.infoText,\n      helperText: this.helperText,\n    };\n    return (\n      <Host>\n        {this.label && (\n          <div class=\"field-top\">\n            <ix-field-label\n              required={this.required}\n              htmlFor={this.htmlForLabel}\n              controlRef={this.controlRef}\n              isInvalid={this.isInvalid}\n            >\n              {this.label}\n            </ix-field-label>\n          </div>\n        )}\n        <div\n          class={{\n            'slot-wrapper': true,\n          }}\n          ref={this.slotRef}\n        >\n          <slot></slot>\n        </div>\n        <div class={'field-bottom'}>\n          {!this.showTextAsTooltip && renderHelperText(textOptions)}\n          <div class=\"bottom-right\">\n            <slot name=\"bottom-right\"></slot>\n          </div>\n        </div>\n\n        {this.showTextAsTooltip === true && hasAnyText(textOptions) && (\n          <ix-tooltip\n            for={this.slotRef.waitForCurrent()}\n            showDelay={500}\n            placement=\"bottom\"\n          >\n            {renderHelperText(textOptions)}\n          </ix-tooltip>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["isIxInputFieldComponent","obj","getAssociatedFormElement","getNativeInputElement","fieldLabelCss","FormFieldLabel","constructor","hostRef","this","isInvalid","htmlForObserver","MutationObserver","checkForInternalState","a11yAttributes","labelRef","makeRef","connectedCallback","registerHtmlForObserver","registerControlRefObserver","disconnectedCallback","disconnect","htmlForClassObserver","destroy","controlRefClassObserver","componentWillRender","componentWillLoad","a11yHostAttributes","hostElement","window","htmlFor","observe","document","childList","subtree","controlRef","input","waitForCurrent","createClassMutationObserver","checkForInvalidState","registerHtmlForClassObserver","forElement","elementToCheck","classList","contains","getElementById","required","focusOnClick","target","focus","render","h","Host","key","onClick","Object","assign","ref","textColor","format","fieldWrapperCss","FieldWrapper","isValid","isInfo","isWarning","showTextAsTooltip","slotRef","textOptions","invalidText","validText","warningText","infoText","helperText","label","class","htmlForLabel","renderHelperText","name","hasAnyText","for","showDelay","placement"],"sources":["src/components/utils/input/index.ts","src/components/field-label/field-label.scss?tag=ix-field-label&encapsulation=shadow","src/components/field-label/field-label.tsx","src/components/field-wrapper/field-wrapper.scss?tag=ix-field-wrapper&encapsulation=shadow","src/components/field-wrapper/field-wrapper.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 */\nimport { EventEmitter } from '@stencil/core';\nimport { IxComponent } from '../internal';\n\nexport * from './validation';\n\nexport interface FieldWrapperInterface {\n  /**\n   * Label for the field component\n   */\n  label?: string;\n  /**\n   * Show text below the field component which show additional information\n   */\n  helperText?: string;\n  /**\n   * Info text for the field component\n   */\n  infoText?: string;\n  /**\n   * Warning text for the field component\n   */\n  warningText?: string;\n  /**\n   * Error text for the field component\n   */\n  invalidText?: string;\n  /**\n   * Valid text for the field component\n   */\n  validText?: string;\n  /**\n   * Show helper, info, warning, error and valid text as tooltip\n   */\n  showTextAsTooltip?: boolean;\n}\n\nexport type HTMLIxFormComponentElement<T> = HTMLElement & IxFormComponent<T>;\nexport type HTMLIxInputFieldComponentElement<T> =\n  HTMLIxFormComponentElement<T> & IxInputFieldComponent<T>;\n\nexport interface IxFormValidationState {\n  // Annotate as @State()\n  isInvalid: boolean;\n  // Annotate as @State()\n  isValid: boolean;\n  // Annotate as @State()\n  isInfo: boolean;\n  // Annotate as @State()\n  isWarning: boolean;\n}\n\nexport interface IxFormComponent<T = string> extends IxComponent {\n  // Private internal\n  formInternals: ElementInternals;\n\n  // Annotate as @Prop({ reflect: true })\n  required?: boolean;\n  // Annotate as @Prop({ reflect: true })\n  name?: string;\n  // Annotate as @Prop()\n  value?: T;\n  // Annotate as @Prop()\n  disabled: boolean;\n\n  valueChange: EventEmitter<T>;\n  ixBlur: EventEmitter<void>;\n\n  updateFormInternalValue(value: T): void | Promise<void>;\n  hasValidValue(): Promise<boolean>;\n  getValidityState?(): Promise<ValidityState>;\n  getAssociatedFormElement(): Promise<HTMLFormElement | null>;\n  isTouched?(): Promise<boolean>;\n}\n\nexport interface IxInputFieldComponent<T = string>\n  extends IxFormComponent<T>,\n    IxFormValidationState,\n    FieldWrapperInterface {\n  // Annotate as @Prop()\n  placeholder?: string;\n  // Annotate as @Prop()\n  readonly: boolean;\n\n  // Annotate as @Method()\n  getNativeInputElement(): Promise<HTMLInputElement | HTMLTextAreaElement>;\n\n  // Annotate as @Method()\n  focusInput(): Promise<void>;\n}\n\nexport function isIxInputFieldComponent<T>(\n  obj: HTMLElement | IxFormComponent<T>\n): obj is HTMLIxInputFieldComponentElement<T> {\n  return (\n    obj &&\n    'getAssociatedFormElement' in obj &&\n    typeof obj.getAssociatedFormElement === 'function' &&\n    'getNativeInputElement' in obj &&\n    typeof obj.getNativeInputElement === 'function'\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\n:host {\n  display: inline-block;\n  position: relative;\n\n  margin-top: 0.5rem;\n  margin-bottom: 0.25rem;\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, Element, h, Host, Prop, Watch } from '@stencil/core';\nimport { A11yAttributes, a11yHostAttributes } from '../utils/a11y';\nimport {\n  ClassMutationObserver,\n  createClassMutationObserver,\n  HTMLIxFormComponentElement,\n  isIxInputFieldComponent,\n} from '../utils/input';\nimport { IxComponent } from '../utils/internal';\nimport { MakeRef, makeRef } from '../utils/make-ref';\n\n@Component({\n  tag: 'ix-field-label',\n  styleUrl: 'field-label.scss',\n  shadow: true,\n})\nexport class FormFieldLabel implements IxComponent {\n  @Element() hostElement!: HTMLIxFieldLabelElement;\n\n  /**\n   * A value is required or must be checked for the form to be submittable\n   */\n  @Prop({ reflect: true, mutable: true }) required?: boolean;\n\n  /**\n   * The id of the form element that the label is associated with\n   */\n  @Prop({ reflect: true }) htmlFor?: string;\n\n  /** @internal */\n  @Prop() controlRef?:\n    | MakeRef<HTMLElement>\n    | MakeRef<HTMLInputElement>\n    | MakeRef<HTMLTextAreaElement>;\n\n  /** @internal */\n  @Prop({ mutable: true }) isInvalid: boolean = false;\n\n  private readonly htmlForObserver = new MutationObserver(() =>\n    this.checkForInternalState()\n  );\n  private htmlForClassObserver?: ClassMutationObserver;\n  private controlRefClassObserver?: ClassMutationObserver;\n  private a11yAttributes: A11yAttributes = {};\n  private readonly labelRef = makeRef<HTMLLabelElement>();\n\n  connectedCallback() {\n    this.registerHtmlForObserver();\n    this.registerControlRefObserver();\n  }\n\n  disconnectedCallback(): void {\n    if (this.htmlForObserver) {\n      this.htmlForObserver.disconnect();\n    }\n    if (this.htmlForClassObserver) {\n      this.htmlForClassObserver.destroy();\n    }\n    if (this.controlRefClassObserver) {\n      this.controlRefClassObserver.destroy();\n    }\n  }\n\n  componentWillRender() {\n    this.checkForInternalState();\n  }\n\n  componentWillLoad(): void | Promise<void> {\n    this.a11yAttributes = a11yHostAttributes(this.hostElement);\n  }\n\n  @Watch('htmlFor')\n  private registerHtmlForObserver() {\n    if (typeof window === 'undefined') {\n      return;\n    }\n\n    if (this.htmlForObserver) {\n      this.htmlForObserver.disconnect();\n    }\n\n    if (this.htmlFor) {\n      this.htmlForObserver.observe(window.document, {\n        childList: true,\n        subtree: true,\n      });\n    }\n  }\n\n  @Watch('controlRef')\n  private async registerControlRefObserver() {\n    if (typeof window === 'undefined') {\n      return;\n    }\n\n    if (this.controlRefClassObserver) {\n      this.controlRefClassObserver.destroy();\n    }\n\n    if (this.controlRef) {\n      const input = await this.controlRef.waitForCurrent();\n\n      this.controlRefClassObserver = createClassMutationObserver(input, () =>\n        this.checkForInvalidState(input)\n      );\n    }\n  }\n\n  private registerHtmlForClassObserver(\n    forElement: HTMLIxFormComponentElement<unknown>\n  ) {\n    if (this.htmlForClassObserver) {\n      this.htmlForClassObserver.destroy();\n    }\n\n    this.htmlForClassObserver = createClassMutationObserver(forElement, () =>\n      this.checkForInvalidState(forElement)\n    );\n  }\n\n  private checkForInvalidState(elementToCheck: HTMLElement) {\n    this.isInvalid =\n      elementToCheck.classList.contains('is-invalid') ||\n      elementToCheck.classList.contains('ix-invalid');\n  }\n\n  private async checkForInternalState() {\n    if (this.htmlFor) {\n      const forElement = document.getElementById(\n        this.htmlFor\n      ) as HTMLIxFormComponentElement<unknown>;\n      if (forElement) {\n        if (typeof forElement.required === 'boolean') {\n          this.required = forElement.required;\n        }\n\n        this.registerHtmlForClassObserver(forElement);\n        this.checkForInvalidState(forElement);\n      }\n    }\n\n    if (this.controlRef) {\n      const input = await this.controlRef.waitForCurrent();\n      this.required = (\n        input as HTMLInputElement | HTMLTextAreaElement\n      ).required;\n    }\n  }\n\n  private async focusOnClick() {\n    if (this.htmlFor) {\n      const target = document.getElementById(this.htmlFor);\n      if (target) {\n        let input: HTMLElement | null = null;\n        if (isIxInputFieldComponent(target)) {\n          input = await target.getNativeInputElement();\n        } else {\n          input = target;\n        }\n        if (typeof input.focus === 'function') {\n          input.focus();\n        }\n      }\n    }\n\n    if (this.controlRef) {\n      (await this.controlRef.waitForCurrent()).focus();\n    }\n  }\n\n  render() {\n    return (\n      <Host onClick={() => this.focusOnClick()}>\n        <label\n          htmlFor={this.htmlFor}\n          {...this.a11yAttributes}\n          ref={this.labelRef}\n        >\n          <ix-typography\n            textColor={this.isInvalid ? 'alarm' : 'soft'}\n            format=\"label\"\n          >\n            <slot></slot>\n            {this.required && <span>*</span>}\n          </ix-typography>\n        </label>\n      </Host>\n    );\n  }\n}\n","@import \"./field-wrapper.mixins.scss\";\n\n:host {\n  display: flex;\n  position: relative;\n  flex-direction: column;\n\n  .slot-wrapper {\n    display: flex;\n    position: relative;\n    align-items: center;\n    justify-content: flex-start;\n    gap: 0.25rem;\n  }\n\n  .field-bottom,\n  .field-top {\n    display: flex;\n    flex-direction: row;\n    position: relative;\n    justify-content: space-between;\n    gap: 1rem;\n    width: min-content;\n    min-width: 100%;\n  }\n\n  .field-bottom .bottom-right {\n    margin-left: auto;\n    margin-right: 0px;\n  }\n\n  @include helper-text;\n\n  .bottom-text {\n    margin-top: 0.25rem;\n    margin-bottom: 0.25rem;\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 */\nimport { Component, Element, Host, Prop, h } from '@stencil/core';\nimport { FieldWrapperInterface } from '../utils/input';\nimport { MakeRef, makeRef } from '../utils/make-ref';\nimport { hasAnyText, renderHelperText } from './helper-text-util';\n\n/** @internal */\n@Component({\n  tag: 'ix-field-wrapper',\n  styleUrl: 'field-wrapper.scss',\n  shadow: true,\n})\nexport class FieldWrapper implements FieldWrapperInterface {\n  @Element() hostElement!: HTMLIxFieldWrapperElement;\n\n  /**\n   * Show text below the field component\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * Label for the field component\n   */\n  @Prop() label?: string;\n\n  /**\n   * Error text for the field component\n   */\n  @Prop() invalidText?: string;\n\n  /**\n   * Valid text for the field component\n   */\n  @Prop() validText?: string;\n\n  /**\n   * Info text for the field component\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * Warning text for the field component\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * Is the field component invalid\n   */\n  @Prop() isInvalid: boolean = false;\n\n  /**\n   * Is the field component valid\n   */\n  @Prop() isValid: boolean = false;\n\n  /**\n   * Is the field component info\n   */\n  @Prop() isInfo: boolean = false;\n\n  /**\n   * Is the field component warning\n   */\n  @Prop() isWarning: boolean = false;\n\n  /**\n   * Show helper, error, info, warning text as tooltip\n   */\n  @Prop() showTextAsTooltip: boolean = false;\n\n  /**\n   * Show label as required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * The id of the form element that the label is associated with\n   */\n  @Prop() htmlForLabel?: string;\n\n  /**\n   * The control element that the label is associated with\n   */\n  @Prop() controlRef?:\n    | MakeRef<HTMLElement>\n    | MakeRef<HTMLInputElement>\n    | MakeRef<HTMLTextAreaElement>;\n\n  private readonly slotRef = makeRef<HTMLDivElement>();\n\n  render() {\n    const textOptions = {\n      invalidText: this.invalidText,\n      isInvalid: this.isInvalid,\n      isValid: this.isValid,\n      validText: this.validText,\n      isWarning: this.isWarning,\n      warningText: this.warningText,\n      isInfo: this.isInfo,\n      infoText: this.infoText,\n      helperText: this.helperText,\n    };\n    return (\n      <Host>\n        {this.label && (\n          <div class=\"field-top\">\n            <ix-field-label\n              required={this.required}\n              htmlFor={this.htmlForLabel}\n              controlRef={this.controlRef}\n              isInvalid={this.isInvalid}\n            >\n              {this.label}\n            </ix-field-label>\n          </div>\n        )}\n        <div\n          class={{\n            'slot-wrapper': true,\n          }}\n          ref={this.slotRef}\n        >\n          <slot></slot>\n        </div>\n        <div class={'field-bottom'}>\n          {!this.showTextAsTooltip && renderHelperText(textOptions)}\n          <div class=\"bottom-right\">\n            <slot name=\"bottom-right\"></slot>\n          </div>\n        </div>\n\n        {this.showTextAsTooltip === true && hasAnyText(textOptions) && (\n          <ix-tooltip\n            for={this.slotRef.waitForCurrent()}\n            showDelay={500}\n            placement=\"bottom\"\n          >\n            {renderHelperText(textOptions)}\n          </ix-tooltip>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}