@infineon/infineon-design-system-stencil 37.13.1--canary.1987.3a00aa50ac2f53008f1e351eabf4b0c340894bb9.0 → 37.14.0--canary.1964.3cf2aed10bf7a9753cdb7124879aa7e2c314bcf8.0

package/dist/infineon-design-system-stencil/p-b288ba34.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as t,a as r}from"./p-DS8meZSd.js";const s=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{position:relative}.sidebar__title{width:100%;height:fit-content;border-top:1px solid #EEEDED;padding:12px 0}.sidebar__title.no-top-border{border-top:none}.sidebar__title-label{height:20px;font:600 0.875rem/1.25rem "Source Sans 3";text-transform:uppercase;color:#575352;letter-spacing:3px}';const i=class{constructor(t){e(this,t)}render(){return t("div",{key:"c793d744377f6f42ab3bb06af308d618be5b61bc",class:"sidebar__title"},t("div",{key:"4bdab2724a633d02b02ef218ed3894bac28888ed",class:"sidebar__title-label"},t("slot",{key:"8945c7f1d9cdbde7465c121eef6e3c7f7217e9d1"})))}get el(){return r(this)}};i.style=s;export{i as ifx_sidebar_title};
-//# sourceMappingURL=p-b288ba34.entry.js.map

package/dist/infineon-design-system-stencil/p-b9a871a7.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as i,h as t,a as s}from"./p-DS8meZSd.js";import{d as a,t as r}from"./p-DcmcuUOA.js";import{i as n}from"./p-Bw2fh5LT.js";const h=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:block}.left-icon,.right-icon,.left-text,.right-text,.percentage-display{font-size:0.875rem;color:#575352;margin-left:8px}.left-icon.disabled,.right-icon.disabled,.left-text.disabled,.right-text.disabled,.percentage-display.disabled{color:#BFBBBB}.left-icon,.left-text{margin-right:8px}.right-icon,.right-text,.percentage-display{margin-left:8px}.ifx-slider{display:flex;align-items:center;padding:2px 16px;border-radius:9999px}.ifx-slider input[type=range]{-webkit-appearance:none;width:100%;height:4px;background:linear-gradient(to right, #0A8276 0%, #0A8276 var(--value-percent, 0%), #EEEDED var(--value-percent, 0%), #EEEDED 100%);outline:none;cursor:pointer;transition:0.2s}.ifx-slider input[type=range]:focus-visible{outline:2px solid #0A8276;outline-offset:4px}.ifx-slider input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#0A8276;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#0A8276;border-radius:50%;cursor:pointer;transition:box-shadow 0.2s}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb:hover{background:#08665C}.ifx-slider input[type=range]:not(:disabled)::-webkit-slider-thumb:active{background:#06534B}.ifx-slider input[type=range]:disabled{background:#BFBBBB;cursor:default}.ifx-slider input[type=range]:disabled::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#BFBBBB;border-radius:50%;cursor:default}.ifx-slider .range-slider__wrapper{position:relative;width:100%;height:4px;display:flex;align-items:center;justify-content:center;margin:0px 2px;background:linear-gradient(to right, #EEEDED 0%, #EEEDED var(--min-value-percent, 100%), #0A8276 var(--min-value-percent, 100%), #0A8276 var(--max-value-percent, 100%), #EEEDED var(--max-value-percent, 100%), #EEEDED 100%)}.ifx-slider .range-slider__wrapper:has(input[type=range]:disabled){background:#BFBBBB}.ifx-slider .range-slider__wrapper input[type=range]{position:absolute;pointer-events:none;background:none}.ifx-slider .range-slider__wrapper input[type=range]:focus-visible{outline:2px solid #0A8276;outline-offset:4px}.ifx-slider .range-slider__wrapper input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:none;pointer-events:auto;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider .range-slider__wrapper input[type=range]::-moz-range-thumb{-webkit-appearance:none;border:none;pointer-events:auto;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider .range-slider__wrapper input[type=range]::-ms-thumb{-webkit-appearance:none;border:none;pointer-events:auto;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider .range-slider__wrapper input[type=range]::-webkit-slider-runnable-track{-webkit-appearance:none;border:none;background:none;width:100%}.ifx-slider .range-slider__wrapper input[type=range]::-moz-range-track{-webkit-appearance:none;border:none;background:none;width:100%}';const l=class{constructor(t){e(this,t);this.ifxChange=i(this,"ifxChange",7);this.min=0;this.max=100;this.step=1;this.disabled=false;this.showPercentage=false;this.type="single";this.internalValue=0;this.percentage=0;this.internalMinValue=0;this.internalMaxValue=100}valueChanged(e){this.internalValue=e;this.updateValuePercent()}minValueChanged(e){this.internalMinValue=e;this.updateValuePercent()}maxValueChanged(e){this.internalMaxValue=e;this.updateValuePercent()}getRangeSliderWrapper(){const e=this.el.shadowRoot.querySelector(".range-slider__wrapper");return e}handleInputChangeOfRangeSlider(e){const i=e.target;if(parseFloat(this.maxInputRef.value)-parseFloat(this.minInputRef.value)<=0){if(i.id==="max-slider"){this.maxInputRef.value=this.minInputRef.value}else{this.minInputRef.value=this.maxInputRef.value}}if(i.id==="max-slider"){this.internalMaxValue=parseFloat(this.maxInputRef.value)}else{this.internalMinValue=parseFloat(this.minInputRef.value)}this.ifxChange.emit({minVal:this.internalMinValue,maxVal:this.internalMaxValue});this.updateValuePercent();this.updateZIndexIfRangeSlider(i.id)}handleOnMouseLeaveOfRangeSlider(e){const i=e.target;const t=this.getRangeSliderWrapper();if(i.id==="max-slider"){t.insertBefore(this.maxInputRef,this.minInputRef)}else{t.insertBefore(this.minInputRef,this.maxInputRef)}}calculatePercentageValue(){const e=(this.internalValue-this.min)*1;const i=this.max-this.min;this.percentage=+parseFloat(String(e/i*100)).toFixed(2)}handleInputChange(e){const i=e.target;this.internalValue=parseFloat(i.value);this.ifxChange.emit(this.internalValue);this.calculatePercentageValue();this.updateValuePercent()}roundToValidStep(e){const i=e-this.min;const t=i%this.step;if(t>=this.step/2){return this.min+i+(this.step-t)}else{return this.min+i-t}}updateValuePercent(){const e=this.max-this.min;if(this.type==="double"){if(this.minInputRef){const i=(this.roundToValidStep(this.internalMinValue)-this.min)*1;const t=i/e*100;this.minInputRef.parentElement.style.setProperty("--min-value-percent",`${t}%`)}if(this.maxInputRef){const i=(this.roundToValidStep(this.internalMaxValue)-this.min)*1;const t=i/e*100;this.maxInputRef.parentElement.style.setProperty("--max-value-percent",`${t}%`)}}else{if(this.inputRef){const e=(this.roundToValidStep(this.internalValue)-this.min)*1;const i=this.max-this.min;const t=e/i*100;this.inputRef.style.setProperty("--value-percent",`${t}%`)}}}updateZIndexIfRangeSlider(e=""){if(e==="max-slider"){this.minInputRef.style.zIndex="1";this.maxInputRef.style.zIndex="2"}else{this.minInputRef.style.zIndex="2";this.maxInputRef.style.zIndex="1"}}componentWillLoad(){if(this.value===undefined){this.internalValue=(this.max-this.min)/2}else{this.internalValue=Math.max(this.min,Math.min(this.max,this.value))}this.calculatePercentageValue();if(this.minValueHandle!==undefined)this.internalMinValue=this.minValueHandle;else this.internalMinValue=this.min;if(this.maxValueHandle!==undefined)this.internalMaxValue=this.maxValueHandle;else this.internalMaxValue=this.max}async componentDidLoad(){if(!n(this.el)){const e=a();r("ifx-slider",await e)}this.updateValuePercent()}render(){return t("div",{key:"c7dde2e37e54efe6feeb0619a785b4d3e48231ef",class:"ifx-slider"},this.leftText&&t("span",{key:"fdfc930b411e6d596a1eef73885135da82790b6c",class:`left-text`},this.leftText),this.leftIcon&&t("ifx-icon",{key:"bf8ead69cb07e8f833f666ab221226f36400f415",icon:this.leftIcon,class:`left-icon${this.disabled?" disabled":""}`}),this.type!=="double"?t("input",{type:"range",min:this.min,max:this.max,step:this.step,value:this.internalValue,disabled:this.disabled,ref:e=>this.inputRef=e,onInput:e=>this.handleInputChange(e),"aria-label":"Slider","aria-valuemin":this.min,"aria-valuemax":this.max,"aria-valuenow":this.internalValue,"aria-disabled":this.disabled?"true":"false"}):t("div",{class:"range-slider__wrapper","aria-label":this.ariaLabel,role:"group"},t("input",{id:"min-slider",type:"range",min:this.min,max:this.max,step:this.step,value:this.internalMinValue,disabled:this.disabled,ref:e=>this.minInputRef=e,onInput:e=>this.handleInputChangeOfRangeSlider(e),onMouseUp:e=>this.handleOnMouseLeaveOfRangeSlider(e),"aria-label":"Minimum value slider","aria-valuemin":this.min,"aria-valuemax":this.max,"aria-valuenow":this.internalMinValue,"aria-disabled":this.disabled?"true":"false"}),t("input",{id:"max-slider",type:"range",min:this.min,max:this.max,step:this.step,value:this.internalMaxValue,disabled:this.disabled,ref:e=>this.maxInputRef=e,onInput:e=>this.handleInputChangeOfRangeSlider(e),onMouseUp:e=>this.handleOnMouseLeaveOfRangeSlider(e),"aria-label":"Maximum value slider","aria-valuemin":this.min,"aria-valuemax":this.max,"aria-valuenow":this.internalMaxValue,"aria-disabled":this.disabled?"true":"false"})),this.rightIcon&&t("ifx-icon",{key:"5bb8db2331382af6dd0676c87abc9ff4b2b5fc44",icon:this.rightIcon,class:`right-icon${this.disabled?" disabled":""}`}),this.rightText&&t("span",{key:"8d3ecbeacb96ae8ac7f77674f12dc188808a0608",class:`right-text${this.disabled?" disabled":""}`},this.rightText),this.showPercentage&&this.type!=="double"&&t("span",{key:"b5a73e4a520a00c402917f477dabe28c04302710",class:`percentage-display${this.disabled?" disabled":""}`},this.percentage,"%"))}get el(){return s(this)}static get watchers(){return{value:["valueChanged"],minValueHandle:["minValueChanged"],maxValueHandle:["maxValueChanged"]}}};l.style=h;export{l as ifx_slider};
-//# sourceMappingURL=p-b9a871a7.entry.js.map

package/dist/infineon-design-system-stencil/p-b9a871a7.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["sliderCss","IfxSlider","constructor","hostRef","this","min","max","step","disabled","showPercentage","type","internalValue","percentage","internalMinValue","internalMaxValue","valueChanged","newValue","updateValuePercent","minValueChanged","maxValueChanged","getRangeSliderWrapper","rangeSliderWrapper","el","shadowRoot","querySelector","handleInputChangeOfRangeSlider","event","target","parseFloat","maxInputRef","value","minInputRef","id","ifxChange","emit","minVal","maxVal","updateZIndexIfRangeSlider","handleOnMouseLeaveOfRangeSlider","sliderWrapper","insertBefore","calculatePercentageValue","num","den","String","toFixed","handleInputChange","roundToValidStep","relativeValue","remainder","minPercent","parentElement","style","setProperty","maxPercent","inputRef","targetId","zIndex","componentWillLoad","undefined","Math","minValueHandle","maxValueHandle","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","render","h","key","class","leftText","leftIcon","icon","ref","onInput","ariaLabel","role","onMouseUp","rightIcon","rightText"],"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}"],"mappings":"wIAAA,MAAMA,EAAY,ojG,MCULC,EAAS,MALtB,WAAAC,CAAAC,G,+CAMUC,KAAGC,IAAW,EACdD,KAAGE,IAAW,IACdF,KAAIG,KAAW,EAIfH,KAAQI,SAAY,MACpBJ,KAAcK,eAAY,MAK1BL,KAAIM,KAAwB,SAE3BN,KAAaO,cAAW,EACxBP,KAAUQ,WAAW,EACrBR,KAAgBS,iBAAW,EAC3BT,KAAgBU,iBAAW,GAwOrC,CA9NC,YAAAC,CAAaC,GACXZ,KAAKO,cAAgBK,EACrBZ,KAAKa,oB,CAIP,eAAAC,CAAgBF,GACdZ,KAAKS,iBAAmBG,EACxBZ,KAAKa,oB,CAIP,eAAAE,CAAgBH,GACdZ,KAAKU,iBAAmBE,EACxBZ,KAAKa,oB,CAGP,qBAAAG,GACE,MAAMC,EAAqBjB,KAAKkB,GAAGC,WAAWC,cAAc,0BAC5D,OAAOH,C,CAGT,8BAAAI,CAA+BC,GAC7B,MAAMC,EAASD,EAAMC,OACrB,GAAGC,WAAWxB,KAAKyB,YAAYC,OAASF,WAAWxB,KAAK2B,YAAYD,QAAU,EAAG,CAC/E,GAAGH,EAAOK,KAAO,aAAc,CAC7B5B,KAAKyB,YAAYC,MAAQ1B,KAAK2B,YAAYD,K,KACvC,CACH1B,KAAK2B,YAAYD,MAAQ1B,KAAKyB,YAAYC,K,EAG9C,GAAGH,EAAOK,KAAO,aAAc,CAC7B5B,KAAKU,iBAAmBc,WAAWxB,KAAKyB,YAAYC,M,KAC/C,CACL1B,KAAKS,iBAAmBe,WAAWxB,KAAK2B,YAAYD,M,CAEtD1B,KAAK6B,UAAUC,KAAK,CAACC,OAAQ/B,KAAKS,iBAAkBuB,OAAQhC,KAAKU,mBACjEV,KAAKa,qBACLb,KAAKiC,0BAA0BV,EAAOK,G,CAGxC,+BAAAM,CAAgCZ,GAC9B,MAAMC,EAASD,EAAMC,OACrB,MAAMY,EAAgBnC,KAAKgB,wBAC3B,GAAGO,EAAOK,KAAO,aAAc,CAC7BO,EAAcC,aAAapC,KAAKyB,YAAazB,KAAK2B,Y,KAC7C,CACLQ,EAAcC,aAAapC,KAAK2B,YAAa3B,KAAKyB,Y,EAItD,wBAAAY,GACE,MAAMC,GAAOtC,KAAKO,cAAgBP,KAAKC,KAAO,EAC9C,MAAMsC,EAAMvC,KAAKE,IAAMF,KAAKC,IAC5BD,KAAKQ,YAAcgB,WAAWgB,OAAQF,EAAIC,EAAK,MAAME,QAAQ,E,CAG/D,iBAAAC,CAAkBpB,GAChB,MAAMC,EAASD,EAAMC,OACrBvB,KAAKO,cAAgBiB,WAAWD,EAAOG,OACvC1B,KAAK6B,UAAUC,KAAK9B,KAAKO,eACzBP,KAAKqC,2BACLrC,KAAKa,oB,CAGC,gBAAA8B,CAAiBjB,GACvB,MAAMkB,EAAgBlB,EAAQ1B,KAAKC,IACnC,MAAM4C,EAAYD,EAAgB5C,KAAKG,KACvC,GAAI0C,GAAa7C,KAAKG,KAAO,EAAG,CAC9B,OAAOH,KAAKC,IAAM2C,GAAiB5C,KAAKG,KAAO0C,E,KAC1C,CACL,OAAO7C,KAAKC,IAAM2C,EAAgBC,C,EAItC,kBAAAhC,GACE,MAAM0B,EAAMvC,KAAKE,IAAMF,KAAKC,IAC5B,GAAGD,KAAKM,OAAS,SAAS,CACxB,GAAIN,KAAK2B,YAAa,CACpB,MAAMW,GAAOtC,KAAK2C,iBAAiB3C,KAAKS,kBAAoBT,KAAKC,KAAO,EACxE,MAAM6C,EAAcR,EAAIC,EAAO,IAC/BvC,KAAK2B,YAAYoB,cAAcC,MAAMC,YAAY,sBAAuB,GAAGH,K,CAG7E,GAAI9C,KAAKyB,YAAa,CACpB,MAAMa,GAAOtC,KAAK2C,iBAAiB3C,KAAKU,kBAAoBV,KAAKC,KAAO,EACxE,MAAMiD,EAAcZ,EAAIC,EAAO,IAC/BvC,KAAKyB,YAAYsB,cAAcC,MAAMC,YAAY,sBAAuB,GAAGC,K,MAGxE,CAEL,GAAIlD,KAAKmD,SAAU,CACjB,MAAMb,GAAOtC,KAAK2C,iBAAiB3C,KAAKO,eAAiBP,KAAKC,KAAO,EACrE,MAAMsC,EAAMvC,KAAKE,IAAMF,KAAKC,IAC5B,MAAMO,EAAc8B,EAAIC,EAAO,IAC/BvC,KAAKmD,SAASH,MAAMC,YAAY,kBAAmB,GAAGzC,K,GAQ5D,yBAAAyB,CAA0BmB,EAAmB,IAC3C,GAAIA,IAAa,aAAc,CAC7BpD,KAAK2B,YAAYqB,MAAMK,OAAS,IAChCrD,KAAKyB,YAAYuB,MAAMK,OAAS,G,KAC3B,CACLrD,KAAK2B,YAAYqB,MAAMK,OAAS,IAChCrD,KAAKyB,YAAYuB,MAAMK,OAAS,G,EAIpC,iBAAAC,GACE,GAAGtD,KAAK0B,QAAU6B,UAAW,CAC3BvD,KAAKO,eAAiBP,KAAKE,IAAIF,KAAKC,KAAO,C,KACtC,CACLD,KAAKO,cAAgBiD,KAAKtD,IAAIF,KAAKC,IAAKuD,KAAKvD,IAAID,KAAKE,IAAKF,KAAK0B,O,CAGlE1B,KAAKqC,2BAEL,GAAGrC,KAAKyD,iBAAmBF,UAAWvD,KAAKS,iBAAmBT,KAAKyD,oBAC9DzD,KAAKS,iBAAmBT,KAAKC,IAClC,GAAGD,KAAK0D,iBAAmBH,UAAWvD,KAAKU,iBAAmBV,KAAK0D,oBAC9D1D,KAAKU,iBAAmBV,KAAKE,G,CAGpC,sBAAMyD,GACJ,IAAIC,EAAuB5D,KAAKkB,IAAK,CACnC,MAAM2C,EAAYC,IAClBC,EAAe,mBAAoBF,E,CAErC7D,KAAKa,oB,CAIP,MAAAmD,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,cACRnE,KAAKoE,UACJH,EAAM,QAAAC,IAAA,2CAAAC,MAAO,aACVnE,KAAKoE,UAGTpE,KAAKqE,UACJJ,EAAA,YAAAC,IAAA,2CAAUI,KAAMtE,KAAKqE,SAAUF,MAAO,YAAYnE,KAAKI,SAAW,YAAc,OAG/EJ,KAAKM,OAAS,SACb2D,EAAA,SACE3D,KAAK,QACLL,IAAKD,KAAKC,IACVC,IAAKF,KAAKE,IACVC,KAAMH,KAAKG,KACXuB,MAAO1B,KAAKO,cACZH,SAAUJ,KAAKI,SACfmE,IAAMrD,GAAQlB,KAAKmD,SAAWjC,EAC9BsD,QAAUlD,GAAUtB,KAAK0C,kBAAkBpB,GAChC,sBAAQ,gBACJtB,KAAKC,IAAG,gBACRD,KAAKE,IAAG,gBACRF,KAAKO,cACL,gBAAAP,KAAKI,SAAW,OAAS,UAG1C6D,EAAK,OAAAE,MAAQ,wBAAoC,aAAAnE,KAAKyE,UAAWC,KAAK,SACpET,EACE,SAAArC,GAAG,aACHtB,KAAK,QACLL,IAAKD,KAAKC,IACVC,IAAKF,KAAKE,IACVC,KAAMH,KAAKG,KACXuB,MAAO1B,KAAKS,iBACZL,SAAUJ,KAAKI,SACfmE,IAAMrD,GAAQlB,KAAK2B,YAAcT,EACjCsD,QAAUlD,GAAUtB,KAAKqB,+BAA+BC,GACxDqD,UAAYrD,GAAUtB,KAAKkC,gCAAgCZ,GAAM,aACtD,uBAAsB,gBAClBtB,KAAKC,IAAG,gBACRD,KAAKE,IACL,gBAAAF,KAAKS,iBAAgB,gBAAiBT,KAAKI,SAAW,OAAS,UAEhF6D,EACE,SAAArC,GAAG,aACHtB,KAAK,QACLL,IAAKD,KAAKC,IACVC,IAAKF,KAAKE,IACVC,KAAMH,KAAKG,KACXuB,MAAO1B,KAAKU,iBACZN,SAAUJ,KAAKI,SACfmE,IAAMrD,GAAQlB,KAAKyB,YAAcP,EACjCsD,QAAUlD,GAAUtB,KAAKqB,+BAA+BC,GACxDqD,UAAYrD,GAAUtB,KAAKkC,gCAAgCZ,GAAM,aACtD,uBACI,gBAAAtB,KAAKC,IACL,gBAAAD,KAAKE,IAAG,gBACRF,KAAKU,iBAAgB,gBACrBV,KAAKI,SAAW,OAAS,WAI/CJ,KAAK4E,WACJX,EAAA,YAAAC,IAAA,2CAAUI,KAAMtE,KAAK4E,UAAWT,MAAO,aAAanE,KAAKI,SAAW,YAAc,OAEnFJ,KAAK6E,WACJZ,EAAA,QAAAC,IAAA,2CAAMC,MAAO,aAAanE,KAAKI,SAAW,YAAc,MACrDJ,KAAK6E,WAIT7E,KAAKK,gBAAmBL,KAAKM,OAAS,UACrC2D,EAAA,QAAAC,IAAA,2CACEC,MAAO,qBAAqBnE,KAAKI,SAAW,YAAc,MAEzDJ,KAAKQ,WAAU,K","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-c51df9e9.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as t}from"./p-DS8meZSd.js";const r=':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 p=class{constructor(t){e(this,t);this.complete=false;this.disabled=false;this.error=false;this.lastStep=false;this.stepId=1;this.stepperState={activeStep:1,showStepNumber:false,variant:"default",indicatorPosition:"left"};this.clickable=false}onStepChange(e){const t=e.detail.previousActiveStep;if(t===this.stepId&&this.error){this.clickable=true}}updateCurrentStep(e){this.active=e.activeStep===this.stepId}updateErrorState(){if(this.active){this.error=false}}handleStepClick(){if(!this.disabled&&this.stepperState.variant!=="compact"&&(this.clickable||this.complete)){this.stepperState.setActiveStep(this.stepId,true)}}handleStepKeyDown(e){if(!this.disabled&&this.stepperState.variant!=="compact"&&(this.clickable||this.complete)&&e.key==="Enter"){this.stepperState.setActiveStep(this.stepId,true)}}stopOnClickPropogation(e){if(this.disabled){e.stopPropagation()}}render(){return t("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":""} \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":""}`},t("div",{key:"d923bfda8089c8b2199d45acaaf6ac8c9fdeec5d",class:"step-icon-wrapper"},this.stepperState.variant!=="compact"&&t("span",{key:"13aac7c30b1dcd6ff7df11a4c58f4f9f156c01fc",class:"step-connector-l"}),this.stepperState.variant!=="compact"&&(!this.error||this.error&&this.active)&&t("div",{key:"35da868f3749271c369959b782e980dc95c3c92f",class:"step-icon"},this.stepperState.showStepNumber&&!this.complete&&!this.active?this.stepId:"",this.complete&&!this.active&&t("ifx-icon",{key:"4813fe9d028d7e1a25e7058cce5a79a76cba76f1",icon:"check16"}),this.active&&t("span",{key:"d0c1dbfed346671ca777606ffe5f3efe2016a170",class:"active-indic"})),this.stepperState.variant!=="compact"&&this.error&&!this.active&&t("ifx-icon",{key:"d5e56742186a732d1cf95069b8a61d59b8a68073",icon:"warningF16"}),this.stepperState.variant!=="compact"&&t("span",{key:"188cb1e005c83ad4abc3b05a0c8833968588628e",class:`step-connector-r ${this.active?"active":""}`})),(this.stepperState.variant!=="compact"||this.stepperState.variant==="compact"&&(this.active||this.stepId===this.stepperState.activeStep+1))&&t("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"&&t("slot",{key:"cbd47999729966cc8858b41bb54608eab8aa30c7"}),this.stepperState.variant==="compact"&&!this.active?"Next: ":"",this.stepperState.variant==="compact"&&t("slot",{key:"acb8a199531960f67d7c9c78238c9510118d79ab"})))}static get watchers(){return{stepperState:["updateCurrentStep"],active:["updateErrorState"]}}};p.style=r;export{p as ifx_step};
-//# sourceMappingURL=p-c51df9e9.entry.js.map

package/dist/infineon-design-system-stencil/p-c51df9e9.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stepCss","Step","constructor","hostRef","this","complete","disabled","error","lastStep","stepId","stepperState","activeStep","showStepNumber","variant","indicatorPosition","clickable","onStepChange","event","previousActiveStep","detail","updateCurrentStep","newStepperState","active","updateErrorState","handleStepClick","setActiveStep","handleStepKeyDown","key","stopOnClickPropogation","stopPropagation","render","h","onClick","e","class","icon","tabIndex","onKeyDown"],"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"],"mappings":"2CAAA,MAAMA,EAAU,wmI,MCcHC,EAAI,MANjB,WAAAC,CAAAC,G,UAOYC,KAAQC,SAAa,MACrBD,KAAQE,SAAa,MACJF,KAAKG,MAAa,MACjBH,KAAQI,SAAY,MACtCJ,KAAMK,OAAW,EACCL,KAAAM,aAA6B,CAAEC,WAAY,EACZC,eAAgB,MAChBC,QAAS,UACTC,kBAAmB,QAGnEV,KAASW,UAAY,KA6FjC,CA1FG,YAAAC,CAAaC,GACT,MAAMC,EAAqBD,EAAME,OAAOD,mBACxC,GAAIA,IAAuBd,KAAKK,QAAUL,KAAKG,MAAO,CAClDH,KAAKW,UAAY,I,EAKzB,iBAAAK,CAAkBC,GACdjB,KAAKkB,OAAUD,EAAgBV,aAAeP,KAAKK,M,CAIvD,gBAAAc,GACI,GAAInB,KAAKkB,OAAQ,CACblB,KAAKG,MAAQ,K,EAKrB,eAAAiB,GACI,IAAKpB,KAAKE,UAAYF,KAAKM,aAAaG,UAAY,YAAcT,KAAKW,WAAaX,KAAKC,UAAW,CAChGD,KAAKM,aAAae,cAAcrB,KAAKK,OAAQ,K,EAIrD,iBAAAiB,CAAkBT,GACd,IAAKb,KAAKE,UAAYF,KAAKM,aAAaG,UAAY,YAAcT,KAAKW,WAAaX,KAAKC,WAAaY,EAAMU,MAAQ,QAAS,CACzHvB,KAAKM,aAAae,cAAcrB,KAAKK,OAAQ,K,EAIrD,sBAAAmB,CAAuBX,GACnB,GAAIb,KAAKE,SAAU,CACfW,EAAMY,iB,EAId,MAAAC,GACI,OACIC,EAAqB,OAAAJ,IAAA,0DAAAvB,KAAKkB,OAAS,OAAQ,MACtB,gBAAAlB,KAAKkB,QAAUlB,KAAKC,SAAW,MAAQ,KACxD2B,QAAWC,GAAM7B,KAAKwB,uBAAuBK,GAC7CC,MAAS,gBAAgB9B,KAAKK,SAAW,EAAI,aAAc,gCACjDL,KAAKG,MAAQ,QAAS,+BACtBH,KAAKM,aAAaG,oCAClBT,KAAKC,SAAW,WAAY,+BAC5BD,KAAKI,SAAW,YAAa,yCACnBJ,KAAKM,aAAaI,8CAC5BV,KAAKkB,OAAS,SAAW,+BACzBlB,KAAKW,UAAY,YAAc,+BAC/BX,KAAKE,SAAW,WAAY,MAEtCyB,EAAK,OAAAJ,IAAA,2CAAAO,MAAQ,qBAER9B,KAAKM,aAAaG,UAAY,WAAakB,EAAM,QAAAJ,IAAA,2CAAAO,MAAQ,qBAGrD9B,KAAKM,aAAaG,UAAY,aAAeT,KAAKG,OAAUH,KAAKG,OAASH,KAAKkB,SAChFS,EAAK,OAAAJ,IAAA,2CAAAO,MAAQ,aACP9B,KAAKM,aAAaE,iBAAmBR,KAAKC,WAAaD,KAAKkB,OAAUlB,KAAKK,OAAS,GACpFL,KAAKC,WAAaD,KAAKkB,QAAWS,EAAA,YAAAJ,IAAA,2CAAUQ,KAAK,YAClD/B,KAAKkB,QAAUS,EAAA,QAAAJ,IAAA,2CAAMO,MAAQ,kBAIpC9B,KAAKM,aAAaG,UAAW,WAAaT,KAAKG,QAAUH,KAAKkB,QAAWS,EAAU,YAAAJ,IAAA,2CAAAQ,KAAK,eAGzF/B,KAAKM,aAAaG,UAAY,WAAakB,EAAA,QAAAJ,IAAA,2CAAMO,MAAS,oBAAoB9B,KAAKkB,OAAS,SAAW,SAKvGlB,KAAKM,aAAaG,UAAY,WAAcT,KAAKM,aAAaG,UAAY,YAAcT,KAAKkB,QAAUlB,KAAKK,SAAWL,KAAKM,aAAaC,WAAW,KACrJoB,EAAA,OAAAJ,IAAA,2CAAKS,UAAWhC,KAAKE,UAAYF,KAAKC,WAAaD,KAAKkB,OAAS,GAAI,EACjEY,MAAS,cAAc9B,KAAKM,aAAaG,UAAY,UAAaT,KAAKkB,OAAS,aAAe,aAAgB,KAC/GU,QAAS,KAAQ5B,KAAKoB,iBAAiB,EACvCa,UAAYJ,IAAQ7B,KAAKsB,kBAAkBO,EAAE,GAE3C7B,KAAKM,aAAaG,UAAY,WAAckB,EAAO,QAAAJ,IAAA,6CAEpDvB,KAAKM,aAAaG,UAAY,YAAeT,KAAKkB,OAAU,SAAW,GACvElB,KAAKM,aAAaG,UAAY,WAAakB,EAAO,QAAAJ,IAAA,8C","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-c75a57a2.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["linkCss","Link","constructor","hostRef","this","href","undefined","target","variant","disabled","internalHref","internalTarget","internalVariant","setInternalStates","trim","toLowerCase","componentWillRender","handleKeyDown","event","preventDefault","key","componentDidLoad","isNestedInIfxComponent","el","framework","detectFramework","trackComponent","render","h","tabindex","role","ariaLabel","download","class","linkClassNames","getSizeClass","small","size","medium","large","extraLarge","getVariantClass","bold","title","underlined","menu","classNames"],"sources":["src/components/link/link.scss?tag=ifx-link&encapsulation=shadow","src/components/link/link.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.link {\n  display: inline-flex;\n  align-items: center;\n  font-weight: 400;\n  font-size: tokens.$ifxFontSizeM;\n  text-decoration: none;\n  color: tokens.$ifxColorOcean500;\n  gap: tokens.$ifxSpace100;\n  line-height: 1.6;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n  &:hover { \n    cursor: pointer;\n  }\n\n  &:focus {\n    outline-width: 2px;\n    outline-style: solid;\n    outline-color: #0A8276;\n    outline-offset: 4px;\n    border-radius: 3px;\n  }\n\n  &.bold {\n    font-weight: tokens.$ifxFontWeightSemibold;\n\n    &:hover {\n      text-decoration: underline;\n    }\n\n    &:active {\n      color: #08665C;\n      font-style: normal;\n      font-weight: 600;\n      text-decoration: underline;\n    }\n\n  }\n\n  &.underlined {\n    text-decoration: underline;\n    text-decoration-color: tokens.$ifxColorOcean500;\n    color: #1D1D1D;\n    text-underline-offset: 8px;\n    \n    &:hover {\n      color: tokens.$ifxColorOcean500;;\n    }\n    \n    &:active {\n      color: #0A8276;\n    }\n\n    &:disabled,\n    &.disabled {\n      text-decoration-color: tokens.$ifxColorEngineering300;\n    }\n  }\n\n  &.title {\n    text-decoration: none;\n    font-weight: tokens.$ifxFontWeightSemibold;\n    color: #1D1D1D;\n\n    &:hover {\n      color: tokens.$ifxColorOcean500;\n    }\n\n    &:active {\n      color: #08665C;\n    }\n  }\n\n  &.menu {\n    font-weight: 400;\n    font-style: normal;\n    line-height: 26px;\n    color: #1D1D1D;\n\n    &:hover {\n      color: tokens.$ifxColorOcean500;\n    }\n\n    &:active {\n      color: #08665C;\n    }\n  }\n\n  &.small {\n    font-size: tokens.$ifxFontSizeS;\n  }\n\n  &.medium {\n    font-size: tokens.$ifxFontSizeM;\n  }\n\n  &.large {\n    font-size: tokens.$ifxFontSizeL;\n  }\n\n  &.extraLarge {\n    font-size: tokens.$ifxFontSizeXl;\n  }\n\n  &.underline {\n    text-decoration: underline;\n  }\n\n  &:disabled,\n  &.disabled {\n    color: tokens.$ifxColorEngineering300;\n    cursor: default;\n    pointer-events:  none;\n  }\n\n}","import { Component, Prop, h, State, Element } from \"@stencil/core\";\nimport { trackComponent } from '../../global/utils/tracking';\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\nimport { detectFramework } from '../../global/utils/framework-detection';\nimport classNames from 'classnames';\n \n@Component({\n  tag: 'ifx-link',\n  styleUrl: 'link.scss',\n  shadow: true\n})\n\nexport class Link {\n  @Element() el;\n  @Prop() href: string = undefined;\n  @Prop() target: string = '_self';\n  @Prop() variant: string = 'bold';\n  @Prop() size: string;\n  @Prop() disabled: boolean = false;\n  @Prop() download: string;\n  @Prop() ariaLabel: string | null;\n  @State() internalHref: string ='';\n  @State() internalTarget: string = '';\n  @State() internalVariant: string = '';\n\n  setInternalStates() {\n    if(this.href){\n      this.internalHref = this.href.trim();\n    }else{\n      this.internalHref = undefined;\n    }\n    this.internalTarget = this.target.trim();\n    this.internalVariant = this.variant.trim().toLowerCase();\n  }\n\n  componentWillRender(){\n    this.setInternalStates();\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (this.disabled) {\n      event.preventDefault();\n    } else if (event.key === 'Enter') {\n      event.preventDefault();\n    }\n  }\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-link', await framework)\n    }\n  }\n\n  render() {\n    return (\n      <a\n      tabindex=\"0\"\n        role=\"link\"\n        aria-label={this.ariaLabel}\n        aria-disabled={this.disabled || !this.internalHref}\n        href={this.disabled ? undefined : this.internalHref}\n        download={this.download}\n        target={this.internalTarget}\n        class={this.linkClassNames()}>\n        <slot></slot>\n      </a>)\n  }\n\n  getSizeClass() {\n    const small = this.size === 's' ? 'small' : null;\n    const medium = this.size === 'm' ? 'medium' : null;\n    const large = this.size === 'l' ? 'large' : null;\n    const extraLarge = this.size === 'xl' ? 'extraLarge' : null;\n\n    if (small) {\n      return small;\n    } else if (medium) {\n      return medium;\n    } else if (large) {\n      return large;\n    } else if (extraLarge && this.internalVariant === 'underlined') {\n      return 'large';\n    } else if (extraLarge && this.internalVariant !== 'underlined') {\n      return extraLarge;\n    } else return \"\";\n  }\n\n  getVariantClass() {\n    const bold = this.internalVariant === 'bold' ? 'bold' : null;\n    const title = this.internalVariant === 'title' ? 'title' : null;\n    const underlined = this.internalVariant === 'underlined' ? 'underlined' : null;\n    const menu = this.internalVariant === 'menu' ? 'menu' : null;\n\n    if (bold) {\n      return bold\n    } else if (title) {\n      return title;\n    } else if (underlined) {\n      return underlined;\n    } else if (menu) {\n      return menu;\n    } else return bold;\n  }\n\n  linkClassNames() {\n    return classNames(\n      'link',\n      'primary',\n      this.getVariantClass(),\n      this.getSizeClass(),\n      this.disabled ? 'disabled' : '',\n    );\n  }\n}"],"mappings":"6LAAA,MAAMA,EAAU,6zC,MCYHC,EAAI,MANjB,WAAAC,CAAAC,G,UAQUC,KAAIC,KAAWC,UACfF,KAAMG,OAAW,QACjBH,KAAOI,QAAW,OAElBJ,KAAQK,SAAY,MAGnBL,KAAYM,aAAU,GACtBN,KAAcO,eAAW,GACzBP,KAAeQ,gBAAW,EA2FpC,CAzFC,iBAAAC,GACE,GAAGT,KAAKC,KAAK,CACXD,KAAKM,aAAeN,KAAKC,KAAKS,M,KAC3B,CACHV,KAAKM,aAAeJ,S,CAEtBF,KAAKO,eAAiBP,KAAKG,OAAOO,OAClCV,KAAKQ,gBAAkBR,KAAKI,QAAQM,OAAOC,a,CAG7C,mBAAAC,GACEZ,KAAKS,mB,CAGP,aAAAI,CAAcC,GACZ,GAAId,KAAKK,SAAU,CACjBS,EAAMC,gB,MACD,GAAID,EAAME,MAAQ,QAAS,CAChCF,EAAMC,gB,EAIV,sBAAME,GACJ,IAAIC,EAAuBlB,KAAKmB,IAAK,CACnC,MAAMC,EAAYC,IAClBC,EAAe,iBAAkBF,E,EAIrC,MAAAG,GACE,OACEC,EACA,KAAAR,IAAA,2CAAAS,SAAS,IACPC,KAAK,OACO,aAAA1B,KAAK2B,UAAS,gBACX3B,KAAKK,WAAaL,KAAKM,aACtCL,KAAMD,KAAKK,SAAWH,UAAYF,KAAKM,aACvCsB,SAAU5B,KAAK4B,SACfzB,OAAQH,KAAKO,eACbsB,MAAO7B,KAAK8B,kBACZN,EAAa,QAAAR,IAAA,6C,CAInB,YAAAe,GACE,MAAMC,EAAQhC,KAAKiC,OAAS,IAAM,QAAU,KAC5C,MAAMC,EAASlC,KAAKiC,OAAS,IAAM,SAAW,KAC9C,MAAME,EAAQnC,KAAKiC,OAAS,IAAM,QAAU,KAC5C,MAAMG,EAAapC,KAAKiC,OAAS,KAAO,aAAe,KAEvD,GAAID,EAAO,CACT,OAAOA,C,MACF,GAAIE,EAAQ,CACjB,OAAOA,C,MACF,GAAIC,EAAO,CAChB,OAAOA,C,MACF,GAAIC,GAAcpC,KAAKQ,kBAAoB,aAAc,CAC9D,MAAO,O,MACF,GAAI4B,GAAcpC,KAAKQ,kBAAoB,aAAc,CAC9D,OAAO4B,C,MACF,MAAO,E,CAGhB,eAAAC,GACE,MAAMC,EAAOtC,KAAKQ,kBAAoB,OAAS,OAAS,KACxD,MAAM+B,EAAQvC,KAAKQ,kBAAoB,QAAU,QAAU,KAC3D,MAAMgC,EAAaxC,KAAKQ,kBAAoB,aAAe,aAAe,KAC1E,MAAMiC,EAAOzC,KAAKQ,kBAAoB,OAAS,OAAS,KAExD,GAAI8B,EAAM,CACR,OAAOA,C,MACF,GAAIC,EAAO,CAChB,OAAOA,C,MACF,GAAIC,EAAY,CACrB,OAAOA,C,MACF,GAAIC,EAAM,CACf,OAAOA,C,MACF,OAAOH,C,CAGhB,cAAAR,GACE,OAAOY,EACL,OACA,UACA1C,KAAKqC,kBACLrC,KAAK+B,eACL/B,KAAKK,SAAW,WAAa,G","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-caccdf14.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as c,a}from"./p-DS8meZSd.js";const d='*{font-family:"Source Sans 3";box-sizing:border-box}body{margin:0;padding:0;overflow-x:hidden}header{margin-bottom:15px;display:flex;justify-content:center}.header__info-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px}.infoboard__wrapper{display:flex;gap:15px;background-color:#f1f1f1;padding:5px 10px;border-radius:10px}.title{font-size:30px;font-weight:bold}.view{margin:auto}.wrapper{position:relative;width:100%;height:calc(100vh - var(--header-height) - 15px);overflow:auto}table{width:100%;table-layout:fixed;border-spacing:0}thead tr th{border-top:1px solid #dddddd}td,th{padding:10px;background-color:white;border:none;box-shadow:0 0 0 1px #dddddd;box-sizing:border-box}table th:nth-child(1){width:150px}table th:not(:nth-child(1)){width:240px}th{position:sticky;top:0;background-color:white}.sticky-col{position:sticky;z-index:1}th.sticky-col{z-index:2}.second-col{left:0;border-left:1px solid #ddd}.wrapped-content{width:250px;white-space:normal}a{text-decoration:none;color:black}.basic__info{display:flex;gap:5px}ul{padding:0 5px;margin:0 15px;list-style-type:none}tr:nth-child(even) td{background-color:#f1f1f1}ul li{font-size:12px;display:flex;gap:5px;line-height:13px}li.planned__component-wrapper{align-items:center;line-height:16px}.version__wrapper{display:flex;flex-direction:column}ifx-icon{color:rgb(10, 130, 118)}.check__icon{width:10px;height:10px}.planned__icon{width:12px;height:12px;vertical-align:sub}';const f=class{constructor(c){e(this,c);this.getPlannedComponents=()=>{const e=this.el.shadowRoot.querySelectorAll(".planned__component");return e.length};this.setPlannedComponentsNumber=()=>{const e=this.getPlannedComponents();const c=this.el.shadowRoot.getElementById("number__indicator-planned");c.number=e};this.getCompletedComponents=()=>{const e=this.el.shadowRoot.querySelectorAll(".completed__component");return e.length};this.setCompletedComponentsNumber=()=>{const e=this.getCompletedComponents();const c=this.el.shadowRoot.getElementById("number__indicator-completed");c.number=e};this.setTotalComponentsNumber=()=>{const e=this.getPlannedComponents();const c=this.getCompletedComponents();const a=this.el.shadowRoot.getElementById("number__indicator-total");const d=e+c;a.number=d}}componentWillLoad(){let e=this.el.parentElement;if(e){e=e.parentElement;e.style.padding="0px"}}componentDidLoad(){const e=this.el.shadowRoot.querySelector("header");const c=e.offsetHeight;const a=this.el.shadowRoot.querySelector(".wrapper");a.style.setProperty("--header-height",`${c}px`);this.setPlannedComponentsNumber();this.setCompletedComponentsNumber();this.setTotalComponentsNumber()}render(){return c("div",{key:"b5e0adfc133dd7351fbcdef0433e060e43cc83d8",class:"container"},c("header",{key:"eef4d038fa80ac4494326b7ee8f83d74ecd2b3bb",class:"header"},c("div",{key:"9265e37a2949a24a7872894c9165fa4a86771364",class:"header__info-wrapper"},c("div",{key:"cd8f01827f3aba08ab39335da369de47ef8dd346",class:"title"},"DDS Components Overview"),c("div",{key:"22b3d83eeeececce070658ae42074a97c3f78625",class:"infoboard__wrapper"},c("div",{key:"f0ca1e1817cfd593bb5662b82081ed2b0184fcf4",class:"basic__info"},c("div",{key:"f8683b70ef8374a4efcc5a48ae2119cd7d50b4dd"},"Total Number:"),c("div",{key:"ef78725ee53a2473e254f2de9f58624519201717"},c("ifx-indicator",{key:"f6cd423ca86cfbaa3e248611d96c57b072bfdb92",id:"number__indicator-total",variant:"number"}))),c("div",{key:"38cbf38cea93c1398bef588db752f71de6e2cb30",class:"basic__info"},c("div",{key:"6f37b37c570f20fd0e22d65e339d093b8e8a2fbe"},"Completed:"),c("div",{key:"39d6cc670b53a60464578051663a2932075e6055"},c("ifx-indicator",{key:"81af885e0238921dbb6b2e1fb0f5820af9ddc65b",id:"number__indicator-completed",variant:"number"}))),c("div",{key:"a9edb18f33a0479a709a6d375e423dc262b7dc04",class:"basic__info"},c("div",{key:"9c8124a35b4f05bf60f799f5b0976305237077b8"},"In Progress:"),c("div",{key:"e87d2db5107df9e35be68ab5395ba1e47b0eac3d"},c("ifx-indicator",{key:"4af86636abd1a065063e573d85040d461c9fbec7",id:"number__indicator-planned",variant:"number"})))))),c("div",{key:"4180e631ddd7a2799f5086f160277ce9685db9f0",class:"view"},c("div",{key:"7ae6bbce05c2bafc03e070583c8b32e887a1c7d9",class:"wrapper"},c("table",{key:"1c76978a40e04a433c4ede3c21c5b81634e1c1ba"},c("thead",{key:"9cd53a94231d0d1c25f10f6edd7030d0372577b1"},c("tr",{key:"e02324eb99e3c24dff51f5999cd2cf48d796850b"},c("th",{key:"bf0211071f2f72f2087598a932aff6482baec915",class:"sticky-col second-col"},"Component"),c("th",{key:"66d0dd746cbf010f889f26dabcf0239ebe2e2de5"},c("div",{key:"955ed744c8fb849a83b19e0a34eebd6ec3176c62",class:"version__wrapper"},c("span",{key:"3ab5f6730052f4805ed7f84fc19e3ce1fbd9ddef"},"Version 1"))),c("th",{key:"358c32e624f3a891269ad30b647cde68117446b0"},c("div",{key:"7a1d397e9ed7e5752f4fcc68aeb0cd1e34e4cfb8",class:"version__wrapper"},c("span",{key:"af62565d5f30beba1a2b3e0883ad7ddcaf2409ae"},"Version 2"))),c("th",{key:"dfe06aa4e0e2bf2ce5a3114de07ca8862c548de3"},"Version 3"))),c("tbody",{key:"70ca2c72c3e8999247a9e7328ccf4ff91ce1028b"},c("tr",{key:"ef6862ceeb5b7ad9020566613dbc947ad8f3eefe"},c("td",{key:"71d84cebbd82fb6f45f401ee5e0b925602efc6b6",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"36b05c653829284c26f3ada7df7c2e01683df032",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-accordion--development",size:"s",variant:"bold"},"Accordion")),c("td",{key:"35c44faf4a2125a515a062e5ad509598bfb3d5be"},c("ul",{key:"fffe062ddf59cf7257f4840fe3efca07c59d392b"},c("li",{key:"de871839444ab4c82c9ac5f20c30ceb758cce88c"},c("span",{key:"35b44abd6e730619766ea0554d9fec32e281a589"},c("ifx-icon",{key:"cca03057d42741dec9067d8095f8428bb341e142",class:"check__icon",icon:"check16"})),c("span",{key:"a0dae6b4f4d90eea1d608db3f3f98ec7b4242080"},"Includes essential functionality such as expand/collapse behavior and minimal customization options")),c("li",{key:"f93fe8bb00c70dba490999591d4cfffd6c5539b2"},c("span",{key:"e982a873c34bfb3cbcf0ac83b13cc2cee20a4c8f"},c("ifx-icon",{key:"ae2dee094fa814a3c79e726f362779d32311f3f1",class:"check__icon",icon:"check16"})),c("span",{key:"e0543dbda56a1bba4653713b26643b5c3f4c6a9e"},"Adheres to web standards")),c("li",{key:"0e2715826d7adfcf2ba05cf0b1b65fabf1fd596d"},c("span",{key:"741e77827cd7e76fcfaabd962ff691686d33894f"},c("ifx-icon",{key:"133fa6a0076851fb94a30edb8116a9c3c19b15f6",class:"check__icon",icon:"check16"})),c("span",{key:"7da5239790c48e23e3f8aae99065ccdcef4d59ef"},"Provides a simple and lightweight way to organize and display collapsible content")))),c("td",{key:"66367794109267440dc101a24cfa5255d7372563"},c("ul",{key:"9c938d2d5c0cdfaaea0c7159b0a48f99604818f8"},c("li",{key:"f46d0817a49d77f93ba28e1feedb40941389d99c"},c("span",{key:"2603649086086475ec32a405c04d5deda840c240"},c("ifx-icon",{key:"bc1c5915decba40a4f32c7632313504a2fdc3b03",class:"check__icon",icon:"check16"})),c("span",{key:"d91a7d8acf80ced5d731588354c108977a77b517"},"Auto collapse feature")),c("li",{key:"937ba350e7260a1cab80f5467d96e1dad3634766"},c("span",{key:"437f66de8781f78164f5bc7dfc6a60c97707bef8"},c("ifx-icon",{key:"43adeb46764b4df97a1902a5fe26bf9a8de38429",class:"check__icon",icon:"check16"})),c("span",{key:"3d409974451942fbfad0843d05c31072e69d5dc6"},"Initial collapse feature")),c("li",{key:"bde800bb2243b3f33be199553129124989d8ab94"},c("span",{key:"51b413f3f0a98dcf9fc17e9c3ae0d9824abd7e31"},c("ifx-icon",{key:"4c0763b4e1c7ef4148cc4428971b80e3e5d7023c",class:"check__icon",icon:"check16"})),c("span",{key:"fc4a201c761ecb1984582f1ac61fba1cc8496c80"},"React, Vue and Angular wrapper integration")))),c("td",{key:"b0fc109026afb30bd3abc62a7bd06d74b71af99a"})),c("tr",{key:"be70be42345356164a4e93c07e5a877ffb6db25e"},c("td",{key:"6a8d92542fc5168ccefd7f248921ff61bee41a76",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"9ff4f29fdcd1d98c7247f1156075c0a805d60e57",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-alert--development",size:"s",variant:"bold"},"Alert")),c("td",{key:"80aca05168134b09b6681c7bca72ea70f3f0a1b9"},c("ul",{key:"eaa65ad7bd1c8c2861420deef4da570221b4c089"},c("li",{key:"35ba15309951b5d28e4c79700dc8c6d6f8bffd30"},c("span",{key:"d82a4763116577392422c61d0999e51cefb254d5"},c("ifx-icon",{key:"76c4cb2d23987f30c7447c315512f0c00b98eee5",class:"check__icon",icon:"check16"})),c("span",{key:"cabb57e1085c46391e79b6f779afbc41d99d9ef0"},"Provides a lightweight and customizable interface for presenting alerts, including options for different alert types (e.g., primary, success, danger, warning) and basic styling configurations")),c("li",{key:"4a8b4daa5dd369d3a2e1b7e6edb0dc21609ef158"},c("span",{key:"f64abac1d2dff7ad150a81d7d26af1b499388873"},c("ifx-icon",{key:"e067bc51c5cbad6b94bd7e7fdd4c5d70d2d3c485",class:"check__icon",icon:"check16"})),c("span",{key:"a15a59ec05fafabcecc178300a3bdc7aec634dc6"},"Adheres to web standards")))),c("td",{key:"e93a5a47064cbb2fc5a5efb8d6aecd04b5f0300a"},c("ul",{key:"2b35bf768ce10783d9f9a43be42b8c97b94cdb6c"},c("li",{key:"b7abf46cb986c0319114b992402334b337ab3fe0"},c("span",{key:"037507d036e9d9ae8e899d60316cdf2f0f40e9da"},c("ifx-icon",{key:"fe401a7d941f27ec6eb3bca2f50fb25ca1f3d0ed",class:"check__icon",icon:"check16"})),c("span",{key:"88ec6c13d08b8c232bb0eaec1c692895a2b78084"},"Configurable close button")),c("li",{key:"7fb90e6a9cfab77aa52108461dd02b070e3f48c2"},c("span",{key:"b0312764773a6d7a9e99d7cd9363904d0900fde7"},c("ifx-icon",{key:"32e63d575bf7da267ffb7b1573a3f4942425e500",class:"check__icon",icon:"check16"})),c("span",{key:"ecf701142b756f02a70bd7487844b9dcd94b8ce0"},"Additional Info variant")),c("li",{key:"90b2b3bf79f0cf085d4e5d151b19d7a6160d95de"},c("span",{key:"fa24e42a184d51b194cdb651f520174b4a6a0a71"},c("ifx-icon",{key:"e41b0853b0baf114bc2f3ea5f1bfe13c09d1a9ce",class:"check__icon",icon:"check16"})),c("span",{key:"7263b4af10c8fbc40f29ecf5c0bdca89441f8f2b"},"React, Vue and Angular wrapper integration")))),c("td",{key:"25417a20bb4bf5527a8638649d318f011d9471f6"})),c("tr",{key:"42646d457631866da201939615fa4dd5bf9d15f4"},c("td",{key:"ecfd6783a9235cef0abf939bd5fb05a52815fc7d",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"a7cd189f11727ee98df0c317fac1489ad9e232b1",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-badge--development",size:"s",variant:"bold"},"Badge")),c("td",{key:"d2d86afe2fd9e3ac9a9b9fbe48fb05b275075935"},c("ul",{key:"f8214a3db21168a00bc9b69d905745e9f6ee02e7"},c("li",{key:"bd8ce9e62745824792a94d701302b1f28f0062f8"},c("span",{key:"1d91255881fc50459496ff4d1736b9df618683e7"},c("ifx-icon",{key:"e44012950118e540489521e5448194a30c82e053",class:"check__icon",icon:"check16"})),c("span",{key:"21057fd1b0a37b7bc83c19cf6d2f08331228d7ae"},"Offers simple customization options for displaying badges, allowing developers to indicate specific actions, statuses, or categories with visual cues")),c("li",{key:"aa0247f9ed934af5f297da6d4a5474e6eaa7b1be"},c("span",{key:"95a026cfcb50d500c94b802c19868a8c6ef49ed7"},c("ifx-icon",{key:"440888b274591bd3bd355656b1865c7c732a5aed",class:"check__icon",icon:"check16"})),c("span",{key:"fbd79b42870163b60f4450f67d0c35055b323897"},"Designed to seamlessly integrate with existing UI elements and adhere to web standards")))),c("td",{key:"398633367d12857bdb62c69895ae5a488079c32b"},c("ul",{key:"9cad239ad02589a59c6d9b02743820fbe11d5de1"},c("li",{key:"b51c853040ff843581a51313f5ef544e36b8f181"},c("span",{key:"240e041a865ad263f9b5e49fb59b8a451becd23d"},c("ifx-icon",{key:"77593c85378791da9cc23efea05d6c9cb360c81e",class:"check__icon",icon:"check16"})),c("span",{key:"961e61b73d57470e072316cd03db228dad9d9f07"},"React, Vue and Angular wrapper integration")))),c("td",{key:"3ddb8cb00d4093a1acdd0bd9b6cc693189797ee8"})),c("tr",{key:"35fd4ff056bff86aa847b42880e59c96707fe429"},c("td",{key:"dd14ad1dd143acbadddce37961532acc1844c032",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"8978906d0fc88e047dcda3bc4bb55601e7b01872",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-breadcrumb--development",size:"s",variant:"bold"},"Breadcrumb")),c("td",{key:"027de7ef110364c7652783d73e6d9f7651624c01"},c("ul",{key:"cdf70596221a1c0d40f7e0709779c85229ac00d5"},c("li",{key:"3410e5a3a8eae2d0d52fe7d3d4087d69cb9f2ef6"},c("span",{key:"eefa555aa0c436ab3ca014d41e5cc108a1967cf0"},c("ifx-icon",{key:"d4cfcafc434cbdee834da5d26f5d9b0d9b47f73d",class:"check__icon",icon:"check16"})),c("span",{key:"867bf6ddfeef13211fb1f6b86c825684a11464ac"},"Provides a simple and customizable way to display a sequential trail of links or indicators,  representing the user's current location within a hierarchy of content")),c("li",{key:"434d12df37e10624a10bebef9bf791369b73c072"},c("span",{key:"400c4c4354a243effe7950279a0730c69256ab1b"},c("ifx-icon",{key:"a41b4523892eac99797119289d6f1b73befcfd96",class:"check__icon",icon:"check16"})),c("span",{key:"f4257c75077b3be4466b4d2150d05264570955d4"},"Adheres to web standards")))),c("td",{key:"76f5c5f45b30558010f2f4e9a8fc523a13878b90"},c("ul",{key:"644a3698105ed59dd15440ae0409d0cef2b60e2a"},c("li",{key:"5899a6f9fc3e661aeae7347a8a87812a8630940a"},c("span",{key:"6b70e1d0f953a007feb6eea1b5a9807cbdf5d836"},c("ifx-icon",{key:"ec2bedddee3afe85920c05dcfdfe42b28cec9af1",class:"check__icon",icon:"check16"})),c("span",{key:"93b61730071db89093fd632a2cb2f08a8b7d3a2b"},"Possibility to add an icon")),c("li",{key:"ec6be8815cf1f63c4f9385b53e3b06f4d9988d66"},c("span",{key:"34a130cb5b6e9ae9eac9c16d9a16b347f7218b6d"},c("ifx-icon",{key:"d3eea1b61f0963b71bd0c6b42dca0fe43c52351e",class:"check__icon",icon:"check16"})),c("span",{key:"385c10483d060f5c3ae1ba6d100a5f1cd4a1260f"},"Incorporated dropdown-menu for individual items")),c("li",{key:"55fa61ecf5693ba8b2feb18e2a994c6e7ca4f989"},c("span",{key:"f68b066a9f3b98bc97a314b8a29ab8ecd39627d5"},c("ifx-icon",{key:"b8840a40f374f66e03101391aae1e7cb647b4ea3",class:"check__icon",icon:"check16"})),c("span",{key:"10ca0e779bfc258994fb1088476c4e26b1ebe504"},"React, Vue and Angular wrapper integration")))),c("td",{key:"4180634496cb7dbddc5c44c0758e361227c41c81"})),c("tr",{key:"b1579a6a421a0e7948e5e025523f83b4c75265d6"},c("td",{key:"d64e8759703b10b7e39f6c928ae90d95e846861e",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"ca306bd52b8e8dfc18e204f31d7a498099817e2c",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-button--development",size:"s",variant:"bold"},"Button")),c("td",{key:"50124b76a6125bdf45a0a547bd4e72f54deb9999"},c("ul",{key:"7f1ff4f2c69f800e4f12b299c7c4a54c827c449d"},c("li",{key:"a6d1bff2b7c74865b911b949e46146cdb6694a19"},c("span",{key:"d020f9867fecaada16a3310776fe788262bad33c"},c("ifx-icon",{key:"543e55ace901e0522151ad0b2e64977914797a3c",class:"check__icon",icon:"check16"})),c("span",{key:"fe24f1ebf794440eb852371ec5d83d2424c21672"},"Includes basic styling options such as colors, sizes, and states, providing essential functionality for initiating actions")),c("li",{key:"08c253aacdf16b936845220fcd217b78bcf35a94"},c("span",{key:"8532f1afd318af6db6c28e19a97ef33e39ca94fc"},c("ifx-icon",{key:"b01613de68ad2735d0730518eea3881e91203995",class:"check__icon",icon:"check16"})),c("span",{key:"0b668b20276dfa13380ba6200dc618a288d3c6c9"},"Adheres to web standards")))),c("td",{key:"e1798c2b20411cc3e0b17c815be0d5c2b8bd4f2c"},c("ul",{key:"cb0dc410fd812328284e315b12982b5f967e7d90"},c("li",{key:"a42daaf37ecf64fd50cbfa84c6363347a8b38400"},c("span",{key:"551a20a3661271dfe1b4ef3662e5e4e8a02d011a"},c("ifx-icon",{key:"948302a896d093169d47af290003e0787a45d979",class:"check__icon",icon:"check16"})),c("span",{key:"b40d8d6b2ea4eea75d0ffeba8a5feed5bc620b6b"},"fullWidth feature")),c("li",{key:"1ea4390b205b5e301f69596b9495841e64e6ec11"},c("span",{key:"1bbd67ca381a88892606edbcc4c10aecac11d323"},c("ifx-icon",{key:"b5eae37a4d2ae4e543a3e363009bc258151bc185",class:"check__icon",icon:"check16"})),c("span",{key:"188cd852ed37a50d9c9656844dce24d6e7a01da4"},"Icon integration")),c("li",{key:"fb9022e2cc1e4153c9f9ec0f7836bc5672b8a40d"},c("span",{key:"5b57995a38f2f1855236737b562d0dfeb2a64d5c"},c("ifx-icon",{key:"50d16f110cc464258e5f89929080a6c17a656128",class:"check__icon",icon:"check16"})),c("span",{key:"ea48b20054173971fb403d4a317c302d1f88432e"},"Link integration")),c("li",{key:"d2859004f74ae15020bd929c77fd61214211ccf5"},c("span",{key:"61815b38b0c1fe5778e72576a201d3e1fba8fd26"},c("ifx-icon",{key:"f7d4dbab64ecd7c39557c63c553be70cae5d1886",class:"check__icon",icon:"check16"})),c("span",{key:"a3905ca0b0539c3683cbf1196cdba8638dc744c4"},"React, Vue and Angular wrapper integration")))),c("td",{key:"3f8ff8ea386ce074f1e1af25f646c8362c7ecc54"},c("ul",{key:"fd5f3d17eb8b2782b6a75665468860bc3821ee0e"},c("li",{key:"9f1e8ee498f6d6c474f755f83da8f42e02a97b7f"},c("span",{key:"ffd2a19ed5035a7734a8fe3cb0f3b6d9f5e131b8"},c("ifx-icon",{key:"63717150bc6da6984dfb86c8b80e6cbef14f765a",class:"check__icon",icon:"check16"})),c("span",{key:"bd3c7c27ce904193f35c5461f43c89ac9b664521"},"Form integration"))))),c("tr",{key:"d8b668a1d9fd828ae446b0a2bac07b43d0def322"},c("td",{key:"014fbe2fb58adb9cb847eceb1402747a455894cd",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"d6207ba2dedce82edaab38df10da3eb3cd226821",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-card--development",size:"s",variant:"bold"},"Card")),c("td",{key:"75a401c27d8db4fa33cef3171f7dda78d223cd2f"},c("ul",{key:"02c97fa64684263727d54e513a5501a4f1f80cf1"},c("li",{key:"21c64001e5c7c976a20ea22e0b1547d71c31ea1e"},c("span",{key:"d6cae0521fcb91620f8600eda5f7bd15e38e487c"},c("ifx-icon",{key:"381c72e88d1d6c61cb50224c34e23ff6480da47f",class:"check__icon",icon:"check16"})),c("span",{key:"03d152deb030c87651d54a23805f49965be1e68e"},"Provides a structured and customizable layout, featuring elements such as headings, images, text, and buttons")),c("li",{key:"443a1f368da14e1c91bf16783967915d2314b407"},c("span",{key:"0af82bb56f25e5a6e87c3bfc7ddc0dd2ce59e5d3"},c("ifx-icon",{key:"dc806df7d3f0f31c7cedcdeeb0510dae55ca7617",class:"check__icon",icon:"check16"})),c("span",{key:"43fb7cedf91c099c26bfdc6e20b27d2556013a74"},"Adheres to web standards")),c("li",{key:"5bd7141e0c24c07b643c7f596359e1cf8fbb7160"},c("span",{key:"aa89d7b416060d160ab910649a3ba11870519d99"},c("ifx-icon",{key:"cedd2ce1a6dbba6cf4f38a4e01dc585c8530bdfe",class:"check__icon",icon:"check16"})),c("span",{key:"ab2160c779423ecabef625c32f454c1b18914d67"},"Horizontal and Vertical layout")))),c("td",{key:"21d2053d4395ffafd83d11ac69eb7df7e761ef30"},c("ul",{key:"4124f34070cb78e57eaf8b37d74a63846c361a73"},c("li",{key:"0bcb6be6db18905c6646bcc572070d075ce528c9"},c("span",{key:"9af0e4bfd94a15860a642a07dccb6b667a853c2e"},c("ifx-icon",{key:"22b5c4f70f0136dbd27837ec970268caae29c52e",class:"check__icon",icon:"check16"})),c("span",{key:"23628607aa7d5a7d3b47fc76b8b625672f74dfcf"},"Possibility to embed multiple buttons")),c("li",{key:"f31a9d3218445b0f2ed1f78c5783c3dbc2cee632"},c("span",{key:"42fdc8fb33377f343b32f59eda417ce7fa264b90"},c("ifx-icon",{key:"7c19e6e0608c845a52904cad1a992877bbc29881",class:"check__icon",icon:"check16"})),c("span",{key:"80f7a25c0d61e1f0d36214e35833ee266397fb7a"},"A switch between a Link and a Button")),c("li",{key:"cd0c8660dfa134b189b0beafd42b3849e89cfeca"},c("span",{key:"4c5253e0a939c4cc896278703045559d0bac2c97"},c("ifx-icon",{key:"f67188d0beccc7aa050019c9ff3d821a84bce89c",class:"check__icon",icon:"check16"})),c("span",{key:"8cbbba68cef8a6d484d0b41d50dc94f04f4577e9"},"Enhanced stylying behavior")),c("li",{key:"00843de5c4616a4754436e53421bd5999364a8b6"},c("span",{key:"bd48144655af152b22fab93184e0e04bc58de953"},c("ifx-icon",{key:"c45dc166b7a3c6df8e0b5916389c90f0c428b50d",class:"check__icon",icon:"check16"})),c("span",{key:"f373a722cb241461b73182f46e18f189bbc98c7e"},"React, Vue and Angular wrapper integration")))),c("td",{key:"8ad7254dd49bb71ce24bd2975a51b7cd799b01ae"})),c("tr",{key:"006d2ef89a7e49123361b072f5ddde73d21d28f8"},c("td",{key:"143065f4ef07448524db3ac97cc516d0aaff7753",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"babad0b2e5dfe7a1be41a69f473acfe37bdd23b4",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-checkbox--development",size:"s",variant:"bold"},"Checkbox")),c("td",{key:"960fe99bd21d830c9559714c827ba559fb45af5f"},c("ul",{key:"d64f7182f8b102b263295ae563815c5cdffafccf"},c("li",{key:"df433c6da4b20116d9821b3507e2222d40457020"},c("span",{key:"d5e2be6f5e80864e93ae7b53b071f72f2aaec329"},c("ifx-icon",{key:"ecbfd649639ca09b9b4bdad948ac54404cdbc6d5",class:"check__icon",icon:"check16"})),c("span",{key:"3f568c5dd43802ea475015e3f5031866788ca039"},"Offers a simple and customizable checkbox input, allowing users to toggle between checked and unchecked states")),c("li",{key:"40e96f7f3e8934c6f84f06105be4dd70d9dd76cd"},c("span",{key:"3734dc7933bb5eb043e24e74e35c8cd0c7a45438"},c("ifx-icon",{key:"1c4b18a92ad5a7a9fd68010bbd4dccb13e0380ea",class:"check__icon",icon:"check16"})),c("span",{key:"a731c4ede6c6f6886c6b2f80b26b98e641bca04e"},"Adheres to web standards")))),c("td",{key:"eb953f7b108e46dabe142699f523df775ee9d6d6"},c("ul",{key:"185f1cf69df61b9b927629253984389fa84bb2c0"},c("li",{key:"a7cea79e720f6cf0627dcaf8b6cfaf30be67686a"},c("span",{key:"6cd230e65f6c0e1a708527d20160198b1a1d00f2"},c("ifx-icon",{key:"b0cf26d3bfef01ed85c8523c046ddacd4ac47d2a",class:"check__icon",icon:"check16"})),c("span",{key:"bdf46d90d64e6af117445cc44b2a15ca4ee6a7b0"},"Indeterminate state variant")),c("li",{key:"e960a5ab5ad68c092607d378beedde535d2308ac"},c("span",{key:"ee12589781ecae32dea3b7b28b426cc0a5384594"},c("ifx-icon",{key:"d842ea9676853794b3223eab798c13464349367d",class:"check__icon",icon:"check16"})),c("span",{key:"fdcdacbf65cb5e5bdd68f6bb69c1138a7d413044"},"React, Vue and Angular wrapper integration")))),c("td",{key:"6404a9c05ba59dd153486ed5a5002fff097fe867"})),c("tr",{key:"97f4d5cb04534dc2a4450001b330bc7f4c597f97"},c("td",{key:"e2349a614dbecf846eda94b18ea81cbef4021a54",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"cc12208196989074b87724959768a48eb528f7a1",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-checkbox-group--development",size:"s",variant:"bold"},"Checkbox Group")),c("td",{key:"acc0420f2bfdbe10ecb688593408f1cb5ba70594"},c("ul",{key:"b9c07fad73ae98752ccae5d0d34638c4ba6d99e5"},c("li",{key:"f0b7ecac3eda46eb317ee5cfc4bf3ddc8475094c"},c("span",{key:"63ebdf778ebc256cd00f5e26a5a69df620317cfe"},c("ifx-icon",{key:"c296a30a9d4770d7b785875b5295f8718f5f2694",class:"check__icon",icon:"check16"})),c("span",{key:"08a9f998b94df5ece8a3c05a6ad2f022dd15cd8f"},"Provides a simple and customizable interface for grouping multiple checkbox inputs")),c("li",{key:"c55f42785d749cc388ac8d458091fc96f28e0406"},c("span",{key:"bda8cc9e8cfe0e83a93ccff931169dd070bd1fd9"},c("ifx-icon",{key:"9d01b7d8a6a505c8ea74410c1c615102665e34e3",class:"check__icon",icon:"check16"})),c("span",{key:"62f5d2b6dd43757857417f83187712d07e23ece4"},"Allows users to set and display group label, caption text and caption icon")),c("li",{key:"354a0139f6231cf951b1517b63a5d7850b624ca9"},c("span",{key:"d591848100be21f430990e63d83ba6fba8e4e87b"},c("ifx-icon",{key:"947ead78892854825cba2abf1c1f643699fb37fa",class:"check__icon",icon:"check16"})),c("span",{key:"23e262e9fc692482a998e8327f409533d5491db1"},"Allows to display individual or group error")),c("li",{key:"41d955077aeccec04d6753276392ee4c0a7a80a6"},c("span",{key:"390a61060dcccac5e8e5ad44e8261467e45a4294"},c("ifx-icon",{key:"47af5a995581fdc6a3a0afbd44989bf57b077781",class:"check__icon",icon:"check16"})),c("span",{key:"6761b50e1c6c19790cc35b61ed6ca51862b71021"},"React, Vue and Angular wrapper integration")),c("li",{key:"590888ad3f6ae8cd28116c471f30a99cfbe31789"},c("span",{key:"af78de773d7c26bb9773d22fc3905a865470e17f"},c("ifx-icon",{key:"28903a16c5b2f51663ccc0ee480fef349f132015",class:"check__icon",icon:"check16"})),c("span",{key:"a1eb36400e5f6858f452b5b76d744b6ac4e070b7"},"Adheres to web standards")))),c("td",{key:"3c2204e0421e1b6bf9b8bc59e169bf4e7f67f3d5"}),c("td",{key:"8063dc4ff719d45bc31f4a69d0d537e9b8b5c96a"})),c("tr",{key:"f62ef2e4b4fc17b38896330c17802ed17e125800"},c("td",{key:"e7be534e436a180e1e31e4682c4e6dda85c63c93",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"c3e7fc6a8d07ee2623918803fcc8f3f697765461",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-chip--development",size:"s",variant:"bold"},"Chip")),c("td",{key:"01bad88b9937d771c557d3e74a6cc55185f8c0e1"},c("ul",{key:"a73389fcc78909c38fdc4d8177e80ef2887d926c"},c("li",{key:"c26096f9db726e98fd2edaeff8909e5d0cd375ec"},c("span",{key:"5545052bc8d5ab3610ac1fa1fb03ee7310e40022"},c("ifx-icon",{key:"4d0f61c75add47c67cf4eef1694223d7bb806d8c",class:"check__icon",icon:"check16"})),c("span",{key:"c1edbd22cca3be551267303b3859a8797c68a27d"},"Provides a simple and customizable interface, representing discrete units of information or user interactions, such as labels, categories, or removable entities")),c("li",{key:"80969c62f8054f4b45314218dd70b741d2c14d5f"},c("span",{key:"286a9eb6372bff40758493ed67b9c67dd8915a47"},c("ifx-icon",{key:"cc4e79905eac6385761f3972a701d4245627a39a",class:"check__icon",icon:"check16"})),c("span",{key:"43c384b79303d43133a8ee055070c24ae9946e2c"},"Adheres to web standards")))),c("td",{key:"b7f8ee1d5a53dab75acb1299cf6adb5d62e7c691"},c("ul",{key:"a9c11b44cd34715c0b1c5d1d0643ceee7ede8b95"},c("li",{key:"5efac007eb5f1db55fe6e19dbaf97c7248a21a2b"},c("span",{key:"786c759c4c411acc07486f12fb0b5596c79eac29"},c("ifx-icon",{key:"25278b1d67aaa39374fb49dbaf44d86b497aa678",class:"check__icon",icon:"check16"})),c("span",{key:"c181ff6fa4a32f617600cf356dfa7a08d3ab1c9c"},"Incorporated dropdown-menu for individual item selection")),c("li",{key:"b556d832b146892c24114de717eeeb8125aeefd3"},c("span",{key:"fbe2c4784a2824fb30d2950e19623d954826b949"},c("ifx-icon",{key:"8e330e55cbb49d8129db3cf6457c9ab34e577f08",class:"check__icon",icon:"check16"})),c("span",{key:"fd5ba17aa83a7d0473dc7e2dfd602482abff02eb"},"React, Vue and Angular wrapper integration")))),c("td",{key:"a6a408d7ae956c0ec4e6896bd674ec9add583531"})),c("tr",{key:"6f690cde04af8a16a630ceb38f4b235b58edf1cd"},c("td",{key:"0ab24a91d163946972931ae8da379e7369e18883",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"fbcf93600c257b1f5beaf8927b1b2ff320d6ce48",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-chip--development",size:"s",variant:"bold"},"Date Picker")),c("td",{key:"4a1d0e795ee5e7e159b639485d16c83609d31225"},c("ul",{key:"205702e179ddeada1f569fb09dc6d9ae345ed8d5"},c("li",{key:"2707d5413de8ad8e8b7c8115ac1a41c110e1d140"},c("span",{key:"f1efcc817f07889ab6dc2cadc22cad216df42189"},c("ifx-icon",{key:"4ab89b1415a170fae53b1ec9c2f2d3bd46adbe6b",class:"check__icon",icon:"check16"})),c("span",{key:"75a7e077c0bffc39d390d7d4fddac0696941024b"},"Provides a customized wrapper and theming for the standard date picker element, enhancing its appearance and user interaction")),c("li",{key:"4947328adfd02d748ffaa5b27551887537a4d0d7"},c("span",{key:"19d0e20c8544f5f5e38265c6ad06a3bd3d21b85c"},c("ifx-icon",{key:"a6fef6ea6513452ea643b8d3bdfb9e9b1e339015",class:"check__icon",icon:"check16"})),c("span",{key:"a13d2df19e05232397a45df7c5463e99b581b79c"},"Cross browser compatibility")),c("li",{key:"54fbcad2c3b43f87e0c15a791497d3779c3aa055"},c("span",{key:"b5d30c99e2976898a78a3dcf31657daaab580d84"},c("ifx-icon",{key:"0af202df7640c480217cbc792d7c45db83a33f78",class:"check__icon",icon:"check16"})),c("span",{key:"492c4afd0aa5daf4b6068de63241c112c88cec3f"},"Form integration")),c("li",{key:"30128bcc37d3a70170dc5551b79aaa99919246a5"},c("span",{key:"d308151a63c643a8df2c83f2764e81c4564baf85"},c("ifx-icon",{key:"6e725463f48334d1bb90ba1b11f831a373abbd13",class:"check__icon",icon:"check16"})),c("span",{key:"c89ce91ee16a5ca6d25a83c3e555b32d8ccbec34"},"Adheres to web standards")))),c("td",{key:"c7cbb7a809986fb0dc046c3488b85980ea2d721a"},c("ul",{key:"0c78969ced85cdcae2bcebc7fcffcc9e22ff05ff"},c("li",{key:"d3acf14c01fe47b97e0267e591eeff9f901514b9"},c("span",{key:"8d560ea88eec5f2434642995ecd49ac44c2cb248"},c("ifx-icon",{key:"683e52263097cfe5d281c0d5ecaf319a1f5c9c15",class:"check__icon",icon:"check16"})),c("span",{key:"47efbbefa64157b3395bc20079b16da2b2be7cb2"},"Range")),c("li",{key:"31c478127fb3fde8b6e49620c781833eb905a56f"},c("span",{key:"0430d6e67498f719b92145affdb1a1175518e5df"},c("ifx-icon",{key:"ce14321306d050cae47b9cea513e877f039c0b24",class:"check__icon",icon:"check16"})),c("span",{key:"9fad64bc663870483bd29cbdccdf696fdfed83f9"},"Default value")))),c("td",{key:"3c59057d56be6724171bf1e5cfca801f07827cbe"})),c("tr",{key:"1f04a96d6ba70436c87a3353344cc541a113e211"},c("td",{key:"4f807333e774810a20a26c7106eaa9e39450728d",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"f07973f7d036454c7b78ddd8149ef4af52def272",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-dropdown--development",size:"s",variant:"bold"},"Dropdown")),c("td",{key:"0c6b11c394e2af4ec33e1059cc08c1426f517164"},c("ul",{key:"9c47f0280172b54bc21e1903bce33be6e13e1a8c"},c("li",{key:"cc92a1e09660bfa2c273cb74fceea66d651ae457"},c("span",{key:"a0badd6652d961d453f7dc65fa8d54dd3b378242"},c("ifx-icon",{key:"87bfef3cdef3038c683f3946204eb42198eaae66",class:"check__icon",icon:"check16"})),c("span",{key:"b7ccefb2736722dfe329c73b9b5cd040ce9b3769"},"Offers a versatile and interactive user interface element for presenting a list of options or actions")),c("li",{key:"785f7f5a71bab6022d8e5e68c5dfa866bc0eced0"},c("span",{key:"3f2e904e2ad32b644d23e347df2878a731192c9a"},c("ifx-icon",{key:"2af3cdef7072bfe95dbe575a0222a832b12b253e",class:"check__icon",icon:"check16"})),c("span",{key:"70a13b0eed0c3ee27dd7bbaba32face2d6f1466a"},"Ensures consistent behavior and compatibility with web standards for a reliable user experience, while intentionally limiting customization options to emphasize a standardized appearance and behavior")))),c("td",{key:"408a597c00e3dbd073bddfd4ed7f54df0581dabb"},c("ul",{key:"a9f3cc869bd31ce8e01a5c386c2a8d7031d3959f"},c("li",{key:"659534ef1f58a6e153d1841f55bf0778917f3dc9"},c("span",{key:"029cb44a96064bd9f5e6a220f944f20572c2700a"},c("ifx-icon",{key:"2934819a00eebe5984e45cda2cbb3aab56c81ee2",class:"check__icon",icon:"check16"})),c("span",{key:"0d67aeae57f479174f904e746f89a3bd7570e506"},"Search filter")),c("li",{key:"8c46d08850dc168669f8e67ce8d7a8f06dc300eb"},c("span",{key:"153da3237732ecf6fff0065731ae3d950ec9b87a"},c("ifx-icon",{key:"b44ba9358c75e57b9b1d0a3aeefd952c906c8337",class:"check__icon",icon:"check16"})),c("span",{key:"54710722cde959d9bd34f93e7334d259297f23e9"},"Header section")),c("li",{key:"870952f98c9a94011e4755bb757f185107cd79d8"},c("span",{key:"623d5972042325148de6c692b3c6583f5c70b1d1"},c("ifx-icon",{key:"d9b3a3355a998409df0356552da2c53503416a08",class:"check__icon",icon:"check16"})),c("span",{key:"66ebfda2bbccab4ac64cdf9735c973cf8283ac02"},"Menu Item Divider")),c("li",{key:"fb3ac21a2779983c66f821fdd7f8df685670a253"},c("span",{key:"4c1c2c89efb4fcc341eb7b47af37743b83cc4b1f"},c("ifx-icon",{key:"e8cd525d4086a71f6a3dd0391f5a449574a51b25",class:"check__icon",icon:"check16"})),c("span",{key:"2959040569208049973571074a542b80929fdd3c"},"Icon incorporated")),c("li",{key:"6e3bfe807f297d586b1c2199f30c3c9eef7f68cf"},c("span",{key:"e59f2862e60a8107265baebaeed793429da9894f"},c("ifx-icon",{key:"bf2b110f490f69126d9be4d780d2e41e24532a5a",class:"check__icon",icon:"check16"})),c("span",{key:"f9700dbeaf6f2da106c87cbef642c068f797c114"},"Extended customization and configurations")),c("li",{key:"3930d1428356e3c99848781a63efc5d9b10162a4"},c("span",{key:"b58e46e6d08b5db449d898dcf4e173f3d94cb0d0"},c("ifx-icon",{key:"af76763f56c84c266c46d4d0c7213a5a572e937b",class:"check__icon",icon:"check16"})),c("span",{key:"3ff444f7578b4e0e3d81cc87822844eb17c08768"},"Separate label trigger")),c("li",{key:"2b08cd99f21e91641f14c7c5597b5360505b2b0d"},c("span",{key:"78c3de6c6c5862479864f58c8b31e677cc1fa0c7"},c("ifx-icon",{key:"1916685d21dccab187bfb8f0fdf319882eded2b6",class:"check__icon",icon:"check16"})),c("span",{key:"c4b3f9011460de2465d4ad950ef7641158a5b718"},"React, Vue and Angular wrapper integration")))),c("td",{key:"0ddcd44ad31b8a3ef1653e4749f8c003ee5ce84b"})),c("tr",{key:"0654d593d3e10566da036194aa7258320b454646"},c("td",{key:"6c7f488a7de5d85ca933caab0221d5942c7f7946",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"53d2e268e6707d5ddfe26a8a79399030de0d62d1",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-footer--development",size:"s",variant:"bold"},"Footer")),c("td",{key:"f1d04280059a15ae5b43db674145d58bcbc32fd7"},c("ul",{key:"c6ad63fc5a6858932665315aaa44af27cca662c9"},c("li",{key:"05d17de8c8fb04bbcae20cb550c82e559e278c1d"},c("span",{key:"8a3b2f26ea92c8b6018358d04e705732eea4ab66"},c("ifx-icon",{key:"010b1b497a4d0aaa1f3eaf619c3ab0bfdb944422",class:"check__icon",icon:"check16"})),c("span",{key:"c337cc3f64f7f7e610c726408b830525fe5c6ff9"},"Provides a standardized and customizable way to display essential information, navigation links, and branding at the bottom of web pages or application interfaces")),c("li",{key:"2eb909c87d451d86e219881f4bf959369f1eb618"},c("span",{key:"cf1515e28a3cce340170383c0cb8d57f10b1906f"},c("ifx-icon",{key:"e0a52b7df9d5abf1082b5a560495f154eb08a127",class:"check__icon",icon:"check16"})),c("span",{key:"ec46318fb11db73616844110daf6fccbd5ca4373"},"Offers a flexible and configurable layout for organizing copyright notices, contact details, sitemap links, and other pertinent information")),c("li",{key:"6e5b0effb14299f6bfcafa5787dca833afe2c8db"},c("span",{key:"d6c8a57100107aca2e45e951bfe0bb272685bceb"},c("ifx-icon",{key:"f898e88a45ae4df646672d60762584f4e5a3dc32",class:"check__icon",icon:"check16"})),c("span",{key:"793c84ae93f54e42fd14a0fe5a0f0631c1e98ff4"},"Adheres to web standards")))),c("td",{key:"75658a1c7af7668517ac27d5635278ca7ed839fb"},c("ul",{key:"88138715a150df9de0be1e26f875a974d9e63b44"},c("li",{key:"4a85b01eb58d97cac514387284fce1521106071b"},c("span",{key:"856e0577006acae8ed2c300a58ff33054c154863"},c("ifx-icon",{key:"2350637c0363257cc55729ad58aef6d396cfa896",class:"check__icon",icon:"check16"})),c("span",{key:"1e05af288427a9028c5fb9d87ef36fc1f8f78a15"},"Small, Medium and Large variants")),c("li",{key:"c7a4f6666f08e61463fa5e3afb903adef8384df5"},c("span",{key:"2aa2bc9369a3ab70b538101a3497fcce50b5c375"},c("ifx-icon",{key:"274a5fe2de7b5c5e20b8cbab0d6655f6c2fc5ede",class:"check__icon",icon:"check16"})),c("span",{key:"80c21a760b7a46b484d5c0109312d87635bb5154"},"React, Vue and Angular wrapper integration")))),c("td",{key:"c0b4f5b5a0dcceb2f647e1cb3c9191f479fab6f5"},c("ul",{key:"20986cd78f73b2e1d6a6c3585ebbbff779672ee2"},c("li",{key:"6eefe9ac133f96ea9dc1eff166555349971465b3"},c("span",{key:"2f426de6fdc70454d250229da86d02d5b54229c5"},c("ifx-icon",{key:"0be807d5bb1b7e4cc3895635d7d9817626ff9cae",class:"check__icon",icon:"check16"})),c("span",{key:"4aaca7d5246dd44bbfbbc526a01f5cd3dad9ca47"},"Customizable and removable links"))))),c("tr",{key:"e9600d3daef4c4cf3accf81a56afe90a3f422a94"},c("td",{key:"a9099a82c1b24a3ad323aa5a58c06d465b88c8d3",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"ee028d54085809a711afce8782c75321b014843e",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-icon-button--development",size:"s",variant:"bold"},"Icon Button")),c("td",{key:"0e878b16849442e9d7d783a5e59e3375c87a1d0f"},c("ul",{key:"2ac45a2139d411a8e68fb7dff42557aac7619795"},c("li",{key:"92f7e1cb0478ceb8e8a532f739d6f4a359779646"},c("span",{key:"772d444ba1767261d4b31e9f64e75b0f86d2b71b"},c("ifx-icon",{key:"4c2fc0548c4dca6a6cc42f4d9b805f544420fc35",class:"check__icon",icon:"check16"})),c("span",{key:"11ba6448168a834ceb81516f506fcbafab3f0953"},"Offers a compact and interactive icon-based button element")),c("li",{key:"c2f713d166ffd6469911a004154f6bb961427545"},c("span",{key:"c1148f7052bb69c05fb6f345a3c214295d466931"},c("ifx-icon",{key:"9754072ad257f46c53aa8201b3873a2814c3c0e0",class:"check__icon",icon:"check16"})),c("span",{key:"0d486d6a9db7bc34c58934798d69020ab0638256"},"Provides a limited scope of customization")),c("li",{key:"8981a585c8c76d37b8fff930ac44c0631c257ab8"},c("span",{key:"0f0136ea85d8a2f805526d8f2981d661781c1ea9"},c("ifx-icon",{key:"0b7bee27c050bb3af18cf86a22ad5605dd901905",class:"check__icon",icon:"check16"})),c("span",{key:"cd947f71e82abd49c40bb342a91687ef70f2443d"},"Adheres to web standards")))),c("td",{key:"b2ff85228cf73207b10ee2806f43a7db18667495"},c("ul",{key:"35c45540658fb3fea53d1920d2f72e28d2aa85c1"},c("li",{key:"088eff4e7c0ecfb98c4978f44bb001c2b426a97f"},c("span",{key:"97d30488ec124bd10513305d9c0e4439ff86ab07"},c("ifx-icon",{key:"acf4d1ae1e84cc0651dc5028d2d120b7bf773e1f",class:"check__icon",icon:"check16"})),c("span",{key:"2f5524e8fb0ebc5ecdfbe8d321a6b0d5d878312b"},"Additional Round and Square shape variants")),c("li",{key:"1fac4f1636c37b2468008053f405ca16ee5b77f3"},c("span",{key:"a8d68d0ba05557634372cad3febd084b4fbd0c8f"},c("ifx-icon",{key:"98797d33cec59983bd29404fcf6305767cbd78e9",class:"check__icon",icon:"check16"})),c("span",{key:"5fac282e40c78d388546bd23ec486c95d05c3f1e"},"Small, Medium and Large size")),c("li",{key:"faee645a2780c540bf13de09660853e682e9241e"},c("span",{key:"5df3133992faf9732cce20d12f6c1faad51fc883"},c("ifx-icon",{key:"99050cd2bed724621b4dc9d024d0aa19619b8818",class:"check__icon",icon:"check16"})),c("span",{key:"c1efea74612b6b7d44b3ad89a956ea04f825721f"},"React, Vue and Angular wrapper integration")))),c("td",{key:"39a6ad178a3500b95de9f9fa950a056a4c6a3602"})),c("tr",{key:"418fc7bf1a72688b8fd14ff51cda4db5d5071987"},c("td",{key:"4e6c95c7b2f6f93dba6812447eaccda0daf13315",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"d14a18515bd1d24395165e2c90a75f65b51f0995",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-icon--development",size:"s",variant:"bold"},"Icon")),c("td",{key:"2c8ca7d2cc59e8d97c6a36c92e7ab1e493b89f63"},c("ul",{key:"3365bcaf45bb10aef178e8318ee358a5fc1be7de"},c("li",{key:"6871fd78e34a6e045012c0089af6d016dec9244f"},c("span",{key:"100ffdd5b80032db6a1233cc69170ef0402ab45c"},c("ifx-icon",{key:"224756e661f0fdd78110ee089cedbdcd07fe99c5",class:"check__icon",icon:"check16"})),c("span",{key:"7a74d64a0dc037041c11a1a2e6295f67c2767a5e"},"Offers a wide range of iconography options, allowing developers to easily incorporate symbols, glyphs, or visual indicators to enhance the user interface and convey information or actions effectively")))),c("td",{key:"e10e116c86f4372bbf2f6d28c16394dff3db4efc"},c("ul",{key:"aa8145cb344ed4f1a08ce318c19adbd315411052"},c("li",{key:"a791ec140dfae771ad06d4b3dba9cc00c518a926"},c("span",{key:"4ad3387dae9d667a11e55b693dc0b02bbfc20457"},c("ifx-icon",{key:"515d9a6ce926b92a05f97df014c2033d3cdd27f9",class:"check__icon",icon:"check16"})),c("span",{key:"902d5f6d5d76b369443c3f254fb563f20f1164eb"},"React, Vue and Angular wrapper integration")))),c("td",{key:"7a14761e81a5d5f461d6d39ab97b9ddc3ced68b9"})),c("tr",{key:"e9ff5bbc121754bad9dd9dfc5027ea154e6966ba"},c("td",{key:"d1f05df5c7c8c54caa444c281e49388cb41ef292",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"e010bbdb5621fda4a49d968e424b469a0ff91222",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-link--development",size:"s",variant:"bold"},"Link")),c("td",{key:"03d13ab6590902377dc1565e57dafc84fcca54e6"},c("ul",{key:"ea315c68de16533074812b2be8843f3c9955f0e6"},c("li",{key:"b19b558fc1e712854d2eec02cf13e943a447d32e"},c("span",{key:"82d6add842b45f6cca9a110fe1ee3ca19c2670d2"},c("ifx-icon",{key:"f8e42d1a3aa7d324cbb8c6309808758ec311059f",class:"check__icon",icon:"check16"})),c("span",{key:"30e4133483cc36c183a381102123252a866a01a5"},"Provides a flexible and customizable element for creating hyperlinks within a web application")),c("li",{key:"6e39f5f846a459c21858849accbf4875c8bf82af"},c("span",{key:"ac5418d21658798aa3c641520d1090d35fd27b19"},c("ifx-icon",{key:"67ac8663af260a789ca3842f0c7e1384834b0f7b",class:"check__icon",icon:"check16"})),c("span",{key:"625b892672cd53ce31d89d52f0bb55f3d41cc655"},"Offers essential functionality for defining clickable text or elements")),c("li",{key:"c1501ed7c0cf2391319c70e6195f29e47014e4a5"},c("span",{key:"5eb5653b9c333f270b66e059704878de8d06a518"},c("ifx-icon",{key:"cfcb72d144cfdbdb2fa72c5f18cd909e7f01152c",class:"check__icon",icon:"check16"})),c("span",{key:"6e58df418684d36c73888e7aec7eaef488799aa9"},"Adheres to web standards")))),c("td",{key:"1d18da7dd881f34b55bb9845f0cf10484b6970ef"},c("ul",{key:"a615e398c35201bbf6f28c5d0c8a7975c2034751"},c("li",{key:"4bd874d3d6f84160d03ab9ffbc681971001d77fa"},c("span",{key:"1b7d4a0913ec28ce103e2266b3a9e7809add6fdc"},c("ifx-icon",{key:"55ad424684e47944ea4dbf7f3f3a00a1f5af0d86",class:"check__icon",icon:"check16"})),c("span",{key:"eba1c5ada73dac892e70abde68d39f3defaa93c8"},"Small, Medium, Large, Extra Large size variants")),c("li",{key:"bb96ac7fdd07166c3c7d0dd37958a916b6af7afe"},c("span",{key:"a1fc7dd32c51d67b8d779f4fd485efda2b7493ae"},c("ifx-icon",{key:"c33614fbcacc355a9c4e1eb98f227b8628d98387",class:"check__icon",icon:"check16"})),c("span",{key:"48c0705a8adff0a7902a562c0189ff66709cc960"},"Icon incorporated")),c("li",{key:"9bd69b4a96fb98e0d06e32dc6dfe92effde1f3df"},c("span",{key:"9cf125b91fdebe574dd8b5ce3a9e3228bd44797f"},c("ifx-icon",{key:"5c3f8e6eb2b42c37ec8528883f4770f12faae9c1",class:"check__icon",icon:"check16"})),c("span",{key:"b76a691438fc7bf885cb54d4aa75b37c09066f98"},"React, Vue and Angular wrapper integration")))),c("td",{key:"5d0fc0afc0f20418737c5abd6ae78fd2305a95eb"},c("ul",{key:"297fadada75d6337005f9c34c5b2cb5d3879275d"},c("li",{key:"95ada9960d8c5b12fe50723cd5ffea23770c083a"},c("span",{key:"71b399cb2213c5f66469d74fd9a599c3a33475c3"},c("ifx-icon",{key:"ba779945df8aff6cfb69129f0cc837376d668f03",class:"check__icon",icon:"check16"})),c("span",{key:"196966654893db82936fe6866b4caa4435772872"},"Bold, Underlined, Title, Menu state variants"))))),c("tr",{key:"537922ad91099b4169dfce68e7ee19810f782ed5"},c("td",{key:"8de6d61a7dfbfc3fc59b463e12677b69b430de25",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"c0681522bfca89c31853373a14b7d6dfa8e4b7e3",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-modal--development",size:"s",variant:"bold"},"Modal")),c("td",{key:"d5b44525202b31cdf4650d53a15c2bd75c754c9b"},c("ul",{key:"48c8734c63f1fd4762feb53514b897d2b02668af"},c("li",{key:"66c8f0781221454292a41441ce261ec82e187245"},c("span",{key:"4163a8b8d7c0bcde93e625d461d42b2331128df8"},c("ifx-icon",{key:"eaca63e47b4ca279c927b5b95c5e6a5676fd421b",class:"check__icon",icon:"check16"})),c("span",{key:"3ad80917d43a7e53f5af920792143965e9256018"},"Provides a customizable modal window, typically used for displaying contextual information, user interactions, or additional content without navigating away from the current context")),c("li",{key:"4cf0afc5c7c4e475b512be1b7c12a3f9b5a8a4d4"},c("span",{key:"2d0090199135049294e698ab08e04cd77581786a"},c("ifx-icon",{key:"efbc23324b08d1d67b5a3c9ca18460bf75e4b1e5",class:"check__icon",icon:"check16"})),c("span",{key:"f76661cd00c66ffbace2a573d8518eea340c1fc3"},"Adheres to webstandards")))),c("td",{key:"fc421dd50157fdbfdf3594048392c73aa31c7ca0"},c("ul",{key:"f25db154795af52fdb96aef52dfcea1e3dbc8a55"},c("li",{key:"af0fae3a887ba0355058cdac691569b32c02d31e"},c("span",{key:"7e287bdbde00f6c8dd76433ab78999170a77ce14"},c("ifx-icon",{key:"58485c1c3e1beb471c3b21a809b43929eb386427",class:"check__icon",icon:"check16"})),c("span",{key:"6f9a0342bfdb3e2380a3d8fa1b220370c367dae3"},"Alert-brand and Alert-danger theme variants")),c("li",{key:"31e310009636d2d54b56a16b2d20879fbcc930de"},c("span",{key:"ac4f0e94c5a61dd71a28c1e7db86c28f8e5e00f0"},c("ifx-icon",{key:"b4f5566330bb134d2274d79b8c1c6711c0525c8e",class:"check__icon",icon:"check16"})),c("span",{key:"8f008f7fc9c5d4670a04493d7ced595793348e68"},"Extended customization")),c("li",{key:"10a86a58a2405e954dd553979dd20727ccf39de8"},c("span",{key:"c81dfaeaac2d210e57162a7b9ad4248875ff2da3"},c("ifx-icon",{key:"3f0bb91449832cf13ccd90855e85d1e326a61fa0",class:"check__icon",icon:"check16"})),c("span",{key:"ce4f53ea50270d5b0b95039fbb9e6a0cbb57b8c0"},"React, Vue and Angular wrapper integration")))),c("td",{key:"9ef8d604df4ab4abd84f47baeb2f57846a6e1d1c"},c("ul",{key:"3207ff8d6375de85a5935beb160cdfe760a93341"},c("li",{key:"8b70eb8bb89e30bd5cf9118c3c977751c95d8de3"},c("span",{key:"9f31494505c00b6c21bf3aaf0f7877c9a48819ef"},c("ifx-icon",{key:"b811b0d6da5a95ce0581a4d334269c57bdc68ff0",class:"check__icon",icon:"check16"})),c("span",{key:"77aec387e605c180ffa478fd24f2064795e6e638"},"Removable close button"))))),c("tr",{key:"45a16655daeec694b2f27fd05308e98f852956cc"},c("td",{key:"49044181ca97decefb7978d59f50ba198f8dbb5b",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"f2e0527e1b2d9e7e6b9de5c7b2fccbf2aa8ca38e",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-navigation-navbar--development",size:"s",variant:"bold"},"Navbar")),c("td",{key:"a2d003639d5c266d0e4cf319306bc8c4144aee6f"},c("ul",{key:"cd65111bbcc6db64b924dbb598261b66de2c71ac"},c("li",{key:"28bf17384d77175197603c73668263c83850cf97"},c("span",{key:"96fa1a21debaf1b3336afda064b93e1a5676fef6"},c("ifx-icon",{key:"23d70b4d3b6093ab8bacfcdc74d8b14f6e747905",class:"check__icon",icon:"check16"})),c("span",{key:"dafb0174ab6ead031d05e5332a8afb419f9ecd35"},"Provides a standardized and customizable navigation bar for organizing and presenting essential links, menus, branding, and interactive elements within a web application")),c("li",{key:"5c55fc40cb7436ae83e1c08644d84799b04b3879"},c("span",{key:"9ae4703b9e341faeea46b28bce42b356241fa62e"},c("ifx-icon",{key:"f0216ee1785d1b11560367811ed48f77fbdafce5",class:"check__icon",icon:"check16"})),c("span",{key:"2f511083515050e728b6ecce9c9c7ed1332fbc02"},"Adheres to web stadards")))),c("td",{key:"188d77ebd12ba7f878f13b57ea8b044fc4b0d49b"},c("ul",{key:"dce408c4665dfc9c5ed1b7877b993dd040d48873"},c("li",{key:"17f12e4fbcbb412387dbc0511595f01879f32f32"},c("span",{key:"30205ec707798d1b20bd9f5bde65b57053da296c"},c("ifx-icon",{key:"0d101de033913a09b26dc1e7498008dd99689fc2",class:"check__icon",icon:"check16"})),c("span",{key:"d7706961e9b7686ec8fcdc3c9f6bb6626ac457c3"},"Navbar-profile component")),c("li",{key:"c8653cd3137a6aaef89ab4f1e8ad49d8245beb52"},c("span",{key:"02693a988eac07727366661cd35bb0350c454fc3"},c("ifx-icon",{key:"c743c18a7c85cc03543399e6757b8a86b032648f",class:"check__icon",icon:"check16"})),c("span",{key:"3da444bbba1913c6d5eda63bea831469bbdec8e1"},"Mobile Responsiveness")),c("li",{key:"2f540f8e2f5658ca2829dcce83d1c54fc9485348"},c("span",{key:"9ac76916c6b10d452cff39f70fed223ec170fcdd"},c("ifx-icon",{key:"588ed2ea33eebffb54ff059213fab0899a233d2a",class:"check__icon",icon:"check16"})),c("span",{key:"b0e38b59b27b014609c1df0d2f216d74535fb02f"},"Mobile Sidebar")),c("li",{key:"b38639a5943cf94c9a08a568b178ba06e319e2fa"},c("span",{key:"0e065b6717f9bccb62d42af4267c6513fe40ea6f"},c("ifx-icon",{key:"168a11510b15406bb0fc15672de607c76d718876",class:"check__icon",icon:"check16"})),c("span",{key:"d47a0cca3e865d8642521a42eac60b749eae9032"},"Extended customization")),c("li",{key:"0fd88047908c9e6a2ebcd173ede5740432cd7996"},c("span",{key:"d44658e5c94d3b3e4f67781ce66852013d921d03"},c("ifx-icon",{key:"6ceb5764a6e10c9392e04c3c8e000e3190edac7e",class:"check__icon",icon:"check16"})),c("span",{key:"3d6d181c1c634a85238324a7c0e181c5efe5fb0b"},"React, Vue and Angular wrapper integration")))),c("td",{key:"3ec5273218e88ea02b50714acc6111b3c33521eb"})),c("tr",{key:"977ee774fb3b960d078a1e02205397d571dd9bac"},c("td",{key:"0cf9763f2e6928740dff67e04063550b71db06a2",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"6af24c6648e4a64aef8308a783bdd2cc953db670",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-indicator--development",size:"s",variant:"bold"},"Indicator")),c("td",{key:"0ced1a9fdeba5c04bc299fa353507bc88a7ca8e3"},c("ul",{key:"3cbc60e5b59a82b33ff110c843c437d40ba16c18"},c("li",{key:"628456639f33513c06a5d0baad0869afcd548a6b"},c("span",{key:"1e7dbde9b639e25e7c0faa974403e747c4fae349"},c("ifx-icon",{key:"4ce1a3df73ef12cc620729b8cd8aaf19762efdaf",class:"check__icon",icon:"check16"})),c("span",{key:"2918052f4b2ee0596ef9add4aff94709d0decc4e"},"Provides a compact and configurable display for showcasing numeric data or dot indicator")),c("li",{key:"f43daefcc50cc8f72d4e792146e3c2d7ee2a2a65"},c("span",{key:"fd4415548c9f506679a7343e1ea9aa66bcf97611"},c("ifx-icon",{key:"885641f801509d003568a71a9b7a2d30026072ce",class:"check__icon",icon:"check16"})),c("span",{key:"7f1c20e51ed1fdf4d58a8d1bf8736b74eac77733"},"Adheres to web standards")))),c("td",{key:"c3a0bcc8fcc59e0cb85e02b53b7b7f42cc937c41"},c("ul",{key:"ccb037de49d32d58152a19936768e5901abb1bf3"},c("li",{key:"a6ee93f4ad181a962a832ba9c203c3be61b2a22a"},c("span",{key:"760698fae3985bb22f00e3968ed270aa63b5e704"},c("ifx-icon",{key:"73fd56d6aec6892d39d4736913800aeebb4ee196",class:"check__icon",icon:"check16"})),c("span",{key:"0cb512fedc8f799cb95e93a0835ecd728aefc991"},"Inverted option")),c("li",{key:"5f3613954be9fc8d74299c81d1e2ec3622136a38"},c("span",{key:"40081d942ec33590db6267551743b9801f1099fe"},c("ifx-icon",{key:"d4b48fe0f83e5e5547efe23ee27b9c21ddf589e4",class:"check__icon",icon:"check16"})),c("span",{key:"d78e8659d0357297bd10c2e00fdd86327db3871a"},"React, Vue and Angular wrapper integration")))),c("td",{key:"337d71e07f01568563788a5e68f3afd875cd96fd"})),c("tr",{key:"33588cd5aa9fa1cb321565727d3c62de2fb46170"},c("td",{key:"06fb7b0caa9a8a435b2d69a937d1a103563fa54b",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"06fbfefa9d15bfcd9e65e5d769f622cc132f29cd",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-pagination--development",size:"s",variant:"bold"},"Pagination")),c("td",{key:"10325c83902462b57da905ef64113613bd55e505"},c("ul",{key:"8adf92e04b41c88445b60b05247c3d49eb56ff7b"},c("li",{key:"1e243a6b01ec8ddb304409122cf7a4a6b26c15bc"},c("span",{key:"ed2132f12c38c9e6eb2eef93c4d1d539f4f4f4bc"},c("ifx-icon",{key:"5dff6959c4b16e48073a4ce26f8a403e314ea521",class:"check__icon",icon:"check16"})),c("span",{key:"ce1928c0596de3d91e2cde8c3d5922b31d11c36f"},"Offers a configurable set of controls for navigating through sequential pages of content, typically used for displaying large datasets or segmented information")),c("li",{key:"c5f9c5b0a5eff0734330bf7ee737527600c2039d"},c("span",{key:"5740376c473540b11a2fdbacb046a329e8cd5d3f"},c("ifx-icon",{key:"822d2f89d042bccf6dc15ae41d0e2cb5f172ba40",class:"check__icon",icon:"check16"})),c("span",{key:"e1bc26de9bb876e9c9da2b025eb7f87f39d8bd00"},"Adheres to web standards")))),c("td",{key:"5669c66b8e6873d37ac2e37aea73d12542a6a509"},c("ul",{key:"1ae1c186a9e35daa97b5914a95cb31ac6ea38cfc"},c("li",{key:"66bfe1e69569e3421a1a03148446d4be7d35c62e"},c("span",{key:"228d791eb524a4d7b3dd366bbd4808b3e37a7fd2"},c("ifx-icon",{key:"045a9040f6f7f66ed3cca1e0055822c1cd120434",class:"check__icon",icon:"check16"})),c("span",{key:"971b94b0cc52d5f09b73e2101deeea10e707e97d"},"Extended customization")),c("li",{key:"2c203057251ff8bd9e791dcf12809503c6f29577"},c("span",{key:"2094335f5757712d39dd9dec4efca840dae53a6f"},c("ifx-icon",{key:"a42cf9521cf4d966e2e2facb3ed67912a463d654",class:"check__icon",icon:"check16"})),c("span",{key:"7d15e6958ea75fc4a0a05e1469fb5b36671dadcc"},"Configurable Results Per Page option")),c("li",{key:"ac372d103dff0bbb412dd0cbc274603297db7393"},c("span",{key:"a91e5560fff3d5e5a2a86604861b465e410c6521"},c("ifx-icon",{key:"d2677586bb59a9fd4ea42e87663b186c4cfd37fc",class:"check__icon",icon:"check16"})),c("span",{key:"f1c357f0030244dcecff5f45b2ad52ca00466081"},"React, Vue and Angular wrapper integration")))),c("td",{key:"f62f7b02617c42c95455b1b1068fe7148104b725"})),c("tr",{key:"1c92a648b2db66a2e589027c5cbd49134ac1332c"},c("td",{key:"42769dc644e9b3b45e48ce73f64820c64429e555",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"1a1fd1a88c3b044e4bac2db6caea48ea5605afcd",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-progress-bar--development",size:"s",variant:"bold"},"Progress Bar")),c("td",{key:"2675a4502f734a7dd0a2757ab9d08807de084dd9"},c("ul",{key:"97f04e5da67e227dd33b1b8c877b35abb2ebd4be"},c("li",{key:"54adde842b807cdcdc9411e2475da0a92bcf0e33"},c("span",{key:"7b8e51c68c8367ba4e2d8a6c9adca7e1447ba2bc"},c("ifx-icon",{key:"12b589234784aa4d3230569882067cf868c1cd52",class:"check__icon",icon:"check16"})),c("span",{key:"546ad7375c51d11d6079e6d038a82b487a520557"},"Offers a customizable and dynamic bar that visually represents the advancement of a process, typically used to convey loading status, or task completion")),c("li",{key:"b91740ca1617465e08861efa03158fbb98e55a8c"},c("span",{key:"62c1d752d6fab57275f6d8f93a73161732bf3a70"},c("ifx-icon",{key:"874600cab52598573205174629ebc5ad3b58a8b9",class:"check__icon",icon:"check16"})),c("span",{key:"593639878f5c85131b447400c95335c9b6b6d379"},"Adheres to web standards")))),c("td",{key:"87fae15ae7b2989fef169112ef9644121c7717aa"},c("ul",{key:"6730d09e5151b5223f73fcb86a426ef7d4d0cf52"},c("li",{key:"b9fb0b87d08f9985714b52d24ccab9ff94ff0be6"},c("span",{key:"02a4bd6fbca31b1678aa10b87be7130804c25aa0"},c("ifx-icon",{key:"8765ec2810ff9c6bba3be4db17aa9a304591706b",class:"check__icon",icon:"check16"})),c("span",{key:"31f0a53e5a212295e8c7f95b79bb810847ec6125"},"Extended customization")),c("li",{key:"509b190cd1475ce04b6638924f1ab3cd76666b02"},c("span",{key:"6b3f7fef90406e5e154d97a0545352941234097b"},c("ifx-icon",{key:"78586939074c83ca46168bbb73f1d879e576a9fc",class:"check__icon",icon:"check16"})),c("span",{key:"a6a7eda6bc89fe2f505d571e6381a3f17e1aa105"},"Show percentage option")),c("li",{key:"2ca86d40c0380760d8d31edac1f7e60d2ddd5278"},c("span",{key:"50bb95d1e06d65d3cf890768b1f511e075ef85c2"},c("ifx-icon",{key:"3a52137a2a10cc94331fbd857f3795ef0109972f",class:"check__icon",icon:"check16"})),c("span",{key:"a1bb69d76397cbaf9a18eaf238940abbae685b8c"},"Small and With Label variants included")),c("li",{key:"ad46f02e22d136858304568cf82aaaaeb98ca483"},c("span",{key:"7cd799153a63f3fd7e1f7020a7fd87116949c9bd"},c("ifx-icon",{key:"e4e02f32aa6f7e083c876d841ff3d296b0e08386",class:"check__icon",icon:"check16"})),c("span",{key:"9ce876f7ef047b60a40e48fba57a2976e91385b0"},"React, Vue and Angular wrapper integration")))),c("td",{key:"687dc4fd5d412368adf1151dfab0eb7f8395dd19"})),c("tr",{key:"071ac48ee409f5f11b6a99d0d671b445a24d37de"},c("td",{key:"a098b30cc10bf82f6322344f86952de793be6006",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"094c47ccf11ab71b51007cb654c73ff6933e4a93",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-radio-button--development",size:"s",variant:"bold"},"Radio Button")),c("td",{key:"ce0a9a69bc3f915471268a498a7188ec9314ade5"},c("ul",{key:"9d90ed4b256ed031548b1ba1c5b2926ce929860e"},c("li",{key:"9fcea941b27cbfcb26890b54621b54413c997ad2"},c("span",{key:"a19f7f3267bc1ce9334959e0dd5106e4a902dd11"},c("ifx-icon",{key:"b79be05af7d4f879d617622446df56ce81d4e992",class:"check__icon",icon:"check16"})),c("span",{key:"495aa82f3e8c510b42b7b1d42cc6033e85f60f9e"},"Offers a customizable radio input, allowing users to make a single selection from a predefined list of options, typically used for multiple-choice selection or exclusive input")),c("li",{key:"a6d33f9d8a196151e5553c5e1e8d89ea75c17091"},c("span",{key:"8ff467ac0630e8edb05ff43eda126a5f0a252ae7"},c("ifx-icon",{key:"d2a9a9fa4d33be55c3e71dc3845b4488ec49c78c",class:"check__icon",icon:"check16"})),c("span",{key:"ba3e0ec0aad88f2a44ebd3558eec664787a93b6d"},"Adheres to web standards")))),c("td",{key:"edfbd7f62b54db0689fb05f78d160db97e4ec956"},c("ul",{key:"73b5d56665fca515b5eefee430d2a6fb2dc92fd9"},c("li",{key:"088752024489f57f98ffac25ed4f3c2f1e123d3d"},c("span",{key:"5782fbb4e792d31f0abad28305183216763785f9"},c("ifx-icon",{key:"a2e94f281c16ddc7a0989548dc89ea1be915fccc",class:"check__icon",icon:"check16"})),c("span",{key:"b3e3e89472ee2f93839a3467c99af910058927f0"},"React, Vue and Angular wrapper integration")))),c("td",{key:"fa07b4a8dee2df05e069dfddb370c228c94e8791"})),c("tr",{key:"d5ccebadd5bf16ba3316923866dd32f6fc1e5872"},c("td",{key:"e276a08ebafd096ea8a792174ad83a3a8a94f7c6",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"63e9182eaa6e756b39df7bc62ad26bcbe2f6e474",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-radio-button-group--development",size:"s",variant:"bold"},"Radio Button Group")),c("td",{key:"5033cf0d03220952240a0873dfeeda2300dc5611"},c("ul",{key:"b8f708f1205f6d8547ca9b1f80a93df112859237"},c("li",{key:"3eba9395d30093852fb31170919baa45b23438d3"},c("span",{key:"5132cf3ec00ef80828f8e707fb1fc76f0e81a23d"},c("ifx-icon",{key:"4518620aed17474dbd334a71c21d874ca315d4d0",class:"check__icon",icon:"check16"})),c("span",{key:"2d343c3eb3eafaa920485a655c25f8b87ca9e13e"},"Provides a customizable interface for grouping multiple radio-button inputs")),c("li",{key:"c44f9d80783bab3a1aec16b8f1f4225cfd83c64a"},c("span",{key:"a691e23b9e65876d7acafc92592fd018214bc11c"},c("ifx-icon",{key:"3064061dbec365b01088b1aba27e5436ff5a5c8a",class:"check__icon",icon:"check16"})),c("span",{key:"15a670a2cec525ff3dabe7d1a1b6a638e79fa1af"},"Allows users to set and display group label, caption text and caption icon")),c("li",{key:"44cf0cd5a8bc888b6d1ee3dfeb14858fdd033cc0"},c("span",{key:"f25fb3a5134b8e503ee3f4986ac7e125fdd2b39a"},c("ifx-icon",{key:"50fd49b79e626e5fdfcb62382914ba5d6df59627",class:"check__icon",icon:"check16"})),c("span",{key:"3ba04db583ff1b44c8e12e930b72012097c4f48c"},"Allows to display individual or group error")),c("li",{key:"8158735eea7b5caaa6f58fe7cdec87b6ee56fbd3"},c("span",{key:"8c5bf222bc87b8380a48b39cdbfe094ffa0dd496"},c("ifx-icon",{key:"da028697ea6746cbe4b82879d0c5d247d0a4f4d1",class:"check__icon",icon:"check16"})),c("span",{key:"d467ee69441821dbd7c4715d50faf7346f3472ab"},"React, Vue and Angular wrapper integration")),c("li",{key:"921a91bb4183e9eeb6a1f8e0b2b71f3498c3e26c"},c("span",{key:"f017ef4e923d1581d5198c7b97ad8614ddd36699"},c("ifx-icon",{key:"c2bc27a38f1716e7130b27c23887431670324cb2",class:"check__icon",icon:"check16"})),c("span",{key:"c01e019d508965662a70e20361ce33dcf61c7acb"},"Adheres to web standards")))),c("td",{key:"833d26ba0fea4958fea023bbe4279f0ad65f773d"}),c("td",{key:"f890e8cf315c94fbfce5847986f86bd7b3ccd826"})),c("tr",{key:"fde19a13a7fdc3fab32a484aac7c5979bfa84492"},c("td",{key:"a79ecb1aa094a2fcf408f2d2319c43a762644ada",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"31bcfc880185fb636df907c529f8fb64a6b7efe6",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-search-bar--development",size:"s",variant:"bold"},"Search Bar")),c("td",{key:"3cb4096f47cd111f115f43c89f7d35b7464986dc"},c("ul",{key:"094e46e256f896bcbc017dc9d1fbed624140b408"},c("li",{key:"92cbfad1ebebf70b20aca36da9b4a474c11ad5f4"},c("span",{key:"68bbb5c42ea98499fd2dafdd242411fa0f4d4da3"},c("ifx-icon",{key:"0c4b55593b2ac9fb60d03faeb3c4518da6207a8f",class:"check__icon",icon:"check16"})),c("span",{key:"eb60d861bc3647a2b8cc3d79390822f12be15415"},"Offers a dynamic and customizable input area that allows users to input search terms and trigger search actions, typically used for querying and filtering content within the application")),c("li",{key:"5889a1e4c3133c05406c90eac3de973ebcf04a2d"},c("span",{key:"d0477ed6b9e39db5462ff8f2a397e09cecd3125f"},c("ifx-icon",{key:"5b5e3edcbf532c5baa1390e7ab3c5b29901cb713",class:"check__icon",icon:"check16"})),c("span",{key:"f7dcdb1e18e9ff635aa2b7948cf3befd5935b82f"},"Adheres to web standards")))),c("td",{key:"86d3ba8953b850b74f8241b204066b45865fc880"},c("ul",{key:"910df17072deed741a9d4585042b79fb3567d85c"},c("li",{key:"c292438a473e57dc34d4ca9246862920567cf785"},c("span",{key:"f83be3fb48500e83d75fa89a1da0bd21c87c760e"},c("ifx-icon",{key:"f3e6b898d3217f817d374cafc07309ca80f69f68",class:"check__icon",icon:"check16"})),c("span",{key:"1a99f787b7913be71cd899848c1bc5ef53f3662e"},"Collapsable option")),c("li",{key:"667d1e8abf69461e0097b2101d7c41829d939a93"},c("span",{key:"1d6871afd50073458fc8ca725b99b2a4e3615072"},c("ifx-icon",{key:"c1961b04f81c2607a701fd82e0d9294103831a75",class:"check__icon",icon:"check16"})),c("span",{key:"4e6f4515449932d11964826c6e388eb48c42cdc6"},"React, Vue and Angular wrapper integration")))),c("td",{key:"92d30e664a0b0ae12004c163dbd989d16c0af6ee"})),c("tr",{key:"de9d0dbb03f2ba3a6344c55bf56a4223bea962cf"},c("td",{key:"3dc6884a521d6af55f9bdecfc4d1080ee2f34c62",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"344446d67521c12499a68e8ad717b445d2a27e00",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-search-field--development",size:"s",variant:"bold"},"Search Field")),c("td",{key:"9c89ac60cc70f83129862aa28f5f2a3b1b209ddc"},c("ul",{key:"d49b5eef6f098a974637187f907b53c7d888b25f"},c("li",{key:"19890ccb7244b9fa5e3e17007de9ec90cbd0388a"},c("span",{key:"7986fe8b7cc10133f7eb97633a191635abaef5cf"},c("ifx-icon",{key:"f62e7addf184df56a1f69fa4db286a293029ce23",class:"check__icon",icon:"check16"})),c("span",{key:"a85258b51fbdc01fd7c77b67bc5d56147121037f"},"Offers an interactive and adaptable input area that allows users to enter search terms and trigger search actions, facilitating efficient querying and filtering of content within the application")),c("li",{key:"6838cc9c241c56295cd1686c764c12c0f345dfb2"},c("span",{key:"e39083a678f32d7afcc10f817244a0842cea4174"},c("ifx-icon",{key:"537942bab6491feae72fdfa0c03e386dc8fe5352",class:"check__icon",icon:"check16"})),c("span",{key:"112e439f2c1da0e2382109c6f034f0d0e972017f"},"Adheres to web standards")))),c("td",{key:"88ffc1beb723b070083ac3c17071663c8c74cb65"},c("ul",{key:"f12d1904b811d60ddeae0c71e4558bf25690702c"},c("li",{key:"cfe5bf1c26cfd46fe9cab0b576ef23f109acc225"},c("span",{key:"96cf481b6f4702ac8e93e7669083e05972cf7ede"},c("ifx-icon",{key:"4c8d5ac4f25ba85a5a4083b780c089ddc7a9a02d",class:"check__icon",icon:"check16"})),c("span",{key:"a1fc82f7d0458c6bc5bfef018c8939bc9ff36753"},"Show Delete Icon option")),c("li",{key:"ddb2b22fea4e4ba2f8314ac76d0592cda68705bd"},c("span",{key:"615e202c42000a651da87790c5f4f5009af8d591"},c("ifx-icon",{key:"3daa4be63dcfbecaff880da595f90b0af964600e",class:"check__icon",icon:"check16"})),c("span",{key:"652f961276f74c2dda30bb58d8f8421590657e03"},"React, Vue and Angular wrapper integration")))),c("td",{key:"b5ed25408defad8dc093b7e47e6020ba21848d43"})),c("tr",{key:"82bb4dd65d2a7437a595e09850cb55c35bfeb496"},c("td",{key:"f7beb9fe5137753018f01364b9125b7ef86c66c8",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"4199bdb6a2c0206b1c8bdbf24f344e43554dfa9a",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-select-single-select--development",size:"s",variant:"bold"},"Single Select")),c("td",{key:"be98262fcf0cabda995ef43992cc449b168702de"},c("ul",{key:"77858dc986d17a095afe4cb7ad173d8a6e8fb8f6"},c("li",{key:"17cb30e53eddd0b247760e9ee2fd380dfc4283bf"},c("span",{key:"ff329c21dc7bb5ebc56ed78c7c38692ee5a26545"},c("ifx-icon",{key:"9ba0bd7717faf91dc876f0aa656f314ea7e0fb02",class:"check__icon",icon:"check16"})),c("span",{key:"005191592b21bde4dc3aa2442f4ab3a6c4d87cf7"},"Provides a user-friendly and interactive dropdown list for selecting a single option from a set of choices within a web application")))),c("td",{key:"8b1f43da5f8ec5e09f9f3f365dde534f7fa33dba"},c("ul",{key:"9e0f4281b0b57db53482aef423565d343a1d6eeb"},c("li",{key:"cd38c9514f657002ec115824e306ff018fbc1bf4"},c("span",{key:"2b06f5a026ed1c8d9f9c8e551d8bcbfe4ad45b19"},c("ifx-icon",{key:"46d5938d73a1b0861d8b433d4b51e941d5731429",class:"check__icon",icon:"check16"})),c("span",{key:"68375b62467a88b8745fc736c36a50889979ac1f"},"Extended customization")),c("li",{key:"def179f1740f167cbc3d4a725b9c13a4000b7ea4"},c("span",{key:"5fefa4d6923728b6fd43848576a68abbb1d1c2a6"},c("ifx-icon",{key:"a00822281d261c20a72ab3761b3afa7958a0bc9c",class:"check__icon",icon:"check16"})),c("span",{key:"18d378be6f934f482a0aaa1bf259fc364f672167"},"Option to enable and disable the search")),c("li",{key:"e6aa62e2cf7600d59733ddf92b1fdbea8621ce3a"},c("span",{key:"11a88af3054efb8a3279998a70f846bf0bca8829"},c("ifx-icon",{key:"9ef38b3ab9fa468cbb0cbb79f353e757a4ff89d2",class:"check__icon",icon:"check16"})),c("span",{key:"f0ffae92f081b45f1ac154a5a585e0f7d22ee12d"},"React, Vue and Angular wrapper integration")))),c("td",{key:"1ddc0ffcf41d5e730aa7383fa2d5a7d0e3c7ebb2"})),c("tr",{key:"437557bcc365a8f5291debef6b1aae20ef846ab7"},c("td",{key:"4be37fce594e7a61a82085f7cf9af2eee5c946ba",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"ffb3037fdc99e82c4223130a6b10794c3fc9bea2",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-select-multi-select--development",size:"s",variant:"bold"},"Multi Select")),c("td",{key:"f953685a0e3f747cb85482947ceefb4583669791"},c("ul",{key:"6d265fb7ad5fdcdb35d36e1c11ccaf19a850d5a5"},c("li",{key:"7cc35a1c26a02248d68d1c43225cacac4e3da24a"},c("span",{key:"f9ab214a20b6ce0b062b764d4f7458b4795777e8"},c("ifx-icon",{key:"33be51e2507d8a57a6683ec28616bb6738d2fcae",class:"check__icon",icon:"check16"})),c("span",{key:"cae27fbf0f9fa718f874a7dcf03ee2499e7546d4"},"Provides a dynamic and customizable dropdown list that allows users to make multiple selections from a list of options")),c("li",{key:"2eb6062439d8589b85247a27ebbcea324b15e3b7"},c("span",{key:"4e3baac5968d1d942f4589cac519be9715bf3e6f"},c("ifx-icon",{key:"536e741fd8adf853229efaf2f623011eb300655c",class:"check__icon",icon:"check16"})),c("span",{key:"fbfff66916ae1fd3c6cd2181c850682b53089a78"},"Adheres to web standards")))),c("td",{key:"e5473a8a9e57d80c3b06dd4928be4941e7ccc77d"},c("ul",{key:"94be56780ef21e462af5f2cacd5f62cfb75ea14d"},c("li",{key:"738e3136bedd373909fd92404c18031c42c8720e"},c("span",{key:"fd136b19eb4358ceec3416b3630ecde15bdfb019"},c("ifx-icon",{key:"c76563665c89e5a086d2c50e000f32aaf4fdbeb8",class:"check__icon",icon:"check16"})),c("span",{key:"afe8f0d8738e571c03f533eccc647da176b9a74a"},"Extended customization")),c("li",{key:"1cd88a8ec34cdeb62c1c22200a0a69b8cfd5ae18"},c("span",{key:"34a637b314979d902d4998e5038afbd04ac02100"},c("ifx-icon",{key:"8713b7a914f73d3a5fe866c46063f15ab4327e37",class:"check__icon",icon:"check16"})),c("span",{key:"a306863dd93ea49544d766736cc193d133fd5504"},"Nestable options")),c("li",{key:"2b5706391ded305160f9588eea7d388dd47d40c0"},c("span",{key:"b9a41966a6ea4b89dd8ea24eb9e22b9381089f28"},c("ifx-icon",{key:"67f8b1513daedbcc2e7177d3fe1de1407b6a2f31",class:"check__icon",icon:"check16"})),c("span",{key:"ab65747775d9b0497a295c32e3e9a3e131ef4f9e"},"React, Vue and Angular wrapper integration")))),c("td",{key:"46692a282ee0496ad90fa9f5130f35e840e4ab51"},c("ul",{key:"264b392877619c9d6c3c81f9734c0a9c986143cd"},c("li",{key:"a9c43987c3cb62c9809f3faf2e91c207f4fdccd6"},c("span",{key:"f7b7da36e399048a7f04fe016dd05043c64d34c8"},c("ifx-icon",{key:"c29e1426784de9614d8e5ec1510cf68643aee93e",class:"check__icon",icon:"check16"})),c("span",{key:"0a8b3728c15cd8922b11e8c47d8bb6d4fb33f0b0"},"Option to enable and disable the search"))))),c("tr",{key:"e8d76ed006e303a8bc2cf61aba56295853e5c129"},c("td",{key:"f6871d2a6449f9d9f42b05cf28b9b96be2b9ff0a",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"54f64c80f748a6247f91f762cb1d86da1dec677b",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-navigation-sidebar--development",size:"s",variant:"bold"},"Sidebar")),c("td",{key:"c1729a4411bc49b228f4bf07b2751282469ef666"},c("ul",{key:"ea57dd99e9538453b7b0a208796fe12b0dd09526"},c("li",{key:"1027af08d06ce42d0a1a6605298d40f1bf82833a"},c("span",{key:"abc2b54fb6ab87ca10748a4cda35dc21331cf69c"},c("ifx-icon",{key:"bd2c1fe5425de7abf87e0715eebe1fe0c1f9d551",class:"check__icon",icon:"check16"})),c("span",{key:"5ab3cbd4977ee3262abcf8735f1ff2bc2b538a62"},"Offers a configurable and collapsible panel that typically occupies the side of the screen, allowing users to access additional sections, or menus while maintaining the main content area")),c("li",{key:"b9a21594278ddc76ee12c11347fe76e57e677825"},c("span",{key:"a068a7af0ba2521e3d5f33bd062ed24474bb9101"},c("ifx-icon",{key:"6a6b6766fd57a283d9d7df034598c749e39f870f",class:"check__icon",icon:"check16"})),c("span",{key:"c1da1fb8b316b309aa4313fa170d9892105d688a"},"Adheres to web standards")))),c("td",{key:"e253d7008c316415804f5ea4cd0b4a16cd660694"},c("ul",{key:"0320e467c451343de1b3f5eac906b57ba5a288e9"},c("li",{key:"1fe6fae8efd37e858a2aade8bb36237fa9c0e737"},c("span",{key:"44c76442044eb290b01d29e6629f6919dff5177e"},c("ifx-icon",{key:"8863c8513cc8599b4928b26b856d2efecc624595",class:"check__icon",icon:"check16"})),c("span",{key:"9965f52812d076529f16fd2302a567e294050132"},"Extended customization")),c("li",{key:"5d8a945097e3e9aa058695bbeda3c732f6d891fa"},c("span",{key:"adc2f3a90b4bf7f178cafd83490c9bda40fd01b3"},c("ifx-icon",{key:"7810b79f1c5a680d423a0d5624c1201efc9142bc",class:"check__icon",icon:"check16"})),c("span",{key:"c7e6f531aef856a09090a03ef5790505e1abde94"},"Multi-layer nestable items and menu")),c("li",{key:"52bf072848302200b2de97a75e64a916468424d9"},c("span",{key:"07672a702aac0dc5b7072868bd51062e2d7be51b"},c("ifx-icon",{key:"2665ec32bdd4e47d2dc12998506e5b5d68edf1e3",class:"check__icon",icon:"check16"})),c("span",{key:"5b66056f0ef671818cb804d6fd8239c3b7013c6f"},"Initial collapse option")),c("li",{key:"35f235d18ac9bc3806856ea7b7bb76e9a36cdb2a"},c("span",{key:"ebc94cf05ecca1e09db46879ba1ac87df0b56dd1"},c("ifx-icon",{key:"7e69af2927a4dd01a7356fde4b0579f38b5fa61c",class:"check__icon",icon:"check16"})),c("span",{key:"035cc723695187d0b510965db9554273bc700412"},"Active and action item feature")),c("li",{key:"3b94d2226e06732239b881eccd91d7f1292771c7"},c("span",{key:"6a9336595d95d867bf133fb2e18105ed08c4ac9e"},c("ifx-icon",{key:"6055a14f7b9c1faeade255d48dde4c42e1502517",class:"check__icon",icon:"check16"})),c("span",{key:"aed3506fe915d910fe66eb5a71e3f13ccb603885"},"Number indicator integration")),c("li",{key:"5de43f12397b8d18532a57b601b48d98b7cc3d47"},c("span",{key:"06f473c786f3120a22d6b84db6990166eb551959"},c("ifx-icon",{key:"4918531fc80173a6b93af2c79c779eb4873fb0cb",class:"check__icon",icon:"check16"})),c("span",{key:"be9cac83316590c072ac142dda0a8d1bbc645df0"},"React, Vue and Angular wrapper integration")))),c("td",{key:"52c089950b045c025f406b199770b86533a01bb7"},c("ul",{key:"ec3b498cf7d8108b1a10aaffc3e2c8df539db7e2"},c("li",{key:"7d92a79e930d73fdb7e66a6a5b1f2baea5ff4ca0"},c("span",{key:"fdbd410949ea9c0124f1c271f6cce38ecde77116"},c("ifx-icon",{key:"06a9f8ef1966e716379a0971f3f987dce7377b62",class:"check__icon",icon:"check16"})),c("span",{key:"c8ed35478de6124bb78cbc8b0f488ef04ec55c69"},"Removable Footer, Header and Logo")),c("li",{key:"9e7b261691ae65159ca3161bf274b233613d3295"},c("span",{key:"9f5944f121a95ee3ba7e78f8f578846ba2047e65"},c("ifx-icon",{key:"bf7bcc5985a2befc0b484601527f3524d991f676",class:"check__icon",icon:"check16"})),c("span",{key:"95cccf3838edb86461b6f158d583938fa00517c5"},"Removable and customizable Links"))))),c("tr",{key:"43ee7829390b20eab775f63581c87e0e34efd420"},c("td",{key:"a5ab969ff024445fb96ee7fa17fdfea3098d4a2c",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"3df081ceeb9e37ba49c9ba0fa20ef753fe169b1b",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-slider--development",size:"s",variant:"bold"},"Slider")),c("td",{key:"58582297186d71ae22ef2fb5b2f8383d77d352aa"},c("ul",{key:"88f1e87795181f36bd0ce86bf1649db7356efbc5"},c("li",{key:"b60d8dacd10f4ccf59b7fed557950e4a77c22f9d"},c("span",{key:"b1e358f51b3844c4cd682c8f4c51e49373d82d13"},c("ifx-icon",{key:"b9bd0f0115c19d51889cfd1afc5b36a5bfc073ca",class:"check__icon",icon:"check16"})),c("span",{key:"ecf90aa86638a0b433bc09a614524ac2c9a12e0d"},"Provides an interactive and customizable input control for selecting a value within a defined range, often used for settings such as volume control, data selection, or numerical input")),c("li",{key:"1e039ac344a53139338c55df97259b160fce2f21"},c("span",{key:"2f7f78ea00e4ef0b3e487bfbc01333c383e2e586"},c("ifx-icon",{key:"a743cdcdcd4e71950df3714e36e52d8b759bdf1e",class:"check__icon",icon:"check16"})),c("span",{key:"9bebfcd0cf145298bc75df15fd91b9081b367221"},"Adheres to web standards")))),c("td",{key:"b08e53b15e69a9e40475f0cf6d8e12652852a193"},c("ul",{key:"12cf3b9e7d3f4b2b452667ea18f238473429360d"},c("li",{key:"f2d196afd508a7be55f4c4a235dae5af9c2bb7f2"},c("span",{key:"4e11bad7113d9329fe82808315048897ee2c8f77"},c("ifx-icon",{key:"43652e2a8a600395f3219927217d8fcb90bf98b6",class:"check__icon",icon:"check16"})),c("span",{key:"79461136a91c0b61fd7673cd00c53f344e85e4d3"},"Icon incorporated")),c("li",{key:"4af52defabbf6608baa99f40aaf8b4a6316d18aa"},c("span",{key:"9eaf14b3c0140c49874c2c4ab9ed6574bd383857"},c("ifx-icon",{key:"824e7d64641dfbe99633099d4e9247512e3a7465",class:"check__icon",icon:"check16"})),c("span",{key:"1cb5a0ec4b0b3eb511c297c6da4fdb1f7eadd2ec"},"Percentage variant")),c("li",{key:"0d0b38ae9e6dc573b0fd2163013622559f588b46"},c("span",{key:"45139234c614b10ec7704fa789cd5b6b4db5eff9"},c("ifx-icon",{key:"cf71dc6ad62a00c70d5174a52a91231f29b01ccd",class:"check__icon",icon:"check16"})),c("span",{key:"b2fb5c1c83e2172c5100e529a88abd786bc25b0b"},"Text variant")),c("li",{key:"fac81efad83c32c827de3cea07dc247664a8ee5c"},c("span",{key:"908d0440d42e13f2ae2454e16812c1847050d9e0"},c("ifx-icon",{key:"2bc7407a5df7b1ce76c6908290ab556ae86f4966",class:"check__icon",icon:"check16"})),c("span",{key:"2c5917bc4d21adc28e35e9856acf23915ad14a3f"},"React, Vue and Angular wrapper integration")))),c("td",{key:"f9e0bc040eead415eebe3ac037950e333d4607b5"})),c("tr",{key:"b7b0b8b384942ca007e2e8bed2e59d7a46170c00"},c("td",{key:"36ed4e6cc5d511850445d1d9aef1c6d0dc76c823",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"2e6e99a7b4d418eda971028accfcc9b1fdb024ab",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-spinner--development",size:"s",variant:"bold"},"Spinner")),c("td",{key:"8f54b3e1f1da901d294473af120aafa069fd734c"},c("ul",{key:"c34a5b326a4a45b6fa50e4de5071bc661ffc7595"},c("li",{key:"5eb41365049915cf14864dd47f1d002b3e791145"},c("span",{key:"7668f524401a7f4881590c6a7a767559227493e2"},c("ifx-icon",{key:"58269d5cd9378476d9dad0409aac4f83e236b67b",class:"check__icon",icon:"check16"})),c("span",{key:"cb1e5f4b3ef75f3a83eb900e80886965b5988e7b"},"Offers a customizable and animated symbol that conveys to users that a task is in progress, typically used to signify loading content, data retrieval, or pending operations")),c("li",{key:"a3c94b7b5bcb3966921036bf066b537d804ca25f"},c("span",{key:"8de443637d2fd2b0e5a1306ed1efc19fd648966f"},c("ifx-icon",{key:"c1e4d32e9d026ba6ad3967ef0133348ae8639695",class:"check__icon",icon:"check16"})),c("span",{key:"1a11b8bb669c0f556e6f8e4791a4345b81b661a4"},"Adheres to web standards")))),c("td",{key:"51b36837977b9abae76c40308cabb54f99ac02cc"},c("ul",{key:"78139291bef4016387cfe822183ff7ffeaa1bd64"},c("li",{key:"153d811b951c87765780fc072d8a69c87b01ec32"},c("span",{key:"825914c2b1d1fe031af96e8b12e7e3dd256fc2b7"},c("ifx-icon",{key:"b48c4ef41caac30a8be3f75f78b08173efd9041d",class:"check__icon",icon:"check16"})),c("span",{key:"d42a130a281ef77241a40ad92dd9e5187aaeaa1d"},"Brand variant")),c("li",{key:"27b88edecda6bc921879b52e8197fe9416c91ca3"},c("span",{key:"372ed1b5260aef5870d658dc0d23e20e9c3c38a2"},c("ifx-icon",{key:"36ca9331c8ef258e03290ad266c2bdd3f8c0c6dc",class:"check__icon",icon:"check16"})),c("span",{key:"f58d0b4170ed657d84305177b67588ddcf0a38bf"},"React, Vue and Angular wrapper integration")))),c("td",{key:"af27c602cdbb514804f5715774c24519d3c36ee2"})),c("tr",{key:"52f1ab9e338ea814226413c4121608a11c1aadc1"},c("td",{key:"8d8e61ef880da6b44d63895241e265d31f453fd2",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"e738f0989b1f3e22f07910a26c58181282e2e5fd",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-status--development",size:"s",variant:"bold"},"Status")),c("td",{key:"e636f5c93c3ada2b021029743301585e9e2ca5d7"},c("ul",{key:"254abc6392d666b0ac1a4bb5e9c665e62329bb31"},c("li",{key:"8cf2899792461a77073a34b6104e890fa01a828e"},c("span",{key:"be9980c114d39e250db5699e8f2d3a3011f8fc00"},c("ifx-icon",{key:"b3b51d01d8dcb2e74fc52bb0aec36df747de92f0",class:"check__icon",icon:"check16"})),c("span",{key:"28b17e007c8998722cee10e92714170a80433039"},"Provides a visual indicator for conveying the state, status, or condition of an item, process, or entity within a web application")))),c("td",{key:"327c614046ba2a4bd9fd9efcd81d986b16173d87"},c("ul",{key:"3c248ed69682ec2ef6571e9ccac8b15832259d4b"},c("li",{key:"d468338b735c4876de82e4dffad9223a7117001d"},c("span",{key:"0365cb9d39732a3d8717e33d0a9615788c282b19"},c("ifx-icon",{key:"d675ac05659f9ac76d75990ac3088a7e2cdef1e0",class:"check__icon",icon:"check16"})),c("span",{key:"e328f4e0bae853ad3b259a1d4114619f5c81a8c8"},"Ocean, Orange, Grey, Light-grey, Red, Green and Berry color variants")),c("li",{key:"0e3e5a8f8f6b63bfce28ee18574f15a0c205775a"},c("span",{key:"4dab4550692f479d7820c0d76a0dda88fa6fa1dd"},c("ifx-icon",{key:"57115e67b73d0bcdfb701119edc1275d618a9b71",class:"check__icon",icon:"check16"})),c("span",{key:"d3d7cf3154c2e014caf51a0f34b5e0f3d15940d3"},"Removable border")),c("li",{key:"87632bc726f475a666646581b2f692029342a9e5"},c("span",{key:"496eba79ddc5f8ab9ad490a79717e7455931f639"},c("ifx-icon",{key:"6d510fa3d3ab1378bc29312812e5c2c2b8cec796",class:"check__icon",icon:"check16"})),c("span",{key:"e2ffc21f1041b9557d9f74187940f03eae883c33"},"React, Vue and Angular wrapper integration")))),c("td",{key:"d5482b8bc81bcc7fa22676a4b22794ad285aff1c"})),c("tr",{key:"37b1129a6a7bef77c6e7f243c6a50a49b4460a28"},c("td",{key:"13c227754235abf6ff428ab96c16b80fa38d6f06",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"b00b62b1f7bb187c345d456b245a52384e77f2a0",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-stepper--development",size:"s",variant:"bold"},"Stepper")),c("td",{key:"faf82256fb5e664f00d186ffaa9bc4efa4fc6135"},c("ul",{key:"e31b49bd7523f0ba880c3a00665e3bba909ab425"},c("li",{key:"56882cfcfd1519abdef2a78ae66e7d8a3dce3a8e"},c("span",{key:"ba010d82a1df546be9ed4ec76e0d6cee9b84f2e9"},c("ifx-icon",{key:"2a04e017bf233320fe70d2ef744b76114720eb93",class:"check__icon",icon:"check16"})),c("span",{key:"f3d2bafc76795b84e23ba8b538063792279059a4"},"Offers a customizable and intuitive control that allows users to navigate through sequential steps")),c("li",{key:"43712e47dd83fbde80e24a16ff0e4f13739505d5"},c("span",{key:"0f4812480123d6bb5a1002eff38535c9659797a4"},c("ifx-icon",{key:"24ff8f080deab8e47c820c0be1cd0982731b9e5e",class:"check__icon",icon:"check16"})),c("span",{key:"c8b09cb73a19747db6ccc994d981f988318007d8"},"Default and Compact variants")),c("li",{key:"2f8591b56351453aed5088e03ee402d45f1b807c"},c("span",{key:"ff01cdc967ce98377af81b25f8c924c759d20b36"},c("ifx-icon",{key:"1541a84fd9cc3de382b6a6437ea575e7a5218895",class:"check__icon",icon:"check16"})),c("span",{key:"1b8b391a4f73596b84f3f416306f9cb0fa48dd3f"},"React, Vue and Angular wrapper integration")))),c("td",{key:"ad3f719e6d1a68ed9dcb79b65e4d9dd35a41db09"},c("ul",{key:"c64923ea8a44bc6c9cba0b4062df9db34801d5dc"},c("li",{key:"696845838a8a767225b902e2c91205df01a3f7f0"},c("span",{key:"7cd84228a209aa2aabb5bb5f6aa05e7859637b1b"},c("ifx-icon",{key:"1b7075803a58d327ab9c4772b0da5c5c4cdd7373",class:"check__icon",icon:"check16"})),c("span",{key:"b38c4e81edfadbaed3f7f3e520c664fc548be63d"},"Vertical variant")))),c("td",{key:"abed9f94f8a6b088cd235a9d4757d28e298af5cb"})),c("tr",{key:"cbd14572687e6545c2297510ee2bce3b846f5dce"},c("td",{key:"17d2f37ae232ce0b5f819ffdc9e07d6be57b70d1",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"06a04b1d56f12365fa8a46ced1c000e777368176",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-switch--development",size:"s",variant:"bold"},"Switch")),c("td",{key:"068d115e153f51eb474067008dbaae3cb569bf7d"},c("ul",{key:"7a199d7ec337e45e7d665b949004cd67ec7532b3"},c("li",{key:"26ca0c7123a78fce8d81ff3523a271e58e98133a"},c("span",{key:"018aa4ea7add985548159674756ca458a6e0007f"},c("ifx-icon",{key:"c679c8acf20a06bc6b15e0a3667170be8603a3f7",class:"check__icon",icon:"check16"})),c("span",{key:"e1f74727f49f3db7f3d7a3e57d87fcab1e7f9b1f"},"Provides an interactive and customizable interface for toggling between two states, typically representing an on/off or active/inactive status within a web application")),c("li",{key:"643100ac608bf05bd981c6d106fa876114855641"},c("span",{key:"35bd52796581e8dbb77627ee401b3e42e50dae02"},c("ifx-icon",{key:"d44464bffe73129096ec1e57c48ca45db229ef6f",class:"check__icon",icon:"check16"})),c("span",{key:"c7d9fc9c79e6d9e5f3466c2b2f9f9f4f3e647d69"},"Adheres to web standards")))),c("td",{key:"940e4ed08b9943743ec1a6dc971f0484b8932f4f"},c("ul",{key:"a8c45e53eed4f91cf4b23fdb073f6334d1fc02f5"},c("li",{key:"59fc1789ad50a887ceb7c1105ad00a7cd0530e0c"},c("span",{key:"9b1e5356a3eb78b0067cbc4a2ac6814224a2fef7"},c("ifx-icon",{key:"aa5f87cdb2b2c006472b2c39a7239cc3741a7250",class:"check__icon",icon:"check16"})),c("span",{key:"959b5648fe79d93b690668587ea61a53c3e81fc6"},"Incorporated label feature")),c("li",{key:"0ffb8819899089660059c4f62121baa559c9aee9"},c("span",{key:"dcddf21612feca539e6a2bb521ad3b576c2791a2"},c("ifx-icon",{key:"b452a5df1ca105fdb4e6d02911c7177e4f8f8631",class:"check__icon",icon:"check16"})),c("span",{key:"601bdf71070ab8255954449ecbc9ab4974df442f"},"React, Vue and Angular wrapper integration")))),c("td",{key:"f328d878e2c7723f556f5ad4f293f478df1cc4a8"})),c("tr",{key:"dcd07a565bb5ab88c52582da17b87e3ca1c3c702"},c("td",{key:"50705dec1a74530f902176a7c9fa5aa33d99e7c5",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"f17a9d3bdf911da27b36d1d2f3f946cb9186e467",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-table-basic--development",size:"s",variant:"bold"},"Basic Table")),c("td",{key:"442ccf306a3c64b37e2761a4e6c92c81869fbe51"},c("ul",{key:"70a7b8cb3ab1613c6b1cf2d3c41a897da7b562da"},c("li",{key:"28c29713cb9045f6e04055124f6b987913e5d84e"},c("span",{key:"679dc0cfa74e3cc870f4750c428fb450de25ad03"},c("ifx-icon",{key:"c0d4e2443eeb75e2990ae05cb5ec7959fa7da9af",class:"check__icon",icon:"check16"})),c("span",{key:"c300ae5b547ecff6442649e7d070b5b41a5edbed"},"Offers essential functionality for organizing data into rows and columns, allowing users to view, sort, and interact with structured information efficiently")),c("li",{key:"a0fd40a5871086067d09c9b3e500ce47e0869755"},c("span",{key:"8fe65a586a89c726fb3eaa698f811aa001f8fa30"},c("ifx-icon",{key:"da9c22eae81adbb5efcda1284bd8e389ee211caf",class:"check__icon",icon:"check16"})),c("span",{key:"3613eab70fcb3e84dc41ce308f4c9b3646989004"},"Includes basic features such as column sorting")))),c("td",{key:"f11f45b1e0a0c6850d1dea2dda8c8f6643fe50a2"},c("ul",{key:"d4bac44edd502d3d0d1c286a60924e35d6466a6d"},c("li",{key:"62c2d054dcc8bc6b7221ff28654cd9cbbfc58bf6"},c("span",{key:"81c8aac4537c31c614c13150a5ed8b0b996f76fb"},c("ifx-icon",{key:"f0918a2711adde2c0b3dbbe55e83754740d0db1c",class:"check__icon",icon:"check16"})),c("span",{key:"e82f2208dd119268dac347935245fa3a9141d55f"},"Compact and Default variant")),c("li",{key:"965bb7af869250f79cc3c44fdb1f9e31b6372254"},c("span",{key:"d102b1cfc031ab5bfc54fb99d2dd2766e852b18b"},c("ifx-icon",{key:"612a0fc9bb4ceed7d8bb217b920805b3bfcbd3d0",class:"check__icon",icon:"check16"})),c("span",{key:"404bbcdfd0c026437c553511329f9bdf2046dbc6"},"React, Vue and Angular wrapper integration")))),c("td",{key:"1eaeb278961eafccd26c88ede759f769e5b0a256"})),c("tr",{key:"c98cd6207ca1dd5a816224c52c09601696fdc3b7"},c("td",{key:"649be7913d774f0b909f4696c4f38e84df33d726",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"9db51707b62a306af2c90d11e11012dcea084671",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-table-advanced--development",size:"s",variant:"bold"},"Advanced Table")),c("td",{key:"7108c9d21e4a5b2978ef0bc7d87e104d3d620b49"},c("ul",{key:"04ff6c286606ea1edc0825d3be03ac08cb4e4dbe"},c("li",{key:"3e2c9a651662ca4d15fb6d596dffc49367010151"},c("span",{key:"dce6f9470d1569f82e0273a4a529e75789e8578a"},c("ifx-icon",{key:"a71a91850b99e3987d22a259f1e0e3883b7b9e18",class:"check__icon",icon:"check16"})),c("span",{key:"798593900b2876324cd0b826059801aac507bb1e"},"Pagination")),c("li",{key:"08511941383f12e76d90b66e2273ec3c44a1472d"},c("span",{key:"6463f2c906c45ec6680e2573447a6a62c0e96211"},c("ifx-icon",{key:"896bc5c3235391a40da7a2a69906dbbe207b7a23",class:"check__icon",icon:"check16"})),c("span",{key:"c7a38c5aaf535345f3db327b98e90c85ce1d7779"},"Sidebar filter")),c("li",{key:"8943b3d82f8309f2642c053fba9f1976271f11d5"},c("span",{key:"ee8837d3d1e8beaf58d0a1893706e4fd7a488d8a"},c("ifx-icon",{key:"5917d365089b6e739ba6e70d92da62b14d0db80b",class:"check__icon",icon:"check16"})),c("span",{key:"c47e8f47a8d5eb8294aae50e5d4f09e633b14363"},"Topbar filter")),c("li",{key:"3304c90cc607bea09bab9c36c902f9496c223a38"},c("span",{key:"d3651aa2f750e67796fdf33c8c9cfd54155661d6"},c("ifx-icon",{key:"04bb9fbf017438f7ef049a852ef4ac99a2c47054",class:"check__icon",icon:"check16"})),c("span",{key:"4b8b2198635a134b494266531dc1be2b4b852ce9"},"Nestable buttons")))),c("td",{key:"b5e382086f6bac46bc5c6e9a87c67798d8bb3887"}),c("td",{key:"3ee4a1000aef413cddb4c3b998e8ea73ff1c1f86"})),c("tr",{key:"62abbacc17da6afedb6e96775eaefdc6fb5d16c4"},c("td",{key:"fcd28cd03fa1e378d92424cea9494d690a9aeb5d",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"e524de297262d985cac924f8f17173065306e7d9",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-tabs--development",size:"s",variant:"bold"},"Tabs")),c("td",{key:"cd98530a3106861578d3182c9126efcd63301417"},c("ul",{key:"8abb625d873ab5acd85986d8be75c792ffd11615"},c("li",{key:"e9912d54f234e577bf2eb59090cf39127a135f6b"},c("span",{key:"7bd9ac15abe91a7dab813a97f6ca68eba92cbd93"},c("ifx-icon",{key:"b8d438d035e0e95b6976349169aa2c5cfa86ac03",class:"check__icon",icon:"check16"})),c("span",{key:"60d9c260969ab486d81ffe8aaec19495b2dd7e01"},"Offers a customizable and interactive layout that allows users to switch between different content panels, typically used for organizing related information or functional sections")),c("li",{key:"4042583e9dc046cbf66f21bfc6bfc6d02fd315cd"},c("span",{key:"20c1cc7374f560056d868ba00e375ab5e923fc5b"},c("ifx-icon",{key:"54777755282762c57c4d1fad56efea827eb3b765",class:"check__icon",icon:"check16"})),c("span",{key:"661c747dc3ca8c67e26bf0c599f5269d3663716f"},"Adheres to web standards")))),c("td",{key:"3c3c6523fb3ba2afe0eafe4e07bedbc77fc4a2cb"},c("ul",{key:"b82f2a5e725f99a9167c07edb52254193626f763"},c("li",{key:"7a5a7ea75c41a275f591ace26c027b702f19fa44"},c("span",{key:"61b4e08fb40dce72f942c357f0d5e74b10b44365"},c("ifx-icon",{key:"3a1c6569c97fda2eaea8eb5a08f8796b328aa8a7",class:"check__icon",icon:"check16"})),c("span",{key:"567f4341a9b8553b60029b575dfad9cf1f16b4cc"},"Horizontal and Vertical orientation")),c("li",{key:"27f3c1f1a71759b1ee09751dd3c7f820491f491b"},c("span",{key:"550f8754cbd4e3f3084885b9b103b208ec0e2a68"},c("ifx-icon",{key:"44bb6353ae36a9f7f79596111c9ce1b474486a8b",class:"check__icon",icon:"check16"})),c("span",{key:"2f3dd63de1708e5aee640b09268d3fc390d943b2"},"Extended customization")),c("li",{key:"7921215f74efc22047a02c16db084a940e1ff846"},c("span",{key:"ad0fad59cfb98ec2606567cbc7ced1949b8a98f2"},c("ifx-icon",{key:"206552efdff9982c75c852e8a3b3e3af9b7814bf",class:"check__icon",icon:"check16"})),c("span",{key:"a800ca76476f7fbb6b4ca432242a2285c93c5937"},"React, Vue and Angular wrapper integration")))),c("td",{key:"3bcb6dc1e4a35492008529e6dd8597cf70075cda"})),c("tr",{key:"3c92e0ea458c76018eab55795a8c8d579cc0ad8c"},c("td",{key:"4ca9dee2e77803eb12381b156ada704db4efcb0b",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"ba276ecfc9af2a953367591d8b1d3bdd383f2b02",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-tag--development",size:"s",variant:"bold"},"Tag")),c("td",{key:"23e93f21e3b337d276745a25747fc9c4f81f2769"},c("ul",{key:"8d48bf7b6cea9ca9e51a75fbcc4c756ed8c8b48a"},c("li",{key:"ee92a5e76d96a8b3291e846cbf4a02ce1303067a"},c("span",{key:"3938f1cc1e0e8a01bcee847e03e4eb70c9c7a8f3"},c("ifx-icon",{key:"cf7f5edaf868ec278ffecef540274b1782675041",class:"check__icon",icon:"check16"})),c("span",{key:"3bed4054fe1443b80b1a524977235ed7f08ae0e7"},"Offers a customizable and stylized marker that allows users to quickly identify and associate specific items or content with descriptive labels or categories")))),c("td",{key:"8e9ec681119cab37ed1764532a4c01f29c1aee72"},c("ul",{key:"8ad7ad37a9c8c9e501ddd93223989325aa237fda"},c("li",{key:"5a6156d71f7fa79fbd1494c268b2a16599649028"},c("span",{key:"26d8e071604b1279f359af13047a470d8a93369a"},c("ifx-icon",{key:"1e3a50265094e9b902397478af8047d65cdf633a",class:"check__icon",icon:"check16"})),c("span",{key:"acf77822d0e1cf6f44f1566054c51f9932f41aec"},"Icon incorporated")),c("li",{key:"4f5a570f595abd6bfe61d295a77ce56be354dafc"},c("span",{key:"83aebc0167023ec08d501d56bbcea31f84d5d106"},c("ifx-icon",{key:"8fc0bcc8528b04180d2d4a27b04816b13c24a727",class:"check__icon",icon:"check16"})),c("span",{key:"407279bd897a6978ee6f59adaac248bd12d4165c"},"React, Vue and Angular wrapper integration")))),c("td",{key:"88295674563bacfbcc2fdd306e9617cb85f15720"})),c("tr",{key:"12c2845cf37ba9a786fb357d46d81dffea86b40b"},c("td",{key:"888b48e1cd3bb88947979a8838cb593b30898cb5",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"6bb8b0327bc5aa4b7d4c4055ca4e8d7b23b2e3d5",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-text-field--development",size:"s",variant:"bold"},"Text Field")),c("td",{key:"31b48f449036b3654d4222440d675c8cf1324f49"},c("ul",{key:"61d2fc0a3859249b5d58dd8d0875aef4697c7d9f"},c("li",{key:"3c7fe7669c64ed6177fb586afb6cff515ae41da4"},c("span",{key:"c1a24caf43efd732af0934293f72e1677920a73c"},c("ifx-icon",{key:"256581b51fa6f0fb20a08a1f786a529578d52c78",class:"check__icon",icon:"check16"})),c("span",{key:"98ff63c6a5a032c6ce3b5bbd88889d38a1291454"},"Offers a customizable and accessible interface that allows users to input and modify text, facilitating various data entry and form submission tasks")),c("li",{key:"8fc8cb5dacac228e9dc95528d83ad3774bd20fd5"},c("span",{key:"fa7f87d93d50f9be27fef7b8913d970ea9a70bdf"},c("ifx-icon",{key:"692ff604c785066b46ab60d41955622a05a26b89",class:"check__icon",icon:"check16"})),c("span",{key:"b964e3b51c4cc2056138d0378985f3ac52270114"},"Adheres to web standards")))),c("td",{key:"4d623fb4821ff94c27c2102008bd4118e4d631c0"},c("ul",{key:"e32188c7a44a5039bf51dc686aef3c3793324a48"},c("li",{key:"4d98b72387ea07dc08212c43fa4e33e666386689"},c("span",{key:"032fd4c747c82310e8f94967d99e05645762337c"},c("ifx-icon",{key:"3b15c9b4610fc788bd5abac91e3aa754d688df95",class:"check__icon",icon:"check16"})),c("span",{key:"1704937176a4fd6f721457114ce235ec1bdaa799"},"Extended customization")),c("li",{key:"5b47705ad4d5fb8a6f27d0ce27b9dd21067a2510"},c("span",{key:"3bc5c191007dc4ced61e223828e243dae175687a"},c("ifx-icon",{key:"b85c642e0cd4dfbfc5d112d5d58e81453b39fe7e",class:"check__icon",icon:"check16"})),c("span",{key:"7c53c172786c55007faad7353cc674c3e600791d"},"Possibility for icon configuration")),c("li",{key:"e52393b9fe0a3fa380a2154017281e914d96dcea"},c("span",{key:"dfd65955e9999e19ade0f6b3df0d0aea7d24d4fa"},c("ifx-icon",{key:"8aa87ac56a0a8aa64268f1dd416c55917f8affd7",class:"check__icon",icon:"check16"})),c("span",{key:"fbce414bdaf5fd398da62d94ecb3e999cb6ef7ca"},"React, Vue and Angular wrapper integration")))),c("td",{key:"f083dabce23a437783ebdf8cdd5abde001ace20f"},c("ul",{key:"6a7582096e38b457a99f36968033560862680359"},c("li",{key:"ca60c6f8caf26cd63719b59f770a097864db786c"},c("span",{key:"f34af117e866e9f73001b6482afe3ed3386995cd"},c("ifx-icon",{key:"43366c9e7019eb62894465f6293eff5bb757d301",class:"check__icon",icon:"check16"})),c("span",{key:"2c056b4495d3291fe9bfcecec0957250999f804e"},"Form integration"))))),c("tr",{key:"776266cdecc15f180b54bb1fb7cfbf3b88eabdd4"},c("td",{key:"44542027b9f5f71d89a48c55e050d7232bee7ae3",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"fef3fd1c492d7937028c005474c86abdf8047605",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-tooltip--development",size:"s",variant:"bold"},"Tooltip")),c("td",{key:"542dc8fe4596c57b5b39b2651d830f138650d903"},c("ul",{key:"5d76d98dc4c3dcc0affedb42aaecd3d9b23e3312"},c("li",{key:"f3c62fb9b77414127588f55f62e0a55c37e3359d"},c("span",{key:"d4e70594f548910039802f82489ab5ff6b91eb7c"},c("ifx-icon",{key:"bf52b30870787764f6bbcab0f2b4aef475f19638",class:"check__icon",icon:"check16"})),c("span",{key:"d3b0055788dffcface8ce901f310cd4871cb37ca"},"Provides a simple and informative interface for displaying supplementary text or contextual information when users interact with specific elements within a web application")),c("li",{key:"d4feaf64b833d57aa8deb8b9b5866d8381502081"},c("span",{key:"762a0e1389702db8f42e8c3101c2340f2c554961"},c("ifx-icon",{key:"3df5d6887dfbcaddf865def75aacba79819576fb",class:"check__icon",icon:"check16"})),c("span",{key:"91bb5cf862d715e5d2a811aeefbbd174cfe8fb3f"},"Adheres to web standards")))),c("td",{key:"c0eba8fdcab829e10f8a29d6f4de1e39cd1139b1"},c("ul",{key:"2b81f98f1b5d48a0687fe8e8f57b8264ff708849"},c("li",{key:"8b9488ec6ade9b66b67998e6a855e03542b192af"},c("span",{key:"3ecb4d3e6bd1dbc28dc03282b1ec852fdba2414c"},c("ifx-icon",{key:"d67fee382e234bfa438c1c2ee33557e871e17918",class:"check__icon",icon:"check16"})),c("span",{key:"a399d7dc8999dac1165b848d68a24bb1b49869d7"},"Compact, dismissible and Extended variants")),c("li",{key:"3192a75c11f9c17b23ed63874a8f82f6d3e7ef18"},c("span",{key:"c619595b5b4849db117b029357467f079c2dd7e6"},c("ifx-icon",{key:"ab1ec0857f6389b0f6a519cbe5b623f2d691a7bc",class:"check__icon",icon:"check16"})),c("span",{key:"b95d31f6e33bd07224054619917d3cee9863dd6f"},"Auto-adjusting position")),c("li",{key:"ef26c69d216b4e7f1eb53934763e609a605fde5e"},c("span",{key:"8bb48a5f12a1bb8a3ed2a46dde873a9a46ef2943"},c("ifx-icon",{key:"7bf7d4dfcb447bd59c128cff3b835710d2866c76",class:"check__icon",icon:"check16"})),c("span",{key:"a1a97f9ad054a1e45a6399c2a38cb64ee8bb5983"},"Icon incorporated")),c("li",{key:"56a120d9a1e5f7305da2c30b88dd8307db8fe33b"},c("span",{key:"f590a2a284e7518c4b723d929da8e70ae84b1c72"},c("ifx-icon",{key:"7583507f801d373aaddf452f1890b969dece996b",class:"check__icon",icon:"check16"})),c("span",{key:"8e0d12540fd2ad2e85c527245dfe5309c3390940"},"React, Vue and Angular wrapper integration")))),c("td",{key:"f0aebb625f9f32c83d19f601532047514cc6ea53"})),c("tr",{key:"d73d7534e73cec6c6d34131c79093d130c49d709"},c("td",{key:"0ca3d1bc14efa600d8b0afbf3ad9eedf4bee5d20",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"401ed99a88768902242894bf5cdbde0b158064bc",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-notification--development",size:"s",variant:"bold"},"Notification")),c("td",{key:"7a351acece19387a4eb0d1b734946e71a5c57b7a"},c("ul",{key:"0967ce2ac66eed5889d84b81e7d7b3f9381834b4"},c("li",{key:"f245b74459b9ecb90778db09cfd4010543322474"},c("span",{key:"8f2630159eb425ec010195a7b57f9bcba40708e0"},c("ifx-icon",{key:"9c09c24e7ea66888947a560ca31f766e7a2930fc",class:"check__icon",icon:"check16"})),c("span",{key:"cc22bc9c638db569119ea9066d6055ba521c7c31"},"Offers a flexible and visually distinct container for presenting informative, warning, or error messages to users, enhancing the overall user experience with timely and relevant feedback")),c("li",{key:"00993e8f0479a0fed25fc2732ecde3957076d640"},c("span",{key:"c864d3bc5de9c41ffdb709844be4f423353244d3"},c("ifx-icon",{key:"5e3e193a2510aa18c44cbdffc408de7be9e2a88f",class:"check__icon",icon:"check16"})),c("span",{key:"d4323969f6bcb0494cc5183a566d1a741a9ab275"},"Adheres to web standards")))),c("td",{key:"d0276fe7efb436665ef32a1f78c23a9af72f8abe"}),c("td",{key:"ec2a11ff7ad79895c151f2c83b1a9033e8b58611"})),c("tr",{key:"0888ecd0dcf65287eb03f9545f1782c4804973ad"},c("td",{key:"ddfd0388d1c96573f30d2618f8a26ceb103fb071",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"a3dc1cb69897fd5ae657963f7636c9f37722361f",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-content-switcher--development",size:"s",variant:"bold"},"Content Switcher")),c("td",{key:"3517f26cb2bf26f482340563507661cba4debc4c"},c("ul",{key:"25ed41e48472169862b39a50e77277d5b469be4d"},c("li",{key:"ea6387b1dc75454012b02a21ac0a088121c66232"},c("span",{key:"22be8e1d53e5b3d96af08873c9ea94a35592b2e9"},c("ifx-icon",{key:"049716c1e3f8573f91f702fd881042382e5468c5",class:"check__icon",icon:"check16"})),c("span",{key:"e880952924243ffb64ce962daf5dcea5bbb62e9a"},"Provides a flexible and intuitive interface for dynamically switching between different content sections or views within a web application")),c("li",{key:"0c1b7f306abbd16cea9e30266eee1b68d8229ded"},c("span",{key:"800d64dadc9616a67726a0f16cc3e90ed4e888c3"},c("ifx-icon",{key:"57758be6c474d97fe9f21e4ab084bb4b6a05291d",class:"check__icon",icon:"check16"})),c("span",{key:"22870f3f6369c7c7fe7409470335cc4f418e9ce1"},"Offers a customizable mechanism for users to toggle and display diverse content panels, facilitating seamless navigation and interaction with varying information or functional contexts")),c("li",{key:"33aca50c3871d21c989cefadf7c7f330b71f3d2e"},c("span",{key:"32db24c11f240d0fc2961cfbbc7bb2870150570c"},c("ifx-icon",{key:"bb93ed3596801c57a93b859864d0c66f04b8129a",class:"check__icon",icon:"check16"})),c("span",{key:"cbe37f9802147cae88e04348fdcad05b4ec1c482"},"Adheres to web standards")))),c("td",{key:"3b92d7e7ccba7d93ebc173a7f656704ac34e0d18"}),c("td",{key:"6e5c440e1dab92314bf38a48a35845daa5946994"})),c("tr",{key:"e62c3d42c5d47c22b85731ecc65ee77db1f482fb"},c("td",{key:"ab6ab27b7e617d52bf461c706de5728990975ed2",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"2bf5d4541a1d41db04979a9c73aa5c290ae0e87d",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-segmented-control--development",size:"s",variant:"bold"},"Segmented Control")),c("td",{key:"c7fd89f0d4a3864baa95b582a82646b02b3e5744"},c("ul",{key:"8585570a494cefbdfb7ca74583ce916d83ecaea6"},c("li",{key:"f656ff2e3998ff78ffe125565d4f319e620fb4ce"},c("span",{key:"1132e573c029d943c2bfa2a65b5cd598b4bc5f1c"},c("ifx-icon",{key:"b6dbb5a5feb0989738f56e1ab4a9074061951203",class:"check__icon",icon:"check16"})),c("span",{key:"2db8677fecf0d770f223f1b1a992fd9a47a4ed8a"},"Provides a clear and interactive interface for users to make mutually exclusive selections among multiple options within a web application")),c("li",{key:"35f9e21237e4387992b720d4cb4597449fa3ea91"},c("span",{key:"4d0b5f9b6dd6db3f163830138842182c1e16d014"},c("ifx-icon",{key:"cea3fc4b6ce499fea5429c3aa1af593648287ec6",class:"check__icon",icon:"check16"})),c("span",{key:"b03a4dd44e2d73bebb3d68d9ce2aaa87e96d7c7f"},"Offers a customizable set of segmented buttons or tabs, allowing users to toggle between different choices or views, typically used for filtering, categorization, or navigation purposes")),c("li",{key:"4692955e107a862d0b2c26abb811c57f41851c0b"},c("span",{key:"c87b5c12d6156d006c8f294155d9842d730de38e"},c("ifx-icon",{key:"4e8dcf15eb669b5a0c3025d24f6add09d9fac74a",class:"check__icon",icon:"check16"})),c("span",{key:"ea06eef2046086b4d60ceb84fcf54947a73c161c"},"Adheres to web standards")))),c("td",{key:"1028bd22c5b078b45dcc936e9e77c9c50876efce"}),c("td",{key:"62c0f84ad57d84158777e1e9f37eaa32abcd86d1"})),c("tr",{key:"eead81afa07306f10c7de5edf35e3e227662c910"},c("td",{key:"f4a2ef085db4dfff54221af951776c710acc2526",class:"completed__component sticky-col second-col"},c("ifx-link",{key:"b21434dc5c3df59b7a4789730943d32127da9417",target:"_blank",href:"https://infineon.github.io/infineon-design-system-stencil/?path=/docs/components-segmented-controls--development",size:"s",variant:"bold"},"Textarea")),c("td",{key:"2506ecd22738883d1aaaabbfd6831f5d471fbf64"},c("ul",{key:"f27ff31b71fa837776beb377b231f15c2e06fab9"},c("li",{key:"fb573eb65e7c2917f4465d91e593bf2424f2b3e0"},c("span",{key:"4cd4880af17d6010a1f31506fd467a18f0039ac8"},c("ifx-icon",{key:"e60a38fa147dd44ec83c12428e7f3190fc7ea602",class:"check__icon",icon:"check16"})),c("span",{key:"5c0450496c78f1e0bac3be3728b8ef66c9e6fd0e"},"Provides a customizable multi-line text input interface, enabling users to input, edit, and view large amounts of text, while adhering to web standards for accessibility and usability.")),c("li",{key:"254cb101a18ab14927b8f957a0f2bc5875a2f947"},c("span",{key:"5e072f77aa339f075fe4957f38fd0527d1b6c8cb"},c("ifx-icon",{key:"110775797b72585259658302f81341d2ad5bcb9b",class:"check__icon",icon:"check16"})),c("span",{key:"5aaf52abda49c8a295ce2bb28af352624efff74f"},"Form integration")))),c("td",{key:"68608bcfe7bce429baa0dbd9f799594ad994d0d6"}),c("td",{key:"18460f4d565705fa5522c3d22b1757659d7f4ddd"})),c("tr",{key:"ccd53ca86232e45d460baad7a8633ca8b8d2455e"},c("td",{key:"1693054500c6e33525a84efb131b22a742a7690c",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"f84070f10b43b0f4812e4e3a285d432d89d7e7e7",href:"",size:"s",variant:"bold"},"Card Group")),c("td",{key:"4f265ea5c37ffc90268fe7ce6ec848ee552d329b"},c("ul",{key:"335fa2ffd19e8776a6847643b9942a13af07f65d"},c("li",{key:"ec6092b913cd93ea394d837db42d47aaed9be097",class:"planned__component-wrapper"},c("span",{key:"9d85acce53940f599ff7067c3e05e02f3716d5eb"},c("ifx-icon",{key:"16da8cdc171f35319104bbdc3e1d0aedb8c7780a",class:"planned__icon",icon:"clock16"})),c("span",{key:"bc2c03c286272866b6b3d743de21ec5581f1c1a5"},"On Hold")))),c("td",{key:"cb2a9b91888549650512cae488c0fe1cf4a3ebca"}),c("td",{key:"d34a5b0859ab9ddc2abd7a194276812bc86efc44"})),c("tr",{key:"b1cabed8efa81b689eeb21dfebb28c6b60274c4c"},c("td",{key:"96492905c7af4c683887cdc422116c98900ce5ee",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"9987aba4e11f44b5a93d2f7030bb7cdf65fe2537",href:"",size:"s",variant:"bold"},"Upload")),c("td",{key:"dd8963487b00e17ed7098e942086874d0f826ff9"},c("ul",{key:"1589d22fe655dc31890da7a80a5efe7c75177217"},c("li",{key:"1ddee462506d15a7ac49e07a0ae1a0b612c86fd7",class:"planned__component-wrapper"},c("span",{key:"179c4c196ad3d0fb95eaa1c70a1a00665e4f4f75"},c("ifx-icon",{key:"66245dc4b9affa9d7409a073ab2b34aa275dbc83",class:"planned__icon",icon:"roboticarm16"})),c("span",{key:"09f82c72f84d877bdefa17542186ebef84e437a3"},"In Progress")))),c("td",{key:"890f4300e7a024b29bca101c9d5d05d295b06893"}),c("td",{key:"994902d351df9a6160882443f386e7e227337524"})),c("tr",{key:"eacf89ad00de7af2fab6dc1e55236920a1f55fc3"},c("td",{key:"b1aeca5be09160eb13cb2d92e032453743dafcb7",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"55e5a18707a7e78b2d269e8dcdd3d92afc077b27",href:"",size:"s",variant:"bold"},"Tree View")),c("td",{key:"11965c549924ec575da19bec001fcaa07f6ff1e3"},c("ul",{key:"92282f22c49e99c7f05a7da6bef49def1fe4189d"},c("li",{key:"399c09183ca8a929895f684db4f4156e5eedb5b0",class:"planned__component-wrapper"},c("span",{key:"ded832a7df725e9c4c0b687ab2f28939a35cb2c5"},c("ifx-icon",{key:"e10350027969300f91dc5cc4a417c50e1abdc7cc",class:"planned__icon",icon:"roboticarm16"})),c("span",{key:"ccbc6204b04a4ec4b1a2767f205f704b848f37d5"},"In Progress")))),c("td",{key:"acccd267da7fedb7709bcbcc845dc0cfccd67239"}),c("td",{key:"c71bf2bd444551579c8c969e9cf49d5615f03f4c"})),c("tr",{key:"9c3c9f8d9e502949a80c4b605ad8fbf19d40b83f"},c("td",{key:"bef19543fc014f4c63644fa26914c5e76f3773a8",class:"planned__component sticky-col second-col"},c("ifx-link",{key:"d8c50e43b62def7e91052d6dcb4e2c249d64bb60",href:"",size:"s",variant:"bold"},"Popover")),c("td",{key:"71771879c47bff0c949b2151b21b097a5eca5e09"},c("ul",{key:"41b4b1b347170448abbb5a7fd194070918811469"},c("li",{key:"7250c63891865b0a1ea960ff8ecd82c67c151bf6",class:"planned__component-wrapper"},c("span",{key:"6d95ff7aca4399e7c30c48221ecbc2f1e9481dc0"},c("ifx-icon",{key:"dc6c9597c73a7bc3402eb67e8e045cb833b474c6",class:"planned__icon",icon:"roboticarm16"})),c("span",{key:"a1495e9b6d843caafdb4e9d3b21f8053d8229766"},"In Progress")))),c("td",{key:"fd3e2e4d3c06ffac98d95bfc7cbbe3f4f9e89759"}),c("td",{key:"6ba2406febfc2b3acaf3a5c6082bc072e1ec47f8"})))))))}get el(){return a(this)}};f.style=d;export{f as ifx_overview_table};
-//# sourceMappingURL=p-caccdf14.entry.js.map

package/dist/infineon-design-system-stencil/p-cb838071.entry.js

@@ -1,2 +0,0 @@
-import{r as a,h as e,d as r,a as o}from"./p-DS8meZSd.js";import{d,t as c}from"./p-DcmcuUOA.js";import{i}from"./p-Bw2fh5LT.js";const t=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:inline-flex}.card{position:relative;display:inline-flex;flex-direction:column;word-wrap:break-word;background-color:#FFFFFF;background-clip:border-box;border:2px solid #EEEDED;border-radius:2px;width:350px;height:auto;font-family:var(--ifx-font-family)}.card:has(.card-href:focus),.card:has(.card-href:hover){outline:none;border-color:#0A8276}.card:has(.card-href:focus) ::slotted(ifx-card-headline),.card:has(.card-href:hover) ::slotted(ifx-card-headline){color:#0A8276}.card.noBtns .vertical .lower__body-wrapper{padding-bottom:24px}.card.noBtns .horizontal .lower__body-wrapper{padding-bottom:24px}.card .horizontal{display:flex;flex-direction:row;min-height:218px}.card .horizontal .card-img{flex:1;text-decoration:none}.card .horizontal .card-img.noImage{display:none}.card .horizontal .card-img ::slotted([slot=img]){width:100%;vertical-align:bottom}.card .horizontal .lower__body-wrapper{flex:1;display:grid;grid-template-rows:1fr auto}.card .horizontal .lower__body-wrapper .upper-body{display:flex;flex-direction:column;text-decoration:none;color:#1D1D1D;padding:24px 24px 0px 24px}.card .vertical .upper__body-wrapper{text-decoration:none;color:#1D1D1D}.card .vertical .upper__body-wrapper .card-img{height:190px}.card .vertical .upper__body-wrapper .card-img.noImage{display:none}.card .vertical .upper__body-wrapper .upper-body{padding:24px 24px 0px 24px}.card .vertical .lower__body-wrapper:hover{border-color:#EEEDED}.card.horizontal{flex-direction:row;width:538px}.card.horizontal .card-img{flex:1;order:2}.card.horizontal .card-img ::slotted([slot=img]){width:100%;height:100%;vertical-align:bottom;object-fit:cover}.card.horizontal.left .horizontal .card-img{order:1}.card.horizontal.left .horizontal .lower__body-wrapper{order:2}.card .card-href:focus{outline:none}';const l=class{constructor(e){a(this,e);this.direction="vertical";this.href="";this.internalHref="";this.target="_self"}setImgPosition(a){this.alignment=a.detail}handleComponentAdjustment(){const a=this.el.querySelector("ifx-card-image");const e=this.el.querySelector("ifx-card-links");this.noImg=!a;this.noBtns=!e;if(this.href.trim()===""){this.internalHref=undefined}else{this.internalHref=this.href}}componentWillLoad(){this.handleComponentAdjustment()}async componentDidLoad(){if(!i(this.el)){const a=d();c("ifx-card",await a)}}componentWillUpdate(){this.handleComponentAdjustment()}render(){return e(r,{key:"a9afa27e59022cace5a5ec69ca920c1c47a88fdb"},e("div",{key:"6010fdacc6f61bceadeeb4a8b55b26e2607b10a4","aria-label":this.ariaLabel,class:`card \n            ${this.noBtns?"noBtns":""}\n            ${this.direction} \n            ${this.alignment}`,role:"group"},this.direction==="horizontal"&&e("div",{key:"0943cf3474fbed74c928b192a4ba2ac139b480a0",class:"horizontal"},e("a",{key:"b0e540e6ceb537615059f53bc51483caa1b17bcf",class:`card-img ${this.noImg?"noImage":""} ${this.internalHref?"card-href":""}`,href:this.internalHref},e("slot",{key:"3817324c5c0297cbe64460b3b54195f013b1fb1c",name:"img"})),e("div",{key:"3c610343ecc5fe770152af793ded7465de7c4ccc",class:"lower__body-wrapper"},e("a",{key:"2b6038ddb4fa9504b89c7a1f418eb18f371ba953",class:`upper-body ${this.internalHref?"card-href":""}`,href:this.internalHref,id:"upper-body-content"},e("slot",{key:"6f29b91dd3d5a87fe426b5dada1d648a748c19ac"})),e("div",{key:"724391212b40fbe3e26a4e951fba3122b7726fc5"},e("slot",{key:"ad56b50726dfa188a4939a19cb22341bfdfcfa8a",name:"buttons"})))),this.direction==="vertical"&&e("div",{key:"868c89a9c7af7b98b376aa99fa33a0c12a38c456",class:"vertical"},e("a",{key:"f77b8835e27b3a60e31241b0a030350269394974",class:`upper__body-wrapper ${this.internalHref?"card-href":""}`,href:this.internalHref,target:this.target},e("div",{key:"514d39de5bcc9b36f0808b2d106087dc7da04e5e",class:`card-img ${this.noImg?"noImage":""}`},e("slot",{key:"9282280621babbd6f6c453b87521168d53cbca2f",name:"img"})),e("div",{key:"a11c7ae3d1dd7f3fdb17cca9487f8f39668303cd",class:"upper-body",id:"upper-body-content"},e("slot",{key:"cea3051e03b03ed99628cd51e705ba97ba215ef2"}))),e("div",{key:"71b39299300b28bbdbc8ff274c187588430a708a",class:"lower__body-wrapper",role:"group","aria-labelledby":"upper-body-content"},e("slot",{key:"220a96282d0504458c2fc236466c17d571bf7b4a",name:"buttons"})))))}get el(){return o(this)}};l.style=t;export{l as ifx_card};
-//# sourceMappingURL=p-cb838071.entry.js.map

package/dist/infineon-design-system-stencil/p-cb838071.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["cardCss","Card","constructor","hostRef","this","direction","href","internalHref","target","setImgPosition","event","alignment","detail","handleComponentAdjustment","image","el","querySelector","links","noImg","noBtns","trim","undefined","componentWillLoad","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","componentWillUpdate","render","h","Host","key","ariaLabel","class","role","name","id"],"sources":["src/components/card/card.scss?tag=ifx-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.card {\n  position: relative;\n  display: inline-flex;\n  flex-direction: column;\n  word-wrap: break-word;\n  background-color: tokens.$ifxColorBaseWhite;\n  background-clip: border-box;\n  border: 2px solid tokens.$ifxColorEngineering200;\n  border-radius: 2px;\n  //width: 22rem;\n  width: 350px;\n  height: auto;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n  // when the link is focused or hovered, the border color changes\n  &:has(.card-href:focus), &:has(.card-href:hover) {\n    outline: none;\n    border-color: tokens.$ifxColorOcean500;\n\n    ::slotted(ifx-card-headline) {\n      color: tokens.$ifxColorOcean500;\n    }\n  }\n\n  &.noBtns {\n    & .vertical {\n      & .lower__body-wrapper {\n        padding-bottom: 24px;\n      }\n    }\n\n    & .horizontal {\n      & .lower__body-wrapper {\n        padding-bottom: 24px;\n      }\n    }\n  }\n\n  & .horizontal {\n    display: flex;\n    flex-direction: row;\n    min-height: 218px;\n\n    & .card-img {\n      flex: 1;\n      text-decoration: none;\n\n      &.noImage {\n        display: none;\n      }\n\n      & ::slotted([slot=img]) {\n        width: 100%;\n        vertical-align: bottom;\n      }\n    }\n\n    & .lower__body-wrapper {\n      flex: 1;\n      display: grid;\n      grid-template-rows: 1fr auto;\n\n      & .upper-body {\n        display: flex;\n        flex-direction: column;\n        text-decoration: none;\n        color: tokens.$ifxColorBaseBlack;\n        padding: 24px 24px 0px 24px;\n      }\n    }\n  }\n\n  & .vertical {\n    & .upper__body-wrapper {\n      text-decoration: none;\n      color: tokens.$ifxColorBaseBlack;\n\n      & .card-img {\n        height: 190px;\n\n        &.noImage {\n          display: none;\n        }\n      }\n\n      & .upper-body {\n        padding: 24px 24px 0px 24px;\n      }\n    }\n\n    & .lower__body-wrapper {\n      &:hover {\n        border-color: tokens.$ifxColorEngineering200;\n      }\n    }\n  }\n\n  &.horizontal {\n    flex-direction: row;\n    width: 538px;\n\n    & .card-img {\n      flex: 1;\n      order: 2;\n\n      & ::slotted([slot=img]) {\n        width: 100%;\n        height: 100%;\n        vertical-align: bottom;\n        object-fit: cover;\n      }\n    }\n\n    &.left {\n      & .horizontal {\n        & .card-img {\n          order: 1;\n        }\n\n        & .lower__body-wrapper {\n          order: 2;\n        }\n      }\n    }\n  }\n\n  & .card-href:focus {\n    outline: none;\n  }\n}","import { Component, h, Host, Element, Prop, State, Listen } 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-card',\n  styleUrl: 'card.scss',\n  shadow: true,\n})\n\nexport class Card {\n  @Element() el;\n  @State() noBtns: boolean;\n  @Prop() direction: 'horizontal' | 'vertical' = 'vertical';\n  @State() alignment: string;\n  @State() noImg: boolean;\n  @Prop() href: string = \"\";\n  @State() internalHref: string = \"\";\n  @Prop() target: string = \"_self\";\n  @Prop() ariaLabel: string | null;\n\n  @Listen('imgPosition')\n  setImgPosition(event) {\n    this.alignment = event.detail;\n  }\n\n  handleComponentAdjustment() {\n    const image = this.el.querySelector('ifx-card-image');\n    const links = this.el.querySelector('ifx-card-links');\n\n    this.noImg = !image;\n    this.noBtns = !links;\n\n    if (this.href.trim() === \"\") {\n      this.internalHref = undefined;\n    } else {\n      this.internalHref = this.href;\n    }\n  }\n\n  componentWillLoad() {\n    this.handleComponentAdjustment();\n  }\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-card', await framework);\n    }\n  }\n\n  componentWillUpdate() {\n    this.handleComponentAdjustment();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div \n          aria-label={this.ariaLabel} \n          class={\n            `card \n            ${this.noBtns ? 'noBtns' : \"\"}\n            ${this.direction} \n            ${this.alignment}`\n          }\n          role=\"group\"\n        >\n\n          {this.direction === 'horizontal' &&\n            <div class=\"horizontal\">\n              <a \n                class={`card-img ${this.noImg ? 'noImage' : \"\"} ${this.internalHref ? 'card-href' : ''}`} \n                href={this.internalHref}\n              >\n                <slot name=\"img\" />\n              </a>\n\n              <div class='lower__body-wrapper'>\n                <a \n                  class={`upper-body ${this.internalHref ? 'card-href' : ''}`} \n                  href={this.internalHref}\n                  id=\"upper-body-content\"\n                >\n                  <slot />\n                </a>\n                <div>\n                  <slot name='buttons' />\n                </div>\n              </div>\n            </div>}\n\n          {this.direction === 'vertical' &&\n            <div class=\"vertical\">\n              <a \n                class={`upper__body-wrapper ${this.internalHref ? 'card-href' : ''}`} \n                href={this.internalHref} \n                target={this.target}\n              >\n                <div class={`card-img ${this.noImg ? 'noImage' : \"\"}`}>\n                  <slot name=\"img\" />\n                </div>\n\n                <div class='upper-body' id=\"upper-body-content\">\n                  <slot />\n                </div>\n              </a>\n\n              <div class='lower__body-wrapper' role=\"group\" aria-labelledby=\"upper-body-content\">\n                <slot name='buttons' />\n              </div>\n            </div>}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"8HAAA,MAAMA,EAAU,q0D,MCWHC,EAAI,MANjB,WAAAC,CAAAC,G,UASUC,KAASC,UAA8B,WAGvCD,KAAIE,KAAW,GACdF,KAAYG,aAAW,GACxBH,KAAMI,OAAW,OAkG1B,CA9FC,cAAAC,CAAeC,GACbN,KAAKO,UAAYD,EAAME,M,CAGzB,yBAAAC,GACE,MAAMC,EAAQV,KAAKW,GAAGC,cAAc,kBACpC,MAAMC,EAAQb,KAAKW,GAAGC,cAAc,kBAEpCZ,KAAKc,OAASJ,EACdV,KAAKe,QAAUF,EAEf,GAAIb,KAAKE,KAAKc,SAAW,GAAI,CAC3BhB,KAAKG,aAAec,S,KACf,CACLjB,KAAKG,aAAeH,KAAKE,I,EAI7B,iBAAAgB,GACElB,KAAKS,2B,CAGP,sBAAMU,GACJ,IAAIC,EAAuBpB,KAAKW,IAAK,CACnC,MAAMU,EAAYC,IAClBC,EAAe,iBAAkBF,E,EAIrC,mBAAAG,GACExB,KAAKS,2B,CAGP,MAAAgB,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,wDACc5B,KAAK6B,UACjBC,MACE,sBACE9B,KAAKe,OAAS,SAAW,mBACzBf,KAAKC,2BACLD,KAAKO,YAETwB,KAAK,SAGJ/B,KAAKC,YAAc,cAClByB,EAAK,OAAAE,IAAA,2CAAAE,MAAM,cACTJ,EAAA,KAAAE,IAAA,2CACEE,MAAO,YAAY9B,KAAKc,MAAQ,UAAY,MAAMd,KAAKG,aAAe,YAAc,KACpFD,KAAMF,KAAKG,cAEXuB,EAAA,QAAAE,IAAA,2CAAMI,KAAK,SAGbN,EAAK,OAAAE,IAAA,2CAAAE,MAAM,uBACTJ,EACE,KAAAE,IAAA,2CAAAE,MAAO,cAAc9B,KAAKG,aAAe,YAAc,KACvDD,KAAMF,KAAKG,aACX8B,GAAG,sBAEHP,EAAA,QAAAE,IAAA,8CAEFF,EAAA,OAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,2CAAMI,KAAK,eAKlBhC,KAAKC,YAAc,YAClByB,EAAK,OAAAE,IAAA,2CAAAE,MAAM,YACTJ,EACE,KAAAE,IAAA,2CAAAE,MAAO,uBAAuB9B,KAAKG,aAAe,YAAc,KAChED,KAAMF,KAAKG,aACXC,OAAQJ,KAAKI,QAEbsB,EAAA,OAAAE,IAAA,2CAAKE,MAAO,YAAY9B,KAAKc,MAAQ,UAAY,MAC/CY,EAAA,QAAAE,IAAA,2CAAMI,KAAK,SAGbN,EAAA,OAAAE,IAAA,2CAAKE,MAAM,aAAaG,GAAG,sBACzBP,EAAA,QAAAE,IAAA,+CAIJF,EAAK,OAAAE,IAAA,2CAAAE,MAAM,sBAAsBC,KAAK,QAAO,kBAAiB,sBAC5DL,EAAM,QAAAE,IAAA,2CAAAI,KAAK,e","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-d5ee7c5a.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as i,a as o}from"./p-DS8meZSd.js";import{d as e,t as s}from"./p-DcmcuUOA.js";import{i as a}from"./p-Bw2fh5LT.js";const c=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.checkbox-group-container{display:flex;flex-direction:column}.checkbox-group{display:flex;font-family:var(--ifx-font-family);gap:8px}.checkbox-group.horizontal{flex-direction:row;column-gap:12px}.checkbox-group.vertical{flex-direction:column;row-gap:12px}.group-label{font:400 0.75rem/1rem "Source Sans 3";margin-bottom:8px;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.caption{margin-top:8px;align-self:flex-start;display:flex;width:100%;column-gap:8px;justify-content:space-between;align-items:center}.caption.default{color:#1D1D1D}.caption.error{color:#CD002F}.caption-text{font:400 0.75rem/1rem "Source Sans 3";flex:1;text-align:left;text-underline-position:from-font;text-decoration-skip-ink:none}.caption-icon{flex:0;display:flex}';const r=class{constructor(i){t(this,i);this.errorStates=new Map;this.alignment="vertical";this.groupLabelText="Group Label Text";this.hasErrors=false;this.handleSlotChange=()=>{this.initializeState()}}handleCheckboxError(t){const i=t.target;if(i.tagName==="ifx-checkbox"){this.errorStates.set(i,t.detail);this.updateHasErrors()}}async setGroupError(t){const i=Array.from(this.el.querySelectorAll("ifx-checkbox"));i.forEach((i=>{i.error=t}))}componentWillLoad(){this.initializeState()}async componentDidLoad(){if(!a(this.el)){const t=e();s("ifx-checkbox-group",await t)}}initializeState(){this.errorStates.clear();const t=Array.from(this.el.querySelectorAll("ifx-checkbox"));t.forEach((t=>{if(!this.errorStates.has(t)){this.errorStates.set(t,t.error||false)}}));this.updateHasErrors()}updateHasErrors(){this.hasErrors=Array.from(this.errorStates.values()).some((t=>t))}render(){return i("div",{key:"77bd90dcf5a408a2191657ef2c681a0c8a679121",class:"checkbox-group-container"},this.showGroupLabel?i("div",{class:"group-label"},this.groupLabelText," *"):"",i("div",{key:"44ab6cd77004041bd792398258db2c322dfe8253",class:`checkbox-group ${this.alignment} ${this.size}`},i("slot",{key:"0bf6ef77d1f7d2fa6213f47e7aa4b9e11787b33e",onSlotchange:this.handleSlotChange})),this.showCaption?i("div",{class:`caption ${this.hasErrors?"error":"default"}`},this.showCaptionIcon?i("div",{class:"caption-icon"},i("ifx-icon",{icon:"c-info-16"})):"",i("div",{class:"caption-text"},this.captionText)):"")}static get formAssociated(){return true}get el(){return o(this)}};r.style=c;export{r as ifx_checkbox_group};
-//# sourceMappingURL=p-d5ee7c5a.entry.js.map

package/dist/infineon-design-system-stencil/p-d5ee7c5a.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["checkboxGroupCss","CheckboxGroup","constructor","hostRef","this","errorStates","Map","alignment","groupLabelText","hasErrors","handleSlotChange","initializeState","handleCheckboxError","event","checkbox","target","tagName","set","detail","updateHasErrors","setGroupError","error","checkboxes","Array","from","el","querySelectorAll","forEach","componentWillLoad","componentDidLoad","isNestedInIfxComponent","framework","detectFramework","trackComponent","clear","has","values","some","render","h","key","class","showGroupLabel","size","onSlotchange","showCaption","showCaptionIcon","icon","captionText"],"sources":["src/components/checkbox-group/checkbox-group.scss?tag=ifx-checkbox-group&encapsulation=shadow","src/components/checkbox-group/checkbox-group.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.checkbox-group-container {\n    display: flex;\n    flex-direction: column;\n}\n\n.checkbox-group {\n    display: flex;\n    font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n    gap: tokens.$ifxSpace100;\n\n    &.horizontal {\n        flex-direction: row;\n        column-gap: tokens.$ifxSpace150;\n    }\n\n    &.vertical {\n        flex-direction: column;\n        row-gap: tokens.$ifxSpace150;\n    }\n}\n\n.group-label {\n    font: tokens.$ifxBodyBody05;\n    margin-bottom: tokens.$ifxSpace100;\n    text-align: left;\n    text-underline-position: from-font;\n    text-decoration-skip-ink: none;\n}\n\n.caption {\n    margin-top: tokens.$ifxSpace100;\n    align-self: flex-start;\n    display: flex;\n    width: 100%;\n    column-gap: tokens.$ifxSpace100;\n    justify-content: space-between;\n    align-items: center;\n\n    &.default {\n        color: tokens.$ifxColorBaseBlack;\n    }\n\n    &.error {\n        color: tokens.$ifxColorRed500;\n    }\n}\n\n.caption-text {\n    font: tokens.$ifxBodyBody05;\n    flex: 1;\n    text-align: left;\n    text-underline-position: from-font;\n    text-decoration-skip-ink: none;\n}\n\n.caption-icon {\n    flex:0;\n    display: flex;\n}","import { Component, State, Prop, h, Element, Listen, Method } 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-checkbox-group',\n  styleUrl: 'checkbox-group.scss',\n  shadow: true,\n  formAssociated: true\n})\n\nexport class CheckboxGroup {\n  private errorStates: Map<HTMLElement, boolean> = new Map();\n\n  @Element() el: HTMLElement;\n  @Prop() alignment: 'horizontal' | 'vertical' = 'vertical';\n  @Prop() size: string;\n  @Prop() showGroupLabel: boolean;\n  @Prop() groupLabelText: string = 'Group Label Text';\n  @Prop() showCaption: boolean;\n  @Prop() captionText: string;\n  @Prop() showCaptionIcon: boolean;\n  @State() hasErrors: boolean = false;\n\n  @Listen('ifxError')\n  handleCheckboxError(event: CustomEvent) {\n    const checkbox = event.target as HTMLElement;\n    if (checkbox.tagName === 'ifx-checkbox') {\n      this.errorStates.set(checkbox, event.detail);\n      this.updateHasErrors();\n    }\n  }\n\n  // Method to set the error state of all checkboxes in the group\n  @Method()\n  async setGroupError(error: boolean) {\n    const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\n    checkboxes.forEach((checkbox) => {\n      (checkbox as any).error = error;\n    });\n  }\n\n  componentWillLoad() {\n    this.initializeState();\n\n  }\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-checkbox-group', await framework)\n    }\n  }\n\n  handleSlotChange = () => {\n    this.initializeState();\n  };\n\n  private initializeState() {\n    this.errorStates.clear();\n    const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\n    checkboxes.forEach((checkbox) => {\n      if (!this.errorStates.has(checkbox)) {\n        this.errorStates.set(checkbox, (checkbox as any).error || false);\n      }\n    });\n    this.updateHasErrors();\n  }\n\n  private updateHasErrors() {\n    this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);\n  }\n\n  render() {\n    return (\n      <div class='checkbox-group-container'>\n        {this.showGroupLabel ? <div class='group-label'>{this.groupLabelText} *</div> : ''}\n        <div class={`checkbox-group ${this.alignment} ${this.size}`}>\n          <slot onSlotchange={this.handleSlotChange}></slot>\n        </div>\n        {this.showCaption ? (\n          <div class={`caption ${this.hasErrors ? 'error' : 'default'}`}>\n            {this.showCaptionIcon ? <div class='caption-icon'><ifx-icon icon=\"c-info-16\">\n            </ifx-icon></div> : ''}\n            <div class='caption-text'>{this.captionText}</div>\n          </div>) : ''}\n      </div>\n    );\n  }\n}"],"mappings":"iIAAA,MAAMA,EAAmB,m0B,MCYZC,EAAa,MAP1B,WAAAC,CAAAC,G,UAQUC,KAAAC,YAAyC,IAAIC,IAG7CF,KAASG,UAA8B,WAGvCH,KAAcI,eAAW,mBAIxBJ,KAASK,UAAY,MAgC9BL,KAAgBM,iBAAG,KACjBN,KAAKO,iBAAiB,CAkCzB,CAhEC,mBAAAC,CAAoBC,GAClB,MAAMC,EAAWD,EAAME,OACvB,GAAID,EAASE,UAAY,eAAgB,CACvCZ,KAAKC,YAAYY,IAAIH,EAAUD,EAAMK,QACrCd,KAAKe,iB,EAMT,mBAAMC,CAAcC,GAClB,MAAMC,EAAaC,MAAMC,KAAKpB,KAAKqB,GAAGC,iBAAiB,iBACvDJ,EAAWK,SAASb,IACjBA,EAAiBO,MAAQA,CAAK,G,CAInC,iBAAAO,GACExB,KAAKO,iB,CAIP,sBAAMkB,GACJ,IAAIC,EAAuB1B,KAAKqB,IAAK,CACnC,MAAMM,EAAYC,IAClBC,EAAe,2BAA4BF,E,EAQvC,eAAApB,GACNP,KAAKC,YAAY6B,QACjB,MAAMZ,EAAaC,MAAMC,KAAKpB,KAAKqB,GAAGC,iBAAiB,iBACvDJ,EAAWK,SAASb,IAClB,IAAKV,KAAKC,YAAY8B,IAAIrB,GAAW,CACnCV,KAAKC,YAAYY,IAAIH,EAAWA,EAAiBO,OAAS,M,KAG9DjB,KAAKe,iB,CAGC,eAAAA,GACNf,KAAKK,UAAYc,MAAMC,KAAKpB,KAAKC,YAAY+B,UAAUC,MAAMhB,GAAUA,G,CAGzE,MAAAiB,GACE,OACEC,EAAA,OAAAC,IAAA,2CAAKC,MAAM,4BACRrC,KAAKsC,eAAiBH,EAAK,OAAAE,MAAM,eAAerC,KAAKI,eAAc,MAAY,GAChF+B,EAAK,OAAAC,IAAA,2CAAAC,MAAO,kBAAkBrC,KAAKG,aAAaH,KAAKuC,QACnDJ,EAAA,QAAAC,IAAA,2CAAMI,aAAcxC,KAAKM,oBAE1BN,KAAKyC,YACJN,EAAA,OAAKE,MAAO,WAAWrC,KAAKK,UAAY,QAAU,aAC/CL,KAAK0C,gBAAkBP,EAAK,OAAAE,MAAM,gBAAeF,EAAU,YAAAQ,KAAK,eAC7C,GACpBR,EAAA,OAAKE,MAAM,gBAAgBrC,KAAK4C,cACxB,G","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-f8f4af1c.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as o,a as i}from"./p-DS8meZSd.js";import{d as a,t as r}from"./p-DcmcuUOA.js";import{i as t}from"./p-Bw2fh5LT.js";const n=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}:host{display:inline-flex}.container{display:inline-flex;align-items:center;padding:4px 16px;border:1px solid #BFBBBB;border-radius:9999px;background-color:#FFFFFF;gap:8px;font-family:var(--ifx-font-family)}.container:hover{cursor:pointer;border-color:#8D8786}.container:active,.container.active{border-color:#1D1D1D}.container:focus:not(:active,.active){outline:none;border-color:#0A8276}.container .label{margin:0;font-weight:400;font-size:1rem;line-height:20px;color:#1D1D1D}';const c=class{constructor(o){e(this,o)}async componentDidLoad(){if(!t(this.el)){const e=a();r("ifx-tag",await e)}}render(){return o("div",{key:"966e46068c7752908bc22dfaf78b6f4e6f21d6ef",role:this.role,"aria-label":this.ariaLabel,tabindex:"0",class:"container"},this.icon&&o("ifx-icon",{key:"fb8f07d770cdb09894bd968c959087ecb1de1576",icon:this.icon}),o("p",{key:"1ea5d69b3f3183599c7e3402cf5289a5c0c36523",class:"label"},o("slot",{key:"03f8572976b5bcca3dba3734ccef52001a0466bf"})))}get el(){return i(this)}};c.style=n;export{c as ifx_tag};
-//# sourceMappingURL=p-f8f4af1c.entry.js.map

package/dist/infineon-design-system-stencil/p-f8f4af1c.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["tagCss","Tag","componentDidLoad","isNestedInIfxComponent","this","el","framework","detectFramework","trackComponent","render","h","key","role","ariaLabel","tabindex","class","icon"],"sources":["src/components/tag/tag.scss?tag=ifx-tag&encapsulation=shadow","src/components/tag/tag.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n:host {\n  display: inline-flex;\n}\n\n.container {\n  display: inline-flex;\n  align-items: center;\n  padding: tokens.$ifxSpace50 tokens.$ifxSpace200;\n  border: 1px solid tokens.$ifxColorEngineering300;\n  border-radius: tokens.$ifxBorderRadiusRound;\n  background-color: tokens.$ifxColorBaseWhite;\n  gap: tokens.$ifxSpace100;\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\n\n\n\n  &:hover {\n    cursor: pointer;\n    border-color: tokens.$ifxColorEngineering400;\n  }\n\n  &:active,\n  &.active {\n    border-color: tokens.$ifxColorBaseBlack;\n  }\n\n  &:focus:not(:active, .active) {\n    outline: none;\n    border-color: tokens.$ifxColorOcean500;\n  }\n\n  .label {\n    margin: 0;\n    font-weight: tokens.$ifxFontWeightRegular;\n    font-size: tokens.$ifxFontSizeM;\n    line-height: 20px;\n    color: tokens.$ifxColorBaseBlack;\n  }\n}","import { Component, Prop, h, 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-tag',\n  styleUrl: 'tag.scss',\n  shadow: true,\n})\nexport class Tag {\n  @Element() el: HTMLElement;\n  @Prop() icon: string;\n  @Prop() ariaLabel: string | null;\n  @Prop() role: string | null;\n\n  async componentDidLoad() {\n    if (!isNestedInIfxComponent(this.el)) {\n      const framework = detectFramework();\n      trackComponent('ifx-tag', await framework);\n    }\n  }\n\n  render() {\n    return (\n      <div role={this.role} aria-label={this.ariaLabel} tabindex=\"0\" class=\"container\">\n        {this.icon && <ifx-icon icon={this.icon}></ifx-icon>}\n        <p class=\"label\">\n          <slot />\n        </p>\n      </div>\n    );\n  }\n}\n"],"mappings":"iIAAA,MAAMA,EAAS,8hB,MCUFC,EAAG,M,yBAMd,sBAAMC,GACJ,IAAKC,EAAuBC,KAAKC,IAAK,CACpC,MAAMC,EAAYC,IAClBC,EAAe,gBAAiBF,E,EAIpC,MAAAG,GACE,OACEC,EAAK,OAAAC,IAAA,2CAAAC,KAAMR,KAAKQ,KAAkB,aAAAR,KAAKS,UAAWC,SAAS,IAAIC,MAAM,aAClEX,KAAKY,MAAQN,EAAA,YAAAC,IAAA,2CAAUK,KAAMZ,KAAKY,OACnCN,EAAG,KAAAC,IAAA,2CAAAI,MAAM,SACPL,EAAQ,QAAAC,IAAA,8C","ignoreList":[]}

package/dist/infineon-design-system-stencil/p-fb11d0cc.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as s,a}from"./p-DS8meZSd.js";import{d as i,t as o}from"./p-DcmcuUOA.js";import{i as n}from"./p-Bw2fh5LT.js";const r=':root{--ifx-font-family:"Source Sans 3", "Arial, sans-serif"}.group{display:flex;flex-direction:column;justify-content:space-between;gap:12px}.group__label{font:400 0.75rem/1rem "Source Sans 3"}.group__label:empty{display:none}.group__controls{display:flex;flex-wrap:wrap}.group__controls ::slotted(*){margin-left:-1px;margin-top:-1px}.group__caption{display:flex;align-items:center;gap:8px;font:400 0.75rem/1rem "Source Sans 3"}';const l=class{constructor(s){e(this,s);this.ifxChange=t(this,"ifxChange",7);this.caption="";this.label="";this.size="regular";this.selectedValue=""}onSegmentSelect(e){const{previousValue:t,selectedValue:s}=this.unselectPreviousSegment(e.detail);this.selectedValue=s;this.ifxChange.emit({previousValue:t,selectedValue:s})}unselectPreviousSegment(e){let t;let s;const a=this.getSegments();a.forEach((a=>{if(a.selected){if(a.segmentIndex!==e){a.selected=false;t=a.value}else{s=a.value}}}));return{previousValue:t,selectedValue:s}}getSegments(){return this.SegmentedControl.querySelectorAll("ifx-segment")}setActiveSegment(){const e=this.getSegments();let t=false;e.forEach(((e,s)=>{e.segmentIndex=s;if(t){if(e.selected)e.selected=false}else{if(e.selected){t=true;this.selectedValue=e.value}}}))}setSegmentSize(){const e=this.getSegments();e.forEach((e=>{e.shadowRoot.querySelector(".segment").classList.add(`segment--${this.size}`)}))}async componentDidLoad(){if(!n(this.SegmentedControl)){const e=i();o("ifx-segmented-control",await e)}this.setActiveSegment()}render(){return s("div",{key:"7c7d870d32000a823ae2d365fb8b864d800ec9fe","aria-value":this.selectedValue,"aria-label":"segmented control",class:"group"},s("div",{key:"66e95707b6616e370e35cd98e4c3b89853b8501f",class:"group__label"},this.label.trim()),s("div",{key:"ab8c969a145fa9e1071ee12426a641034ff8be4d",class:"group__controls"},s("slot",{key:"849c4bdf76a0951d829820620813258553b8a6df"})),this.caption.trim()&&s("div",{key:"905c964392ca304634aba610f96c43a4e5b95eb9",class:"group__caption"},s("ifx-icon",{key:"42fb13f0a7170a7b36ea2a9c8afb1d3ba9d579c9",icon:"c-info-16"})," ",this.caption.trim()))}componentDidRender(){this.setSegmentSize()}get SegmentedControl(){return a(this)}};l.style=r;export{l as ifx_segmented_control};
-//# sourceMappingURL=p-fb11d0cc.entry.js.map