@infineon/infineon-design-system-stencil 30.9.1 → 30.9.2--canary.1640.8926aa040c1241b80b9d12b6600d721691845221.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,36 @@ export default {
         border: true,
     },
     argTypes: {
+        label: {
+            description: 'Sets the label of *<ifx-status>*.',
+            table: {
+                category: 'ifx-status props',
+                type: {
+                    summary: '<ifx-status> `label` </ifx-status>'
+                }
+            }
+        },
         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,WAAW,EAAE,mCAAmC;YAChD,KAAK,EAAE;gBACL,QAAQ,EAAE,kBAAkB;gBAC5B,IAAI,EAAE;oBACJ,OAAO,EAAE,oCAAoC;iBAC9C;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      description: 'Sets the label of *<ifx-status>*.',\n      table: {\n        category: 'ifx-status props',\n        type: {\n          summary: '<ifx-status> `label` </ifx-status>'\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,8 +2,8 @@ import { action } from "@storybook/addon-actions";
 export default {
     title: 'Components/Stepper',
     args: {
-        activeStep: 2,
         amountOfSteps: 5,
+        activeStep: 2,
         errorStep: 0,
         disabled: false,
         indicatorPosition: 'left',
@@ -16,20 +16,26 @@ 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:',
             table: {
+                category: 'ifx-step props',
                 defaultValue: { summary: false },
                 type: {
                     summary: `<ifx-step complete=true> </ifx-step>`
@@ -39,8 +45,9 @@ export default {
         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>`
@@ -51,34 +58,44 @@ export default {
         errorStep: {
             name: 'error',
             control: 'number',
-            description: 'Specified step number indicates to have an error',
+            description: 'Specified step number indicates to have an error.',
             table: {
-                defaultValue: { summary: false }
+                category: 'ifx-step props'
             },
         },
         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'
+            }
         },
         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: `

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        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                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            table: {\n                category: 'ifx-step props',\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 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        errorStep: {\n            name: 'error',\n            control: 'number',\n            description: 'Specified step number indicates to have an error.',\n            table: {\n                category: 'ifx-step props'\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            }\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.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"]}

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

@@ -3,21 +3,70 @@ export default {
     title: 'Components/Switch',
     tags: ['autodocs'],
     args: {
-        checked: false,
         label: 'Switch',
+        checked: false,
         name: 'switch',
         value: 'switch',
+        disabled: false,
     },
     argTypes: {
+        label: {
+            name: 'Label',
+            description: 'Set the label of <ifx-switch>.',
+            table: {
+                category: 'story controls',
+                type: {
+                    summary: '<ifx-switch> `label` </ifx-switch>'
+                }
+            }
+        },
         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 +82,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',\n      description: 'Set the label of <ifx-switch>.',\n      table: {\n        category: 'story controls',\n        type: {\n          summary: '<ifx-switch> `label` </ifx-switch>'\n        }\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.stories.js

@@ -137,17 +137,77 @@ export default {
     }
 };
 const DefaultTemplate = (args) => {
-    const table = `
-    <ifx-table
-      row-height="${args.rowHeight}"
-      cols='${JSON.stringify(args.columnDefs)}'
-      rows='${JSON.stringify(args.rowData)}'
-      table-height="${args.tableHeight}"
-      pagination="${args.pagination}"
-      pagination-page-size="${args.paginationPageSize}"
-      filter-orientation="${args.filterOrientation}">
-    </ifx-table>`;
-    return table;
+    if (args.filterOrientation === 'none') {
+        const table = `<ifx-table
+    row-height="${args.rowHeight}"
+    cols='${JSON.stringify(args.columnDefs)}'
+    rows='${JSON.stringify(args.rowData)}'
+    table-height="${args.tableHeight}"
+    pagination="${args.pagination}"
+    pagination-page-size="${args.paginationPageSize}"
+    filter-orientation="${args.filterOrientation}">
+</ifx-table>`;
+        return table;
+    }
+    else {
+        //sidebar
+        const filterAccordions = args.columnDefs.map(column => {
+            const uniqueColValues = [...new Set(args.rowData.map(row => row[column.field]))];
+            const filterOptions = uniqueColValues.map((option, index) => {
+                return `<ifx-list-entry slot="slot${index}" label="${option}" value="false"></ifx-list-entry>`;
+            }).join('');
+            return `
+      <ifx-filter-accordion slot="filter-accordion" filter-group-name="${column.field}">
+        <ifx-list slot="list" type="checkbox" name="${column.field}" max-visible-items="6">
+          ${filterOptions}
+        </ifx-list>
+      </ifx-filter-accordion>
+    `;
+        }).join('');
+        //topbar
+        const filterComponents = args.columnDefs.map((column, index) => {
+            const uniqueColValues = [...new Set(args.rowData.map(row => row[column.field]))];
+            const options = uniqueColValues.map(option => ({
+                value: option,
+                label: option,
+                selected: false
+            }));
+            // Directly use JSON.stringify without replacing quotes
+            const optionsString = JSON.stringify(options);
+            return `
+        <ifx-set-filter slot="filter-component-${index + 1}"
+            options='${optionsString}' 
+            filter-label='${column.headerName}'
+            filter-name='${column.field}'
+            type='multi-select'
+            search-enabled='true'>
+          </ifx-set-filter>
+          `;
+        }).join('\n');
+        const filterTypeGroupComponent = args.filterOrientation === 'sidebar'
+            ? `<ifx-filter-type-group slot="sidebar-filter">
+        <div slot="filter-search">
+          <ifx-filter-search filter-orientation="sidebar" filter-name="search"></ifx-filter-search>
+        </div>
+        ${filterAccordions}
+    </ifx-filter-type-group>`
+            :
+                `<ifx-filter-bar slot="topbar-filter" max-shown-filters="3">
+        <ifx-filter-search slot="filter-search" filter-orientation="topbar"></ifx-filter-search>
+        ${filterComponents}
+   </ifx-filter-bar>`;
+        const table = `<ifx-table
+    row-height="${args.rowHeight}"
+    cols='${JSON.stringify(args.columnDefs)}'
+    rows='${JSON.stringify(args.rowData)}'
+    table-height="${args.tableHeight}"
+    pagination="${args.pagination}"
+    pagination-page-size="${args.paginationPageSize}"
+    filter-orientation="${args.filterOrientation}">
+    ${filterTypeGroupComponent}
+</ifx-table>`;
+        return table;
+    }
 };
 export const Pagination = DefaultTemplate.bind({});
 Pagination.args = {

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

@@ -1 +1 @@
-{"version":3,"file":"table.stories.js","sourceRoot":"","sources":["../../../src/components/table-advanced-version/table.stories.ts"],"names":[],"mappings":"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","sourcesContent":["const columnDefs = [\n  { headerName: 'Make', field: 'make', sortable: true, sort: 'desc', unSortIcon: true },\n  { headerName: 'Model', field: 'model', sortable: true, unSortIcon: true },\n  { headerName: 'Price', field: 'price' },\n  { headerName: 'Age', field: 'age' }\n];\n\nconst rowData = [\n  { make: 'Toyota', model: 'Celica', price: 35000, age: 10 },\n  { make: 'Ford', model: 'Mondeo', price: 32000, age: 12 },\n  { make: 'Porsche', model: 'Boxster', price: 72000 },\n  { make: 'Bmw', model: 'x', price: 72000 },\n  { make: 'Mercedes', model: 'y', price: 72000 },\n  { make: 'Ferrari', model: 'z', price: 72000 },\n  { make: 'Chrysler', model: 'a', price: 72000 },\n  { make: 'Range rover', model: 'b', price: 72000 },\n  { make: 'Tesla', model: 'x', price: 72000 },\n  { make: 'Audi', model: '3', price: 72000 },\n  { make: 'Landrover', model: 'x', price: 72000 },\n];\n\nconst columnDefsWithButtonCol = [\n  { headerName: 'Make', field: 'make', sortable: true, sort: 'desc', unSortIcon: true },\n  { headerName: 'Model', field: 'model', sortable: true, unSortIcon: true },\n  { headerName: 'Price', field: 'price' },\n  { headerName: 'Age', field: 'age' },\n  { \n    headerName: '', \n    field: 'button',\n  }\n];\n\n\nconst rowDataWithButtonCol = [\n  {\n    make: 'Toyota', model: 'Celica', price: 35000, age: 10, button: {\n      disabled: false,\n      variant: \"secondary\",\n      size: \"s\",\n      target: \"_blank\",\n      href: \"https://www.w3schools.com/\",\n      theme: \"default\",\n      type: \"button\",\n      fullWidth: true,\n      text: \"Toyota Button\"\n    }\n  },\n  {\n    make: 'Ford', model: 'Mondeo', price: 32000, age: 12, button: {\n      disabled: false,\n      variant: \"secondary\",\n      size: \"s\",\n      target: \"_blank\",\n      href: \"https://www.w3schools.com/\",\n      theme: \"default\",\n      type: \"button\",\n      fullWidth: true,\n      text: \"Ford Button\"\n    }\n  },\n  {\n    make: 'Porsche', model: 'Boxster', price: 72000, button: {\n      disabled: false,\n      variant: \"secondary\",\n      size: \"s\",\n      target: \"_blank\",\n      href: \"https://www.w3schools.com/\",\n      theme: \"default\",\n      type: \"button\",\n      fullWidth: true,\n      text: \"Porsche Button\"\n    }\n  }\n];\n \nexport default {\n  title: 'Components/Table (advanced)',\n  args: {\n    tableHeight: 'auto',\n    pagination: false,\n    paginationPageSize: 10,\n    currentPage: 1,\n    rowHeight: 40,\n    showLoading: false,\n    buttonRendererOptions: {\n      onButtonClick: (params, event) => {\n        console.log('Button clicked:', params, event);\n      }\n    }\n  },\n  argTypes: {\n    tableHeight: {\n      table: {\n        type: {\n          summary: 'Options',\n          detail: 'Default: \"auto\"\\nExample for fixed height: \"400px\"',\n        }\n      },\n    },\n    paginationPageSize: {\n      description: \"Results per page: minimum 10 - maximum 30\",\n      control: { type: 'number', min: 10, max: 30, step: 10 }\n    },\n    showLoading: {\n      options: [true, false],\n      control: { type: 'radio' },\n    },\n    rowHeight: {\n      options: ['compact', 'default'],\n      control: { type: 'radio' },\n    },\n    filterOrientation: {\n      options: ['sidebar', 'topbar', 'none'],\n      control: { type: 'radio' },\n    },\n    columnDefs: {\n      table: {\n        type: {\n          summary: 'Column header options',\n          detail: 'Standard columns:\\nheaderName: \"Model\", \\nfield: \"model\", \\nsortable: true (optional),\\nsort: \"desc\" (optional) => descending sort (show icon)\\nunSortIcon: true (optional) => unsorted (show icon)\\n\\nSpecial columns:\\nheaderName: \"\",\\nfield: \"button\"\\nheaderName: \"\",\\nfield: \"link\"',\n        },\n      },\n    },\n    rowData: {\n      table: {\n        type: {\n          summary: 'Row data options',\n          detail: 'Standard row values:\\nmake: \"Toyota\", \\nmodel: \"Celica\", \\nprice: 35000 \\n\\nSpecial row values (incl buttons):\\nmake: \"Porsche\",\\nmodel: \"Boxster\",\\nprice: \"72000\",\\nbutton: { \\ndisabled: false (optional),\\nvariant: \"outline\" (optional)\\nsize: \"s\" (optional),\\ntext: \"Button\"\\n...other ifx-button properties\\n}',\n        },\n      },\n    },\n    buttonRendererOptions: {\n      control: 'object',\n      description: 'Options for button cell renderer, including event handlers.',\n      table: {\n        type: {\n          summary: 'Button Renderer Options',\n          detail: 'Custom event handlers and other options for the button cell renderer in the table.'\n        },\n      },\n    },\n  }\n};\n\nconst DefaultTemplate = (args) => {\n  const table = `\n    <ifx-table\n      row-height=\"${args.rowHeight}\"\n      cols='${JSON.stringify(args.columnDefs)}'\n      rows='${JSON.stringify(args.rowData)}'\n      table-height=\"${args.tableHeight}\"\n      pagination=\"${args.pagination}\"\n      pagination-page-size=\"${args.paginationPageSize}\"\n      filter-orientation=\"${args.filterOrientation}\">\n    </ifx-table>`;\n  return table;\n};\n\n\nexport const Pagination = DefaultTemplate.bind({});\nPagination.args = {\n  pagination: true,\n  paginationPageSize: 10,\n  rowHeight: 'default',\n  columnDefs: columnDefs,\n  rowData: rowData,\n  filterOrientation: 'none',\n};\n\n\nconst CustomCellTemplate = (args) => {\n  const table = `\n    <ifx-table\n      row-height=\"${args.rowHeight}\"\n      cols='${JSON.stringify(args.columnDefs)}'\n      rows='${JSON.stringify(args.rowData)}'\n      table-height=\"${args.tableHeight}\"\n      pagination=\"${args.pagination}\"\n      pagination-page-size=\"${args.paginationPageSize}\"\n      filter-orientation=\"${args.filterOrientation}\">\n    </ifx-table>`;\n  return table;\n};\n\n\n\nexport const IncludesButtons = CustomCellTemplate.bind({});\nIncludesButtons.args = {\n  rowHeight: 'default',\n  columnDefs: columnDefsWithButtonCol,\n  rowData: rowDataWithButtonCol,\n  filterOrientation: 'none',\n  pagination: false,\n  paginationPageSize: 10,\n};\n\nexport const SidebarFilter = DefaultTemplate.bind({});\nSidebarFilter.args = {\n  rowHeight: 'default',\n  columnDefs: columnDefs,\n  rowData: rowData,\n  filterOrientation: 'sidebar',\n  buttonRendererOptions: {\n    onButtonClick: (params, event) => {\n      console.log('Button clicked:', params, event);\n    }\n  }\n};\n\nexport const TopbarFilter = DefaultTemplate.bind({});\nTopbarFilter.args = {\n  rowHeight: 'default',\n  columnDefs: columnDefs,\n  rowData: rowData,\n  filterOrientation: 'topbar',\n  buttonRendererOptions: {\n    onButtonClick: (params, event) => {\n      console.log('Button clicked:', params, event);\n    }\n  }\n};\n"]}
+{"version":3,"file":"table.stories.js","sourceRoot":"","sources":["../../../src/components/table-advanced-version/table.stories.ts"],"names":[],"mappings":"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","sourcesContent":["const columnDefs = [\n  { headerName: 'Make', field: 'make', sortable: true, sort: 'desc', unSortIcon: true },\n  { headerName: 'Model', field: 'model', sortable: true, unSortIcon: true },\n  { headerName: 'Price', field: 'price' },\n  { headerName: 'Age', field: 'age' }\n];\n\nconst rowData = [\n  { make: 'Toyota', model: 'Celica', price: 35000, age: 10 },\n  { make: 'Ford', model: 'Mondeo', price: 32000, age: 12 },\n  { make: 'Porsche', model: 'Boxster', price: 72000 },\n  { make: 'Bmw', model: 'x', price: 72000 },\n  { make: 'Mercedes', model: 'y', price: 72000 },\n  { make: 'Ferrari', model: 'z', price: 72000 },\n  { make: 'Chrysler', model: 'a', price: 72000 },\n  { make: 'Range rover', model: 'b', price: 72000 },\n  { make: 'Tesla', model: 'x', price: 72000 },\n  { make: 'Audi', model: '3', price: 72000 },\n  { make: 'Landrover', model: 'x', price: 72000 },\n];\n\nconst columnDefsWithButtonCol = [\n  { headerName: 'Make', field: 'make', sortable: true, sort: 'desc', unSortIcon: true },\n  { headerName: 'Model', field: 'model', sortable: true, unSortIcon: true },\n  { headerName: 'Price', field: 'price' },\n  { headerName: 'Age', field: 'age' },\n  {\n    headerName: '',\n    field: 'button',\n  }\n];\n\n\nconst rowDataWithButtonCol = [\n  {\n    make: 'Toyota', model: 'Celica', price: 35000, age: 10, button: {\n      disabled: false,\n      variant: \"secondary\",\n      size: \"s\",\n      target: \"_blank\",\n      href: \"https://www.w3schools.com/\",\n      theme: \"default\",\n      type: \"button\",\n      fullWidth: true,\n      text: \"Toyota Button\"\n    }\n  },\n  {\n    make: 'Ford', model: 'Mondeo', price: 32000, age: 12, button: {\n      disabled: false,\n      variant: \"secondary\",\n      size: \"s\",\n      target: \"_blank\",\n      href: \"https://www.w3schools.com/\",\n      theme: \"default\",\n      type: \"button\",\n      fullWidth: true,\n      text: \"Ford Button\"\n    }\n  },\n  {\n    make: 'Porsche', model: 'Boxster', price: 72000, button: {\n      disabled: false,\n      variant: \"secondary\",\n      size: \"s\",\n      target: \"_blank\",\n      href: \"https://www.w3schools.com/\",\n      theme: \"default\",\n      type: \"button\",\n      fullWidth: true,\n      text: \"Porsche Button\"\n    }\n  }\n];\n\nexport default {\n  title: 'Components/Table (advanced)',\n  args: {\n    tableHeight: 'auto',\n    pagination: false,\n    paginationPageSize: 10,\n    currentPage: 1,\n    rowHeight: 40,\n    showLoading: false,\n    buttonRendererOptions: {\n      onButtonClick: (params, event) => {\n        console.log('Button clicked:', params, event);\n      }\n    }\n  },\n  argTypes: {\n    tableHeight: {\n      table: {\n        type: {\n          summary: 'Options',\n          detail: 'Default: \"auto\"\\nExample for fixed height: \"400px\"',\n        }\n      },\n    },\n    paginationPageSize: {\n      description: \"Results per page: minimum 10 - maximum 30\",\n      control: { type: 'number', min: 10, max: 30, step: 10 }\n    },\n    showLoading: {\n      options: [true, false],\n      control: { type: 'radio' },\n    },\n    rowHeight: {\n      options: ['compact', 'default'],\n      control: { type: 'radio' },\n    },\n    filterOrientation: {\n      options: ['sidebar', 'topbar', 'none'],\n      control: { type: 'radio' },\n    },\n    columnDefs: {\n      table: {\n        type: {\n          summary: 'Column header options',\n          detail: 'Standard columns:\\nheaderName: \"Model\", \\nfield: \"model\", \\nsortable: true (optional),\\nsort: \"desc\" (optional) => descending sort (show icon)\\nunSortIcon: true (optional) => unsorted (show icon)\\n\\nSpecial columns:\\nheaderName: \"\",\\nfield: \"button\"\\nheaderName: \"\",\\nfield: \"link\"',\n        },\n      },\n    },\n    rowData: {\n      table: {\n        type: {\n          summary: 'Row data options',\n          detail: 'Standard row values:\\nmake: \"Toyota\", \\nmodel: \"Celica\", \\nprice: 35000 \\n\\nSpecial row values (incl buttons):\\nmake: \"Porsche\",\\nmodel: \"Boxster\",\\nprice: \"72000\",\\nbutton: { \\ndisabled: false (optional),\\nvariant: \"outline\" (optional)\\nsize: \"s\" (optional),\\ntext: \"Button\"\\n...other ifx-button properties\\n}',\n        },\n      },\n    },\n    buttonRendererOptions: {\n      control: 'object',\n      description: 'Options for button cell renderer, including event handlers.',\n      table: {\n        type: {\n          summary: 'Button Renderer Options',\n          detail: 'Custom event handlers and other options for the button cell renderer in the table.'\n        },\n      },\n    },\n  }\n};\n\n\n\nconst DefaultTemplate = (args) => {\n  if (args.filterOrientation === 'none') {\n    const table = `<ifx-table\n    row-height=\"${args.rowHeight}\"\n    cols='${JSON.stringify(args.columnDefs)}'\n    rows='${JSON.stringify(args.rowData)}'\n    table-height=\"${args.tableHeight}\"\n    pagination=\"${args.pagination}\"\n    pagination-page-size=\"${args.paginationPageSize}\"\n    filter-orientation=\"${args.filterOrientation}\">\n</ifx-table>`;\n    return table;\n  } else {\n    //sidebar\n    const filterAccordions = args.columnDefs.map(column => {\n      const uniqueColValues = [...new Set(args.rowData.map(row => row[column.field]))];\n      const filterOptions = uniqueColValues.map((option, index) => {\n        return `<ifx-list-entry slot=\"slot${index}\" label=\"${option}\" value=\"false\"></ifx-list-entry>`;\n      }).join('');\n\n      return `\n      <ifx-filter-accordion slot=\"filter-accordion\" filter-group-name=\"${column.field}\">\n        <ifx-list slot=\"list\" type=\"checkbox\" name=\"${column.field}\" max-visible-items=\"6\">\n          ${filterOptions}\n        </ifx-list>\n      </ifx-filter-accordion>\n    `;\n    }).join('');\n\n    //topbar\n    const filterComponents = args.columnDefs.map((column, index) => {\n      const uniqueColValues = [...new Set(args.rowData.map(row => row[column.field]))];\n      const options = uniqueColValues.map(option => ({\n        value: option,\n        label: option,\n        selected: false\n      }));\n\n      // Directly use JSON.stringify without replacing quotes\n      const optionsString = JSON.stringify(options);\n\n      return `\n        <ifx-set-filter slot=\"filter-component-${index + 1}\"\n            options='${optionsString}' \n            filter-label='${column.headerName}'\n            filter-name='${column.field}'\n            type='multi-select'\n            search-enabled='true'>\n          </ifx-set-filter>\n          `;\n    }).join('\\n');\n\n\n\n    const filterTypeGroupComponent = args.filterOrientation === 'sidebar'\n      ? `<ifx-filter-type-group slot=\"sidebar-filter\">\n        <div slot=\"filter-search\">\n          <ifx-filter-search filter-orientation=\"sidebar\" filter-name=\"search\"></ifx-filter-search>\n        </div>\n        ${filterAccordions}\n    </ifx-filter-type-group>`\n      :\n      `<ifx-filter-bar slot=\"topbar-filter\" max-shown-filters=\"3\">\n        <ifx-filter-search slot=\"filter-search\" filter-orientation=\"topbar\"></ifx-filter-search>\n        ${filterComponents}\n   </ifx-filter-bar>`;\n\n    const table = `<ifx-table\n    row-height=\"${args.rowHeight}\"\n    cols='${JSON.stringify(args.columnDefs)}'\n    rows='${JSON.stringify(args.rowData)}'\n    table-height=\"${args.tableHeight}\"\n    pagination=\"${args.pagination}\"\n    pagination-page-size=\"${args.paginationPageSize}\"\n    filter-orientation=\"${args.filterOrientation}\">\n    ${filterTypeGroupComponent}\n</ifx-table>`;\n\n    return table;\n  }\n};\n\n\n\nexport const Pagination = DefaultTemplate.bind({});\nPagination.args = {\n  pagination: true,\n  paginationPageSize: 10,\n  rowHeight: 'default',\n  columnDefs: columnDefs,\n  rowData: rowData,\n  filterOrientation: 'none',\n};\n\n\nconst CustomCellTemplate = (args) => {\n  const table = `\n    <ifx-table\n      row-height=\"${args.rowHeight}\"\n      cols='${JSON.stringify(args.columnDefs)}'\n      rows='${JSON.stringify(args.rowData)}'\n      table-height=\"${args.tableHeight}\"\n      pagination=\"${args.pagination}\"\n      pagination-page-size=\"${args.paginationPageSize}\"\n      filter-orientation=\"${args.filterOrientation}\">\n    </ifx-table>`;\n  return table;\n};\n\n\n\nexport const IncludesButtons = CustomCellTemplate.bind({});\nIncludesButtons.args = {\n  rowHeight: 'default',\n  columnDefs: columnDefsWithButtonCol,\n  rowData: rowDataWithButtonCol,\n  filterOrientation: 'none',\n  pagination: false,\n  paginationPageSize: 10,\n};\n\nexport const SidebarFilter = DefaultTemplate.bind({});\nSidebarFilter.args = {\n  rowHeight: 'default',\n  columnDefs: columnDefs,\n  rowData: rowData,\n  filterOrientation: 'sidebar',\n  buttonRendererOptions: {\n    onButtonClick: (params, event) => {\n      console.log('Button clicked:', params, event);\n    }\n  }\n};\n\nexport const TopbarFilter = DefaultTemplate.bind({});\nTopbarFilter.args = {\n  rowHeight: 'default',\n  columnDefs: columnDefs,\n  rowData: rowData,\n  filterOrientation: 'topbar',\n  buttonRendererOptions: {\n    onButtonClick: (params, event) => {\n      console.log('Button clicked:', params, event);\n    }\n  }\n};\n"]}

package/dist/collection/components/table-basic-version/table.stories.js

@@ -15,11 +15,14 @@ export default {
     // tags: ['autodocs'],
     args: {
         tableHeight: 'auto',
-        rowHeight: 40,
+        rowHeight: 'default',
     },
     argTypes: {
         tableHeight: {
+            description: 'Controls the height of the table.',
             table: {
+                category: 'ifx-table props',
+                defaultValue: { summary: 'auto' },
                 type: {
                     summary: 'Options',
                     detail: 'Default: "auto"\nExample for fixed height: "400px"',
@@ -27,11 +30,21 @@ export default {
             },
         },
         rowHeight: {
+            description: 'Controls the height of the rows.',
+            table: {
+                category: 'ifx-table props',
+                defaultValue: { summary: 'default' },
+                type: {
+                    summary: 'Options',
+                    detail: 'Default: 40\nCompact: 32\nOptions: 40, 32',
+                },
+            },
             options: ['compact', 'default'],
             control: { type: 'radio' },
         },
         cols: {
             table: {
+                category: 'ifx-table props',
                 type: {
                     summary: 'Column header options',
                     detail: 'Standard columns:\nheaderName: "Model", \nfield: "model", \nsortable: true (optional),\nsort: "desc" (optional) => descending sort (show icon)\nunSortIcon: true (optional) => unsorted (show icon)\n\nSpecial columns:\nheaderName: "",\nfield: "button"\nheaderName: "",\nfield: "link"',
@@ -40,6 +53,7 @@ export default {
         },
         rows: {
             table: {
+                category: 'ifx-table props',
                 type: {
                     summary: 'Row data options',
                     detail: 'Standard row values:\nmake: "Toyota", \nmodel: "Celica", \nprice: 35000 \n\nSpecial row values (incl buttons):\nmake: "Porsche",\nmodel: "Boxster",\nprice: "72000",\nbutton: { \ndisabled: false (optional),\nvariant: "outline" (optional)\nsize: "s" (optional),\ntext: "Button"\n...other ifx-button properties\n}',
@@ -57,6 +71,8 @@ export const Default = DefaultTemplate.bind({});
 Default.args = {
     cols: cols,
     rows: rows,
+    tableHeight: 'auto',
+    rowHeight: 'default',
 };
 export const FixedHeight = DefaultTemplate.bind({});
 FixedHeight.args = {

package/dist/collection/components/table-basic-version/table.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.stories.js","sourceRoot":"","sources":["../../../src/components/table-basic-version/table.stories.ts"],"names":[],"mappings":"AAAA,SAAS;AACT,MAAM,IAAI,GAAG;IACX,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE;IACrF,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE;IACzE,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IACvC,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;CACpC,CAAC;AACF,MAAM,IAAI,GAAG;IACX,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE;IAC1D,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE;IACxD,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE;CACpD,CAAC;AAEF,eAAe;IACb,KAAK,EAAE,0BAA0B;IACjC,sBAAsB;IACtB,IAAI,EAAE;QACJ,WAAW,EAAE,MAAM;QACnB,SAAS,EAAE,EAAE;KACd;IACD,QAAQ,EAAE;QACR,WAAW,EAAE;YACX,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,SAAS;oBAClB,MAAM,EAAE,oDAAoD;iBAC7D;aACF;SACF;QACD,SAAS,EAAE;YACT,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC;YAC/B,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;QACD,IAAI,EAAE;YACJ,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,2RAA2R;iBAC9R;aACF;SACF;QACD,IAAI,EAAE;YACJ,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,kBAAkB;oBAC3B,MAAM,EACJ,wTAAwT;iBAC3T;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC;QACxB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;QACzB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;gBACjB,IAAI,CAAC,WAAW;mBACb,CAAC;AAEpB,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,IAAI;IACV,IAAI,EAAE,IAAI;CACX,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACpD,WAAW,CAAC,IAAI,GAAG;IACjB,WAAW,EAAE,OAAO;IACpB,IAAI,EAAE,IAAI;IACV,IAAI,EAAE,IAAI;CACX,CAAC","sourcesContent":["//default\nconst cols = [\n  { headerName: 'Make', field: 'make', sortable: true, sort: 'desc', unSortIcon: true },\n  { headerName: 'Model', field: 'model', sortable: true, unSortIcon: true },\n  { headerName: 'Price', field: 'price' },\n  { headerName: 'Age', field: 'age' },\n];\nconst rows = [\n  { make: 'Toyota', model: 'Celica', price: 35000, age: 10 },\n  { make: 'Ford', model: 'Mondeo', price: 32000, age: 12 },\n  { make: 'Porsche', model: 'Boxster', price: 72000 },\n];\n\nexport default {\n  title: 'Components/Table (basic)',\n  // tags: ['autodocs'],\n  args: {\n    tableHeight: 'auto',\n    rowHeight: 40,\n  },\n  argTypes: {\n    tableHeight: {\n      table: {\n        type: {\n          summary: 'Options',\n          detail: 'Default: \"auto\"\\nExample for fixed height: \"400px\"',\n        },\n      },\n    },\n    rowHeight: {\n      options: ['compact', 'default'],\n      control: { type: 'radio' },\n    },\n    cols: {\n      table: {\n        type: {\n          summary: 'Column header options',\n          detail:\n            'Standard columns:\\nheaderName: \"Model\", \\nfield: \"model\", \\nsortable: true (optional),\\nsort: \"desc\" (optional) => descending sort (show icon)\\nunSortIcon: true (optional) => unsorted (show icon)\\n\\nSpecial columns:\\nheaderName: \"\",\\nfield: \"button\"\\nheaderName: \"\",\\nfield: \"link\"',\n        },\n      },\n    },\n    rows: {\n      table: {\n        type: {\n          summary: 'Row data options',\n          detail:\n            'Standard row values:\\nmake: \"Toyota\", \\nmodel: \"Celica\", \\nprice: 35000 \\n\\nSpecial row values (incl buttons):\\nmake: \"Porsche\",\\nmodel: \"Boxster\",\\nprice: \"72000\",\\nbutton: { \\ndisabled: false (optional),\\nvariant: \"outline\" (optional)\\nsize: \"s\" (optional),\\ntext: \"Button\"\\n...other ifx-button properties\\n}',\n        },\n      },\n    },\n  },\n};\n\nconst DefaultTemplate = args => `<ifx-basic-table \ncols='${JSON.stringify(args.cols)}' \nrows='${JSON.stringify(args.rows)}'\ntable-height='${args.tableHeight}'>\n</ifx-basic-table>`;\n\nexport const Default = DefaultTemplate.bind({});\nDefault.args = {\n  cols: cols,\n  rows: rows,\n};\n\nexport const FixedHeight = DefaultTemplate.bind({});\nFixedHeight.args = {\n  tableHeight: '400px',\n  cols: cols,\n  rows: rows,\n};\n"]}
+{"version":3,"file":"table.stories.js","sourceRoot":"","sources":["../../../src/components/table-basic-version/table.stories.ts"],"names":[],"mappings":"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","sourcesContent":["//default\nconst cols = [\n  { headerName: 'Make', field: 'make', sortable: true, sort: 'desc', unSortIcon: true },\n  { headerName: 'Model', field: 'model', sortable: true, unSortIcon: true },\n  { headerName: 'Price', field: 'price' },\n  { headerName: 'Age', field: 'age' },\n];\nconst rows = [\n  { make: 'Toyota', model: 'Celica', price: 35000, age: 10 },\n  { make: 'Ford', model: 'Mondeo', price: 32000, age: 12 },\n  { make: 'Porsche', model: 'Boxster', price: 72000 },\n];\n\nexport default {\n  title: 'Components/Table (basic)',\n  // tags: ['autodocs'],\n  args: {\n    tableHeight: 'auto',\n    rowHeight: 'default',\n  },\n  argTypes: {\n    tableHeight: {\n      description: 'Controls the height of the table.',\n      table: {\n        category: 'ifx-table props',\n        defaultValue: { summary: 'auto' },\n        type: {\n          summary: 'Options',\n          detail: 'Default: \"auto\"\\nExample for fixed height: \"400px\"',\n        },\n      },\n    },\n    rowHeight: {\n      description: 'Controls the height of the rows.',\n      table: {\n        category: 'ifx-table props',\n        defaultValue: { summary: 'default' },\n        type: {\n          summary: 'Options',\n          detail: 'Default: 40\\nCompact: 32\\nOptions: 40, 32',\n        },\n      },\n      options: ['compact', 'default'],\n      control: { type: 'radio' },\n    },\n    cols: {\n      table: {\n        category: 'ifx-table props',\n        type: {\n          summary: 'Column header options',\n          detail:\n            'Standard columns:\\nheaderName: \"Model\", \\nfield: \"model\", \\nsortable: true (optional),\\nsort: \"desc\" (optional) => descending sort (show icon)\\nunSortIcon: true (optional) => unsorted (show icon)\\n\\nSpecial columns:\\nheaderName: \"\",\\nfield: \"button\"\\nheaderName: \"\",\\nfield: \"link\"',\n        },\n      },\n    },\n    rows: {\n      table: {\n        category: 'ifx-table props',\n        type: {\n          summary: 'Row data options',\n          detail:\n            'Standard row values:\\nmake: \"Toyota\", \\nmodel: \"Celica\", \\nprice: 35000 \\n\\nSpecial row values (incl buttons):\\nmake: \"Porsche\",\\nmodel: \"Boxster\",\\nprice: \"72000\",\\nbutton: { \\ndisabled: false (optional),\\nvariant: \"outline\" (optional)\\nsize: \"s\" (optional),\\ntext: \"Button\"\\n...other ifx-button properties\\n}',\n        },\n      },\n    },\n  },\n};\n\nconst DefaultTemplate = args => `<ifx-basic-table \ncols='${JSON.stringify(args.cols)}' \nrows='${JSON.stringify(args.rows)}'\ntable-height='${args.tableHeight}'>\n</ifx-basic-table>`;\n\nexport const Default = DefaultTemplate.bind({});\nDefault.args = {\n  cols: cols,\n  rows: rows,\n  tableHeight: 'auto',\n  rowHeight: 'default',\n};\n\nexport const FixedHeight = DefaultTemplate.bind({});\nFixedHeight.args = {\n  tableHeight: '400px',\n  cols: cols,\n  rows: rows,\n};\n"]}