@infineon/infineon-design-system-stencil 37.13.1--canary.1987.3a00aa50ac2f53008f1e351eabf4b0c340894bb9.0 → 37.14.0--canary.1964.0cc47e126559ad69071eedaaa2c1137ce976ec2c.0

package/dist/components/ifx-slider.js.map

@@ -1 +1 @@
-{"file":"ifx-slider.js","mappings":"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","names":["IfxSlider","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/slider/slider.scss?tag=ifx-slider&encapsulation=shadow","src/components/slider/slider.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.left-icon,\n.right-icon,\n.left-text,\n.right-text,\n.percentage-display {\n  font-size: tokens.$ifxFontSizeS;\n  color: tokens.$ifxColorEngineering500;\n  margin-left: tokens.$ifxSpace100;\n\n  &.disabled {\n    // Add the disabled state for the percentage display\n    color: tokens.$ifxColorEngineering300;\n  }\n}\n\n.left-icon,\n.left-text {\n  margin-right: tokens.$ifxSpace100;\n}\n\n.right-icon,\n.right-text,\n.percentage-display {\n  margin-left: tokens.$ifxSpace100;\n}\n\n\n.ifx-slider {\n  display: flex;\n  align-items: center;\n  padding: tokens.$ifxSpace25 tokens.$ifxSpace200;\n  border-radius: tokens.$ifxBorderRadiusRound;\n\n  input[type='range'] {\n    -webkit-appearance: none;\n    width: 100%;\n    height: 4px;\n    background: linear-gradient(to right, tokens.$ifxColorOcean500 0%, tokens.$ifxColorOcean500 var(--value-percent, 0%), tokens.$ifxColorEngineering200 var(--value-percent, 0%), tokens.$ifxColorEngineering200 100%);\n    outline: none;\n    cursor: pointer;\n    transition: 0.2s;\n\n    &:focus-visible {\n      outline: 2px solid tokens.$ifxColorOcean500;\n    outline-offset: 4px;}\n\n    &::-moz-range-thumb {\n      width: tokens.$ifxSize250;\n      height: tokens.$ifxSize250;\n      border-radius: 50%;\n      background: tokens.$ifxColorOcean500;\n      cursor: pointer;\n      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);\n    }\n    \n\n    &:not(:disabled)::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      width: 16px;\n      height: 16px;\n      background: tokens.$ifxColorOcean500;\n      border-radius: 50%;\n      cursor: pointer;\n      transition: box-shadow 0.2s;\n\n      &:hover {\n        background: tokens.$ifxColorOcean600;\n      }\n\n      &:active {\n        background: tokens.$ifxColorOcean700;\n      }\n    }\n  }\n\n  input[type='range']:disabled {\n    background: tokens.$ifxColorEngineering300;\n    cursor: default;\n  }\n\n  input[type='range']:disabled::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    width: 16px;\n    height: 16px;\n    background: tokens.$ifxColorEngineering300;\n    border-radius: 50%;\n    cursor: default;\n  }\n  \n  & .range-slider__wrapper {\n    position: relative;\n    width: 100%;\n    height: 4px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0px 2px;\n    \n    background: linear-gradient(to right, tokens.$ifxColorEngineering200 0%, tokens.$ifxColorEngineering200 var(--min-value-percent, 100%), tokens.$ifxColorOcean500 var(--min-value-percent, 100%), tokens.$ifxColorOcean500 var(--max-value-percent, 100%), tokens.$ifxColorEngineering200 var(--max-value-percent, 100%), tokens.$ifxColorEngineering200 100%);\n\n    &:has(input[type='range']:disabled) {\n      background: tokens.$ifxColorEngineering300;\n    }\n\n    \n    @mixin thumb() {\n      -webkit-appearance: none;\n      border: none; \n      pointer-events: auto;\n      cursor: pointer;\n      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);\n    }\n    \n    @mixin track() {\n      -webkit-appearance: none;\n      border: none;\n      background: none; \n      width: 100%;\n    }\n\n    input[type='range'] {\n      position: absolute;\n      pointer-events: none; \n      background: none;\n      \n      &:focus-visible {\n      outline: 2px solid tokens.$ifxColorOcean500;\n      outline-offset: 4px;}\n\n      &::-webkit-slider-thumb { @include thumb; }\n      &::-moz-range-thumb { @include thumb; }\n      &::-ms-thumb { @include thumb; }\n\n      &::-webkit-slider-runnable-track { @include track; }\n      &::-moz-range-track { @include track; }\n    }\n  }\n  \n}\n","import { Component, h, Prop, Event, EventEmitter, State, Watch, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';  \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-slider',\n  styleUrl: 'slider.scss',\n  shadow: true,\n})\nexport class IfxSlider {\n  @Prop() min: number = 0;\n  @Prop() max: number = 100;\n  @Prop() step: number = 1;\n  @Prop() value: number;\n  @Prop() minValueHandle: number;\n  @Prop() maxValueHandle: number;\n  @Prop() disabled: boolean = false;\n  @Prop() showPercentage: boolean = false;\n  @Prop() leftIcon: string;\n  @Prop() rightIcon: string;\n  @Prop() leftText: string;\n  @Prop() rightText: string;\n  @Prop() type: 'single' | 'double' = 'single';\n  @Prop() ariaLabel: string | null;\n  @State() internalValue: number = 0;\n  @State() percentage: number = 0;\n  @State() internalMinValue: number = 0;\n  @State() internalMaxValue: number = 100;\n  @Event() ifxChange: EventEmitter;\n\n  @Element() el;\n\n  private inputRef: HTMLInputElement;\n  private minInputRef: HTMLInputElement;\n  private maxInputRef: HTMLInputElement;\n                                             \n  @Watch('value')\n  valueChanged(newValue: number) {\n    this.internalValue = newValue;\n    this.updateValuePercent();\n  }\n\n  @Watch('minValueHandle')\n  minValueChanged(newValue: number) {\n    this.internalMinValue = newValue;\n    this.updateValuePercent();\n  }\n  \n  @Watch('maxValueHandle')\n  maxValueChanged(newValue: number) {\n    this.internalMaxValue = newValue;\n    this.updateValuePercent();\n  }\n\n  getRangeSliderWrapper() {\n    const rangeSliderWrapper = this.el.shadowRoot.querySelector('.range-slider__wrapper');\n    return rangeSliderWrapper;\n  }\n\n  handleInputChangeOfRangeSlider(event: Event) {\n    const target = event.target as HTMLInputElement;\n    if(parseFloat(this.maxInputRef.value) - parseFloat(this.minInputRef.value) <= 0) {\n      if(target.id === 'max-slider') {\n        this.maxInputRef.value = this.minInputRef.value;\n      }else{\n        this.minInputRef.value = this.maxInputRef.value;\n      }\n    }\n    if(target.id === 'max-slider') {\n      this.internalMaxValue = parseFloat(this.maxInputRef.value);\n    } else {\n      this.internalMinValue = parseFloat(this.minInputRef.value);\n    }\n    this.ifxChange.emit({minVal: this.internalMinValue, maxVal: this.internalMaxValue});\n    this.updateValuePercent();\n    this.updateZIndexIfRangeSlider(target.id)\n  }\n  \n  handleOnMouseLeaveOfRangeSlider(event: Event) {\n    const target = event.target as HTMLInputElement;\n    const sliderWrapper = this.getRangeSliderWrapper();\n    if(target.id === 'max-slider') {\n      sliderWrapper.insertBefore(this.maxInputRef, this.minInputRef);\n    } else {\n      sliderWrapper.insertBefore(this.minInputRef, this.maxInputRef);\n    }\n  }\n\n  calculatePercentageValue() {\n    const num = (this.internalValue - this.min) * 1.0;\n    const den = this.max - this.min;\n    this.percentage = +parseFloat(String((num/den)*100)).toFixed(2);\n  }\n\n  handleInputChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n    this.internalValue = parseFloat(target.value);\n    this.ifxChange.emit(this.internalValue);\n    this.calculatePercentageValue();\n    this.updateValuePercent();\n  }\n\n  private roundToValidStep(value: number) {\n    const relativeValue = value - this.min;\n    const remainder = relativeValue % this.step;\n    if (remainder >= this.step / 2) {\n      return this.min + relativeValue + (this.step - remainder);\n    } else {\n      return this.min + relativeValue - remainder;\n    }\n  }\n\n  updateValuePercent() {\n    const den = this.max - this.min;\n    if(this.type === 'double'){\n      if (this.minInputRef) {\n        const num = (this.roundToValidStep(this.internalMinValue) - this.min) * 1.0;\n        const minPercent = (num/den) * 100;\n        this.minInputRef.parentElement.style.setProperty('--min-value-percent', `${minPercent}%`);\n      }\n\n      if (this.maxInputRef) {\n        const num = (this.roundToValidStep(this.internalMaxValue) - this.min) * 1.0;\n        const maxPercent = (num/den) * 100;\n        this.maxInputRef.parentElement.style.setProperty('--max-value-percent', `${maxPercent}%`);\n      }\n\n    } else {\n\n      if (this.inputRef) {\n        const num = (this.roundToValidStep(this.internalValue) - this.min) * 1.0;\n        const den = this.max - this.min;\n        const percentage = (num/den) * 100;\n        this.inputRef.style.setProperty('--value-percent', `${percentage}%`);\n      }\n\n    }\n  }  \n  \n  // Ensures that the last used slider thumb stays on top of the other thumb in order to handle correct overlapping \n  // if min and max thumbs take the same value.\n  updateZIndexIfRangeSlider(targetId: string = '') {\n    if (targetId === 'max-slider') {\n      this.minInputRef.style.zIndex = '1';\n      this.maxInputRef.style.zIndex = '2';\n    } else {\n      this.minInputRef.style.zIndex = '2';\n      this.maxInputRef.style.zIndex = '1';\n    }\n  }\n\n  componentWillLoad() {\n    if(this.value === undefined) {\n      this.internalValue = (this.max-this.min) / 2;\n    } else {\n      this.internalValue = Math.max(this.min, Math.min(this.max, this.value));\n    }\n\n    this.calculatePercentageValue();\n\n    if(this.minValueHandle !== undefined) this.internalMinValue = this.minValueHandle;\n    else this.internalMinValue = this.min;\n    if(this.maxValueHandle !== undefined) this.internalMaxValue = this.maxValueHandle;\n    else this.internalMaxValue = this.max;\n  }\n\n  async componentDidLoad() {\n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-slider', await framework)\n    }\n    this.updateValuePercent();\n  }\n\n\n  render() {\n    return (\n      <div class=\"ifx-slider\">\n        {this.leftText && (\n          <span class={`left-text`}>\n            {this.leftText}\n          </span>\n        )}\n        {this.leftIcon && (\n          <ifx-icon icon={this.leftIcon} class={`left-icon${this.disabled ? ' disabled' : ''}`} />\n        )}\n        {\n          (this.type !== 'double') ?\n            <input\n              type=\"range\"\n              min={this.min}\n              max={this.max}\n              step={this.step}\n              value={this.internalValue}\n              disabled={this.disabled}\n              ref={(el) => (this.inputRef = el as HTMLInputElement)}\n              onInput={(event) => this.handleInputChange(event)}\n              aria-label=\"Slider\"\n              aria-valuemin={this.min}\n              aria-valuemax={this.max}\n              aria-valuenow={this.internalValue}\n              aria-disabled={this.disabled ? \"true\" : \"false\"}\n              /> \n              :\n            <div class = 'range-slider__wrapper' aria-label={this.ariaLabel} role=\"group\">\n              <input \n                id='min-slider'\n                type='range'\n                min={this.min}\n                max={this.max}\n                step={this.step}\n                value={this.internalMinValue}\n                disabled={this.disabled}\n                ref={(el) => (this.minInputRef = el as HTMLInputElement)}\n                onInput={(event) => this.handleInputChangeOfRangeSlider(event)}\n                onMouseUp={(event) => this.handleOnMouseLeaveOfRangeSlider(event)}\n                aria-label=\"Minimum value slider\"\n                aria-valuemin={this.min}\n                aria-valuemax={this.max}\n                aria-valuenow={this.internalMinValue} aria-disabled={this.disabled ? \"true\" : \"false\"}\n              />\n              <input \n                id='max-slider'\n                type='range'\n                min={this.min}\n                max={this.max}\n                step={this.step}\n                value={this.internalMaxValue}\n                disabled={this.disabled}\n                ref={(el) => (this.maxInputRef = el as HTMLInputElement)}\n                onInput={(event) => this.handleInputChangeOfRangeSlider(event)}\n                onMouseUp={(event) => this.handleOnMouseLeaveOfRangeSlider(event)}\n                aria-label=\"Maximum value slider\"\n                aria-valuemin={this.min}\n                aria-valuemax={this.max}\n                aria-valuenow={this.internalMaxValue}\n                aria-disabled={this.disabled ? \"true\" : \"false\"}\n              />\n            </div>\n        }\n        {this.rightIcon && (\n          <ifx-icon icon={this.rightIcon} class={`right-icon${this.disabled ? ' disabled' : ''}`} />\n        )}\n        {this.rightText && (\n          <span class={`right-text${this.disabled ? ' disabled' : ''}`}>\n            {this.rightText}\n          </span>\n        )}\n\n        {this.showPercentage && (this.type !== \"double\") && (\n          <span\n            class={`percentage-display${this.disabled ? ' disabled' : ''}`}\n          >\n            {this.percentage}%\n          </span>\n        )}\n      </div>\n    );\n  }\n}"],"version":3}
+{"file":"ifx-slider.js","mappings":"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","names":["IfxSlider","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/slider/slider.scss?tag=ifx-slider&encapsulation=shadow","src/components/slider/slider.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: block;\n}\n\n.left-icon,\n.right-icon,\n.left-text,\n.right-text,\n.percentage-display {\n  font-size: tokens.$ifxFontSizeS;\n  color: tokens.$ifxColorEngineering500;\n  margin-left: tokens.$ifxSpace100;\n\n  &.disabled {\n    // Add the disabled state for the percentage display\n    color: tokens.$ifxColorEngineering300;\n  }\n}\n\n.left-icon,\n.left-text {\n  margin-right: tokens.$ifxSpace100;\n}\n\n.right-icon,\n.right-text,\n.percentage-display {\n  margin-left: tokens.$ifxSpace100;\n}\n\n\n.ifx-slider {\n  display: flex;\n  align-items: center;\n  padding: tokens.$ifxSpace25 tokens.$ifxSpace200;\n  border-radius: tokens.$ifxBorderRadiusRound;\n\n  input[type='range'] {\n    -webkit-appearance: none;\n    width: 100%;\n    height: 4px;\n    background: linear-gradient(to right, tokens.$ifxColorOcean500 0%, tokens.$ifxColorOcean500 var(--value-percent, 0%), tokens.$ifxColorEngineering200 var(--value-percent, 0%), tokens.$ifxColorEngineering200 100%);\n    outline: none;\n    cursor: pointer;\n    transition: 0.2s;\n\n    &::-moz-range-thumb {\n      width: tokens.$ifxSize250;\n      height: tokens.$ifxSize250;\n      border-radius: 50%;\n      background: tokens.$ifxColorOcean500;\n      cursor: pointer;\n      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);\n    }\n    \n\n    &:not(:disabled)::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      width: 16px;\n      height: 16px;\n      background: tokens.$ifxColorOcean500;\n      border-radius: 50%;\n      cursor: pointer;\n      transition: box-shadow 0.2s;\n\n      &:hover {\n        background: tokens.$ifxColorOcean600;\n      }\n\n      &:active {\n        background: tokens.$ifxColorOcean700;\n      }\n    }\n  }\n\n  input[type='range']:disabled {\n    background: tokens.$ifxColorEngineering300;\n    cursor: default;\n  }\n\n  input[type='range']:disabled::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    width: 16px;\n    height: 16px;\n    background: tokens.$ifxColorEngineering300;\n    border-radius: 50%;\n    cursor: default;\n  }\n  \n  & .range-slider__wrapper {\n    position: relative;\n    width: 100%;\n    height: 4px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0px 2px;\n    \n    background: linear-gradient(to right, tokens.$ifxColorEngineering200 0%, tokens.$ifxColorEngineering200 var(--min-value-percent, 100%), tokens.$ifxColorOcean500 var(--min-value-percent, 100%), tokens.$ifxColorOcean500 var(--max-value-percent, 100%), tokens.$ifxColorEngineering200 var(--max-value-percent, 100%), tokens.$ifxColorEngineering200 100%);\n\n    &:has(input[type='range']:disabled) {\n      background: tokens.$ifxColorEngineering300;\n    }\n\n    \n    @mixin thumb() {\n      -webkit-appearance: none;\n      border: none; \n      pointer-events: auto;\n      cursor: pointer;\n      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);\n    }\n    \n    @mixin track() {\n      -webkit-appearance: none;\n      border: none;\n      background: none; \n      width: 100%;\n    }\n\n    input[type='range'] {\n      position: absolute;\n      pointer-events: none; \n      background: none;\n\n      &::-webkit-slider-thumb { @include thumb; }\n      &::-moz-range-thumb { @include thumb; }\n      &::-ms-thumb { @include thumb; }\n\n      &::-webkit-slider-runnable-track { @include track; }\n      &::-moz-range-track { @include track; }\n    }\n  }\n  \n}\n","import { Component, h, Prop, Event, EventEmitter, State, Watch, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking';  \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-slider',\n  styleUrl: 'slider.scss',\n  shadow: true,\n})\nexport class IfxSlider {\n  @Prop() min: number = 0;\n  @Prop() max: number = 100;\n  @Prop() step: number = 1;\n  @Prop() value: number;\n  @Prop() minValueHandle: number;\n  @Prop() maxValueHandle: number;\n  @Prop() disabled: boolean = false;\n  @Prop() showPercentage: boolean = false;\n  @Prop() leftIcon: string;\n  @Prop() rightIcon: string;\n  @Prop() leftText: string;\n  @Prop() rightText: string;\n  @Prop() type: 'single' | 'double' = 'single';\n  @State() internalValue: number = 0;\n  @State() percentage: number = 0;\n  @State() internalMinValue: number = 0;\n  @State() internalMaxValue: number = 100;\n  @Event() ifxChange: EventEmitter;\n\n  @Element() el;\n\n  private inputRef: HTMLInputElement;\n  private minInputRef: HTMLInputElement;\n  private maxInputRef: HTMLInputElement;\n                                             \n  @Watch('value')\n  valueChanged(newValue: number) {\n    this.internalValue = newValue;\n    this.updateValuePercent();\n  }\n\n  @Watch('minValueHandle')\n  minValueChanged(newValue: number) {\n    this.internalMinValue = newValue;\n    this.updateValuePercent();\n  }\n  \n  @Watch('maxValueHandle')\n  maxValueChanged(newValue: number) {\n    this.internalMaxValue = newValue;\n    this.updateValuePercent();\n  }\n\n  getRangeSliderWrapper() {\n    const rangeSliderWrapper = this.el.shadowRoot.querySelector('.range-slider__wrapper');\n    return rangeSliderWrapper;\n  }\n\n  handleInputChangeOfRangeSlider(event: Event) {\n    const target = event.target as HTMLInputElement;\n    if(parseFloat(this.maxInputRef.value) - parseFloat(this.minInputRef.value) <= 0) {\n      if(target.id === 'max-slider') {\n        this.maxInputRef.value = this.minInputRef.value;\n      }else{\n        this.minInputRef.value = this.maxInputRef.value;\n      }\n    }\n    if(target.id === 'max-slider') {\n      this.internalMaxValue = parseFloat(this.maxInputRef.value);\n    } else {\n      this.internalMinValue = parseFloat(this.minInputRef.value);\n    }\n    this.ifxChange.emit({minVal: this.internalMinValue, maxVal: this.internalMaxValue});\n    this.updateValuePercent();\n    this.updateZIndexIfRangeSlider(target.id)\n  }\n  \n  handleOnMouseLeaveOfRangeSlider(event: Event) {\n    const target = event.target as HTMLInputElement;\n    const sliderWrapper = this.getRangeSliderWrapper();\n    if(target.id === 'max-slider') {\n      sliderWrapper.insertBefore(this.maxInputRef, this.minInputRef);\n    } else {\n      sliderWrapper.insertBefore(this.minInputRef, this.maxInputRef);\n    }\n  }\n\n  calculatePercentageValue() {\n    const num = (this.internalValue - this.min) * 1.0;\n    const den = this.max - this.min;\n    this.percentage = +parseFloat(String((num/den)*100)).toFixed(2);\n  }\n\n  handleInputChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n    this.internalValue = parseFloat(target.value);\n    this.ifxChange.emit(this.internalValue);\n    this.calculatePercentageValue();\n    this.updateValuePercent();\n  }\n\n  private roundToValidStep(value: number) {\n    const relativeValue = value - this.min;\n    const remainder = relativeValue % this.step;\n    if (remainder >= this.step / 2) {\n      return this.min + relativeValue + (this.step - remainder);\n    } else {\n      return this.min + relativeValue - remainder;\n    }\n  }\n\n  updateValuePercent() {\n    const den = this.max - this.min;\n    if(this.type === 'double'){\n      if (this.minInputRef) {\n        const num = (this.roundToValidStep(this.internalMinValue) - this.min) * 1.0;\n        const minPercent = (num/den) * 100;\n        this.minInputRef.parentElement.style.setProperty('--min-value-percent', `${minPercent}%`);\n      }\n\n      if (this.maxInputRef) {\n        const num = (this.roundToValidStep(this.internalMaxValue) - this.min) * 1.0;\n        const maxPercent = (num/den) * 100;\n        this.maxInputRef.parentElement.style.setProperty('--max-value-percent', `${maxPercent}%`);\n      }\n\n    } else {\n\n      if (this.inputRef) {\n        const num = (this.roundToValidStep(this.internalValue) - this.min) * 1.0;\n        const den = this.max - this.min;\n        const percentage = (num/den) * 100;\n        this.inputRef.style.setProperty('--value-percent', `${percentage}%`);\n      }\n\n    }\n  }  \n  \n  // Ensures that the last used slider thumb stays on top of the other thumb in order to handle correct overlapping \n  // if min and max thumbs take the same value.\n  updateZIndexIfRangeSlider(targetId: string = '') {\n    if (targetId === 'max-slider') {\n      this.minInputRef.style.zIndex = '1';\n      this.maxInputRef.style.zIndex = '2';\n    } else {\n      this.minInputRef.style.zIndex = '2';\n      this.maxInputRef.style.zIndex = '1';\n    }\n  }\n\n  componentWillLoad() {\n    if(this.value === undefined) {\n      this.internalValue = (this.max-this.min) / 2;\n    } else {\n      this.internalValue = Math.max(this.min, Math.min(this.max, this.value));\n    }\n\n    this.calculatePercentageValue();\n\n    if(this.minValueHandle !== undefined) this.internalMinValue = this.minValueHandle;\n    else this.internalMinValue = this.min;\n    if(this.maxValueHandle !== undefined) this.internalMaxValue = this.maxValueHandle;\n    else this.internalMaxValue = this.max;\n  }\n\n  async componentDidLoad() {\n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-slider', await framework)\n    }\n    this.updateValuePercent();\n  }\n\n\n  render() {\n    return (\n      <div class=\"ifx-slider\">\n        {this.leftText && (\n          <span class={`left-text`}>\n            {this.leftText}\n          </span>\n        )}\n        {this.leftIcon && (\n          <ifx-icon icon={this.leftIcon} class={`left-icon${this.disabled ? ' disabled' : ''}`} />\n        )}\n        {\n          (this.type !== 'double') ?\n            <input\n              type=\"range\"\n              min={this.min}\n              max={this.max}\n              step={this.step}\n              value={this.internalValue}\n              disabled={this.disabled}\n              ref={(el) => (this.inputRef = el as HTMLInputElement)}\n              onInput={(event) => this.handleInputChange(event)}\n              aria-label='a slider'\n              aria-value={this.value}\n              aria-disabled={this.disabled}\n              /> \n              :\n            <div class = 'range-slider__wrapper' aria-label='a range slider' aria-value={this.value} aria-disabled={this.disabled} >\n              <input \n                id='min-slider'\n                type='range'\n                min={this.min}\n                max={this.max}\n                step={this.step}\n                value={this.internalMinValue}\n                disabled={this.disabled}\n                ref={(el) => (this.minInputRef = el as HTMLInputElement)}\n                onInput={(event) => this.handleInputChangeOfRangeSlider(event)}\n                onMouseUp={(event) => this.handleOnMouseLeaveOfRangeSlider(event)}\n              />\n              <input \n                id='max-slider'\n                type='range'\n                min={this.min}\n                max={this.max}\n                step={this.step}\n                value={this.internalMaxValue}\n                disabled={this.disabled}\n                ref={(el) => (this.maxInputRef = el as HTMLInputElement)}\n                onInput={(event) => this.handleInputChangeOfRangeSlider(event)}\n                onMouseUp={(event) => this.handleOnMouseLeaveOfRangeSlider(event)}\n              />\n\n            </div>\n        }\n        {this.rightIcon && (\n          <ifx-icon icon={this.rightIcon} class={`right-icon${this.disabled ? ' disabled' : ''}`} />\n        )}\n        {this.rightText && (\n          <span class={`right-text${this.disabled ? ' disabled' : ''}`}>\n            {this.rightText}\n          </span>\n        )}\n\n        {this.showPercentage && (this.type !== \"double\") && (\n          <span\n            class={`percentage-display${this.disabled ? ' disabled' : ''}`}\n          >\n            {this.percentage}%\n          </span>\n        )}\n      </div>\n    );\n  }\n}"],"version":3}

package/dist/components/ifx-spinner.js

@@ -1,4 +1,4 @@
-import { S as Spinner, d as defineCustomElement$1 } from './p-C09NpLE0.js';
+import { S as Spinner, d as defineCustomElement$1 } from './p-DbtZVHL-.js';
 
 const IfxSpinner = Spinner;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ifx-status.js

@@ -22,7 +22,7 @@ const Status = /*@__PURE__*/ proxyCustomElement(class Status extends H {
         var _a;
         const effectiveColor = ((_a = this.color) === null || _a === void 0 ? void 0 : _a.trim()) ? this.color : 'orange-500';
         const containerClass = this.border ? `container border-${effectiveColor}` : 'container no-border';
-        return (h("div", { key: '6202ae7e1bd70813dbffc680fbdfe1a5bdf7366b', role: "status", class: containerClass }, h("span", { key: '5572c99750fef5f4e50592ee154a3c84f5d21fe4', class: `dot ${effectiveColor}` }), h("p", { key: '96d7d6e7a9d301f3115e90f3ee442fe4a54ddc32', class: "text" }, this.label)));
+        return (h("div", { key: 'df0bd64479b85637198e0dc8715afc705d52a756', "aria-label": "a status indicator", "aria-value": this.label, class: containerClass }, h("span", { key: 'a1ca252388cb2f707b40b7b4e792c5004b9ab5e9', class: `dot ${effectiveColor}` }), h("p", { key: '6b91b2724502837bffff721ec51e98e6a9ee3bc6', class: "text" }, this.label)));
     }
     get el() { return this; }
     static get style() { return statusCss; }

package/dist/components/ifx-status.js.map

@@ -1 +1 @@
-{"file":"ifx-status.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,i8FAAi8F;;MCWt8F,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;AANnB,IAAA,WAAA,GAAA;;;;AASU,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AACvB,QAAA,IAAK,CAAA,KAAA,GAAW,YAAY;AAoBrC;AAlBC,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACnC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,YAAY,EAAE,MAAM,SAAS,CAAC;;;IAIjD,MAAM,GAAA;;AACJ,QAAA,MAAM,cAAc,GAAG,CAAA,CAAA,EAAA,GAAA,IAAI,CAAC,KAAK,0CAAE,IAAI,EAAE,IAAG,IAAI,CAAC,KAAK,GAAG,YAAY;AACrE,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,MAAM,GAAG,CAAA,iBAAA,EAAoB,cAAc,CAAE,CAAA,GAAG,qBAAqB;QAEjG,QACE,4DAAK,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,cAAc,EAAA,EACtC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,CAAA,IAAA,EAAO,cAAc,CAAA,CAAE,EAAS,CAAA,EAC7C,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAE,EAAA,IAAI,CAAC,KAAK,CAAK,CAC5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/status/status.scss?tag=ifx-status&encapsulation=shadow","src/components/status/status.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-block;\n}\n\n.container {\n  display: flex;\n  min-height: 1.25em;\n  align-items: center;\n  padding: 0 tokens.$ifxSpace100;\n  border-radius: tokens.$ifxBorderRadiusRound;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n  &.no-border {\n    padding: 0; // Remove padding when border is not present\n  }\n\n  &.border-engineering-100{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering100;\n  }\n\n  &.border-engineering-200{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\n  }\n\n  &.border-engineering-300{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering300;\n  }\n\n  &.border-engineering-400{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering400;\n  }\n\n  &.border-engineering-500{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering500;\n  }\n\n  &.border-engineering-600{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering600;\n  }\n\n  &.border-ocean-100 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean100;\n  }\n\n  &.border-ocean-200 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean200;\n  }\n\n  &.border-ocean-300 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean300;\n  }\n\n  &.border-ocean-400 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean400;\n  }\n\n  &.border-ocean-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean500;\n  }\n\n  &.border-ocean-600 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean600;\n  }\n\n  &.border-ocean-700 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean700;\n  }\n\n  &.border-red-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorRed500;\n  }\n\n  &.border-red-600 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorRed600;\n  }\n\n  &.border-red-700 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorRed700;\n  }\n\n  &.border-orange-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOrange500;\n  }\n\n  &.border-green-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorGreen500;\n  }\n\n  &.border-lawn-400 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorLawn400;\n  }\n\n  &.border-lawn-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorLawn500;\n  }\n\n  &.border-lawn-700 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorLawn700;\n  }\n\n  &.border-berry-400 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorBerry400;\n  }\n\n  &.border-berry-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorBerry500;\n  }\n\n  &.border-sun-400 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorSun400;\n  }\n\n  &.border-sun-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorSun500;\n  }\n\n  &.border-sand-400{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorSand400;\n  }\n\n  &.border-sand-500{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorSand500;\n  }\n\n\n}\n\n.text {\n  margin: 0;\n  padding-left: tokens.$ifxSpace50;\n  font-style: normal;\n  font-weight: tokens.$ifxFontWeightSemibold;\n  font-size: tokens.$ifxFontSizeM;\n  line-height: tokens.$ifxLineHeightS;\n  display: inline;\n  color: tokens.$ifxColorBaseBlack;\n}\n\n.dot {\n  display: inline-block;\n  width: tokens.$ifxSize100;\n  height: tokens.$ifxSize100;\n  border-radius: tokens.$ifxBorderRadiusRound;\n}\n\n\n.dot {\n  &.engineering-100 {\n    background-color: tokens.$ifxColorEngineering100;\n  }\n\n  &.engineering-200 {\n    background-color: tokens.$ifxColorEngineering200;\n  }\n\n  &.engineering-300 {\n    background-color: tokens.$ifxColorEngineering300;\n  }\n\n  &.engineering-400 {\n    background-color: tokens.$ifxColorEngineering400;\n  }\n\n  &.engineering-500 {\n    background-color: tokens.$ifxColorEngineering500;\n  }\n\n  &.engineering-600 {\n    background-color: tokens.$ifxColorEngineering600;\n  }\n\n  &.ocean-100 {\n    background-color: tokens.$ifxColorOcean100;\n  }\n\n  &.ocean-200 {\n    background-color: tokens.$ifxColorOcean200;\n  }\n\n  &.ocean-300 {\n    background-color: tokens.$ifxColorOcean300;\n  }\n\n  &.ocean-400 {\n    background-color: tokens.$ifxColorOcean400;\n  }\n\n  &.ocean-500 {\n    background-color: tokens.$ifxColorOcean500;\n  }\n\n  &.ocean-600 {\n    background-color: tokens.$ifxColorOcean600;\n  }\n\n  &.ocean-700 {\n    background-color: tokens.$ifxColorOcean700;\n  }\n\n  &.red-500 {\n    background-color: tokens.$ifxColorRed500;\n  }\n\n  &.red-600 {\n    background-color: tokens.$ifxColorRed600;\n  }\n\n  &.red-700 {\n    background-color: tokens.$ifxColorRed700;\n  }\n\n  &.orange-500 {\n    background-color: tokens.$ifxColorOrange500;\n  }\n\n  &.green-500 {\n    background-color: tokens.$ifxColorGreen500;\n  }\n\n  &.lawn-400{\n    background-color: tokens.$ifxColorLawn400;\n  }\n\n  &.lawn-500{\n    background-color: tokens.$ifxColorLawn500;\n  }\n\n  &.lawn-700 {\n    background-color: tokens.$ifxColorLawn700;\n  }\n\n  &.berry-400 {\n    background-color: tokens.$ifxColorBerry400;\n  }\n\n  &.berry-500 {\n    background-color: tokens.$ifxColorBerry500;\n  }\n\n  &.sun-400 {\n    background-color: tokens.$ifxColorSun400;\n  }\n\n  &.sun-500 {\n    background-color: tokens.$ifxColorSun500;\n  }\n\n  &.sand-400{\n    background-color: tokens.$ifxColorSand400;\n  }\n\n  &.sand-500{\n    background-color: tokens.$ifxColorSand500;\n  }\n}","import { Component, h, Prop, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-status',\n  styleUrl: 'status.scss',\n  shadow: true\n})\n\nexport class Status {\n  @Element() el;\n  @Prop() label: string;\n  @Prop() border: boolean = false;\n  @Prop() color: string = 'orange-500';\n \n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-status', await framework)\n    }\n  }\n\n  render() {\n    const effectiveColor = this.color?.trim() ? this.color : 'orange-500';\n    const containerClass = this.border ? `container border-${effectiveColor}` : 'container no-border';\n\n    return (\n      <div role=\"status\" class={containerClass}>\n        <span class={`dot ${effectiveColor}`}></span>\n        <p class=\"text\">{this.label}</p>\n      </div>\n    );\n  }\n}"],"version":3}
+{"file":"ifx-status.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,i8FAAi8F;;MCWt8F,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;AANnB,IAAA,WAAA,GAAA;;;;AASU,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AACvB,QAAA,IAAK,CAAA,KAAA,GAAW,YAAY;AAoBrC;AAlBC,IAAA,MAAM,gBAAgB,GAAA;QACpB,IAAG,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;AACnC,YAAA,MAAM,SAAS,GAAG,eAAe,EAAE;AACnC,YAAA,cAAc,CAAC,YAAY,EAAE,MAAM,SAAS,CAAC;;;IAIjD,MAAM,GAAA;;AACJ,QAAA,MAAM,cAAc,GAAG,CAAA,CAAA,EAAA,GAAA,IAAI,CAAC,KAAK,0CAAE,IAAI,EAAE,IAAG,IAAI,CAAC,KAAK,GAAG,YAAY;AACrE,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,MAAM,GAAG,CAAA,iBAAA,EAAoB,cAAc,CAAE,CAAA,GAAG,qBAAqB;AAEjG,QAAA,QACE,CAAgB,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAA,EAAA,oBAAoB,EAAa,YAAA,EAAA,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,cAAc,EAAA,EAChF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,CAAA,IAAA,EAAO,cAAc,CAAA,CAAE,EAAS,CAAA,EAC7C,CAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAE,EAAA,IAAI,CAAC,KAAK,CAAK,CAC5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/status/status.scss?tag=ifx-status&encapsulation=shadow","src/components/status/status.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-block;\n}\n\n.container {\n  display: flex;\n  min-height: 1.25em;\n  align-items: center;\n  padding: 0 tokens.$ifxSpace100;\n  border-radius: tokens.$ifxBorderRadiusRound;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n  &.no-border {\n    padding: 0; // Remove padding when border is not present\n  }\n\n  &.border-engineering-100{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering100;\n  }\n\n  &.border-engineering-200{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\n  }\n\n  &.border-engineering-300{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering300;\n  }\n\n  &.border-engineering-400{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering400;\n  }\n\n  &.border-engineering-500{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering500;\n  }\n\n  &.border-engineering-600{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering600;\n  }\n\n  &.border-ocean-100 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean100;\n  }\n\n  &.border-ocean-200 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean200;\n  }\n\n  &.border-ocean-300 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean300;\n  }\n\n  &.border-ocean-400 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean400;\n  }\n\n  &.border-ocean-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean500;\n  }\n\n  &.border-ocean-600 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean600;\n  }\n\n  &.border-ocean-700 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean700;\n  }\n\n  &.border-red-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorRed500;\n  }\n\n  &.border-red-600 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorRed600;\n  }\n\n  &.border-red-700 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorRed700;\n  }\n\n  &.border-orange-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOrange500;\n  }\n\n  &.border-green-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorGreen500;\n  }\n\n  &.border-lawn-400 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorLawn400;\n  }\n\n  &.border-lawn-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorLawn500;\n  }\n\n  &.border-lawn-700 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorLawn700;\n  }\n\n  &.border-berry-400 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorBerry400;\n  }\n\n  &.border-berry-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorBerry500;\n  }\n\n  &.border-sun-400 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorSun400;\n  }\n\n  &.border-sun-500 {\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorSun500;\n  }\n\n  &.border-sand-400{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorSand400;\n  }\n\n  &.border-sand-500{\n    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorSand500;\n  }\n\n\n}\n\n.text {\n  margin: 0;\n  padding-left: tokens.$ifxSpace50;\n  font-style: normal;\n  font-weight: tokens.$ifxFontWeightSemibold;\n  font-size: tokens.$ifxFontSizeM;\n  line-height: tokens.$ifxLineHeightS;\n  display: inline;\n  color: tokens.$ifxColorBaseBlack;\n}\n\n.dot {\n  display: inline-block;\n  width: tokens.$ifxSize100;\n  height: tokens.$ifxSize100;\n  border-radius: tokens.$ifxBorderRadiusRound;\n}\n\n\n.dot {\n  &.engineering-100 {\n    background-color: tokens.$ifxColorEngineering100;\n  }\n\n  &.engineering-200 {\n    background-color: tokens.$ifxColorEngineering200;\n  }\n\n  &.engineering-300 {\n    background-color: tokens.$ifxColorEngineering300;\n  }\n\n  &.engineering-400 {\n    background-color: tokens.$ifxColorEngineering400;\n  }\n\n  &.engineering-500 {\n    background-color: tokens.$ifxColorEngineering500;\n  }\n\n  &.engineering-600 {\n    background-color: tokens.$ifxColorEngineering600;\n  }\n\n  &.ocean-100 {\n    background-color: tokens.$ifxColorOcean100;\n  }\n\n  &.ocean-200 {\n    background-color: tokens.$ifxColorOcean200;\n  }\n\n  &.ocean-300 {\n    background-color: tokens.$ifxColorOcean300;\n  }\n\n  &.ocean-400 {\n    background-color: tokens.$ifxColorOcean400;\n  }\n\n  &.ocean-500 {\n    background-color: tokens.$ifxColorOcean500;\n  }\n\n  &.ocean-600 {\n    background-color: tokens.$ifxColorOcean600;\n  }\n\n  &.ocean-700 {\n    background-color: tokens.$ifxColorOcean700;\n  }\n\n  &.red-500 {\n    background-color: tokens.$ifxColorRed500;\n  }\n\n  &.red-600 {\n    background-color: tokens.$ifxColorRed600;\n  }\n\n  &.red-700 {\n    background-color: tokens.$ifxColorRed700;\n  }\n\n  &.orange-500 {\n    background-color: tokens.$ifxColorOrange500;\n  }\n\n  &.green-500 {\n    background-color: tokens.$ifxColorGreen500;\n  }\n\n  &.lawn-400{\n    background-color: tokens.$ifxColorLawn400;\n  }\n\n  &.lawn-500{\n    background-color: tokens.$ifxColorLawn500;\n  }\n\n  &.lawn-700 {\n    background-color: tokens.$ifxColorLawn700;\n  }\n\n  &.berry-400 {\n    background-color: tokens.$ifxColorBerry400;\n  }\n\n  &.berry-500 {\n    background-color: tokens.$ifxColorBerry500;\n  }\n\n  &.sun-400 {\n    background-color: tokens.$ifxColorSun400;\n  }\n\n  &.sun-500 {\n    background-color: tokens.$ifxColorSun500;\n  }\n\n  &.sand-400{\n    background-color: tokens.$ifxColorSand400;\n  }\n\n  &.sand-500{\n    background-color: tokens.$ifxColorSand500;\n  }\n}","import { Component, h, Prop, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-status',\n  styleUrl: 'status.scss',\n  shadow: true\n})\n\nexport class Status {\n  @Element() el;\n  @Prop() label: string;\n  @Prop() border: boolean = false;\n  @Prop() color: string = 'orange-500';\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-status', await framework)\n    }\n  }\n\n  render() {\n    const effectiveColor = this.color?.trim() ? this.color : 'orange-500';\n    const containerClass = this.border ? `container border-${effectiveColor}` : 'container no-border';\n\n    return (\n      <div aria-label=\"a status indicator\" aria-value={this.label} class={containerClass}>\n        <span class={`dot ${effectiveColor}`}></span>\n        <p class=\"text\">{this.label}</p>\n      </div>\n    );\n  }\n}"],"version":3}

package/dist/components/ifx-step.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h } from './index.js';
-import { d as defineCustomElement$2 } from './p-Bq-GdSe7.js';
+import { d as defineCustomElement$2 } from './p-BctmSAbW.js';
 
-const stepCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.step-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;gap:8px;font:400 1rem/1.5rem \"Source Sans 3\"}.step-wrapper.vertical{flex-direction:row;gap:12px;width:unset;height:100%}.step-wrapper.vertical .step-icon-wrapper{flex-direction:column;width:unset;height:100%}.step-wrapper.compact{gap:0;max-width:100%}.step-wrapper.compact .step-label{max-width:100%;cursor:auto;align-self:flex-start}.step-wrapper.compact.indicator-left{align-items:flex-end;text-align:right}.step-wrapper.compact.indicator-right{align-items:flex-start}.step-wrapper .step-label{max-width:90%;color:#8D8786;word-wrap:break-word}.step-wrapper .step-label.curr-label{font:600 1.25rem/1.75rem \"Source Sans 3\"}.step-wrapper .step-label:focus{outline:2px solid #0A8276;outline-offset:2px}.step-wrapper .step-label.next-label{font:400 0.75rem/1rem \"Source Sans 3\"}.step-wrapper .step-label :hover{color:#8D8786}.step-wrapper.first-step .step-connector-l{height:0px}.step-wrapper.last-step .step-connector-r{height:0px}.step-wrapper.vertical.first-step .step-connector-l,.step-wrapper.vertical.last-step .step-connector-r{width:0px}.step-wrapper.complete .step-connector-l,.step-wrapper.complete .step-connector-r,.step-wrapper.complete .step-icon{background:#0A8276}.step-wrapper.complete .step-connector-l.active,.step-wrapper.complete .step-connector-l.error,.step-wrapper.complete .step-connector-r.active,.step-wrapper.complete .step-connector-r.error,.step-wrapper.complete .step-icon.active,.step-wrapper.complete .step-icon.error{background:#8D8786}.step-wrapper.complete:not(.disabled) .step-label{cursor:pointer;color:#1D1D1D}.step-wrapper.complete:not(.disabled) .step-label :hover{color:#08665C}.step-wrapper.disabled .step-connector-l,.step-wrapper.disabled .step-connector-r,.step-wrapper.disabled .step-icon{background-color:#8D8786}.step-wrapper.disabled .step-label,.step-wrapper.disabled .step-label :hover{color:#8D8786}.step-wrapper.active .step-connector-l,.step-wrapper.active .step-connector-r,.step-wrapper.active .step-icon{background:#0A8276}.step-wrapper.active .step-connector-l.active,.step-wrapper.active .step-connector-l.error,.step-wrapper.active .step-connector-r.active,.step-wrapper.active .step-connector-r.error,.step-wrapper.active .step-icon.active,.step-wrapper.active .step-icon.error{background:#8D8786}.step-wrapper.active .step-label,.step-wrapper.active .step-label :hover{color:#1D1D1D}.step-wrapper.active.complete .step-label{cursor:auto}.step-wrapper.clickable:not(.active) .step-label{cursor:pointer}.step-wrapper.error:not(.active){color:#CD002F}.step-wrapper.error:not(.active) .step-label{color:#CD002F}.step-wrapper.error:not(.active) .step-label :hover{color:#0A8276}.step-wrapper.disabled .step-label{cursor:auto}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon{background:#08665C}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.error{background:#8D8786}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-label{color:#08665C}.active-indic{width:16px;height:16px;border-radius:9999px;background:white}.step-icon-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%}.step-icon{width:24px;height:24px;background-color:#8D8786;border-radius:9999px;display:flex;align-items:center;justify-content:center;color:white}.step-connector-r,.step-connector-l{height:2px;min-width:40px;flex-grow:1;background-color:#8D8786}.vertical .step-connector-r,.vertical .step-connector-l{height:unset;min-width:unset;width:2px;min-height:40px}";
+const stepCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}.step-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;gap:8px;font:400 1rem/1.5rem \"Source Sans 3\"}.step-wrapper.vertical{flex-direction:row;gap:12px;width:unset;height:100%}.step-wrapper.vertical .step-icon-wrapper{flex-direction:column;width:unset;height:100%}.step-wrapper.compact{gap:0;max-width:100%}.step-wrapper.compact .step-label{max-width:100%;cursor:auto;align-self:flex-start}.step-wrapper.compact.indicator-left{align-items:flex-end;text-align:right}.step-wrapper.compact.indicator-right{align-items:flex-start}.step-wrapper .step-label{max-width:90%;color:#8D8786;word-wrap:break-word}.step-wrapper .step-label.curr-label{font:600 1.25rem/1.75rem \"Source Sans 3\"}.step-wrapper .step-label.next-label{font:400 0.75rem/1rem \"Source Sans 3\"}.step-wrapper .step-label :hover{color:#8D8786}.step-wrapper.first-step .step-connector-l{height:0px}.step-wrapper.last-step .step-connector-r{height:0px}.step-wrapper.vertical.first-step .step-connector-l,.step-wrapper.vertical.last-step .step-connector-r{width:0px}.step-wrapper.complete .step-connector-l,.step-wrapper.complete .step-connector-r,.step-wrapper.complete .step-icon{background:#0A8276}.step-wrapper.complete .step-connector-l.active,.step-wrapper.complete .step-connector-l.error,.step-wrapper.complete .step-connector-r.active,.step-wrapper.complete .step-connector-r.error,.step-wrapper.complete .step-icon.active,.step-wrapper.complete .step-icon.error{background:#8D8786}.step-wrapper.complete:not(.disabled) .step-label{cursor:pointer;color:#1D1D1D}.step-wrapper.complete:not(.disabled) .step-label :hover{color:#08665C}.step-wrapper.disabled .step-connector-l,.step-wrapper.disabled .step-connector-r,.step-wrapper.disabled .step-icon{background-color:#8D8786}.step-wrapper.disabled .step-label,.step-wrapper.disabled .step-label :hover{color:#8D8786}.step-wrapper.active .step-connector-l,.step-wrapper.active .step-connector-r,.step-wrapper.active .step-icon{background:#0A8276}.step-wrapper.active .step-connector-l.active,.step-wrapper.active .step-connector-l.error,.step-wrapper.active .step-connector-r.active,.step-wrapper.active .step-connector-r.error,.step-wrapper.active .step-icon.active,.step-wrapper.active .step-icon.error{background:#8D8786}.step-wrapper.active .step-label,.step-wrapper.active .step-label :hover{color:#1D1D1D}.step-wrapper.active.complete .step-label{cursor:auto}.step-wrapper.clickable:not(.active) .step-label{cursor:pointer}.step-wrapper.error:not(.active){color:#CD002F}.step-wrapper.error:not(.active) .step-label{color:#CD002F}.step-wrapper.error:not(.active) .step-label :hover{color:#0A8276}.step-wrapper.disabled .step-label{cursor:auto}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon{background:#08665C}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-l.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-connector-r.error,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.active,.step-wrapper:hover.complete:not(.disabled):not(.active) .step-icon.error{background:#8D8786}.step-wrapper:hover.complete:not(.disabled):not(.active) .step-label{color:#08665C}.active-indic{width:16px;height:16px;border-radius:9999px;background:white}.step-icon-wrapper{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%}.step-icon{width:24px;height:24px;background-color:#8D8786;border-radius:9999px;display:flex;align-items:center;justify-content:center;color:white}.step-connector-r,.step-connector-l{height:2px;min-width:40px;flex-grow:1;background-color:#8D8786}.vertical .step-connector-r,.vertical .step-connector-l{height:unset;min-width:unset;width:2px;min-height:40px}";
 
 const Step = /*@__PURE__*/ proxyCustomElement(class Step extends H {
     constructor() {
@@ -49,7 +49,7 @@ const Step = /*@__PURE__*/ proxyCustomElement(class Step extends H {
         }
     }
     render() {
-        return (h("div", { key: 'dd6c17bea0cd62475732ea2c577cd102f77df8ba', "aria-current": this.active ? 'step' : false, "aria-disabled": this.active || this.complete ? false : true, onClick: (e) => this.stopOnClickPropogation(e), class: `step-wrapper ${this.stepId === 1 ? 'first-step' : ''} 
+        return (h("div", { key: '16eb71f0ad6bd16c0a9ca629b426803d55b7eedd', "aria-current": this.active ? 'step' : false, "aria-disabled": this.active || this.complete ? false : true, onClick: (e) => this.stopOnClickPropogation(e), class: `step-wrapper ${this.stepId === 1 ? 'first-step' : ''} 
                         ${this.error ? 'error' : ''}
                         ${this.stepperState.variant}
                         ${this.complete ? 'complete' : ''}
@@ -57,11 +57,11 @@ const Step = /*@__PURE__*/ proxyCustomElement(class Step extends H {
                         indicator-${this.stepperState.indicatorPosition}
                         ${this.active ? 'active' : ''}
                         ${this.clickable ? 'clickable' : ''}
-                        ${this.disabled ? 'disabled' : ''}` }, h("div", { key: 'd923bfda8089c8b2199d45acaaf6ac8c9fdeec5d', class: 'step-icon-wrapper' }, this.stepperState.variant !== 'compact' && h("span", { key: '13aac7c30b1dcd6ff7df11a4c58f4f9f156c01fc', class: 'step-connector-l' }), (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) &&
-            h("div", { key: '35da868f3749271c369959b782e980dc95c3c92f', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && h("ifx-icon", { key: '4813fe9d028d7e1a25e7058cce5a79a76cba76f1', icon: 'check16' }), this.active && h("span", { key: 'd0c1dbfed346671ca777606ffe5f3efe2016a170', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && h("ifx-icon", { key: 'd5e56742186a732d1cf95069b8a61d59b8a68073', icon: 'warningF16' }), this.stepperState.variant !== 'compact' && h("span", { key: '188cb1e005c83ad4abc3b05a0c8833968588628e', class: `step-connector-r ${this.active ? 'active' : ''}` })), 
+                        ${this.disabled ? 'disabled' : ''}` }, h("div", { key: '4ffd3c627c44a652814fb2b28b8a57ede5572d2a', class: 'step-icon-wrapper' }, this.stepperState.variant !== 'compact' && h("span", { key: 'f198e558160f837f3553804ec8b6447fe5ca19bc', class: 'step-connector-l' }), (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) &&
+            h("div", { key: 'b9729e46a5bba23cd0de106af3d1f3d50280d41c', class: 'step-icon' }, (this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : '', (this.complete && !this.active) && h("ifx-icon", { key: 'b86eea4d66ee542d41c49ce6c1669f1d55b285a6', icon: 'check16' }), this.active && h("span", { key: '491566173caea0ef800c9540c287645dadac823f', class: 'active-indic' })), (this.stepperState.variant !== 'compact' && this.error && !this.active) && h("ifx-icon", { key: 'afa67edf1c8b61ec276b73238ac2264d48d6350a', icon: 'warningF16' }), this.stepperState.variant !== 'compact' && h("span", { key: 'f0cd06d1fc4f50bc38b9a64a2c283cf429e6d099', class: `step-connector-r ${this.active ? 'active' : ''}` })), 
         /* Step labels */
         (this.stepperState.variant !== 'compact' || (this.stepperState.variant === 'compact' && (this.active || this.stepId === this.stepperState.activeStep + 1))) &&
-            h("div", { key: '4a60050301d4666815c6eb64d85d6a85459fb272', tabIndex: !this.disabled && this.complete && !this.active ? 0 : -1, class: `step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`, onClick: () => { this.handleStepClick(); }, onKeyDown: (e) => { this.handleStepKeyDown(e); } }, (this.stepperState.variant !== 'compact') && h("slot", { key: 'cbd47999729966cc8858b41bb54608eab8aa30c7' }), this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : '', this.stepperState.variant === 'compact' && h("slot", { key: 'acb8a199531960f67d7c9c78238c9510118d79ab' }))));
+            h("div", { key: 'ea152255764c891ce43c89c4f55b28057809ed7e', tabIndex: !this.disabled && this.complete && !this.active ? 0 : -1, class: `step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`, onClick: () => { this.handleStepClick(); }, onKeyDown: (e) => { this.handleStepKeyDown(e); } }, (this.stepperState.variant !== 'compact') && h("slot", { key: '7405313a5c724511ab13f4618bcbc0fe4bb09ad8' }), this.stepperState.variant === 'compact' && !this.active ? 'Next: ' : '', this.stepperState.variant === 'compact' && h("slot", { key: '491baf5f8c458e8ca028343e7008f10fd5659adf' }))));
     }
     ;
     static get watchers() { return {

package/dist/components/ifx-step.js.map

@@ -1 +1 @@
-{"file":"ifx-step.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stepper/step/step.scss?tag=ifx-step&encapsulation=shadow","src/components/stepper/step/step.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.step-wrapper {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: flex-start;\n    width: 100%;\n    gap: tokens.$ifxSize100;\n    font: tokens.$ifxBodyBody03;\n\n\n    &.vertical {\n        flex-direction: row;\n        gap: tokens.$ifxSize150;\n        width: unset;\n        height: 100%;\n        \n        .step-icon-wrapper {\n            flex-direction: column;\n            width: unset;\n            height: 100%;\n        }\n    }\n    \n    &.compact {\n        gap: 0;\n        max-width: 100%;\n        .step-label{\n            max-width: 100%;\n            cursor: auto;\n            align-self: flex-start;\n        }\n        \n        &.indicator-left {\n            align-items: flex-end;\n            text-align: right;\n        }\n        \n        &.indicator-right {\n            align-items: flex-start;\n        }\n    }\n\n    .step-label {\n        max-width: 90%;\n        color: tokens.$ifxColorEngineering400; \n        word-wrap: break-word;\n        &.curr-label{\n            font: tokens.$ifxHeadingHeadingCompact04; \n        }\n        &:focus {\n        outline: 2px solid tokens.$ifxColorOcean500; \n        outline-offset: 2px;\n    }\n        &.next-label{\n            font: tokens.$ifxBodyBody05;\n        }\n        :hover{\n            color: tokens.$ifxColorEngineering400;\n        }\n    }\n\n    \n    &.first-step {\n        .step-connector-l{\n            height: 0px;\n        }\n    }\n    \n    &.last-step{\n        .step-connector-r{\n            height: 0px;\n        }\n    }\n\n    &.vertical {\n        &.first-step .step-connector-l,\n        &.last-step .step-connector-r {\n            width: 0px;\n        }\n    }\n\n    &.complete{\n        .step-connector-l, .step-connector-r, .step-icon {\n            background: tokens.$ifxColorOcean500;\n            &.active, &.error {\n                background: tokens.$ifxColorEngineering400;\n            }\n        }\n        &:not(.disabled) {\n            .step-label{\n                cursor: pointer;\n                color: tokens.$ifxColorBaseBlack;\n                :hover {\n                    color: tokens.$ifxColorOcean600;\n                }\n            }\n        }\n    } \n    \n    &.disabled{\n        .step-connector-l, \n        .step-connector-r, \n        .step-icon {\n            background-color: tokens.$ifxColorEngineering400;\n        }\n        .step-label, \n        .step-label :hover{\n            color: tokens.$ifxColorEngineering400;\n        }\n    }\n    \n    &.active{\n        .step-connector-l, \n        .step-connector-r, \n        .step-icon {\n            background: tokens.$ifxColorOcean500;\n            &.active, \n            &.error {\n                background: tokens.$ifxColorEngineering400;\n            }\n        }\n        .step-label, \n        .step-label :hover{\n            color: tokens.$ifxColorBaseBlack;\n        }\n        &.complete .step-label { \n            cursor: auto;\n        }\n        \n    } \n\n    &.clickable:not(.active) .step-label{\n        cursor: pointer;\n    }\n\n    &.error:not(.active){\n        color: tokens.$ifxColorRed500;\n        .step-label{\n            color: tokens.$ifxColorRed500;\n            :hover{\n                color: tokens.$ifxColorOcean500;\n            }\n        }\n    }\n\n    &.disabled{\n        .step-label{\n            cursor: auto;\n        }\n    }\n\n    &:hover{\n        &.complete:not(.disabled):not(.active){\n            .step-connector-l, \n            .step-connector-r, \n            .step-icon {\n                background: tokens.$ifxColorOcean600;\n                &.active, \n                &.error {\n                    background: tokens.$ifxColorEngineering400;\n                }\n            } \n            .step-label {\n                color: tokens.$ifxColorOcean600;\n            }\n        }\n    }\n    \n}\n\n.active-indic {\n    width: tokens.$ifxSize200;\n    height: tokens.$ifxSize200;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    background: white;\n}\n\n.step-icon-wrapper {\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n}\n\n.step-icon {\n    width: tokens.$ifxSize300;\n    height: tokens.$ifxSize300;\n    background-color: tokens.$ifxColorEngineering400;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n}\n\n.step-connector-r, \n.step-connector-l {\n    height: 2px;\n    min-width: tokens.$ifxSize500;\n    flex-grow: 1;\n    background-color: tokens.$ifxColorEngineering400;\n}\n\n.vertical {\n    .step-connector-r, \n    .step-connector-l {\n        height: unset;\n        min-width: unset;\n        width: 2px;\n        min-height: tokens.$ifxSize500;\n    }\n}","import { h, \n         Component, \n         Listen, \n         Prop, \n         State, \n         Watch } from \"@stencil/core\";\nimport { StepperState } from \"../interfaces\";\n\n@Component({\n    tag: 'ifx-step',\n    styleUrl: 'step.scss',\n    shadow: true\n})\n\nexport class Step {\n    @Prop() complete?: boolean = false;\n    @Prop() disabled?: boolean = false;\n    @Prop({ mutable: true }) error?: boolean = false;\n    @Prop({ reflect: false }) lastStep: boolean = false;\n    @Prop() stepId: number = 1;\n    @Prop({ reflect: false }) stepperState: StepperState = { activeStep: 1, \n                                                             showStepNumber: false, \n                                                             variant: 'default', \n                                                             indicatorPosition: 'left' };\n\n    @State() active: boolean;\n    @State() clickable: boolean = false;\n\n    @Listen('ifxChange', { target: 'document' })\n    onStepChange(event: CustomEvent) {\n        const previousActiveStep = event.detail.previousActiveStep;\n        if (previousActiveStep === this.stepId && this.error) {\n            this.clickable = true;\n        }\n    } \n\n    @Watch('stepperState')\n    updateCurrentStep(newStepperState) {\n        this.active = (newStepperState.activeStep === this.stepId)\n    }\n\n    @Watch('active')\n    updateErrorState(){\n        if (this.active) {\n            this.error = false;\n        }\n    }\n\n\n    handleStepClick() {\n        if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable || this.complete)) {\n            this.stepperState.setActiveStep(this.stepId, true)\n        } \n    }\n    \n    handleStepKeyDown(event: KeyboardEvent) {\n        if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable || this.complete) && event.key === 'Enter') {\n            this.stepperState.setActiveStep(this.stepId, true)\n        } \n    }\n    \n    stopOnClickPropogation(event: Event) {\n        if (this.disabled) {\n            event.stopPropagation();\n        }\n    }\n\n    render() {\n        return (\n            <div aria-current = {this.active ? 'step': false}\n                aria-disabled = {this.active || this.complete ? false : true}\n                onClick={ (e) => this.stopOnClickPropogation(e) }\n                class = {`step-wrapper ${this.stepId === 1 ? 'first-step': ''} \n                        ${this.error ? 'error': ''}\n                        ${this.stepperState.variant}\n                        ${this.complete ? 'complete': ''}\n                        ${this.lastStep ? 'last-step': ''}\n                        indicator-${this.stepperState.indicatorPosition}\n                        ${this.active ? 'active' : ''}\n                        ${this.clickable ? 'clickable' : ''}\n                        ${this.disabled ? 'disabled': ''}`}>\n\n                <div class = 'step-icon-wrapper'>\n                    {/* Left connector */}\n                    {this.stepperState.variant !== 'compact' && <span class = 'step-connector-l'/>}\n\n                    {\n                        (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) && \n                        <div class = 'step-icon'>\n                            {(this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : ''}\n                            {(this.complete && !this.active) && <ifx-icon icon='check16'></ifx-icon>}\n                            {this.active && <span class = 'active-indic'></span>}\n                        </div>\n                    }\n\n                    {(this.stepperState.variant !=='compact' && this.error && !this.active) && <ifx-icon icon='warningF16'></ifx-icon>}\n                    \n                    {/* Right connector */}\n                    {this.stepperState.variant !== 'compact' && <span class = {`step-connector-r ${this.active ? 'active' : ''}`}/>}\n                </div>\n\n                {\n                    /* Step labels */\n                    (this.stepperState.variant !== 'compact' || (this.stepperState.variant === 'compact' && (this.active || this.stepId === this.stepperState.activeStep+1))) && \n                    <div tabIndex={!this.disabled && this.complete && !this.active ? 0 : -1} \n                        class = {`step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`} \n                        onClick={() => { this.handleStepClick() }} \n                        onKeyDown={(e) => { this.handleStepKeyDown(e) }}>\n\n                        {(this.stepperState.variant !== 'compact') && <slot/>}\n\n                        {this.stepperState.variant === 'compact' &&  !this.active  ? 'Next: ' : ''}\n                        {this.stepperState.variant === 'compact' && <slot/>}\n                    </div>\n                }\n\n            </div>\n        );\n    };\n}\n"],"version":3}
+{"file":"ifx-step.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stepper/step/step.scss?tag=ifx-step&encapsulation=shadow","src/components/stepper/step/step.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../../global/font.scss\";\n\n.step-wrapper {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: flex-start;\n    width: 100%;\n    gap: tokens.$ifxSize100;\n    font: tokens.$ifxBodyBody03;\n\n    &.vertical {\n        flex-direction: row;\n        gap: tokens.$ifxSize150;\n        width: unset;\n        height: 100%;\n        \n        .step-icon-wrapper {\n            flex-direction: column;\n            width: unset;\n            height: 100%;\n        }\n    }\n    \n    &.compact {\n        gap: 0;\n        max-width: 100%;\n        .step-label{\n            max-width: 100%;\n            cursor: auto;\n            align-self: flex-start;\n        }\n        \n        &.indicator-left {\n            align-items: flex-end;\n            text-align: right;\n        }\n        \n        &.indicator-right {\n            align-items: flex-start;\n        }\n    }\n\n    .step-label {\n        max-width: 90%;\n        color: tokens.$ifxColorEngineering400; \n        word-wrap: break-word;\n        &.curr-label{\n            font: tokens.$ifxHeadingHeadingCompact04; \n        }\n        &.next-label{\n            font: tokens.$ifxBodyBody05;\n        }\n        :hover{\n            color: tokens.$ifxColorEngineering400;\n        }\n    }\n\n    \n    &.first-step {\n        .step-connector-l{\n            height: 0px;\n        }\n    }\n    \n    &.last-step{\n        .step-connector-r{\n            height: 0px;\n        }\n    }\n\n    &.vertical {\n        &.first-step .step-connector-l,\n        &.last-step .step-connector-r {\n            width: 0px;\n        }\n    }\n\n    &.complete{\n        .step-connector-l, .step-connector-r, .step-icon {\n            background: tokens.$ifxColorOcean500;\n            &.active, &.error {\n                background: tokens.$ifxColorEngineering400;\n            }\n        }\n        &:not(.disabled) {\n            .step-label{\n                cursor: pointer;\n                color: tokens.$ifxColorBaseBlack;\n                :hover {\n                    color: tokens.$ifxColorOcean600;\n                }\n            }\n        }\n    } \n    \n    &.disabled{\n        .step-connector-l, \n        .step-connector-r, \n        .step-icon {\n            background-color: tokens.$ifxColorEngineering400;\n        }\n        .step-label, \n        .step-label :hover{\n            color: tokens.$ifxColorEngineering400;\n        }\n    }\n    \n    &.active{\n        .step-connector-l, \n        .step-connector-r, \n        .step-icon {\n            background: tokens.$ifxColorOcean500;\n            &.active, \n            &.error {\n                background: tokens.$ifxColorEngineering400;\n            }\n        }\n        .step-label, \n        .step-label :hover{\n            color: tokens.$ifxColorBaseBlack;\n        }\n        &.complete .step-label { \n            cursor: auto;\n        }\n    } \n\n    &.clickable:not(.active) .step-label{\n        cursor: pointer;\n    }\n\n    &.error:not(.active){\n        color: tokens.$ifxColorRed500;\n        .step-label{\n            color: tokens.$ifxColorRed500;\n            :hover{\n                color: tokens.$ifxColorOcean500;\n            }\n        }\n    }\n\n    &.disabled{\n        .step-label{\n            cursor: auto;\n        }\n    }\n\n    &:hover{\n        &.complete:not(.disabled):not(.active){\n            .step-connector-l, \n            .step-connector-r, \n            .step-icon {\n                background: tokens.$ifxColorOcean600;\n                &.active, \n                &.error {\n                    background: tokens.$ifxColorEngineering400;\n                }\n            } \n            .step-label {\n                color: tokens.$ifxColorOcean600;\n            }\n        }\n    }\n    \n}\n\n.active-indic {\n    width: tokens.$ifxSize200;\n    height: tokens.$ifxSize200;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    background: white;\n}\n\n.step-icon-wrapper {\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n}\n\n.step-icon {\n    width: tokens.$ifxSize300;\n    height: tokens.$ifxSize300;\n    background-color: tokens.$ifxColorEngineering400;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: white;\n}\n\n.step-connector-r, \n.step-connector-l {\n    height: 2px;\n    min-width: tokens.$ifxSize500;\n    flex-grow: 1;\n    background-color: tokens.$ifxColorEngineering400;\n}\n\n.vertical {\n    .step-connector-r, \n    .step-connector-l {\n        height: unset;\n        min-width: unset;\n        width: 2px;\n        min-height: tokens.$ifxSize500;\n    }\n}","import { h, \n         Component, \n         Listen, \n         Prop, \n         State, \n         Watch } from \"@stencil/core\";\nimport { StepperState } from \"../interfaces\";\n\n@Component({\n    tag: 'ifx-step',\n    styleUrl: 'step.scss',\n    shadow: true\n})\n\nexport class Step {\n    @Prop() complete?: boolean = false;\n    @Prop() disabled?: boolean = false;\n    @Prop({ mutable: true }) error?: boolean = false;\n    @Prop({ reflect: false }) lastStep: boolean = false;\n    @Prop() stepId: number = 1;\n    @Prop({ reflect: false }) stepperState: StepperState = { activeStep: 1, \n                                                             showStepNumber: false, \n                                                             variant: 'default', \n                                                             indicatorPosition: 'left' };\n\n    @State() active: boolean;\n    @State() clickable: boolean = false;\n\n    @Listen('ifxChange', { target: 'document' })\n    onStepChange(event: CustomEvent) {\n        const previousActiveStep = event.detail.previousActiveStep;\n        if (previousActiveStep === this.stepId && this.error) {\n            this.clickable = true;\n        }\n    } \n\n    @Watch('stepperState')\n    updateCurrentStep(newStepperState) {\n        this.active = (newStepperState.activeStep === this.stepId)\n    }\n\n    @Watch('active')\n    updateErrorState(){\n        if (this.active) {\n            this.error = false;\n        }\n    }\n\n\n    handleStepClick() {\n        if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable || this.complete)) {\n            this.stepperState.setActiveStep(this.stepId, true)\n        } \n    }\n    \n    handleStepKeyDown(event: KeyboardEvent) {\n        if (!this.disabled && this.stepperState.variant !== 'compact' && (this.clickable || this.complete) && event.key === 'Enter') {\n            this.stepperState.setActiveStep(this.stepId, true)\n        } \n    }\n    \n    stopOnClickPropogation(event: Event) {\n        if (this.disabled) {\n            event.stopPropagation();\n        }\n    }\n\n    render() {\n        return (\n            <div aria-current = {this.active ? 'step': false}\n                aria-disabled = {this.active || this.complete ? false : true}\n                onClick={ (e) => this.stopOnClickPropogation(e) }\n                class = {`step-wrapper ${this.stepId === 1 ? 'first-step': ''} \n                        ${this.error ? 'error': ''}\n                        ${this.stepperState.variant}\n                        ${this.complete ? 'complete': ''}\n                        ${this.lastStep ? 'last-step': ''}\n                        indicator-${this.stepperState.indicatorPosition}\n                        ${this.active ? 'active' : ''}\n                        ${this.clickable ? 'clickable' : ''}\n                        ${this.disabled ? 'disabled': ''}`}>\n\n                <div class = 'step-icon-wrapper'>\n                    {/* Left connector */}\n                    {this.stepperState.variant !== 'compact' && <span class = 'step-connector-l'/>}\n\n                    {\n                        (this.stepperState.variant !== 'compact' && (!this.error || (this.error && this.active))) && \n                        <div class = 'step-icon'>\n                            {(this.stepperState.showStepNumber && !this.complete && !this.active) ? this.stepId : ''}\n                            {(this.complete && !this.active) && <ifx-icon icon='check16'></ifx-icon>}\n                            {this.active && <span class = 'active-indic'></span>}\n                        </div>\n                    }\n\n                    {(this.stepperState.variant !=='compact' && this.error && !this.active) && <ifx-icon icon='warningF16'></ifx-icon>}\n                    \n                    {/* Right connector */}\n                    {this.stepperState.variant !== 'compact' && <span class = {`step-connector-r ${this.active ? 'active' : ''}`}/>}\n                </div>\n\n                {\n                    /* Step labels */\n                    (this.stepperState.variant !== 'compact' || (this.stepperState.variant === 'compact' && (this.active || this.stepId === this.stepperState.activeStep+1))) && \n                    <div tabIndex={!this.disabled && this.complete && !this.active ? 0 : -1} \n                        class = {`step-label ${this.stepperState.variant === 'compact' ? (this.active ? 'curr-label' : 'next-label') : ''}`} \n                        onClick={() => { this.handleStepClick() }} \n                        onKeyDown={(e) => { this.handleStepKeyDown(e) }}>\n\n                        {(this.stepperState.variant !== 'compact') && <slot/>}\n\n                        {this.stepperState.variant === 'compact' &&  !this.active  ? 'Next: ' : ''}\n                        {this.stepperState.variant === 'compact' && <slot/>}\n                    </div>\n                }\n\n            </div>\n        );\n    };\n}\n"],"version":3}

package/dist/components/ifx-stepper.js

@@ -131,10 +131,10 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends H {
         this.syncIfxSteps();
     }
     render() {
-        return (h("div", { key: 'b6f600a4ac775e75049390caab2ced566970ee36', "aria-label": this.ariaLabel, "aria-current": this.ariaCurrent, role: 'navigation', class: `stepper ${(this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant} ${this.variant === 'compact' ? 'compact-' + this.indicatorPosition : ''}` }, 
+        return (h("div", { key: '072b8e14d99551292137f832f0c1b10086ae709c', "aria-label": 'a stepper', role: 'navigation', class: `stepper ${(this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant} ${this.variant === 'compact' ? 'compact-' + this.indicatorPosition : ''}` }, 
         /* Progress bar for compact variant. */
         (this.variant === 'compact') &&
-            h("div", { key: 'bda903cf14dadc424da369c9c1f087541da6fbc1', class: 'stepper-progress' }, h("div", { key: 'da29036b9cadf2ff4455f08d94c546307a8905ff', class: 'progress-detail' }, `${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`)), h("div", { key: '0d76b7db3e6e947496a611549f67b434a5c407ec', class: `stepper-wrapper` }, h("slot", { key: '29b4ebf6d13045c5f00760adb9a2342ef7338103' }))));
+            h("div", { key: 'f91c8ecdd38d2f4e4f1d8a9e93af9894a45668d7', class: 'stepper-progress' }, h("div", { key: '4541cad0c38c02c2586e1557fe2aff571d4f09d4', class: 'progress-detail' }, `${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`)), h("div", { key: '9b7a8a0f1a3b0bfb8b2a399f2365289af5ea5628', class: `stepper-wrapper` }, h("slot", { key: 'ac33e01c765ef7307e74cad6bbdbec94141864b4' }))));
     }
     ;
     componentDidRender() {
@@ -154,8 +154,6 @@ const Stepper = /*@__PURE__*/ proxyCustomElement(class Stepper extends H {
         "indicatorPosition": [1, "indicator-position"],
         "showStepNumber": [4, "show-step-number"],
         "variant": [1],
-        "ariaLabel": [1, "aria-label"],
-        "ariaCurrent": [1, "aria-current"],
         "stepsCount": [32],
         "shouldEmitEvent": [32],
         "emittedByClick": [32]

package/dist/components/ifx-stepper.js.map

@@ -1 +1 @@
-{"file":"ifx-stepper.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stepper/stepper.scss?tag=ifx-stepper&encapsulation=shadow","src/components/stepper/stepper.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.stepper {\n    display: flex;\n    align-items: center;\n    \n    &.compact {\n        align-items: center;\n        gap: 8px;\n        \n        &.compact-right {\n            flex-direction: row-reverse;\n            text-align: left;\n        }\n        \n        .stepper-wrapper{\n            width: unset;\n            flex-direction: column;\n        }\n    }\n\n    &.vertical {\n        height: 100%;\n\n        .stepper-wrapper {\n            flex-direction: column;\n            width: unset;\n            height: 100%;\n        }\n    }\n}\n\n.stepper-wrapper {\n    display: flex;\n    flex-direction: row;\n    width: 100%;\n}\n\n.stepper-wrapper ::slotted(*){\n    display: flex;\n    flex: 1;\n    justify-content: flex-start;\n}\n\n.stepper-progress {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font: tokens.$ifxBodyBodySemibold04;\n    min-width: tokens.$ifxSize700;\n    height: tokens.$ifxSize700;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    background: conic-gradient(tokens.$ifxColorOcean500 var(--pb, 0%), tokens.$ifxColorEngineering400 0);\n    \n    .progress-detail {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        text-align: center;\n        width: (tokens.$ifxSize700)-(tokens.$ifxSize100);\n        height: (tokens.$ifxSize700)-(tokens.$ifxSize100);\n        border-radius: tokens.$ifxBorderRadiusRound;\n        background: white;\n    }\n}\n\n","import { h, \n         Component, \n         Element, \n         Event, \n         EventEmitter, \n         Listen, \n         Prop, \n         State, \n         Watch } from \"@stencil/core\";\nimport { StepperState } from \"./interfaces\";\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n    tag: 'ifx-stepper',\n    styleUrl: 'stepper.scss',\n    shadow: true\n})\n\nexport class Stepper {\n    @Element() el: HTMLElement;\n\n    @Event() ifxChange: EventEmitter;\n\n    @Prop({ mutable: true }) activeStep: number = 1;\n    @Prop() indicatorPosition?: 'left' | 'right' = 'left';\n    @Prop() showStepNumber?: boolean = false;\n    @Prop() variant?: 'default' | 'compact' | 'vertical' = 'default';\n    @Prop() ariaLabel: string | null;\n    @Prop() ariaCurrent: string | null;\n\n\n\n    @State() stepsCount: number;\n    @State() shouldEmitEvent: boolean = true;\n    @State() emittedByClick: boolean = false;\n\n    @Listen('ifxChange') \n    onStepChange(event: CustomEvent) {\n        const steps = this.getSteps();\n        const previousActiveStep = steps[event.detail.previousActiveStep-1];\n        if (previousActiveStep && !previousActiveStep.complete) {\n            previousActiveStep.setAttribute('error', 'true');\n        }\n    } \n\n    @Watch('activeStep')\n    handleActiveStep(newStep: number, oldStep: number) {\n        const steps = this.getSteps();\n        if (!this.shouldEmitEvent) {\n            this.shouldEmitEvent = true;\n            return;\n        }\n        // Skipping until the enabled step is found \n        if(steps[newStep-1]) { \n            if (!steps[newStep-1].disabled) {\n                this.emitIfxChange(newStep, oldStep);\n            } else {\n                // If coming from higher step number to the lower step number\n                if (newStep < oldStep) {\n                    let i = newStep;\n                    this.shouldEmitEvent = false;\n                    while (i >= 1 && steps[i-1].disabled) i--;\n                    // if all the steps are disabled no change.\n                    if (i < 1) {\n                        this.activeStep = oldStep;\n                    } else {\n                        this.emitIfxChange(i, oldStep);\n                        this.activeStep = i;\n                    }\n                } \n                // If coming from lower step number to the higher step number\n                else {\n                    let i = newStep;\n                    this.shouldEmitEvent = false;\n                    while (i <= this.stepsCount && steps[i-1].disabled) i++;\n                    if (i > this.stepsCount) {\n                        this.activeStep = oldStep;\n                    } else {\n                        this.emitIfxChange(i, oldStep);\n                        this.activeStep = i;\n                    }\n                }\n            }\n        }\n    }\n    \n    emitIfxChange(activeStep: number, previousActiveStep: number) {\n        this.ifxChange.emit({activeStep: activeStep, \n            previousActiveStep: previousActiveStep, \n            totalSteps: this.stepsCount,\n            emittedByClick: this.emittedByClick\n        });\n        this.emittedByClick = false;\n    }\n\n    getSteps() {\n        const steps: NodeListOf<HTMLIfxStepElement> = this.el.querySelectorAll('ifx-step');\n        return steps;\n    }\n\n\n    addStepIdsToStepsAndCountSteps() {\n        const steps = this.getSteps()\n        steps[steps.length - 1].lastStep = true;\n        for (let i = 0; i < steps.length; i++) {\n            steps[i].stepId = i + 1;\n        }\n        this.stepsCount = steps.length;\n    }\n\n\n    setActiveStep(stepId: number, setByClick: boolean = false) {\n        this.emittedByClick = setByClick;\n        this.activeStep = stepId;\n    }\n\n    setStepsBeforeActiveToComplete() {\n        const steps = this.getSteps();\n        steps.forEach( (step, stepId) => {\n            if (stepId+1 < this.activeStep) step.complete = true;\n        });\n    }\n\n    syncIfxSteps() {\n        const steps = this.getSteps()\n        for (let i = 0; i < steps.length; i++) {\n            const stepperState: StepperState = { \n                activeStep: this.activeStep,\n                indicatorPosition: (this.indicatorPosition !== 'right' ? 'left' : 'right'), \n                showStepNumber: this.showStepNumber, \n                variant: ((this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant), \n                setActiveStep: this.setActiveStep.bind(this)\n            };\n            steps[i].stepperState = stepperState;\n        }\n    }\n\n    setInitialActiveStep() {\n        this.activeStep = Math.max(1, Math.min(this.stepsCount + (this.variant !== 'compact' ? 1 : 0), this.activeStep));\n    }\n\n\n    componentWillLoad() {\n        this.addStepIdsToStepsAndCountSteps();\n        this.setInitialActiveStep();\n        this.setStepsBeforeActiveToComplete();\n    }\n    \n    async componentDidLoad() {\n        if(!isNestedInIfxComponent(this.el)) { \n            const framework = detectFramework();\n            trackComponent('ifx-stepper', await framework)\n        }\n        this.syncIfxSteps();\n    }\n\n    componentWillUpdate() {\n        this.syncIfxSteps();\n    }\n\n    render() {\n        return (\n            <div aria-label = {this.ariaLabel}\n                aria-current={this.ariaCurrent}\n                role = 'navigation' \n                class = {`stepper ${(this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant} ${this.variant === 'compact' ? 'compact-'+this.indicatorPosition: ''}`}>\n                {\n                    /* Progress bar for compact variant. */\n                    (this.variant === 'compact') && \n                    <div class = 'stepper-progress'>\n                        <div class = 'progress-detail'>\n                            {`${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`}\n                        </div>\n                    </div>\n                }\n                \n                {/* Slot for ifx-steps. */}\n                <div class = {`stepper-wrapper`}>\n                    <slot />\n                </div>\n            </div>\n        );\n    };\n\n    componentDidRender() {\n        /* Updating progress bar in compact version. */\n        if (this.variant == 'compact') {\n            const progressBar: HTMLElement = this.el.shadowRoot.querySelector('.stepper-progress');\n            progressBar.style.setProperty('--pb', `${(this.activeStep / (this.stepsCount)) * 100}%`);\n        }\n    }\n}\n"],"version":3}
+{"file":"ifx-stepper.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/stepper/stepper.scss?tag=ifx-stepper&encapsulation=shadow","src/components/stepper/stepper.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.stepper {\n    display: flex;\n    align-items: center;\n    \n    &.compact {\n        align-items: center;\n        gap: 8px;\n        \n        &.compact-right {\n            flex-direction: row-reverse;\n            text-align: left;\n        }\n        \n        .stepper-wrapper{\n            width: unset;\n            flex-direction: column;\n        }\n    }\n\n    &.vertical {\n        height: 100%;\n\n        .stepper-wrapper {\n            flex-direction: column;\n            width: unset;\n            height: 100%;\n        }\n    }\n}\n\n.stepper-wrapper {\n    display: flex;\n    flex-direction: row;\n    width: 100%;\n}\n\n.stepper-wrapper ::slotted(*){\n    display: flex;\n    flex: 1;\n    justify-content: flex-start;\n}\n\n.stepper-progress {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font: tokens.$ifxBodyBodySemibold04;\n    min-width: tokens.$ifxSize700;\n    height: tokens.$ifxSize700;\n    border-radius: tokens.$ifxBorderRadiusRound;\n    background: conic-gradient(tokens.$ifxColorOcean500 var(--pb, 0%), tokens.$ifxColorEngineering400 0);\n    \n    .progress-detail {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        text-align: center;\n        width: (tokens.$ifxSize700)-(tokens.$ifxSize100);\n        height: (tokens.$ifxSize700)-(tokens.$ifxSize100);\n        border-radius: tokens.$ifxBorderRadiusRound;\n        background: white;\n    }\n}\n\n","import { h, \n         Component, \n         Element, \n         Event, \n         EventEmitter, \n         Listen, \n         Prop, \n         State, \n         Watch } from \"@stencil/core\";\nimport { StepperState } from \"./interfaces\";\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n    tag: 'ifx-stepper',\n    styleUrl: 'stepper.scss',\n    shadow: true\n})\n\nexport class Stepper {\n    @Element() el: HTMLElement;\n\n    @Event() ifxChange: EventEmitter;\n\n    @Prop({ mutable: true }) activeStep: number = 1;\n    @Prop() indicatorPosition?: 'left' | 'right' = 'left';\n    @Prop() showStepNumber?: boolean = false;\n    @Prop() variant?: 'default' | 'compact' | 'vertical' = 'default';\n\n\n    @State() stepsCount: number;\n    @State() shouldEmitEvent: boolean = true;\n    @State() emittedByClick: boolean = false;\n\n    @Listen('ifxChange') \n    onStepChange(event: CustomEvent) {\n        const steps = this.getSteps();\n        const previousActiveStep = steps[event.detail.previousActiveStep-1];\n        if (previousActiveStep && !previousActiveStep.complete) {\n            previousActiveStep.setAttribute('error', 'true');\n        }\n    } \n\n    @Watch('activeStep')\n    handleActiveStep(newStep: number, oldStep: number) {\n        const steps = this.getSteps();\n        if (!this.shouldEmitEvent) {\n            this.shouldEmitEvent = true;\n            return;\n        }\n        // Skipping until the enabled step is found \n        if(steps[newStep-1]) { \n            if (!steps[newStep-1].disabled) {\n                this.emitIfxChange(newStep, oldStep);\n            } else {\n                // If coming from higher step number to the lower step number\n                if (newStep < oldStep) {\n                    let i = newStep;\n                    this.shouldEmitEvent = false;\n                    while (i >= 1 && steps[i-1].disabled) i--;\n                    // if all the steps are disabled no change.\n                    if (i < 1) {\n                        this.activeStep = oldStep;\n                    } else {\n                        this.emitIfxChange(i, oldStep);\n                        this.activeStep = i;\n                    }\n                } \n                // If coming from lower step number to the higher step number\n                else {\n                    let i = newStep;\n                    this.shouldEmitEvent = false;\n                    while (i <= this.stepsCount && steps[i-1].disabled) i++;\n                    if (i > this.stepsCount) {\n                        this.activeStep = oldStep;\n                    } else {\n                        this.emitIfxChange(i, oldStep);\n                        this.activeStep = i;\n                    }\n                }\n            }\n        }\n    }\n    \n    emitIfxChange(activeStep: number, previousActiveStep: number) {\n        this.ifxChange.emit({activeStep: activeStep, \n            previousActiveStep: previousActiveStep, \n            totalSteps: this.stepsCount,\n            emittedByClick: this.emittedByClick\n        });\n        this.emittedByClick = false;\n    }\n\n    getSteps() {\n        const steps: NodeListOf<HTMLIfxStepElement> = this.el.querySelectorAll('ifx-step');\n        return steps;\n    }\n\n\n    addStepIdsToStepsAndCountSteps() {\n        const steps = this.getSteps()\n        steps[steps.length - 1].lastStep = true;\n        for (let i = 0; i < steps.length; i++) {\n            steps[i].stepId = i + 1;\n        }\n        this.stepsCount = steps.length;\n    }\n\n\n    setActiveStep(stepId: number, setByClick: boolean = false) {\n        this.emittedByClick = setByClick;\n        this.activeStep = stepId;\n    }\n\n    setStepsBeforeActiveToComplete() {\n        const steps = this.getSteps();\n        steps.forEach( (step, stepId) => {\n            if (stepId+1 < this.activeStep) step.complete = true;\n        });\n    }\n\n    syncIfxSteps() {\n        const steps = this.getSteps()\n        for (let i = 0; i < steps.length; i++) {\n            const stepperState: StepperState = { \n                activeStep: this.activeStep,\n                indicatorPosition: (this.indicatorPosition !== 'right' ? 'left' : 'right'), \n                showStepNumber: this.showStepNumber, \n                variant: ((this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant), \n                setActiveStep: this.setActiveStep.bind(this)\n            };\n            steps[i].stepperState = stepperState;\n        }\n    }\n\n    setInitialActiveStep() {\n        this.activeStep = Math.max(1, Math.min(this.stepsCount + (this.variant !== 'compact' ? 1 : 0), this.activeStep));\n    }\n\n\n    componentWillLoad() {\n        this.addStepIdsToStepsAndCountSteps();\n        this.setInitialActiveStep();\n        this.setStepsBeforeActiveToComplete();\n    }\n    \n    async componentDidLoad() {\n        if(!isNestedInIfxComponent(this.el)) { \n            const framework = detectFramework();\n            trackComponent('ifx-stepper', await framework)\n        }\n        this.syncIfxSteps();\n    }\n\n    componentWillUpdate() {\n        this.syncIfxSteps();\n    }\n\n    render() {\n        return (\n            <div aria-label = 'a stepper' \n                role = 'navigation' \n                class = {`stepper ${(this.variant !== 'compact' && this.variant !== 'vertical') ? 'default' : this.variant} ${this.variant === 'compact' ? 'compact-'+this.indicatorPosition: ''}`}>\n                {\n                    /* Progress bar for compact variant. */\n                    (this.variant === 'compact') && \n                    <div class = 'stepper-progress'>\n                        <div class = 'progress-detail'>\n                            {`${Math.min(this.activeStep, this.stepsCount)} of ${this.stepsCount}`}\n                        </div>\n                    </div>\n                }\n                \n                {/* Slot for ifx-steps. */}\n                <div class = {`stepper-wrapper`}>\n                    <slot />\n                </div>\n            </div>\n        );\n    };\n\n    componentDidRender() {\n        /* Updating progress bar in compact version. */\n        if (this.variant == 'compact') {\n            const progressBar: HTMLElement = this.el.shadowRoot.querySelector('.stepper-progress');\n            progressBar.style.setProperty('--pb', `${(this.activeStep / (this.stepsCount)) * 100}%`);\n        }\n    }\n}\n"],"version":3}

package/dist/components/ifx-switch.js

@@ -77,7 +77,7 @@ const Switch = /*@__PURE__*/ proxyCustomElement(class Switch extends H {
         this.internals.setFormValue(null);
     }
     render() {
-        return (h("div", { key: '4837a5d43fb1799d7916801242e2a5e28bcc251f', class: "container", role: "switch", "aria-checked": this.internalChecked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-labelledby": "switch-label", onClick: () => this.toggleSwitch(), onKeyDown: (event) => this.handleKeyDown(event) }, h("div", { key: 'baa5c139194e8ba9271fa11cb70f635ef73626e5', class: `switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`, tabindex: "0" }, h("div", { key: 'a2beb8fb4aee44e7b721229305bd5a3f5424823f', class: "switch__checkbox-wrapper" }, h("input", { key: '6c1cce06c728adc929bf88388da2cd333642091a', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled, checked: this.internalChecked, value: `${this.value}` }), h("div", { key: 'cafab714e896abe449dc39006f4bf825ec4bbe6a', class: `switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}` }))), h("div", { key: '039d846ec29d75875db39a0a0cdd7536f69ef6ea', class: `switch__label-wrapper ${this.disabled ? 'disabled' : ''}` }, h("label", { key: 'd4122d321825660f4b8c694410866bfa9d59699a', htmlFor: "switch" }, h("slot", { key: 'bd497c1177c6a416a10e21732477523817dc2b42', onSlotchange: () => this.toggleLabelGap() })))));
+        return (h("div", { key: '6f4503de2b4cec113f5c207e4be88971859cdf23', class: "container", role: "switch", "aria-checked": this.internalChecked ? 'true' : 'false', "aria-label": this.name, onClick: () => this.toggleSwitch(), onKeyDown: (event) => this.handleKeyDown(event) }, h("div", { key: '0fed4fa174031f277e855ea9e31c74d7360a0dca', class: `switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`, tabindex: "0" }, h("div", { key: '937b74b9e710c9b292371497e22c64bccdf3d171', class: "switch__checkbox-wrapper" }, h("input", { key: '24b4c04eee28a9640260836a00a847b0a6744617', type: "checkbox", hidden: true, name: this.name, disabled: this.disabled, checked: this.internalChecked, value: `${this.value}` }), h("div", { key: '5f17e47a97120c6832ce701056bafa5f83edbf6f', class: `switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}` }))), h("div", { key: '571c55c5aa8bd119b9ee32a5083198335bfb28f6', class: `switch__label-wrapper ${this.disabled ? 'disabled' : ''}` }, h("label", { key: '902b816c123bd9e5d1d1b0357bcfa9819b66fbed', htmlFor: "switch" }, h("slot", { key: '6c7e98eb86b493e3bdd0fd7596c3d3ada901c3aa', onSlotchange: () => this.toggleLabelGap() })))));
     }
     static get formAssociated() { return true; }
     get el() { return this; }

package/dist/components/ifx-switch.js.map

@@ -1 +1 @@
-{"file":"ifx-switch.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/switch/switch.scss?tag=ifx-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n/* switch.css */\n:host {\n  display: inline-block;\n  user-select: none;\n}\n\n.container {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  &.gap {\n    gap: tokens.$ifxSpace200;\n  }\n}\n\n\n.switch__checkbox-container {\n  padding: tokens.$ifxSpace50;\n  display: flex;\n  align-items: center;\n  position: relative;\n  // Subtracting padding size from both height and width\n  width: (tokens.$ifxSpace500)-8px;\n  height: 16px;\n  background-color: tokens.$ifxColorBaseWhite;\n  border: 1px solid tokens.$ifxColorEngineering500;\n  border-radius: 20px;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n  outline: none;\n\n  &:focus {\n    outline: 4px solid tokens.$ifxColorOcean500;\n    outline-offset: 2px;\n  }\n\n  &:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: 2px solid tokens.$ifxColorOcean500;\n    outline-offset: 2px;\n  }\n\n  &.disabled {\n    cursor: default;\n    border-color: tokens.$ifxColorEngineering300;\n  }\n\n\n}\n\n\n.switch__label-wrapper {\n\n  & label { \n    &:hover { \n      cursor: pointer;\n    }\n  }\n\n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n  }\n}\n\n\n.switch__checkbox-wrapper {\n\n  .switch {\n    // position: absolute;\n    width: tokens.$ifxSpace200;\n    height: tokens.$ifxSpace200;\n    background-color: tokens.$ifxColorEngineering500;\n    border-radius: 50%;\n    transition: transform 0.3s ease, background-color 0.3s ease;\n\n    &.disabled {\n      background-color: tokens.$ifxColorEngineering300;\n      border-color: tokens.$ifxColorEngineering300;\n      cursor: default;\n    }\n  }\n\n  .switch.checked {\n    transform: translateX(16px);\n    background-color: tokens.$ifxColorBaseWhite;\n\n    &.disabled {\n      cursor: default;\n    }\n\n  }\n\n}\n\n.switch__checkbox-container:hover .toggle-switch {\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n}\n\n\n\n.switch__checkbox-container.checked {\n  background-color: tokens.$ifxColorOcean500;\n  border-color: tokens.$ifxColorOcean500;\n\n  &.disabled {\n    background-color: tokens.$ifxColorEngineering300;\n    border-color: tokens.$ifxColorEngineering300;\n    cursor: default;\n  }\n}","import { AttachInternals, Method } from '@stencil/core';\nimport { Component, Prop, State, Watch, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-switch',\n  styleUrl: 'switch.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class Switch {\n  @Prop() checked: boolean = false;\n  @Prop() name: string = '';\n  @Prop() disabled: boolean = false;\n  @Prop() value: string;\n  @State() internalChecked: boolean = false;\n\n  @AttachInternals() internals: ElementInternals;\n\n  @Element() el: HTMLIfxSwitchElement;\n\n  @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter<boolean>;\n\n  @Method()\n  async isChecked(): Promise<boolean> {\n    return this.internalChecked;\n  }\n\n  componentWillLoad() {\n    this.internalChecked = this.checked;\n  }\n  \n\n  toggleLabelGap() {\n    const slot = this.el.shadowRoot.querySelector('slot');\n    const container = this.el.shadowRoot.querySelector('.container');\n    if (slot.assignedNodes().length) {\n      container.classList.add('gap')\n    } else { \n      container.classList.remove('gap')\n    }\n  }\n  \n  async componentDidLoad() {\n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-switch', await framework)\n    }\n    this.toggleLabelGap();\n  }\n    \n  @Watch('checked')\n  valueChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.internalChecked = newValue;\n    }\n  }\n\n  toggleSwitch() {\n    if (this.disabled) return;\n    this.internalChecked = !this.internalChecked;\n\n    if (this.internalChecked) {\n      if (this.value !== undefined) {\n        this.internals.setFormValue(this.value);\n      } else {\n        this.internals.setFormValue(\"on\")\n      }\n    } else {\n      this.internals.setFormValue(null)\n    }\n\n    this.ifxChange.emit(this.internalChecked);\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (this.disabled) return;\n    // If the pressed key is either 'Enter' or 'Space' \n    if (event.key === 'Enter' || event.key === ' ') {\n      this.toggleSwitch();\n    }\n  }\n\n  /**\n   * Callback for form association.\n   * Called whenever the form is reset.\n   */\n  formResetCallback() {\n    this.internals.setFormValue(null);\n  }\n\n  render() {\n    return (\n      <div\n        class=\"container\"\n        role=\"switch\"\n        aria-checked={this.internalChecked ? 'true' : 'false'}\n        aria-disabled={this.disabled ? 'true' : 'false'}\n        aria-labelledby=\"switch-label\"\n        onClick={() => this.toggleSwitch()}\n        onKeyDown={(event) => this.handleKeyDown(event)}\n        >\n        {/* Checkbox */}\n        <div \n          class={`switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`}\n          tabindex=\"0\"\n        >\n          <div class=\"switch__checkbox-wrapper\">\n            <input type=\"checkbox\" hidden\n              name={this.name}\n              disabled={this.disabled}\n              checked={this.internalChecked}\n              value={`${this.value}`} />\n            <div class={`switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`} />\n          </div>\n        </div >\n\n        {/* Label */}\n        <div class={`switch__label-wrapper ${this.disabled ? 'disabled' : ''}`} >\n          <label htmlFor=\"switch\">\n            <slot onSlotchange={() => this.toggleLabelGap()} />\n          </label>\n        </div>\n      </div>\n    )\n\n  }\n}\n"],"version":3}
+{"file":"ifx-switch.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/switch/switch.scss?tag=ifx-switch&encapsulation=shadow","src/components/switch/switch.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n/* switch.css */\n:host {\n  display: inline-block;\n  user-select: none;\n}\n\n.container {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  &.gap {\n    gap: tokens.$ifxSpace200;\n  }\n}\n\n\n.switch__checkbox-container {\n  padding: tokens.$ifxSpace50;\n  display: flex;\n  align-items: center;\n  position: relative;\n  // Subtracting padding size from both height and width\n  width: (tokens.$ifxSpace500)-8px;\n  height: 16px;\n  background-color: tokens.$ifxColorBaseWhite;\n  border: 1px solid tokens.$ifxColorEngineering500;\n  border-radius: 20px;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n  outline: none;\n\n  &:focus {\n    outline: 4px solid tokens.$ifxColorOcean500;\n    outline-offset: 2px;\n  }\n\n  &:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: 2px solid tokens.$ifxColorOcean500;\n    outline-offset: 2px;\n  }\n\n  &.disabled {\n    cursor: default;\n    border-color: tokens.$ifxColorEngineering300;\n  }\n\n\n}\n\n\n.switch__label-wrapper {\n\n  & label { \n    &:hover { \n      cursor: pointer;\n    }\n  }\n\n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n  }\n}\n\n\n.switch__checkbox-wrapper {\n\n  .switch {\n    // position: absolute;\n    width: tokens.$ifxSpace200;\n    height: tokens.$ifxSpace200;\n    background-color: tokens.$ifxColorEngineering500;\n    border-radius: 50%;\n    transition: transform 0.3s ease, background-color 0.3s ease;\n\n    &.disabled {\n      background-color: tokens.$ifxColorEngineering300;\n      border-color: tokens.$ifxColorEngineering300;\n      cursor: default;\n    }\n  }\n\n  .switch.checked {\n    transform: translateX(16px);\n    background-color: tokens.$ifxColorBaseWhite;\n\n    &.disabled {\n      cursor: default;\n    }\n\n  }\n\n}\n\n.switch__checkbox-container:hover .toggle-switch {\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n}\n\n\n\n.switch__checkbox-container.checked {\n  background-color: tokens.$ifxColorOcean500;\n  border-color: tokens.$ifxColorOcean500;\n\n  &.disabled {\n    background-color: tokens.$ifxColorEngineering300;\n    border-color: tokens.$ifxColorEngineering300;\n    cursor: default;\n  }\n}","import { AttachInternals, Method } from '@stencil/core';\nimport { Component, Prop, State, Watch, h, Event, EventEmitter, Element } from '@stencil/core';\nimport { trackComponent } from '../../global/utils/tracking'; \nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\n\n@Component({\n  tag: 'ifx-switch',\n  styleUrl: 'switch.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class Switch {\n  @Prop() checked: boolean = false;\n  @Prop() name: string = '';\n  @Prop() disabled: boolean = false;\n  @Prop() value: string;\n  @State() internalChecked: boolean = false;\n\n  @AttachInternals() internals: ElementInternals;\n\n  @Element() el: HTMLIfxSwitchElement;\n\n  @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter<boolean>;\n\n  @Method()\n  async isChecked(): Promise<boolean> {\n    return this.internalChecked;\n  }\n\n  componentWillLoad() {\n    this.internalChecked = this.checked;\n  }\n  \n\n  toggleLabelGap() {\n    const slot = this.el.shadowRoot.querySelector('slot');\n    const container = this.el.shadowRoot.querySelector('.container');\n    if (slot.assignedNodes().length) {\n      container.classList.add('gap')\n    } else { \n      container.classList.remove('gap')\n    }\n  }\n  \n  async componentDidLoad() {\n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-switch', await framework)\n    }\n    this.toggleLabelGap();\n  }\n    \n  @Watch('checked')\n  valueChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.internalChecked = newValue;\n    }\n  }\n\n  toggleSwitch() {\n    if (this.disabled) return;\n    this.internalChecked = !this.internalChecked;\n\n    if (this.internalChecked) {\n      if (this.value !== undefined) {\n        this.internals.setFormValue(this.value);\n      } else {\n        this.internals.setFormValue(\"on\")\n      }\n    } else {\n      this.internals.setFormValue(null)\n    }\n\n    this.ifxChange.emit(this.internalChecked);\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (this.disabled) return;\n    // If the pressed key is either 'Enter' or 'Space' \n    if (event.key === 'Enter' || event.key === ' ') {\n      this.toggleSwitch();\n    }\n  }\n\n  /**\n   * Callback for form association.\n   * Called whenever the form is reset.\n   */\n  formResetCallback() {\n    this.internals.setFormValue(null);\n  }\n\n  render() {\n    return (\n      <div\n        class=\"container\"\n        role=\"switch\"\n        aria-checked={this.internalChecked ? 'true' : 'false'}\n        aria-label={this.name}\n        onClick={() => this.toggleSwitch()}\n        onKeyDown={(event) => this.handleKeyDown(event)}\n        >\n        {/* Checkbox */}\n        <div \n          class={`switch__checkbox-container ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`}\n          tabindex=\"0\"\n        >\n          <div class=\"switch__checkbox-wrapper\">\n            <input type=\"checkbox\" hidden\n              name={this.name}\n              disabled={this.disabled}\n              checked={this.internalChecked}\n              value={`${this.value}`} />\n            <div class={`switch ${this.internalChecked ? 'checked' : ''} ${this.disabled ? 'disabled' : ''}`} />\n          </div>\n        </div >\n\n        {/* Label */}\n        <div class={`switch__label-wrapper ${this.disabled ? 'disabled' : ''}`} >\n          <label htmlFor=\"switch\">\n            <slot onSlotchange={() => this.toggleLabelGap()} />\n          </label>\n        </div>\n      </div>\n    )\n\n  }\n}\n"],"version":3}

package/dist/components/ifx-tab.js

@@ -14,7 +14,7 @@ const IfxTab$1 = /*@__PURE__*/ proxyCustomElement(class IfxTab extends H {
         this.tabHeaderChange.emit(this.header);
     }
     render() {
-        return h("slot", { key: 'c7a8823e3823036920aef997ea359efee1cd8cc8' });
+        return h("slot", { key: 'bedec1035ad52a5601082ad5c1f75559384ccc7c' });
     }
     get el() { return this; }
     static get style() { return tabCss; }

package/dist/components/ifx-table.js

@@ -4,14 +4,14 @@ import { d as detectFramework, t as trackComponent } from './p-DcmcuUOA.js';
 import { i as isNestedInIfxComponent } from './p-Bw2fh5LT.js';
 import { c as createGrid } from './p-9UDg_bQZ.js';
 import { d as defineCustomElement$a } from './p-CSFUrFeR.js';
-import { d as defineCustomElement$9 } from './p-CqzFm2Ow.js';
-import { d as defineCustomElement$8 } from './p-C0tC8p0l.js';
-import { d as defineCustomElement$7 } from './p-DUpz5Fu_.js';
-import { d as defineCustomElement$6 } from './p-Bq-GdSe7.js';
-import { d as defineCustomElement$5 } from './p-r7hBylnC.js';
-import { d as defineCustomElement$4 } from './p-CLgcoxeD.js';
-import { d as defineCustomElement$3 } from './p-CssgRUtq.js';
-import { d as defineCustomElement$2 } from './p-VdirQ-rJ.js';
+import { d as defineCustomElement$9 } from './p-BfmQxZSi.js';
+import { d as defineCustomElement$8 } from './p-BrOTS__r.js';
+import { d as defineCustomElement$7 } from './p-B2j8iujQ.js';
+import { d as defineCustomElement$6 } from './p-BctmSAbW.js';
+import { d as defineCustomElement$5 } from './p-B-erGWs9.js';
+import { d as defineCustomElement$4 } from './p-BUTrT3Q6.js';
+import { d as defineCustomElement$3 } from './p-B6Fm7iTY.js';
+import { d as defineCustomElement$2 } from './p-ADIPRswj.js';
 
 class ButtonCellRenderer {
     init(params) {
@@ -530,12 +530,12 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends H {
             };
         }
         const filterClass = this.filterOrientation === 'topbar' ? 'topbar-layout' : 'sidebar-layout';
-        return (h(Host, { key: '57d58d8d22bb387b9c43534dd3a401177d93f398' }, h("div", { key: '078da88d6909477b0e9d6f05e5ef43f7f11dccd6', class: "table-container" }, this.filterOrientation === 'sidebar' && (h("div", { key: '3631ac354f20a7f2d8ca37a778fbbdacdaf3a7dc', class: "sidebar-btn" }, h("ifx-button", { key: 'da620be61a292844364371a9d216823a506250df', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, h("ifx-icon", { key: 'a691538e44adada86749955c3492a74140023973', icon: "cross-16" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), h("div", { key: '6f2f19292c24e976d50e2dddbd89e10f37419505', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (h("div", { key: '202f8bccf72625c7f82d1a4fb2afebad813d3da5', class: "sidebar-container" }, h("div", { key: '6f86580fea19787e0fa79c8b63a1ff20bb4f7c5f', class: "filters-title-container" }, h("span", { key: '5df891cbef09a691e8a39444d480789cb17eb1cb', class: "filters-title" }, "Filters")), h("div", { key: '72cc704fa2c0b029657958d2e523733cb37e6c7d', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: '5e81b3b2d8e54add2612b0d4263630740ef43b1f', name: "sidebar-filter" }))))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (h("div", { key: '2ed6b7d3d36dcb79368af9a103595350967779ac', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: '80411817924fe75c67dce87f01fbfdacd7743f51', name: "topbar-filter" })))), h("div", { key: '0989b64e4cc8d5b2ac03b7dabc5bf57647b040f4', class: "table-pagination-wrapper" }, h("div", { key: '7c1b71032d9220d44f55cd83cc9b45ba0957fcf3', class: "filter-chips" }, this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (Object.keys(this.currentFilters).map(name => {
+        return (h(Host, { key: 'fb906655167ddedb80def7cfb3eec28e58ecd0d5' }, h("div", { key: 'eea988c62f6839c0519763705909e386551c63c4', class: "table-container" }, this.filterOrientation === 'sidebar' && (h("div", { key: '548e6e19fd2e250eae6ccc0a8254f91ff4777640', class: "sidebar-btn" }, h("ifx-button", { key: 'b3a2a09589df2fcc79f542115f84a26321697b90', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, h("ifx-icon", { key: '3c8e715c78928df34e0221b3c6d7707b91e9c55f', icon: "cross-16" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), h("div", { key: 'f8be6a37a02130881ffadb33a3ffdf6a5917732f', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (h("div", { key: 'c51a22c0771e01f82e27c33dc3b8652f8bd113cc', class: "sidebar-container" }, h("div", { key: 'd5a488b075f98e65df89d52d83ed4d2f0d28f9c7', class: "filters-title-container" }, h("span", { key: '1715722349bdfcfef4e258b031a3ffaef6a04bb2', class: "filters-title" }, "Filters")), h("div", { key: '82b88eaefd81471fc3f737b1cb8d3a5c4b3d7daf', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: '94c9f07686c925aca2038c5d377be13dbcca08d2', name: "sidebar-filter" }))))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (h("div", { key: 'c005b97bc68994e45b72087629affc14752b98da', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: 'a597fe719c81a9a34a18199eaf5bc4233eefd40f', name: "topbar-filter" })))), h("div", { key: '0b0d059e7f7797cdccceb6e5972d42bb5cf0d264', class: "table-pagination-wrapper" }, h("div", { key: 'd4aeca558ea68c5a14a0df4487005348e43d16c5', class: "filter-chips" }, this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (Object.keys(this.currentFilters).map(name => {
             const filter = this.currentFilters[name];
             const filterValues = filter.filterValues;
             const isMultiSelect = filter.type !== 'text';
             return filterValues.length > 0 ? (h("ifx-chip", { placeholder: name, size: "large", variant: isMultiSelect ? "multi" : "single", readOnly: true, value: filterValues, key: name }, filterValues.map(filterValue => (h("ifx-chip-item", { value: filterValue, selected: true, key: filterValue }, filterValue))))) : null;
-        })), this.filterOrientation !== 'none' && this.filterOrientation === 'sidebar' && this.showSidebarFilters && Object.keys(this.currentFilters).length > 0 && (h("ifx-button", { key: 'f359cc77668bfe2659ab4e957e5f829e37a696e5', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.handleResetButtonClick() }, h("ifx-icon", { key: 'c4b80ec2a98d8a7fb898964d91c5af0e111b9336', icon: "curved-arrow-left-16" }), "Reset all"))), this.filterOrientation !== 'none' && (h("div", { key: 'aa467b350336adb839975dbdb1e4c74573e420f8', class: "matching-results-container" }, h("span", { key: 'cff3d87ce4d72557d085ee95f4b44392dcc11c74', class: "matching-results-count" }, this.matchingResultsCount), h("span", { key: '608425fb602084d62dca782bc411b5ea499319a1', class: "matching-results-text" }, "matching results"))), h("div", { key: '715e5b6525452071148539e812c54da89cab4cf8', id: "table-wrapper", class: this.getTableClassNames() }, h("div", { key: '998c1175e1dacfa339c86efbec38976d7c367447', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, style: style, ref: (el) => this.container = el })), this.pagination ? h("ifx-pagination", { total: this.allRowData.length, "current-page": this.currentPage, "items-per-page": this.internalItemsPerPage }) : null)))));
+        })), this.filterOrientation !== 'none' && this.filterOrientation === 'sidebar' && this.showSidebarFilters && Object.keys(this.currentFilters).length > 0 && (h("ifx-button", { key: 'b888feff25c69793865808001c15f26a3812d724', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.handleResetButtonClick() }, h("ifx-icon", { key: 'b99afab0bd7f94af80710ea46b4f607704f3c41c', icon: "curved-arrow-left-16" }), "Reset all"))), this.filterOrientation !== 'none' && (h("div", { key: '2664799a64bb5643b1e1ad3e6e670c28d38bf8d0', class: "matching-results-container" }, h("span", { key: 'c2a8dbb58eefe88452f2118f6a6d770622ce9351', class: "matching-results-count" }, this.matchingResultsCount), h("span", { key: 'e41adb3796ead5fad432406f562ec844145589f8', class: "matching-results-text" }, "matching results"))), h("div", { key: 'f5ba45475d3798c984f242ee157a56b0155665c7', id: "table-wrapper", class: this.getTableClassNames() }, h("div", { key: 'ed0ce2dec6f58b4a9621410aa33319c552c4dcaa', id: `ifxTable-${this.uniqueKey}`, class: `ifx-ag-grid ${this.variant === 'zebra' ? 'zebra' : ""}`, style: style, ref: (el) => this.container = el })), this.pagination ? h("ifx-pagination", { total: this.allRowData.length, "current-page": this.currentPage, "items-per-page": this.internalItemsPerPage }) : null)))));
     }
     hasButtonCol() {
         return this.getColData().some(column => column.field === 'button');

package/dist/components/ifx-tabs.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
 import { d as detectFramework, t as trackComponent } from './p-DcmcuUOA.js';
 import { i as isNestedInIfxComponent } from './p-Bw2fh5LT.js';
-import { d as defineCustomElement$2 } from './p-Bq-GdSe7.js';
+import { d as defineCustomElement$2 } from './p-BctmSAbW.js';
 
 const tabsCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:flex}.tabs{display:flex;font-family:var(--ifx-font-family);width:100%}.tabs.horizontal{flex-direction:column}.tabs.vertical{flex-direction:row}.tabs-list{display:flex;list-style:none;padding:0;margin:0;position:relative;font-weight:600}.tabs-list:focus-within .active-border{display:none}.active-border{content:\"\";position:absolute;transition:left 0.3s ease-in-out, top 0.3s ease-in-out, height 0.3s ease-in-out}.tabs.horizontal .active-border{bottom:0;left:0;height:2px;background-color:#0A8276}.tabs.vertical .tabs-list{flex-direction:column;border-bottom:none}.tabs.vertical .tab-content{padding-top:0px;padding-left:32px}.tabs:not(.vertical) .tab-item.full-width{flex:1}.tab-item{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 16px;cursor:pointer;position:relative}.tab-item.icon__right{flex-direction:row-reverse;justify-content:flex-end}.tab-item:hover{color:#0A8276}.tab-item:active,.tab-item.active{color:#0A8276}.tab-item:focus,.tab-item.focus{outline:none;border-radius:1px;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.tab-item:focus+.active-border,.tab-item.focus+.active-border{display:none}.tab-item.disabled{color:#BFBBBB;pointer-events:none}.tabs.vertical .tab-item{border-right:2px solid transparent;min-width:7em}.tabs.vertical .active-border{left:0;top:0;width:2px;background-color:#0A8276}.tab-content{padding-top:24px;padding-left:0px;flex-grow:1}.tabs.small .tab-item{font-size:0.875rem}";
 
@@ -210,9 +210,9 @@ const IfxTabs$1 = /*@__PURE__*/ proxyCustomElement(class IfxTabs extends H {
     }
     render() {
         var _a;
-        return (h("div", { key: '8f3a8648448229fad10b8f318fb936a6da6377af', "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation}` }, h("ul", { key: 'b4150af5a4acc16fd8900273fea4848b71662fd4', role: "tablist", class: "tabs-list" }, (_a = this.tabObjects) === null || _a === void 0 ? void 0 :
+        return (h("div", { key: '2704774f9767516a8786a3eaf9f98d743924f13b', "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation}` }, h("ul", { key: '95ddd99c3d54a94bcde1f3988c8b0e29c3cd59ea', role: "tablist", class: "tabs-list" }, (_a = this.tabObjects) === null || _a === void 0 ? void 0 :
             _a.map((tab, index) => (h("li", { class: this.getTabItemClass(index), ref: (el) => (this.tabHeaderRefs[index] = el), onMouseDown: (event) => event.preventDefault(), onClick: () => this.handleClick(tab, index), "aria-selected": index === this.internalActiveTabIndex ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : 'false', role: "tab" }, (tab === null || tab === void 0 ? void 0 : tab.icon) ? h("ifx-icon", { icon: tab.icon }) : '', tab === null || tab === void 0 ? void 0 :
-                tab.header))), h("div", { key: '35af33210885982907746c650c9b1e94f521fa7c', class: "active-border" })), h("div", { key: '1fb4dcc61193e1806d581b3ca5190f2c7b953c0a', class: "tab-content" }, Array.from(this.tabObjects).map((_, index) => (h("div", { style: { display: index === this.internalActiveTabIndex ? 'block' : 'none' } }, h("slot", { name: `tab-${index}` })))))));
+                tab.header))), h("div", { key: '511b99c1418962ea2b589b16fcc05a4dd8fc3bb5', class: "active-border" })), h("div", { key: '8afd1be5a94bf685cf8fbe4e0ebfc97920b23716', class: "tab-content" }, Array.from(this.tabObjects).map((_, index) => (h("div", { style: { display: index === this.internalActiveTabIndex ? 'block' : 'none' } }, h("slot", { name: `tab-${index}` })))))));
     }
     get el() { return this; }
     static get watchers() { return {