@infineon/infineon-design-system-stencil 30.9.2--canary.1640.0ac197ba0669dd5839444b74b932354060dbf70c.0 → 30.9.2--canary.1640.abb5fbdf690614c5084ce3278751d5fcad7d6056.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/table-advanced-version/table.stories.js +53 -28
- package/dist/collection/components/table-advanced-version/table.stories.js.map +1 -1
- package/dist/collection/components/textarea/textarea.stories.js +1 -3
- package/dist/collection/components/textarea/textarea.stories.js.map +1 -1
- package/dist/types/components/table-advanced-version/table.stories.d.ts +50 -11
- package/package.json +1 -1
@@ -74,42 +74,84 @@ export default {
|
|
74
74
|
tableHeight: 'auto',
|
75
75
|
pagination: false,
|
76
76
|
paginationPageSize: 10,
|
77
|
-
currentPage: 1,
|
78
77
|
rowHeight: 40,
|
79
78
|
showLoading: false,
|
80
|
-
buttonRendererOptions: {
|
81
|
-
onButtonClick: (params, event) => {
|
82
|
-
console.log('Button clicked:', params, event);
|
83
|
-
}
|
84
|
-
}
|
85
79
|
},
|
86
80
|
argTypes: {
|
87
81
|
tableHeight: {
|
82
|
+
description: 'Set the height of the table.',
|
88
83
|
table: {
|
84
|
+
category: 'ifx-table props',
|
89
85
|
type: {
|
90
86
|
summary: 'Options',
|
91
87
|
detail: 'Default: "auto"\nExample for fixed height: "400px"',
|
92
88
|
}
|
93
89
|
},
|
94
90
|
},
|
91
|
+
pagination: {
|
92
|
+
description: 'Show pagination control.',
|
93
|
+
control: { type: 'boolean' },
|
94
|
+
table: {
|
95
|
+
category: 'ifx-table props',
|
96
|
+
defaultValue: {
|
97
|
+
summary: true
|
98
|
+
},
|
99
|
+
type: {
|
100
|
+
summary: 'Boolean',
|
101
|
+
},
|
102
|
+
},
|
103
|
+
},
|
95
104
|
paginationPageSize: {
|
96
|
-
description: "Results per page: minimum 10 - maximum 30",
|
97
|
-
control: { type: 'number', min: 10, max: 30, step: 10 }
|
105
|
+
description: "Results per page: minimum 10 - maximum 30.",
|
106
|
+
control: { type: 'number', min: 10, max: 30, step: 10 },
|
107
|
+
table: {
|
108
|
+
category: 'ifx-table props',
|
109
|
+
defaultValue: {
|
110
|
+
summary: 10
|
111
|
+
},
|
112
|
+
type: {
|
113
|
+
summary: 'Number',
|
114
|
+
},
|
115
|
+
},
|
98
116
|
},
|
99
117
|
showLoading: {
|
118
|
+
description: 'Show loading spinner.',
|
100
119
|
options: [true, false],
|
101
120
|
control: { type: 'radio' },
|
121
|
+
table: {
|
122
|
+
category: 'ifx-table props',
|
123
|
+
defaultValue: {
|
124
|
+
summary: false
|
125
|
+
},
|
126
|
+
},
|
102
127
|
},
|
103
128
|
rowHeight: {
|
129
|
+
description: 'Set the height of the rows.',
|
104
130
|
options: ['compact', 'default'],
|
105
131
|
control: { type: 'radio' },
|
132
|
+
table: {
|
133
|
+
category: 'ifx-table props',
|
134
|
+
defaultValue: {
|
135
|
+
summary: 'default'
|
136
|
+
},
|
137
|
+
},
|
106
138
|
},
|
107
139
|
filterOrientation: {
|
140
|
+
description: 'Set the filter orientation.',
|
108
141
|
options: ['sidebar', 'topbar', 'none'],
|
109
142
|
control: { type: 'radio' },
|
143
|
+
table: {
|
144
|
+
category: 'ifx-table props',
|
145
|
+
defaultValue: {
|
146
|
+
summary: 'none'
|
147
|
+
},
|
148
|
+
},
|
110
149
|
},
|
111
150
|
columnDefs: {
|
151
|
+
description: 'Column header options',
|
152
|
+
name: 'cols',
|
112
153
|
table: {
|
154
|
+
category: 'ifx-table props',
|
113
155
|
type: {
|
114
156
|
summary: 'Column header options',
|
115
157
|
detail: 'Standard columns:\nheaderName: "Model", \nfield: "model", \nsortable: true (optional),\nsort: "desc" (optional) => descending sort (show icon)\nunSortIcon: true (optional) => unsorted (show icon)\n\nSpecial columns:\nheaderName: "",\nfield: "button"\nheaderName: "",\nfield: "link"',
|
@@ -117,23 +159,16 @@ export default {
|
|
117
159
|
},
|
118
160
|
},
|
119
161
|
rowData: {
|
162
|
+
description: 'Row data options',
|
163
|
+
name: 'rows',
|
120
164
|
table: {
|
165
|
+
category: 'ifx-table props',
|
121
166
|
type: {
|
122
167
|
summary: 'Row data options',
|
123
168
|
detail: 'Standard row values:\nmake: "Toyota", \nmodel: "Celica", \nprice: 35000 \n\nSpecial row values (incl buttons):\nmake: "Porsche",\nmodel: "Boxster",\nprice: "72000",\nbutton: { \ndisabled: false (optional),\nvariant: "outline" (optional)\nsize: "s" (optional),\ntext: "Button"\n...other ifx-button properties\n}',
|
124
169
|
},
|
125
170
|
},
|
126
171
|
},
|
127
|
-
buttonRendererOptions: {
|
128
|
-
control: 'object',
|
129
|
-
description: 'Options for button cell renderer, including event handlers.',
|
130
|
-
table: {
|
131
|
-
type: {
|
132
|
-
summary: 'Button Renderer Options',
|
133
|
-
detail: 'Custom event handlers and other options for the button cell renderer in the table.'
|
134
|
-
},
|
135
|
-
},
|
136
|
-
},
|
137
172
|
}
|
138
173
|
};
|
139
174
|
const DefaultTemplate = (args) => {
|
@@ -246,11 +281,6 @@ SidebarFilter.args = {
|
|
246
281
|
columnDefs: columnDefs,
|
247
282
|
rowData: rowData,
|
248
283
|
filterOrientation: 'sidebar',
|
249
|
-
buttonRendererOptions: {
|
250
|
-
onButtonClick: (params, event) => {
|
251
|
-
console.log('Button clicked:', params, event);
|
252
|
-
}
|
253
|
-
}
|
254
284
|
};
|
255
285
|
export const TopbarFilter = DefaultTemplate.bind({});
|
256
286
|
TopbarFilter.args = {
|
@@ -258,10 +288,5 @@ TopbarFilter.args = {
|
|
258
288
|
columnDefs: columnDefs,
|
259
289
|
rowData: rowData,
|
260
290
|
filterOrientation: 'topbar',
|
261
|
-
buttonRendererOptions: {
|
262
|
-
onButtonClick: (params, event) => {
|
263
|
-
console.log('Button clicked:', params, event);
|
264
|
-
}
|
265
|
-
}
|
266
291
|
};
|
267
292
|
//# sourceMappingURL=table.stories.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"table.stories.js","sourceRoot":"","sources":["../../../src/components/table-advanced-version/table.stories.ts"],"names":[],"mappings":"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","sourcesContent":["const columnDefs = [\n { headerName: 'Make', field: 'make', sortable: true, sort: 'desc', unSortIcon: true },\n { headerName: 'Model', field: 'model', sortable: true, unSortIcon: true },\n { headerName: 'Price', field: 'price' },\n { headerName: 'Age', field: 'age' }\n];\n\nconst rowData = [\n { make: 'Toyota', model: 'Celica', price: 35000, age: 10 },\n { make: 'Ford', model: 'Mondeo', price: 32000, age: 12 },\n { make: 'Porsche', model: 'Boxster', price: 72000 },\n { make: 'Bmw', model: 'x', price: 72000 },\n { make: 'Mercedes', model: 'y', price: 72000 },\n { make: 'Ferrari', model: 'z', price: 72000 },\n { make: 'Chrysler', model: 'a', price: 72000 },\n { make: 'Range rover', model: 'b', price: 72000 },\n { make: 'Tesla', model: 'x', price: 72000 },\n { make: 'Audi', model: '3', price: 72000 },\n { make: 'Landrover', model: 'x', price: 72000 },\n];\n\nconst columnDefsWithButtonCol = [\n { headerName: 'Make', field: 'make', sortable: true, sort: 'desc', unSortIcon: true },\n { headerName: 'Model', field: 'model', sortable: true, unSortIcon: true },\n { headerName: 'Price', field: 'price' },\n { headerName: 'Age', field: 'age' },\n {\n headerName: '',\n field: 'button',\n }\n];\n\n\nconst rowDataWithButtonCol = [\n {\n make: 'Toyota', model: 'Celica', price: 35000, age: 10, button: {\n disabled: false,\n variant: \"secondary\",\n size: \"s\",\n target: \"_blank\",\n href: \"https://www.w3schools.com/\",\n theme: \"default\",\n type: \"button\",\n fullWidth: true,\n text: \"Toyota Button\"\n }\n },\n {\n make: 'Ford', model: 'Mondeo', price: 32000, age: 12, button: {\n disabled: false,\n variant: \"secondary\",\n size: \"s\",\n target: \"_blank\",\n href: \"https://www.w3schools.com/\",\n theme: \"default\",\n type: \"button\",\n fullWidth: true,\n text: \"Ford Button\"\n }\n },\n {\n make: 'Porsche', model: 'Boxster', price: 72000, button: {\n disabled: false,\n variant: \"secondary\",\n size: \"s\",\n target: \"_blank\",\n href: \"https://www.w3schools.com/\",\n theme: \"default\",\n type: \"button\",\n fullWidth: true,\n text: \"Porsche Button\"\n }\n }\n];\n\nexport default {\n title: 'Components/Table (advanced)',\n args: {\n tableHeight: 'auto',\n pagination: false,\n paginationPageSize: 10,\n currentPage: 1,\n rowHeight: 40,\n showLoading: false,\n buttonRendererOptions: {\n onButtonClick: (params, event) => {\n console.log('Button clicked:', params, event);\n }\n }\n },\n argTypes: {\n tableHeight: {\n table: {\n type: {\n summary: 'Options',\n detail: 'Default: \"auto\"\\nExample for fixed height: \"400px\"',\n }\n },\n },\n paginationPageSize: {\n description: \"Results per page: minimum 10 - maximum 30\",\n control: { type: 'number', min: 10, max: 30, step: 10 }\n },\n showLoading: {\n options: [true, false],\n control: { type: 'radio' },\n },\n rowHeight: {\n options: ['compact', 'default'],\n control: { type: 'radio' },\n },\n filterOrientation: {\n options: ['sidebar', 'topbar', 'none'],\n control: { type: 'radio' },\n },\n columnDefs: {\n table: {\n type: {\n summary: 'Column header options',\n detail: 'Standard columns:\\nheaderName: \"Model\", \\nfield: \"model\", \\nsortable: true (optional),\\nsort: \"desc\" (optional) => descending sort (show icon)\\nunSortIcon: true (optional) => unsorted (show icon)\\n\\nSpecial columns:\\nheaderName: \"\",\\nfield: \"button\"\\nheaderName: \"\",\\nfield: \"link\"',\n },\n },\n },\n rowData: {\n table: {\n type: {\n summary: 'Row data options',\n detail: 'Standard row values:\\nmake: \"Toyota\", \\nmodel: \"Celica\", \\nprice: 35000 \\n\\nSpecial row values (incl buttons):\\nmake: \"Porsche\",\\nmodel: \"Boxster\",\\nprice: \"72000\",\\nbutton: { \\ndisabled: false (optional),\\nvariant: \"outline\" (optional)\\nsize: \"s\" (optional),\\ntext: \"Button\"\\n...other ifx-button properties\\n}',\n },\n },\n },\n buttonRendererOptions: {\n control: 'object',\n description: 'Options for button cell renderer, including event handlers.',\n table: {\n type: {\n summary: 'Button Renderer Options',\n detail: 'Custom event handlers and other options for the button cell renderer in the table.'\n },\n },\n },\n }\n};\n\n\n\nconst DefaultTemplate = (args) => {\n if (args.filterOrientation === 'none') {\n const table = `<ifx-table\n row-height=\"${args.rowHeight}\"\n cols='${JSON.stringify(args.columnDefs)}'\n rows='${JSON.stringify(args.rowData)}'\n table-height=\"${args.tableHeight}\"\n pagination=\"${args.pagination}\"\n pagination-page-size=\"${args.paginationPageSize}\"\n filter-orientation=\"${args.filterOrientation}\">\n</ifx-table>`;\n return table;\n } else {\n //sidebar\n const filterAccordions = args.columnDefs.map(column => {\n const uniqueColValues = [...new Set(args.rowData.map(row => row[column.field]))];\n const filterOptions = uniqueColValues.map((option, index) => {\n return `<ifx-list-entry slot=\"slot${index}\" label=\"${option}\" value=\"false\"></ifx-list-entry>`;\n }).join('');\n\n return `\n <ifx-filter-accordion slot=\"filter-accordion\" filter-group-name=\"${column.field}\">\n <ifx-list slot=\"list\" type=\"checkbox\" name=\"${column.field}\" max-visible-items=\"6\">\n ${filterOptions}\n </ifx-list>\n </ifx-filter-accordion>\n `;\n }).join('');\n\n //topbar\n const filterComponents = args.columnDefs.map((column, index) => {\n const uniqueColValues = [...new Set(args.rowData.map(row => row[column.field]))];\n const options = uniqueColValues.map(option => ({\n value: option,\n label: option,\n selected: false\n }));\n\n // Directly use JSON.stringify without replacing quotes\n const optionsString = JSON.stringify(options);\n\n return `\n <ifx-set-filter slot=\"filter-component-${index + 1}\"\n options='${optionsString}' \n filter-label='${column.headerName}'\n filter-name='${column.field}'\n type='multi-select'\n search-enabled='true'>\n </ifx-set-filter>\n `;\n }).join('\\n');\n\n\n\n const filterTypeGroupComponent = args.filterOrientation === 'sidebar'\n ? `<ifx-filter-type-group slot=\"sidebar-filter\">\n <div slot=\"filter-search\">\n <ifx-filter-search filter-orientation=\"sidebar\" filter-name=\"search\"></ifx-filter-search>\n </div>\n ${filterAccordions}\n </ifx-filter-type-group>`\n :\n `<ifx-filter-bar slot=\"topbar-filter\" max-shown-filters=\"3\">\n <ifx-filter-search slot=\"filter-search\" filter-orientation=\"topbar\"></ifx-filter-search>\n ${filterComponents}\n </ifx-filter-bar>`;\n\n const table = `<ifx-table\n row-height=\"${args.rowHeight}\"\n cols='${JSON.stringify(args.columnDefs)}'\n rows='${JSON.stringify(args.rowData)}'\n table-height=\"${args.tableHeight}\"\n pagination=\"${args.pagination}\"\n pagination-page-size=\"${args.paginationPageSize}\"\n filter-orientation=\"${args.filterOrientation}\">\n ${filterTypeGroupComponent}\n</ifx-table>`;\n\n return table;\n }\n};\n\n\n\nexport const Pagination = DefaultTemplate.bind({});\nPagination.args = {\n pagination: true,\n paginationPageSize: 10,\n rowHeight: 'default',\n columnDefs: columnDefs,\n rowData: rowData,\n filterOrientation: 'none',\n};\n\n\nconst CustomCellTemplate = (args) => {\n const table = `\n <ifx-table\n row-height=\"${args.rowHeight}\"\n cols='${JSON.stringify(args.columnDefs)}'\n rows='${JSON.stringify(args.rowData)}'\n table-height=\"${args.tableHeight}\"\n pagination=\"${args.pagination}\"\n pagination-page-size=\"${args.paginationPageSize}\"\n filter-orientation=\"${args.filterOrientation}\">\n </ifx-table>`;\n return table;\n};\n\n\n\nexport const IncludesButtons = CustomCellTemplate.bind({});\nIncludesButtons.args = {\n rowHeight: 'default',\n columnDefs: columnDefsWithButtonCol,\n rowData: rowDataWithButtonCol,\n filterOrientation: 'none',\n pagination: false,\n paginationPageSize: 10,\n};\n\nexport const SidebarFilter = DefaultTemplate.bind({});\nSidebarFilter.args = {\n rowHeight: 'default',\n columnDefs: columnDefs,\n rowData: rowData,\n filterOrientation: 'sidebar',\n buttonRendererOptions: {\n onButtonClick: (params, event) => {\n console.log('Button clicked:', params, event);\n }\n }\n};\n\nexport const TopbarFilter = DefaultTemplate.bind({});\nTopbarFilter.args = {\n rowHeight: 'default',\n columnDefs: columnDefs,\n rowData: rowData,\n filterOrientation: 'topbar',\n buttonRendererOptions: {\n onButtonClick: (params, event) => {\n console.log('Button clicked:', params, event);\n }\n }\n};\n"]}
|
1
|
+
{"version":3,"file":"table.stories.js","sourceRoot":"","sources":["../../../src/components/table-advanced-version/table.stories.ts"],"names":[],"mappings":"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","sourcesContent":["const columnDefs = [\n { headerName: 'Make', field: 'make', sortable: true, sort: 'desc', unSortIcon: true },\n { headerName: 'Model', field: 'model', sortable: true, unSortIcon: true },\n { headerName: 'Price', field: 'price' },\n { headerName: 'Age', field: 'age' }\n];\n\nconst rowData = [\n { make: 'Toyota', model: 'Celica', price: 35000, age: 10 },\n { make: 'Ford', model: 'Mondeo', price: 32000, age: 12 },\n { make: 'Porsche', model: 'Boxster', price: 72000 },\n { make: 'Bmw', model: 'x', price: 72000 },\n { make: 'Mercedes', model: 'y', price: 72000 },\n { make: 'Ferrari', model: 'z', price: 72000 },\n { make: 'Chrysler', model: 'a', price: 72000 },\n { make: 'Range rover', model: 'b', price: 72000 },\n { make: 'Tesla', model: 'x', price: 72000 },\n { make: 'Audi', model: '3', price: 72000 },\n { make: 'Landrover', model: 'x', price: 72000 },\n];\n\nconst columnDefsWithButtonCol = [\n { headerName: 'Make', field: 'make', sortable: true, sort: 'desc', unSortIcon: true },\n { headerName: 'Model', field: 'model', sortable: true, unSortIcon: true },\n { headerName: 'Price', field: 'price' },\n { headerName: 'Age', field: 'age' },\n {\n headerName: '',\n field: 'button',\n }\n];\n\n\nconst rowDataWithButtonCol = [\n {\n make: 'Toyota', model: 'Celica', price: 35000, age: 10, button: {\n disabled: false,\n variant: \"secondary\",\n size: \"s\",\n target: \"_blank\",\n href: \"https://www.w3schools.com/\",\n theme: \"default\",\n type: \"button\",\n fullWidth: true,\n text: \"Toyota Button\"\n }\n },\n {\n make: 'Ford', model: 'Mondeo', price: 32000, age: 12, button: {\n disabled: false,\n variant: \"secondary\",\n size: \"s\",\n target: \"_blank\",\n href: \"https://www.w3schools.com/\",\n theme: \"default\",\n type: \"button\",\n fullWidth: true,\n text: \"Ford Button\"\n }\n },\n {\n make: 'Porsche', model: 'Boxster', price: 72000, button: {\n disabled: false,\n variant: \"secondary\",\n size: \"s\",\n target: \"_blank\",\n href: \"https://www.w3schools.com/\",\n theme: \"default\",\n type: \"button\",\n fullWidth: true,\n text: \"Porsche Button\"\n }\n }\n];\n\nexport default {\n title: 'Components/Table (advanced)',\n args: {\n tableHeight: 'auto',\n pagination: false,\n paginationPageSize: 10,\n rowHeight: 40,\n showLoading: false,\n },\n argTypes: {\n tableHeight: {\n description: 'Set the height of the table.',\n table: {\n category: 'ifx-table props',\n type: {\n summary: 'Options',\n detail: 'Default: \"auto\"\\nExample for fixed height: \"400px\"',\n }\n },\n },\n pagination: {\n description: 'Show pagination control.',\n control: { type: 'boolean' },\n table: {\n category: 'ifx-table props',\n defaultValue: {\n summary: true\n },\n type: {\n summary: 'Boolean',\n },\n },\n },\n paginationPageSize: {\n description: \"Results per page: minimum 10 - maximum 30.\",\n control: { type: 'number', min: 10, max: 30, step: 10 },\n table: {\n category: 'ifx-table props',\n defaultValue: {\n summary: 10\n },\n type: {\n summary: 'Number',\n },\n },\n },\n showLoading: {\n description: 'Show loading spinner.',\n options: [true, false],\n control: { type: 'radio' },\n table: {\n category: 'ifx-table props',\n defaultValue: {\n summary: false\n },\n },\n },\n rowHeight: {\n description: 'Set the height of the rows.',\n options: ['compact', 'default'],\n control: { type: 'radio' },\n table: {\n category: 'ifx-table props',\n defaultValue: {\n summary: 'default'\n },\n },\n },\n filterOrientation: {\n description: 'Set the filter orientation.',\n options: ['sidebar', 'topbar', 'none'],\n control: { type: 'radio' },\n table: {\n category: 'ifx-table props',\n defaultValue: {\n summary: 'none'\n },\n },\n },\n columnDefs: {\n description: 'Column header options',\n name: 'cols',\n table: {\n category: 'ifx-table props',\n type: {\n summary: 'Column header options',\n detail: 'Standard columns:\\nheaderName: \"Model\", \\nfield: \"model\", \\nsortable: true (optional),\\nsort: \"desc\" (optional) => descending sort (show icon)\\nunSortIcon: true (optional) => unsorted (show icon)\\n\\nSpecial columns:\\nheaderName: \"\",\\nfield: \"button\"\\nheaderName: \"\",\\nfield: \"link\"',\n },\n },\n },\n rowData: {\n description: 'Row data options',\n name: 'rows',\n table: {\n category: 'ifx-table props',\n type: {\n summary: 'Row data options',\n detail: 'Standard row values:\\nmake: \"Toyota\", \\nmodel: \"Celica\", \\nprice: 35000 \\n\\nSpecial row values (incl buttons):\\nmake: \"Porsche\",\\nmodel: \"Boxster\",\\nprice: \"72000\",\\nbutton: { \\ndisabled: false (optional),\\nvariant: \"outline\" (optional)\\nsize: \"s\" (optional),\\ntext: \"Button\"\\n...other ifx-button properties\\n}',\n },\n },\n },\n }\n};\n\n\n\nconst DefaultTemplate = (args) => {\n if (args.filterOrientation === 'none') {\n const table = `<ifx-table\n row-height=\"${args.rowHeight}\"\n cols='${JSON.stringify(args.columnDefs)}'\n rows='${JSON.stringify(args.rowData)}'\n table-height=\"${args.tableHeight}\"\n pagination=\"${args.pagination}\"\n pagination-page-size=\"${args.paginationPageSize}\"\n filter-orientation=\"${args.filterOrientation}\">\n</ifx-table>`;\n return table;\n } else {\n //sidebar\n const filterAccordions = args.columnDefs.map(column => {\n const uniqueColValues = [...new Set(args.rowData.map(row => row[column.field]))];\n const filterOptions = uniqueColValues.map((option, index) => {\n return `<ifx-list-entry slot=\"slot${index}\" label=\"${option}\" value=\"false\"></ifx-list-entry>`;\n }).join('');\n\n return `\n <ifx-filter-accordion slot=\"filter-accordion\" filter-group-name=\"${column.field}\">\n <ifx-list slot=\"list\" type=\"checkbox\" name=\"${column.field}\" max-visible-items=\"6\">\n ${filterOptions}\n </ifx-list>\n </ifx-filter-accordion>\n `;\n }).join('');\n\n //topbar\n const filterComponents = args.columnDefs.map((column, index) => {\n const uniqueColValues = [...new Set(args.rowData.map(row => row[column.field]))];\n const options = uniqueColValues.map(option => ({\n value: option,\n label: option,\n selected: false\n }));\n\n // Directly use JSON.stringify without replacing quotes\n const optionsString = JSON.stringify(options);\n\n return `\n <ifx-set-filter slot=\"filter-component-${index + 1}\"\n options='${optionsString}' \n filter-label='${column.headerName}'\n filter-name='${column.field}'\n type='multi-select'\n search-enabled='true'>\n </ifx-set-filter>\n `;\n }).join('\\n');\n\n\n\n const filterTypeGroupComponent = args.filterOrientation === 'sidebar'\n ? `<ifx-filter-type-group slot=\"sidebar-filter\">\n <div slot=\"filter-search\">\n <ifx-filter-search filter-orientation=\"sidebar\" filter-name=\"search\"></ifx-filter-search>\n </div>\n ${filterAccordions}\n </ifx-filter-type-group>`\n :\n `<ifx-filter-bar slot=\"topbar-filter\" max-shown-filters=\"3\">\n <ifx-filter-search slot=\"filter-search\" filter-orientation=\"topbar\"></ifx-filter-search>\n ${filterComponents}\n </ifx-filter-bar>`;\n\n const table = `<ifx-table\n row-height=\"${args.rowHeight}\"\n cols='${JSON.stringify(args.columnDefs)}'\n rows='${JSON.stringify(args.rowData)}'\n table-height=\"${args.tableHeight}\"\n pagination=\"${args.pagination}\"\n pagination-page-size=\"${args.paginationPageSize}\"\n filter-orientation=\"${args.filterOrientation}\">\n ${filterTypeGroupComponent}\n</ifx-table>`;\n\n return table;\n }\n};\n\n\n\nexport const Pagination = DefaultTemplate.bind({});\nPagination.args = {\n pagination: true,\n paginationPageSize: 10,\n rowHeight: 'default',\n columnDefs: columnDefs,\n rowData: rowData,\n filterOrientation: 'none',\n};\n\n\nconst CustomCellTemplate = (args) => {\n const table = `\n <ifx-table\n row-height=\"${args.rowHeight}\"\n cols='${JSON.stringify(args.columnDefs)}'\n rows='${JSON.stringify(args.rowData)}'\n table-height=\"${args.tableHeight}\"\n pagination=\"${args.pagination}\"\n pagination-page-size=\"${args.paginationPageSize}\"\n filter-orientation=\"${args.filterOrientation}\">\n </ifx-table>`;\n return table;\n};\n\n\n\nexport const IncludesButtons = CustomCellTemplate.bind({});\nIncludesButtons.args = {\n rowHeight: 'default',\n columnDefs: columnDefsWithButtonCol,\n rowData: rowDataWithButtonCol,\n filterOrientation: 'none',\n pagination: false,\n paginationPageSize: 10,\n};\n\nexport const SidebarFilter = DefaultTemplate.bind({});\nSidebarFilter.args = {\n rowHeight: 'default',\n columnDefs: columnDefs,\n rowData: rowData,\n filterOrientation: 'sidebar',\n};\n\nexport const TopbarFilter = DefaultTemplate.bind({});\nTopbarFilter.args = {\n rowHeight: 'default',\n columnDefs: columnDefs,\n rowData: rowData,\n filterOrientation: 'topbar',\n};\n"]}
|
@@ -129,9 +129,7 @@ export default {
|
|
129
129
|
},
|
130
130
|
},
|
131
131
|
ifxInput: {
|
132
|
-
description: `A custom event *ifxInput* is emitted immediately after the value of *<ifx-textarea>* changes
|
133
|
-
event.detail: string
|
134
|
-
`,
|
132
|
+
description: `A custom event *ifxInput* is emitted immediately after the value of *<ifx-textarea>* changes.`,
|
135
133
|
table: {
|
136
134
|
category: 'custom events',
|
137
135
|
type: {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"textarea.stories.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACd,KAAK,EAAE,qBAAqB;IAC5B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,IAAI,EAAE;QACL,OAAO,
|
1
|
+
{"version":3,"file":"textarea.stories.js","sourceRoot":"","sources":["../../../src/components/textarea/textarea.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n\ttitle: 'Components/Textarea',\n\ttags: ['autodocs'],\n\targs: {\n\t\tcaption: 'Caption text, description, error notification',\n\t\tcols: 43,\n\t\tdisabled: false,\n\t\terror: false,\n\t\tlabel: 'Label Text',\n\t\tmaxlength: undefined,\n\t\tname: 'textarea',\n\t\tplaceholder: 'Placeholder',\n\t\treadOnly: false,\n\t\tresize: 'both',\n\t\trows: 5,\n\t\tvalue: '',\n\t\twrap: 'soft'\n\t},\n\targTypes: {\n\t\tcaption: {\n\t\t\tdescription: 'Set the caption text of textarea.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t},\n\t\t},\n\t\tcols: {\n\t\t\tdescription: 'Set the visible width of the textarea control.',\n\t\t\tcontrol: { type: 'number', min: 0 },\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 2,\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tdisabled: {\n\t\t\tdescription: 'Disables the user interaction when set to true.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: false,\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\terror: {\n\t\t\tdescription: 'Set the component to error state.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: false,\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tlabel: {\n\t\t\tdescription: 'Set the label of textarea component.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t},\n\t\t},\n\t\tmaxlength: {\n\t\t\tdescription: 'Set the maximum string length user can enter.',\n\t\t\ttype: 'number',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t}\n\t\t},\n\t\tname: {\n\t\t\tdescription: 'The name of the control. Useful for form handling.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 'ifx-textarea-[n]',\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t\tplaceholder: {\n\t\t\tdescription: 'Set the placeholder text of textarea.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t}\n\t\t},\n\t\treadOnly: {\n\t\t\tname: 'read-only',\n\t\t\tdescription: `Text cannot be edited when set to true.\\n \n*Note: It is different from disabled prop, control is focusable in readOnly mode unlike disabled.*`,\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 'false',\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tresize: {\n\t\t\tdescription: 'Sets whether the textarea is resizable, and if so, in which directions.',\n\t\t\tcontrol: 'radio',\n\t\t\toptions: ['both', 'vertical', 'horizontal', 'none'],\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 'none',\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\trows: {\n\t\t\tdescription: 'Set the number of visible text lines for the textrarea control.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 2,\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tvalue: {\n\t\t\tdescription: 'Current value of the textarea.',\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t},\n\t\t},\n\t\twrap: {\n\t\t\tdescription: 'Indicates how the control should wrap the value for form submission.',\n\t\t\tcontrol: 'radio',\n\t\t\toptions: ['soft', 'hard', 'off'],\n\t\t\ttable: {\n\t\t\t\tcategory: 'ifx-textarea props',\n\t\t\t\tdefaultValue: {\n\t\t\t\t\tsummary: 'soft',\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tifxInput: {\n\t\t\tdescription: `A custom event *ifxInput* is emitted immediately after the value of *<ifx-textarea>* changes.`,\n\t\t\ttable: {\n\t\t\t\tcategory: 'custom events',\n\t\t\t\ttype: {\n\t\t\t\t\tsummary: 'Framework integration',\n\t\t\t\t\tdetail: `\nReact: onIfxInput={handleInput}\nVue: @ifxInput=\"handleInput\"\nAngular: (ifxInput)=\"handleInput()\"\nVanillaJs: .addEventListener(\"ifxInput\", (event) => {/*handle input*/});`,\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t},\n}\n\nconst Template = (args) => {\n\tconst wrapper = document.createElement('div');\n\twrapper.innerHTML = `\n<ifx-textarea \n\tcaption=\"${args.caption}\"\n\tcols=\"${args.cols}\"\n\tdisabled=\"${args.disabled}\"\n\terror=\"${args.error}\"\n\tlabel=\"${args.label}\"\n\tmaxlength=\"${args.maxlength}\"\n\tname=\"${args.name}\"\n\tplaceholder=\"${args.placeholder}\"\n\tread-only=\"${args.readOnly}\"\n\tresize=\"${args.resize}\"\n\trows=\"${args.rows}\"\n\tvalue=\"${args.value}\"\n\twrap=\"${args.wrap}\"\n/>\n`;\n\tconst textarea = wrapper.querySelector('ifx-textarea');\n\ttextarea.addEventListener('ifxInput', action('ifxInput'));\n\n\treturn textarea;\n};\n\nexport const Default = Template.bind({});"]}
|
@@ -4,22 +4,35 @@ declare const _default: {
|
|
4
4
|
tableHeight: string;
|
5
5
|
pagination: boolean;
|
6
6
|
paginationPageSize: number;
|
7
|
-
currentPage: number;
|
8
7
|
rowHeight: number;
|
9
8
|
showLoading: boolean;
|
10
|
-
buttonRendererOptions: {
|
11
|
-
onButtonClick: (params: any, event: any) => void;
|
12
|
-
};
|
13
9
|
};
|
14
10
|
argTypes: {
|
15
11
|
tableHeight: {
|
12
|
+
description: string;
|
16
13
|
table: {
|
14
|
+
category: string;
|
17
15
|
type: {
|
18
16
|
summary: string;
|
19
17
|
detail: string;
|
20
18
|
};
|
21
19
|
};
|
22
20
|
};
|
21
|
+
pagination: {
|
22
|
+
description: string;
|
23
|
+
control: {
|
24
|
+
type: string;
|
25
|
+
};
|
26
|
+
table: {
|
27
|
+
category: string;
|
28
|
+
defaultValue: {
|
29
|
+
summary: boolean;
|
30
|
+
};
|
31
|
+
type: {
|
32
|
+
summary: string;
|
33
|
+
};
|
34
|
+
};
|
35
|
+
};
|
23
36
|
paginationPageSize: {
|
24
37
|
description: string;
|
25
38
|
control: {
|
@@ -28,45 +41,71 @@ declare const _default: {
|
|
28
41
|
max: number;
|
29
42
|
step: number;
|
30
43
|
};
|
44
|
+
table: {
|
45
|
+
category: string;
|
46
|
+
defaultValue: {
|
47
|
+
summary: number;
|
48
|
+
};
|
49
|
+
type: {
|
50
|
+
summary: string;
|
51
|
+
};
|
52
|
+
};
|
31
53
|
};
|
32
54
|
showLoading: {
|
55
|
+
description: string;
|
33
56
|
options: boolean[];
|
34
57
|
control: {
|
35
58
|
type: string;
|
36
59
|
};
|
60
|
+
table: {
|
61
|
+
category: string;
|
62
|
+
defaultValue: {
|
63
|
+
summary: boolean;
|
64
|
+
};
|
65
|
+
};
|
37
66
|
};
|
38
67
|
rowHeight: {
|
68
|
+
description: string;
|
39
69
|
options: string[];
|
40
70
|
control: {
|
41
71
|
type: string;
|
42
72
|
};
|
73
|
+
table: {
|
74
|
+
category: string;
|
75
|
+
defaultValue: {
|
76
|
+
summary: string;
|
77
|
+
};
|
78
|
+
};
|
43
79
|
};
|
44
80
|
filterOrientation: {
|
81
|
+
description: string;
|
45
82
|
options: string[];
|
46
83
|
control: {
|
47
84
|
type: string;
|
48
85
|
};
|
49
|
-
};
|
50
|
-
columnDefs: {
|
51
86
|
table: {
|
52
|
-
|
87
|
+
category: string;
|
88
|
+
defaultValue: {
|
53
89
|
summary: string;
|
54
|
-
detail: string;
|
55
90
|
};
|
56
91
|
};
|
57
92
|
};
|
58
|
-
|
93
|
+
columnDefs: {
|
94
|
+
description: string;
|
95
|
+
name: string;
|
59
96
|
table: {
|
97
|
+
category: string;
|
60
98
|
type: {
|
61
99
|
summary: string;
|
62
100
|
detail: string;
|
63
101
|
};
|
64
102
|
};
|
65
103
|
};
|
66
|
-
|
67
|
-
control: string;
|
104
|
+
rowData: {
|
68
105
|
description: string;
|
106
|
+
name: string;
|
69
107
|
table: {
|
108
|
+
category: string;
|
70
109
|
type: {
|
71
110
|
summary: string;
|
72
111
|
detail: 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.abb5fbdf690614c5084ce3278751d5fcad7d6056.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",
|