@siemens/ix 3.0.0-alpha.4 → 3.0.0

package/dist/cjs/ix-flip-tile.cjs.entry.js

@@ -13,12 +13,10 @@ const FlipTile = class {
         this.toggle = index.createEvent(this, "toggle", 7);
         /**
          * Height interpreted as REM
-         * @since 1.5.0
          */
         this.height = 15.125;
         /**
          * Width interpreted as REM
-         * @since 1.5.0
          */
         this.width = 16;
         /**
@@ -85,26 +83,26 @@ const FlipTile = class {
         }, 2 * this.ANIMATION_DURATION);
     }
     render() {
-        return (index.h(index.Host, { key: '56ac52c0846a09ebbabe445a7b472d8163249d0f', style: {
+        return (index.h(index.Host, { key: '8892b7907bdfb0a5f0c2d7cc19c4d29fdf956d81', style: {
                 height: `${this.height}${this.height === 'auto' ? '' : 'rem'}`,
                 'min-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,
                 'max-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,
                 width: `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
                 'min-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
                 'max-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,
-            } }, index.h("div", { key: '63bd41182f32389d24f06a65934fa1fdf613814e', class: {
+            } }, index.h("div", { key: 'e322ed0cad19e1e2c2c287555c1d613cccce965b', class: {
                 'flip-tile-container': true,
                 info: this.state === flipTileState.FlipTileState.Info,
                 warning: this.state === flipTileState.FlipTileState.Warning,
                 alarm: this.state === flipTileState.FlipTileState.Alarm,
                 primary: this.state === flipTileState.FlipTileState.Primary,
                 'flip-animation-active': this.isFlipAnimationActive,
-            } }, index.h("div", { key: 'b14e594b79d762dc1e1861f053fca55527205099', class: "flip-tile-header" }, index.h("div", { key: '71294a8041516ded7a7e22be40b779d242958db8', class: "header-slot-container text-l-title" }, index.h("slot", { key: '015f97f7f35ed25d0c808457a8d1a5b1055d0f3e', name: "header" })), index.h("ix-icon-button", { key: '4ada116aa7ad0ae8b1499b7a3c142eaee3f8320e', icon: index$1.iconEye, variant: "primary", ghost: true, onClick: () => this.toggleIndex() })), index.h("div", { key: '0c30a20df8eff93c9433fad1a157311d185e342f', class: "content-container" }, index.h("slot", { key: '471ebb3a8619bdb35d4db4c7c6f63065d446116a' })), index.h("div", { key: '4c4a45e81c365670d4b7f1d7cbb4838778dd96c3', class: {
+            } }, index.h("div", { key: 'b9722c9baa43b7022aef0ae6f1511d72b9b6ef27', class: "flip-tile-header" }, index.h("div", { key: '05360f768bbfc11656404ff7078d5fc2e27c793a', class: "header-slot-container text-l-title" }, index.h("slot", { key: '84f83de8ac0e872b339099632ba71c77562235e5', name: "header" })), index.h("ix-icon-button", { key: '7ff6a1faaf174da2427b5bbba382ecd10a22e2be', icon: index$1.iconEye, variant: "primary", ghost: true, onClick: () => this.toggleIndex() })), index.h("div", { key: 'dd88100383ddbb0b4d58c0a281905cdec370c79f', class: "content-container" }, index.h("slot", { key: 'f39529910e08e2757a2a6a2db9b1b021fe301c77' })), index.h("div", { key: '2d17fc0f712da5707cd81d5bc69a7ca2a9097bd6', class: {
                 footer: true,
                 'contrast-light': this.state === flipTileState.FlipTileState.Warning,
                 'contrast-dark': this.state === flipTileState.FlipTileState.Info ||
                     this.state === flipTileState.FlipTileState.Alarm,
-            } }, index.h("slot", { key: '39be6dc2a46af588318fe63beceae81dfafc0eec', name: "footer" })))));
+            } }, index.h("slot", { key: '3c3b397cf51c71b3d45802f6e69ddb877d1ee3ef', name: "footer" })))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ix-flip-tile.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ix-flip-tile.entry.cjs.js","mappings":"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","names":["createMutationObserver","h","Host","FlipTileState","iconEye"],"sources":["src/components/flip-tile/flip-tile.scss?tag=ix-flip-tile&encapsulation=shadow","src/components/flip-tile/flip-tile.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/animations';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n@import 'legacy/fonts';\n\n@include keyframes(flip-animation) {\n  0% {\n    transform: rotateY(0);\n  }\n  50% {\n    transform: rotateY(90deg);\n  }\n  51% {\n    transform: rotateY(270deg);\n  }\n  100% {\n    transform: rotateY(360deg);\n  }\n}\n\n:host {\n  @include ix-component;\n  display: flex;\n  flex-direction: column;\n  perspective: 1000px;\n\n  .flip-tile-header {\n    display: flex;\n    align-items: center;\n    height: $large-control-height;\n    padding: 0 $small-space 0 $default-space;\n\n    .header-slot-container {\n      @include ellipsis;\n      flex-grow: 1;\n      min-width: 0;\n    }\n  }\n\n  .content-container {\n    flex-grow: 1;\n    margin: $default-space;\n  }\n\n  .flip-tile-container {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background-color: var(--theme-blind-base--background);\n    border: solid 1px var(--theme-blind-base--border-color);\n    border-radius: var(--theme-flip-tile--border-radius)\n      var(--theme-flip-tile--border-radius) 0 0;\n    transform-style: preserve-3d;\n\n    &.flip-animation-active {\n      @include animation(flip-animation, 2 * $default-time, ease-in-out);\n    }\n\n    .footer {\n      display: flex;\n      height: 3rem;\n      align-items: center;\n      justify-content: center;\n      padding: 0 $small-space;\n      color: var(--theme-flip-footer--color);\n      background-color: var(--theme-blind-base--background);\n\n      :first-child {\n        @include ellipsis;\n        height: 100%;\n      }\n    }\n\n    ::slotted(*) {\n      @include ellipsis;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      min-width: 0;\n    }\n\n    &.primary {\n      border-color: var(--theme-color-primary);\n\n      .footer {\n        background-color: var(--theme-color-primary);\n        color: var(--theme-color-primary--contrast);\n      }\n    }\n\n    &.info {\n      border-color: var(--theme-color-info);\n\n      .footer {\n        background-color: var(--theme-color-info);\n        color: var(--theme-color-info--contrast);\n      }\n    }\n\n    &.warning {\n      border-color: var(--theme-color-warning);\n\n      .footer {\n        background-color: var(--theme-color-warning);\n        color: var(--theme-color-warning--contrast);\n      }\n    }\n\n    &.alarm {\n      border-color: var(--theme-color-alarm);\n\n      .footer {\n        background-color: var(--theme-color-alarm);\n        color: var(--theme-color-alarm--contrast);\n      }\n    }\n  }\n\n  &:hover .flip-tile-container .footer ix-icon {\n    color: var(--theme-color-std-text);\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { FlipTileState } from './flip-tile-state';\nimport { iconEye } from '@siemens/ix-icons/icons';\n\n@Component({\n  tag: 'ix-flip-tile',\n  styleUrl: 'flip-tile.scss',\n  shadow: true,\n})\nexport class FlipTile {\n  @Element() hostElement!: HTMLIxFlipTileElement;\n\n  /**\n   * Variation of the Flip\n   */\n  @Prop() state?: FlipTileState;\n\n  /**\n   * Height interpreted as REM\n   * @since 1.5.0\n   */\n  @Prop() height: number | 'auto' = 15.125;\n\n  /**\n   * Width interpreted as REM\n   * @since 1.5.0\n   */\n  @Prop() width: number | 'auto' = 16;\n\n  /**\n   * Index of the currently visible content\n   * @since 3.0.0\n   */\n  @Prop() index = 0;\n\n  /**\n   * Event emitted when the index changes\n   * @since 3.0.0\n   */\n  @Event() toggle!: EventEmitter<number>;\n\n  @State() isFlipAnimationActive: boolean = false;\n\n  private readonly ANIMATION_DURATION = 150;\n  private contentItems: Array<HTMLIxFlipTileContentElement> = [];\n  private observer?: MutationObserver;\n\n  @Watch('index')\n  watchIndex(newIndex: number, oldIndex: number) {\n    if (newIndex === oldIndex) {\n      return;\n    }\n\n    this.doFlipAnimation(newIndex);\n  }\n\n  componentDidLoad() {\n    this.observer = createMutationObserver(() => this.updateContentItems());\n    this.observer.observe(this.hostElement, {\n      childList: true,\n    });\n  }\n\n  componentWillLoad() {\n    this.updateContentItems();\n    this.updateContentVisibility(this.index);\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  private updateContentItems() {\n    this.contentItems = Array.from(\n      this.hostElement.querySelectorAll('ix-flip-tile-content')\n    );\n  }\n\n  private updateContentVisibility(indexVisible: number) {\n    this.contentItems.forEach(\n      (content, index) => (content.contentVisible = index === indexVisible)\n    );\n  }\n\n  private toggleIndex() {\n    let newIndex;\n\n    if (this.index >= this.contentItems.length - 1) {\n      newIndex = 0;\n    } else {\n      newIndex = this.index + 1;\n    }\n\n    const { defaultPrevented } = this.toggle.emit(newIndex);\n\n    if (defaultPrevented) {\n      return;\n    }\n\n    this.doFlipAnimation(newIndex);\n  }\n\n  private doFlipAnimation(index: number) {\n    if (this.isFlipAnimationActive) {\n      return;\n    }\n\n    this.isFlipAnimationActive = true;\n\n    setTimeout(() => {\n      this.index = index;\n\n      this.updateContentVisibility(this.index);\n    }, this.ANIMATION_DURATION);\n\n    setTimeout(() => {\n      this.isFlipAnimationActive = false;\n    }, 2 * this.ANIMATION_DURATION);\n  }\n\n  render() {\n    return (\n      <Host\n        style={{\n          height: `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          'min-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          'max-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          width: `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n          'min-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n          'max-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n        }}\n      >\n        <div\n          class={{\n            'flip-tile-container': true,\n            info: this.state === FlipTileState.Info,\n            warning: this.state === FlipTileState.Warning,\n            alarm: this.state === FlipTileState.Alarm,\n            primary: this.state === FlipTileState.Primary,\n            'flip-animation-active': this.isFlipAnimationActive,\n          }}\n        >\n          <div class=\"flip-tile-header\">\n            <div class=\"header-slot-container text-l-title\">\n              <slot name=\"header\"></slot>\n            </div>\n            <ix-icon-button\n              icon={iconEye}\n              variant=\"primary\"\n              ghost\n              onClick={() => this.toggleIndex()}\n            ></ix-icon-button>\n          </div>\n\n          <div class=\"content-container\">\n            <slot></slot>\n          </div>\n          <div\n            class={{\n              footer: true,\n              'contrast-light': this.state === FlipTileState.Warning,\n              'contrast-dark':\n                this.state === FlipTileState.Info ||\n                this.state === FlipTileState.Alarm,\n            }}\n          >\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-flip-tile.entry.cjs.js","mappings":"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","names":["createMutationObserver","h","Host","FlipTileState","iconEye"],"sources":["src/components/flip-tile/flip-tile.scss?tag=ix-flip-tile&encapsulation=shadow","src/components/flip-tile/flip-tile.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/animations';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n@import 'legacy/fonts';\n\n@include keyframes(flip-animation) {\n  0% {\n    transform: rotateY(0);\n  }\n  50% {\n    transform: rotateY(90deg);\n  }\n  51% {\n    transform: rotateY(270deg);\n  }\n  100% {\n    transform: rotateY(360deg);\n  }\n}\n\n:host {\n  @include ix-component;\n  display: flex;\n  flex-direction: column;\n  perspective: 1000px;\n\n  .flip-tile-header {\n    display: flex;\n    align-items: center;\n    height: $large-control-height;\n    padding: 0 $small-space 0 $default-space;\n\n    .header-slot-container {\n      @include ellipsis;\n      flex-grow: 1;\n      min-width: 0;\n    }\n  }\n\n  .content-container {\n    flex-grow: 1;\n    margin: $default-space;\n  }\n\n  .flip-tile-container {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background-color: var(--theme-blind-base--background);\n    border: solid 1px var(--theme-blind-base--border-color);\n    border-radius: var(--theme-flip-tile--border-radius)\n      var(--theme-flip-tile--border-radius) 0 0;\n    transform-style: preserve-3d;\n\n    &.flip-animation-active {\n      @include animation(flip-animation, 2 * $default-time, ease-in-out);\n    }\n\n    .footer {\n      display: flex;\n      height: 3rem;\n      align-items: center;\n      justify-content: center;\n      padding: 0 $small-space;\n      color: var(--theme-flip-footer--color);\n      background-color: var(--theme-blind-base--background);\n\n      :first-child {\n        @include ellipsis;\n        height: 100%;\n      }\n    }\n\n    ::slotted(*) {\n      @include ellipsis;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      min-width: 0;\n    }\n\n    &.primary {\n      border-color: var(--theme-color-primary);\n\n      .footer {\n        background-color: var(--theme-color-primary);\n        color: var(--theme-color-primary--contrast);\n      }\n    }\n\n    &.info {\n      border-color: var(--theme-color-info);\n\n      .footer {\n        background-color: var(--theme-color-info);\n        color: var(--theme-color-info--contrast);\n      }\n    }\n\n    &.warning {\n      border-color: var(--theme-color-warning);\n\n      .footer {\n        background-color: var(--theme-color-warning);\n        color: var(--theme-color-warning--contrast);\n      }\n    }\n\n    &.alarm {\n      border-color: var(--theme-color-alarm);\n\n      .footer {\n        background-color: var(--theme-color-alarm);\n        color: var(--theme-color-alarm--contrast);\n      }\n    }\n  }\n\n  &:hover .flip-tile-container .footer ix-icon {\n    color: var(--theme-color-std-text);\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { FlipTileState } from './flip-tile-state';\nimport { iconEye } from '@siemens/ix-icons/icons';\n\n@Component({\n  tag: 'ix-flip-tile',\n  styleUrl: 'flip-tile.scss',\n  shadow: true,\n})\nexport class FlipTile {\n  @Element() hostElement!: HTMLIxFlipTileElement;\n\n  /**\n   * Variation of the Flip\n   */\n  @Prop() state?: FlipTileState;\n\n  /**\n   * Height interpreted as REM\n   */\n  @Prop() height: number | 'auto' = 15.125;\n\n  /**\n   * Width interpreted as REM\n   */\n  @Prop() width: number | 'auto' = 16;\n\n  /**\n   * Index of the currently visible content\n   * @since 3.0.0\n   */\n  @Prop() index = 0;\n\n  /**\n   * Event emitted when the index changes\n   * @since 3.0.0\n   */\n  @Event() toggle!: EventEmitter<number>;\n\n  @State() isFlipAnimationActive: boolean = false;\n\n  private readonly ANIMATION_DURATION = 150;\n  private contentItems: Array<HTMLIxFlipTileContentElement> = [];\n  private observer?: MutationObserver;\n\n  @Watch('index')\n  watchIndex(newIndex: number, oldIndex: number) {\n    if (newIndex === oldIndex) {\n      return;\n    }\n\n    this.doFlipAnimation(newIndex);\n  }\n\n  componentDidLoad() {\n    this.observer = createMutationObserver(() => this.updateContentItems());\n    this.observer.observe(this.hostElement, {\n      childList: true,\n    });\n  }\n\n  componentWillLoad() {\n    this.updateContentItems();\n    this.updateContentVisibility(this.index);\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  private updateContentItems() {\n    this.contentItems = Array.from(\n      this.hostElement.querySelectorAll('ix-flip-tile-content')\n    );\n  }\n\n  private updateContentVisibility(indexVisible: number) {\n    this.contentItems.forEach(\n      (content, index) => (content.contentVisible = index === indexVisible)\n    );\n  }\n\n  private toggleIndex() {\n    let newIndex;\n\n    if (this.index >= this.contentItems.length - 1) {\n      newIndex = 0;\n    } else {\n      newIndex = this.index + 1;\n    }\n\n    const { defaultPrevented } = this.toggle.emit(newIndex);\n\n    if (defaultPrevented) {\n      return;\n    }\n\n    this.doFlipAnimation(newIndex);\n  }\n\n  private doFlipAnimation(index: number) {\n    if (this.isFlipAnimationActive) {\n      return;\n    }\n\n    this.isFlipAnimationActive = true;\n\n    setTimeout(() => {\n      this.index = index;\n\n      this.updateContentVisibility(this.index);\n    }, this.ANIMATION_DURATION);\n\n    setTimeout(() => {\n      this.isFlipAnimationActive = false;\n    }, 2 * this.ANIMATION_DURATION);\n  }\n\n  render() {\n    return (\n      <Host\n        style={{\n          height: `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          'min-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          'max-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          width: `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n          'min-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n          'max-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n        }}\n      >\n        <div\n          class={{\n            'flip-tile-container': true,\n            info: this.state === FlipTileState.Info,\n            warning: this.state === FlipTileState.Warning,\n            alarm: this.state === FlipTileState.Alarm,\n            primary: this.state === FlipTileState.Primary,\n            'flip-animation-active': this.isFlipAnimationActive,\n          }}\n        >\n          <div class=\"flip-tile-header\">\n            <div class=\"header-slot-container text-l-title\">\n              <slot name=\"header\"></slot>\n            </div>\n            <ix-icon-button\n              icon={iconEye}\n              variant=\"primary\"\n              ghost\n              onClick={() => this.toggleIndex()}\n            ></ix-icon-button>\n          </div>\n\n          <div class=\"content-container\">\n            <slot></slot>\n          </div>\n          <div\n            class={{\n              footer: true,\n              'contrast-light': this.state === FlipTileState.Warning,\n              'contrast-dark':\n                this.state === FlipTileState.Info ||\n                this.state === FlipTileState.Alarm,\n            }}\n          >\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ix-flip-tile.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-flip-tile.entry.cjs.js","sources":["src/components/flip-tile/flip-tile.scss?tag=ix-flip-tile&encapsulation=shadow","src/components/flip-tile/flip-tile.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/animations';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n@import 'legacy/fonts';\n\n@include keyframes(flip-animation) {\n  0% {\n    transform: rotateY(0);\n  }\n  50% {\n    transform: rotateY(90deg);\n  }\n  51% {\n    transform: rotateY(270deg);\n  }\n  100% {\n    transform: rotateY(360deg);\n  }\n}\n\n:host {\n  @include ix-component;\n  display: flex;\n  flex-direction: column;\n  perspective: 1000px;\n\n  .flip-tile-header {\n    display: flex;\n    align-items: center;\n    height: $large-control-height;\n    padding: 0 $small-space 0 $default-space;\n\n    .header-slot-container {\n      @include ellipsis;\n      flex-grow: 1;\n      min-width: 0;\n    }\n  }\n\n  .content-container {\n    flex-grow: 1;\n    margin: $default-space;\n  }\n\n  .flip-tile-container {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background-color: var(--theme-blind-base--background);\n    border: solid 1px var(--theme-blind-base--border-color);\n    border-radius: var(--theme-flip-tile--border-radius)\n      var(--theme-flip-tile--border-radius) 0 0;\n    transform-style: preserve-3d;\n\n    &.flip-animation-active {\n      @include animation(flip-animation, 2 * $default-time, ease-in-out);\n    }\n\n    .footer {\n      display: flex;\n      height: 3rem;\n      align-items: center;\n      justify-content: center;\n      padding: 0 $small-space;\n      color: var(--theme-flip-footer--color);\n      background-color: var(--theme-blind-base--background);\n\n      :first-child {\n        @include ellipsis;\n        height: 100%;\n      }\n    }\n\n    ::slotted(*) {\n      @include ellipsis;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      min-width: 0;\n    }\n\n    &.primary {\n      border-color: var(--theme-color-primary);\n\n      .footer {\n        background-color: var(--theme-color-primary);\n        color: var(--theme-color-primary--contrast);\n      }\n    }\n\n    &.info {\n      border-color: var(--theme-color-info);\n\n      .footer {\n        background-color: var(--theme-color-info);\n        color: var(--theme-color-info--contrast);\n      }\n    }\n\n    &.warning {\n      border-color: var(--theme-color-warning);\n\n      .footer {\n        background-color: var(--theme-color-warning);\n        color: var(--theme-color-warning--contrast);\n      }\n    }\n\n    &.alarm {\n      border-color: var(--theme-color-alarm);\n\n      .footer {\n        background-color: var(--theme-color-alarm);\n        color: var(--theme-color-alarm--contrast);\n      }\n    }\n  }\n\n  &:hover .flip-tile-container .footer ix-icon {\n    color: var(--theme-color-std-text);\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { FlipTileState } from './flip-tile-state';\nimport { iconEye } from '@siemens/ix-icons/icons';\n\n@Component({\n  tag: 'ix-flip-tile',\n  styleUrl: 'flip-tile.scss',\n  shadow: true,\n})\nexport class FlipTile {\n  @Element() hostElement!: HTMLIxFlipTileElement;\n\n  /**\n   * Variation of the Flip\n   */\n  @Prop() state?: FlipTileState;\n\n  /**\n   * Height interpreted as REM\n   * @since 1.5.0\n   */\n  @Prop() height: number | 'auto' = 15.125;\n\n  /**\n   * Width interpreted as REM\n   * @since 1.5.0\n   */\n  @Prop() width: number | 'auto' = 16;\n\n  /**\n   * Index of the currently visible content\n   * @since 3.0.0\n   */\n  @Prop() index = 0;\n\n  /**\n   * Event emitted when the index changes\n   * @since 3.0.0\n   */\n  @Event() toggle!: EventEmitter<number>;\n\n  @State() isFlipAnimationActive: boolean = false;\n\n  private readonly ANIMATION_DURATION = 150;\n  private contentItems: Array<HTMLIxFlipTileContentElement> = [];\n  private observer?: MutationObserver;\n\n  @Watch('index')\n  watchIndex(newIndex: number, oldIndex: number) {\n    if (newIndex === oldIndex) {\n      return;\n    }\n\n    this.doFlipAnimation(newIndex);\n  }\n\n  componentDidLoad() {\n    this.observer = createMutationObserver(() => this.updateContentItems());\n    this.observer.observe(this.hostElement, {\n      childList: true,\n    });\n  }\n\n  componentWillLoad() {\n    this.updateContentItems();\n    this.updateContentVisibility(this.index);\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  private updateContentItems() {\n    this.contentItems = Array.from(\n      this.hostElement.querySelectorAll('ix-flip-tile-content')\n    );\n  }\n\n  private updateContentVisibility(indexVisible: number) {\n    this.contentItems.forEach(\n      (content, index) => (content.contentVisible = index === indexVisible)\n    );\n  }\n\n  private toggleIndex() {\n    let newIndex;\n\n    if (this.index >= this.contentItems.length - 1) {\n      newIndex = 0;\n    } else {\n      newIndex = this.index + 1;\n    }\n\n    const { defaultPrevented } = this.toggle.emit(newIndex);\n\n    if (defaultPrevented) {\n      return;\n    }\n\n    this.doFlipAnimation(newIndex);\n  }\n\n  private doFlipAnimation(index: number) {\n    if (this.isFlipAnimationActive) {\n      return;\n    }\n\n    this.isFlipAnimationActive = true;\n\n    setTimeout(() => {\n      this.index = index;\n\n      this.updateContentVisibility(this.index);\n    }, this.ANIMATION_DURATION);\n\n    setTimeout(() => {\n      this.isFlipAnimationActive = false;\n    }, 2 * this.ANIMATION_DURATION);\n  }\n\n  render() {\n    return (\n      <Host\n        style={{\n          height: `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          'min-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          'max-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          width: `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n          'min-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n          'max-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n        }}\n      >\n        <div\n          class={{\n            'flip-tile-container': true,\n            info: this.state === FlipTileState.Info,\n            warning: this.state === FlipTileState.Warning,\n            alarm: this.state === FlipTileState.Alarm,\n            primary: this.state === FlipTileState.Primary,\n            'flip-animation-active': this.isFlipAnimationActive,\n          }}\n        >\n          <div class=\"flip-tile-header\">\n            <div class=\"header-slot-container text-l-title\">\n              <slot name=\"header\"></slot>\n            </div>\n            <ix-icon-button\n              icon={iconEye}\n              variant=\"primary\"\n              ghost\n              onClick={() => this.toggleIndex()}\n            ></ix-icon-button>\n          </div>\n\n          <div class=\"content-container\">\n            <slot></slot>\n          </div>\n          <div\n            class={{\n              footer: true,\n              'contrast-light': this.state === FlipTileState.Warning,\n              'contrast-dark':\n                this.state === FlipTileState.Info ||\n                this.state === FlipTileState.Alarm,\n            }}\n          >\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["createMutationObserver","h","Host","FlipTileState","iconEye"],"mappings":"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"}
+{"version":3,"file":"ix-flip-tile.entry.cjs.js","sources":["src/components/flip-tile/flip-tile.scss?tag=ix-flip-tile&encapsulation=shadow","src/components/flip-tile/flip-tile.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/animations';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n@import 'legacy/fonts';\n\n@include keyframes(flip-animation) {\n  0% {\n    transform: rotateY(0);\n  }\n  50% {\n    transform: rotateY(90deg);\n  }\n  51% {\n    transform: rotateY(270deg);\n  }\n  100% {\n    transform: rotateY(360deg);\n  }\n}\n\n:host {\n  @include ix-component;\n  display: flex;\n  flex-direction: column;\n  perspective: 1000px;\n\n  .flip-tile-header {\n    display: flex;\n    align-items: center;\n    height: $large-control-height;\n    padding: 0 $small-space 0 $default-space;\n\n    .header-slot-container {\n      @include ellipsis;\n      flex-grow: 1;\n      min-width: 0;\n    }\n  }\n\n  .content-container {\n    flex-grow: 1;\n    margin: $default-space;\n  }\n\n  .flip-tile-container {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background-color: var(--theme-blind-base--background);\n    border: solid 1px var(--theme-blind-base--border-color);\n    border-radius: var(--theme-flip-tile--border-radius)\n      var(--theme-flip-tile--border-radius) 0 0;\n    transform-style: preserve-3d;\n\n    &.flip-animation-active {\n      @include animation(flip-animation, 2 * $default-time, ease-in-out);\n    }\n\n    .footer {\n      display: flex;\n      height: 3rem;\n      align-items: center;\n      justify-content: center;\n      padding: 0 $small-space;\n      color: var(--theme-flip-footer--color);\n      background-color: var(--theme-blind-base--background);\n\n      :first-child {\n        @include ellipsis;\n        height: 100%;\n      }\n    }\n\n    ::slotted(*) {\n      @include ellipsis;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      min-width: 0;\n    }\n\n    &.primary {\n      border-color: var(--theme-color-primary);\n\n      .footer {\n        background-color: var(--theme-color-primary);\n        color: var(--theme-color-primary--contrast);\n      }\n    }\n\n    &.info {\n      border-color: var(--theme-color-info);\n\n      .footer {\n        background-color: var(--theme-color-info);\n        color: var(--theme-color-info--contrast);\n      }\n    }\n\n    &.warning {\n      border-color: var(--theme-color-warning);\n\n      .footer {\n        background-color: var(--theme-color-warning);\n        color: var(--theme-color-warning--contrast);\n      }\n    }\n\n    &.alarm {\n      border-color: var(--theme-color-alarm);\n\n      .footer {\n        background-color: var(--theme-color-alarm);\n        color: var(--theme-color-alarm--contrast);\n      }\n    }\n  }\n\n  &:hover .flip-tile-container .footer ix-icon {\n    color: var(--theme-color-std-text);\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { FlipTileState } from './flip-tile-state';\nimport { iconEye } from '@siemens/ix-icons/icons';\n\n@Component({\n  tag: 'ix-flip-tile',\n  styleUrl: 'flip-tile.scss',\n  shadow: true,\n})\nexport class FlipTile {\n  @Element() hostElement!: HTMLIxFlipTileElement;\n\n  /**\n   * Variation of the Flip\n   */\n  @Prop() state?: FlipTileState;\n\n  /**\n   * Height interpreted as REM\n   */\n  @Prop() height: number | 'auto' = 15.125;\n\n  /**\n   * Width interpreted as REM\n   */\n  @Prop() width: number | 'auto' = 16;\n\n  /**\n   * Index of the currently visible content\n   * @since 3.0.0\n   */\n  @Prop() index = 0;\n\n  /**\n   * Event emitted when the index changes\n   * @since 3.0.0\n   */\n  @Event() toggle!: EventEmitter<number>;\n\n  @State() isFlipAnimationActive: boolean = false;\n\n  private readonly ANIMATION_DURATION = 150;\n  private contentItems: Array<HTMLIxFlipTileContentElement> = [];\n  private observer?: MutationObserver;\n\n  @Watch('index')\n  watchIndex(newIndex: number, oldIndex: number) {\n    if (newIndex === oldIndex) {\n      return;\n    }\n\n    this.doFlipAnimation(newIndex);\n  }\n\n  componentDidLoad() {\n    this.observer = createMutationObserver(() => this.updateContentItems());\n    this.observer.observe(this.hostElement, {\n      childList: true,\n    });\n  }\n\n  componentWillLoad() {\n    this.updateContentItems();\n    this.updateContentVisibility(this.index);\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  private updateContentItems() {\n    this.contentItems = Array.from(\n      this.hostElement.querySelectorAll('ix-flip-tile-content')\n    );\n  }\n\n  private updateContentVisibility(indexVisible: number) {\n    this.contentItems.forEach(\n      (content, index) => (content.contentVisible = index === indexVisible)\n    );\n  }\n\n  private toggleIndex() {\n    let newIndex;\n\n    if (this.index >= this.contentItems.length - 1) {\n      newIndex = 0;\n    } else {\n      newIndex = this.index + 1;\n    }\n\n    const { defaultPrevented } = this.toggle.emit(newIndex);\n\n    if (defaultPrevented) {\n      return;\n    }\n\n    this.doFlipAnimation(newIndex);\n  }\n\n  private doFlipAnimation(index: number) {\n    if (this.isFlipAnimationActive) {\n      return;\n    }\n\n    this.isFlipAnimationActive = true;\n\n    setTimeout(() => {\n      this.index = index;\n\n      this.updateContentVisibility(this.index);\n    }, this.ANIMATION_DURATION);\n\n    setTimeout(() => {\n      this.isFlipAnimationActive = false;\n    }, 2 * this.ANIMATION_DURATION);\n  }\n\n  render() {\n    return (\n      <Host\n        style={{\n          height: `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          'min-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          'max-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n          width: `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n          'min-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n          'max-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n        }}\n      >\n        <div\n          class={{\n            'flip-tile-container': true,\n            info: this.state === FlipTileState.Info,\n            warning: this.state === FlipTileState.Warning,\n            alarm: this.state === FlipTileState.Alarm,\n            primary: this.state === FlipTileState.Primary,\n            'flip-animation-active': this.isFlipAnimationActive,\n          }}\n        >\n          <div class=\"flip-tile-header\">\n            <div class=\"header-slot-container text-l-title\">\n              <slot name=\"header\"></slot>\n            </div>\n            <ix-icon-button\n              icon={iconEye}\n              variant=\"primary\"\n              ghost\n              onClick={() => this.toggleIndex()}\n            ></ix-icon-button>\n          </div>\n\n          <div class=\"content-container\">\n            <slot></slot>\n          </div>\n          <div\n            class={{\n              footer: true,\n              'contrast-light': this.state === FlipTileState.Warning,\n              'contrast-dark':\n                this.state === FlipTileState.Info ||\n                this.state === FlipTileState.Alarm,\n            }}\n          >\n            <slot name=\"footer\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["createMutationObserver","h","Host","FlipTileState","iconEye"],"mappings":"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"}

package/dist/cjs/ix-helper-text.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-CnXGUOZU.js');
-var validation = require('./validation-B-wzGaWF.js');
+var validation = require('./validation-othAjI_Z.js');
 var helperTextUtil = require('./helper-text-util-Dk2i8B86.js');
 require('./index-DIFIjYrm.js');
 

package/dist/cjs/ix-icon-button.ix-spinner.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-icon-button.ix-spinner.entry.cjs.js","sources":["src/components/icon-button/icon-button.scss?tag=ix-icon-button&encapsulation=shadow","src/components/icon-button/icon-button.tsx","src/components/spinner/spinner.scss?tag=ix-spinner&encapsulation=shadow","src/components/spinner/spinner.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-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 { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\nimport { getFallbackLabelFromIconName } from '../utils/a11y';\n\nexport type IconButtonVariant = ButtonVariant;\n\n@Component({\n  tag: 'ix-icon-button',\n  styleUrl: 'icon-button.scss',\n  shadow: true,\n})\nexport class IconButton {\n  @Element() hostElement!: HTMLIxIconButtonElement;\n\n  /**\n   * Accessibility label for the icon button\n   * Will be set as aria-label on the nested HTML button element\n   *\n   * @since 2.1.0\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  /**\n   * Variant of button\n   * @since 2.3.0 - variant danger\n   */\n  @Prop() variant: IconButtonVariant = 'secondary';\n\n  /**\n   * Button outline\n   */\n  @Prop() outline: boolean = false;\n\n  /**\n   * Button invisible\n   */\n  @Prop() ghost: boolean = false;\n\n  /**\n   * Button in oval shape\n   */\n  @Prop() oval: boolean = false;\n\n  /**\n   * Icon name\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Size of icon in button\n   *\n   */\n  @Prop() size: '24' | '16' | '12' = '24';\n\n  /**\n   * Color of icon in  button\n   */\n  @Prop() iconColor?: string;\n\n  /**\n   * Disabled\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Type of the button\n   */\n  @Prop() type: 'button' | 'submit' = 'button';\n\n  /**\n   * Loading button\n   *\n   * @since 2.0.0\n   */\n  @Prop() loading = false;\n\n  /**\n   * Temp. workaround until stencil issue is fixed (https://github.com/ionic-team/stencil/issues/2284)\n   */\n  submitButtonElement!: HTMLButtonElement;\n\n  componentDidLoad() {\n    if (this.type === 'submit') {\n      const submitButton = document.createElement('button');\n      submitButton.style.display = 'none';\n      submitButton.type = 'submit';\n      submitButton.tabIndex = -1;\n      this.hostElement.appendChild(submitButton);\n\n      this.submitButtonElement = submitButton;\n    }\n  }\n\n  dispatchFormEvents() {\n    if (this.type === 'submit' && this.submitButtonElement) {\n      this.submitButtonElement.click();\n    }\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' || !this.size,\n    };\n  }\n\n  render() {\n    const baseButtonProps: BaseButtonProps = {\n      ariaAttributes: {\n        'aria-label': this.a11yLabel\n          ? this.a11yLabel\n          : getFallbackLabelFromIconName(this.icon),\n      },\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      iconOnly: true,\n      iconOval: this.oval,\n      selected: false,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      iconColor: this.iconColor,\n      iconSize: this.size,\n      loading: this.loading,\n      onClick: () => this.dispatchFormEvents(),\n      type: this.type,\n      extraClasses: this.getIconSizeClass(),\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","/*\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/shadow-dom/component';\n\n@mixin ix-spinner($size-name: 'medium', $size: 2rem, $track-size: 4px) {\n  :host {\n    @include ix-component;\n    display: block;\n    position: relative;\n  }\n\n  .#{$size-name} {\n    width: $size;\n    height: $size;\n    min-width: $size;\n    min-height: $size;\n    max-width: $size;\n    max-height: $size;\n    border-radius: 100%;\n    position: relative;\n    animation: rotate 2s linear infinite;\n\n    @keyframes rotate {\n      100% {\n        transform: rotate(360deg);\n      }\n    }\n\n    @keyframes clipMask {\n      0% {\n        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n      }\n      12.5% {\n        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n      }\n      25% {\n        clip-path: polygon(\n          50% 50%,\n          0 0,\n          100% 0,\n          100% 100%,\n          100% 100%,\n          100% 100%\n        );\n      }\n      37.5% {\n        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n      }\n      50% {\n        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n      }\n      62.5% {\n        clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);\n      }\n      75% {\n        clip-path: polygon(\n          50% 50%,\n          100% 100%,\n          100% 100%,\n          100% 100%,\n          0 100%,\n          0 0\n        );\n      }\n      87.5% {\n        clip-path: polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);\n      }\n      100% {\n        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n      }\n    }\n  }\n\n  .#{$size-name}::after {\n    content: '';\n    box-sizing: border-box;\n    position: absolute;\n    inset: 8.33%;\n    border-radius: 100%;\n    border: $track-size solid\n      var(--ix-button-color, var(--theme-color-soft-text));\n    animation: clipMask 3s linear infinite;\n  }\n\n  .#{$size-name}:not(.hide-track)::before {\n    content: '';\n    box-sizing: border-box;\n    position: absolute;\n    inset: 8.33%;\n    border-radius: 100%;\n    border: $track-size solid var(--theme-color-ghost--hover);\n  }\n\n  .primary::after {\n    border-color: var(--theme-color-dynamic);\n  }\n\n  .primary::before {\n    border-color: var(--theme-color-ghost--hover);\n  }\n}\n\n@include ix-spinner($size-name: 'xx-small', $size: 0.75rem, $track-size: 1px);\n@include ix-spinner($size-name: 'x-small', $size: 1.25rem, $track-size: 2px);\n@include ix-spinner($size-name: 'small', $size: 1.5rem, $track-size: 2px);\n@include ix-spinner($size-name: 'medium', $size: 2rem, $track-size: 2px);\n@include ix-spinner($size-name: 'large', $size: 6rem, $track-size: 4px);\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-spinner',\n  styleUrl: 'spinner.scss',\n  shadow: true,\n})\nexport class Spinner {\n  @Element() hostElement!: HTMLIxSpinnerElement;\n\n  /**\n   * Variant of spinner\n   */\n  @Prop() variant: 'primary' | 'secondary' = 'secondary';\n\n  /**\n   * Size of spinner\n   */\n  @Prop() size: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' =\n    'medium';\n\n  /**\n   * @internal\n   */\n  @Prop() hideTrack = false;\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            primary: this.variant === 'primary',\n            [this.size]: true,\n            'hide-track': this.hideTrack,\n          }}\n        ></div>\n      </Host>\n    );\n  }\n}\n"],"names":["getFallbackLabelFromIconName","h","Host","BaseIconButton"],"mappings":";;;;;;;AAAA,MAAM,aAAa,GAAG,y7tBAAy7tB;;MCsBl8tB,UAAU,GAAA,MAAA;AALvB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAgBE;;;AAGG;AACK,QAAA,IAAO,CAAA,OAAA,GAAsB,WAAW;AAEhD;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;AAEhC;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAY,KAAK;AAE9B;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AAO7B;;;AAGG;AACK,QAAA,IAAI,CAAA,IAAA,GAAuB,IAAI;AAOvC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAExB;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAwB,QAAQ;AAE5C;;;;AAIG;AACK,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAmExB;IA5DC,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;YAC1B,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC;AACrD,YAAA,YAAY,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM;AACnC,YAAA,YAAY,CAAC,IAAI,GAAG,QAAQ;AAC5B,YAAA,YAAY,CAAC,QAAQ,GAAG,EAAE;AAC1B,YAAA,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,YAAY,CAAC;AAE1C,YAAA,IAAI,CAAC,mBAAmB,GAAG,YAAY;;;IAI3C,kBAAkB,GAAA;QAChB,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,mBAAmB,EAAE;AACtD,YAAA,IAAI,CAAC,mBAAmB,CAAC,KAAK,EAAE;;;IAI5B,gBAAgB,GAAA;QACtB,OAAO;AACL,YAAA,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;AACjC,YAAA,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI;YACjC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI;SAChD;;IAGH,MAAM,GAAA;AACJ,QAAA,MAAM,eAAe,GAAoB;AACvC,YAAA,cAAc,EAAE;gBACd,YAAY,EAAE,IAAI,CAAC;sBACf,IAAI,CAAC;AACP,sBAAEA,iCAA4B,CAAC,IAAI,CAAC,IAAI,CAAC;AAC5C,aAAA;YACD,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK;AACjB,YAAA,QAAQ,EAAE,IAAI;YACd,QAAQ,EAAE,IAAI,CAAC,IAAI;AACnB,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;YACvC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,QAAQ,EAAE,IAAI,CAAC,IAAI;YACnB,OAAO,EAAE,IAAI,CAAC,OAAO;AACrB,YAAA,OAAO,EAAE,MAAM,IAAI,CAAC,kBAAkB,EAAE;YACxC,IAAI,EAAE,IAAI,CAAC,IAAI;AACf,YAAA,YAAY,EAAE,IAAI,CAAC,gBAAgB,EAAE;SACtC;AAED,QAAA,QACEC,OAAC,CAAAC,UAAI,qDACH,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACA,IAAI,CAAC,gBAAgB,EAAE,CAC1B,EAAA,EAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,EAAA,CAAA,EAAA,EAGzCD,OAAA,CAACE,6BAAc,EAAK,MAAA,CAAA,MAAA,CAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,eAAe,CAAmB,CAAA,CACjD;;;;;;ACrJb,MAAM,UAAU,GAAG,0hVAA0hV;;MCgBhiV,OAAO,GAAA,MAAA;AALpB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAQE;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAA4B,WAAW;AAEtD;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GACV,QAAQ;AAEV;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;AAe1B;IAbC,MAAM,GAAA;QACJ,QACEF,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACHD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;AACnC,gBAAA,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI;gBACjB,YAAY,EAAE,IAAI,CAAC,SAAS;aAC7B,EACI,CAAA,CACF;;;;;;;;;"}
+{"version":3,"file":"ix-icon-button.ix-spinner.entry.cjs.js","sources":["src/components/icon-button/icon-button.scss?tag=ix-icon-button&encapsulation=shadow","src/components/icon-button/icon-button.tsx","src/components/spinner/spinner.scss?tag=ix-spinner&encapsulation=shadow","src/components/spinner/spinner.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-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 { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\nimport { getFallbackLabelFromIconName } from '../utils/a11y';\n\nexport type IconButtonVariant = ButtonVariant;\n\n@Component({\n  tag: 'ix-icon-button',\n  styleUrl: 'icon-button.scss',\n  shadow: true,\n})\nexport class IconButton {\n  @Element() hostElement!: HTMLIxIconButtonElement;\n\n  /**\n   * Accessibility label for the icon button\n   * Will be set as aria-label on the nested HTML button element\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  /**\n   * Variant of button\n   */\n  @Prop() variant: IconButtonVariant = 'secondary';\n\n  /**\n   * Button outline\n   */\n  @Prop() outline: boolean = false;\n\n  /**\n   * Button invisible\n   */\n  @Prop() ghost: boolean = false;\n\n  /**\n   * Button in oval shape\n   */\n  @Prop() oval: boolean = false;\n\n  /**\n   * Icon name\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Size of icon in button\n   *\n   */\n  @Prop() size: '24' | '16' | '12' = '24';\n\n  /**\n   * Color of icon in  button\n   */\n  @Prop() iconColor?: string;\n\n  /**\n   * Disabled\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Type of the button\n   */\n  @Prop() type: 'button' | 'submit' = 'button';\n\n  /**\n   * Loading button\n   */\n  @Prop() loading = false;\n\n  /**\n   * Temp. workaround until stencil issue is fixed (https://github.com/ionic-team/stencil/issues/2284)\n   */\n  submitButtonElement!: HTMLButtonElement;\n\n  componentDidLoad() {\n    if (this.type === 'submit') {\n      const submitButton = document.createElement('button');\n      submitButton.style.display = 'none';\n      submitButton.type = 'submit';\n      submitButton.tabIndex = -1;\n      this.hostElement.appendChild(submitButton);\n\n      this.submitButtonElement = submitButton;\n    }\n  }\n\n  dispatchFormEvents() {\n    if (this.type === 'submit' && this.submitButtonElement) {\n      this.submitButtonElement.click();\n    }\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' || !this.size,\n    };\n  }\n\n  render() {\n    const baseButtonProps: BaseButtonProps = {\n      ariaAttributes: {\n        'aria-label': this.a11yLabel\n          ? this.a11yLabel\n          : getFallbackLabelFromIconName(this.icon),\n      },\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      iconOnly: true,\n      iconOval: this.oval,\n      selected: false,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      iconColor: this.iconColor,\n      iconSize: this.size,\n      loading: this.loading,\n      onClick: () => this.dispatchFormEvents(),\n      type: this.type,\n      extraClasses: this.getIconSizeClass(),\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","/*\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/shadow-dom/component';\n\n@mixin ix-spinner($size-name: 'medium', $size: 2rem, $track-size: 4px) {\n  :host {\n    @include ix-component;\n    display: block;\n    position: relative;\n  }\n\n  .#{$size-name} {\n    width: $size;\n    height: $size;\n    min-width: $size;\n    min-height: $size;\n    max-width: $size;\n    max-height: $size;\n    border-radius: 100%;\n    position: relative;\n    animation: rotate 2s linear infinite;\n\n    @keyframes rotate {\n      100% {\n        transform: rotate(360deg);\n      }\n    }\n\n    @keyframes clipMask {\n      0% {\n        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n      }\n      12.5% {\n        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n      }\n      25% {\n        clip-path: polygon(\n          50% 50%,\n          0 0,\n          100% 0,\n          100% 100%,\n          100% 100%,\n          100% 100%\n        );\n      }\n      37.5% {\n        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n      }\n      50% {\n        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n      }\n      62.5% {\n        clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);\n      }\n      75% {\n        clip-path: polygon(\n          50% 50%,\n          100% 100%,\n          100% 100%,\n          100% 100%,\n          0 100%,\n          0 0\n        );\n      }\n      87.5% {\n        clip-path: polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);\n      }\n      100% {\n        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n      }\n    }\n  }\n\n  .#{$size-name}::after {\n    content: '';\n    box-sizing: border-box;\n    position: absolute;\n    inset: 8.33%;\n    border-radius: 100%;\n    border: $track-size solid\n      var(--ix-button-color, var(--theme-color-soft-text));\n    animation: clipMask 3s linear infinite;\n  }\n\n  .#{$size-name}:not(.hide-track)::before {\n    content: '';\n    box-sizing: border-box;\n    position: absolute;\n    inset: 8.33%;\n    border-radius: 100%;\n    border: $track-size solid var(--theme-color-ghost--hover);\n  }\n\n  .primary::after {\n    border-color: var(--theme-color-dynamic);\n  }\n\n  .primary::before {\n    border-color: var(--theme-color-ghost--hover);\n  }\n}\n\n@include ix-spinner($size-name: 'xx-small', $size: 0.75rem, $track-size: 1px);\n@include ix-spinner($size-name: 'x-small', $size: 1.25rem, $track-size: 2px);\n@include ix-spinner($size-name: 'small', $size: 1.5rem, $track-size: 2px);\n@include ix-spinner($size-name: 'medium', $size: 2rem, $track-size: 2px);\n@include ix-spinner($size-name: 'large', $size: 6rem, $track-size: 4px);\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-spinner',\n  styleUrl: 'spinner.scss',\n  shadow: true,\n})\nexport class Spinner {\n  @Element() hostElement!: HTMLIxSpinnerElement;\n\n  /**\n   * Variant of spinner\n   */\n  @Prop() variant: 'primary' | 'secondary' = 'secondary';\n\n  /**\n   * Size of spinner\n   */\n  @Prop() size: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' =\n    'medium';\n\n  /**\n   * @internal\n   */\n  @Prop() hideTrack = false;\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            primary: this.variant === 'primary',\n            [this.size]: true,\n            'hide-track': this.hideTrack,\n          }}\n        ></div>\n      </Host>\n    );\n  }\n}\n"],"names":["getFallbackLabelFromIconName","h","Host","BaseIconButton"],"mappings":"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"}

package/dist/cjs/ix-icon-button_2.cjs.entry.js

@@ -12,7 +12,6 @@ const IconButton = class {
         index.registerInstance(this, hostRef);
         /**
          * Variant of button
-         * @since 2.3.0 - variant danger
          */
         this.variant = 'secondary';
         /**
@@ -42,8 +41,6 @@ const IconButton = class {
         this.type = 'button';
         /**
          * Loading button
-         *
-         * @since 2.0.0
          */
         this.loading = false;
     }
@@ -91,7 +88,7 @@ const IconButton = class {
             type: this.type,
             extraClasses: this.getIconSizeClass(),
         };
-        return (index.h(index.Host, { key: '6a8627c8e3e093bfb86d60748fcac8f7677b3463', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, index.h(baseIconButton.BaseIconButton, Object.assign({ key: 'be439ea407b8c736e014775fe209d99cb6663631' }, baseButtonProps))));
+        return (index.h(index.Host, { key: '489506f8d42dfa6e8d851305ffa875b826f4bbe0', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, index.h(baseIconButton.BaseIconButton, Object.assign({ key: 'af5769a992a9f367c53b89abc51638e75da85bf0' }, baseButtonProps))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/ix-icon-button_2.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ix-icon-button.ix-spinner.entry.cjs.js","mappings":"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","names":["getFallbackLabelFromIconName","h","Host","BaseIconButton"],"sources":["src/components/icon-button/icon-button.scss?tag=ix-icon-button&encapsulation=shadow","src/components/icon-button/icon-button.tsx","src/components/spinner/spinner.scss?tag=ix-spinner&encapsulation=shadow","src/components/spinner/spinner.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-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 { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\nimport { getFallbackLabelFromIconName } from '../utils/a11y';\n\nexport type IconButtonVariant = ButtonVariant;\n\n@Component({\n  tag: 'ix-icon-button',\n  styleUrl: 'icon-button.scss',\n  shadow: true,\n})\nexport class IconButton {\n  @Element() hostElement!: HTMLIxIconButtonElement;\n\n  /**\n   * Accessibility label for the icon button\n   * Will be set as aria-label on the nested HTML button element\n   *\n   * @since 2.1.0\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  /**\n   * Variant of button\n   * @since 2.3.0 - variant danger\n   */\n  @Prop() variant: IconButtonVariant = 'secondary';\n\n  /**\n   * Button outline\n   */\n  @Prop() outline: boolean = false;\n\n  /**\n   * Button invisible\n   */\n  @Prop() ghost: boolean = false;\n\n  /**\n   * Button in oval shape\n   */\n  @Prop() oval: boolean = false;\n\n  /**\n   * Icon name\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Size of icon in button\n   *\n   */\n  @Prop() size: '24' | '16' | '12' = '24';\n\n  /**\n   * Color of icon in  button\n   */\n  @Prop() iconColor?: string;\n\n  /**\n   * Disabled\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Type of the button\n   */\n  @Prop() type: 'button' | 'submit' = 'button';\n\n  /**\n   * Loading button\n   *\n   * @since 2.0.0\n   */\n  @Prop() loading = false;\n\n  /**\n   * Temp. workaround until stencil issue is fixed (https://github.com/ionic-team/stencil/issues/2284)\n   */\n  submitButtonElement!: HTMLButtonElement;\n\n  componentDidLoad() {\n    if (this.type === 'submit') {\n      const submitButton = document.createElement('button');\n      submitButton.style.display = 'none';\n      submitButton.type = 'submit';\n      submitButton.tabIndex = -1;\n      this.hostElement.appendChild(submitButton);\n\n      this.submitButtonElement = submitButton;\n    }\n  }\n\n  dispatchFormEvents() {\n    if (this.type === 'submit' && this.submitButtonElement) {\n      this.submitButtonElement.click();\n    }\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' || !this.size,\n    };\n  }\n\n  render() {\n    const baseButtonProps: BaseButtonProps = {\n      ariaAttributes: {\n        'aria-label': this.a11yLabel\n          ? this.a11yLabel\n          : getFallbackLabelFromIconName(this.icon),\n      },\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      iconOnly: true,\n      iconOval: this.oval,\n      selected: false,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      iconColor: this.iconColor,\n      iconSize: this.size,\n      loading: this.loading,\n      onClick: () => this.dispatchFormEvents(),\n      type: this.type,\n      extraClasses: this.getIconSizeClass(),\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","/*\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/shadow-dom/component';\n\n@mixin ix-spinner($size-name: 'medium', $size: 2rem, $track-size: 4px) {\n  :host {\n    @include ix-component;\n    display: block;\n    position: relative;\n  }\n\n  .#{$size-name} {\n    width: $size;\n    height: $size;\n    min-width: $size;\n    min-height: $size;\n    max-width: $size;\n    max-height: $size;\n    border-radius: 100%;\n    position: relative;\n    animation: rotate 2s linear infinite;\n\n    @keyframes rotate {\n      100% {\n        transform: rotate(360deg);\n      }\n    }\n\n    @keyframes clipMask {\n      0% {\n        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n      }\n      12.5% {\n        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n      }\n      25% {\n        clip-path: polygon(\n          50% 50%,\n          0 0,\n          100% 0,\n          100% 100%,\n          100% 100%,\n          100% 100%\n        );\n      }\n      37.5% {\n        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n      }\n      50% {\n        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n      }\n      62.5% {\n        clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);\n      }\n      75% {\n        clip-path: polygon(\n          50% 50%,\n          100% 100%,\n          100% 100%,\n          100% 100%,\n          0 100%,\n          0 0\n        );\n      }\n      87.5% {\n        clip-path: polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);\n      }\n      100% {\n        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n      }\n    }\n  }\n\n  .#{$size-name}::after {\n    content: '';\n    box-sizing: border-box;\n    position: absolute;\n    inset: 8.33%;\n    border-radius: 100%;\n    border: $track-size solid\n      var(--ix-button-color, var(--theme-color-soft-text));\n    animation: clipMask 3s linear infinite;\n  }\n\n  .#{$size-name}:not(.hide-track)::before {\n    content: '';\n    box-sizing: border-box;\n    position: absolute;\n    inset: 8.33%;\n    border-radius: 100%;\n    border: $track-size solid var(--theme-color-ghost--hover);\n  }\n\n  .primary::after {\n    border-color: var(--theme-color-dynamic);\n  }\n\n  .primary::before {\n    border-color: var(--theme-color-ghost--hover);\n  }\n}\n\n@include ix-spinner($size-name: 'xx-small', $size: 0.75rem, $track-size: 1px);\n@include ix-spinner($size-name: 'x-small', $size: 1.25rem, $track-size: 2px);\n@include ix-spinner($size-name: 'small', $size: 1.5rem, $track-size: 2px);\n@include ix-spinner($size-name: 'medium', $size: 2rem, $track-size: 2px);\n@include ix-spinner($size-name: 'large', $size: 6rem, $track-size: 4px);\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-spinner',\n  styleUrl: 'spinner.scss',\n  shadow: true,\n})\nexport class Spinner {\n  @Element() hostElement!: HTMLIxSpinnerElement;\n\n  /**\n   * Variant of spinner\n   */\n  @Prop() variant: 'primary' | 'secondary' = 'secondary';\n\n  /**\n   * Size of spinner\n   */\n  @Prop() size: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' =\n    'medium';\n\n  /**\n   * @internal\n   */\n  @Prop() hideTrack = false;\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            primary: this.variant === 'primary',\n            [this.size]: true,\n            'hide-track': this.hideTrack,\n          }}\n        ></div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-icon-button.ix-spinner.entry.cjs.js","mappings":"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","names":["getFallbackLabelFromIconName","h","Host","BaseIconButton"],"sources":["src/components/icon-button/icon-button.scss?tag=ix-icon-button&encapsulation=shadow","src/components/icon-button/icon-button.tsx","src/components/spinner/spinner.scss?tag=ix-spinner&encapsulation=shadow","src/components/spinner/spinner.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-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 { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\nimport { getFallbackLabelFromIconName } from '../utils/a11y';\n\nexport type IconButtonVariant = ButtonVariant;\n\n@Component({\n  tag: 'ix-icon-button',\n  styleUrl: 'icon-button.scss',\n  shadow: true,\n})\nexport class IconButton {\n  @Element() hostElement!: HTMLIxIconButtonElement;\n\n  /**\n   * Accessibility label for the icon button\n   * Will be set as aria-label on the nested HTML button element\n   */\n  @Prop({ attribute: 'a11y-label' }) a11yLabel?: string;\n\n  /**\n   * Variant of button\n   */\n  @Prop() variant: IconButtonVariant = 'secondary';\n\n  /**\n   * Button outline\n   */\n  @Prop() outline: boolean = false;\n\n  /**\n   * Button invisible\n   */\n  @Prop() ghost: boolean = false;\n\n  /**\n   * Button in oval shape\n   */\n  @Prop() oval: boolean = false;\n\n  /**\n   * Icon name\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Size of icon in button\n   *\n   */\n  @Prop() size: '24' | '16' | '12' = '24';\n\n  /**\n   * Color of icon in  button\n   */\n  @Prop() iconColor?: string;\n\n  /**\n   * Disabled\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Type of the button\n   */\n  @Prop() type: 'button' | 'submit' = 'button';\n\n  /**\n   * Loading button\n   */\n  @Prop() loading = false;\n\n  /**\n   * Temp. workaround until stencil issue is fixed (https://github.com/ionic-team/stencil/issues/2284)\n   */\n  submitButtonElement!: HTMLButtonElement;\n\n  componentDidLoad() {\n    if (this.type === 'submit') {\n      const submitButton = document.createElement('button');\n      submitButton.style.display = 'none';\n      submitButton.type = 'submit';\n      submitButton.tabIndex = -1;\n      this.hostElement.appendChild(submitButton);\n\n      this.submitButtonElement = submitButton;\n    }\n  }\n\n  dispatchFormEvents() {\n    if (this.type === 'submit' && this.submitButtonElement) {\n      this.submitButtonElement.click();\n    }\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' || !this.size,\n    };\n  }\n\n  render() {\n    const baseButtonProps: BaseButtonProps = {\n      ariaAttributes: {\n        'aria-label': this.a11yLabel\n          ? this.a11yLabel\n          : getFallbackLabelFromIconName(this.icon),\n      },\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      iconOnly: true,\n      iconOval: this.oval,\n      selected: false,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      iconColor: this.iconColor,\n      iconSize: this.size,\n      loading: this.loading,\n      onClick: () => this.dispatchFormEvents(),\n      type: this.type,\n      extraClasses: this.getIconSizeClass(),\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","/*\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/shadow-dom/component';\n\n@mixin ix-spinner($size-name: 'medium', $size: 2rem, $track-size: 4px) {\n  :host {\n    @include ix-component;\n    display: block;\n    position: relative;\n  }\n\n  .#{$size-name} {\n    width: $size;\n    height: $size;\n    min-width: $size;\n    min-height: $size;\n    max-width: $size;\n    max-height: $size;\n    border-radius: 100%;\n    position: relative;\n    animation: rotate 2s linear infinite;\n\n    @keyframes rotate {\n      100% {\n        transform: rotate(360deg);\n      }\n    }\n\n    @keyframes clipMask {\n      0% {\n        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n      }\n      12.5% {\n        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n      }\n      25% {\n        clip-path: polygon(\n          50% 50%,\n          0 0,\n          100% 0,\n          100% 100%,\n          100% 100%,\n          100% 100%\n        );\n      }\n      37.5% {\n        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n      }\n      50% {\n        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n      }\n      62.5% {\n        clip-path: polygon(50% 50%, 100% 0, 100% 0, 100% 100%, 0 100%, 0 0);\n      }\n      75% {\n        clip-path: polygon(\n          50% 50%,\n          100% 100%,\n          100% 100%,\n          100% 100%,\n          0 100%,\n          0 0\n        );\n      }\n      87.5% {\n        clip-path: polygon(50% 50%, 0 100%, 0 100%, 0 100%, 0 100%, 0 0);\n      }\n      100% {\n        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n      }\n    }\n  }\n\n  .#{$size-name}::after {\n    content: '';\n    box-sizing: border-box;\n    position: absolute;\n    inset: 8.33%;\n    border-radius: 100%;\n    border: $track-size solid\n      var(--ix-button-color, var(--theme-color-soft-text));\n    animation: clipMask 3s linear infinite;\n  }\n\n  .#{$size-name}:not(.hide-track)::before {\n    content: '';\n    box-sizing: border-box;\n    position: absolute;\n    inset: 8.33%;\n    border-radius: 100%;\n    border: $track-size solid var(--theme-color-ghost--hover);\n  }\n\n  .primary::after {\n    border-color: var(--theme-color-dynamic);\n  }\n\n  .primary::before {\n    border-color: var(--theme-color-ghost--hover);\n  }\n}\n\n@include ix-spinner($size-name: 'xx-small', $size: 0.75rem, $track-size: 1px);\n@include ix-spinner($size-name: 'x-small', $size: 1.25rem, $track-size: 2px);\n@include ix-spinner($size-name: 'small', $size: 1.5rem, $track-size: 2px);\n@include ix-spinner($size-name: 'medium', $size: 2rem, $track-size: 2px);\n@include ix-spinner($size-name: 'large', $size: 6rem, $track-size: 4px);\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'ix-spinner',\n  styleUrl: 'spinner.scss',\n  shadow: true,\n})\nexport class Spinner {\n  @Element() hostElement!: HTMLIxSpinnerElement;\n\n  /**\n   * Variant of spinner\n   */\n  @Prop() variant: 'primary' | 'secondary' = 'secondary';\n\n  /**\n   * Size of spinner\n   */\n  @Prop() size: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' =\n    'medium';\n\n  /**\n   * @internal\n   */\n  @Prop() hideTrack = false;\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            primary: this.variant === 'primary',\n            [this.size]: true,\n            'hide-track': this.hideTrack,\n          }}\n        ></div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ix-icon-toggle-button.cjs.entry.js

@@ -90,7 +90,7 @@ const IconToggleButton = class {
             },
             extraClasses: Object.assign({ 'icon-button': true }, this.getIconSizeClass()),
         };
-        return (index.h(index.Host, { key: '4eaf3eebcdaddee356a4c0ab41de10ef47eb45a6', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, index.h(baseIconButton.BaseIconButton, Object.assign({ key: '5d137a0c0c34cd940efb6be5ec02acde47e2a660' }, baseButtonProps))));
+        return (index.h(index.Host, { key: 'c6ee50eeae6633065e5de88f97596caf8eb0e281', class: Object.assign(Object.assign({}, this.getIconSizeClass()), { disabled: this.disabled || this.loading }) }, index.h(baseIconButton.BaseIconButton, Object.assign({ key: '7d47806873919e9f74da8531c1fe2b087902c56f' }, baseButtonProps))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ix-icon-toggle-button.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ix-icon-toggle-button.entry.cjs.js","mappings":"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","names":["a11yBoolean","h","Host","BaseIconButton"],"sources":["src/components/icon-toggle-button/icon-toggle-button.scss?tag=ix-icon-toggle-button&encapsulation=shadow","src/components/icon-toggle-button/icon-toggle-button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import '../icon-button/icon-button-mixin.scss';\n\n@include base-icon-button;\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\nimport { a11yBoolean } from '../utils/a11y';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-icon-toggle-button',\n  shadow: true,\n  styleUrl: './icon-toggle-button.scss',\n})\nexport class IconToggleButton {\n  /**\n   * Button variant.\n   * Important: Variant 'primary' can only be combined with either outline or ghost.\n   */\n  @Prop() variant: ButtonVariant = 'secondary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Icon name\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Show button as pressed\n   */\n  @Prop() pressed = false;\n\n  /**\n   * Size of icon in button\n   */\n  @Prop() size: '24' | '16' | '12' = '24';\n\n  /**\n   * Disable the button\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Loading button\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * Pressed change event\n   */\n  @Event() pressedChange!: EventEmitter<boolean>;\n\n  @Element() hostElement!: HTMLIxIconToggleButtonElement;\n\n  private isIllegalToggleButtonConfig() {\n    return this.variant === 'primary' && (this.outline || this.ghost);\n  }\n\n  private logIllegalConfig() {\n    console.warn(\n      'iX toggle button with illegal configuration detected. Variant \"primary\" can only be combined with \"outline\" or \"ghost\".'\n    );\n  }\n\n  @Watch('variant')\n  onVariantChange() {\n    if (this.isIllegalToggleButtonConfig()) {\n      this.logIllegalConfig();\n    }\n  }\n\n  @Watch('ghost')\n  onGhostChange() {\n    this.onVariantChange();\n  }\n\n  @Watch('outline')\n  onOutlineChange() {\n    this.onVariantChange();\n  }\n\n  componentDidLoad() {\n    this.onVariantChange();\n  }\n\n  private dispatchPressedChange() {\n    this.pressedChange.emit(!this.pressed);\n  }\n\n  private getIconSizeClass() {\n    return {\n      'btn-icon-12': this.size === '12',\n      'btn-icon-16': this.size === '16',\n      'btn-icon-32': this.size === '24',\n    };\n  }\n\n  render() {\n    const baseButtonProps: BaseButtonProps = {\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      iconOnly: true,\n      iconOval: false,\n      selected: this.pressed,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      iconSize: this.size,\n      loading: this.loading,\n      onClick: () => this.dispatchPressedChange(),\n      type: 'button',\n      ariaAttributes: {\n        'aria-pressed': a11yBoolean(this.pressed),\n      },\n      extraClasses: {\n        'icon-button': true,\n        ...this.getIconSizeClass(),\n      },\n    };\n\n    return (\n      <Host\n        class={{\n          ...this.getIconSizeClass(),\n          disabled: this.disabled || this.loading,\n        }}\n      >\n        <BaseIconButton {...baseButtonProps}></BaseIconButton>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-icon-toggle-button.entry.cjs.js","mappings":"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","names":["a11yBoolean","h","Host","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"],"version":3}

package/dist/cjs/ix-icon-toggle-button.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-icon-toggle-button.entry.cjs.js","sources":["src/components/icon-toggle-button/icon-toggle-button.scss?tag=ix-icon-toggle-button&encapsulation=shadow","src/components/icon-toggle-button/icon-toggle-button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import '../icon-button/icon-button-mixin.scss';\n\n@include base-icon-button;\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { BaseIconButton } from '../icon-button/base-icon-button';\nimport { a11yBoolean } from '../utils/a11y';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-icon-toggle-button',\n  shadow: true,\n  styleUrl: './icon-toggle-button.scss',\n})\nexport class IconToggleButton {\n  /**\n   * Button variant.\n   * Important: Variant 'primary' can only be combined with either outline or ghost.\n   */\n  @Prop() variant: ButtonVariant = 'secondary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Icon name\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Show button as pressed\n   */\n  @Prop() pressed = false;\n\n  /**\n   * Size of icon in button\n   */\n  @Prop() size: '24' | '16' | '12' = '24';\n\n  /**\n   * Disable the button\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Loading button\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * Pressed change event\n   */\n  @Event() pressedChange!: EventEmitter<boolean>;\n\n  @Element() hostElement!: HTMLIxIconToggleButtonElement;\n\n  private isIllegalToggleButtonConfig() {\n    return this.variant === 'primary' && (this.outline || this.ghost);\n  }\n\n  private logIllegalConfig() {\n    console.warn(\n      'iX toggle button with illegal configuration detected. Variant \"primary\" can only be combined with \"outline\" or \"ghost\".'\n    );\n  }\n\n  @Watch('variant')\n  onVariantChange() {\n    if (this.isIllegalToggleButtonConfig()) {\n      this.logIllegalConfig();\n    }\n  }\n\n  @Watch('ghost')\n  onGhostChange() {\n    this.onVariantChange();\n  }\n\n  @Watch('outline')\n  onOutlineChange() {\n    this.onVariantChange();\n  }\n\n  componentDidLoad() {\n    this.onVariantChange();\n  }\n\n  private dispatchPressedChange() {\n    this.pressedChange.emit(!this.pressed);\n  }\n\n  private getIconSizeClass() {\n    return {\n      'btn-icon-12': this.size === '12',\n      'btn-icon-16': this.size === '16',\n      'btn-icon-32': this.size === '24',\n    };\n  }\n\n  render() {\n    const baseButtonProps: BaseButtonProps = {\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      iconOnly: true,\n      iconOval: false,\n      selected: this.pressed,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      iconSize: this.size,\n      loading: this.loading,\n      onClick: () => this.dispatchPressedChange(),\n      type: 'button',\n      ariaAttributes: {\n        'aria-pressed': a11yBoolean(this.pressed),\n      },\n      extraClasses: {\n        'icon-button': true,\n        ...this.getIconSizeClass(),\n      },\n    };\n\n    return (\n      <Host\n        class={{\n          ...this.getIconSizeClass(),\n          disabled: this.disabled || this.loading,\n        }}\n      >\n        <BaseIconButton {...baseButtonProps}></BaseIconButton>\n      </Host>\n    );\n  }\n}\n"],"names":["a11yBoolean","h","Host","BaseIconButton"],"mappings":"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"}
+{"version":3,"file":"ix-icon-toggle-button.entry.cjs.js","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"],"names":["a11yBoolean","h","Host","BaseIconButton"],"mappings":"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"}

package/dist/cjs/ix-input-group.cjs.entry.js

@@ -120,7 +120,7 @@ const InputGroup = class {
         return width;
     }
     render() {
-        return (index.h(index.Host, { key: 'f911a9b30ed5788e3a2e81da5d935ccdc2bbfbbd', class: { disabled: this.disabled } }, index.h("div", { key: '65d7c4134a794f46c89d7a8a55140ac515a9d27b', class: "group group-start" }, index.h("slot", { key: '39bdf4ec556d693e34862bd058a4dfa25f93c82c', ref: (el) => (this.startSlotRef = el), name: "input-start" })), index.h("slot", { key: '88a1331fdda64f4981cad520f93027740284ce4d' }), index.h("div", { key: '7b6b3c4b1c365b3bcf0a60715c678fe973c17483', class: "group group-end" }, index.h("slot", { key: 'a8f4717abc967a4a7fcebd261937ee3533ae344a', ref: (el) => (this.endSlotRef = el), name: "input-end" }))));
+        return (index.h(index.Host, { key: '537177c9cb9a001815ac47742896143a163bf071', class: { disabled: this.disabled } }, index.h("div", { key: '3b66c6d7b6b810d958de6c33fd508239b6caeac9', class: "group group-start" }, index.h("slot", { key: '22ff48e13e858965b9565f1b9b1701ae71fc533c', ref: (el) => (this.startSlotRef = el), name: "input-start" })), index.h("slot", { key: '9b017c4b47a6c814932ca744c977ede9b71940dd' }), index.h("div", { key: '2f2deaf07fdc410bc205e1c5af19dcb491be660c', class: "group group-end" }, index.h("slot", { key: 'fb30e0f0ddd98f9f2224c7413f7185f563dee966', ref: (el) => (this.endSlotRef = el), name: "input-end" }))));
     }
     get hostElement() { return index.getElement(this); }
 };

package/dist/cjs/ix-input-group.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ix-input-group.entry.cjs.js","mappings":"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","names":["getSlottedElements","h","Host"],"sources":["src/components/input-group/input-group.scss?tag=ix-input-group&encapsulation=shadow","src/components/input-group/input-group.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n@import 'mixins/shadow-dom/host-disabled';\n\n:host {\n  @include ix-component;\n\n  position: relative;\n  display: flex;\n  width: 100%;\n  flex-wrap: wrap;\n  align-items: stretch;\n\n  .group {\n    display: flex;\n    position: absolute;\n    align-items: center;\n    height: 100%;\n  }\n\n  .group-start {\n    left: 0px;\n    height: 2rem;\n    margin-left: 0.5rem;\n    color: var(--theme-color-soft-text);\n  }\n\n  .group-end {\n    right: 0px;\n    height: 2rem;\n    margin-right: 0.5rem;\n    color: var(--theme-color-soft-text);\n  }\n\n  ::slotted(*) {\n    display: flex;\n  }\n}\n\n@include host-disabled {\n  .group-start,\n  .group-end {\n    ::slotted(*) {\n      opacity: 0.4 !important;\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, Element, h, Host, State } from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\n\n/**\n * @deprecated since 3.0.0. Will be removed with 4.0.0.\n * Use the 'ix-input' component instead\n */\n@Component({\n  tag: 'ix-input-group',\n  styleUrl: 'input-group.scss',\n  shadow: true,\n})\nexport class InputGroup {\n  @Element() hostElement!: HTMLIxInputGroupElement;\n\n  @State() disabled = false;\n\n  @State() inputPaddingLeft = 0;\n  @State() inputPaddingRight = 0;\n\n  startSlotRef?: HTMLElement;\n  endSlotRef?: HTMLElement;\n\n  private get inputElement() {\n    return this.hostElement.querySelector('input') as HTMLInputElement;\n  }\n\n  private observer?: MutationObserver;\n\n  componentWillLoad() {\n    const { valid } = this.inputElement.validity;\n    this.inputElement.addEventListener('valid', () => {\n      this.onValidInput();\n    });\n    this.inputElement.addEventListener('invalid', () => {\n      this.onInvalidInput();\n    });\n    this.inputElement.addEventListener('input', () => {\n      this.startSlotChanged();\n    });\n\n    this.inputElement.form?.addEventListener('submit', () => {\n      this.startSlotChanged();\n    });\n\n    valid ? this.onValidInput() : this.onInvalidInput();\n\n    this.observer = new MutationObserver(() => {\n      this.slotChanged();\n      this.startSlotChanged();\n      this.endSlotChanged();\n    });\n\n    this.observer.observe(this.hostElement, {\n      subtree: true,\n      childList: true,\n      attributes: true,\n      characterData: true,\n    });\n  }\n\n  componentDidRender() {\n    this.prepareInputElement();\n  }\n\n  private onValidInput() {\n    this.startSlotChanged();\n  }\n\n  private onInvalidInput() {\n    this.startSlotChanged();\n  }\n\n  private prepareInputElement() {\n    if (this.inputElement) {\n      this.inputElement.style.width = '100%';\n\n      if (this.inputPaddingRight !== 0) {\n        this.inputElement.style.paddingRight = this.inputPaddingRight + 'px';\n      } else {\n        this.inputElement.style.paddingRight = '0.5rem';\n      }\n\n      if (this.inputPaddingLeft !== 0) {\n        this.inputElement.style.paddingLeft = this.inputPaddingLeft + 'px';\n      } else {\n        this.inputElement.style.paddingLeft = '0.5rem';\n      }\n    } else {\n      console.warn(\n        'You used the ix-input-group without an input tag, e.g. <input class=\"ix-form-control\" />'\n      );\n    }\n  }\n\n  private slotChanged() {\n    this.disabled = this.inputElement?.disabled;\n  }\n\n  private startSlotChanged() {\n    setTimeout(() => {\n      const startPadding = this.getChildrenWidth(this.startSlotRef);\n\n      if (startPadding !== 0) {\n        this.inputPaddingLeft = 11 + startPadding;\n      } else {\n        this.inputPaddingLeft = 0;\n      }\n\n      if (!this.inputElement) {\n        return;\n      }\n\n      const isInputInvalid =\n        !this.inputElement.validity.valid ||\n        this.inputElement.classList.contains('is-invalid');\n\n      const formWasValidated =\n        this.inputElement.form?.classList.contains('was-validated') ||\n        this.inputElement.form?.noValidate === false;\n\n      if (formWasValidated && isInputInvalid) {\n        const left = this.inputPaddingLeft !== 0 ? this.inputPaddingLeft : 7;\n        this.inputElement.style.backgroundPosition = `left ${left}px center`;\n        this.inputPaddingLeft += 26;\n      }\n    });\n  }\n\n  private endSlotChanged() {\n    setTimeout(() => {\n      this.inputPaddingRight = 15 + this.getChildrenWidth(this.endSlotRef);\n    });\n  }\n\n  private getChildrenWidth(slotElement: Element | undefined) {\n    if (!slotElement) {\n      return 0;\n    }\n\n    const endElements = getSlottedElements<HTMLElement>(slotElement);\n    if (endElements.length === 0) {\n      return 0;\n    }\n\n    let width = 0;\n\n    endElements.forEach((element) => {\n      width += element.getBoundingClientRect().width;\n    });\n\n    return width;\n  }\n\n  render() {\n    return (\n      <Host class={{ disabled: this.disabled }}>\n        <div class=\"group group-start\">\n          <slot\n            ref={(el) => (this.startSlotRef = el as HTMLElement)}\n            name=\"input-start\"\n          ></slot>\n        </div>\n        <slot></slot>\n        <div class=\"group group-end\">\n          <slot\n            ref={(el) => (this.endSlotRef = el as HTMLElement)}\n            name=\"input-end\"\n          ></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-input-group.entry.cjs.js","mappings":"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","names":["getSlottedElements","h","Host"],"sources":["src/components/input-group/input-group.scss?tag=ix-input-group&encapsulation=shadow","src/components/input-group/input-group.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n@import 'mixins/shadow-dom/host-disabled';\n\n:host {\n  @include ix-component;\n\n  position: relative;\n  display: flex;\n  width: 100%;\n  flex-wrap: wrap;\n  align-items: stretch;\n\n  .group {\n    display: flex;\n    position: absolute;\n    align-items: center;\n    height: 100%;\n  }\n\n  .group-start {\n    left: 0px;\n    height: 2rem;\n    margin-left: 0.5rem;\n    color: var(--theme-color-soft-text);\n  }\n\n  .group-end {\n    right: 0px;\n    height: 2rem;\n    margin-right: 0.5rem;\n    color: var(--theme-color-soft-text);\n  }\n\n  ::slotted(*) {\n    display: flex;\n  }\n}\n\n@include host-disabled {\n  .group-start,\n  .group-end {\n    ::slotted(*) {\n      opacity: 0.4 !important;\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, Element, h, Host, State } from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\n\n/**\n * @deprecated Will be removed with 4.0.0\n * Use the 'ix-input' component instead\n */\n@Component({\n  tag: 'ix-input-group',\n  styleUrl: 'input-group.scss',\n  shadow: true,\n})\nexport class InputGroup {\n  @Element() hostElement!: HTMLIxInputGroupElement;\n\n  @State() disabled = false;\n\n  @State() inputPaddingLeft = 0;\n  @State() inputPaddingRight = 0;\n\n  startSlotRef?: HTMLElement;\n  endSlotRef?: HTMLElement;\n\n  private get inputElement() {\n    return this.hostElement.querySelector('input') as HTMLInputElement;\n  }\n\n  private observer?: MutationObserver;\n\n  componentWillLoad() {\n    const { valid } = this.inputElement.validity;\n    this.inputElement.addEventListener('valid', () => {\n      this.onValidInput();\n    });\n    this.inputElement.addEventListener('invalid', () => {\n      this.onInvalidInput();\n    });\n    this.inputElement.addEventListener('input', () => {\n      this.startSlotChanged();\n    });\n\n    this.inputElement.form?.addEventListener('submit', () => {\n      this.startSlotChanged();\n    });\n\n    valid ? this.onValidInput() : this.onInvalidInput();\n\n    this.observer = new MutationObserver(() => {\n      this.slotChanged();\n      this.startSlotChanged();\n      this.endSlotChanged();\n    });\n\n    this.observer.observe(this.hostElement, {\n      subtree: true,\n      childList: true,\n      attributes: true,\n      characterData: true,\n    });\n  }\n\n  componentDidRender() {\n    this.prepareInputElement();\n  }\n\n  private onValidInput() {\n    this.startSlotChanged();\n  }\n\n  private onInvalidInput() {\n    this.startSlotChanged();\n  }\n\n  private prepareInputElement() {\n    if (this.inputElement) {\n      this.inputElement.style.width = '100%';\n\n      if (this.inputPaddingRight !== 0) {\n        this.inputElement.style.paddingRight = this.inputPaddingRight + 'px';\n      } else {\n        this.inputElement.style.paddingRight = '0.5rem';\n      }\n\n      if (this.inputPaddingLeft !== 0) {\n        this.inputElement.style.paddingLeft = this.inputPaddingLeft + 'px';\n      } else {\n        this.inputElement.style.paddingLeft = '0.5rem';\n      }\n    } else {\n      console.warn(\n        'You used the ix-input-group without an input tag, e.g. <input class=\"ix-form-control\" />'\n      );\n    }\n  }\n\n  private slotChanged() {\n    this.disabled = this.inputElement?.disabled;\n  }\n\n  private startSlotChanged() {\n    setTimeout(() => {\n      const startPadding = this.getChildrenWidth(this.startSlotRef);\n\n      if (startPadding !== 0) {\n        this.inputPaddingLeft = 11 + startPadding;\n      } else {\n        this.inputPaddingLeft = 0;\n      }\n\n      if (!this.inputElement) {\n        return;\n      }\n\n      const isInputInvalid =\n        !this.inputElement.validity.valid ||\n        this.inputElement.classList.contains('is-invalid');\n\n      const formWasValidated =\n        this.inputElement.form?.classList.contains('was-validated') ||\n        this.inputElement.form?.noValidate === false;\n\n      if (formWasValidated && isInputInvalid) {\n        const left = this.inputPaddingLeft !== 0 ? this.inputPaddingLeft : 7;\n        this.inputElement.style.backgroundPosition = `left ${left}px center`;\n        this.inputPaddingLeft += 26;\n      }\n    });\n  }\n\n  private endSlotChanged() {\n    setTimeout(() => {\n      this.inputPaddingRight = 15 + this.getChildrenWidth(this.endSlotRef);\n    });\n  }\n\n  private getChildrenWidth(slotElement: Element | undefined) {\n    if (!slotElement) {\n      return 0;\n    }\n\n    const endElements = getSlottedElements<HTMLElement>(slotElement);\n    if (endElements.length === 0) {\n      return 0;\n    }\n\n    let width = 0;\n\n    endElements.forEach((element) => {\n      width += element.getBoundingClientRect().width;\n    });\n\n    return width;\n  }\n\n  render() {\n    return (\n      <Host class={{ disabled: this.disabled }}>\n        <div class=\"group group-start\">\n          <slot\n            ref={(el) => (this.startSlotRef = el as HTMLElement)}\n            name=\"input-start\"\n          ></slot>\n        </div>\n        <slot></slot>\n        <div class=\"group group-end\">\n          <slot\n            ref={(el) => (this.endSlotRef = el as HTMLElement)}\n            name=\"input-end\"\n          ></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ix-input-group.entry.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ix-input-group.entry.cjs.js","sources":["src/components/input-group/input-group.scss?tag=ix-input-group&encapsulation=shadow","src/components/input-group/input-group.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n@import 'mixins/shadow-dom/host-disabled';\n\n:host {\n  @include ix-component;\n\n  position: relative;\n  display: flex;\n  width: 100%;\n  flex-wrap: wrap;\n  align-items: stretch;\n\n  .group {\n    display: flex;\n    position: absolute;\n    align-items: center;\n    height: 100%;\n  }\n\n  .group-start {\n    left: 0px;\n    height: 2rem;\n    margin-left: 0.5rem;\n    color: var(--theme-color-soft-text);\n  }\n\n  .group-end {\n    right: 0px;\n    height: 2rem;\n    margin-right: 0.5rem;\n    color: var(--theme-color-soft-text);\n  }\n\n  ::slotted(*) {\n    display: flex;\n  }\n}\n\n@include host-disabled {\n  .group-start,\n  .group-end {\n    ::slotted(*) {\n      opacity: 0.4 !important;\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, Element, h, Host, State } from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\n\n/**\n * @deprecated since 3.0.0. Will be removed with 4.0.0.\n * Use the 'ix-input' component instead\n */\n@Component({\n  tag: 'ix-input-group',\n  styleUrl: 'input-group.scss',\n  shadow: true,\n})\nexport class InputGroup {\n  @Element() hostElement!: HTMLIxInputGroupElement;\n\n  @State() disabled = false;\n\n  @State() inputPaddingLeft = 0;\n  @State() inputPaddingRight = 0;\n\n  startSlotRef?: HTMLElement;\n  endSlotRef?: HTMLElement;\n\n  private get inputElement() {\n    return this.hostElement.querySelector('input') as HTMLInputElement;\n  }\n\n  private observer?: MutationObserver;\n\n  componentWillLoad() {\n    const { valid } = this.inputElement.validity;\n    this.inputElement.addEventListener('valid', () => {\n      this.onValidInput();\n    });\n    this.inputElement.addEventListener('invalid', () => {\n      this.onInvalidInput();\n    });\n    this.inputElement.addEventListener('input', () => {\n      this.startSlotChanged();\n    });\n\n    this.inputElement.form?.addEventListener('submit', () => {\n      this.startSlotChanged();\n    });\n\n    valid ? this.onValidInput() : this.onInvalidInput();\n\n    this.observer = new MutationObserver(() => {\n      this.slotChanged();\n      this.startSlotChanged();\n      this.endSlotChanged();\n    });\n\n    this.observer.observe(this.hostElement, {\n      subtree: true,\n      childList: true,\n      attributes: true,\n      characterData: true,\n    });\n  }\n\n  componentDidRender() {\n    this.prepareInputElement();\n  }\n\n  private onValidInput() {\n    this.startSlotChanged();\n  }\n\n  private onInvalidInput() {\n    this.startSlotChanged();\n  }\n\n  private prepareInputElement() {\n    if (this.inputElement) {\n      this.inputElement.style.width = '100%';\n\n      if (this.inputPaddingRight !== 0) {\n        this.inputElement.style.paddingRight = this.inputPaddingRight + 'px';\n      } else {\n        this.inputElement.style.paddingRight = '0.5rem';\n      }\n\n      if (this.inputPaddingLeft !== 0) {\n        this.inputElement.style.paddingLeft = this.inputPaddingLeft + 'px';\n      } else {\n        this.inputElement.style.paddingLeft = '0.5rem';\n      }\n    } else {\n      console.warn(\n        'You used the ix-input-group without an input tag, e.g. <input class=\"ix-form-control\" />'\n      );\n    }\n  }\n\n  private slotChanged() {\n    this.disabled = this.inputElement?.disabled;\n  }\n\n  private startSlotChanged() {\n    setTimeout(() => {\n      const startPadding = this.getChildrenWidth(this.startSlotRef);\n\n      if (startPadding !== 0) {\n        this.inputPaddingLeft = 11 + startPadding;\n      } else {\n        this.inputPaddingLeft = 0;\n      }\n\n      if (!this.inputElement) {\n        return;\n      }\n\n      const isInputInvalid =\n        !this.inputElement.validity.valid ||\n        this.inputElement.classList.contains('is-invalid');\n\n      const formWasValidated =\n        this.inputElement.form?.classList.contains('was-validated') ||\n        this.inputElement.form?.noValidate === false;\n\n      if (formWasValidated && isInputInvalid) {\n        const left = this.inputPaddingLeft !== 0 ? this.inputPaddingLeft : 7;\n        this.inputElement.style.backgroundPosition = `left ${left}px center`;\n        this.inputPaddingLeft += 26;\n      }\n    });\n  }\n\n  private endSlotChanged() {\n    setTimeout(() => {\n      this.inputPaddingRight = 15 + this.getChildrenWidth(this.endSlotRef);\n    });\n  }\n\n  private getChildrenWidth(slotElement: Element | undefined) {\n    if (!slotElement) {\n      return 0;\n    }\n\n    const endElements = getSlottedElements<HTMLElement>(slotElement);\n    if (endElements.length === 0) {\n      return 0;\n    }\n\n    let width = 0;\n\n    endElements.forEach((element) => {\n      width += element.getBoundingClientRect().width;\n    });\n\n    return width;\n  }\n\n  render() {\n    return (\n      <Host class={{ disabled: this.disabled }}>\n        <div class=\"group group-start\">\n          <slot\n            ref={(el) => (this.startSlotRef = el as HTMLElement)}\n            name=\"input-start\"\n          ></slot>\n        </div>\n        <slot></slot>\n        <div class=\"group group-end\">\n          <slot\n            ref={(el) => (this.endSlotRef = el as HTMLElement)}\n            name=\"input-end\"\n          ></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["getSlottedElements","h","Host"],"mappings":"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"}
+{"version":3,"file":"ix-input-group.entry.cjs.js","sources":["src/components/input-group/input-group.scss?tag=ix-input-group&encapsulation=shadow","src/components/input-group/input-group.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n@import 'mixins/shadow-dom/host-disabled';\n\n:host {\n  @include ix-component;\n\n  position: relative;\n  display: flex;\n  width: 100%;\n  flex-wrap: wrap;\n  align-items: stretch;\n\n  .group {\n    display: flex;\n    position: absolute;\n    align-items: center;\n    height: 100%;\n  }\n\n  .group-start {\n    left: 0px;\n    height: 2rem;\n    margin-left: 0.5rem;\n    color: var(--theme-color-soft-text);\n  }\n\n  .group-end {\n    right: 0px;\n    height: 2rem;\n    margin-right: 0.5rem;\n    color: var(--theme-color-soft-text);\n  }\n\n  ::slotted(*) {\n    display: flex;\n  }\n}\n\n@include host-disabled {\n  .group-start,\n  .group-end {\n    ::slotted(*) {\n      opacity: 0.4 !important;\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, Element, h, Host, State } from '@stencil/core';\nimport { getSlottedElements } from '../utils/shadow-dom';\n\n/**\n * @deprecated Will be removed with 4.0.0\n * Use the 'ix-input' component instead\n */\n@Component({\n  tag: 'ix-input-group',\n  styleUrl: 'input-group.scss',\n  shadow: true,\n})\nexport class InputGroup {\n  @Element() hostElement!: HTMLIxInputGroupElement;\n\n  @State() disabled = false;\n\n  @State() inputPaddingLeft = 0;\n  @State() inputPaddingRight = 0;\n\n  startSlotRef?: HTMLElement;\n  endSlotRef?: HTMLElement;\n\n  private get inputElement() {\n    return this.hostElement.querySelector('input') as HTMLInputElement;\n  }\n\n  private observer?: MutationObserver;\n\n  componentWillLoad() {\n    const { valid } = this.inputElement.validity;\n    this.inputElement.addEventListener('valid', () => {\n      this.onValidInput();\n    });\n    this.inputElement.addEventListener('invalid', () => {\n      this.onInvalidInput();\n    });\n    this.inputElement.addEventListener('input', () => {\n      this.startSlotChanged();\n    });\n\n    this.inputElement.form?.addEventListener('submit', () => {\n      this.startSlotChanged();\n    });\n\n    valid ? this.onValidInput() : this.onInvalidInput();\n\n    this.observer = new MutationObserver(() => {\n      this.slotChanged();\n      this.startSlotChanged();\n      this.endSlotChanged();\n    });\n\n    this.observer.observe(this.hostElement, {\n      subtree: true,\n      childList: true,\n      attributes: true,\n      characterData: true,\n    });\n  }\n\n  componentDidRender() {\n    this.prepareInputElement();\n  }\n\n  private onValidInput() {\n    this.startSlotChanged();\n  }\n\n  private onInvalidInput() {\n    this.startSlotChanged();\n  }\n\n  private prepareInputElement() {\n    if (this.inputElement) {\n      this.inputElement.style.width = '100%';\n\n      if (this.inputPaddingRight !== 0) {\n        this.inputElement.style.paddingRight = this.inputPaddingRight + 'px';\n      } else {\n        this.inputElement.style.paddingRight = '0.5rem';\n      }\n\n      if (this.inputPaddingLeft !== 0) {\n        this.inputElement.style.paddingLeft = this.inputPaddingLeft + 'px';\n      } else {\n        this.inputElement.style.paddingLeft = '0.5rem';\n      }\n    } else {\n      console.warn(\n        'You used the ix-input-group without an input tag, e.g. <input class=\"ix-form-control\" />'\n      );\n    }\n  }\n\n  private slotChanged() {\n    this.disabled = this.inputElement?.disabled;\n  }\n\n  private startSlotChanged() {\n    setTimeout(() => {\n      const startPadding = this.getChildrenWidth(this.startSlotRef);\n\n      if (startPadding !== 0) {\n        this.inputPaddingLeft = 11 + startPadding;\n      } else {\n        this.inputPaddingLeft = 0;\n      }\n\n      if (!this.inputElement) {\n        return;\n      }\n\n      const isInputInvalid =\n        !this.inputElement.validity.valid ||\n        this.inputElement.classList.contains('is-invalid');\n\n      const formWasValidated =\n        this.inputElement.form?.classList.contains('was-validated') ||\n        this.inputElement.form?.noValidate === false;\n\n      if (formWasValidated && isInputInvalid) {\n        const left = this.inputPaddingLeft !== 0 ? this.inputPaddingLeft : 7;\n        this.inputElement.style.backgroundPosition = `left ${left}px center`;\n        this.inputPaddingLeft += 26;\n      }\n    });\n  }\n\n  private endSlotChanged() {\n    setTimeout(() => {\n      this.inputPaddingRight = 15 + this.getChildrenWidth(this.endSlotRef);\n    });\n  }\n\n  private getChildrenWidth(slotElement: Element | undefined) {\n    if (!slotElement) {\n      return 0;\n    }\n\n    const endElements = getSlottedElements<HTMLElement>(slotElement);\n    if (endElements.length === 0) {\n      return 0;\n    }\n\n    let width = 0;\n\n    endElements.forEach((element) => {\n      width += element.getBoundingClientRect().width;\n    });\n\n    return width;\n  }\n\n  render() {\n    return (\n      <Host class={{ disabled: this.disabled }}>\n        <div class=\"group group-start\">\n          <slot\n            ref={(el) => (this.startSlotRef = el as HTMLElement)}\n            name=\"input-start\"\n          ></slot>\n        </div>\n        <slot></slot>\n        <div class=\"group group-end\">\n          <slot\n            ref={(el) => (this.endSlotRef = el as HTMLElement)}\n            name=\"input-end\"\n          ></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["getSlottedElements","h","Host"],"mappings":"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"}

package/dist/cjs/ix-input.cjs.entry.js

@@ -2,9 +2,9 @@
 
 var index = require('./index-CnXGUOZU.js');
 var index$1 = require('./index-DIFIjYrm.js');
-var validation = require('./validation-B-wzGaWF.js');
+var validation = require('./validation-othAjI_Z.js');
 var makeRef = require('./make-ref-BaH6_YJk.js');
-var input_util = require('./input.util-DuJG4-L-.js');
+var input_util = require('./input.util-DOEvwiFv.js');
 require('./a11y-B_6chCvu.js');
 require('./mutation-observer-DE0YMfYu.js');
 require('./rwd.util-GTn-vgCJ.js');
@@ -115,6 +115,12 @@ const Input = class {
     getNativeInputElement() {
         return this.inputRef.waitForCurrent();
     }
+    /**
+     * Returns the validity state of the input field.
+     */
+    getValidityState() {
+        return Promise.resolve(this.inputRef.current.validity);
+    }
     /**
      * Focuses the input field
      */
@@ -131,13 +137,13 @@ const Input = class {
     render() {
         var _a;
         const inputAria = input_util.getAriaAttributesForInput(this);
-        return (index.h(index.Host, { key: 'e97028201512da11b9689b345c9fa798067eb763', class: {
+        return (index.h(index.Host, { key: '48a3eeafce2c7449aac74866ce083b2985b788c3', class: {
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, index.h("ix-field-wrapper", { key: '922e59e33affd1e1fb0ddabad74adb65b91ed1a1', htmlForLabel: this.inputId, required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, index.h("div", { key: 'a01046da7f1c0ef87780ef6535fc15941df56605', class: "input-wrapper" }, index.h(input_util.SlotStart, { key: 'e35395215ee831413792f31d021d65b36106a002', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), index.h(input_util.InputElement, { key: 'ef08393ffd6f5715e9493bec32ee652177cf11fc', id: this.inputId, readonly: this.readonly, disabled: this.disabled, maxLength: this.maxLength, minLength: this.minLength, pattern: this.pattern, type: this.inputType, isInvalid: this.isInvalid, required: this.required, value: this.value, placeholder: this.placeholder, inputRef: this.inputRef, onKeyPress: (event) => input_util.checkAllowedKeys(this, event), valueChange: (value) => this.valueChange.emit(value), updateFormInternalValue: (value) => this.updateFormInternalValue(value), onBlur: () => {
+            } }, index.h("ix-field-wrapper", { key: '8890776f7c99b4e5432d2a7e02b61885ab1f1f40', htmlForLabel: this.inputId, required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, index.h("div", { key: 'bb41666cc78347c3800d6efcf1912a450fc7e6e9', class: "input-wrapper" }, index.h(input_util.SlotStart, { key: '3fafbeff30d7b3b0d7e22fc5ffc89f4ed3dfae86', slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), index.h(input_util.InputElement, { key: '312f25e4cd128d32f6ba3f4960b9a00d860d89e5', id: this.inputId, readonly: this.readonly, disabled: this.disabled, maxLength: this.maxLength, minLength: this.minLength, pattern: this.pattern, type: this.inputType, isInvalid: this.isInvalid, required: this.required, value: this.value, placeholder: this.placeholder, inputRef: this.inputRef, onKeyPress: (event) => input_util.checkAllowedKeys(this, event), valueChange: (value) => this.valueChange.emit(value), updateFormInternalValue: (value) => this.updateFormInternalValue(value), onBlur: () => {
                 input_util.onInputBlur(this, this.inputRef.current);
                 this.touched = true;
-            }, ariaAttributes: inputAria }), index.h(input_util.SlotEnd, { key: 'a21e3d12f0525430e8898a9b979c1e038fd2a76f', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, index.h("ix-icon-button", { key: '1c45547f969085a5b484143c5f1b1de3d801696d', color: "color-weak-text", class: {
+            }, ariaAttributes: inputAria }), index.h(input_util.SlotEnd, { key: 'e1eb5730048cd5e21047c3656a4d37c3805ae757', slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, index.h("ix-icon-button", { key: 'ad393d7fd9acf7d5258e9e951e670abc99e19730', color: "color-weak-text", class: {
                 'password-eye': true,
                 'eye-hidden': this.type !== 'password',
             }, ghost: true, icon: this.inputType === 'password' ? index$1.iconEye : index$1.iconEyeCancelled, onClick: () => {
@@ -146,7 +152,7 @@ const Input = class {
                     return;
                 }
                 this.inputType = 'password';
-            } }))), !!this.maxLength && this.maxLength > 0 && (index.h("ix-typography", { key: '8d699ee76f3b7be660c5b8bab57a9d18f6abb769', class: "bottom-text", slot: "bottom-right", textColor: "soft" }, (_a = this.value) === null || _a === void 0 ? void 0 :
+            } }))), !!this.maxLength && this.maxLength > 0 && (index.h("ix-typography", { key: '3be733d6e0c96577d5d24c16f88de24ec966d570', class: "bottom-text", slot: "bottom-right", textColor: "soft" }, (_a = this.value) === null || _a === void 0 ? void 0 :
             _a.length, "/", this.maxLength)))));
     }
     static get formAssociated() { return true; }