@infineon/infineon-design-system-stencil 30.9.2--canary.1640.15cdfe60ad50aa25f303022243870c114adb2d4d.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.
- package/dist/collection/components/search-field/search-field.stories.js +11 -1
- package/dist/collection/components/search-field/search-field.stories.js.map +1 -1
- package/dist/collection/components/segmented-control/segmented-control.stories.js +1 -7
- package/dist/collection/components/segmented-control/segmented-control.stories.js.map +1 -1
- package/dist/types/components/search-field/search-field.stories.d.ts +9 -0
- package/package.json +1 -1
|
@@ -6,6 +6,8 @@ export default {
|
|
|
6
6
|
showDeleteIcon: true,
|
|
7
7
|
disabled: false,
|
|
8
8
|
size: 'm',
|
|
9
|
+
value: '',
|
|
10
|
+
placeholder: 'Search...',
|
|
9
11
|
},
|
|
10
12
|
argTypes: {
|
|
11
13
|
showDeleteIcon: {
|
|
@@ -56,6 +58,13 @@ export default {
|
|
|
56
58
|
category: 'ifx-search-field props'
|
|
57
59
|
}
|
|
58
60
|
},
|
|
61
|
+
value: {
|
|
62
|
+
description: 'The value of the search field. It is used for the form submission.',
|
|
63
|
+
control: 'text',
|
|
64
|
+
table: {
|
|
65
|
+
category: 'ifx-search-field props'
|
|
66
|
+
}
|
|
67
|
+
},
|
|
59
68
|
ifxInput: {
|
|
60
69
|
action: 'ifxInput',
|
|
61
70
|
description: 'A custom event triggered whenever there is input in the search field.',
|
|
@@ -69,11 +78,12 @@ export default {
|
|
|
69
78
|
},
|
|
70
79
|
},
|
|
71
80
|
};
|
|
72
|
-
const DefaultTemplate = ({ disabled, size, showDeleteIcon, placeholder, maxlength }) => {
|
|
81
|
+
const DefaultTemplate = ({ disabled, size, showDeleteIcon, placeholder, maxlength, value }) => {
|
|
73
82
|
const element = document.createElement('ifx-search-field');
|
|
74
83
|
element.setAttribute('size', size);
|
|
75
84
|
element.setAttribute('disabled', disabled);
|
|
76
85
|
element.setAttribute('show-delete-icon', showDeleteIcon);
|
|
86
|
+
element.setAttribute('value', value);
|
|
77
87
|
if (placeholder != undefined)
|
|
78
88
|
element.setAttribute('placeholder', placeholder);
|
|
79
89
|
if (maxlength != undefined)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"search-field.stories.js","sourceRoot":"","sources":["../../../src/components/search-field/search-field.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,sBAAsB;IAEtB,IAAI,EAAE;QACJ,cAAc,EAAE,IAAI;QACpB,QAAQ,EAAE,KAAK;QACf,IAAI,EAAE,GAAG;
|
|
1
|
+
{"version":3,"file":"search-field.stories.js","sourceRoot":"","sources":["../../../src/components/search-field/search-field.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,sBAAsB;IAEtB,IAAI,EAAE;QACJ,cAAc,EAAE,IAAI;QACpB,QAAQ,EAAE,KAAK;QACf,IAAI,EAAE,GAAG;QACT,KAAK,EAAE,EAAE;QACT,WAAW,EAAE,WAAW;KACzB;IACD,QAAQ,EAAE;QACR,cAAc,EAAE;YACd,WAAW,EAAE,gEAAgE;YAC7E,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;gBAClC,YAAY,EAAE;oBACZ,OAAO,EAAE,IAAI;iBACd;aACF;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,yDAAyD;YACtE,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;gBAClC,YAAY,EAAE;oBACZ,OAAO,EAAE,KAAK;iBACf;aACF;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,mDAAmD;YAChE,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;YACnB,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;gBAClC,YAAY,EAAE;oBACZ,OAAO,EAAE,GAAG;iBACb;aACF;SACF;QACD,WAAW,EAAE;YACX,WAAW,EAAE,kEAAkE;YAC/E,OAAO,EAAE,MAAM;YACf,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;gBAClC,YAAY,EAAE;oBACZ,OAAO,EAAE,WAAW;iBACrB;aACF;SACF;QACD,SAAS,EAAE;YACT,WAAW,EAAE,uFAAuF;YACpG,OAAO,EAAE,QAAQ;YACjB,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;aACnC;SACF;QACD,KAAK,EAAE;YACL,WAAW,EAAE,oEAAoE;YACjF,OAAO,EAAE,MAAM;YACf,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;aACnC;SACF;QACD,QAAQ,EAAE;YACR,MAAM,EAAE,UAAU;YAClB,WAAW,EAAE,uEAAuE;YACpF,KAAK,EAAE;gBACL,QAAQ,EAAE,eAAe;gBACzB,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,yKAAyK;iBAC5K;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,cAAc,EAAE,WAAW,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5F,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAC3D,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACnC,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IAC3C,OAAO,CAAC,YAAY,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAC;IACzD,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;IACpC,IAAI,WAAW,IAAI,SAAS;QAAE,OAAO,CAAC,YAAY,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;IAC/E,IAAI,SAAS,IAAI,SAAS;QAAE,OAAO,CAAC,YAAY,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;IACzE,OAAO,CAAC,gBAAgB,CAAC,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC;IAEzD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n title: 'Components/Search Field',\n // tags: ['autodocs'],\n\n args: {\n showDeleteIcon: true,\n disabled: false,\n size: 'm',\n value: '',\n placeholder: 'Search...',\n },\n argTypes: {\n showDeleteIcon: {\n description: 'Determines whether a delete icon is shown in the search field.',\n control: 'boolean',\n table: {\n category: 'ifx-search-field props',\n defaultValue: {\n summary: true\n }\n }\n },\n disabled: {\n description: 'Disables the search field, preventing user interaction.',\n control: 'boolean',\n table: {\n category: 'ifx-search-field props',\n defaultValue: {\n summary: false\n }\n }\n },\n size: {\n description: 'Size options: s (36px) and m (40px) - default: m.',\n control: 'radio',\n options: ['s', 'm'],\n table: {\n category: 'ifx-search-field props',\n defaultValue: {\n summary: 'm'\n }\n }\n },\n placeholder: {\n description: 'Placeholder text displayed in the search field when it is empty.',\n control: 'text',\n table: {\n category: 'ifx-search-field props',\n defaultValue: {\n summary: 'Search...'\n }\n }\n },\n maxlength: {\n description: 'Specifies the maximum number of characters that can be entered into the search field.',\n control: 'number',\n table: {\n category: 'ifx-search-field props'\n }\n },\n value: {\n description: 'The value of the search field. It is used for the form submission.',\n control: 'text',\n table: {\n category: 'ifx-search-field props'\n }\n },\n ifxInput: {\n action: 'ifxInput',\n description: 'A custom event triggered whenever there is input in the search field.',\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 = ({ disabled, size, showDeleteIcon, placeholder, maxlength, value }) => {\n const element = document.createElement('ifx-search-field');\n element.setAttribute('size', size);\n element.setAttribute('disabled', disabled);\n element.setAttribute('show-delete-icon', showDeleteIcon);\n element.setAttribute('value', value)\n if (placeholder != undefined) element.setAttribute('placeholder', placeholder);\n if (maxlength != undefined) element.setAttribute('maxlength', maxlength);\n element.addEventListener('ifxInput', action('ifxInput'));\n\n return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}
|
|
@@ -94,13 +94,7 @@ See the 2nd *<ifx-segment>* for effects`,
|
|
|
94
94
|
}
|
|
95
95
|
},
|
|
96
96
|
ifxChange: {
|
|
97
|
-
description: `
|
|
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":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAC;AAEjD,eAAe;IACX,KAAK,EAAE,8BAA8B;IACrC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,IAAI,EAAE;QACF,gBAAgB,EAAE,CAAC;QACnB,cAAc,EAAE,OAAO;QACvB,OAAO,EAAE,uCAAuC;QAChD,KAAK,EAAE,aAAa;QACpB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,SAAS;QACf,QAAQ,EAAE,OAAO;QACjB,KAAK,EAAE,OAAO;KACjB;IACD,QAAQ,EAAE;QACN,gBAAgB,EAAE;YACd,IAAI,EAAE,oBAAoB;YAC1B,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE;YACnC,WAAW,EAAE,qDAAqD;YAClE,KAAK,EAAE;gBACH,QAAQ,EAAE,gBAAgB;gBAC1B,IAAI,EAAE;oBACF,OAAO,EAAE,IAAI;iBAChB;aACJ;SACJ;QACD,cAAc,EAAE;YACZ,IAAI,EAAE,kBAAkB;YACxB,WAAW,EAAE,6CAA6C;YAC1D,KAAK,EAAE;gBACH,QAAQ,EAAE,gBAAgB;aAC7B;SACJ;QACD,OAAO,EAAE;YACL,WAAW,EAAE,kDAAkD;YAC/D,KAAK,EAAE;gBACH,QAAQ,EAAE,6BAA6B;aAC1C;SACJ;QACD,KAAK,EAAE;YACH,IAAI,EAAE,OAAO;YACb,WAAW,EAAE,iCAAiC;YAC9C,KAAK,EAAE;gBACH,QAAQ,EAAE,6BAA6B;aAC1C;SACJ;QACD,IAAI,EAAE;YACF,WAAW,EAAE,+CAA+C;YAC5D,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC;YAC7B,KAAK,EAAE;gBACH,QAAQ,EAAE,6BAA6B;gBACvC,YAAY,EAAE;oBACV,OAAO,EAAE,SAAS;iBACrB;gBACD,IAAI,EAAE;oBACF,OAAO,EAAE,iBAAiB;iBAC7B;aACJ;SACJ;QACD,IAAI,EAAE;YACF,WAAW,EAAE,wBAAwB;YACrC,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;YACjD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,KAAK,EAAE;gBACH,QAAQ,EAAE,mBAAmB;aAChC;SACJ;QACD,QAAQ,EAAE;YACN,WAAW,EAAE;wCACe;YAC5B,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACH,QAAQ,EAAE,mBAAmB;gBAC7B,YAAY,EAAE;oBACV,OAAO,EAAE,KAAK;iBACjB;gBACD,IAAI,EAAE;oBACF,OAAO,EAAE,SAAS;iBACrB;aACJ;SACJ;QACD,KAAK,EAAE;YACH,WAAW,EAAE,6CAA6C;YAC1D,KAAK,EAAE;gBACH,QAAQ,EAAE,mBAAmB;gBAC7B,IAAI,EAAE;oBACF,OAAO,EAAE,QAAQ;iBACpB;aACJ;YACD,IAAI,EAAE;gBACF,QAAQ,EAAE,IAAI;aACjB;SACJ;QACD,SAAS,EAAE;YACP,WAAW,EAAE
|
|
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({});"]}
|
|
@@ -4,6 +4,8 @@ declare const _default: {
|
|
|
4
4
|
showDeleteIcon: boolean;
|
|
5
5
|
disabled: boolean;
|
|
6
6
|
size: string;
|
|
7
|
+
value: string;
|
|
8
|
+
placeholder: string;
|
|
7
9
|
};
|
|
8
10
|
argTypes: {
|
|
9
11
|
showDeleteIcon: {
|
|
@@ -54,6 +56,13 @@ declare const _default: {
|
|
|
54
56
|
category: string;
|
|
55
57
|
};
|
|
56
58
|
};
|
|
59
|
+
value: {
|
|
60
|
+
description: string;
|
|
61
|
+
control: string;
|
|
62
|
+
table: {
|
|
63
|
+
category: string;
|
|
64
|
+
};
|
|
65
|
+
};
|
|
57
66
|
ifxInput: {
|
|
58
67
|
action: string;
|
|
59
68
|
description: string;
|
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.
|
|
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",
|