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

package/dist/collection/components/select/multi-select/multiselect.stories.js

@@ -53,7 +53,9 @@ export default {
     title: 'Components/Select/Multi Select',
     // tags: ['autodocs'],
     args: {
+        name: 'multiselect',
         size: 'm',
+        disabled: false,
         batchSize: 10,
         maxItemCount: 10,
         showSearch: true,
@@ -65,6 +67,7 @@ export default {
     },
     argTypes: {
         size: {
+            description: 'Size of the input field.',
             options: {
                 'small (36px)': 's',
                 'medium (40px)': 'm',
@@ -72,59 +75,181 @@ export default {
             control: {
                 type: 'radio',
             },
+            table: {
+                category: 'ifx-multiselect props',
+                defaultValue: {
+                    summary: 'medium (40px)',
+                },
+                type: {
+                    summary: '36px | 40px',
+                },
+            },
+        },
+        disabled: {
+            description: 'Disable the input field.',
+            options: [true, false],
+            control: { type: 'boolean' },
+            table: {
+                category: 'ifx-multiselect props',
+                defaultValue: {
+                    summary: 'false',
+                },
+                type: {
+                    summary: 'boolean',
+                },
+            },
+        },
+        name: {
+            description: `For a <*form*> element, the name attribute is  used as a reference when the data is submitted.`,
+            control: 'text',
+            table: {
+                category: 'ifx-multiselect props',
+                type: {
+                    summary: 'string',
+                },
+            },
         },
         batchSize: {
-            description: 'Batch size used during lazy loading options',
+            description: 'Batch size used during lazy loading options.',
             control: {
                 type: 'number',
             },
+            table: {
+                category: 'ifx-multiselect props',
+                defaultValue: {
+                    summary: '50',
+                },
+                type: {
+                    summary: 'number',
+                },
+            },
         },
         maxItemCount: {
             control: { type: 'number' },
-            description: 'Number of maximum selectable items',
+            description: 'Number of maximum selectable items.',
+            table: {
+                category: 'ifx-multiselect props',
+                type: {
+                    summary: 'number'
+                }
+            }
         },
         showSearch: {
+            description: 'Show a search input.',
             options: [true, false],
             control: { type: 'radio' },
+            table: {
+                category: 'ifx-multiselect props',
+                defaultValue: {
+                    summary: 'true',
+                },
+                type: {
+                    summary: 'boolean',
+                },
+            },
         },
         showSelectAll: {
-            description: 'Show a checkbox to select all options',
+            description: 'Show a checkbox to select all options.',
             options: [true, false],
             control: { type: 'radio' },
+            table: {
+                category: 'ifx-multiselect props',
+                defaultValue: {
+                    summary: 'true',
+                },
+                type: {
+                    summary: 'boolean',
+                },
+            },
         },
         error: {
+            description: 'Show error state.',
             options: [true, false],
             control: { type: 'radio' },
+            table: {
+                category: 'ifx-multiselect props',
+                defaultValue: {
+                    summary: 'false',
+                },
+                type: {
+                    summary: 'boolean',
+                },
+            },
         },
         errorMessage: {
             control: 'text',
+            description: 'Error message to display.',
+            table: {
+                category: 'ifx-multiselect props',
+                defaultValue: {
+                    summary: 'Error',
+                },
+                type: {
+                    summary: 'string',
+                },
+            },
         },
         label: {
+            description: 'Label over the input field.',
             control: 'text',
+            table: {
+                category: 'ifx-multiselect props',
+                type: {
+                    summary: 'string',
+                },
+            },
         },
         placeholder: {
+            description: 'Label inside the input field.',
             control: 'text',
+            table: {
+                category: 'ifx-multiselect props',
+                type: {
+                    summary: 'string',
+                },
+            },
         },
         options: {
-            description: 'Takes an array of objects in the following format',
+            description: 'Takes an array of objects in the following format.',
+            table: {
+                category: 'ifx-multiselect props',
+                type: {
+                    summary: 'Details',
+                    detail: `'Array<{ value: string, label: string, selected: boolean, children?: Array<{ value: string, label: string, selected: boolean }> }>'`,
+                },
+            },
         },
         ifxSelect: {
             action: 'ifxSelect',
-            description: 'Custom event emitted when item is selected or unselected',
+            description: 'Custom event emitted when item is selected or unselected.',
             table: {
+                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
                     detail: 'React: onIfxSelect={handleInput}\nVue:@ifxSelect="handleInput"\nAngular:(ifxSelect)="handleInput()"\nVanillaJs:.addEventListener("ifxSelect", (event) => {//handle input});',
                 },
             },
         },
+        ifxOpen: {
+            action: 'ifxOpen',
+            description: 'Custom event emitted when multiselect is opened.',
+            table: {
+                category: 'custom events',
+                type: {
+                    summary: 'Framework integration',
+                    detail: 'React: onIfxOpen={handleChange}\nVue:@ifxOpen="handleChange"\nAngular:(ifxOpen)="handleChange()"\nVanillaJs:.addEventListener("ifxOpen", (event) => {//handle change});',
+                },
+            },
+        }
     },
 };
 const Template = args => {
     const template = `<ifx-multiselect 
+  name='${args.name}'
   options='${JSON.stringify(args.options)}' 
   batch-size='${args.batchSize}'
   size='${args.size}'
+  disabled='${args.disabled}'
   max-item-count='${args.maxItemCount}'
   error='${args.error}'
   error-message='${args.errorMessage}'
@@ -135,6 +260,7 @@ const Template = args => {
 </ifx-multiselect>`;
     setTimeout(() => {
         document.querySelector('ifx-multiselect').addEventListener('ifxSelect', action('ifxSelect'));
+        document.querySelector('ifx-multiselect').addEventListener('ifxOpen', action('ifxOpen'));
     }, 0);
     return template;
 };

package/dist/collection/components/select/multi-select/multiselect.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"multiselect.stories.js","sourceRoot":"","sources":["../../../../src/components/select/multi-select/multiselect.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nconst options = [\n  {\n    value: 'a',\n    label: 'Option a',\n    selected: false,\n  },\n  {\n    value: 'b',\n    label: 'Option b',\n    selected: false,\n  },\n  {\n    value: 'c',\n    label: 'Option c',\n    selected: false,\n    children: [\n      {\n        value: 'z1',\n        label: 'Option c1',\n        selected: false,\n      },\n      {\n        value: 'z2',\n        label: 'Option c2',\n        selected: false,\n      },\n    ],\n  },\n];\n\nconst longOptions = [];\nfor (let i=1; i<=50; i++) {\n  let children = undefined;\n  if (i % 3 == 0) {\n    children = [{\n      \"value\":  `${i}.1`,\n      \"label\": `Option ${i}.1`,\n      \"selected\": i % 2 == 0 ? true : false\n    },{\n      \"value\": `${i}.2`,\n      \"label\": `Option ${i}.2`,\n      \"selected\": i % 4 == 0 ? true : false\n    }];\n  }\n  longOptions.push({\n    \"value\": i,\n    \"label\": `Option ${i}`,\n    \"selected\": i % 2 == 0 ? true : false,\n    \"children\": children\n  })\n}\n\n\nexport default {\n  title: 'Components/Select/Multi Select',\n  // tags: ['autodocs'],\n  args: {\n    size: 'm',\n    batchSize: 10,\n    maxItemCount: 10,\n    showSearch: true,\n    showSelectAll: true,\n    error: false,\n    errorMessage: 'Some error',\n    label: '',\n    placeholder: 'Placeholder',\n  },\n  argTypes: {\n    size: {\n      options: {\n        'small (36px)': 's',\n        'medium (40px)': 'm',\n      },\n      control: {\n        type: 'radio',\n      },\n    },\n    batchSize: {\n      description: 'Batch size used during lazy loading options',\n      control: {\n        type: 'number',\n      },\n    },\n    maxItemCount: {\n      control: { type: 'number' },\n      description: 'Number of maximum selectable items',\n    },\n    showSearch: {\n      options: [true, false],\n      control: { type: 'radio' },\n    },\n    showSelectAll: {\n      description: 'Show a checkbox to select all options',\n      options: [true, false],\n      control: { type: 'radio' },\n    },\n    error: {\n      options: [true, false],\n      control: { type: 'radio' },\n    },\n    errorMessage: {\n      control: 'text',\n    },\n    label: {\n      control: 'text',\n    },\n    placeholder: {\n      control: 'text',\n    },\n    options: {\n      description: 'Takes an array of objects in the following format',\n    },\n    ifxSelect: {\n      action: 'ifxSelect',\n      description: 'Custom event emitted when item is selected or unselected',\n      table: {\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxSelect={handleInput}\\nVue:@ifxSelect=\"handleInput\"\\nAngular:(ifxSelect)=\"handleInput()\"\\nVanillaJs:.addEventListener(\"ifxSelect\", (event) => {//handle input});',\n        },\n      },\n    },\n  },\n};\n\nconst Template = args => {\n  const template = `<ifx-multiselect \n  options='${JSON.stringify(args.options)}' \n  batch-size='${args.batchSize}'\n  size='${args.size}'\n  max-item-count='${args.maxItemCount}'\n  error='${args.error}'\n  error-message='${args.errorMessage}'\n  label='${args.label}'\n  placeholder='${args.placeholder}'\n  show-search='${args.showSearch}'\n  show-select-all='${args.showSelectAll}'>\n</ifx-multiselect>`;\n\n  setTimeout(() => {\n    document.querySelector('ifx-multiselect').addEventListener('ifxSelect', action('ifxSelect'));\n  }, 0);\n\n  return template;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  options: options,\n};\n\nexport const WithLazyLoading = Template.bind({});\nWithLazyLoading.args = {\n  options: longOptions,\n  batchSize: 5,\n  maxItemCount: undefined\n};\n"]}
+{"version":3,"file":"multiselect.stories.js","sourceRoot":"","sources":["../../../../src/components/select/multi-select/multiselect.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nconst options = [\n  {\n    value: 'a',\n    label: 'Option a',\n    selected: false,\n  },\n  {\n    value: 'b',\n    label: 'Option b',\n    selected: false,\n  },\n  {\n    value: 'c',\n    label: 'Option c',\n    selected: false,\n    children: [\n      {\n        value: 'z1',\n        label: 'Option c1',\n        selected: false,\n      },\n      {\n        value: 'z2',\n        label: 'Option c2',\n        selected: false,\n      },\n    ],\n  },\n];\n\nconst longOptions = [];\nfor (let i = 1; i <= 50; i++) {\n  let children = undefined;\n  if (i % 3 == 0) {\n    children = [{\n      \"value\": `${i}.1`,\n      \"label\": `Option ${i}.1`,\n      \"selected\": i % 2 == 0 ? true : false\n    }, {\n      \"value\": `${i}.2`,\n      \"label\": `Option ${i}.2`,\n      \"selected\": i % 4 == 0 ? true : false\n    }];\n  }\n  longOptions.push({\n    \"value\": i,\n    \"label\": `Option ${i}`,\n    \"selected\": i % 2 == 0 ? true : false,\n    \"children\": children\n  })\n}\n\nexport default {\n  title: 'Components/Select/Multi Select',\n  // tags: ['autodocs'],\n  args: {\n    name: 'multiselect',\n    size: 'm',\n    disabled: false,\n    batchSize: 10,\n    maxItemCount: 10,\n    showSearch: true,\n    showSelectAll: true,\n    error: false,\n    errorMessage: 'Some error',\n    label: '',\n    placeholder: 'Placeholder',\n  },\n  argTypes: {\n    size: {\n      description: 'Size of the input field.',\n      options: {\n        'small (36px)': 's',\n        'medium (40px)': 'm',\n      },\n      control: {\n        type: 'radio',\n      },\n      table: {\n        category: 'ifx-multiselect props',\n        defaultValue: {\n          summary: 'medium (40px)',\n        },\n        type: {\n          summary: '36px | 40px',\n        },\n      },\n    },\n    disabled: {\n      description: 'Disable the input field.',\n      options: [true, false],\n      control: { type: 'boolean' },\n      table: {\n        category: 'ifx-multiselect props',\n        defaultValue: {\n          summary: 'false',\n        },\n        type: {\n          summary: 'boolean',\n        },\n      },\n    },\n    name: {\n      description: `For a <*form*> element, the name attribute is  used as a reference when the data is submitted.`,\n      control: 'text',\n      table: {\n        category: 'ifx-multiselect props',\n        type: {\n          summary: 'string',\n        },\n      },\n    },\n    batchSize: {\n      description: 'Batch size used during lazy loading options.',\n      control: {\n        type: 'number',\n      },\n      table: {\n        category: 'ifx-multiselect props',\n        defaultValue: {\n          summary: '50',\n        },\n        type: {\n          summary: 'number',\n        },\n      },\n    },\n    maxItemCount: {\n      control: { type: 'number' },\n      description: 'Number of maximum selectable items.',\n      table: {\n        category: 'ifx-multiselect props',\n        type: {\n          summary: 'number'\n        }\n      }\n    },\n    showSearch: {\n      description: 'Show a search input.',\n      options: [true, false],\n      control: { type: 'radio' },\n      table: {\n        category: 'ifx-multiselect props',\n        defaultValue: {\n          summary: 'true',\n        },\n        type: {\n          summary: 'boolean',\n        },\n      },\n    },\n    showSelectAll: {\n      description: 'Show a checkbox to select all options.',\n      options: [true, false],\n      control: { type: 'radio' },\n      table: {\n        category: 'ifx-multiselect props',\n        defaultValue: {\n          summary: 'true',\n        },\n        type: {\n          summary: 'boolean',\n        },\n      },\n    },\n    error: {\n      description: 'Show error state.',\n      options: [true, false],\n      control: { type: 'radio' },\n      table: {\n        category: 'ifx-multiselect props',\n        defaultValue: {\n          summary: 'false',\n        },\n        type: {\n          summary: 'boolean',\n        },\n      },\n    },\n    errorMessage: {\n      control: 'text',\n      description: 'Error message to display.',\n      table: {\n        category: 'ifx-multiselect props',\n        defaultValue: {\n          summary: 'Error',\n        },\n        type: {\n          summary: 'string',\n        },\n      },\n    },\n    label: {\n      description: 'Label over the input field.',\n      control: 'text',\n      table: {\n        category: 'ifx-multiselect props',\n        type: {\n          summary: 'string',\n        },\n      },\n    },\n    placeholder: {\n      description: 'Label inside the input field.',\n      control: 'text',\n      table: {\n        category: 'ifx-multiselect props',\n        type: {\n          summary: 'string',\n        },\n      },\n    },\n    options: {\n      description: 'Takes an array of objects in the following format.',\n      table: {\n        category: 'ifx-multiselect props',\n        type: {\n          summary: 'Details',\n          detail: `'Array<{ value: string, label: string, selected: boolean, children?: Array<{ value: string, label: string, selected: boolean }> }>'`,\n        },\n      },\n    },\n    ifxSelect: {\n      action: 'ifxSelect',\n      description: 'Custom event emitted when item is selected or unselected.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxSelect={handleInput}\\nVue:@ifxSelect=\"handleInput\"\\nAngular:(ifxSelect)=\"handleInput()\"\\nVanillaJs:.addEventListener(\"ifxSelect\", (event) => {//handle input});',\n        },\n      },\n    },\n    ifxOpen: {\n      action: 'ifxOpen',\n      description: 'Custom event emitted when multiselect is opened.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxOpen={handleChange}\\nVue:@ifxOpen=\"handleChange\"\\nAngular:(ifxOpen)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxOpen\", (event) => {//handle change});',\n        },\n      },\n\n    }\n  },\n};\n\nconst Template = args => {\n  const template = `<ifx-multiselect \n  name='${args.name}'\n  options='${JSON.stringify(args.options)}' \n  batch-size='${args.batchSize}'\n  size='${args.size}'\n  disabled='${args.disabled}'\n  max-item-count='${args.maxItemCount}'\n  error='${args.error}'\n  error-message='${args.errorMessage}'\n  label='${args.label}'\n  placeholder='${args.placeholder}'\n  show-search='${args.showSearch}'\n  show-select-all='${args.showSelectAll}'>\n</ifx-multiselect>`;\n\n  setTimeout(() => {\n    document.querySelector('ifx-multiselect').addEventListener('ifxSelect', action('ifxSelect'));\n    document.querySelector('ifx-multiselect').addEventListener('ifxOpen', action('ifxOpen'));\n  }, 0);\n\n  return template;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  options: options,\n};\n\nexport const WithLazyLoading = Template.bind({});\nWithLazyLoading.args = {\n  options: longOptions,\n  batchSize: 5,\n  maxItemCount: undefined\n};\n"]}

package/dist/collection/components/select/single-select/select.stories.js

@@ -22,6 +22,7 @@ export default {
     title: 'Components/Select/Single Select',
     // tags: ['autodocs'],
     args: {
+        label: '',
         size: 'm',
         showSearch: true,
         searchPlaceholderValue: 'Search...',
@@ -29,7 +30,6 @@ export default {
         placeholderValue: 'Placeholder',
         error: false,
         errorMessage: 'Some error',
-        label: '',
         disabled: false,
         // type: 'single', //for later implementation
     },
@@ -39,51 +39,108 @@ export default {
         //   control: false,
         // },
         size: {
-            options: {
-                'small (36px)': 's',
-                'medium (40px)': 'm',
-            },
-            control: {
-                type: 'radio',
-            },
+            description: 'Specifies the size. Options: small - s (36px) medium - m (40px).',
+            control: 'radio',
+            options: ['s', 'm'],
+            table: {
+                category: 'ifx-select props',
+                defaultValue: {
+                    summary: 'm'
+                }
+            }
         },
         placeholder: {
-            options: [true, false],
-            control: { type: 'radio' },
+            description: 'Determines whether a placeholder is displayed or not.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-select props',
+                defaultValue: {
+                    summary: true
+                }
+            }
+        },
+        placeholderValue: {
+            description: 'Sets the text displayed as the placeholder when placeholder is set to true.',
+            table: {
+                category: 'ifx-select props'
+            }
         },
-        placeholderValue: { control: 'text' },
-        // value: { for later implementation
-        //   control: 'text',
-        //   description: 'Programmatically set the selected value',
-        // },
         error: {
-            options: [true, false],
-            control: { type: 'radio' },
+            description: 'Displays an error state.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-select props',
+                defaultValue: {
+                    summary: false
+                }
+            }
+        },
+        errorMessage: {
+            description: 'Message displayed when error is set to true.',
+            table: {
+                category: 'ifx-select props'
+            }
+        },
+        label: {
+            description: 'Sets the label.',
+            table: {
+                category: 'ifx-select props'
+            }
         },
-        errorMessage: { control: 'text' },
-        label: { control: 'text' },
         disabled: {
-            options: [true, false],
-            control: { type: 'radio' },
+            description: 'Disables the dropdown.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-select props',
+                defaultValue: {
+                    summary: false
+                }
+            }
         },
         showSearch: {
-            options: [true, false],
-            control: { type: 'radio' },
+            description: 'Enables a search bar inside the dropdown to filter options.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-select props',
+                defaultValue: {
+                    summary: true
+                }
+            }
+        },
+        searchPlaceholderValue: {
+            description: 'Placeholder text for the search input field.',
+            table: {
+                category: 'ifx-select props'
+            }
         },
-        searchPlaceholderValue: { control: { type: 'text' } },
         options: {
-            description: 'Takes an array of objects in the following format',
+            description: 'Takes an array of objects in the following format.',
+            table: {
+                category: 'ifx-select props'
+            }
         },
         ifxSelect: {
             action: 'ifxSelect',
-            description: 'Custom event emitted when item is selected',
+            description: 'Custom event emitted when item is selected.',
             table: {
+                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
                     detail: 'React: onIfxSelect={handleInput}\nVue:@ifxSelect="handleInput"\nAngular:(ifxSelect)="handleInput()"\nVanillaJs:.addEventListener("ifxSelect", (event) => {//handle input});',
                 },
             },
         },
+        ifxInput: {
+            action: 'ifxInput',
+            description: 'A custom event *ifxInput* is emitted immediately after the value of *Search* changes.',
+            table: {
+                category: 'custom events',
+                type: {
+                    summary: 'Framework integration',
+                    detail: 'React: onIfxInput={handleInput}\nVue:@ifxInput="handleInput"\nAngular:(ifxInput)="handleInput()"\nVanillaJs:.addEventListener("ifxInput", (event) => {//handle input});',
+                },
+            },
+        },
     },
 };
 const DefaultTemplate = args => {

package/dist/collection/components/select/single-select/select.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.stories.js","sourceRoot":"","sources":["../../../../src/components/select/single-select/select.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\n\n//use string instead of json format here to avoid ugly formatting in the storybook code snippet\n// let options = \"[{'value': 'a','label': 'option a','selected': 'false'},{'value': 'b','label': 'option b','selected': 'false'},{'value': 'c','label': 'option c','selected': 'false'}]\"\nconst options = [\n  {\n    value: 'a',\n    label: 'option a',\n    selected: false,\n  },\n  {\n    value: 'b',\n    label: 'option b',\n    selected: false,\n  },\n  {\n    value: 'c',\n    label: 'option c',\n    selected: false,\n  },\n];\n\nexport default {\n  title: 'Components/Select/Single Select',\n  // tags: ['autodocs'],\n  args: {\n    size: 'm',\n    showSearch: true,\n    searchPlaceholderValue: 'Search...',\n    placeholder: true,\n    placeholderValue: 'Placeholder',\n    error: false,\n    errorMessage: 'Some error',\n    label: '',\n    disabled: false,\n    // type: 'single', //for later implementation\n  },\n\n  argTypes: {\n    // type: { //for later implementation\n    //   // control: { type: 'radio' },\n    //   control: false,\n    // },\n    size: {\n      options: {\n        'small (36px)': 's',\n        'medium (40px)': 'm',\n      },\n      control: {\n        type: 'radio',\n      },\n    },\n    placeholder: {\n      options: [true, false],\n      control: { type: 'radio' },\n    },\n    placeholderValue: { control: 'text' },\n    // value: { for later implementation\n    //   control: 'text',\n    //   description: 'Programmatically set the selected value',\n    // },\n    error: {\n      options: [true, false],\n      control: { type: 'radio' },\n    },\n    errorMessage: { control: 'text' },\n    label: { control: 'text' },\n    disabled: {\n      options: [true, false],\n      control: { type: 'radio' },\n    },\n    showSearch: {\n      options: [true, false],\n      control: { type: 'radio' },\n    },\n    searchPlaceholderValue: { control: { type: 'text' } },\n\n    options: {\n      description: 'Takes an array of objects in the following format',\n    },\n    ifxSelect: {\n      action: 'ifxSelect',\n      description: 'Custom event emitted when item is selected',\n      table: {\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxSelect={handleInput}\\nVue:@ifxSelect=\"handleInput\"\\nAngular:(ifxSelect)=\"handleInput()\"\\nVanillaJs:.addEventListener(\"ifxSelect\", (event) => {//handle input});',\n        },\n      },\n    },\n  },\n};\n\nconst DefaultTemplate = args => {\n  const template = `<ifx-select \n  size='${args.size}'\n  placeholder='${args.placeholder}'\n  show-search='${args.showSearch}'\n  search-placeholder-value='${args.searchPlaceholderValue}'\n  disabled='${args.disabled}'\n  error='${args.error}'\n  error-message='${args.errorMessage}'\n  label='${args.label}'\n  placeholder-value='${args.placeholderValue}'\n  options='${JSON.stringify(args.options)}' >\n </ifx-select>`;\n  setTimeout(() => {\n    document.querySelector('ifx-select')?.addEventListener('ifxSelect', action('ifxSelect'));\n    document.querySelector('ifx-select')?.addEventListener('ifxInput', action('ifxInput'));\n  }, 0);\n\n  return template;\n};\n\nexport const Single = DefaultTemplate.bind({});\nSingle.args = {\n  // type: 'single',\n  options: options,\n};\n\n// export const Text = DefaultTemplate.bind({});\n// Text.args = {\n//   type: 'text',\n//   name: 'text',\n//   value: 'Placeholder',\n//   allowHTML: true,\n//   delimiter: ',',\n//   editItems: true,\n//   maxItemCount: 5,\n// };\n\n// export const Text = DefaultTemplate.bind({});\n// Text.args = {\n//   type: 'multiple',\n//   name: 'multiple',\n//   choices: 'Choice 1, Choice 2, Choice 3',\n// };\n\n// export const SingleWithIcon = DefaultTemplate.bind({});\n// SingleWithIcon.args = {\n//   type: 'single',\n//   choices: \"Choice 1, Choice 2 <ifx-icon icon='check16'></ifx-icon>, Choice 3 <ifx-icon icon='check16'></ifx-icon>\",\n// };\n\n// export const MultiselectCombobox = DefaultTemplate.bind({});\n// MultiselectCombobox.args = {\n//   type: 'multiple',\n//   // removeItemButton: true,\n// };\n"]}
+{"version":3,"file":"select.stories.js","sourceRoot":"","sources":["../../../../src/components/select/single-select/select.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\n\n//use string instead of json format here to avoid ugly formatting in the storybook code snippet\n// let options = \"[{'value': 'a','label': 'option a','selected': 'false'},{'value': 'b','label': 'option b','selected': 'false'},{'value': 'c','label': 'option c','selected': 'false'}]\"\nconst options = [\n  {\n    value: 'a',\n    label: 'option a',\n    selected: false,\n  },\n  {\n    value: 'b',\n    label: 'option b',\n    selected: false,\n  },\n  {\n    value: 'c',\n    label: 'option c',\n    selected: false,\n  },\n];\n\nexport default {\n  title: 'Components/Select/Single Select',\n  // tags: ['autodocs'],\n  args: {\n    label: '',\n    size: 'm',\n    showSearch: true,\n    searchPlaceholderValue: 'Search...',\n    placeholder: true,\n    placeholderValue: 'Placeholder',\n    error: false,\n    errorMessage: 'Some error',\n    disabled: false,\n    // type: 'single', //for later implementation\n  },\n\n  argTypes: {\n    // type: { //for later implementation\n    //   // control: { type: 'radio' },\n    //   control: false,\n    // },\n    size: {\n      description: 'Specifies the size. Options: small - s (36px) medium - m (40px).',\n      control: 'radio',\n      options: ['s', 'm'],\n      table: {\n        category: 'ifx-select props',\n        defaultValue: {\n          summary: 'm'\n        }\n      }\n    },\n    placeholder: {\n      description: 'Determines whether a placeholder is displayed or not.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-select props',\n        defaultValue: {\n          summary: true\n        }\n      }\n    },\n    placeholderValue: {\n      description: 'Sets the text displayed as the placeholder when placeholder is set to true.',\n      table: {\n        category: 'ifx-select props'\n      }\n    },\n    error: {\n      description: 'Displays an error state.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-select props',\n        defaultValue: {\n          summary: false\n        }\n      }\n    },\n    errorMessage: {\n      description: 'Message displayed when error is set to true.',\n      table: {\n        category: 'ifx-select props'\n      }\n    },\n    label: {\n      description: 'Sets the label.',\n      table: {\n        category: 'ifx-select props'\n      }\n    },\n    disabled: {\n      description: 'Disables the dropdown.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-select props',\n        defaultValue: {\n          summary: false\n        }\n      }\n    },\n    showSearch: {\n      description: 'Enables a search bar inside the dropdown to filter options.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-select props',\n        defaultValue: {\n          summary: true\n        }\n      }\n    },\n    searchPlaceholderValue: {\n      description: 'Placeholder text for the search input field.',\n      table: {\n        category: 'ifx-select props'\n      }\n    },\n    options: {\n      description: 'Takes an array of objects in the following format.',\n      table: {\n        category: 'ifx-select props'\n      }\n    },\n    ifxSelect: {\n      action: 'ifxSelect',\n      description: 'Custom event emitted when item is selected.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxSelect={handleInput}\\nVue:@ifxSelect=\"handleInput\"\\nAngular:(ifxSelect)=\"handleInput()\"\\nVanillaJs:.addEventListener(\"ifxSelect\", (event) => {//handle input});',\n        },\n      },\n    },\n    ifxInput: {\n      action: 'ifxInput',\n      description: 'A custom event *ifxInput* is emitted immediately after the value of *Search* changes.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxInput={handleInput}\\nVue:@ifxInput=\"handleInput\"\\nAngular:(ifxInput)=\"handleInput()\"\\nVanillaJs:.addEventListener(\"ifxInput\", (event) => {//handle input});',\n        },\n      },\n    },\n  },\n};\n\nconst DefaultTemplate = args => {\n  const template = `<ifx-select \n  size='${args.size}'\n  placeholder='${args.placeholder}'\n  show-search='${args.showSearch}'\n  search-placeholder-value='${args.searchPlaceholderValue}'\n  disabled='${args.disabled}'\n  error='${args.error}'\n  error-message='${args.errorMessage}'\n  label='${args.label}'\n  placeholder-value='${args.placeholderValue}'\n  options='${JSON.stringify(args.options)}' >\n </ifx-select>`;\n  setTimeout(() => {\n    document.querySelector('ifx-select')?.addEventListener('ifxSelect', action('ifxSelect'));\n    document.querySelector('ifx-select')?.addEventListener('ifxInput', action('ifxInput'));\n  }, 0);\n\n  return template;\n};\n\nexport const Single = DefaultTemplate.bind({});\nSingle.args = {\n  // type: 'single',\n  options: options,\n};\n\n// export const Text = DefaultTemplate.bind({});\n// Text.args = {\n//   type: 'text',\n//   name: 'text',\n//   value: 'Placeholder',\n//   allowHTML: true,\n//   delimiter: ',',\n//   editItems: true,\n//   maxItemCount: 5,\n// };\n\n// export const Text = DefaultTemplate.bind({});\n// Text.args = {\n//   type: 'multiple',\n//   name: 'multiple',\n//   choices: 'Choice 1, Choice 2, Choice 3',\n// };\n\n// export const SingleWithIcon = DefaultTemplate.bind({});\n// SingleWithIcon.args = {\n//   type: 'single',\n//   choices: \"Choice 1, Choice 2 <ifx-icon icon='check16'></ifx-icon>, Choice 3 <ifx-icon icon='check16'></ifx-icon>\",\n// };\n\n// export const MultiselectCombobox = DefaultTemplate.bind({});\n// MultiselectCombobox.args = {\n//   type: 'multiple',\n//   // removeItemButton: true,\n// };\n"]}

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

@@ -5,36 +5,120 @@ export default {
     component: 'ifx-slider',
     tags: ['autodocs'],
     argTypes: {
-        min: { control: 'number' },
-        max: { control: 'number' },
-        step: { control: 'number' },
-        type: { control: 'radio', options: ['single', 'double'] },
-        value: { control: 'number', if: { arg: 'type', eq: 'single' } },
-        minValueHandle: { control: 'number', if: { arg: 'type', eq: 'double' } },
-        maxValueHandle: { control: 'number', if: { arg: 'type', eq: 'double' } },
-        showPercentage: { control: 'boolean', if: { arg: 'type', eq: 'single' } },
-        disabled: { control: 'boolean' },
+        min: { control: 'number',
+            description: 'The minimum value of the slider.',
+            table: {
+                category: 'ifx-slider props',
+                defaultValue: { summary: '0' },
+                type: { summary: 'number' }
+            }
+        },
+        max: { control: 'number',
+            description: 'The maximum value of the slider.',
+            table: {
+                category: 'ifx-slider props',
+                defaultValue: { summary: '100' },
+                type: { summary: 'number' }
+            }
+        },
+        step: { control: 'number',
+            description: 'The step value of the slider.',
+            table: {
+                category: 'ifx-slider props',
+                defaultValue: { summary: '1' },
+                type: { summary: 'number' }
+            }
+        },
+        type: { control: 'radio', options: ['single', 'double'],
+            description: 'The type of the slider.',
+            table: {
+                category: 'ifx-slider props',
+                defaultValue: { summary: 'single' },
+                type: { summary: 'single | double' }
+            }
+        },
+        value: { control: 'number', if: { arg: 'type', eq: 'single' },
+            description: 'The current value of the slider.',
+            table: {
+                category: 'ifx-slider props',
+                type: { summary: 'number ' }
+            }
+        },
+        minValueHandle: { control: 'number', if: { arg: 'type', eq: 'double' },
+            description: 'The minimum value of the handle in double slider.',
+            table: {
+                category: 'ifx-slider props',
+                type: { summary: 'number' }
+            }
+        },
+        maxValueHandle: { control: 'number', if: { arg: 'type', eq: 'double' },
+            description: 'The maximum value of the handle in double slider.',
+            table: {
+                category: 'ifx-slider props',
+                type: { summary: 'number' }
+            },
+        },
+        showPercentage: {
+            control: 'boolean', if: { arg: 'type', eq: 'single' },
+            description: 'Show the percentage of the slider value.',
+            table: {
+                category: 'ifx-slider props',
+                defaultValue: { summary: 'false' },
+                type: { summary: 'boolean' }
+            }
+        },
+        disabled: { control: 'boolean',
+            description: 'Disable the slider.',
+            table: {
+                category: 'ifx-slider props',
+                defaultValue: { summary: 'false' },
+                type: { summary: 'boolean' }
+            }
+        },
         leftIcon: {
             options: Object.values(icons).map(i => i['name']),
             control: { type: 'select' },
+            description: 'The icon on the left of the slider.',
+            table: {
+                category: 'ifx-slider props',
+                type: { summary: 'string' }
+            }
         },
         rightIcon: {
             options: Object.values(icons).map(i => i['name']),
             control: { type: 'select' },
+            description: 'The icon on the right of the slider.',
+            table: {
+                category: 'ifx-slider props',
+                type: { summary: 'string' }
+            }
+        },
+        leftText: { control: 'text',
+            description: 'The text on the left side.',
+            table: {
+                category: 'ifx-slider props',
+                type: { summary: 'string' }
+            }
+        },
+        rightText: { control: 'text',
+            description: 'The text on the right side.',
+            table: {
+                category: 'ifx-slider props',
+                type: { summary: 'string' }
+            }
         },
-        leftText: { control: 'text' },
-        rightText: { control: 'text' },
         ifxChange: {
             action: 'ifxChange',
-            description: 'Custom event emitted on input change',
+            description: 'Custom event emitted on input 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});',
                 },
             },
         },
-    },
+    }
 };
 const Template = args => {
     const sliderElement = document.createElement('ifx-slider');

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

@@ -1 +1 @@
-{"version":3,"file":"slider.stories.js","sourceRoot":"","sources":["../../../src/components/slider/slider.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\nimport { icons } from '@infineon/infineon-icons';\n\nexport default {\n  title: 'Components/Slider',\n  component: 'ifx-slider',\n  tags: ['autodocs'],\n\n  argTypes: {\n    min: { control: 'number' },\n    max: { control: 'number' },\n    step: { control: 'number' },\n    type: { control: 'radio', options: ['single', 'double']},\n    value: { control: 'number', if: { arg: 'type', eq: 'single'} },\n    minValueHandle : {control :'number', if: { arg: 'type', eq: 'double'}},\n    maxValueHandle : {control :'number', if: { arg: 'type', eq: 'double'}},\n    showPercentage: { control: 'boolean', if: { arg: 'type', eq: 'single'} },\n    disabled: { control: 'boolean' },\n    leftIcon: {\n      options: Object.values(icons).map(i => i['name']),\n      control: { type: 'select' },\n    },\n    rightIcon: {\n      options: Object.values(icons).map(i => i['name']),\n      control: { type: 'select' },\n    },\n    leftText: { control: 'text' },\n    rightText: { control: 'text' },\n    ifxChange: {\n      action: 'ifxChange',\n      description: 'Custom event emitted on input 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    },\n  },\n};\n\nconst Template = args => {\n  const sliderElement = document.createElement('ifx-slider');\n  sliderElement.setAttribute('value', args.value);\n  sliderElement.setAttribute('min', args.min);\n  sliderElement.setAttribute('max', args.max);\n  sliderElement.setAttribute('step', args.step)\n  sliderElement.setAttribute('min-value-handle', args.minValueHandle);\n  sliderElement.setAttribute('max-value-handle', args.maxValueHandle);\n  sliderElement.setAttribute('type', args.type);\n  if (args.showPercentage) {\n    sliderElement.setAttribute('show-percentage', 'true');\n  }\n  if (args.disabled) {\n    sliderElement.setAttribute('disabled', 'true'); // Set disabled attribute\n  }\n\n  if (args.leftIcon) {\n    sliderElement.setAttribute('left-icon', args.leftIcon);\n  }\n  if (args.rightIcon) {\n    sliderElement.setAttribute('right-icon', args.rightIcon);\n  }\n  if (args.leftText) {\n    sliderElement.setAttribute('left-text', args.leftText);\n  }\n  if (args.rightText) {\n    sliderElement.setAttribute('right-text', args.rightText);\n  }\n  sliderElement.addEventListener('ifxChange', action('ifxChange'));\n\n  return sliderElement;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  min: 0,\n  max: 100,\n  step: 1,\n  value: 50,\n  minValueHandle: 20,\n  maxValueHandle: 80,\n  showPercentage: false,\n  disabled: false,\n  type: 'single'\n};\n\nexport const WithPercentageDisplay = Template.bind({});\nWithPercentageDisplay.args = {\n  ...Default.args,\n  showPercentage: true,\n  disabled: false,\n};\n\nexport const WithIcons = Template.bind({});\nWithIcons.args = {\n  ...Default.args,\n  leftIcon: 'cogwheel-16',\n  rightIcon: 'cogwheel-16',\n};\n\nexport const WithTexts = Template.bind({});\nWithTexts.args = {\n  ...Default.args,\n  leftText: 'LeftText',\n  rightText: 'RightText',\n};\n\nexport const Disabled = Template.bind({});\nDisabled.args = {\n  ...Default.args,\n  disabled: true,\n};\n"]}
+{"version":3,"file":"slider.stories.js","sourceRoot":"","sources":["../../../src/components/slider/slider.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\nimport { icons } from '@infineon/infineon-icons';\n\nexport default {\n  title: 'Components/Slider',\n  component: 'ifx-slider',\n  tags: ['autodocs'],\n\n  argTypes: {\n    min: { control: 'number',\n      description: 'The minimum value of the slider.',\n    table:{\n      category: 'ifx-slider props',\n      defaultValue: { summary: '0' },\n      type: { summary: 'number' }\n    }\n  },\n    max: { control: 'number',\n      description: 'The maximum value of the slider.',\n      table:{\n        category: 'ifx-slider props',\n        defaultValue: { summary: '100' },\n        type: { summary: 'number' }\n      } \n    },\n    step: { control: 'number',\n      description: 'The step value of the slider.',\n      table:{\n        category: 'ifx-slider props',\n        defaultValue: { summary: '1' },\n        type: { summary: 'number' }\n      }\n     },\n    type: { control: 'radio', options: ['single', 'double'],\n      description: 'The type of the slider.',\n        table: {\n          category: 'ifx-slider props',\n          defaultValue: { summary: 'single' },\n          type: { summary: 'single | double' }\n       }\n    },\n    value: { control: 'number', if: { arg: 'type', eq: 'single'},\n      description: 'The current value of the slider.',\n      table: {  \n        category: 'ifx-slider props',\n        type: { summary: 'number ' }\n      }\n    },  \n    minValueHandle : {control :'number', if: { arg: 'type', eq: 'double'},\n      description: 'The minimum value of the handle in double slider.',\n      table: {\n      category: 'ifx-slider props',\n      type: { summary: 'number' }\n    }\n  },\n    maxValueHandle : {control :'number', if: { arg: 'type', eq: 'double'},\n      description: 'The maximum value of the handle in double slider.',\n      table: {\n      category: 'ifx-slider props',\n      type: { summary: 'number' }\n    },\n  }, \n    showPercentage: { \n      control: 'boolean', if: { arg: 'type', eq: 'single'},\n      description: 'Show the percentage of the slider value.',\n      table: {\n        category: 'ifx-slider props',\n        defaultValue: { summary: 'false' },\n        type: { summary: 'boolean' }\n      }\n    },\n    disabled: { control: 'boolean',\n      description: 'Disable the slider.',\n      table: {\n        category: 'ifx-slider props',\n        defaultValue: { summary: 'false' },\n        type: { summary: 'boolean' }\n      }\n    },\n    leftIcon: {\n      options: Object.values(icons).map(i => i['name']),\n      control: { type: 'select'},\n        description: 'The icon on the left of the slider.',\n        table: {\n          category: 'ifx-slider props',\n          type: { summary: 'string' }\n        }\n       },\n    rightIcon: {\n      options: Object.values(icons).map(i => i['name']),\n      control: { type: 'select' },\n      description: 'The icon on the right of the slider.',\n      table: {\n        category: 'ifx-slider props',\n        type: { summary: 'string' }\n      }\n    },\n    leftText: { control: 'text',\n      description: 'The text on the left side.',\n      table: {\n        category: 'ifx-slider props',\n        type: { summary: 'string' }\n      }\n    },\n    rightText: { control: 'text',\n      description: 'The text on the right side.',\n      table: {\n        category: 'ifx-slider props',\n        type: { summary: 'string' }\n      }\n    },\n    ifxChange: {\n      action: 'ifxChange',\n      description: 'Custom event emitted on input 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    },\n  }\n}\n\nconst Template = args => {\n  const sliderElement = document.createElement('ifx-slider');\n  sliderElement.setAttribute('value', args.value);\n  sliderElement.setAttribute('min', args.min);\n  sliderElement.setAttribute('max', args.max);\n  sliderElement.setAttribute('step', args.step)\n  sliderElement.setAttribute('min-value-handle', args.minValueHandle);\n  sliderElement.setAttribute('max-value-handle', args.maxValueHandle);\n  sliderElement.setAttribute('type', args.type);\n  if (args.showPercentage) {\n    sliderElement.setAttribute('show-percentage', 'true');\n  }\n  if (args.disabled) {\n    sliderElement.setAttribute('disabled', 'true'); // Set disabled attribute\n  }\n\n  if (args.leftIcon) {\n    sliderElement.setAttribute('left-icon', args.leftIcon);\n  }\n  if (args.rightIcon) {\n    sliderElement.setAttribute('right-icon', args.rightIcon);\n  }\n  if (args.leftText) {\n    sliderElement.setAttribute('left-text', args.leftText);\n  }\n  if (args.rightText) {\n    sliderElement.setAttribute('right-text', args.rightText);\n  }\n  sliderElement.addEventListener('ifxChange', action('ifxChange'));\n\n  return sliderElement;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  min: 0,\n  max: 100,\n  step: 1,\n  value: 50,\n  minValueHandle: 20,\n  maxValueHandle: 80,\n  showPercentage: false,\n  disabled: false,\n  type: 'single'\n};\n\nexport const WithPercentageDisplay = Template.bind({});\nWithPercentageDisplay.args = {\n  ...Default.args,\n  showPercentage: true,\n  disabled: false,\n};\n\nexport const WithIcons = Template.bind({});\nWithIcons.args = {\n  ...Default.args,\n  leftIcon: 'cogwheel-16',\n  rightIcon: 'cogwheel-16',\n};\n\nexport const WithTexts = Template.bind({});\nWithTexts.args = {\n  ...Default.args,\n  leftText: 'LeftText',\n  rightText: 'RightText',\n};\n\nexport const Disabled = Template.bind({});\nDisabled.args = {\n  ...Default.args,\n  disabled: true,\n};\n"]}