@infineon/infineon-design-system-stencil 31.0.0--canary.1697.223df0ff1431a5398fd1261ed013c9dd2a89e7a0.0 → 31.0.0--canary.1640.0cb387dc208aadd19f988395e2eb1027e7e7f343.0

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"]}

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

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

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

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

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

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

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

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

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

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

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

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

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

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