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

package/dist/collection/components/pagination/pagination.js

@@ -158,7 +158,7 @@ export class Pagination {
         this.initPagination();
     }
     render() {
-        return (h("div", { key: '724b3d84f8dc469898c4126b76637c77567f195d', class: "container" }, h("div", { key: '171579231fc284e71acfe1df372e6750742a2973', class: "items__per-page-wrapper" }, h("div", { key: '916428fde974123aa1b805f4815eae6dc2a64097', class: "items__per-page-label" }, "Results per Page"), h("div", { key: '88e7827159c37eee23109dd956863bdc1335f043', class: "items__per-page-field" }, h("ifx-select", { key: '08fc2626e633d33dfa0565074464adc4533072f2', id: 'itemsPerPageSelect', placeholder: 'false', "show-search": 'false', value: undefined, disabled: false, error: false, size: "s", options: this.filteredItemsPerPage, "placeholder-value": "Select" }))), h("div", { key: '1e0299c9b3ba3bbe229039cfe0f298a821b90aea', class: "items__total-wrapper" }, h("div", { key: 'f8c507a16e070b199a75b30138829528ee434ccd', class: "pagination" }, h("ifx-icon-button", { key: 'c6fd48710f97119a71745ff0909b7072aa645e21', class: "prev", icon: "arrow-left-16", onClick: () => this.changePage(this.internalPage - 1) }), h("ol", { key: '860a2420df4b9cdfbed1df0630e8227531b61276' }, this.visiblePages.map((page, i) => typeof page === 'number' ? (h("li", { key: `page-${page}`, class: { [this.CLASS_ACTIVE]: page === this.internalPage }, "data-page": page }, h("a", { href: "javascript:void(0)" }, page))) : (h("li", { class: "ellipsis", key: `ellipsis-${i}` }, h("span", null, "..."))))), h("ifx-icon-button", { key: 'c3645817a9dbc92185d0eef3c71c2231246b3d90', class: "next", icon: "arrow-right-16", onClick: () => this.changePage(this.internalPage + 1) })))));
+        return (h("div", { key: '14f71cd0291d0b01d3b9da91ecec8d3908796107', class: "container" }, h("div", { key: 'd28f3b1a05cd937eec0efa30b661c1e5671542d3', class: "items__per-page-wrapper" }, h("div", { key: '504286b0c1d4d1a77e283612389e2f0a98f76ce3', class: "items__per-page-label" }, "Results per Page"), h("div", { key: '61fb210192777dc3ebf7810f0d311eae2abd3dc3', class: "items__per-page-field" }, h("ifx-select", { key: 'a576ef3d2ee4feb8d9f04550fa08e0a75fdafc07', id: 'itemsPerPageSelect', placeholder: 'false', "show-search": 'false', value: undefined, disabled: false, error: false, size: "s", options: this.filteredItemsPerPage, "placeholder-value": "Select" }))), h("div", { key: '72e40aa84cb9ba69cb4fcbe8d057cf8c6067ac13', class: "items__total-wrapper" }, h("div", { key: 'bf3777a0d9c82cda57125b8bab4a1cdb49f1cfb2', class: "pagination" }, h("ifx-icon-button", { key: 'bcda07cf867ee60e5896d853709b244d2cf4d3ad', class: "prev", icon: "arrow-left-16", onClick: () => this.changePage(this.internalPage - 1) }), h("ol", { key: 'b3b9929e2a05c15aae434b3749dc748a46491cb4' }, this.visiblePages.map((page, i) => typeof page === 'number' ? (h("li", { key: `page-${page}`, class: { [this.CLASS_ACTIVE]: page === this.internalPage }, "data-page": page }, h("a", { href: "javascript:void(0)" }, page))) : (h("li", { class: "ellipsis", key: `ellipsis-${i}` }, h("span", null, "..."))))), h("ifx-icon-button", { key: '719da5df49fe092465e856c43e72d187fc7231a5', class: "next", icon: "arrow-right-16", onClick: () => this.changePage(this.internalPage + 1) })))));
     }
     static get is() { return "ifx-pagination"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-bar/progress-bar.js

@@ -22,7 +22,7 @@ export class ProgressBar {
         }
     }
     render() {
-        return (h("div", { key: '8b85b9583b257c2bb08471502ec81eaf18240299', "aria-label": 'a progress bar', "aria-value": this.value, class: `progress-bar ${this.size}` }, h("div", { key: '4d4ab3b145e47f2ef34b9515d85916bb27d7b2ce', class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && this.internalValue !== 0 && h("span", { key: '43ea3c707df2f815321e7d6a757cb164fbe11500', class: "label" }, `${this.internalValue}%`))));
+        return (h("div", { key: 'ae14994774c95eca7dddebcef8896eab31e3784e', "aria-label": 'a progress bar', "aria-value": this.value, class: `progress-bar ${this.size}` }, h("div", { key: '160d93a72e857e49ca953939eb433a24e80f5c75', class: "progress", style: { width: `${this.internalValue}%` } }, this.showLabel && this.size !== "s" && this.internalValue !== 0 && h("span", { key: '87952d6c604aa81019dcb2701d923d0279144599', class: "label" }, `${this.internalValue}%`))));
     }
     static get is() { return "ifx-progress-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/radio-button/radio-button.js

@@ -99,14 +99,13 @@ export class RadioButton {
         }
     }
     render() {
-        return (h("div", { key: '672fd8be8a134e481c7f4251b95a0978fa3d934e', role: "radio", "aria-checked": String(this.internalChecked), "aria-disabled": String(this.disabled), class: `radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`, onClick: (e) => this.handleRadioButtonClick(e), tabindex: this.disabled ? -1 : 0 }, h("div", { key: '33e9862f00b7544eb320f43e5763edb44242c299', class: `radioButton__wrapper 
+        return (h("div", { key: '78a2de1f0f88da1e4b9c7bed61d74b891f090418', role: "radio", "aria-checked": String(this.internalChecked), "aria-disabled": String(this.disabled), class: `radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`, onClick: (e) => this.handleRadioButtonClick(e), tabindex: this.disabled ? -1 : 0 }, h("div", { key: 'e8ab49ef8588f64a6105a4e800c6ac8c6b002ca0', class: `radioButton__wrapper 
             ${this.internalChecked ? 'checked' : ''} 
             ${this.disabled ? 'disabled' : ''} 
-            ${this.error ? 'error' : ''}` }, this.internalChecked && h("div", { key: 'b2e090f994f231c55fabaa55fa7f7bf0790c92af', class: "radioButton__wrapper-mark" })), this.hasSlot && (h("div", { key: 'b3b0f595a56ff3fb5f43f3d4fee7065a13932a3e', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '6f235a7af0381d4dfcc15a80a32604ed4843eb89' }))), h("input", { key: 'd0c2bf2a3f1471221887fe4046760b9ebf9ce300', type: "radio", hidden: true, ref: el => this.inputElement = el, name: this.name, value: this.value, checked: this.internalChecked, disabled: this.disabled, onClick: (e) => e.stopPropagation() })));
+            ${this.error ? 'error' : ''}` }, this.internalChecked && h("div", { key: 'b1705b00d51a080c6422e994b58a0bc41ef217dd', class: "radioButton__wrapper-mark" })), this.hasSlot && (h("div", { key: '8fcf49828927047de1182d36b532952b437e2fc1', class: `label ${this.size === "m" ? "label-m" : ""} ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: 'e4d1282ed7a91a4edcefcdccbe8fb38541bee326' }))), h("input", { key: '175a2b7fefb474c58d6c1ee36ce65136458ebb01', type: "radio", hidden: true, ref: el => this.inputElement = el, name: this.name, value: this.value, checked: this.internalChecked, disabled: this.disabled, onClick: (e) => e.stopPropagation() })));
     }
     static get is() { return "ifx-radio-button"; }
     static get encapsulation() { return "shadow"; }
-    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["radio-button.scss"]

package/dist/collection/components/radio-button/radio-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, State, Event, EventEmitter, Listen, Watch, 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-radio-button',\n  styleUrl: 'radio-button.scss',\n  shadow: true,\n  formAssociated: true\n})\nexport class RadioButton {\n  @Element() el: HTMLElement;\n  @Prop() disabled: boolean = false;\n  @Prop() value: string;\n  @Prop() error: boolean = false;\n  @Prop({ reflect: true }) size: \"s\" | \"m\" = \"s\";\n  @Prop({ reflect: true }) name: string;\n  @Prop({ mutable: true }) checked: boolean;\n  @State() internalChecked: boolean = false;\n  @State() hasSlot: boolean = false;\n\n  @Method()\n  async isChecked(): Promise<boolean> {\n    return this.internalChecked;\n  }\n  \n  private inputElement: HTMLInputElement;\n  private internals: ElementInternals;\n  private fallbackInput: HTMLInputElement;\n\n  @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;\n  @Event({ eventName: 'ifxError' }) ifxError: EventEmitter;\n\n  componentWillLoad() {\n    // Fallback for form association\n    this.fallbackInput = document.createElement('input');\n    this.fallbackInput.type = 'radio';\n    this.fallbackInput.hidden = true;\n    this.fallbackInput.className = '_ifx-radiobutton-fallback';\n    this.fallbackInput.style.cssText = `\n      display: none !important;\n      position: absolute !important;\n      opacity: 0 !important;\n      pointer-events: none !important;\n      width: 0 !important;\n      height: 0 !important;\n    `;\n    this.fallbackInput.setAttribute('aria-hidden', 'true');\n    this.fallbackInput.tabIndex = -1;\n    this.el.appendChild(this.fallbackInput);\n\n    // Initialize ElementInternals if supported\n    if ('attachInternals' in HTMLElement.prototype) {\n      try {\n        this.internals = this.el.attachInternals();\n      } catch (e) {\n        console.warn('ElementInternals not supported');\n      }\n    }\n\n    // Initial state\n    this.internalChecked = this.checked || false;\n    this.hasSlot = !!this.el.querySelector('[slot]') || this.el.innerHTML.trim() !== '';\n  }\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-radio-button', await framework)\n    }\n  }\n\n  @Watch('checked')\n  handleCheckedChange(newValue: boolean) {\n    this.internalChecked = newValue;\n  }\n\n  @Watch('internalChecked')\n  updateFormValue() {\n    // Update both ElementInternals and fallback input\n    if (this.internals?.setFormValue) {\n      this.internals.setFormValue(this.internalChecked ? this.value : null);\n    }\n    this.fallbackInput.checked = this.internalChecked;\n    this.fallbackInput.name = this.name;\n    this.fallbackInput.value = this.value;\n    this.fallbackInput.disabled = this.disabled;\n  }\n\n  @Watch('error')\n    errorChanged(newValue: boolean, oldValue: boolean) {\n      if (newValue !== oldValue) {\n        this.ifxError.emit(newValue);\n      }\n    }\n\n  handleRadioButtonClick(event: Event) {\n    if (this.disabled) {\n      event.stopPropagation();\n      return;\n    }\n\n    this.inputElement.click();\n    this.internalChecked = this.inputElement.checked;\n    this.checked = this.internalChecked;\n    this.ifxChange.emit(this.internalChecked);\n\n    const changeEvent = new CustomEvent('change', {\n      bubbles: true,\n      composed: true,\n      detail: { checked: this.internalChecked }\n    });\n    this.el.dispatchEvent(changeEvent);\n  }\n\n  @Listen('keydown')\n  handleKeyDown(ev: KeyboardEvent) {\n    if ([' ', 'Enter'].includes(ev.key)) {\n      ev.preventDefault();\n      this.handleRadioButtonClick(new PointerEvent('click'));\n    }\n  }\n\n  @Listen('change', { target: 'document' })\n  handleExternalChange(event: Event) {\n    const target = event.target as HTMLElement;\n    if (target === this.el || target.tagName.toLowerCase() !== 'ifx-radio-button') return;\n    \n    if (target.getAttribute('name') === this.name) {\n      this.internalChecked = false;\n    }\n  }\n\n  render() {\n    return (\n      <div\n        role=\"radio\"\n        aria-checked={String(this.internalChecked)}\n        aria-disabled={String(this.disabled)}\n        class={`radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`}\n        onClick={(e) => this.handleRadioButtonClick(e)}\n        tabindex={this.disabled ? -1 : 0}\n      >\n        <div\n          class={`radioButton__wrapper \n            ${this.internalChecked ? 'checked' : ''} \n            ${this.disabled ? 'disabled' : ''} \n            ${this.error ? 'error' : ''}`}\n        >\n          {this.internalChecked && <div class=\"radioButton__wrapper-mark\"></div>}\n        </div>\n\n        {this.hasSlot && (\n          <div class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : ''}`}>\n            <slot />\n          </div>\n        )}\n\n        <input\n          type=\"radio\"\n          hidden\n          ref={el => this.inputElement = el}\n          name={this.name}\n          value={this.value}\n          checked={this.internalChecked}\n          disabled={this.disabled}\n          onClick={(e) => e.stopPropagation()}\n        />\n      </div>\n    );\n  }\n}"]}
+{"version":3,"file":"radio-button.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, State, Event, EventEmitter, Listen, Watch, 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-radio-button',\n  styleUrl: 'radio-button.scss',\n  shadow: true,\n  // formAssociated: true\n})\nexport class RadioButton {\n  @Element() el: HTMLElement;\n  @Prop() disabled: boolean = false;\n  @Prop() value: string;\n  @Prop() error: boolean = false;\n  @Prop({ reflect: true }) size: \"s\" | \"m\" = \"s\";\n  @Prop({ reflect: true }) name: string;\n  @Prop({ mutable: true }) checked: boolean;\n  @State() internalChecked: boolean = false;\n  @State() hasSlot: boolean = false;\n\n  @Method()\n  async isChecked(): Promise<boolean> {\n    return this.internalChecked;\n  }\n  \n  private inputElement: HTMLInputElement;\n  private internals: ElementInternals;\n  private fallbackInput: HTMLInputElement;\n\n  @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;\n  @Event({ eventName: 'ifxError' }) ifxError: EventEmitter;\n\n  componentWillLoad() {\n    // Fallback for form association\n    this.fallbackInput = document.createElement('input');\n    this.fallbackInput.type = 'radio';\n    this.fallbackInput.hidden = true;\n    this.fallbackInput.className = '_ifx-radiobutton-fallback';\n    this.fallbackInput.style.cssText = `\n      display: none !important;\n      position: absolute !important;\n      opacity: 0 !important;\n      pointer-events: none !important;\n      width: 0 !important;\n      height: 0 !important;\n    `;\n    this.fallbackInput.setAttribute('aria-hidden', 'true');\n    this.fallbackInput.tabIndex = -1;\n    this.el.appendChild(this.fallbackInput);\n\n    // Initialize ElementInternals if supported\n    if ('attachInternals' in HTMLElement.prototype) {\n      try {\n        this.internals = this.el.attachInternals();\n      } catch (e) {\n        console.warn('ElementInternals not supported');\n      }\n    }\n\n    // Initial state\n    this.internalChecked = this.checked || false;\n    this.hasSlot = !!this.el.querySelector('[slot]') || this.el.innerHTML.trim() !== '';\n  }\n\n  async componentDidLoad() { \n    if(!isNestedInIfxComponent(this.el)) { \n      const framework = detectFramework();\n      trackComponent('ifx-radio-button', await framework)\n    }\n  }\n\n  @Watch('checked')\n  handleCheckedChange(newValue: boolean) {\n    this.internalChecked = newValue;\n  }\n\n  @Watch('internalChecked')\n  updateFormValue() {\n    // Update both ElementInternals and fallback input\n    if (this.internals?.setFormValue) {\n      this.internals.setFormValue(this.internalChecked ? this.value : null);\n    }\n    this.fallbackInput.checked = this.internalChecked;\n    this.fallbackInput.name = this.name;\n    this.fallbackInput.value = this.value;\n    this.fallbackInput.disabled = this.disabled;\n  }\n\n  @Watch('error')\n    errorChanged(newValue: boolean, oldValue: boolean) {\n      if (newValue !== oldValue) {\n        this.ifxError.emit(newValue);\n      }\n    }\n\n  handleRadioButtonClick(event: Event) {\n    if (this.disabled) {\n      event.stopPropagation();\n      return;\n    }\n\n    this.inputElement.click();\n    this.internalChecked = this.inputElement.checked;\n    this.checked = this.internalChecked;\n    this.ifxChange.emit(this.internalChecked);\n\n    const changeEvent = new CustomEvent('change', {\n      bubbles: true,\n      composed: true,\n      detail: { checked: this.internalChecked }\n    });\n    this.el.dispatchEvent(changeEvent);\n  }\n\n  @Listen('keydown')\n  handleKeyDown(ev: KeyboardEvent) {\n    if ([' ', 'Enter'].includes(ev.key)) {\n      ev.preventDefault();\n      this.handleRadioButtonClick(new PointerEvent('click'));\n    }\n  }\n\n  @Listen('change', { target: 'document' })\n  handleExternalChange(event: Event) {\n    const target = event.target as HTMLElement;\n    if (target === this.el || target.tagName.toLowerCase() !== 'ifx-radio-button') return;\n    \n    if (target.getAttribute('name') === this.name) {\n      this.internalChecked = false;\n    }\n  }\n\n  render() {\n    return (\n      <div\n        role=\"radio\"\n        aria-checked={String(this.internalChecked)}\n        aria-disabled={String(this.disabled)}\n        class={`radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`}\n        onClick={(e) => this.handleRadioButtonClick(e)}\n        tabindex={this.disabled ? -1 : 0}\n      >\n        <div\n          class={`radioButton__wrapper \n            ${this.internalChecked ? 'checked' : ''} \n            ${this.disabled ? 'disabled' : ''} \n            ${this.error ? 'error' : ''}`}\n        >\n          {this.internalChecked && <div class=\"radioButton__wrapper-mark\"></div>}\n        </div>\n\n        {this.hasSlot && (\n          <div class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : ''}`}>\n            <slot />\n          </div>\n        )}\n\n        <input\n          type=\"radio\"\n          hidden\n          ref={el => this.inputElement = el}\n          name={this.name}\n          value={this.value}\n          checked={this.internalChecked}\n          disabled={this.disabled}\n          onClick={(e) => e.stopPropagation()}\n        />\n      </div>\n    );\n  }\n}"]}

package/dist/collection/components/radio-button-group/radio-button-group.css

@@ -22,24 +22,13 @@
 }
 
 .group-label {
-  font-size: 1rem;
-  line-height: 1.5rem;
-  font-weight: 400;
+  font: 400 0.75rem/1rem "Source Sans 3";
   margin-bottom: 8px;
   text-align: left;
   text-underline-position: from-font;
   text-decoration-skip-ink: none;
 }
 
-.group-label .required {
-  color: #575352;
-  margin-left: 4px;
-}
-
-.group-label .required.error {
-  color: #CD002F;
-}
-
 .caption {
   margin-top: 8px;
   align-self: flex-start;
@@ -57,8 +46,7 @@
 }
 
 .caption-text {
-  font-size: 0.75rem;
-  line-height: 1rem;
+  font: 400 0.75rem/1rem "Source Sans 3";
   flex: 1;
   text-align: left;
   text-underline-position: from-font;

package/dist/collection/components/radio-button-group/radio-button-group.js

@@ -7,7 +7,6 @@ export class RadioButtonGroup {
         this.errorStates = new Map();
         this.alignment = 'vertical';
         this.groupLabelText = 'Group Label Text';
-        this.required = false;
         this.hasErrors = false;
         this.handleSlotChange = () => {
             this.initializeState();
@@ -50,11 +49,10 @@ export class RadioButtonGroup {
         this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);
     }
     render() {
-        return (h("div", { key: 'ca42b9470187fb67619fad0e62c0c7aec3f5fb62', class: 'radio-button-group-container' }, this.showGroupLabel && (h("div", { key: 'b89340bfcabb087301338bdedf04215d87a3e661', class: "group-label" }, this.groupLabelText, this.required && h("span", { key: '6b851812a7f1cdbe3b0a8450bd8cb1569f3f893a', class: `required ${this.hasErrors ? 'error' : ''}` }, "*"))), h("div", { key: 'd46fc6be13198ccb04b50fa499c8d4680ae064b3', class: `radio-button-group ${this.alignment} ${this.size}` }, h("slot", { key: '89f23313cb670cb1d18060cb38f7ece2d5401d7d', onSlotchange: this.handleSlotChange })), this.showCaption ? (h("div", { class: `caption ${this.hasErrors ? 'error' : 'default'}` }, this.showCaptionIcon ? h("div", { class: 'caption-icon' }, h("ifx-icon", { icon: "c-info-16" })) : '', h("div", { class: 'caption-text' }, this.captionText))) : ''));
+        return (h("div", { key: '954a7ba0058a82a507cccb564935b43737990a73', class: 'radio-button-group-container' }, this.showGroupLabel ? h("div", { class: 'group-label' }, this.groupLabelText, " *") : '', h("div", { key: '7874bd7b2b6d34a1431a93f469f18e9c3e4d0445', class: `radio-button-group ${this.alignment} ${this.size}` }, h("slot", { key: 'f1f3075d2196c831ecd2bbccd5d61581c51e0eee', onSlotchange: this.handleSlotChange })), this.showCaption ? (h("div", { class: `caption ${this.hasErrors ? 'error' : 'default'}` }, this.showCaptionIcon ? h("div", { class: 'caption-icon' }, h("ifx-icon", { icon: "c-info-16" })) : '', h("div", { class: 'caption-text' }, this.captionText))) : ''));
     }
     static get is() { return "ifx-radio-button-group"; }
     static get encapsulation() { return "shadow"; }
-    static get formAssociated() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["radio-button-group.scss"]
@@ -201,26 +199,6 @@ export class RadioButtonGroup {
                 "getter": false,
                 "setter": false,
                 "reflect": false
-            },
-            "required": {
-                "type": "boolean",
-                "attribute": "required",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/radio-button-group/radio-button-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button-group.js","sourceRoot":"","sources":["../../../src/components/radio-button-group/radio-button-group.tsx"],"names":[],"mappings":"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","sourcesContent":["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-radio-button-group',\n    styleUrl: 'radio-button-group.scss',\n    shadow: true,\n    formAssociated: true\n})\n\nexport class RadioButtonGroup {\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    @Prop() required: boolean = false;\n    @State() hasErrors: boolean = false;\n    \n    @Listen('ifxError')\n    handleRadioButtonError(event: CustomEvent) {\n        const radioButton = event.target as HTMLElement;\n        if (radioButton.tagName === 'ifx-radio-button') {\n            this.errorStates.set(radioButton, event.detail);\n            this.updateHasErrors();\n        }\n    }\n\n     // Method to set the error state of all radio-butttons in the group\n      @Method()\n      async setGroupError(error: boolean) {\n        const radioButtons = Array.from(this.el.querySelectorAll('ifx-radio-button'));\n        radioButtons.forEach((radioButton) => {\n          (radioButton as any).error = error;\n        });\n      }\n\n    componentWillLoad() {\n        this.initializeState();\n    }\n\n    async componentDidLoad() { \n        if(!isNestedInIfxComponent(this.el)) { \n            const framework = detectFramework();\n            trackComponent('ifx-radio-button-group', await framework)\n        }\n    }\n\n    handleSlotChange = () => {\n        this.initializeState();\n    };\n\n    private initializeState() {\n        this.errorStates.clear();\n        const radioButtons = Array.from(this.el.querySelectorAll('ifx-radio-button'));\n        radioButtons.forEach((radioButton) => {\n            if (!this.errorStates.has(radioButton)) {\n                this.errorStates.set(radioButton, (radioButton 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='radio-button-group-container'>\n                {this.showGroupLabel && (\n                    <div class=\"group-label\">\n                        {this.groupLabelText}\n                        {this.required && <span class={`required ${this.hasErrors ? 'error' : ''}`}>*</span>}\n                    </div>\n                )}\n                <div class={`radio-button-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}"]}
+{"version":3,"file":"radio-button-group.js","sourceRoot":"","sources":["../../../src/components/radio-button-group/radio-button-group.tsx"],"names":[],"mappings":"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","sourcesContent":["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-radio-button-group',\n    styleUrl: 'radio-button-group.scss',\n    shadow: true,\n    // formAssociated: true\n})\n\nexport class RadioButtonGroup {\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    handleRadioButtonError(event: CustomEvent) {\n        const radioButton = event.target as HTMLElement;\n        if (radioButton.tagName === 'ifx-radio-button') {\n            this.errorStates.set(radioButton, event.detail);\n            this.updateHasErrors();\n        }\n    }\n\n     // Method to set the error state of all radio-butttons in the group\n      @Method()\n      async setGroupError(error: boolean) {\n        const radioButtons = Array.from(this.el.querySelectorAll('ifx-radio-button'));\n        radioButtons.forEach((radioButton) => {\n          (radioButton as any).error = error;\n        });\n      }\n\n    componentWillLoad() {\n        this.initializeState();\n    }\n\n    async componentDidLoad() { \n        if(!isNestedInIfxComponent(this.el)) { \n            const framework = detectFramework();\n            trackComponent('ifx-radio-button-group', await framework)\n        }\n    }\n\n    handleSlotChange = () => {\n        this.initializeState();\n    };\n\n    private initializeState() {\n        this.errorStates.clear();\n        const radioButtons = Array.from(this.el.querySelectorAll('ifx-radio-button'));\n        radioButtons.forEach((radioButton) => {\n            if (!this.errorStates.has(radioButton)) {\n                this.errorStates.set(radioButton, (radioButton 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='radio-button-group-container'>\n                {this.showGroupLabel ? <div class='group-label'>{this.groupLabelText} *</div> : ''}\n                <div class={`radio-button-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}"]}

package/dist/collection/components/radio-button-group/radio-button-group.stories.js

@@ -13,7 +13,6 @@ export default {
         showCaption: false,
         captionText: 'Caption text, description, error notification',
         showCaptionIcon: false,
-        required: false,
     },
     argTypes: {
         amountOfItems: {
@@ -111,14 +110,6 @@ export default {
                 defaultValue: { summary: 'false' }
             }
         },
-        required: {
-            description: 'Marks the radio-button-group as required.',
-            control: { type: 'boolean' },
-            table: {
-                category: 'ifx-radio-button-group props',
-                defaultValue: { summary: 'false' }
-            }
-        },
         setGroupError: {
             action: 'setGroupError',
             description: 'Method to set the error state of all checkboxes in the group.',
@@ -143,7 +134,7 @@ const Template = args => {
         }
     }
     const template = `
-        <ifx-radio-button-group alignment="${args.alignment}" show-group-label="${args.showGroupLabel}" group-label-text="${args.groupLabelText}" show-caption="${args.showCaption}" caption-text="${args.captionText}" show-caption-icon="${args.showCaptionIcon}" required="${args.required}">
+        <ifx-radio-button-group alignment="${args.alignment}" show-group-label="${args.showGroupLabel}" group-label-text="${args.groupLabelText}" show-caption="${args.showCaption}" caption-text="${args.captionText}" show-caption-icon="${args.showCaptionIcon}">
             ${radioButtons}
         </ifx-radio-button-group>`;
     return template;

package/dist/collection/components/radio-button-group/radio-button-group.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button-group.stories.js","sourceRoot":"","sources":["../../../src/components/radio-button-group/radio-button-group.stories.ts"],"names":[],"mappings":"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","sourcesContent":["export default {\n    title: 'Components/Radio Button Group',\n    tags: ['autodocs'],\n    args: {\n        amountOfItems: 3,\n        alignment: 'vertical',\n        size: 'm',\n        checked: false,\n        disabled: false,\n        error: false,\n        showGroupLabel: false,\n        groupLabelText: 'Group Label',\n        showCaption: false,\n        captionText: 'Caption text, description, error notification',\n        showCaptionIcon: false,\n        required: false,\n    },\n    argTypes: {\n        amountOfItems: {\n            categpry: 'story controls',\n            name: 'Amount of Items',\n            description: 'Set the amount of radio buttons.',\n            control: { type: 'number' },\n            table: {\n                category: 'story controls',\n                defaultValue: { summary: 3 }\n            }\n        },\n        alignment: {\n            description: 'Set the orientation of the radio button group.',\n            options: ['vertical', 'horizontal'],\n            control: { type: 'radio' },\n            table: {\n                category: 'ifx-radio-button-group props',\n                defaultValue: { summary: 'vertical' }\n            }\n        },\n        size: {\n            description: 'Size options for the radio button.',\n            options: ['s', 'm'],\n            control: { type: 'radio' },\n            table: {\n                category: 'ifx-radio-button props',\n                defaultValue: { summary: 's' },\n                type: {\n                    summary: 's | m'\n                }\n            }\n        },\n        checked: {\n            description: 'Set the checked state.',\n            control: { type: 'boolean' },\n            table: {\n                category: 'ifx-radio-button props',\n                defaultValue: { summary: 'false' }\n            }\n        },\n        disabled: {\n            description: 'Disable the radio button.',\n            control: { type: 'boolean' },\n            table: {\n                category: 'ifx-radio-button props',\n                defaultValue: { summary: 'false' }\n            }\n        },\n        error: {\n            description: 'Set the error state.',\n            control: { type: 'boolean' },\n            table: {\n                category: 'ifx-radio-button props',\n                defaultValue: { summary: 'false' }\n            }\n        },\n        showGroupLabel: {\n            description: 'Show the group label.',\n            control: { type: 'boolean' },\n            table: {\n                category: 'ifx-radio-button-group props',\n                defaultValue: { summary: 'false' }\n            }\n        },\n        groupLabelText: {\n            description: 'Set the group label text.',\n            control: { type: 'text' },\n            table: {\n                category: 'ifx-radio-button-group props',\n                defaultValue: { summary: '' }\n            }\n        },\n        showCaption: {\n            description: 'Show the caption.',\n            control: { type: 'boolean' },\n            table: {\n                category: 'ifx-radio-button-group props',\n                defaultValue: { summary: 'false' }\n            }\n        },\n        captionText: {\n            description: 'Set the caption text.',\n            control: { type: 'text' },\n            table: {\n                category: 'ifx-radio-button-group props',\n                defaultValue: { summary: '' }\n            }\n        },\n        showCaptionIcon: {\n            description: 'Show the caption icon.',\n            control: { type: 'boolean' },\n            table: {\n                category: 'ifx-radio-button-group props',\n                defaultValue: { summary: 'false' }\n            }\n        },\n        required: {\n            description: 'Marks the radio-button-group as required.',\n            control: { type: 'boolean' },\n            table: {\n                category: 'ifx-radio-button-group props',\n                defaultValue: { summary: 'false' }\n            }\n        },\n        setGroupError: {\n            action: 'setGroupError',\n            description: 'Method to set the error state of all checkboxes in the group.',\n            table: {\n                category: 'ifx-radio-buttton-group methods',\n                type: {\n                    summary: 'error : boolean',\n                    detail: 'RadioButttonGroup.setGroupError(error)'\n                }\n            }\n        }\n    },\n};\n\nconst Template = args => {\n    let radioButtons = '';\n    for (let i = 0; i < args.amountOfItems; i++) {\n        if (i === 0) {\n            radioButtons += `<ifx-radio-button value=\"${i}\" disabled=\"${args.disabled}\" checked=\"${args.checked}\" error=\"${args.error}\" size=\"${args.size}\">Option ${i}</ifx-radio-button>`;\n        }\n        else {\n            radioButtons += `<ifx-radio-button value=\"${i}\" size=\"${args.size}\">Option ${i}</ifx-radio-button>`;\n        }\n    }\n    const template = `\n        <ifx-radio-button-group alignment=\"${args.alignment}\" show-group-label=\"${args.showGroupLabel}\" group-label-text=\"${args.groupLabelText}\" show-caption=\"${args.showCaption}\" caption-text=\"${args.captionText}\" show-caption-icon=\"${args.showCaptionIcon}\" required=\"${args.required}\">\n            ${radioButtons}\n        </ifx-radio-button-group>`;\n\n    return template;\n}\n\nexport const Default = Template.bind({});"]}
+{"version":3,"file":"radio-button-group.stories.js","sourceRoot":"","sources":["../../../src/components/radio-button-group/radio-button-group.stories.ts"],"names":[],"mappings":"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","sourcesContent":["export default {\n    title: 'Components/Radio Button Group',\n    tags: ['autodocs'],\n    args: {\n        amountOfItems: 3,\n        alignment: 'vertical',\n        size: 'm',\n        checked: false,\n        disabled: false,\n        error: false,\n        showGroupLabel: false,\n        groupLabelText: 'Group Label',\n        showCaption: false,\n        captionText: 'Caption text, description, error notification',\n        showCaptionIcon: false,\n    },\n    argTypes: {\n        amountOfItems: {\n            categpry: 'story controls',\n            name: 'Amount of Items',\n            description: 'Set the amount of radio buttons.',\n            control: { type: 'number' },\n            table: {\n                category: 'story controls',\n                defaultValue: { summary: 3 }\n            }\n        },\n        alignment: {\n            description: 'Set the orientation of the radio button group.',\n            options: ['vertical', 'horizontal'],\n            control: { type: 'radio' },\n            table: {\n                category: 'ifx-radio-button-group props',\n                defaultValue: { summary: 'vertical' }\n            }\n        },\n        size: {\n            description: 'Size options for the radio button.',\n            options: ['s', 'm'],\n            control: { type: 'radio' },\n            table: {\n                category: 'ifx-radio-button props',\n                defaultValue: { summary: 's' },\n                type: {\n                    summary: 's | m'\n                }\n            }\n        },\n        checked: {\n            description: 'Set the checked state.',\n            control: { type: 'boolean' },\n            table: {\n                category: 'ifx-radio-button props',\n                defaultValue: { summary: 'false' }\n            }\n        },\n        disabled: {\n            description: 'Disable the radio button.',\n            control: { type: 'boolean' },\n            table: {\n                category: 'ifx-radio-button props',\n                defaultValue: { summary: 'false' }\n            }\n        },\n        error: {\n            description: 'Set the error state.',\n            control: { type: 'boolean' },\n            table: {\n                category: 'ifx-radio-button props',\n                defaultValue: { summary: 'false' }\n            }\n        },\n        showGroupLabel: {\n            description: 'Show the group label.',\n            control: { type: 'boolean' },\n            table: {\n                category: 'ifx-radio-button-group props',\n                defaultValue: { summary: 'false' }\n            }\n        },\n        groupLabelText: {\n            description: 'Set the group label text.',\n            control: { type: 'text' },\n            table: {\n                category: 'ifx-radio-button-group props',\n                defaultValue: { summary: '' }\n            }\n        },\n        showCaption: {\n            description: 'Show the caption.',\n            control: { type: 'boolean' },\n            table: {\n                category: 'ifx-radio-button-group props',\n                defaultValue: { summary: 'false' }\n            }\n        },\n        captionText: {\n            description: 'Set the caption text.',\n            control: { type: 'text' },\n            table: {\n                category: 'ifx-radio-button-group props',\n                defaultValue: { summary: '' }\n            }\n        },\n        showCaptionIcon: {\n            description: 'Show the caption icon.',\n            control: { type: 'boolean' },\n            table: {\n                category: 'ifx-radio-button-group props',\n                defaultValue: { summary: 'false' }\n            }\n        },\n        setGroupError: {\n            action: 'setGroupError',\n            description: 'Method to set the error state of all checkboxes in the group.',\n            table: {\n                category: 'ifx-radio-buttton-group methods',\n                type: {\n                    summary: 'error : boolean',\n                    detail: 'RadioButttonGroup.setGroupError(error)'\n                }\n            }\n        }\n    },\n};\n\nconst Template = args => {\n    let radioButtons = '';\n    for (let i = 0; i < args.amountOfItems; i++) {\n        if (i === 0) {\n            radioButtons += `<ifx-radio-button value=\"${i}\" disabled=\"${args.disabled}\" checked=\"${args.checked}\" error=\"${args.error}\" size=\"${args.size}\">Option ${i}</ifx-radio-button>`;\n        }\n        else {\n            radioButtons += `<ifx-radio-button value=\"${i}\" size=\"${args.size}\">Option ${i}</ifx-radio-button>`;\n        }\n    }\n    const template = `\n        <ifx-radio-button-group alignment=\"${args.alignment}\" show-group-label=\"${args.showGroupLabel}\" group-label-text=\"${args.groupLabelText}\" show-caption=\"${args.showCaption}\" caption-text=\"${args.captionText}\" show-caption-icon=\"${args.showCaptionIcon}\">\n            ${radioButtons}\n        </ifx-radio-button-group>`;\n\n    return template;\n}\n\nexport const Default = Template.bind({});"]}

package/dist/collection/components/search-bar/search-bar.js

@@ -39,7 +39,7 @@ export class SearchBar {
         this.value = event.detail;
     }
     render() {
-        return (h("div", { key: '7d45f985d7fd0b65e714f7cb129aa85dc1cc5a8b', role: "search", "aria-label": "a search field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? 'open' : 'closed'}` }, this.internalState ? (h("div", { class: "search-bar-wrapper" }, h("ifx-search-field", { autocomplete: this.autocomplete, disabled: this.disabled, value: this.value, maxlength: this.maxlength, onIfxInput: this.handleInput.bind(this) }, h("ifx-icon", { icon: "search-16", slot: "search-icon" })), h("a", { "aria-label": "Close button", href: 'javascript:void(0)', onClick: this.handleCloseButton }, "Close"))) : (h("div", { class: "search-bar_icon-wrapper", onClick: this.handleCloseButton }, h("ifx-icon", { icon: "search-16" })))));
+        return (h("div", { key: '09974ec9adab8f6dfa54364c8ba4665574cdebe9', role: "search", "aria-label": "a search field for user input", "aria-value": this.value, "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? 'open' : 'closed'}` }, this.internalState ? (h("div", { class: "search-bar-wrapper" }, h("ifx-search-field", { autocomplete: this.autocomplete, disabled: this.disabled, value: this.value, maxlength: this.maxlength, onIfxInput: this.handleInput.bind(this) }, h("ifx-icon", { icon: "search-16", slot: "search-icon" })), h("a", { "aria-label": "Close button", href: 'javascript:void(0)', onClick: this.handleCloseButton }, "Close"))) : (h("div", { class: "search-bar_icon-wrapper", onClick: this.handleCloseButton }, h("ifx-icon", { icon: "search-16" })))));
     }
     static get is() { return "ifx-search-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/search-field/search-field.js

@@ -366,12 +366,12 @@ export class SearchField {
             this.showDeleteIconInternalState = false;
     }
     render() {
-        return (h("div", { key: '63db140a599cfc988bcf0ea60a362bc84dbf830d', "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, h("div", { key: 'a5e8dda10cf69739331c68da2f3caf42006ab0d9', class: this.getWrapperClassNames(), tabindex: 1, onClick: () => this.focusInput() }, h("ifx-icon", { key: 'fcb9692cc68524a3efcd6ec177f504a653c872d0', icon: "search-16", class: "search-icon" }), h("input", { key: '0ca39241326c6af91fd2f8d193f4f6e8aab49b07', ref: (el) => (this.inputElement = el), type: "text", autocomplete: this.autocomplete, onInput: () => this.handleInput(), onFocus: () => this.focusInput(), onBlur: () => this.blurInput(), placeholder: this.placeholder, disabled: this.disabled, maxlength: this.maxlength, value: this.value, role: "combobox", "aria-expanded": this.showDropdown, "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledBy, "aria-describedby": this.ariaDescribedBy, "aria-owns": this.showDropdown ? 'suggestions-dropdown' : undefined, "aria-activedescendant": this.selectedSuggestionIndex >= 0 ? `suggestion-${this.selectedSuggestionIndex}` : undefined }), this.showDeleteIcon && this.showDeleteIconInternalState ? (h("ifx-icon", { icon: "cRemove16", class: "delete-icon", onClick: this.handleDelete, role: "button", tabindex: "0", "aria-label": this.deleteIconAriaLabel, onKeyDown: (event) => {
+        return (h("div", { key: '1464337ac84aa2707e9c17d6d21af2087253c233', "aria-disabled": this.disabled, "aria-value": this.value, class: 'search-field' }, h("div", { key: 'd7bace664f3b66a42feff790959c83d3cd86fbe0', class: this.getWrapperClassNames(), tabindex: 1, onClick: () => this.focusInput() }, h("ifx-icon", { key: 'deb5c77cf9ebde1146afdffc5279b260da4f757a', icon: "search-16", class: "search-icon" }), h("input", { key: 'cc247404c0d78ca0e8d163e9a1b315abd279f093', ref: (el) => (this.inputElement = el), type: "text", autocomplete: this.autocomplete, onInput: () => this.handleInput(), onFocus: () => this.focusInput(), onBlur: () => this.blurInput(), placeholder: this.placeholder, disabled: this.disabled, maxlength: this.maxlength, value: this.value, role: "combobox", "aria-expanded": this.showDropdown, "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledBy, "aria-describedby": this.ariaDescribedBy, "aria-owns": this.showDropdown ? 'suggestions-dropdown' : undefined, "aria-activedescendant": this.selectedSuggestionIndex >= 0 ? `suggestion-${this.selectedSuggestionIndex}` : undefined }), this.showDeleteIcon && this.showDeleteIconInternalState ? (h("ifx-icon", { icon: "cRemove16", class: "delete-icon", onClick: this.handleDelete, role: "button", tabindex: "0", "aria-label": this.deleteIconAriaLabel, onKeyDown: (event) => {
                 if (event.key === 'Enter' || event.key === ' ') {
                     event.preventDefault();
                     this.handleDelete();
                 }
-            } })) : null), this.showDropdown && this.filteredSuggestions.length > 0 && (h("div", { key: 'e02b8183ecc5a2a146d8a9c9f19e8b0c74a8c48a', ref: (el) => (this.dropdownElement = el), id: "suggestions-dropdown", class: "suggestions-dropdown", role: "listbox", "aria-label": this.dropdownAriaLabel }, this.isShowingOnlyHistory() && (h("div", { key: '0d77206d8a2e599a389d3df1a66151102390d9fe', class: "suggestions-header" }, this.historyHeaderText)), this.filteredSuggestions.map((suggestion, index) => (h("div", { key: suggestion.id, id: `suggestion-${index}`, class: this.getSuggestionClassNames(index), role: "option", "aria-selected": index === this.selectedSuggestionIndex, "aria-label": `${suggestion.type === 'history' ? this.historyItemAriaLabel : this.suggestionAriaLabel}: ${suggestion.text}${suggestion.scope ? `, ${suggestion.scope}` : ''}${suggestion.resultCount ? `, ${suggestion.resultCount} results` : ''}`, onClick: () => this.selectSuggestion(suggestion), onMouseEnter: () => this.selectedSuggestionIndex = index }, h("div", { class: "suggestion-content" }, suggestion.type === 'history' && (h("ifx-icon", { icon: "history-16", class: "suggestion-icon suggestion-icon--history" })), suggestion.type === 'suggestion' && (h("ifx-icon", { icon: "search-16", class: "suggestion-icon suggestion-icon--suggestion" })), h("span", { class: "suggestion-text" }, h("span", { class: "suggestion-main-text" }, this.renderHighlightedText(suggestion.text, this.value)), suggestion.scope && (h("span", { class: "suggestion-scope" }, "\u2013 ", suggestion.scope))), suggestion.resultCount !== undefined && suggestion.scope && (h("span", { class: "suggestion-count" }, suggestion.resultCount)), suggestion.type === 'history' && (h("ifx-icon", { icon: "cross16", class: "suggestion-delete-icon", role: "button", tabindex: "0", "aria-label": `${this.historyDeleteAriaLabel}: ${suggestion.text}`, onClick: (event) => this.handleHistoryDelete(event, suggestion.text), onKeyDown: (event) => {
+            } })) : null), this.showDropdown && this.filteredSuggestions.length > 0 && (h("div", { key: '641b84e82bd07d44f6a657ac4e3af27af33f868a', ref: (el) => (this.dropdownElement = el), id: "suggestions-dropdown", class: "suggestions-dropdown", role: "listbox", "aria-label": this.dropdownAriaLabel }, this.isShowingOnlyHistory() && (h("div", { key: '66dbc2db67478154a79cc6a10796086e0ce819c3', class: "suggestions-header" }, this.historyHeaderText)), this.filteredSuggestions.map((suggestion, index) => (h("div", { key: suggestion.id, id: `suggestion-${index}`, class: this.getSuggestionClassNames(index), role: "option", "aria-selected": index === this.selectedSuggestionIndex, "aria-label": `${suggestion.type === 'history' ? this.historyItemAriaLabel : this.suggestionAriaLabel}: ${suggestion.text}${suggestion.scope ? `, ${suggestion.scope}` : ''}${suggestion.resultCount ? `, ${suggestion.resultCount} results` : ''}`, onClick: () => this.selectSuggestion(suggestion), onMouseEnter: () => this.selectedSuggestionIndex = index }, h("div", { class: "suggestion-content" }, suggestion.type === 'history' && (h("ifx-icon", { icon: "history-16", class: "suggestion-icon suggestion-icon--history" })), suggestion.type === 'suggestion' && (h("ifx-icon", { icon: "search-16", class: "suggestion-icon suggestion-icon--suggestion" })), h("span", { class: "suggestion-text" }, h("span", { class: "suggestion-main-text" }, this.renderHighlightedText(suggestion.text, this.value)), suggestion.scope && (h("span", { class: "suggestion-scope" }, "\u2013 ", suggestion.scope))), suggestion.resultCount !== undefined && suggestion.scope && (h("span", { class: "suggestion-count" }, suggestion.resultCount)), suggestion.type === 'history' && (h("ifx-icon", { icon: "cross16", class: "suggestion-delete-icon", role: "button", tabindex: "0", "aria-label": `${this.historyDeleteAriaLabel}: ${suggestion.text}`, onClick: (event) => this.handleHistoryDelete(event, suggestion.text), onKeyDown: (event) => {
                 if (event.key === 'Enter' || event.key === ' ') {
                     event.preventDefault();
                     this.handleHistoryDelete(event, suggestion.text);

package/dist/collection/components/segmented-control/segment/segment.js

@@ -18,7 +18,7 @@ export class Segment {
         }
     }
     render() {
-        return (h("div", { key: 'a76781c607aad619d279d69346755e5d24e419f2', class: `segment ${this.selected ? 'segment--selected' : ''}`, tabIndex: 0, onClick: () => { this.handleSegmentClick(); }, onKeyDown: (e) => { this.handleSegmentKeyDown(e); } }, h("ifx-icon", { key: '1f0e9e14400d9f78c8c849e9073ae89b191d041e', icon: this.icon }), " ", h("slot", { key: '201ac1267f6a0930cd4baa0721c5010fa82de700' })));
+        return (h("div", { key: 'cd801960a7ce5e8112b0d544a0122ded889cfc1f', class: `segment ${this.selected ? 'segment--selected' : ''}`, tabIndex: 0, onClick: () => { this.handleSegmentClick(); }, onKeyDown: (e) => { this.handleSegmentKeyDown(e); } }, h("ifx-icon", { key: 'c81cddf4a652f00324cbc0b8a31c3598c1b62a08', icon: this.icon }), " ", h("slot", { key: '7b9786b4b20e69eaf30b5a6d140decff95e04423' })));
     }
     static get is() { return "ifx-segment"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/segmented-control/segmented-control.css

@@ -6,23 +6,15 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  gap: 12px;
 }
 
 .group__label {
-  font-size: 1rem;
-  line-height: 1.5rem;
-  font-weight: 400;
+  font: 400 0.75rem/1rem "Source Sans 3";
 }
 .group__label:empty {
   display: none;
 }
-.group__label .required {
-  color: #575352;
-  margin-left: 4px;
-}
-.group__label .required.error {
-  color: #CD002F;
-}
 
 .group__controls {
   display: flex;
@@ -35,14 +27,8 @@
 }
 
 .group__caption {
-  margin-top: 4px;
   display: flex;
   align-items: center;
   gap: 8px;
-  font-weight: 400;
-  font-size: 0.75rem;
-  line-height: 1rem;
-}
-.group__caption.error {
-  color: #CD002F;
+  font: 400 0.75rem/1rem "Source Sans 3";
 }

package/dist/collection/components/segmented-control/segmented-control.js

@@ -7,8 +7,6 @@ export class SegmentedControl {
         this.caption = '';
         this.label = '';
         this.size = 'regular';
-        this.required = false;
-        this.error = false;
         this.selectedValue = '';
     }
     onSegmentSelect(event) {
@@ -67,8 +65,8 @@ export class SegmentedControl {
         this.setActiveSegment();
     }
     render() {
-        return (h("div", { key: '89adf4eb1c9da0bdacac4d7d0a26bf0c4d01666d', "aria-value": this.selectedValue, "aria-label": 'segmented control', class: "group" }, h("div", { key: '5ed77f418047838589851b36d90d1a12eeb9b664', class: 'group__label' }, this.label.trim(), this.required && h("span", { key: '745973fd74bcbdadb4651a8148aa584c45a6999a', class: `required ${this.error ? 'error' : ''}` }, "*")), h("div", { key: '02a611e12d25901cd6657774d3e6dbebaeb2686d', class: 'group__controls' }, h("slot", { key: '601f72992d94bc5cefc1de872edd4ba1567c4564' })), this.caption.trim() &&
-            h("div", { key: 'b6e5ac307a1d908a5054ce225acc9a41db235618', class: `group__caption ${this.error ? 'error' : ''}` }, h("ifx-icon", { key: '3d44e4a1a64e608948d807fe6ec014c4adc45c6a', icon: 'c-info-16' }), " ", this.caption.trim())));
+        return (h("div", { key: '7c7d870d32000a823ae2d365fb8b864d800ec9fe', "aria-value": this.selectedValue, "aria-label": 'segmented control', class: 'group' }, h("div", { key: '66e95707b6616e370e35cd98e4c3b89853b8501f', class: 'group__label' }, this.label.trim()), h("div", { key: 'ab8c969a145fa9e1071ee12426a641034ff8be4d', class: 'group__controls' }, h("slot", { key: '849c4bdf76a0951d829820620813258553b8a6df' })), this.caption.trim() &&
+            h("div", { key: '905c964392ca304634aba610f96c43a4e5b95eb9', class: 'group__caption' }, h("ifx-icon", { key: '42fb13f0a7170a7b36ea2a9c8afb1d3ba9d579c9', icon: 'c-info-16' }), " ", this.caption.trim())));
     }
     componentDidRender() {
         this.setSegmentSize();
@@ -146,46 +144,6 @@ export class SegmentedControl {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "'regular'"
-            },
-            "required": {
-                "type": "boolean",
-                "attribute": "required",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
-            },
-            "error": {
-                "type": "boolean",
-                "attribute": "error",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/segmented-control/segmented-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.js","sourceRoot":"","sources":["../../../src/components/segmented-control/segmented-control.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, Element, Event, EventEmitter, Listen, Prop } 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-segmented-control',\n    styleUrl: 'segmented-control.scss',\n    shadow: true\n})\n\nexport class SegmentedControl {\n    @Element() SegmentedControl: HTMLIfxSegmentedControlElement;\n\n    @Event() ifxChange: EventEmitter<{ previousValue: string, selectedValue: string }>;\n\n    @Prop() caption: string = '';\n    @Prop() label: string = '';\n    @Prop() size: 'regular' | 'small' = 'regular';\n    @Prop() required: boolean = false;\n    @Prop() error: boolean = false;\n\n\n    @Listen('segmentSelect')\n    onSegmentSelect(event: CustomEvent) {\n        const { previousValue, selectedValue } = this.unselectPreviousSegment(event.detail);\n        this.selectedValue = selectedValue;\n        this.ifxChange.emit({ previousValue, selectedValue });\n    }\n\n    private selectedValue: string = '';\n\n    unselectPreviousSegment(newSelectedIndex: number): { previousValue: string, selectedValue: string } {\n        let previousValue: string;\n        let selectedValue: string;\n\n        const segments: NodeList = this.getSegments();\n        segments.forEach((control: HTMLIfxSegmentElement) => {\n            if (control.selected) {\n                if (control.segmentIndex !== newSelectedIndex) {\n                    control.selected = false;\n                    previousValue = control.value;\n                } else {\n                    selectedValue = control.value;\n                }\n            }\n        })\n\n        return { previousValue, selectedValue };\n    }\n\n    getSegments(): NodeList {\n        return this.SegmentedControl.querySelectorAll('ifx-segment');\n    }\n\n    setActiveSegment(): void {\n        const segments: NodeList = this.getSegments();\n        let activeSegmentedControlFound = false;\n        segments.forEach((control: HTMLIfxSegmentElement, idx: number) => {\n            control.segmentIndex = idx;\n            if (activeSegmentedControlFound) {\n                if (control.selected) control.selected = false;\n            } else {\n                if (control.selected) {\n                    activeSegmentedControlFound = true;\n                    this.selectedValue = control.value;\n                }\n            }\n        });\n    }\n\n    setSegmentSize(): void {\n        const segments: NodeList = this.getSegments();\n        segments.forEach((control: HTMLIfxSegmentElement) => {\n            control.shadowRoot.querySelector('.segment').classList.add(`segment--${this.size}`);\n        });\n    }\n\n    async componentDidLoad() {\n        if(!isNestedInIfxComponent(this.SegmentedControl)) { \n            const framework = detectFramework();\n            trackComponent('ifx-segmented-control', await framework)\n        }\n        this.setActiveSegment();\n    }\n\n    render() {\n        return (\n            <div aria-value={this.selectedValue} aria-label='segmented control' class=\"group\">\n                <div class='group__label'>\n                    { this.label.trim() }\n                    { this.required && <span class={`required ${this.error ? 'error' : ''}`}>*</span> }\n                </div>\n                \n                <div class='group__controls'>\n                    <slot />\n                </div>\n                \n                {\n                    this.caption.trim() &&\n                    <div class={`group__caption ${this.error ? 'error' : ''}`}>\n                        <ifx-icon icon='c-info-16'></ifx-icon> { this.caption.trim() }\n                    </div>\n                }\n            </div>\n        );\n    }\n\n    componentDidRender() {\n        this.setSegmentSize();\n    }\n}"]}
+{"version":3,"file":"segmented-control.js","sourceRoot":"","sources":["../../../src/components/segmented-control/segmented-control.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, Element, Event, EventEmitter, Listen, Prop } 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-segmented-control',\n    styleUrl: 'segmented-control.scss',\n    shadow: true\n})\n\nexport class SegmentedControl {\n    @Element() SegmentedControl: HTMLIfxSegmentedControlElement;\n\n    @Event() ifxChange: EventEmitter<{ previousValue: string, selectedValue: string }>;\n\n    @Prop() caption: string = '';\n    @Prop() label: string = '';\n    @Prop() size: 'regular' | 'small' = 'regular';\n\n    @Listen('segmentSelect')\n    onSegmentSelect(event: CustomEvent) {\n        const { previousValue, selectedValue } = this.unselectPreviousSegment(event.detail);\n        this.selectedValue = selectedValue;\n        this.ifxChange.emit({ previousValue, selectedValue });\n    }\n\n    private selectedValue: string = '';\n\n    unselectPreviousSegment(newSelectedIndex: number): { previousValue: string, selectedValue: string } {\n        let previousValue: string;\n        let selectedValue: string;\n\n        const segments: NodeList = this.getSegments();\n        segments.forEach((control: HTMLIfxSegmentElement) => {\n            if (control.selected) {\n                if (control.segmentIndex !== newSelectedIndex) {\n                    control.selected = false;\n                    previousValue = control.value;\n                } else {\n                    selectedValue = control.value;\n                }\n            }\n        })\n\n        return { previousValue, selectedValue };\n    }\n\n    getSegments(): NodeList {\n        return this.SegmentedControl.querySelectorAll('ifx-segment');\n    }\n\n    setActiveSegment(): void {\n        const segments: NodeList = this.getSegments();\n        let activeSegmentedControlFound = false;\n        segments.forEach((control: HTMLIfxSegmentElement, idx: number) => {\n            control.segmentIndex = idx;\n            if (activeSegmentedControlFound) {\n                if (control.selected) control.selected = false;\n            } else {\n                if (control.selected) {\n                    activeSegmentedControlFound = true;\n                    this.selectedValue = control.value;\n                }\n            }\n        });\n    }\n\n    setSegmentSize(): void {\n        const segments: NodeList = this.getSegments();\n        segments.forEach((control: HTMLIfxSegmentElement) => {\n            control.shadowRoot.querySelector('.segment').classList.add(`segment--${this.size}`);\n        });\n    }\n\n    async componentDidLoad() {\n        if(!isNestedInIfxComponent(this.SegmentedControl)) { \n            const framework = detectFramework();\n            trackComponent('ifx-segmented-control', await framework)\n        }\n        this.setActiveSegment();\n    }\n\n    render() {\n        return (\n            <div aria-value={this.selectedValue} aria-label='segmented control' class='group'>\n                <div class='group__label'>\n                    { this.label.trim() }\n                </div>\n                \n                <div class='group__controls'>\n                    <slot />\n                </div>\n                \n                {\n                    this.caption.trim() &&\n                    <div class='group__caption'>\n                        <ifx-icon icon='c-info-16'></ifx-icon> { this.caption.trim() }\n                    </div>\n                }\n            </div>\n        );\n    }\n\n    componentDidRender() {\n        this.setSegmentSize();\n    }\n}"]}

package/dist/collection/components/segmented-control/segmented-control.stories.js

@@ -11,9 +11,7 @@ export default {
         size: 'regular',
         icon: 'star-16',
         selected: 'false',
-        value: 'Value',
-        error: false,
-        required: false,
+        value: 'Value'
     },
     argTypes: {
         amountOfSegments: {
@@ -95,24 +93,6 @@ See the 2nd *<ifx-segment>* for effects`,
                 required: true
             }
         },
-        error: {
-            description: 'Set the component to error state.',
-            table: {
-                category: 'ifx-segmented-control props',
-                defaultValue: {
-                    summary: false,
-                }
-            }
-        },
-        required: {
-            description: 'Marks the component as required by displaying an asterisk next to the label.',
-            table: {
-                category: 'ifx-segmented-control props',
-                defaultValue: {
-                    summary: false,
-                }
-            }
-        },
         ifxChange: {
             description: `Custom event emitted when the segment is changed.`,
             table: {
@@ -135,9 +115,7 @@ const Template = (args) => {
 <ifx-segmented-control
 caption = '${args.caption}'
 label = '${args.label}'
-size = '${args.size}'
-error = '${args.error}'
-required = '${args.required}'>
+size = '${args.size}'>
     ${(() => {
         return Array.from({ length: args.amountOfSegments }, (_, segmentId) => {
             const segment = document.createElement('ifx-segment');

package/dist/collection/components/segmented-control/segmented-control.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-control.stories.js","sourceRoot":"","sources":["../../../src/components/segmented-control/segmented-control.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from \"@storybook/addon-actions\";\nimport { icons } from '@infineon/infineon-icons';\n\nexport default {\n    title: 'Components/Segmented Control',\n    tags: ['autodocs'],\n    args: {\n        amountOfSegments: 5,\n        labelOfSegment: 'Label',\n        caption: 'Caption text to describe the controls',\n        label: 'Group Label',\n        size: 'regular',\n        icon: 'star-16',\n        selected: 'false',\n        value: 'Value',\n        error: false,\n        required: false,\n    },\n    argTypes: {\n        amountOfSegments: {\n            name: 'Amount of Segments',\n            control: { type: 'number', min: 2 },\n            description: 'Control the number of *<ifx-segment>* in component.',\n            table: {\n                category: 'story controls',\n                type: {\n                    summary: null\n                }\n            }\n        },\n        labelOfSegment: {\n            name: 'Label of Segment',\n            description: 'Set the label of *<ifx-segmented-control>*.',\n            table: {\n                category: 'story controls',\n            }\n        },\n        caption: {\n            description: 'Set the caption text of segmented control group.',\n            table: {\n                category: 'ifx-segmented-control props'\n            }\n        },\n        label: {\n            name: 'label',\n            description: 'Set the label of control group.',\n            table: {\n                category: 'ifx-segmented-control props'\n            }\n        },\n        size: {\n            description: 'Switch between the size of Segmented Control.',\n            control: 'radio',\n            options: ['regular', 'small'],\n            table: {\n                category: 'ifx-segmented-control props',\n                defaultValue: {\n                    summary: 'regular'\n                },\n                type: {\n                    summary: 'regular | small'\n                }\n            }\n        },\n        icon: {\n            description: 'Set icon of a segment.',\n            options: Object.keys(icons),\n            control: { type: 'select' },\n            table: {\n                category: 'ifx-segment props'\n            }\n        },\n        selected: {\n            description: `Selects the segment when set true.\\n\nSee the 2nd *<ifx-segment>* for effects`,\n            control: 'boolean',\n            table: {\n                category: 'ifx-segment props',\n                defaultValue: {\n                    summary: false,\n                },\n                type: {\n                    summary: 'boolean'\n                }\n            }\n        },\n        value: {\n            description: 'Set the value of *<ifx-segment>*. Required.',\n            table: {\n                category: 'ifx-segment props',\n                type: {\n                    summary: 'string'\n                }\n            },\n            type: {\n                required: true\n            }\n        },\n        error: {\n            description: 'Set the component to error state.',\n            table:  {\n                category: 'ifx-segmented-control props',\n                defaultValue: {\n                    summary: false,\n                }\n            }\n        },\n        required: {\n            description: 'Marks the component as required by displaying an asterisk next to the label.',\n            table: {\n                category: 'ifx-segmented-control props',\n                defaultValue: {\n                    summary: false,\n                }\n            }\n        },\n        ifxChange: {\n            description: `Custom event emitted when the segment is changed.`,\n            table: {\n                category: 'custom events',\n                type: {\n                    summary: 'Framework integration',\n                    detail: `\nReact: onIfxChange={handleChange}\nVue: @ifxChange=\"handleChange\"\nAngular: (ifxChange)=\"handleChange()\"\nVanillaJs: .addEventListener(\"ifxChange\", (event) => {/*handle change*/});`,\n                }\n            }\n        }\n    }\n}\n\nconst Template = (args) => {\n    const wrapper = document.createElement('div');\n    wrapper.innerHTML = `\n<ifx-segmented-control\ncaption = '${args.caption}'\nlabel = '${args.label}'\nsize = '${args.size}'\nerror = '${args.error}'\nrequired = '${args.required}'>\n    ${(() => {\n            return Array.from({ length: args.amountOfSegments }, (_, segmentId) => {\n                const segment = document.createElement('ifx-segment');\n                segment.innerText = args.labelOfSegment;\n                segment.setAttribute('value', `${args.value}${segmentId + 1}`);\n                segment.setAttribute('icon', `${args.icon}`);\n                if (args.selected === true && segmentId === 1) segment.setAttribute('selected', 'true');\n                return segment.outerHTML;\n            }).join(`\\n    `);\n        })()\n        }\n</ifx-segmented-control>  \n`;\n    const segmentedControl = wrapper.querySelector('ifx-segmented-control');\n    segmentedControl.addEventListener('ifxChange', action('ifxChange'));\n\n    return segmentedControl;\n};\n\nexport const Default = Template.bind({});"]}
+{"version":3,"file":"segmented-control.stories.js","sourceRoot":"","sources":["../../../src/components/segmented-control/segmented-control.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from \"@storybook/addon-actions\";\nimport { icons } from '@infineon/infineon-icons';\n\nexport default {\n    title: 'Components/Segmented Control',\n    tags: ['autodocs'],\n    args: {\n        amountOfSegments: 5,\n        labelOfSegment: 'Label',\n        caption: 'Caption text to describe the controls',\n        label: 'Group Label',\n        size: 'regular',\n        icon: 'star-16',\n        selected: 'false',\n        value: 'Value'\n    },\n    argTypes: {\n        amountOfSegments: {\n            name: 'Amount of Segments',\n            control: { type: 'number', min: 2 },\n            description: 'Control the number of *<ifx-segment>* in component.',\n            table: {\n                category: 'story controls',\n                type: {\n                    summary: null\n                }\n            }\n        },\n        labelOfSegment: {\n            name: 'Label of Segment',\n            description: 'Set the label of *<ifx-segmented-control>*.',\n            table: {\n                category: 'story controls',\n            }\n        },\n        caption: {\n            description: 'Set the caption text of segmented control group.',\n            table: {\n                category: 'ifx-segmented-control props'\n            }\n        },\n        label: {\n            name: 'label',\n            description: 'Set the label of control group.',\n            table: {\n                category: 'ifx-segmented-control props'\n            }\n        },\n        size: {\n            description: 'Switch between the size of Segmented Control.',\n            control: 'radio',\n            options: ['regular', 'small'],\n            table: {\n                category: 'ifx-segmented-control props',\n                defaultValue: {\n                    summary: 'regular'\n                },\n                type: {\n                    summary: 'regular | small'\n                }\n            }\n        },\n        icon: {\n            description: 'Set icon of a segment.',\n            options: Object.keys(icons),\n            control: { type: 'select' },\n            table: {\n                category: 'ifx-segment props'\n            }\n        },\n        selected: {\n            description: `Selects the segment when set true.\\n\nSee the 2nd *<ifx-segment>* for effects`,\n            control: 'boolean',\n            table: {\n                category: 'ifx-segment props',\n                defaultValue: {\n                    summary: false,\n                },\n                type: {\n                    summary: 'boolean'\n                }\n            }\n        },\n        value: {\n            description: 'Set the value of *<ifx-segment>*. Required.',\n            table: {\n                category: 'ifx-segment props',\n                type: {\n                    summary: 'string'\n                }\n            },\n            type: {\n                required: true\n            }\n        },\n        ifxChange: {\n            description: `Custom event emitted when the segment is changed.`,\n            table: {\n                category: 'custom events',\n                type: {\n                    summary: 'Framework integration',\n                    detail: `\nReact: onIfxChange={handleChange}\nVue: @ifxChange=\"handleChange\"\nAngular: (ifxChange)=\"handleChange()\"\nVanillaJs: .addEventListener(\"ifxChange\", (event) => {/*handle change*/});`,\n                }\n            }\n        }\n    }\n}\n\nconst Template = (args) => {\n    const wrapper = document.createElement('div');\n    wrapper.innerHTML = `\n<ifx-segmented-control\ncaption = '${args.caption}'\nlabel = '${args.label}'\nsize = '${args.size}'>\n    ${(() => {\n            return Array.from({ length: args.amountOfSegments }, (_, segmentId) => {\n                const segment = document.createElement('ifx-segment');\n                segment.innerText = args.labelOfSegment;\n                segment.setAttribute('value', `${args.value}${segmentId + 1}`);\n                segment.setAttribute('icon', `${args.icon}`);\n                if (args.selected === true && segmentId === 1) segment.setAttribute('selected', 'true');\n                return segment.outerHTML;\n            }).join(`\\n    `);\n        })()\n        }\n</ifx-segmented-control>  \n`;\n    const segmentedControl = wrapper.querySelector('ifx-segmented-control');\n    segmentedControl.addEventListener('ifxChange', action('ifxChange'));\n\n    return segmentedControl;\n};\n\nexport const Default = Template.bind({});"]}