@infineon/infineon-design-system-stencil 30.9.2--canary.1640.d5be31b23266dc25a9129b584fc1bdfec4b3b4a5.0 → 30.9.2--canary.1640.8e12ffd44dfe7f8dd5fbabab6fd2dffeebf3096c.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -94,13 +94,7 @@ See the 2nd *<ifx-segment>* for effects`,
94
94
  }
95
95
  },
96
96
  ifxChange: {
97
- description: `A custom event *ifxChange* is emitted whenever the *<ifx-segmented-control>* is clicked/selected.\n
98
- event.detail:
99
- {
100
- previousValue: string,
101
- selectedValue: string
102
- }
103
- `,
97
+ description: `Custom event emitted when the segment is changed.`,
104
98
  table: {
105
99
  category: 'custom events',
106
100
  type: {
@@ -1 +1 @@
1
- {"version":3,"file":"segmented-control.stories.js","sourceRoot":"","sources":["../../../src/components/segmented-control/segmented-control.stories.ts"],"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/Segmented Control',\n tags: ['autodocs'],\n args: {\n amountOfSegments: 5,\n labelOfSegment: 'Label',\n caption: 'Caption text to describe the controls',\n label: 'Group Label',\n size: 'regular',\n icon: 'star-16',\n selected: 'false',\n value: 'Value'\n },\n argTypes: {\n amountOfSegments: {\n name: 'Amount of Segments',\n control: { type: 'number', min: 2 },\n description: 'Control the number of *<ifx-segment>* in component.',\n table: {\n category: 'story controls',\n type: {\n summary: null\n }\n }\n },\n labelOfSegment: {\n name: 'Label of Segment',\n description: 'Set the label of *<ifx-segmented-control>*.',\n table: {\n category: 'story controls',\n }\n },\n caption: {\n description: 'Set the caption text of segmented control group.',\n table: {\n category: 'ifx-segmented-control props'\n }\n },\n label: {\n name: 'label',\n description: 'Set the label of control group.',\n table: {\n category: 'ifx-segmented-control props'\n }\n },\n size: {\n description: 'Switch between the size of Segmented Control.',\n control: 'radio',\n options: ['regular', 'small'],\n table: {\n category: 'ifx-segmented-control props',\n defaultValue: {\n summary: 'regular'\n },\n type: {\n summary: 'regular | small'\n }\n }\n },\n icon: {\n description: 'Set icon of a segment.',\n options: Object.values(icons).map(i => i['name']),\n control: { type: 'select' },\n table: {\n category: 'ifx-segment props'\n }\n },\n selected: {\n description: `Selects the segment when set true.\\n\nSee the 2nd *<ifx-segment>* for effects`,\n control: 'boolean',\n table: {\n category: 'ifx-segment props',\n defaultValue: {\n summary: false,\n },\n type: {\n summary: 'boolean'\n }\n }\n },\n value: {\n description: 'Set the value of *<ifx-segment>*. Required.',\n table: {\n category: 'ifx-segment props',\n type: {\n summary: 'string'\n }\n },\n type: {\n required: true\n }\n },\n ifxChange: {\n description: `A custom event *ifxChange* is emitted whenever the *<ifx-segmented-control>* is clicked/selected.\\n\n event.detail: \n {\n previousValue: string,\n selectedValue: string\n }\n `,\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-segmented-control\ncaption = '${args.caption}'\nlabel = '${args.label}'\nsize = '${args.size}'>\n ${(() => {\n return Array.from({ length: args.amountOfSegments }, (_, segmentId) => {\n const segment = document.createElement('ifx-segment');\n segment.innerText = args.labelOfSegment;\n segment.setAttribute('value', `${args.value}${segmentId + 1}`);\n segment.setAttribute('icon', `${args.icon}`);\n if (args.selected === true && segmentId === 1) segment.setAttribute('selected', 'true');\n return segment.outerHTML;\n }).join(`\\n `);\n })()\n }\n</ifx-segmented-control> \n`;\n const segmentedControl = wrapper.querySelector('ifx-segmented-control');\n segmentedControl.addEventListener('ifxChange', action('ifxChange'));\n\n return segmentedControl;\n};\n\nexport const Default = Template.bind({});"]}
1
+ {"version":3,"file":"segmented-control.stories.js","sourceRoot":"","sources":["../../../src/components/segmented-control/segmented-control.stories.ts"],"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/Segmented Control',\n tags: ['autodocs'],\n args: {\n amountOfSegments: 5,\n labelOfSegment: 'Label',\n caption: 'Caption text to describe the controls',\n label: 'Group Label',\n size: 'regular',\n icon: 'star-16',\n selected: 'false',\n value: 'Value'\n },\n argTypes: {\n amountOfSegments: {\n name: 'Amount of Segments',\n control: { type: 'number', min: 2 },\n description: 'Control the number of *<ifx-segment>* in component.',\n table: {\n category: 'story controls',\n type: {\n summary: null\n }\n }\n },\n labelOfSegment: {\n name: 'Label of Segment',\n description: 'Set the label of *<ifx-segmented-control>*.',\n table: {\n category: 'story controls',\n }\n },\n caption: {\n description: 'Set the caption text of segmented control group.',\n table: {\n category: 'ifx-segmented-control props'\n }\n },\n label: {\n name: 'label',\n description: 'Set the label of control group.',\n table: {\n category: 'ifx-segmented-control props'\n }\n },\n size: {\n description: 'Switch between the size of Segmented Control.',\n control: 'radio',\n options: ['regular', 'small'],\n table: {\n category: 'ifx-segmented-control props',\n defaultValue: {\n summary: 'regular'\n },\n type: {\n summary: 'regular | small'\n }\n }\n },\n icon: {\n description: 'Set icon of a segment.',\n options: Object.values(icons).map(i => i['name']),\n control: { type: 'select' },\n table: {\n category: 'ifx-segment props'\n }\n },\n selected: {\n description: `Selects the segment when set true.\\n\nSee the 2nd *<ifx-segment>* for effects`,\n control: 'boolean',\n table: {\n category: 'ifx-segment props',\n defaultValue: {\n summary: false,\n },\n type: {\n summary: 'boolean'\n }\n }\n },\n value: {\n description: 'Set the value of *<ifx-segment>*. Required.',\n table: {\n category: 'ifx-segment props',\n type: {\n summary: 'string'\n }\n },\n type: {\n required: true\n }\n },\n ifxChange: {\n description: `Custom event emitted when the segment is changed.`,\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-segmented-control\ncaption = '${args.caption}'\nlabel = '${args.label}'\nsize = '${args.size}'>\n ${(() => {\n return Array.from({ length: args.amountOfSegments }, (_, segmentId) => {\n const segment = document.createElement('ifx-segment');\n segment.innerText = args.labelOfSegment;\n segment.setAttribute('value', `${args.value}${segmentId + 1}`);\n segment.setAttribute('icon', `${args.icon}`);\n if (args.selected === true && segmentId === 1) segment.setAttribute('selected', 'true');\n return segment.outerHTML;\n }).join(`\\n `);\n })()\n }\n</ifx-segmented-control> \n`;\n const segmentedControl = wrapper.querySelector('ifx-segmented-control');\n segmentedControl.addEventListener('ifxChange', action('ifxChange'));\n\n return segmentedControl;\n};\n\nexport const Default = Template.bind({});"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@infineon/infineon-design-system-stencil",
3
- "version": "30.9.2--canary.1640.d5be31b23266dc25a9129b584fc1bdfec4b3b4a5.0",
3
+ "version": "30.9.2--canary.1640.8e12ffd44dfe7f8dd5fbabab6fd2dffeebf3096c.0",
4
4
  "private": false,
5
5
  "description": "Infineon design system Stencil web components",
6
6
  "homepage": "https://infineon.github.io/infineon-design-system-stencil",