@infineon/infineon-design-system-stencil 39.4.4--canary.1723.b2cb04cb46890b174f47cfd446a0e20dc3cee6fc.0 → 39.4.4-canary.0

package/dist/components/{p-F-WOWp_H.js → p-BpoV3zpc.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, a as Host } from './index.js';
 import { i as isNestedInIfxComponent, d as detectFramework, t as trackComponent } from './p-bqYaVeZb.js';
 import { c as classNames } from './p-DMLRPGid.js';
-import { d as defineCustomElement$1 } from './p-DhNY6ZGA.js';
+import { d as defineCustomElement$1 } from './p-BnjY2AJX.js';
 
 const iconButtonCss = ":host{display:inline-flex}.btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px;gap:8px;color:#FFFFFF;flex-direction:row;font-weight:600;border-radius:1px;line-height:1.5rem;outline:none;font-family:var(--ifx-font-family);text-decoration:none;user-select:none;border:1px solid rgba(0, 0, 0, 0);font-size:1rem;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out}.btn:not(.disabled){cursor:pointer}.btn-primary{color:#FFFFFF;background-color:#0A8276}.btn-primary:disabled,.btn-primary.disabled{background-color:#BFBBBB;color:#FFFFFF;pointer-events:none}.btn-secondary{color:#0A8276;background-color:#FFFFFF;border-color:#0A8276}.btn-secondary:disabled,.btn-secondary.disabled{background-color:#FFFFFF;border:1px solid #BFBBBB;color:#BFBBBB;pointer-events:none}.btn-tertiary{background-color:transparent;color:#1D1D1D}.btn-tertiary:disabled,.btn-tertiary.disabled{color:#BFBBBB;pointer-events:none}.btn.icon-button{min-width:initial;min-height:initial;width:40px;height:40px;padding:0;justify-content:center}.btn.icon-button.btn-round{border-radius:100px}.btn.icon-button.btn-square{border-radius:1px}.btn.icon-button.btn-s{width:32px;height:32px;padding:8px}.btn.icon-button.btn-l{width:48px;height:48px;padding:8px}.btn.btn-primary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-primary:not(:disabled,.disabled):hover{background-color:#08665C;border-color:#08665C}.btn.btn-primary:not(:disabled,.disabled):active,.btn.btn-primary:not(:disabled,.disabled).active{background-color:#06534B;border-color:#06534B}.btn.btn-secondary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #0A8276}.btn.btn-secondary:not(:disabled,.disabled):hover{background-color:#08665C;border-color:#08665C;color:#FFFFFF}.btn.btn-secondary:not(:disabled,.disabled):active,.btn.btn-secondary:not(:disabled,.disabled).active{background-color:#06534B;border-color:#06534B}.btn.btn-tertiary:not(:disabled,.disabled):focus:not(:active,.active){outline:none;color:#1D1D1D;box-shadow:0 0 0 0px #FFFFFF, 0 0 0 2px #0A8276}.btn.btn-tertiary:not(:disabled,.disabled):hover{color:#0A8276}.btn.btn-tertiary:not(:disabled,.disabled):active,.btn.btn-tertiary:not(:disabled,.disabled).active{color:#08665C}";
 
@@ -37,7 +37,7 @@ const IconButton = /*@__PURE__*/ proxyCustomElement(class IconButton extends H {
         }
     }
     render() {
-        return (h(Host, { key: '2a31f0c17ad2f648807b6da75e145f6b028f6858', "aria-disabled": this.disabled, "aria-label": this.ariaLabel }, this.href ? (h("a", { ref: (el) => (this.focusableElement = el), class: this.getClassNames(), href: !this.disabled ? this.href : undefined, target: this.target, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined }, h("ifx-icon", { icon: this.internalIcon }))) : (h("button", { class: this.getClassNames(), type: "button", disabled: this.disabled }, h("ifx-icon", { icon: this.internalIcon })))));
+        return (h(Host, { key: 'fed25bf7da7733702a1a614480b716f9bf697c38', "aria-disabled": this.disabled, "aria-label": this.ariaLabel }, this.href ? (h("a", { ref: (el) => (this.focusableElement = el), class: this.getClassNames(), href: !this.disabled ? this.href : undefined, target: this.target, rel: this.target === '_blank' ? 'noopener noreferrer' : undefined }, h("ifx-icon", { icon: this.internalIcon }))) : (h("button", { class: this.getClassNames(), type: "button", disabled: this.disabled }, h("ifx-icon", { icon: this.internalIcon })))));
     }
     getVariantClass() {
         return `${this.variant}` === "secondary"
@@ -101,6 +101,6 @@ function defineCustomElement() {
 }
 
 export { IconButton as I, defineCustomElement as d };
-//# sourceMappingURL=p-F-WOWp_H.js.map
+//# sourceMappingURL=p-BpoV3zpc.js.map
 
-//# sourceMappingURL=p-F-WOWp_H.js.map
+//# sourceMappingURL=p-BpoV3zpc.js.map

package/dist/components/p-BpoV3zpc.js.map

@@ -0,0 +1 @@
+{"file":"p-BpoV3zpc.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/icon-button/icon-button.scss?tag=ifx-icon-button&encapsulation=shadow","src/components/icon-button/icon-button.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\r\n\r\n:host {\r\n  display: inline-flex;\r\n}\r\n\r\n.btn {\r\n  box-sizing: border-box;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-height: tokens.$ifxSize500;\r\n  padding: 8px;\r\n  gap: tokens.$ifxSpace100;\r\n  color: tokens.$ifxColorBaseWhite;\r\n  flex-direction: row;\r\n  font-weight: tokens.$ifxFontWeightSemibold;\r\n  border-radius: tokens.$ifxBorderRadius12;\r\n  line-height: tokens.$ifxLineHeightM;\r\n  outline: none;\r\n  font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;\r\n\r\n\r\n  text-decoration: none;\r\n  user-select: none;\r\n  border: 1px solid rgba(0, 0, 0, 0);\r\n  font-size: tokens.$ifxFontSizeM;\r\n  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;\r\n}\r\n\r\n.btn:not(.disabled) {\r\n  cursor: pointer;\r\n}\r\n\r\n.btn-primary {\r\n  color: tokens.$ifxColorBaseWhite;\r\n  background-color: tokens.$ifxColorOcean500;\r\n\r\n  &:disabled,\r\n  &.disabled {\r\n    background-color: tokens.$ifxColorEngineering300;\r\n    color: tokens.$ifxColorBaseWhite;\r\n    pointer-events: none;\r\n\r\n  }\r\n}\r\n\r\n\r\n.btn-secondary {\r\n  color: tokens.$ifxColorOcean500;\r\n  background-color: tokens.$ifxColorBaseWhite;\r\n  border-color: tokens.$ifxColorOcean500;\r\n\r\n  &:disabled,\r\n  &.disabled {\r\n    background-color: tokens.$ifxColorBaseWhite;\r\n    border: 1px solid tokens.$ifxColorEngineering300;\r\n    color: tokens.$ifxColorEngineering300;\r\n    pointer-events: none;\r\n\r\n  }\r\n}\r\n\r\n.btn-tertiary {\r\n  background-color: transparent;\r\n  color: tokens.$ifxColorBaseBlack;\r\n\r\n  &:disabled,\r\n  &.disabled {\r\n    color: tokens.$ifxColorEngineering300;\r\n    pointer-events: none;\r\n  }\r\n}\r\n\r\n\r\n.btn {\r\n\r\n  &.icon-button {\r\n    min-width: initial;\r\n    min-height: initial;\r\n    width: tokens.$ifxSize500;\r\n    height: tokens.$ifxSize500;\r\n    padding: 0;\r\n    justify-content: center;\r\n\r\n    &.btn-round {\r\n      border-radius: 100px;\r\n    }\r\n\r\n    &.btn-square {\r\n      border-radius: tokens.$ifxBorderRadius12;\r\n    }\r\n\r\n    &.btn-s {\r\n      width: tokens.$ifxSize400;\r\n      height: tokens.$ifxSize400;\r\n      padding: 8px;\r\n    }\r\n\r\n\r\n    &.btn-l {\r\n      width: tokens.$ifxSize600;\r\n      height: tokens.$ifxSize600;\r\n      padding: 8px;\r\n    }\r\n  }\r\n\r\n  &.btn-primary:not(:disabled, .disabled) {\r\n    &:focus:not(:active, .active) {\r\n      outline: none;\r\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\r\n    }\r\n\r\n    &:hover {\r\n      background-color: tokens.$ifxColorOcean600;\r\n      border-color: tokens.$ifxColorOcean600;\r\n    }\r\n\r\n    &:active,\r\n    &.active {\r\n      background-color: tokens.$ifxColorOcean700;\r\n      border-color: tokens.$ifxColorOcean700;\r\n    }\r\n  }\r\n\r\n\r\n  &.btn-secondary:not(:disabled, .disabled) {\r\n    &:focus:not(:active, .active) {\r\n      outline: none;\r\n      box-shadow: 0 0 0 2px tokens.$ifxColorBaseWhite, 0 0 0 4px tokens.$ifxColorOcean500;\r\n    }\r\n\r\n    &:hover {\r\n      background-color: tokens.$ifxColorOcean600;\r\n      border-color: tokens.$ifxColorOcean600;\r\n      color: tokens.$ifxColorBaseWhite;\r\n    }\r\n\r\n    &:active,\r\n    &.active {\r\n      background-color: tokens.$ifxColorOcean700;\r\n      border-color: tokens.$ifxColorOcean700;\r\n    }\r\n  }\r\n\r\n  &.btn-tertiary:not(:disabled, .disabled) {\r\n    &:focus:not(:active, .active) {\r\n      outline: none;\r\n      color: tokens.$ifxColorBaseBlack;\r\n      box-shadow: 0 0 0 0px tokens.$ifxColorBaseWhite, 0 0 0 2px tokens.$ifxColorOcean500;\r\n    }\r\n\r\n    &:hover {\r\n      color: tokens.$ifxColorOcean500;\r\n    }\r\n\r\n    &:active,\r\n    &.active {\r\n      color: tokens.$ifxColorOcean600;\r\n    }\r\n  }\r\n}","import { Component, Prop, h, Host, Method, Element, Listen, Watch, State } from '@stencil/core';\r\nimport { trackComponent } from '../../global/utils/tracking'; \r\nimport { isNestedInIfxComponent } from '../../global/utils/dom-utils';\r\nimport { detectFramework } from '../../global/utils/framework-detection';\r\nimport classNames from 'classnames';\r\n\r\n@Component({\r\n  tag: 'ifx-icon-button',\r\n  styleUrl: 'icon-button.scss',\r\n  shadow: true,\r\n})\r\n\r\nexport class IconButton {\r\n  @Prop() variant: 'primary' | 'secondary' | 'tertiary';\r\n  @Prop() size: string;\r\n  @Prop() disabled: boolean;\r\n  @Prop() icon: string;\r\n  @Prop() href: string;\r\n  @Prop() target: string = '_self';\r\n  @Prop() shape: string = 'round';\r\n  @Prop() ariaLabel: string | null;\r\n  @State() internalIcon: string;\r\n  @Element() el;\r\n\r\n  private focusableElement: HTMLElement;\r\n  \r\n  @Listen('click', { capture: true })\r\n  handleClick(event: Event) {\r\n    if (this.disabled) {\r\n      event.stopImmediatePropagation();\r\n    }\r\n  }\r\n\r\n  @Watch('icon')\r\n  updateIcon(newIcon: string) { \r\n    this.internalIcon = newIcon;\r\n  }\r\n\r\n  @Method()\r\n  async setFocus() {\r\n    this.focusableElement.focus();\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (this.shape === '') {\r\n      this.shape = 'round';\r\n    }\r\n    this.internalIcon = this.icon;\r\n  }\r\n\r\n  async componentDidLoad() { \r\n    if(!isNestedInIfxComponent(this.el)) { \r\n      const framework = detectFramework();\r\n      trackComponent('ifx-icon-button', await framework)\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host \r\n        aria-disabled={this.disabled}\r\n        aria-label={this.ariaLabel}> \r\n        {this.href ? (\r\n          <a\r\n            ref={(el) => (this.focusableElement = el)}\r\n            class={this.getClassNames()}\r\n            href={!this.disabled ? this.href : undefined} \r\n            target={this.target}\r\n            rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}\r\n          >\r\n            <ifx-icon icon={this.internalIcon}></ifx-icon>\r\n          </a>\r\n        ) : (\r\n          <button\r\n            class={this.getClassNames()}\r\n            type=\"button\"\r\n            disabled={this.disabled}\r\n          >\r\n            <ifx-icon icon={this.internalIcon}></ifx-icon>\r\n          </button>\r\n        )}\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  getVariantClass() {\r\n    return `${this.variant}` === \"secondary\"\r\n      ? `secondary`\r\n      : `${this.variant}` === 'tertiary'\r\n        ? `tertiary`\r\n        : `primary`;\r\n  }\r\n\r\n  getSizeClass() {\r\n    if (`${this.size}` === \"xs\") {\r\n      return \"xs\"\r\n    }\r\n    else if (`${this.size}` === \"s\") {\r\n      return \"s\"\r\n    }\r\n    else if (`${this.size}` === \"l\") {\r\n      return \"l\"\r\n    }\r\n    else return \"\";\r\n  }\r\n\r\n  getClassNames() {\r\n    return classNames(\r\n      'btn icon-button',\r\n      `btn-${this.shape}`,\r\n      this.size && `btn-${this.getSizeClass()}`,\r\n      `btn-${this.getVariantClass()}`,\r\n      this.disabled ? 'disabled' : ''\r\n    );\r\n  }\r\n}"],"version":3}

package/dist/components/{p-DHLzWSzN.js → p-C0oKAW62.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
 import { i as isNestedInIfxComponent, d as detectFramework, t as trackComponent } from './p-bqYaVeZb.js';
 import { g as getDefaultExportFromCjs } from './p-B85MJLTf.js';
-import { d as defineCustomElement$1 } from './p-DhNY6ZGA.js';
+import { d as defineCustomElement$1 } from './p-BnjY2AJX.js';
 
 var choices = {exports: {}};
 
@@ -7066,9 +7066,9 @@ const Choices = /*@__PURE__*/ proxyCustomElement(class Choices extends H {
         // destroy choices element to restore previous dom structure
         // so vdom can replace the element correctly
         this.destroy();
-        return (h("div", { key: 'f7a22d8351935d6c1c5ec3b982b8108a3c1922db', class: `ifx-select-container` }, this.label ? (h("div", { class: `ifx-label-wrapper ${this.disabled && !this.error ? 'disabled' : ""}` }, h("span", null, this.label), this.required && h("span", { class: `required ${this.error ? 'error' : ''}` }, "*"))) : null, h("div", { key: 'e887521113196418caed070b83fb51d4011428ed', class: `${choicesWrapperClass} 
-            ${this.disabled && !this.error ? 'disabled' : ''} 
-            ${this.error ? 'error' : ''}`, onClick: this.disabled && !this.error ? undefined : e => this.handleWrapperClick(e), onKeyDown: event => this.handleKeyDown(event) }, h("select", Object.assign({ key: 'b6d9632789477be3de2de6a0dd85dcba7b69be3d', class: "single__select-input-field", disabled: this.disabled && !this.error }, attributes, { "data-trigger": true, onChange: () => this.handleChange() }), this.createSelectOptions(this.options)), h("div", { key: '245b0f374f6fa9f45c76c0ac38db3ca2cc2c4b5f', class: "single__select-icon-container" }, this.optionIsSelected && (h("div", { key: '5ef777317eb672a0e2b1f1ba71b1f1dde5b74480', class: `ifx-choices__icon-wrapper-delete ${!this.showClearButton ? 'hide' : ''}` }, h("ifx-icon", { key: '002f589c071749707ef2de20ad0702a3288c9b88', icon: "cRemove16", onClick: () => this.clearSelection() }))), h("div", { key: 'cf822d1d8e24f0555cc590bafe20354ef0ca5f11', class: "ifx-choices__icon-wrapper-up" }, h("ifx-icon", { key: "icon-up", icon: "chevron-up-16" })), h("div", { key: 'e6f205f02ed851147496f26f5f08dd17102a2680', class: "ifx-choices__icon-wrapper-down" }, h("ifx-icon", { key: "icon-down", icon: "chevron-down-16" })))), this.caption && h("div", { key: '9dd1680c52e34aec1a0c902b65f1131c865994a1', class: `single__select-caption ${this.error ? 'error' : ''} ${this.disabled && !this.error ? 'disabled' : ''}` }, this.caption)));
+        return (h("div", { key: 'b6991547fb607b9ae6acac18344a4884b3f6e96f', class: `ifx-select-container` }, this.label ? (h("div", { class: `ifx-label-wrapper ${this.disabled && !this.error ? 'disabled' : ""}` }, h("span", null, this.label), this.required && h("span", { class: `required ${this.error ? 'error' : ''}` }, "*"))) : null, h("div", { key: 'd4631090d5c4a358c74beef998d9b147fa1f82c5', class: `${choicesWrapperClass} 
+            ${this.disabled && !this.error ? 'disabled' : ''} 
+            ${this.error ? 'error' : ''}`, onClick: this.disabled && !this.error ? undefined : e => this.handleWrapperClick(e), onKeyDown: event => this.handleKeyDown(event) }, h("select", Object.assign({ key: 'a37b0ec62a2f0e0f7f6d648498d839bfe55b6080', class: "single__select-input-field", disabled: this.disabled && !this.error }, attributes, { "data-trigger": true, onChange: () => this.handleChange() }), this.createSelectOptions(this.options)), h("div", { key: '43cb963ce76209e1cf3243361c8933a50246037b', class: "single__select-icon-container" }, this.optionIsSelected && (h("div", { key: 'f11a8226a109c7c9ab55c569e6a1fab7e03b3d0e', class: `ifx-choices__icon-wrapper-delete ${!this.showClearButton ? 'hide' : ''}` }, h("ifx-icon", { key: '4a9e713955e8b3a46852af0f587f720c8c942f37', icon: "cRemove16", onClick: () => this.clearSelection() }))), h("div", { key: 'd414796caa9b716af1a1d2b9300e31ec123c0f7e', class: "ifx-choices__icon-wrapper-up" }, h("ifx-icon", { key: "icon-up", icon: "chevron-up-16" })), h("div", { key: 'c08899e0217f465d1e7cb9306101b1b2f80db2ef', class: "ifx-choices__icon-wrapper-down" }, h("ifx-icon", { key: "icon-down", icon: "chevron-down-16" })))), this.caption && h("div", { key: 'ed418d2787c25790157f7a0651d9acc7693c3423', class: `single__select-caption ${this.error ? 'error' : ''} ${this.disabled && !this.error ? 'disabled' : ''}` }, this.caption)));
     }
     toggleDropdown() {
         const div = this.root.querySelector('.ifx-choices__wrapper');
@@ -7188,54 +7188,54 @@ const Choices = /*@__PURE__*/ proxyCustomElement(class Choices extends H {
                             let removeButtonHTML = '';
                             if (data.placeholder && !((_a = self.selectedOption) === null || _a === void 0 ? void 0 : _a.value)) {
                                 // For placeholders, use data-id="placeholder"
-                                return template(`
-                  <div class="choices__placeholder" data-item data-id="${data.id}" data-value="${data.value}" ${data.disabled && !this.error ? 'aria-disabled="true"' : ''}>
-                    ${data.label === undefined ? this.placeholderValue : data.label}
-                    ${removeButtonHTML}
-                  </div>
+                                return template(`
+                  <div class="choices__placeholder" data-item data-id="${data.id}" data-value="${data.value}" ${data.disabled && !this.error ? 'aria-disabled="true"' : ''}>
+                    ${data.label === undefined ? this.placeholderValue : data.label}
+                    ${removeButtonHTML}
+                  </div>
                 `);
                             }
                             else {
                                 // For non-placeholder items, use the actual data ID
-                                return template(`
-                <div class="${classNames.item} ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable}" 
-                      data-item 
-                      data-id="${((_b = self.selectedOption) === null || _b === void 0 ? void 0 : _b.id) !== undefined ? (_c = self.selectedOption) === null || _c === void 0 ? void 0 : _c.id : self.choice.getValue().id}" 
-                      data-value="${((_d = self.selectedOption) === null || _d === void 0 ? void 0 : _d.value) !== undefined ? (_e = self.selectedOption) === null || _e === void 0 ? void 0 : _e.value : self.choice.getValue().value}" 
-                      ${data.disabled && !this.error ? 'aria-disabled="true"' : ''}>
-                  <span>${((_f = self.selectedOption) === null || _f === void 0 ? void 0 : _f.label) !== undefined ? (_g = self.selectedOption) === null || _g === void 0 ? void 0 : _g.label : self.choice.getValue().label}</span>
-                  <!-- Add your remove button here if needed -->
-                </div>
+                                return template(`
+                <div class="${classNames.item} ${data.highlighted ? classNames.highlightedState : classNames.itemSelectable}" 
+                      data-item 
+                      data-id="${((_b = self.selectedOption) === null || _b === void 0 ? void 0 : _b.id) !== undefined ? (_c = self.selectedOption) === null || _c === void 0 ? void 0 : _c.id : self.choice.getValue().id}" 
+                      data-value="${((_d = self.selectedOption) === null || _d === void 0 ? void 0 : _d.value) !== undefined ? (_e = self.selectedOption) === null || _e === void 0 ? void 0 : _e.value : self.choice.getValue().value}" 
+                      ${data.disabled && !this.error ? 'aria-disabled="true"' : ''}>
+                  <span>${((_f = self.selectedOption) === null || _f === void 0 ? void 0 : _f.label) !== undefined ? (_g = self.selectedOption) === null || _g === void 0 ? void 0 : _g.label : self.choice.getValue().label}</span>
+                  <!-- Add your remove button here if needed -->
+                </div>
               `);
                             }
                         },
                         input: ({ classNames }) => {
-                            return template(`
-                  <input 
-                    type="search"
-                    class="${classNames.input} ${classNames.inputCloned} ${self.getSizeClass()}"
-                    autocomplete="off"
-                    autocapitalize="off"
-                    spellcheck="false"
-                    role="textbox"
-                    aria-autocomplete="list"
+                            return template(`
+                  <input 
+                    type="search"
+                    class="${classNames.input} ${classNames.inputCloned} ${self.getSizeClass()}"
+                    autocomplete="off"
+                    autocapitalize="off"
+                    spellcheck="false"
+                    role="textbox"
+                    aria-autocomplete="list"
                     aria-label="${this.showSearch ? this.searchPlaceholderValue : ''}">`);
                         },
                         //modifying the template of each item in the options list
                         choice: ({ classNames }, data) => {
                             var _a, _b, _c, _d;
-                            return template(`
-              <div class="${classNames.item} ${classNames.itemChoice} ${self.getSizeClass()} 
-              ${data.selected || ((_a = self.selectedOption) === null || _a === void 0 ? void 0 : _a.value) === data.value || ((_b = self.getPreSelected(self)) === null || _b === void 0 ? void 0 : _b.value) === data.value ? 'selected' : ''} 
-              ${data.placeholder ? classNames.placeholder : ''} 
-              ${data.disabled && !this.error ? classNames.itemDisabled : classNames.itemSelectable} 
-                    role="${data.groupId && data.groupId > 0 ? 'treeitem' : 'option'}"
-                    data-choice ${data.disabled && !this.error ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'}                     data-id="${data.id}"
-                    data-value="${data.value}"
-                    data-select-text="${this.config.itemSelectText}">
-                <span>${data.label}</span>
-                ${data.selected || ((_c = self.selectedOption) === null || _c === void 0 ? void 0 : _c.value) === data.value || ((_d = self.getPreSelected(self)) === null || _d === void 0 ? void 0 : _d.value) === data.value ? '<ifx-icon icon="check16"></ifx-icon>' : ''}
-              </div>
+                            return template(`
+              <div class="${classNames.item} ${classNames.itemChoice} ${self.getSizeClass()} 
+              ${data.selected || ((_a = self.selectedOption) === null || _a === void 0 ? void 0 : _a.value) === data.value || ((_b = self.getPreSelected(self)) === null || _b === void 0 ? void 0 : _b.value) === data.value ? 'selected' : ''} 
+              ${data.placeholder ? classNames.placeholder : ''} 
+              ${data.disabled && !this.error ? classNames.itemDisabled : classNames.itemSelectable} 
+                    role="${data.groupId && data.groupId > 0 ? 'treeitem' : 'option'}"
+                    data-choice ${data.disabled && !this.error ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'}                     data-id="${data.id}"
+                    data-value="${data.value}"
+                    data-select-text="${this.config.itemSelectText}">
+                <span>${data.label}</span>
+                ${data.selected || ((_c = self.selectedOption) === null || _c === void 0 ? void 0 : _c.value) === data.value || ((_d = self.getPreSelected(self)) === null || _d === void 0 ? void 0 : _d.value) === data.value ? '<ifx-icon icon="check16"></ifx-icon>' : ''}
+              </div>
             `);
                         },
                     };
@@ -7411,6 +7411,6 @@ function defineCustomElement() {
 }
 
 export { Choices as C, defineCustomElement as d };
-//# sourceMappingURL=p-DHLzWSzN.js.map
+//# sourceMappingURL=p-C0oKAW62.js.map
 
-//# sourceMappingURL=p-DHLzWSzN.js.map
+//# sourceMappingURL=p-C0oKAW62.js.map