@infineon/infineon-design-system-stencil 31.0.0--canary.1640.26c4c0764d79109b3335389182db63edca37148d.0 → 31.0.0--canary.1697.223df0ff1431a5398fd1261ed013c9dd2a89e7a0.0

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

@@ -53,9 +53,7 @@ export default {
     title: 'Components/Select/Multi Select',
     // tags: ['autodocs'],
     args: {
-        name: 'multiselect',
         size: 'm',
-        disabled: false,
         batchSize: 10,
         maxItemCount: 10,
         showSearch: true,
@@ -67,7 +65,6 @@ export default {
     },
     argTypes: {
         size: {
-            description: 'Size of the input field.',
             options: {
                 'small (36px)': 's',
                 'medium (40px)': 'm',
@@ -75,181 +72,59 @@ 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.',
-            table: {
-                category: 'ifx-multiselect props',
-                type: {
-                    summary: 'number'
-                }
-            }
+            description: 'Number of maximum selectable items',
         },
         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.',
-            table: {
-                category: 'ifx-multiselect props',
-                type: {
-                    summary: 'Details',
-                    detail: `'Array<{ value: string, label: string, selected: boolean, children?: Array<{ value: string, label: string, selected: boolean }> }>'`,
-                },
-            },
+            description: 'Takes an array of objects in the following format',
         },
         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}'
@@ -260,7 +135,6 @@ 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\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"]}
+{"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"]}

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

@@ -209,9 +209,9 @@ export class Choices {
         // destroy choices element to restore previous dom structure
         // so vdom can replace the element correctly
         this.destroy();
-        return (h("div", { key: 'afb22e61adf2c1bbc5994d1bc2640a1f34997088', class: `ifx-select-container` }, this.label ? (h("div", { class: "ifx-label-wrapper" }, h("span", null, this.label))) : null, h("div", { key: 'febbedc83bd0420a136c5c4b65ede1703815bbc0', class: `${choicesWrapperClass} 
+        return (h("div", { key: '56b4f3729b61745ba48a7d73b431ee327490a1d0', class: `ifx-select-container` }, this.label ? (h("div", { class: "ifx-label-wrapper" }, h("span", null, this.label))) : null, h("div", { key: 'd9b2690e71fcffb51f2b9521030b56c832504401', class: `${choicesWrapperClass} 
             ${this.disabled ? 'disabled' : ''} 
-            ${this.error ? 'error' : ''}`, onClick: this.disabled ? undefined : () => this.toggleDropdown(), onKeyDown: event => this.handleKeyDown(event) }, h("select", Object.assign({ key: '339771447d7fbad6d17b75c032028958196d4ae7', class: 'single__select-input-field', disabled: this.disabled }, attributes, { "data-trigger": true, onChange: () => this.handleChange() }), this.createSelectOptions(this.options)), h("div", { key: 'f6e0803771328744a9d48fd196f8bb44886268a8', class: "single__select-icon-container" }, this.optionIsSelected && (h("div", { key: 'eab9c3c429d74eac31c24628d86078cec12e9a43', class: "ifx-choices__icon-wrapper-delete" }, h("ifx-icon", { key: '1283caadb33147058593a1fff2e08b4460edce0e', icon: "cremove16", onClick: () => this.handleDeleteSelection() }))), h("div", { key: '7fbd427273a0e6776395e44a91b495cc0f30b29c', class: "ifx-choices__icon-wrapper-up" }, h("ifx-icon", { key: "icon-up", icon: "chevronup-16" })), h("div", { key: 'bf571ef4fa089788f2c1a2ac44c476444cda22a7', class: "ifx-choices__icon-wrapper-down" }, h("ifx-icon", { key: "icon-down", icon: "chevron-down-16" })))), this.error ? (h("div", { class: "ifx-error-message-wrapper" }, h("span", null, this.errorMessage))) : null));
+            ${this.error ? 'error' : ''}`, onClick: this.disabled ? undefined : () => this.toggleDropdown(), onKeyDown: event => this.handleKeyDown(event) }, h("select", Object.assign({ key: 'f6a3b0f9f8237102ee80c7307dd1af4178628e83', class: 'single__select-input-field', disabled: this.disabled }, attributes, { "data-trigger": true, onChange: () => this.handleChange() }), this.createSelectOptions(this.options)), h("div", { key: '74814a6824d7da1afa510ad7e399d9443c2876e3', class: "single__select-icon-container" }, this.optionIsSelected && (h("div", { key: '5b24471c46f85b9effcf75a9c22e39a1da8162cb', class: "ifx-choices__icon-wrapper-delete" }, h("ifx-icon", { key: '225d88540e641b7dbda3f2197a9cbcd1d82d4bdb', icon: "cremove16", onClick: () => this.handleDeleteSelection() }))), h("div", { key: '066855967421b0796aaf674b7c563c0728105e03', class: "ifx-choices__icon-wrapper-up" }, h("ifx-icon", { key: "icon-up", icon: "chevronup-16" })), h("div", { key: '7908ba5b0c29d8e5773ee27417a1e7baee80a4b3', class: "ifx-choices__icon-wrapper-down" }, h("ifx-icon", { key: "icon-down", icon: "chevron-down-16" })))), this.error ? (h("div", { class: "ifx-error-message-wrapper" }, h("span", null, this.errorMessage))) : null));
     }
     toggleDropdown() {
         const div = this.root.querySelector('.ifx-choices__wrapper');

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

@@ -22,7 +22,6 @@ export default {
     title: 'Components/Select/Single Select',
     // tags: ['autodocs'],
     args: {
-        label: '',
         size: 'm',
         showSearch: true,
         searchPlaceholderValue: 'Search...',
@@ -30,6 +29,7 @@ export default {
         placeholderValue: 'Placeholder',
         error: false,
         errorMessage: 'Some error',
+        label: '',
         disabled: false,
         // type: 'single', //for later implementation
     },
@@ -39,108 +39,51 @@ export default {
         //   control: false,
         // },
         size: {
-            description: 'Specifies the size. Options: small - s (36px) medium - m (40px).',
-            control: 'radio',
-            options: ['s', 'm'],
-            table: {
-                category: 'ifx-select props',
-                defaultValue: {
-                    summary: 'm'
-                }
-            }
+            options: {
+                'small (36px)': 's',
+                'medium (40px)': 'm',
+            },
+            control: {
+                type: 'radio',
+            },
         },
         placeholder: {
-            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'
-            }
+            options: [true, false],
+            control: { type: 'radio' },
         },
+        placeholderValue: { control: 'text' },
+        // value: { for later implementation
+        //   control: 'text',
+        //   description: 'Programmatically set the selected value',
+        // },
         error: {
-            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'
-            }
+            options: [true, false],
+            control: { type: 'radio' },
         },
+        errorMessage: { control: 'text' },
+        label: { control: 'text' },
         disabled: {
-            description: 'Disables the dropdown.',
-            control: 'boolean',
-            table: {
-                category: 'ifx-select props',
-                defaultValue: {
-                    summary: false
-                }
-            }
+            options: [true, false],
+            control: { type: 'radio' },
         },
         showSearch: {
-            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'
-            }
+            options: [true, false],
+            control: { type: 'radio' },
         },
+        searchPlaceholderValue: { control: { type: 'text' } },
         options: {
-            description: 'Takes an array of objects in the following format.',
-            table: {
-                category: 'ifx-select props'
-            }
+            description: 'Takes an array of objects in the following format',
         },
         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    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"]}
+{"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"]}

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

@@ -136,10 +136,10 @@ export class IfxSlider {
         this.updateValuePercent();
     }
     render() {
-        return (h("div", { key: 'b465d077094d60c3bdf74cd5ac862e967841067b', class: "ifx-slider" }, this.leftText && (h("span", { key: '5913654492aa7e837b6778935b5cb3a7002308fd', class: `left-text` }, this.leftText)), this.leftIcon && (h("ifx-icon", { key: '26b106c741836e06e127ef3299f0d433de693ab9', icon: this.leftIcon, class: `left-icon${this.disabled ? ' disabled' : ''}` })), (this.type !== 'double') ?
+        return (h("div", { key: '4fdcc386679f8d0bc627c36ee2847e72577da844', class: "ifx-slider" }, this.leftText && (h("span", { key: '5523880c46e467acd326d34efeae3f84072e931a', class: `left-text` }, this.leftText)), this.leftIcon && (h("ifx-icon", { key: 'a6191c056b723dc639ecdf14da488fd4af29b1fc', icon: this.leftIcon, class: `left-icon${this.disabled ? ' disabled' : ''}` })), (this.type !== 'double') ?
             h("input", { type: "range", min: this.min, max: this.max, step: this.step, value: this.internalValue, disabled: this.disabled, ref: (el) => (this.inputRef = el), onInput: (event) => this.handleInputChange(event), "aria-label": 'a slider', "aria-value": this.value, "aria-disabled": this.disabled })
             :
-                h("div", { class: 'range-slider__wrapper', "aria-label": 'a range slider', "aria-value": this.value, "aria-disabled": this.disabled }, h("input", { id: 'min-slider', type: 'range', min: this.min, max: this.max, step: this.step, value: this.internalMinValue, disabled: this.disabled, ref: (el) => (this.minInputRef = el), onInput: (event) => this.handleInputChangeOfRangeSlider(event), onMouseUp: (event) => this.handleOnMouseLeaveOfRangeSlider(event) }), h("input", { id: 'max-slider', type: 'range', min: this.min, max: this.max, step: this.step, value: this.internalMaxValue, disabled: this.disabled, ref: (el) => (this.maxInputRef = el), onInput: (event) => this.handleInputChangeOfRangeSlider(event), onMouseUp: (event) => this.handleOnMouseLeaveOfRangeSlider(event) })), this.rightIcon && (h("ifx-icon", { key: '4af440423ce265817ecd177c0f74a9ed1d0e5f10', icon: this.rightIcon, class: `right-icon${this.disabled ? ' disabled' : ''}` })), this.rightText && (h("span", { key: '627694f955bfc92530e91fdd56ddaa791d7006e7', class: `right-text${this.disabled ? ' disabled' : ''}` }, this.rightText)), this.showPercentage && (this.type !== "double") && (h("span", { key: '6b564afbe80debd694cd325e6719c5fecd40ca66', class: `percentage-display${this.disabled ? ' disabled' : ''}` }, this.percentage, "%"))));
+                h("div", { class: 'range-slider__wrapper', "aria-label": 'a range slider', "aria-value": this.value, "aria-disabled": this.disabled }, h("input", { id: 'min-slider', type: 'range', min: this.min, max: this.max, step: this.step, value: this.internalMinValue, disabled: this.disabled, ref: (el) => (this.minInputRef = el), onInput: (event) => this.handleInputChangeOfRangeSlider(event), onMouseUp: (event) => this.handleOnMouseLeaveOfRangeSlider(event) }), h("input", { id: 'max-slider', type: 'range', min: this.min, max: this.max, step: this.step, value: this.internalMaxValue, disabled: this.disabled, ref: (el) => (this.maxInputRef = el), onInput: (event) => this.handleInputChangeOfRangeSlider(event), onMouseUp: (event) => this.handleOnMouseLeaveOfRangeSlider(event) })), this.rightIcon && (h("ifx-icon", { key: '05d09fab9f697a5b4f59a4848fb968c4327165dd', icon: this.rightIcon, class: `right-icon${this.disabled ? ' disabled' : ''}` })), this.rightText && (h("span", { key: '22c867720cdc51aa5ee335324e6702784acef861', class: `right-text${this.disabled ? ' disabled' : ''}` }, this.rightText)), this.showPercentage && (this.type !== "double") && (h("span", { key: '6d1f39ccac1208b0eddf072db7d7661da3b2afbf', class: `percentage-display${this.disabled ? ' disabled' : ''}` }, this.percentage, "%"))));
     }
     static get is() { return "ifx-slider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -5,120 +5,36 @@ export default {
     component: 'ifx-slider',
     tags: ['autodocs'],
     argTypes: {
-        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' }
-            }
-        },
+        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' },
         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');