@infineon/infineon-design-system-stencil 32.0.0 → 32.1.0--canary.1681.8e7428ed830ca5c1505633fc0cd69c8ff7a84007.0

package/dist/collection/components/checkbox-group/checkbox-group.js

@@ -0,0 +1,238 @@
+import { h } from "@stencil/core";
+export class CheckboxGroup {
+    constructor() {
+        this.errorStates = new Map();
+        this.alignment = 'vertical';
+        this.groupLabelText = 'Group Label Text';
+        this.hasErrors = false;
+        this.handleSlotChange = () => {
+            this.initializeState();
+        };
+    }
+    handleCheckboxError(event) {
+        const checkbox = event.target;
+        if (checkbox.tagName === 'ifx-checkbox') {
+            this.errorStates.set(checkbox, event.detail);
+            this.updateHasErrors();
+        }
+    }
+    // Method to set the error state of all checkboxes in the group
+    async setGroupError(error) {
+        const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));
+        checkboxes.forEach((checkbox) => {
+            checkbox.error = error;
+        });
+    }
+    componentWillLoad() {
+        this.initializeState();
+    }
+    initializeState() {
+        this.errorStates.clear();
+        const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));
+        checkboxes.forEach((checkbox) => {
+            if (!this.errorStates.has(checkbox)) {
+                this.errorStates.set(checkbox, checkbox.error || false);
+            }
+        });
+        this.updateHasErrors();
+    }
+    updateHasErrors() {
+        this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);
+    }
+    render() {
+        return (h("div", { key: '2f455a4fa40d089e1aafab0b669aa4f4ded80be0', class: 'checkbox-group-container' }, this.showGroupLabel ? h("div", { class: 'group-label' }, this.groupLabelText, " *") : '', h("div", { key: 'eb6f16bf53e13620681c87eb7cb4062a37abd068', class: `checkbox-group ${this.alignment} ${this.size}` }, h("slot", { key: '00ec08507a2ef1ff8e893b6c8b9aa917a7735224', 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-checkbox-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["checkbox-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["checkbox-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "alignment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "alignment",
+                "reflect": false,
+                "defaultValue": "'vertical'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false
+            },
+            "showGroupLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-group-label",
+                "reflect": false
+            },
+            "groupLabelText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "group-label-text",
+                "reflect": false,
+                "defaultValue": "'Group Label Text'"
+            },
+            "showCaption": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-caption",
+                "reflect": false
+            },
+            "captionText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "caption-text",
+                "reflect": false
+            },
+            "showCaptionIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show-caption-icon",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasErrors": {}
+        };
+    }
+    static get methods() {
+        return {
+            "setGroupError": {
+                "complexType": {
+                    "signature": "(error: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "error",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "ifxError",
+                "method": "handleCheckboxError",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=checkbox-group.js.map

package/dist/collection/components/checkbox-group/checkbox-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.js","sourceRoot":"","sources":["../../../src/components/checkbox-group/checkbox-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, State, Prop, h, Element, Listen, Method } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-checkbox-group',\n  styleUrl: 'checkbox-group.scss',\n  shadow: true,\n  formAssociated: true\n})\n\nexport class CheckboxGroup {\n  private errorStates: Map<HTMLElement, boolean> = new Map();\n\n  @Element() el: HTMLElement;\n  @Prop() alignment: 'horizontal' | 'vertical' = 'vertical';\n  @Prop() size: string;\n  @Prop() showGroupLabel: boolean;\n  @Prop() groupLabelText: string = 'Group Label Text';\n  @Prop() showCaption: boolean;\n  @Prop() captionText: string;\n  @Prop() showCaptionIcon: boolean;\n  @State() hasErrors: boolean = false;\n\n  @Listen('ifxError')\n  handleCheckboxError(event: CustomEvent) {\n    const checkbox = event.target as HTMLElement;\n    if (checkbox.tagName === 'ifx-checkbox') {\n      this.errorStates.set(checkbox, event.detail);\n      this.updateHasErrors();\n    }\n  }\n\n  // Method to set the error state of all checkboxes in the group\n  @Method()\n  async setGroupError(error: boolean) {\n    const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\n    checkboxes.forEach((checkbox) => {\n      (checkbox as any).error = error;\n    });\n  }\n\n  componentWillLoad() {\n    this.initializeState();\n  }\n\n  handleSlotChange = () => {\n    this.initializeState();\n  };\n\n  private initializeState() {\n    this.errorStates.clear();\n    const checkboxes = Array.from(this.el.querySelectorAll('ifx-checkbox'));\n    checkboxes.forEach((checkbox) => {\n      if (!this.errorStates.has(checkbox)) {\n        this.errorStates.set(checkbox, (checkbox as any).error || false);\n      }\n    });\n    this.updateHasErrors();\n  }\n\n  private updateHasErrors() {\n    this.hasErrors = Array.from(this.errorStates.values()).some((error) => error);\n  }\n\n  render() {\n    return (\n      <div class='checkbox-group-container'>\n        {this.showGroupLabel ? <div class='group-label'>{this.groupLabelText} *</div> : ''}\n        <div class={`checkbox-group ${this.alignment} ${this.size}`}>\n          <slot onSlotchange={this.handleSlotChange}></slot>\n        </div>\n        {this.showCaption ? (\n          <div class={`caption ${this.hasErrors ? 'error' : 'default'}`}>\n            {this.showCaptionIcon ? <div class='caption-icon'><ifx-icon icon=\"c-info-16\">\n            </ifx-icon></div> : ''}\n            <div class='caption-text'>{this.captionText}</div>\n          </div>) : ''}\n      </div>\n    );\n  }\n}"]}

package/dist/collection/components/checkbox-group/checkbox-group.stories.js

@@ -0,0 +1,151 @@
+export default {
+    title: 'Components/Checkbox Group',
+    tags: ['autodocs'],
+    args: {
+        amountOfItems: 3,
+        alignment: 'vertical',
+        checked: false,
+        disabled: false,
+        indeterminate: false,
+        error: false,
+        size: 'm',
+        showGroupLabel: false,
+        groupLabelText: 'Group Label',
+        showCaption: false,
+        captionText: 'Caption text, description, error notification',
+        showCaptionIcon: false,
+    },
+    argTypes: {
+        alignment: {
+            description: 'Set the orientation of the checkbox group.',
+            options: ['vertical', 'horizontal'],
+            control: { type: 'radio' },
+            table: {
+                category: 'ifx-checkbox-group props',
+                defaultValue: { summary: 'vertical' }
+            }
+        },
+        size: {
+            description: 'Size options for the checkbox.',
+            options: ['s', 'm'],
+            control: { type: 'radio' },
+            table: {
+                category: 'ifx-checkbox props',
+                defaultValue: { summary: 'm' },
+                type: {
+                    summary: 's | m'
+                }
+            }
+        },
+        amountOfItems: {
+            name: 'Amount of Items',
+            description: 'Set the amount of checkboxes.',
+            control: { type: 'number' },
+            table: {
+                category: 'story controls',
+                defaultValue: { summary: 3 }
+            }
+        },
+        checked: {
+            description: 'Set the checked state.',
+            control: { type: 'boolean' },
+            table: {
+                category: 'ifx-checkbox props',
+                defaultValue: { summary: 'false' }
+            }
+        },
+        disabled: {
+            description: 'Disable the checkbox.',
+            control: { type: 'boolean' },
+            table: {
+                category: 'ifx-checkbox props',
+                defaultValue: { summary: 'false' }
+            }
+        },
+        error: {
+            description: 'Set the error state for the entire checkbox group.',
+            control: { type: 'boolean' },
+            table: {
+                category: 'ifx-checkbox props',
+                defaultValue: { summary: 'false' }
+            }
+        },
+        indeterminate: {
+            description: 'Set the partially checked state.',
+            control: { type: 'boolean' },
+            table: {
+                category: 'ifx-checkbox props',
+                defaultValue: { summary: 'false' }
+            }
+        },
+        showGroupLabel: {
+            description: 'Show the group label.',
+            control: { type: 'boolean' },
+            table: {
+                category: 'ifx-checkbox-group props',
+                defaultValue: { summary: 'false' }
+            }
+        },
+        groupLabelText: {
+            description: 'Set the group label text.',
+            control: { type: 'text' },
+            table: {
+                category: 'ifx-checkbox-group props',
+                defaultValue: { summary: '' }
+            }
+        },
+        showCaption: {
+            description: 'Show the caption.',
+            control: { type: 'boolean' },
+            table: {
+                category: 'ifx-checkbox-group props',
+                defaultValue: { summary: 'false' }
+            }
+        },
+        captionText: {
+            description: 'Set the caption text.',
+            control: { type: 'text' },
+            table: {
+                category: 'ifx-checkbox-group props',
+                defaultValue: { summary: '' }
+            }
+        },
+        showCaptionIcon: {
+            description: 'Show the caption icon.',
+            control: { type: 'boolean' },
+            table: {
+                category: 'ifx-checkbox-group props',
+                defaultValue: { summary: 'false' }
+            }
+        },
+        setGroupError: {
+            action: 'setGroupError',
+            description: 'Method to set the error state of all checkboxes in the group.',
+            table: {
+                category: 'ifx-checkbox-group methods',
+                type: {
+                    summary: 'error : boolean',
+                    detail: 'CheckboxGroup.setGroupError(error)'
+                }
+            }
+        }
+    }
+};
+const Template = args => {
+    let checkboxes = '';
+    for (let i = 0; i < args.amountOfItems; i++) {
+        if (i === 0) {
+            checkboxes += `<ifx-checkbox value="${i}" disabled="${args.disabled}" checked="${args.checked}" size="${args.size}" indeterminate="${args.indeterminate}" error="${args.error}">Option ${i}</ifx-checkbox>`;
+        }
+        else {
+            checkboxes += `<ifx-checkbox value="${i}" size="${args.size}">Option ${i}</ifx-checkbox>`;
+        }
+    }
+    const template = `
+        <ifx-checkbox-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}">
+            ${checkboxes}
+        </ifx-checkbox-group>`;
+    return template;
+};
+export const Default = Template.bind({});
+//# sourceMappingURL=checkbox-group.stories.js.map

package/dist/collection/components/checkbox-group/checkbox-group.stories.js.map

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

package/dist/collection/components/chip/chip-item/chip-item.js

@@ -56,9 +56,9 @@ export class ChipItem {
         this.handleSelectedState();
     }
     render() {
-        return (h("div", { key: 'a4d81329a7a5bbbc71b66b0f02f32302e3edd6bd', class: `chip-item chip-item--${this.chipState.size} 
+        return (h("div", { key: '7ceff18d0a41b419a188d925fd854cc97d7a9ecd', class: `chip-item chip-item--${this.chipState.size} 
                     chip-item--${(this.selected && this.chipState.variant) === 'single' ? 'selected' : ''}`, tabIndex: 0, onClick: () => { this.handleItemClick(); }, onKeyDown: (e) => { this.handleItemKeyDown(e); }, role: "option", "aria-selected": this.selected.toString() }, this.chipState.variant === 'multi' &&
-            h("ifx-checkbox", { key: '26865e6c41a95e1a92a0bbcb444ffd99b06b6f6b', checked: this.selected, tabIndex: -1, size: 's' }), h("div", { key: '8a48897962af2131d6f574d602b71e035b2f46a6', class: 'chip-item__label' }, " ", h("slot", { key: '2945084fa15c686cc6456761f4ca67370d6418b3' }), " "), h("div", { key: '94e48f99ce3629f73d2a82530626474a50d0d9c1', class: 'chip-item__selected-indicator' }, h("ifx-icon", { key: 'e9aaef0ae55766df51d8d293bb4405703dcdead8', icon: `check${this.chipState.size === 'small' ? '12' : '16'}` }, " "))));
+            h("ifx-checkbox", { key: 'd2f717951d288aa0863081e54cabf7edd1c6f7e6', checked: this.selected, tabIndex: -1, size: 's' }), h("div", { key: 'fff335d9009c93863012f6a4307ed4322413c4f7', class: 'chip-item__label' }, " ", h("slot", { key: 'a093e9caf2eecba28c58674dde3f788be1f5849b' }), " "), h("div", { key: 'ea76c6b3d0bdd2a687acfbe323ebd9e6d6034a40', class: 'chip-item__selected-indicator' }, h("ifx-icon", { key: 'b581de80777bbfe5a39bc393ec90af46276b7ae9', icon: `check${this.chipState.size === 'small' ? '12' : '16'}` }, " "))));
     }
     static get is() { return "ifx-chip-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/chip/chip.js

@@ -255,17 +255,17 @@ export class Chip {
         this.syncSelectedOptionsWithProp(this.value);
     }
     render() {
-        return (h("div", { key: '8c18c26d395086b72e02bc4a93d0704edd066089', class: 'chip' }, h("div", { key: 'c7a091e32092cb523fba9b450a24c482670c066f', class: `chip__wrapper chip__wrapper--${this.size === 'small' ? 'small' : 'large'}
+        return (h("div", { key: 'fc668c031275a7c69f8cc2002fbf26c9252495ae', class: 'chip' }, h("div", { key: '4705146d122cc620644e24dbd3d4e26c73a72f53', class: `chip__wrapper chip__wrapper--${this.size === 'small' ? 'small' : 'large'}
                   chip__wrapper--${this.variant === 'multi' ? 'multi' : 'single'}
                   ${this.opened && !this.readOnly ? 'chip__wrapper--opened' : ''}
-                  ${this.selectedOptions.length ? 'chip__wrapper--selected' : ''}`, tabIndex: 0, onClick: !this.readOnly ? () => { this.handleWrapperClick(); } : undefined, role: 'combobox', "aria-label": this.AriaLabel, "aria-value": this.getSelectedOptions(), "aria-haspopup": !this.readOnly ? 'listbox' : undefined, "aria-expanded": !this.readOnly ? this.opened.toString() : undefined, "aria-controls": !this.readOnly ? 'dropdown' : undefined, "aria-readonly": this.readOnly ? 'true' : undefined, "aria-multiselectable": this.variant === 'multi' ? 'true' : undefined }, h("div", { key: 'aff84b05d8f36b13c59463af3674150d075f0aa9', class: 'wrapper__label' }, (this.selectedOptions.length === 0) && `${this.placeholder}`, (this.selectedOptions.length !== 0 && (this.variant === 'multi' || this.readOnly) && this.placeholder !== '') &&
+                  ${this.selectedOptions.length ? 'chip__wrapper--selected' : ''}`, tabIndex: 0, onClick: !this.readOnly ? () => { this.handleWrapperClick(); } : undefined, role: 'combobox', "aria-label": this.AriaLabel, "aria-value": this.getSelectedOptions(), "aria-haspopup": !this.readOnly ? 'listbox' : undefined, "aria-expanded": !this.readOnly ? this.opened.toString() : undefined, "aria-controls": !this.readOnly ? 'dropdown' : undefined, "aria-readonly": this.readOnly ? 'true' : undefined, "aria-multiselectable": this.variant === 'multi' ? 'true' : undefined }, h("div", { key: '8f1720b1940e2a722c45f6a2efaa42897e6f62f0', class: 'wrapper__label' }, (this.selectedOptions.length === 0) && `${this.placeholder}`, (this.selectedOptions.length !== 0 && (this.variant === 'multi' || this.readOnly) && this.placeholder !== '') &&
             `${this.placeholder}:`, (this.selectedOptions.length !== 0) &&
-            h("div", { key: 'd6895d41ea10a0c0ae9e20181cc3e112e78f3c06', class: 'label__selected-options' }, this.getSelectedOptions()), (this.selectedOptions.length > 2 && this.variant === 'multi') &&
-            h("ifx-number-indicator", { key: 'af8892d23246826d39fc866b292042297f1688e7' }, "  ", `+${this.selectedOptions.length - 2}`, " ")), !this.readOnly && (this.variant !== 'multi' || (this.variant === 'multi' && this.selectedOptions.length === 0)) &&
-            h("div", { key: '1995a9d622e80b5639af86214a7084427f7c0ad0', class: 'wrapper__open-button' }, h("ifx-icon", { key: 1, icon: `chevrondown16` })), (this.variant !== 'multi' && this.readOnly !== false && this.selectedOptions.length > 0) &&
-            h("div", { key: '20669e78ce405e4d323b7c61c3e4f70b1aded6a5', class: 'wrapper__unselect-button', onClick: (e) => { this.handleUnselectButtonClick(e); } }, h("ifx-icon", { key: 2, icon: `cross16` })), ((this.selectedOptions.length >= 1) && this.variant === 'multi') &&
-            h("div", { key: 'b4eebcfbcd125f25cb55f94fbd03bab7202f62da', class: 'wrapper__unselect-button', onClick: (e) => { this.handleUnselectButtonClick(e); } }, h("ifx-icon", { key: 2, icon: `cross16` }))), this.opened && !this.readOnly &&
-            h("div", { key: 'dbd65ac1f1b86541a908b370272dd1f2433043c4', id: 'dropdown', role: 'listbox', class: 'chip__dropdown' }, h("slot", { key: '807a0107a2fe23f0d72ed3b0aed7659d7f1a3bb4' }))));
+            h("div", { key: '048ca51b1fc52273cfee76fde5a0e15c21834590', class: 'label__selected-options' }, this.getSelectedOptions()), (this.selectedOptions.length > 2 && this.variant === 'multi') &&
+            h("ifx-number-indicator", { key: '8b1b5ad4331fbd3d74cdc6b4358cb952d0fcd500' }, "  ", `+${this.selectedOptions.length - 2}`, " ")), !this.readOnly && (this.variant !== 'multi' || (this.variant === 'multi' && this.selectedOptions.length === 0)) &&
+            h("div", { key: 'd0d4782cd9ab4048ce57c09e7add80a6d232f96a', class: 'wrapper__open-button' }, h("ifx-icon", { key: 1, icon: `chevrondown16` })), (this.variant !== 'multi' && this.readOnly !== false && this.selectedOptions.length > 0) &&
+            h("div", { key: '9696e7c54fcfdfe911b84636405c8fac89205272', class: 'wrapper__unselect-button', onClick: (e) => { this.handleUnselectButtonClick(e); } }, h("ifx-icon", { key: 2, icon: `cross16` })), ((this.selectedOptions.length >= 1) && this.variant === 'multi') &&
+            h("div", { key: '287a2f6e6167e1d595d7256fa7638d8be6184b2e', class: 'wrapper__unselect-button', onClick: (e) => { this.handleUnselectButtonClick(e); } }, h("ifx-icon", { key: 2, icon: `cross16` }))), this.opened && !this.readOnly &&
+            h("div", { key: 'b1e1a33e17bb951b60f2086e4c16825a9194c3bb', id: 'dropdown', role: 'listbox', class: 'chip__dropdown' }, h("slot", { key: '64693b69905a1cbbdf6c16c70558e6087534523d' }))));
     }
     static get is() { return "ifx-chip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/content-switcher/content-switcher-item.js

@@ -4,7 +4,7 @@ export class ContentSwitcherItem {
         this.selected = false;
     }
     render() {
-        return (h(Host, { key: '99244cbfde12465c294ba0ce760731ba6e88c8db' }, h("button", { key: '76e0009bcd1dc452964c03cb10e851321467cec2', class: 'ifx-content-switcher-item' + (this.selected ? ' selected' : '') }, h("slot", { key: '987a09faed55d3066f1b80740cdbf6b7de571496' }))));
+        return (h(Host, { key: 'cfee4bfa2e7b8f5ba6c88a99baf11e69f3fecc5f' }, h("button", { key: '13aa464e8f9f8b2b5cfefd3f20b5dcfdb5d04147', class: 'ifx-content-switcher-item' + (this.selected ? ' selected' : '') }, h("slot", { key: '605f9840e2888ba0249e294292a98216297bad0a' }))));
     }
     static get is() { return "ifx-content-switcher-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/content-switcher/content-switcher.js

@@ -151,7 +151,7 @@ export class ContentSwitcher {
         return this.items[index].getAttribute('value') || index.toLocaleString();
     }
     render() {
-        return (h(Host, { key: '0c50e18a9ac86fb7be75a049c82bb73bbad834ec' }, h("div", { key: '6b17a332e6be8a261d7e70143dd60bc51bf637df', class: "ifx-content-switcher", role: "group" }, h("slot", { key: '23a9d14ad25b16d4b3f6411199765b74ef1b9d62' }))));
+        return (h(Host, { key: 'f3695558f870943893bdf5fac7ac9ad8f94b1133' }, h("div", { key: '6f251f429608ea472fa710633b56d5a0e6fc4d28', class: "ifx-content-switcher", role: "group" }, h("slot", { key: 'd76d9932fe87b5f1394a57724938630ae82f801c' }))));
     }
     static get is() { return "ifx-content-switcher"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/date-picker/date-picker.js

@@ -68,7 +68,7 @@ export class DatePicker {
     }
     render() {
         var _a, _b;
-        return (h("div", { key: '8939525c9d1b6ca3d6d1d598f18c801eaa274925', class: `date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, h("label", { key: 'b6943a24e0b7b92826f8f0a951aa8ba07b07a602', class: 'label__wrapper', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 : _a.trim()), h("div", { key: 'dbb6810bec0365a771ee39feca14455d553f308f', class: `input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}` }, h("input", { key: 'c4532643be4a7a29a9c8837787e997059bdaa7c1', type: "date", class: `date__picker-input ${this.error ? 'error' : ""} ${this.success ? "success" : ""}`, disabled: this.disabled ? true : undefined, "aria-invalid": this.error ? true : undefined, "aria-label": this.AriaLabel, max: this.max, min: this.min, value: this.value, required: this.required, onChange: (e) => this.getDate(e) }), h("div", { key: '401c972432d3c0a057a3fe812fa730372b12fcbe', class: "icon__wrapper", role: "button", onClick: () => this.handleInputFocusOnIconClick() }, h("ifx-icon", { key: '125529210997e8dd611e5bb394909a1cf08fc47b', icon: 'calendar16', "aria-hidden": "true" }))), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: '1367a5dc715de1f7f0ea40a9995ce07a9030aae8', class: 'caption__wrapper' }, this.caption.trim()))));
+        return (h("div", { key: '193222ce7a6c0922d2b88319a205df849df5804e', class: `date__picker-container ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, h("label", { key: 'a57ba8b4fbf77bd406a4a185f626efac0bea6da0', class: 'label__wrapper', htmlFor: this.inputId }, (_a = this.label) === null || _a === void 0 ? void 0 : _a.trim()), h("div", { key: 'ca7d189b02688dc56efff87c39846fff77c1576b', class: `input__wrapper ${this.size === 'l' ? 'large' : 'small'} ${this.disabled ? 'disabled' : ''}` }, h("input", { key: '039cce204879d52c655fcfe9ef7739524c1e6c0f', type: "date", class: `date__picker-input ${this.error ? 'error' : ""} ${this.success ? "success" : ""}`, disabled: this.disabled ? true : undefined, "aria-invalid": this.error ? true : undefined, "aria-label": this.AriaLabel, max: this.max, min: this.min, value: this.value, required: this.required, onChange: (e) => this.getDate(e) }), h("div", { key: 'a2dc899dc0923b5a4ed8a3683b228f231853805e', class: "icon__wrapper", role: "button", onClick: () => this.handleInputFocusOnIconClick() }, h("ifx-icon", { key: 'e0629c84b044727c2514751887253c24f33394f0', icon: 'calendar16', "aria-hidden": "true" }))), ((_b = this.caption) === null || _b === void 0 ? void 0 : _b.trim()) && (h("div", { key: '78ffd450feb0df0dca22aaf0fb2729253a528d0c', class: 'caption__wrapper' }, this.caption.trim()))));
     }
     static get is() { return "ifx-date-picker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown/dropdown-header/dropdown-header.js

@@ -2,7 +2,7 @@
 import { h } from "@stencil/core";
 export class DropdownHeader {
     render() {
-        return (h("div", { key: 'b42dc08dabda81dd0e8e604d07c8409686a5f0fd', class: 'dropdown-header' }, h("span", { key: '9f699e2874688216d23da95c3b96d78caad78695' }, h("slot", { key: 'f8b69b6e6840fcc1c8f3b877a9361e192a1d76a0' }))));
+        return (h("div", { key: '07f0fafeb7a3cafd083ba17bc9293f813d4a11da', class: 'dropdown-header' }, h("span", { key: 'c7d2cb2d9694d8a3c9d868bb252aa4b22e7b6c4d' }, h("slot", { key: '5558455b497bbfb7f80f89da038a247fb105b07f' }))));
     }
     static get is() { return "ifx-dropdown-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown/dropdown-item/dropdown-item.js

@@ -15,7 +15,7 @@ export class DropdownItem {
     }
     render() {
         let hrefAttr = this.href ? { href: this.href, target: this.target } : {};
-        return (h("a", Object.assign({ key: 'd1c6f3cbd4554b1018770258e8f47419edc02352' }, hrefAttr, { onClick: () => this.handleEventEmission(), class: `dropdown-item ${this.size === 's' ? 'small' : ""} ${this.hide ? 'hide' : ""}` }), this.icon && h("ifx-icon", { key: 'b814d88ad14f00b04357b5549ae5a5b24adc1b6b', class: "icon", icon: this.icon }), h("span", { key: '49587568db0c0a4f76f9fad0873a6072a698c8ad' }, h("slot", { key: 'ccfdb428ffa6d9053c0ff9dc3b6b39469e09f208' }))));
+        return (h("a", Object.assign({ key: '4ef5a3e4b163c7010a4a9b35224af903f166f170' }, hrefAttr, { onClick: () => this.handleEventEmission(), class: `dropdown-item ${this.size === 's' ? 'small' : ""} ${this.hide ? 'hide' : ""}` }), this.icon && h("ifx-icon", { key: '1426e1b684f50c722d3b1050133c62e595814253', class: "icon", icon: this.icon }), h("span", { key: '171b469a19c363806630e383d02c526a95d232f7' }, h("slot", { key: 'e8af940e507f5fcba88c3848c3aaa1ca656489ce' }))));
     }
     static get is() { return "ifx-dropdown-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown/dropdown-menu/dropdown-menu.js

@@ -43,10 +43,10 @@ export class DropdownMenu {
             this.hideTopPadding = false;
     }
     render() {
-        return (h("div", { key: '6a0875682a7dbdf9734794347bd64148b4f2c8b5', class: `dropdown-menu 
+        return (h("div", { key: '88e2e752666a0f48c4abe3e739c15fd645406e6d', class: `dropdown-menu 
       ${this.isOpen ? 'show' : ''} 
       ${this.hideTopPadding ? 'hideTopPadding' : ""}
-      ${this.size === 's' ? 'small' : ""}` }, h("slot", { key: '0a89ee2b042f28395f977172d003575b1d080611' })));
+      ${this.size === 's' ? 'small' : ""}` }, h("slot", { key: '5b6f83bb991e5d6a52e8a0f8dd6fd341c01e866b' })));
     }
     static get is() { return "ifx-dropdown-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown/dropdown-seperator/dropdown-separator.js

@@ -2,7 +2,7 @@
 import { h } from "@stencil/core";
 export class DropdownSeparator {
     render() {
-        return (h("div", { key: '2c7435f309112c640c3ff68a244d3c663ceb5b7a', class: 'dropdown-separator' }));
+        return (h("div", { key: '5d982d5c92e0d2d3064ebca6403eee845790d61e', class: 'dropdown-separator' }));
     }
     static get is() { return "ifx-dropdown-separator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown/dropdown-trigger/dropdown-trigger.js

@@ -5,7 +5,7 @@ export class DropdownItem {
         this.isOpen = false;
     }
     render() {
-        return (h("slot", { key: '3e51ceb827b5c52cb850e6433d3235e9400fe5c0' }));
+        return (h("slot", { key: 'f0a65116af72f52d895802a989a5a44396f8aafb' }));
     }
     static get is() { return "ifx-dropdown-trigger"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown/dropdown-trigger-button/dropdown-trigger-button.js

@@ -8,8 +8,8 @@ export class DropdownItem {
         this.hideArrow = false;
     }
     render() {
-        return (h("ifx-button", { key: '4dc468fdf8211511a97d58441059b0ca44bb880c', variant: this.variant, theme: this.theme, size: this.size, disabled: this.disabled, class: "dropdown-trigger-button" }, h("slot", { key: '5e77a7b367905623309508c784233784685caf94' }), !this.hideArrow &&
-            h("ifx-icon", { key: 'c60c753f1d57a4ab819a680c48fa1664704dc42b', icon: "chevron-down-12", class: `icon${this.isOpen ? ' rotate' : ''}` })));
+        return (h("ifx-button", { key: '3f5c9da4adce25304ff23702add3d858f5518a7d', variant: this.variant, theme: this.theme, size: this.size, disabled: this.disabled, class: "dropdown-trigger-button" }, h("slot", { key: 'e998ffe1f1813e26545e670f74d839745129aea2' }), !this.hideArrow &&
+            h("ifx-icon", { key: '93057033a2de1cdae71a20ef496963d5cace88cb', icon: "chevron-down-12", class: `icon${this.isOpen ? ' rotate' : ''}` })));
     }
     static get is() { return "ifx-dropdown-trigger-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown/dropdown.js

@@ -128,7 +128,7 @@ export class Dropdown {
         }
     }
     render() {
-        return (h("div", { key: '219177f6d008120f92de56d6e3a0b135b1150fa3', "aria-label": 'dropdown menu', class: 'dropdown' }, h("slot", { key: 'c914c9bbf3476b569d90db5418c35cb0e5645a4e' })));
+        return (h("div", { key: 'dde0f96abe23abe5c133f4b7aa8d16082e412eb5', "aria-label": 'dropdown menu', class: 'dropdown' }, h("slot", { key: 'f930fdf305e1092e6aa9a2ab8cc0e7a8fe74b926' })));
     }
     static get is() { return "ifx-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/footer/footer-column.js

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class Card {
     render() {
-        return (h("div", { key: '4cad5415cae80dfff4e7d75e82163bd0ef71f648', class: "col" }, h("slot", { key: 'e884b90aadc3df6f4ec4ccff44a8e05589277b5c', name: "title" }), h("span", { key: 'e29933f15be919b14ea765ccbcf75bcd8c8f19e7', "aria-label": 'navigation link' }, h("slot", { key: '5ae8906786990bc1e0821982fa4f0d7bb9dadc9f', name: "link" }))));
+        return (h("div", { key: '9d82512193da23161afa1faf971e29b825836813', class: "col" }, h("slot", { key: '028a84c0e7f2779eac65b6f7be483b2aaa142d7e', name: "title" }), h("span", { key: '75afac7548f54159666220c4ab82d489b3024073', "aria-label": 'navigation link' }, h("slot", { key: 'a22b018a2fe51430514b77460c066fb50ff4afd6', name: "link" }))));
     }
     static get is() { return "ifx-footer-column"; }
     static get encapsulation() { return "shadow"; }