@infineon/infineon-design-system-stencil 31.0.0--canary.1697.d182a3c648fcdb68889698ab9252e421f923fb47.0 → 31.0.0--canary.1640.26c4c0764d79109b3335389182db63edca37148d.0

package/dist/collection/components/spinner/spinner.stories.js

@@ -4,20 +4,52 @@ export default {
     args: {
         size: 'm',
         variant: 'default',
+        inverted: false,
     },
     argTypes: {
         size: {
-            description: 'Size options: s (24px) and m (40px) - default: m',
+            description: 'Size options: s (24px) and m (40px).',
             options: ['s', 'm'],
             control: { type: 'radio' },
+            table: {
+                category: 'ifx-spinner props',
+                defaultValue: {
+                    summary: 'm'
+                },
+                type: {
+                    summary: 's | m'
+                }
+            }
         },
         variant: {
+            description: 'Variant of the spinner.',
             options: ['default', 'brand'],
             control: { type: 'radio' },
+            table: {
+                category: 'ifx-spinner props',
+                defaultValue: {
+                    summary: 'default'
+                },
+                type: {
+                    summary: 'string'
+                }
+            },
         },
+        inverted: {
+            description: 'Changes the color of spinner to white.',
+            table: {
+                category: 'ifx-spinner props',
+                defaultValue: {
+                    summary: 'false'
+                },
+                type: {
+                    summary: 'boolean'
+                }
+            }
+        }
     },
 };
-const DefaultTemplate = args => `<ifx-spinner variant="${args.variant}" size="${args.size}"></ifx-spinner>`;
+const DefaultTemplate = args => `<ifx-spinner variant="${args.variant}" size="${args.size}" inverted="${args.inverted}"></ifx-spinner>`;
 export const Default = DefaultTemplate.bind({});
 Default.argsTypes = {};
 //# sourceMappingURL=spinner.stories.js.map

package/dist/collection/components/spinner/spinner.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.stories.js","sourceRoot":"","sources":["../../../src/components/spinner/spinner.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,oBAAoB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,IAAI,EAAE,GAAG;QACT,OAAO,EAAE,SAAS;KACnB;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,WAAW,EAAE,kDAAkD;YAC/D,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;YACnB,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;QACD,OAAO,EAAE;YACP,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC;YAC7B,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,yBAAyB,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,IAAI,kBAAkB,CAAC;AAE5G,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,SAAS,GAAG,EAAE,CAAC","sourcesContent":["export default {\n  title: 'Components/Spinner',\n  tags: ['autodocs'],\n\n  args: {\n    size: 'm',\n    variant: 'default',\n  },\n  argTypes: {\n    size: {\n      description: 'Size options: s (24px) and m (40px) - default: m',\n      options: ['s', 'm'],\n      control: { type: 'radio' },\n    },\n    variant: {\n      options: ['default', 'brand'],\n      control: { type: 'radio' },\n    },\n  },\n};\n\nconst DefaultTemplate = args => `<ifx-spinner variant=\"${args.variant}\" size=\"${args.size}\"></ifx-spinner>`;\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argsTypes = {};\n"]}
+{"version":3,"file":"spinner.stories.js","sourceRoot":"","sources":["../../../src/components/spinner/spinner.stories.ts"],"names":[],"mappings":"AACA,eAAe;IACb,KAAK,EAAE,oBAAoB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,IAAI,EAAE,GAAG;QACT,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,KAAK;KAChB;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,WAAW,EAAE,sCAAsC;YACnD,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;YACnB,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,KAAK,EAAE;gBACL,QAAQ,EAAE,mBAAmB;gBAC7B,YAAY,EAAE;oBACZ,OAAO,EAAE,GAAG;iBACb;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,OAAO;iBACjB;aACF;SACF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,yBAAyB;YACtC,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC;YAC7B,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,KAAK,EAAE;gBACL,QAAQ,EAAE,mBAAmB;gBAC7B,YAAY,EAAE;oBACZ,OAAO,EAAE,SAAS;iBACnB;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,wCAAwC;YACrD,KAAK,EAAE;gBACL,QAAQ,EAAE,mBAAmB;gBAC7B,YAAY,EAAE;oBACZ,OAAO,EAAE,OAAO;iBACjB;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,SAAS;iBACnB;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,yBAAyB,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,IAAI,eAAe,IAAI,CAAC,QAAQ,kBAAkB,CAAC;AAExI,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,SAAS,GAAG,EAAE,CAAC","sourcesContent":["\nexport default {\n  title: 'Components/Spinner',\n  tags: ['autodocs'],\n\n  args: {\n    size: 'm',\n    variant: 'default',\n    inverted: false,\n  },\n  argTypes: {\n    size: {\n      description: 'Size options: s (24px) and m (40px).',\n      options: ['s', 'm'],\n      control: { type: 'radio' },\n      table: {\n        category: 'ifx-spinner props',\n        defaultValue: {\n          summary: 'm'\n        },\n        type: {\n          summary: 's | m'\n        }\n      }\n    },\n    variant: {\n      description: 'Variant of the spinner.',\n      options: ['default', 'brand'],\n      control: { type: 'radio' },\n      table: {\n        category: 'ifx-spinner props',\n        defaultValue: {\n          summary: 'default'\n        },\n        type: {\n          summary: 'string'\n        }\n      },\n    },\n    inverted: {\n      description: 'Changes the color of spinner to white.',\n      table: {\n        category: 'ifx-spinner props',\n        defaultValue: {\n          summary: 'false'\n        },\n        type: {\n          summary: 'boolean'\n        }\n      }\n    }\n  },\n};\n\nconst DefaultTemplate = args => `<ifx-spinner variant=\"${args.variant}\" size=\"${args.size}\" inverted=\"${args.inverted}\"></ifx-spinner>`;\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argsTypes = {};\n"]}

package/dist/collection/components/status/status.stories.js

@@ -7,13 +7,37 @@ export default {
         border: true,
     },
     argTypes: {
+        label: {
+            name: 'Label of Status',
+            description: 'Set the label of *<ifx-status>*.',
+            table: {
+                category: 'ifx-status props',
+                type: {
+                    summary: 'string'
+                }
+            }
+        },
         border: {
+            description: 'When set to **true** the status has a border.',
             control: 'boolean',
             attr: 'border',
+            table: {
+                category: 'ifx-status props',
+                defaultValue: {
+                    summary: true
+                }
+            }
         },
         color: {
+            description: 'Sets the color of the status.',
+            control: 'radio',
             options: ['orange', 'ocean', 'grey', 'light-grey', 'red', 'green', 'berry'],
-            control: { type: 'radio' },
+            table: {
+                category: 'ifx-status props',
+                defaultValue: {
+                    summary: 'orange'
+                }
+            }
         },
     },
 };

package/dist/collection/components/status/status.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"status.stories.js","sourceRoot":"","sources":["../../../src/components/status/status.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,QAAQ;QACf,MAAM,EAAE,IAAI;KACb;IACD,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE,SAAS;YAClB,IAAI,EAAE,QAAQ;SACf;QACD,KAAK,EAAE;YACL,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC;YAC3E,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,sBAAsB,IAAI,CAAC,KAAK,YAAY,IAAI,CAAC,KAAK,aAAa,IAAI,CAAC,MAAM,KAAK,CAAC;AAEpH,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,QAAQ,GAAG,EAAE,CAAC","sourcesContent":["export default {\n  title: 'Components/Status',\n  tags: ['autodocs'],\n\n  args: {\n    label: 'text',\n    color: 'orange',\n    border: true,\n  },\n  argTypes: {\n    border: {\n      control: 'boolean',\n      attr: 'border',\n    },\n    color: {\n      options: ['orange', 'ocean', 'grey', 'light-grey', 'red', 'green', 'berry'],\n      control: { type: 'radio' },\n    },\n  },\n};\n\nconst DefaultTemplate = args => `<ifx-status label=\"${args.label}\" color=\"${args.color}\" border=\"${args.border}\"/>`;\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argTypes = {};\n"]}
+{"version":3,"file":"status.stories.js","sourceRoot":"","sources":["../../../src/components/status/status.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,QAAQ;QACf,MAAM,EAAE,IAAI;KACb;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,IAAI,EAAE,iBAAiB;YACvB,WAAW,EAAE,kCAAkC;YAC/C,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,MAAM,EAAE;YACN,WAAW,EAAE,+CAA+C;YAC5D,OAAO,EAAE,SAAS;YAClB,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,YAAY,EAAE;oBACZ,OAAO,EAAE,IAAI;iBACd;aACF;SACF;QACD,KAAK,EAAE;YACL,WAAW,EAAE,+BAA+B;YAC5C,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC;YAC3E,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,YAAY,EAAE;oBACZ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,sBAAsB,IAAI,CAAC,KAAK,YAAY,IAAI,CAAC,KAAK,aAAa,IAAI,CAAC,MAAM,KAAK,CAAC;AAEpH,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,QAAQ,GAAG,EAAE,CAAC","sourcesContent":["export default {\n  title: 'Components/Status',\n  tags: ['autodocs'],\n\n  args: {\n    label: 'text',\n    color: 'orange',\n    border: true,\n  },\n  argTypes: {\n    label: {\n      name: 'Label of Status',\n      description: 'Set the label of *<ifx-status>*.',\n      table: {\n        category: 'ifx-status props',\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    border: {\n      description: 'When set to **true** the status has a border.',\n      control: 'boolean',\n      attr: 'border',\n      table: {\n        category: 'ifx-status props',\n        defaultValue: {\n          summary: true\n        }\n      }\n    },\n    color: {\n      description: 'Sets the color of the status.',\n      control: 'radio',\n      options: ['orange', 'ocean', 'grey', 'light-grey', 'red', 'green', 'berry'],\n      table: {\n        category: 'ifx-status props',\n        defaultValue: {\n          summary: 'orange'\n        }\n      }\n    },\n  },\n};\n\nconst DefaultTemplate = args => `<ifx-status label=\"${args.label}\" color=\"${args.color}\" border=\"${args.border}\"/>`;\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argTypes = {};\n"]}

package/dist/collection/components/stepper/stepper.stories.js

@@ -2,13 +2,14 @@ import { action } from "@storybook/addon-actions";
 export default {
     title: 'Components/Stepper',
     args: {
-        activeStep: 2,
         amountOfSteps: 5,
-        errorStep: 0,
+        activeStep: 2,
         disabled: false,
         indicatorPosition: 'left',
         showStepNumber: false,
-        variant: 'default'
+        variant: 'default',
+        error: false,
+        completeStep: false,
     },
     argTypes: {
         activeStep: {
@@ -16,31 +17,39 @@ export default {
                 type: 'number',
                 min: 1
             },
-            description: 'Indicates the current active step',
+            description: 'Indicates the current active step.',
             table: {
-                defaultValue: { summary: 1 }
+                category: 'ifx-stepper props',
+                defaultValue: { summary: 2 }
             }
         },
         amountOfSteps: {
-            name: 'Amount of steps',
+            name: 'Amount of Steps',
             control: 'number',
-            description: 'Indicates the number of steps in stepper in a story'
+            description: 'Indicates the number of steps in stepper in a story.',
+            table: {
+                category: 'story controls',
+                defaultValue: { summary: 5 }
+            }
         },
         completeStep: {
             name: 'complete',
-            description: 'A boolean prop to mark a step complete.<br>Usage:',
+            description: 'A boolean prop to mark one or more steps as complete.<br>Usage:',
+            control: 'boolean',
             table: {
+                category: 'ifx-step props',
                 defaultValue: { summary: false },
                 type: {
-                    summary: `<ifx-step complete=true> </ifx-step>`
+                    summary: 'boolean'
                 }
             }
         },
         disabled: {
             name: 'disabled',
             control: 'boolean',
-            description: 'A boolean prop to make the step unclickable:',
+            description: 'A boolean prop to make one or more steps unclickable.',
             table: {
+                category: 'ifx-step props',
                 defaultValue: { summary: false },
                 type: {
                     summary: `<ifx-step disabled=true> </ifx-step>`
@@ -48,37 +57,52 @@ export default {
             },
             if: { arg: 'variant', eq: 'default' }
         },
-        errorStep: {
-            name: 'error',
-            control: 'number',
-            description: 'Specified step number indicates to have an error',
+        error: {
+            control: 'boolean',
+            description: 'Sets the error state for a step.',
             table: {
-                defaultValue: { summary: false }
+                category: 'ifx-step props',
+                type: {
+                    summary: 'boolean'
+                }
             },
         },
         indicatorPosition: {
             control: 'radio',
             defaultValue: { summary: 'left' },
-            description: 'Allows to swap the progross bar and steps\' label',
+            description: 'Allows to swap the progress bar and steps\' label.',
             options: ['left', 'right'],
-            if: { arg: 'variant', eq: 'compact' }
+            if: { arg: 'variant', eq: 'compact' },
+            table: {
+                category: 'ifx-stepper props'
+            }
         },
         showStepNumber: {
             control: 'boolean',
             defaultValue: { summary: 'false' },
-            description: 'Shows the step number when set true',
-            if: { arg: 'variant', eq: 'default' }
+            description: 'Shows the step number when set true.',
+            if: { arg: 'variant', eq: 'default' },
+            table: {
+                category: 'ifx-stepper props'
+            }
         },
         variant: {
             options: ['default', 'compact', 'vertical'],
             defaultValue: { summary: 'default' },
-            description: 'Allows to switch between default and compact variant',
-            control: 'radio'
+            description: 'Allows to switch between default and compact variant.',
+            control: 'radio',
+            table: {
+                category: 'ifx-stepper props',
+                type: {
+                    summary: 'default | compact | vertical'
+                },
+            }
         },
         ifxChange: {
             action: 'ifxChange',
-            description: 'A custom event emitted when active step changes',
+            description: 'A custom event emitted when active step changes.',
             table: {
+                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
                     detail: `
@@ -103,10 +127,15 @@ variant=${args.variant}>
         return Array.from({ length: args.amountOfSteps }, (_, stepId) => {
             const step = document.createElement('ifx-step');
             step.innerHTML = `Step Label ${stepId + 1}`;
-            if (args.errorStep === stepId + 1)
-                step.setAttribute('error', 'true');
-            if (args.disabled)
+            if (args.disabled && stepId === 0) {
                 step.setAttribute('disabled', 'true');
+            }
+            if (args.error && stepId === 0) {
+                step.setAttribute('error', 'true');
+            }
+            if (args.completeStep && stepId === 2) {
+                step.setAttribute('complete', args.completeStep);
+            }
             return step.outerHTML;
         }).join(`\n    `);
     })()}

package/dist/collection/components/stepper/stepper.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"stepper.stories.js","sourceRoot":"","sources":["../../../src/components/stepper/stepper.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default{\n    title: 'Components/Stepper',\n    args: { \n        activeStep: 2,\n        amountOfSteps: 5,\n        errorStep: 0,\n        disabled: false,\n        indicatorPosition: 'left',\n        showStepNumber: false,\n        variant: 'default'\n    },\n    argTypes: {\n        activeStep: { \n            control: {\n                type: 'number',\n                min: 1\n            }, \n            description: 'Indicates the current active step', \n            table: {\n                defaultValue: { summary: 1 }\n            }\n        },\n        amountOfSteps: { \n            name: 'Amount of steps',\n            control: 'number', \n            description: 'Indicates the number of steps in stepper in a story'\n        },\n        completeStep: {\n            name: 'complete',\n            description: 'A boolean prop to mark a step complete.<br>Usage:',\n            table: {\n                defaultValue: { summary: false },\n                type: {\n                    summary: `<ifx-step complete=true> </ifx-step>`\n                }\n            }\n        },\n        disabled: {\n            name: 'disabled',\n            control: 'boolean',\n            description: 'A boolean prop to make the step unclickable:',\n            table: {\n                defaultValue: { summary: false },\n                type: {\n                    summary: `<ifx-step disabled=true> </ifx-step>`\n                }\n            },\n            if: { arg:'variant', eq: 'default' }\n        },\n        errorStep: {\n            name: 'error',\n            control: 'number',\n            description: 'Specified step number indicates to have an error',\n            table: {\n                defaultValue: { summary: false }\n            },\n        },\n        indicatorPosition: {\n            control: 'radio',\n            defaultValue: { summary: 'left' },\n            description: 'Allows to swap the progross bar and steps\\' label',\n            options: ['left', 'right'],\n            if: { arg:'variant', eq: 'compact' }\n        },\n        showStepNumber: { \n            control: 'boolean', \n            defaultValue: { summary: 'false' },\n            description: 'Shows the step number when set true',\n            if: { arg: 'variant', eq: 'default' }\n        },\n        variant: {\n            options: ['default', 'compact', 'vertical'],\n            defaultValue: { summary: 'default' },\n            description: 'Allows to switch between default and compact variant',\n            control: 'radio'\n        },\n        ifxChange: {\n            action: 'ifxChange',\n            description: 'A custom event emitted when active step changes',\n            table: {\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-stepper \nactive-step=${args.activeStep} \n${args.variant === 'compact' ? `indicator-position=${args.indicatorPosition}` : ''} \n${args.variant === 'default' ? `show-step-number=${args.showStepNumber}` : ''} \nvariant=${args.variant}>\n    ${\n        (()=>{\n            return Array.from({ length: args.amountOfSteps }, (_, stepId) => {\n                const step = document.createElement('ifx-step')\n                step.innerHTML = `Step Label ${stepId+1}`\n                if (args.errorStep === stepId+1) step.setAttribute('error', 'true')\n                if (args.disabled) step.setAttribute('disabled', 'true')\n                return step.outerHTML\n            }).join(`\\n    `)\n        })()\n    }\n</ifx-stepper>`\n\n    const stepper = wrapper.querySelector('ifx-stepper');\n    stepper.addEventListener('ifxChange', action('ifxChange'));\n    \n    return stepper;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n    variant: 'default'\n};\n\nexport const Compact = Template.bind({});\nCompact.args = {\n    variant: 'compact'\n};\n\nexport const Vertical = Template.bind({});\nVertical.args = {\n    variant: 'vertical'\n}\n"]}
+{"version":3,"file":"stepper.stories.js","sourceRoot":"","sources":["../../../src/components/stepper/stepper.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n    title: 'Components/Stepper',\n    args: {\n        amountOfSteps: 5,\n        activeStep: 2,\n        disabled: false,\n        indicatorPosition: 'left',\n        showStepNumber: false,\n        variant: 'default',\n        error: false,\n        completeStep: false,\n    },\n    argTypes: {\n        activeStep: {\n            control: {\n                type: 'number',\n                min: 1\n            },\n            description: 'Indicates the current active step.',\n            table: {\n                category: 'ifx-stepper props',\n                defaultValue: { summary: 2 }\n            }\n        },\n        amountOfSteps: {\n            name: 'Amount of Steps',\n            control: 'number',\n            description: 'Indicates the number of steps in stepper in a story.',\n            table: {\n                category: 'story controls',\n                defaultValue: { summary: 5 }\n            }\n        },\n        completeStep: {\n            name: 'complete',\n            description: 'A boolean prop to mark one or more steps as complete.<br>Usage:',\n            control: 'boolean',\n            table: {\n                category: 'ifx-step props',\n                defaultValue: { summary: false },\n                type: {\n                    summary: 'boolean'\n                }\n            }\n        },\n        disabled: {\n            name: 'disabled',\n            control: 'boolean',\n            description: 'A boolean prop to make one or more steps unclickable.',\n            table: {\n                category: 'ifx-step props',\n                defaultValue: { summary: false },\n                type: {\n                    summary: `<ifx-step disabled=true> </ifx-step>`\n                }\n            },\n            if: { arg: 'variant', eq: 'default' }\n        },\n        error: {\n            control: 'boolean',\n            description: 'Sets the error state for a step.',\n            table: {\n                category: 'ifx-step props',\n                type: {\n                    summary: 'boolean'\n                }\n            },\n        },\n        indicatorPosition: {\n            control: 'radio',\n            defaultValue: { summary: 'left' },\n            description: 'Allows to swap the progress bar and steps\\' label.',\n            options: ['left', 'right'],\n            if: { arg: 'variant', eq: 'compact' },\n            table: {\n                category: 'ifx-stepper props'\n            }\n        },\n        showStepNumber: {\n            control: 'boolean',\n            defaultValue: { summary: 'false' },\n            description: 'Shows the step number when set true.',\n            if: { arg: 'variant', eq: 'default' },\n            table: {\n                category: 'ifx-stepper props'\n            }\n        },\n        variant: {\n            options: ['default', 'compact', 'vertical'],\n            defaultValue: { summary: 'default' },\n            description: 'Allows to switch between default and compact variant.',\n            control: 'radio',\n            table: {\n                category: 'ifx-stepper props',\n                type: {\n                    summary: 'default | compact | vertical'\n                },\n            }\n        },\n        ifxChange: {\n            action: 'ifxChange',\n            description: 'A custom event emitted when active step changes.',\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-stepper \nactive-step=${args.activeStep} \n${args.variant === 'compact' ? `indicator-position=${args.indicatorPosition}` : ''} \n${args.variant === 'default' ? `show-step-number=${args.showStepNumber}` : ''} \nvariant=${args.variant}>\n    ${(() => {\n            return Array.from({ length: args.amountOfSteps }, (_, stepId) => {\n                const step = document.createElement('ifx-step');\n                step.innerHTML = `Step Label ${stepId + 1}`;\n                if (args.disabled && stepId === 0) {\n                    step.setAttribute('disabled', 'true');\n                }\n                if (args.error && stepId === 0) {\n                    step.setAttribute('error', 'true');\n                }\n                if (args.completeStep && stepId === 2) {\n                    step.setAttribute('complete', args.completeStep);\n                }\n                return step.outerHTML;\n            }).join(`\\n    `)\n        })()\n        }\n</ifx-stepper>`;\n\n    const stepper = wrapper.querySelector('ifx-stepper');\n    stepper.addEventListener('ifxChange', action('ifxChange'));\n\n    return stepper;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n    variant: 'default'\n};\n\nexport const Compact = Template.bind({});\nCompact.args = {\n    variant: 'compact'\n};\n\nexport const Vertical = Template.bind({});\nVertical.args = {\n    variant: 'vertical'\n}\n"]}

package/dist/collection/components/switch/switch.stories.js

@@ -3,21 +3,67 @@ export default {
     title: 'Components/Switch',
     tags: ['autodocs'],
     args: {
-        checked: false,
         label: 'Switch',
+        checked: false,
         name: 'switch',
         value: 'switch',
+        disabled: false,
     },
     argTypes: {
+        label: {
+            name: 'Label of Switch',
+            description: 'Set the label of *<ifx-switch>*.',
+            table: {
+                category: 'story controls',
+            }
+        },
         name: {
-            description: 'Name of the element, that is used as reference when a form is submitted.'
+            description: 'Name of the element, that is used as reference when a form is submitted.',
+            table: {
+                category: 'ifx-switch props',
+                type: {
+                    summary: 'string'
+                }
+            }
+        },
+        checked: {
+            name: 'checked',
+            description: 'Set the checked state of the switch.',
+            table: {
+                category: 'ifx-switch props',
+                defaultValue: {
+                    summary: 'false'
+                },
+                type: {
+                    summary: 'boolean'
+                }
+            }
         },
         value: {
-            description: 'The value that gets submitted, when the radio button is checked'
+            description: 'The value that gets submitted, when the radio button is checked.',
+            table: {
+                category: 'ifx-switch props',
+                type: {
+                    summary: 'string'
+                }
+            }
+        },
+        disabled: {
+            description: 'The value that gets submitted, when the radio button is checked.',
+            table: {
+                category: 'ifx-switch props',
+                defaultValue: {
+                    summary: 'false'
+                },
+                type: {
+                    summary: 'boolean'
+                }
+            }
         },
         ifxChange: {
-            description: 'Custom event emitted on change',
+            description: 'Custom event emitted on change.',
             table: {
+                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
                     detail: 'React: onIfxChange={handleChange}\nVue:@ifxChange="handleChange"\nAngular:(ifxChange)="handleChange()"\nVanillaJs:.addEventListener("ifxChange", (event) => {//handle change});',
@@ -33,6 +79,7 @@ const DefaultTemplate = args => {
     element.setAttribute('checked', args.checked);
     element.setAttribute('name', args.name);
     element.setAttribute('value', args.value);
+    element.setAttribute('disabled', args.disabled);
     // Add the event listener
     // element.addEventListener('ifxChange', action('ifxChange'));
     // Inside your story, add an event listener for the custom event

package/dist/collection/components/switch/switch.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.stories.js","sourceRoot":"","sources":["../../../src/components/switch/switch.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,OAAO,EAAE,KAAK;QACd,KAAK,EAAE,QAAQ;QACf,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE,QAAQ;KAChB;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,WAAW,EAAE,0EAA0E;SACxF;QACD,KAAK,EAAE;YACL,WAAW,EAAE,iEAAiE;SAC/E;QACD,SAAS,EAAE;YACT,WAAW,EAAE,gCAAgC;YAC7C,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,iLAAiL;iBACpL;aACF;YACD,MAAM,EAAE,WAAW;SACpB;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE;IAC7B,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAyB,CAAC;IAE7E,qBAAqB;IACrB,OAAO,CAAC,YAAY,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IAC9C,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IACxC,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAE1C,yBAAyB;IACzB,8DAA8D;IAC9D,gEAAgE;IAChE,OAAO,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,KAAY,EAAE,EAAE;QACrD,MAAM,WAAW,GAAG,KAAoB,CAAC;QACzC,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAM,CAAC;QAEpC,MAAM,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,CAAC;QAEjC,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;IACxB,CAAC,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACxD,OAAO,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;IAEjC,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n  title: 'Components/Switch',\n  tags: ['autodocs'],\n\n  args: {\n    checked: false,\n    label: 'Switch',\n    name: 'switch',\n    value: 'switch',\n  },\n  argTypes: {\n    name: {\n      description: 'Name of the element, that is used as reference when a form is submitted.'\n    },\n    value: {\n      description: 'The value that gets submitted, when the radio button is checked'\n    },\n    ifxChange: {\n      description: 'Custom event emitted on change',\n      table: {\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxChange={handleChange}\\nVue:@ifxChange=\"handleChange\"\\nAngular:(ifxChange)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxChange\", (event) => {//handle change});',\n        },\n      },\n      action: 'ifxChange',\n    },\n  },\n};\n\nconst DefaultTemplate = args => {\n  const element = document.createElement('ifx-switch') as HTMLIfxSwitchElement;\n\n  // Set the attributes\n  element.setAttribute('checked', args.checked);\n  element.setAttribute('name', args.name);\n  element.setAttribute('value', args.value);\n\n  // Add the event listener\n  // element.addEventListener('ifxChange', action('ifxChange'));\n  // Inside your story, add an event listener for the custom event\n  element.addEventListener('ifxChange', (event: Event) => {\n    const customEvent = event as CustomEvent;\n    const newValue = customEvent.detail;\n\n    action('ifxChange')(customEvent);\n\n    args.value = newValue;\n  });\n\n  const slotContent = document.createTextNode(args.label);\n  element.appendChild(slotContent);\n\n  return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}
+{"version":3,"file":"switch.stories.js","sourceRoot":"","sources":["../../../src/components/switch/switch.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n  title: 'Components/Switch',\n  tags: ['autodocs'],\n\n  args: {\n    label: 'Switch',\n    checked: false,\n    name: 'switch',\n    value: 'switch',\n    disabled: false,\n  },\n  argTypes: {\n    label: {\n      name: 'Label of Switch',\n      description: 'Set the label of *<ifx-switch>*.',\n      table: {\n        category: 'story controls',\n      }\n    },\n    name: {\n      description: 'Name of the element, that is used as reference when a form is submitted.',\n      table: {\n        category: 'ifx-switch props',\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    checked: {\n      name: 'checked',\n      description: 'Set the checked state of the switch.',\n      table: {\n        category: 'ifx-switch props',\n        defaultValue: {\n          summary: 'false'\n        },\n        type: {\n          summary: 'boolean'\n        }\n      }\n    },\n    value: {\n      description: 'The value that gets submitted, when the radio button is checked.',\n      table: {\n        category: 'ifx-switch props',\n        type: {\n          summary: 'string'\n        }\n      }\n    },\n    disabled: {\n      description: 'The value that gets submitted, when the radio button is checked.',\n      table: {\n        category: 'ifx-switch props',\n        defaultValue: {\n          summary: 'false'\n        },\n        type: {\n          summary: 'boolean'\n        }\n      }\n    },\n    ifxChange: {\n      description: 'Custom event emitted on change.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxChange={handleChange}\\nVue:@ifxChange=\"handleChange\"\\nAngular:(ifxChange)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxChange\", (event) => {//handle change});',\n        },\n      },\n      action: 'ifxChange',\n    },\n  },\n\n\n\n}\n\nconst DefaultTemplate = args => {\n  const element = document.createElement('ifx-switch') as HTMLIfxSwitchElement;\n\n  // Set the attributes\n  element.setAttribute('checked', args.checked);\n  element.setAttribute('name', args.name);\n  element.setAttribute('value', args.value);\n  element.setAttribute('disabled', args.disabled);\n\n  // Add the event listener\n  // element.addEventListener('ifxChange', action('ifxChange'));\n  // Inside your story, add an event listener for the custom event\n  element.addEventListener('ifxChange', (event: Event) => {\n    const customEvent = event as CustomEvent;\n    const newValue = customEvent.detail;\n\n    action('ifxChange')(customEvent);\n\n    args.value = newValue;\n  });\n\n  const slotContent = document.createTextNode(args.label);\n  element.appendChild(slotContent);\n\n  return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}

package/dist/collection/components/table-advanced-version/table.js

@@ -23,25 +23,27 @@ export class Table {
         this.originalRowData = [];
     }
     handleChipChange(event) {
-        const { name, currentSelection } = event.detail;
-        // Clone the current filters state
-        const updatedFilters = Object.assign({}, this.currentFilters);
-        if (currentSelection.length === 0) {
-            // If there are no selections for this filter, delete the filter
-            delete updatedFilters[name];
-            // Emit event with specific filter name
-            const customEvent = new CustomEvent('ifxUpdateSidebarFilter', { detail: { filterName: name }, bubbles: true, composed: true });
-            this.host.dispatchEvent(customEvent);
-        }
-        else {
-            // Otherwise, update the filter values with the current selection
-            updatedFilters[name].filterValues = currentSelection.map(selection => selection.value);
+        const { name, currentSelection, previousSelection } = event.detail;
+        if (currentSelection && previousSelection) {
+            // Clone the current filters state
+            const updatedFilters = Object.assign({}, this.currentFilters);
+            if (currentSelection.length === 0) {
+                // If there are no selections for this filter, delete the filter
+                delete updatedFilters[name];
+                // Emit event with specific filter name
+                const customEvent = new CustomEvent('ifxUpdateSidebarFilter', { detail: { filterName: name }, bubbles: true, composed: true });
+                this.host.dispatchEvent(customEvent);
+            }
+            else {
+                // Otherwise, update the filter values with the current selection
+                updatedFilters[name].filterValues = currentSelection.map(selection => selection.value);
+            }
+            // Update the component's filters
+            this.currentFilters = updatedFilters;
+            // Ensure table data is updated
+            this.allRowData = this.applyAllFilters(this.originalRowData, this.currentFilters);
+            this.updateTableView();
         }
-        // Update the component's filters
-        this.currentFilters = updatedFilters;
-        // Ensure table data is updated
-        this.allRowData = this.applyAllFilters(this.originalRowData, this.currentFilters);
-        this.updateTableView();
     }
     onButtonRendererOptionsChanged() {
         this.colData = this.getColData(); // Re-fetch column data to apply new renderer options
@@ -352,12 +354,12 @@ export class Table {
             };
         }
         const filterClass = this.filterOrientation === 'topbar' ? 'topbar-layout' : 'sidebar-layout';
-        return (h(Host, { key: 'b729796301f2cbb41f9ed3f87eb1830dcd14f2f1' }, h("div", { key: '1aad01d8b7d76ce42e5e089a94d1301f912fdb3a', class: "table-container" }, this.filterOrientation === 'sidebar' && (h("div", { key: '4c71ac71b270f9efa4e1b8050b64f59688b4d941', class: "sidebar-btn" }, h("ifx-button", { key: '92f0b620f0b93c75d8a3a61e29c5530864d04eb5', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, h("ifx-icon", { key: 'cdc76f610751c9fa5fa848a0bfd371b7cae2f5a0', icon: "cross-12" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), h("div", { key: 'dba2a36c5516555903c831c536b2851648b2df1e', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (h("div", { key: '3f4bb65cc6ca31d4e51fe42a59cce0e20eea69f3', class: "sidebar-container" }, h("div", { key: '63487d20769bf234e2442d61a5dc5f82a69b97d6', class: "filters-title-container" }, h("span", { key: '3aed4afe6c475f7049eba269f3e0832fb2f7a61d', class: "filters-title" }, "Filters")), h("div", { key: 'eb71696ae6055053a75b7cda1fe39dca49be907d', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: '57edff02ef255645c5be3a742ef55e031449d015', name: "sidebar-filter" }))))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (h("div", { key: 'f7cbe678ba899380d23190e2b5abdaf0d399df97', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: '370b0c55c190e53df30281d2e877d8b556c2b01a', name: "topbar-filter" })))), h("div", { key: '813e23cdac3baf819662e21d8b5ea718b09e4ef3', class: "table-pagination-wrapper" }, h("div", { key: 'e7d64df89d6686c0f4fc90f0abfcba27fbde37e9', class: "filter-chips" }, this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (Object.keys(this.currentFilters).map(name => {
+        return (h(Host, { key: 'f18b6cec5505d34fdd3da9346a92b72a5db183d8' }, h("div", { key: '6ea2209db13f565998e8e40dc7285e37b22d7f02', class: "table-container" }, this.filterOrientation === 'sidebar' && (h("div", { key: '68b8ea98a2dfe4f50eddbfd806352254d0f15085', class: "sidebar-btn" }, h("ifx-button", { key: '9659e6ffb40006c2c3ef10cb22f0fe5d4591d4b9', type: "button", disabled: false, variant: "secondary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.toggleSidebarFilters() }, h("ifx-icon", { key: '7a93c73b15b6d5c298404f62c4b4f34159e25d43', icon: "cross-12" }), this.showSidebarFilters ? 'Hide Filters' : 'Show Filters'))), h("div", { key: 'd978efaf8f2f470ef075e4acdcb5124413a6d0e0', class: filterClass }, this.filterOrientation === 'sidebar' && this.showSidebarFilters && (h("div", { key: '8857f97f108d874a5ffd8061794343f35c179f3a', class: "sidebar-container" }, h("div", { key: 'd0ed7ab70902bb90183d6efb311ebfe13f6d446e', class: "filters-title-container" }, h("span", { key: '938ebc632f39f3bb8a8d799562e28c647f864d32', class: "filters-title" }, "Filters")), h("div", { key: '229c6796de2d66978320550a0b10e3f9a526cbe0', class: "set-filter-wrapper-sidebar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: '8c94ebd8255eb777c91f220fb66ec8802d905c58', name: "sidebar-filter" }))))), this.filterOrientation !== 'none' && this.filterOrientation !== 'sidebar' && (h("div", { key: '73253d641947aa7ad3d739ff35c44001b644726f', class: "set-filter-wrapper-topbar" }, (this.filterOrientation !== 'sidebar' || this.showSidebarFilters) && (h("slot", { key: '128299181dda59b6757f32d612865f41735aafe9', name: "topbar-filter" })))), h("div", { key: '2314cb7feffce3004d7a8dc0878216cd54c161f9', class: "table-pagination-wrapper" }, h("div", { key: 'a8dc9e0c93cf9f0ebf03f077c44ce52ce56b32b5', class: "filter-chips" }, this.filterOrientation !== 'none' && this.filterOrientation !== 'topbar' && this.showSidebarFilters && (Object.keys(this.currentFilters).map(name => {
             const filter = this.currentFilters[name];
             const filterValues = filter.filterValues;
             const isMultiSelect = filter.type !== 'text';
             return filterValues.length > 0 ? (h("ifx-chip", { placeholder: name, size: "large", variant: isMultiSelect ? "multi" : "single", readOnly: true, value: filterValues, key: name }, filterValues.map(filterValue => (h("ifx-chip-item", { value: filterValue, selected: true, key: filterValue }, filterValue))))) : null;
-        })), this.filterOrientation !== 'none' && this.filterOrientation === 'sidebar' && this.showSidebarFilters && Object.keys(this.currentFilters).length > 0 && (h("ifx-button", { key: '9e9041366a224464301309ea6ac5301b86c8926a', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.handleResetButtonClick() }, h("ifx-icon", { key: '0f088308085da2c7014bb3758bddaff11bb10b9b', icon: "curved-arrow-left-16" }), "Reset all"))), this.filterOrientation !== 'none' && (h("div", { key: 'e82ec3824a61f386ee20a6e9c865d0c92ab6c17e', class: "matching-results-container" }, h("span", { key: '0752f434d64de56f498f43a8e179943f8f82044a', class: "matching-results-count" }, this.matchingResultsCount), h("span", { key: '0f3c5c1f3c5e38e10aae56e30693c29a2c1221f8', class: "matching-results-text" }, "matching results"))), h("div", { key: 'bbcffcc32dba388df4f1d0022cb986ba3ec3fcb2', id: "table-wrapper", class: this.getTableClassNames() }, h("div", { key: '3b596c305e94e20f6a3e9229396dea2ff77c7bbe', id: `ifxTable-${this.uniqueKey}`, class: 'ifx-ag-grid', style: style, ref: (el) => this.container = el })), this.pagination ? h("ifx-pagination", { total: this.allRowData.length, "current-page": this.currentPage, "items-per-page": '[{"value":"ten","label":"10","selected":true}, {"value":"Twenty","label":"20","selected":false}, {"value":"Thirty","label":"30","selected":false}]' }) : null)))));
+        })), this.filterOrientation !== 'none' && this.filterOrientation === 'sidebar' && this.showSidebarFilters && Object.keys(this.currentFilters).length > 0 && (h("ifx-button", { key: '2dc2b0e1c990ff316d07bad302f447dd099dafed', type: "button", disabled: false, variant: "tertiary", size: "m", target: "_blank", theme: "default", "full-width": "false", onClick: () => this.handleResetButtonClick() }, h("ifx-icon", { key: '93339aded350f0c598e08d161542d42c0d2a0355', icon: "curved-arrow-left-16" }), "Reset all"))), this.filterOrientation !== 'none' && (h("div", { key: '7a19c5a696186491d330a3490bd137464df51e6c', class: "matching-results-container" }, h("span", { key: '9dcd8b4836ecf81194c50f2f3c0de7cacf1ace94', class: "matching-results-count" }, this.matchingResultsCount), h("span", { key: '64050c9f0634a2aa8324350807a9c194709ffba9', class: "matching-results-text" }, "matching results"))), h("div", { key: '11e110a39a2ae2dc350b0ebcc9e01de8c547ea82', id: "table-wrapper", class: this.getTableClassNames() }, h("div", { key: 'e2abda5e3442a07fed3aa3bcf9b0aabce8e8456e', id: `ifxTable-${this.uniqueKey}`, class: 'ifx-ag-grid', style: style, ref: (el) => this.container = el })), this.pagination ? h("ifx-pagination", { total: this.allRowData.length, "current-page": this.currentPage }) : null)))));
     }
     hasButtonCol() {
         return this.getColData().some(column => column.field === 'button');
@@ -616,7 +618,7 @@ export class Table {
     }
     static get listeners() {
         return [{
-                "name": "ifxChipChange",
+                "name": "ifxChange",
                 "method": "handleChipChange",
                 "target": undefined,
                 "capture": false,