npm - @infineon/infineon-design-system-stencil - Versions diffs - 30.9.3--canary.1679.8d0c83c3f0040ae0386585c5203298c7d94911f3.0 → 30.9.3--canary.1640.c246fbcdce3247ffada7a2fffa49d05593d4088f.0 - Mend

@infineon/infineon-design-system-stencil 30.9.3--canary.1679.8d0c83c3f0040ae0386585c5203298c7d94911f3.0 → 30.9.3--canary.1640.c246fbcdce3247ffada7a2fffa49d05593d4088f.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.

Files changed (960) hide show

package/dist/collection/components/table-advanced-version/table.stories.js CHANGED Viewed

@@ -74,42 +74,84 @@ export default {
         tableHeight: 'auto',
         pagination: false,
         paginationPageSize: 10,
-        currentPage: 1,
         rowHeight: 40,
         showLoading: false,
-        buttonRendererOptions: {
-            onButtonClick: (params, event) => {
-                console.log('Button clicked:', params, event);
-            }
-        }
     },
     argTypes: {
         tableHeight: {
+            description: 'Set the height of the table.',
             table: {
+                category: 'ifx-table props',
                 type: {
                     summary: 'Options',
                     detail: 'Default: "auto"\nExample for fixed height: "400px"',
                 }
             },
         },
+        pagination: {
+            description: 'Show pagination control.',
+            control: { type: 'boolean' },
+            table: {
+                category: 'ifx-table props',
+                defaultValue: {
+                    summary: true
+                },
+                type: {
+                    summary: 'Boolean',
+                },
+            },
+        },
         paginationPageSize: {
-            description: "Results per page: minimum 10 - maximum 30",
-            control: { type: 'number', min: 10, max: 30, step: 10 }
+            description: "Results per page: minimum 10 - maximum 30.",
+            control: { type: 'number', min: 10, max: 30, step: 10 },
+            table: {
+                category: 'ifx-table props',
+                defaultValue: {
+                    summary: 10
+                },
+                type: {
+                    summary: 'Number',
+                },
+            },
         },
         showLoading: {
+            description: 'Show loading spinner.',
             options: [true, false],
             control: { type: 'radio' },
+            table: {
+                category: 'ifx-table props',
+                defaultValue: {
+                    summary: false
+                },
+            },
         },
         rowHeight: {
+            description: 'Set the height of the rows.',
             options: ['compact', 'default'],
             control: { type: 'radio' },
+            table: {
+                category: 'ifx-table props',
+                defaultValue: {
+                    summary: 'default'
+                },
+            },
         },
         filterOrientation: {
+            description: 'Set the filter orientation.',
             options: ['sidebar', 'topbar', 'none'],
             control: { type: 'radio' },
+            table: {
+                category: 'ifx-table props',
+                defaultValue: {
+                    summary: 'none'
+                },
+            },
         },
         columnDefs: {
+            description: 'Column header options',
+            name: 'cols',
             table: {
+                category: 'ifx-table props',
                 type: {
                     summary: 'Column header options',
                     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,37 +159,90 @@ export default {
             },
         },
         rowData: {
+            description: 'Row data options',
+            name: 'rows',
             table: {
+                category: 'ifx-table props',
                 type: {
                     summary: 'Row data options',
                     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}',
                 },
             },
         },
-        buttonRendererOptions: {
-            control: 'object',
-            description: 'Options for button cell renderer, including event handlers.',
-            table: {
-                type: {
-                    summary: 'Button Renderer Options',
-                    detail: 'Custom event handlers and other options for the button cell renderer in the table.'
-                },
-            },
-        },
     }
 };
 const DefaultTemplate = (args) => {
-    const table = `
-    <ifx-table
-      row-height="${args.rowHeight}"
-      cols='${JSON.stringify(args.columnDefs)}'
-      rows='${JSON.stringify(args.rowData)}'
-      table-height="${args.tableHeight}"
-      pagination="${args.pagination}"
-      pagination-page-size="${args.paginationPageSize}"
-      filter-orientation="${args.filterOrientation}">
-    </ifx-table>`;
-    return table;
+    if (args.filterOrientation === 'none') {
+        const table = `<ifx-table
+    row-height="${args.rowHeight}"
+    cols='${JSON.stringify(args.columnDefs)}'
+    rows='${JSON.stringify(args.rowData)}'
+    table-height="${args.tableHeight}"
+    pagination="${args.pagination}"
+    pagination-page-size="${args.paginationPageSize}"
+    filter-orientation="${args.filterOrientation}">
+</ifx-table>`;
+        return table;
+    }
+    else {
+        //sidebar
+        const filterAccordions = args.columnDefs.map(column => {
+            const uniqueColValues = [...new Set(args.rowData.map(row => row[column.field]))];
+            const filterOptions = uniqueColValues.map((option, index) => {
+                return `<ifx-list-entry slot="slot${index}" label="${option}" value="false"></ifx-list-entry>`;
+            }).join('');
+            return `
+      <ifx-filter-accordion slot="filter-accordion" filter-group-name="${column.field}">
+        <ifx-list slot="list" type="checkbox" name="${column.field}" max-visible-items="6">
+          ${filterOptions}
+        </ifx-list>
+      </ifx-filter-accordion>
+    `;
+        }).join('');
+        //topbar
+        const filterComponents = args.columnDefs.map((column, index) => {
+            const uniqueColValues = [...new Set(args.rowData.map(row => row[column.field]))];
+            const options = uniqueColValues.map(option => ({
+                value: option,
+                label: option,
+                selected: false
+            }));
+            // Directly use JSON.stringify without replacing quotes
+            const optionsString = JSON.stringify(options);
+            return `
+        <ifx-set-filter slot="filter-component-${index + 1}"
+            options='${optionsString}'
+            filter-label='${column.headerName}'
+            filter-name='${column.field}'
+            type='multi-select'
+            search-enabled='true'>
+          </ifx-set-filter>
+          `;
+        }).join('\n');
+        const filterTypeGroupComponent = args.filterOrientation === 'sidebar'
+            ? `<ifx-filter-type-group slot="sidebar-filter">
+        <div slot="filter-search">
+          <ifx-filter-search filter-orientation="sidebar" filter-name="search"></ifx-filter-search>
+        </div>
+        ${filterAccordions}
+    </ifx-filter-type-group>`
+            :
+                `<ifx-filter-bar slot="topbar-filter" max-shown-filters="3">
+        <ifx-filter-search slot="filter-search" filter-orientation="topbar"></ifx-filter-search>
+        ${filterComponents}
+   </ifx-filter-bar>`;
+        const table = `<ifx-table
+    row-height="${args.rowHeight}"
+    cols='${JSON.stringify(args.columnDefs)}'
+    rows='${JSON.stringify(args.rowData)}'
+    table-height="${args.tableHeight}"
+    pagination="${args.pagination}"
+    pagination-page-size="${args.paginationPageSize}"
+    filter-orientation="${args.filterOrientation}">
+    ${filterTypeGroupComponent}
+</ifx-table>`;
+        return table;
+    }
 };
 export const Pagination = DefaultTemplate.bind({});
 Pagination.args = {
@@ -186,11 +281,6 @@ SidebarFilter.args = {
     columnDefs: columnDefs,
     rowData: rowData,
     filterOrientation: 'sidebar',
-    buttonRendererOptions: {
-        onButtonClick: (params, event) => {
-            console.log('Button clicked:', params, event);
-        }
-    }
 };
 export const TopbarFilter = DefaultTemplate.bind({});
 TopbarFilter.args = {
@@ -198,10 +288,5 @@ TopbarFilter.args = {
     columnDefs: columnDefs,
     rowData: rowData,
     filterOrientation: 'topbar',
-    buttonRendererOptions: {
-        onButtonClick: (params, event) => {
-            console.log('Button clicked:', params, event);
-        }
-    }
 };
 //# sourceMappingURL=table.stories.js.map

package/dist/collection/components/table-advanced-version/table.stories.js.map CHANGED Viewed

	@@ -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\nconst DefaultTemplate = (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\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"]}

package/dist/collection/components/table-basic-version/table.js CHANGED Viewed

@@ -5,15 +5,11 @@ import { CustomLoadingOverlay } from "./customLoadingOverlay";
 import classNames from "classnames";
 export class Table {
     constructor() {
-        this.gridInitialized = false;
-        this.gridOptions = undefined;
-        this.cols = undefined;
-        this.rows = undefined;
         this.columnDefs = [];
         this.rowData = [];
         this.rowHeight = 'default';
         this.tableHeight = 'auto';
-        this.uniqueKey = undefined;
+        this.gridInitialized = false;
     }
     componentWillLoad() {
         this.uniqueKey = `unique-${Math.floor(Math.random() * 1000000)}`;
@@ -147,7 +143,7 @@ export class Table {
         return {};
     }
     render() {
-        return (h(Host, { key: '80e769cc7a63d358c3ef01b1a67ae6872d56a6c4' }, h("div", { key: 'e656b9c9db4c9446197a578d13b1876c85cefba2', id: "table-wrapper", class: this.getClassNames() }, h("div", { key: '237a4b6b8c863716deea0ceebc2ac826c6c7ae1a', id: `ifxTable-${this.uniqueKey}`, class: "ifx-ag-grid", style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
+        return (h(Host, { key: 'ff940c90b4fd4396cafd1cbfd13476e9225df362' }, h("div", { key: '2da95f49bbcd224297c91168c2c29f6178fa6b2b', id: "table-wrapper", class: this.getClassNames() }, h("div", { key: 'fb5cf41dd677de23d4fb5a7e897b7e1dcd8444f1', id: `ifxTable-${this.uniqueKey}`, class: "ifx-ag-grid", style: this.getTableStyle(), ref: (el) => (this.container = el) }))));
     }
     static get is() { return "ifx-basic-table"; }
     static get originalStyleUrls() {

package/dist/collection/components/table-basic-version/table.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"table.js","sourceRoot":"","sources":["../../../src/components/table-basic-version/table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,UAAU,EAAgD,MAAM,mBAAmB,CAAC;AAC7F,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,UAAU,MAAM,YAAY,CAAC;AAOpC,MAAM,OAAO,KAAK;;QAaR,oBAAe,GAAG,KAAK,CAAC;;;;0BATH,EAAE;uBACL,EAAE;yBACA,SAAS;2BACP,MAAM;;;IAQpC,iBAAiB;QACf,IAAI,CAAC,SAAS,GAAG,UAAU,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,OAAO,CAAC,EAAE,CAAC;QACjE,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,SAAS;QAChC,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,WAAW,GAAG;YACjB,SAAS,EAAE,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;YACjD,YAAY,EAAE,EAAE;YAChB,aAAa,EAAE;gBACb,SAAS,EAAE,IAAI;aAChB;YACD,iBAAiB,EAAE,IAAI;YACvB,uBAAuB,EAAE,IAAI;YAC7B,6BAA6B,EAAE,IAAI;YACnC,yBAAyB,EAAE,IAAI;YAC/B,mBAAmB,EAAE,IAAI,CAAC,mBAAmB;YAC7C,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,uBAAuB,EAAE,oBAAoB;YAC7C,sBAAsB,EAAE,mBAAmB;YAC3C,4BAA4B,EAAE;gBAC5B,iBAAiB,EAAE,GAAG,EAAE,CACtB,oBAAoB,GAAG,IAAI,IAAI,EAAE,CAAC,kBAAkB,EAAE;aACzD;YACD,KAAK,EAAE;gBACL,aAAa,EAAE,gDAAgD;gBAC/D,cAAc,EAAE,kDAAkD;gBAClE,UAAU,EAAE,8FAA8F;aAC3G;YACD,cAAc,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,SAAS,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;YACpF,WAAW,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,SAAS,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;SAClF,CAAC;IACJ,CAAC;IAED,cAAc;QACZ,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;YACnE,IAAI,CAAC;gBACH,IAAG,IAAI,CAAC,IAAI,EAAE,CAAC;oBACb,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAC1C,CAAC;gBACD,IAAG,IAAI,CAAC,IAAI,EAAE,CAAC;oBACb,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBACvC,CAAC;YACH,CAAC;YAAC,OAAO,GAAG,EAAE,CAAC;gBACb,OAAO,CAAC,KAAK,CAAC,wBAAwB,EAAE,GAAG,CAAC,CAAC;YAC/C,CAAC;QACH,CAAC;aAAM,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,EAAE,CAAC;YACtI,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC;YAC5B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC;QAC3B,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,KAAK,CAAC,qCAAqC,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7E,CAAC;IACH,CAAC;IAED,UAAU;QACR,IAAI,IAAI,GAAU,EAAE,CAAC;QACrB,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;YAClC,IAAI,CAAC;gBACH,IAAG,IAAI,CAAC,IAAI,EAAE,CAAC;oBACb,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAC/B,CAAC;YACH,CAAC;YAAC,OAAO,GAAG,EAAE,CAAC;gBACb,OAAO,CAAC,KAAK,CAAC,wBAAwB,EAAE,GAAG,CAAC,CAAC;YAC/C,CAAC;QACH,CAAC;aAAM,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;YACrE,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACnB,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,KAAK,CAAC,6BAA6B,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QAC1D,CAAC;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED,UAAU;QACR,IAAI,IAAI,GAAU,EAAE,CAAC;QAErB,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;YAClC,IAAI,CAAC;gBACH,IAAG,IAAI,CAAC,IAAI,EAAE,CAAC;oBACb,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAC/B,CAAC;YACH,CAAC;YAAC,OAAO,GAAG,EAAE,CAAC;gBACb,OAAO,CAAC,KAAK,CAAC,wBAAwB,EAAE,GAAG,CAAC,CAAC;YAC/C,CAAC;QACH,CAAC;aAAM,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;YACrE,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QACnB,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,KAAK,CAAC,6BAA6B,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;QAC1D,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,mBAAmB,CAAC,MAA8B;QAChD,MAAM,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC;IAChC,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,WAAW,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;QAC9C,IAAI,CAAC,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;QACxC,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;YACpD,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,YAAY,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QAC5D,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;YAC5C,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;YAC5D,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBACjB,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC;oBAC5B,eAAe,EAAE,GAAG;iBACrB,CAAC,CAAC;gBACH,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,YAAY,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;gBAC5D,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;gBACzD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;YAC9B,CAAC;QACH,CAAC;IACH,CAAC;IAED,aAAa;QACX,OAAO,UAAU,CACf,IAAI,CAAC,WAAW,KAAK,MAAM,IAAI,oCAAoC,EACnE,eAAe,CAChB,CAAC;IACJ,CAAC;IAED,aAAa;QACX,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM,EAAE,CAAC;YAChC,OAAO;gBACL,MAAM,EAAE,IAAI,CAAC,WAAW;aACzB,CAAC;QACJ,CAAC;QACD,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,EAAE,EAAC,eAAe,EAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE;gBACjD,4DAAK,EAAE,EAAE,YAAY,IAAI,CAAC,SAAS,EAAE,EAAE,KAAK,EAAC,aAAa,EAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,GAAQ,CAC9H,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element, Host, Prop, State } from '@stencil/core';\nimport { createGrid, FirstDataRenderedEvent, GridApi, GridOptions } from 'ag-grid-community';\nimport { CustomNoRowsOverlay } from './customNoRowsOverlay';\nimport { CustomLoadingOverlay } from './customLoadingOverlay';\nimport classNames from 'classnames';\n\n@Component({\n tag: 'ifx-basic-table',\n styleUrl: 'table.scss',\n shadow: false // only works with shadowdom off because we are using an external library\n})\nexport class Table {\n @State() gridOptions: GridOptions;\n @Prop() cols: any[] \| string;\n @Prop() rows: any[] \| string;\n @State() columnDefs: any[] = [];\n @State() rowData: any[] = [];\n @Prop() rowHeight: string = 'default';\n @Prop() tableHeight: string = 'auto';\n @State() uniqueKey: string;\n @Element() host: HTMLElement;\n \n private container: HTMLDivElement;\n private gridApi: GridApi; \n private gridInitialized = false;\n\n componentWillLoad() {\n this.uniqueKey = `unique-${Math.floor(Math.random() * 1000000)}`;\n this.setColsAndRows(); //needed?\n this.setGridOptions();\n }\n\n setGridOptions() {\n this.gridOptions = {\n rowHeight: this.rowHeight === 'default' ? 40 : 32,\n headerHeight: 40,\n defaultColDef: {\n resizable: true,\n },\n suppressCellFocus: true,\n enableCellTextSelection: true,\n suppressDragLeaveHidesColumns: true,\n suppressRowHoverHighlight: true,\n onFirstDataRendered: this.onFirstDataRendered,\n columnDefs: this.columnDefs,\n rowData: this.rowData,\n loadingOverlayComponent: CustomLoadingOverlay,\n noRowsOverlayComponent: CustomNoRowsOverlay,\n noRowsOverlayComponentParams: {\n noRowsMessageFunc: () =>\n 'No rows found at: ' + new Date().toLocaleTimeString(),\n },\n icons: {\n sortAscending: '<ifx-icon icon=\"arrowtriangleup16\"></ifx-icon>',\n sortDescending: '<ifx-icon icon=\"arrowtriangledown16\"></ifx-icon>',\n sortUnSort: '<a class=\"unsort-icon-custom-color\"><ifx-icon icon=\"arrowtrianglevertikal16\"></ifx-icon></a>',\n },\n rowDragManaged: this.columnDefs.some((col) => col.dndSource === true) ? true : false,\n animateRows: this.columnDefs.some((col) => col.dndSource === true) ? true : false,\n };\n }\n\n setColsAndRows() {\n if (typeof this.rows === 'string' && typeof this.cols === 'string') {\n try {\n if(this.cols) {\n this.columnDefs = JSON.parse(this.cols);\n }\n if(this.rows) {\n this.rowData = JSON.parse(this.rows);\n }\n } catch (err) {\n console.error('Failed to parse input:', err);\n }\n } else if ((Array.isArray(this.rows) \|\| typeof this.rows === 'object') && (Array.isArray(this.cols) \|\| typeof this.cols === 'object')) {\n this.columnDefs = this.cols;\n this.rowData = this.rows;\n } else {\n console.error('Unexpected value for cols and rows:', this.rows, this.cols);\n }\n }\n\n getRowData() {\n let rows: any[] = [];\n if (typeof this.rows === 'string') {\n try {\n if(this.rows) {\n rows = JSON.parse(this.rows);\n }\n } catch (err) {\n console.error('Failed to parse input:', err);\n }\n } else if (Array.isArray(this.rows) \|\| typeof this.rows === 'object') {\n rows = this.rows;\n } else {\n console.error('Unexpected value for rows: ', this.rows);\n }\n\n return rows;\n }\n\n getColData() {\n let cols: any[] = [];\n\n if (typeof this.cols === 'string') {\n try {\n if(this.cols) { \n cols = JSON.parse(this.cols);\n }\n } catch (err) {\n console.error('Failed to parse input:', err);\n }\n } else if (Array.isArray(this.cols) \|\| typeof this.cols === 'object') {\n cols = this.cols;\n } else {\n console.error('Unexpected value for cols: ', this.cols);\n }\n return cols;\n }\n\n onFirstDataRendered(params: FirstDataRenderedEvent) {\n params.api.sizeColumnsToFit();\n }\n\n componentWillUpdate() {\n this.setColsAndRows();\n this.gridOptions.columnDefs = this.columnDefs;\n this.gridOptions.rowData = this.rowData;\n if (this.gridApi) {\n this.gridApi.setGridOption('rowData', this.rowData);\n this.gridApi.setGridOption('columnDefs', this.columnDefs);\n }\n }\n\n componentDidLoad() {\n if (this.container && !this.gridInitialized) {\n this.gridApi = createGrid(this.container, this.gridOptions);\n if (this.gridApi) {\n this.gridApi.sizeColumnsToFit({\n defaultMinWidth: 100,\n });\n this.gridApi.setGridOption('columnDefs', this.getColData());\n this.gridApi.setGridOption('rowData', this.getRowData());\n this.gridInitialized = true; \n }\n }\n }\n\n getClassNames() {\n return classNames(\n this.tableHeight === 'auto' && 'table-wrapper ag-root-wrapper-body',\n 'table-wrapper',\n );\n }\n\n getTableStyle() {\n if (this.tableHeight !== 'auto') {\n return {\n height: this.tableHeight,\n };\n }\n return {};\n }\n\n render() {\n return (\n <Host>\n <div id=\"table-wrapper\" class={this.getClassNames()}>\n <div id={`ifxTable-${this.uniqueKey}`} class=\"ifx-ag-grid\" style={this.getTableStyle()} ref={(el) => (this.container = el)}></div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"table.js","sourceRoot":"","sources":["../../../src/components/table-basic-version/table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, Host, Prop, State } from '@stencil/core';\nimport { createGrid, FirstDataRenderedEvent, GridApi, GridOptions } from 'ag-grid-community';\nimport { CustomNoRowsOverlay } from './customNoRowsOverlay';\nimport { CustomLoadingOverlay } from './customLoadingOverlay';\nimport classNames from 'classnames';\n\n@Component({\n tag: 'ifx-basic-table',\n styleUrl: 'table.scss',\n shadow: false // only works with shadowdom off because we are using an external library\n})\nexport class Table {\n @State() gridOptions: GridOptions;\n @Prop() cols: any[] \| string;\n @Prop() rows: any[] \| string;\n @State() columnDefs: any[] = [];\n @State() rowData: any[] = [];\n @Prop() rowHeight: string = 'default';\n @Prop() tableHeight: string = 'auto';\n @State() uniqueKey: string;\n @Element() host: HTMLElement;\n \n private container: HTMLDivElement;\n private gridApi: GridApi; \n private gridInitialized = false;\n\n componentWillLoad() {\n this.uniqueKey = `unique-${Math.floor(Math.random() * 1000000)}`;\n this.setColsAndRows(); //needed?\n this.setGridOptions();\n }\n\n setGridOptions() {\n this.gridOptions = {\n rowHeight: this.rowHeight === 'default' ? 40 : 32,\n headerHeight: 40,\n defaultColDef: {\n resizable: true,\n },\n suppressCellFocus: true,\n enableCellTextSelection: true,\n suppressDragLeaveHidesColumns: true,\n suppressRowHoverHighlight: true,\n onFirstDataRendered: this.onFirstDataRendered,\n columnDefs: this.columnDefs,\n rowData: this.rowData,\n loadingOverlayComponent: CustomLoadingOverlay,\n noRowsOverlayComponent: CustomNoRowsOverlay,\n noRowsOverlayComponentParams: {\n noRowsMessageFunc: () =>\n 'No rows found at: ' + new Date().toLocaleTimeString(),\n },\n icons: {\n sortAscending: '<ifx-icon icon=\"arrowtriangleup16\"></ifx-icon>',\n sortDescending: '<ifx-icon icon=\"arrowtriangledown16\"></ifx-icon>',\n sortUnSort: '<a class=\"unsort-icon-custom-color\"><ifx-icon icon=\"arrowtrianglevertikal16\"></ifx-icon></a>',\n },\n rowDragManaged: this.columnDefs.some((col) => col.dndSource === true) ? true : false,\n animateRows: this.columnDefs.some((col) => col.dndSource === true) ? true : false,\n };\n }\n\n setColsAndRows() {\n if (typeof this.rows === 'string' && typeof this.cols === 'string') {\n try {\n if(this.cols) {\n this.columnDefs = JSON.parse(this.cols);\n }\n if(this.rows) {\n this.rowData = JSON.parse(this.rows);\n }\n } catch (err) {\n console.error('Failed to parse input:', err);\n }\n } else if ((Array.isArray(this.rows) \|\| typeof this.rows === 'object') && (Array.isArray(this.cols) \|\| typeof this.cols === 'object')) {\n this.columnDefs = this.cols;\n this.rowData = this.rows;\n } else {\n console.error('Unexpected value for cols and rows:', this.rows, this.cols);\n }\n }\n\n getRowData() {\n let rows: any[] = [];\n if (typeof this.rows === 'string') {\n try {\n if(this.rows) {\n rows = JSON.parse(this.rows);\n }\n } catch (err) {\n console.error('Failed to parse input:', err);\n }\n } else if (Array.isArray(this.rows) \|\| typeof this.rows === 'object') {\n rows = this.rows;\n } else {\n console.error('Unexpected value for rows: ', this.rows);\n }\n\n return rows;\n }\n\n getColData() {\n let cols: any[] = [];\n\n if (typeof this.cols === 'string') {\n try {\n if(this.cols) { \n cols = JSON.parse(this.cols);\n }\n } catch (err) {\n console.error('Failed to parse input:', err);\n }\n } else if (Array.isArray(this.cols) \|\| typeof this.cols === 'object') {\n cols = this.cols;\n } else {\n console.error('Unexpected value for cols: ', this.cols);\n }\n return cols;\n }\n\n onFirstDataRendered(params: FirstDataRenderedEvent) {\n params.api.sizeColumnsToFit();\n }\n\n componentWillUpdate() {\n this.setColsAndRows();\n this.gridOptions.columnDefs = this.columnDefs;\n this.gridOptions.rowData = this.rowData;\n if (this.gridApi) {\n this.gridApi.setGridOption('rowData', this.rowData);\n this.gridApi.setGridOption('columnDefs', this.columnDefs);\n }\n }\n\n componentDidLoad() {\n if (this.container && !this.gridInitialized) {\n this.gridApi = createGrid(this.container, this.gridOptions);\n if (this.gridApi) {\n this.gridApi.sizeColumnsToFit({\n defaultMinWidth: 100,\n });\n this.gridApi.setGridOption('columnDefs', this.getColData());\n this.gridApi.setGridOption('rowData', this.getRowData());\n this.gridInitialized = true; \n }\n }\n }\n\n getClassNames() {\n return classNames(\n this.tableHeight === 'auto' && 'table-wrapper ag-root-wrapper-body',\n 'table-wrapper',\n );\n }\n\n getTableStyle() {\n if (this.tableHeight !== 'auto') {\n return {\n height: this.tableHeight,\n };\n }\n return {};\n }\n\n render() {\n return (\n <Host>\n <div id=\"table-wrapper\" class={this.getClassNames()}>\n <div id={`ifxTable-${this.uniqueKey}`} class=\"ifx-ag-grid\" style={this.getTableStyle()} ref={(el) => (this.container = el)}></div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/table-basic-version/table.stories.js CHANGED Viewed

@@ -9,17 +9,29 @@ const rows = [
     { make: 'Toyota', model: 'Celica', price: 35000, age: 10 },
     { make: 'Ford', model: 'Mondeo', price: 32000, age: 12 },
     { make: 'Porsche', model: 'Boxster', price: 72000 },
+    { make: 'Toyota', model: 'Celica', price: 37000, age: 8 },
+    { make: 'Ford', model: 'Mondeo', price: 34000, age: 10 },
+    { make: 'Porsche', model: 'Boxster', price: 72000 },
+    { make: 'Toyota', model: 'Celica', price: 38000, age: 7 },
+    { make: 'Ford', model: 'Mondeo', price: 36000, age: 8 },
+    { make: 'Porsche', model: 'Boxster', price: 72000 },
+    { make: 'Toyota', model: 'Celica', price: 39000, age: 2 },
+    { make: 'Ford', model: 'Mondeo', price: 38000, age: 6 },
+    { make: 'Porsche', model: 'Boxster', price: 72000 },
 ];
 export default {
     title: 'Components/Table (basic)',
     // tags: ['autodocs'],
     args: {
         tableHeight: 'auto',
-        rowHeight: 40,
+        rowHeight: 'default',
     },
     argTypes: {
         tableHeight: {
+            description: 'Controls the height of the table.',
             table: {
+                category: 'ifx-table props',
+                defaultValue: { summary: 'auto' },
                 type: {
                     summary: 'Options',
                     detail: 'Default: "auto"\nExample for fixed height: "400px"',
@@ -27,22 +39,35 @@ export default {
             },
         },
         rowHeight: {
+            description: 'Controls the height of the rows.',
+            table: {
+                category: 'ifx-table props',
+                defaultValue: { summary: 'default' },
+                type: {
+                    summary: 'Options',
+                    detail: 'Default: 40\nCompact: 32\nOptions: 40, 32',
+                },
+            },
             options: ['compact', 'default'],
             control: { type: 'radio' },
         },
         cols: {
+            description: 'The array must be a string for Vanilla JavaScript, and stringified or array object for React/Vue/Angular.',
             table: {
+                category: 'ifx-table props',
                 type: {
                     summary: 'Column header options',
-                    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"',
+                    detail: 'Standard columns:\nheaderName: "Model", \nfield: "model", \nsortable: true (optional),\nsort: "desc" (optional) => descending sort (show icon)\nunSortIcon: true (optional) => unsorted (show icon)\nresizable: false\nflex: 1\nminWidth: 50px\nwidth: 100px\n\nSpecial columns:\nheaderName: "",\nfield: "button"\nheaderName: "",\nfield: "link",',
                 },
             },
         },
         rows: {
+            description: 'The array must be a string for Vanilla JavaScript, and stringified or array object for React/Vue/Angular.',
             table: {
+                category: 'ifx-table props',
                 type: {
                     summary: 'Row data options',
-                    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}',
+                    detail: 'Standard row values:\nmake: "Toyota", \nmodel: "Celica", \nprice: 35000\nresizable: false\nflex: 1\nminWidth: 50px\nwidth: 100px\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}',
                 },
             },
         },
@@ -51,12 +76,14 @@ export default {
 const DefaultTemplate = args => `<ifx-basic-table
 cols='${JSON.stringify(args.cols)}'
 rows='${JSON.stringify(args.rows)}'
-table-height='${args.tableHeight}'>
+table-height='${args.tableHeight}'
+row-height='${args.rowHeight}'>
 </ifx-basic-table>`;
 export const Default = DefaultTemplate.bind({});
 Default.args = {
     cols: cols,
     rows: rows,
+    tableHeight: 'auto',
 };
 export const FixedHeight = DefaultTemplate.bind({});
 FixedHeight.args = {

package/dist/collection/components/table-basic-version/table.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"table.stories.js","sourceRoot":"","sources":["../../../src/components/table-basic-version/table.stories.ts"],"names":[],"mappings":"AAAA,SAAS;AACT,MAAM,IAAI,GAAG;IACX,EAAE,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE;IACrF,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE;IACzE,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IACvC,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE;CACpC,CAAC;AACF,MAAM,IAAI,GAAG;IACX,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE;IAC1D,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE;IACxD,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE;CACpD,CAAC;AAEF,eAAe;IACb,KAAK,EAAE,0BAA0B;IACjC,sBAAsB;IACtB,IAAI,EAAE;QACJ,WAAW,EAAE,MAAM;QACnB,SAAS,EAAE,~~EAAE~~;~~KACd~~;IACD,QAAQ,EAAE;QACR,WAAW,EAAE;YACX,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,SAAS;oBAClB,MAAM,EAAE,oDAAoD;iBAC7D;aACF;SACF;QACD,SAAS,EAAE;YACT,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC;YAC/B,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;QACD,IAAI,EAAE;YACJ,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,~~2RAA2R~~;~~iBAC9R~~;aACF;SACF;QACD,IAAI,EAAE;YACJ,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,kBAAkB;oBAC3B,MAAM,EACJ,~~wTAAwT~~;~~iBAC3T~~;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC;QACxB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;QACzB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;gBACjB,IAAI,CAAC,WAAW;~~mBACb~~,CAAC;AAEpB,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,IAAI;IACV,IAAI,EAAE,IAAI;~~CACX~~,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACpD,WAAW,CAAC,IAAI,GAAG;IACjB,WAAW,EAAE,OAAO;IACpB,IAAI,EAAE,IAAI;IACV,IAAI,EAAE,IAAI;CACX,CAAC","sourcesContent":["//default\nconst cols = [\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];\nconst rows = [\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];\n\nexport default {\n title: 'Components/Table (basic)',\n // tags: ['autodocs'],\n args: {\n tableHeight: 'auto',\n rowHeight: 40,\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 rowHeight: {\n options: ['compact', 'default'],\n control: { type: 'radio' },\n },\n cols: {\n table: {\n type: {\n summary: 'Column header options',\n detail:\n '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 rows: {\n table: {\n type: {\n summary: 'Row data options',\n detail:\n '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\nconst DefaultTemplate = args => `<ifx-basic-table \ncols='${JSON.stringify(args.cols)}' \nrows='${JSON.stringify(args.rows)}'\ntable-height='${args.tableHeight}'>\n</ifx-basic-table>`;\n\nexport const Default = DefaultTemplate.bind({});\nDefault.args = {\n cols: cols,\n rows: rows,\n};\n\nexport const FixedHeight = DefaultTemplate.bind({});\nFixedHeight.args = {\n tableHeight: '400px',\n cols: cols,\n rows: rows,\n};\n"]}
1	+ {"version":3,"file":"table.stories.js","sourceRoot":"","sources":["../../../src/components/table-basic-version/table.stories.ts"],"names":[],"mappings":"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","sourcesContent":["//default\nconst cols = [\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];\nconst rows = [\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: 'Toyota', model: 'Celica', price: 37000, age: 8 },\n { make: 'Ford', model: 'Mondeo', price: 34000, age: 10 },\n { make: 'Porsche', model: 'Boxster', price: 72000 },\n { make: 'Toyota', model: 'Celica', price: 38000, age: 7 },\n { make: 'Ford', model: 'Mondeo', price: 36000, age: 8 },\n { make: 'Porsche', model: 'Boxster', price: 72000 },\n { make: 'Toyota', model: 'Celica', price: 39000, age: 2 },\n { make: 'Ford', model: 'Mondeo', price: 38000, age: 6 },\n { make: 'Porsche', model: 'Boxster', price: 72000 },\n];\n\nexport default {\n title: 'Components/Table (basic)',\n // tags: ['autodocs'],\n args: {\n tableHeight: 'auto',\n rowHeight: 'default',\n },\n argTypes: {\n tableHeight: {\n description: 'Controls the height of the table.',\n table: {\n category: 'ifx-table props',\n defaultValue: { summary: 'auto' },\n type: {\n summary: 'Options',\n detail: 'Default: \"auto\"\\nExample for fixed height: \"400px\"',\n },\n },\n },\n rowHeight: {\n description: 'Controls the height of the rows.',\n table: {\n category: 'ifx-table props',\n defaultValue: { summary: 'default' },\n type: {\n summary: 'Options',\n detail: 'Default: 40\\nCompact: 32\\nOptions: 40, 32',\n },\n },\n options: ['compact', 'default'],\n control: { type: 'radio' },\n },\n cols: {\n description: 'The array must be a string for Vanilla JavaScript, and stringified or array object for React/Vue/Angular.',\n table: {\n category: 'ifx-table props',\n type: {\n summary: 'Column header options',\n detail:\n 'Standard columns:\\nheaderName: \"Model\", \\nfield: \"model\", \\nsortable: true (optional),\\nsort: \"desc\" (optional) => descending sort (show icon)\\nunSortIcon: true (optional) => unsorted (show icon)\\nresizable: false\\nflex: 1\\nminWidth: 50px\\nwidth: 100px\\n\\nSpecial columns:\\nheaderName: \"\",\\nfield: \"button\"\\nheaderName: \"\",\\nfield: \"link\",',\n },\n },\n },\n rows: {\n description: 'The array must be a string for Vanilla JavaScript, and stringified or array object for React/Vue/Angular.',\n table: {\n category: 'ifx-table props',\n type: {\n summary: 'Row data options',\n detail:\n 'Standard row values:\\nmake: \"Toyota\", \\nmodel: \"Celica\", \\nprice: 35000\\nresizable: false\\nflex: 1\\nminWidth: 50px\\nwidth: 100px\\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\nconst DefaultTemplate = args => `<ifx-basic-table \ncols='${JSON.stringify(args.cols)}' \nrows='${JSON.stringify(args.rows)}'\ntable-height='${args.tableHeight}'\nrow-height='${args.rowHeight}'>\n</ifx-basic-table>`;\n\nexport const Default = DefaultTemplate.bind({});\nDefault.args = {\n cols: cols,\n rows: rows,\n tableHeight: 'auto',\n};\n\nexport const FixedHeight = DefaultTemplate.bind({});\nFixedHeight.args = {\n tableHeight: '400px',\n cols: cols,\n rows: rows,\n};\n"]}

package/dist/collection/components/tabs/tab.js CHANGED Viewed

@@ -1,8 +1,6 @@
 import { h } from "@stencil/core";
 export class IfxTab {
     constructor() {
-        this.header = undefined;
-        this.disabled = undefined;
         this.icon = '';
         this.iconPosition = 'left';
     }
@@ -10,7 +8,7 @@ export class IfxTab {
         this.tabHeaderChange.emit(this.header);
     }
     render() {
-        return h("slot", { key: 'b0f03bc9e9281a47ef501031cc13ada97d3d404c' });
+        return h("slot", { key: '159982e12cd57b8ea322152abd5b9bc5e261ba88' });
     }
     static get is() { return "ifx-tab"; }
     static get originalStyleUrls() {

package/dist/collection/components/tabs/tab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../src/components/tabs/tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAOjF,MAAM,OAAO,MAAM~~;;;;oBAIM~~,EAAE;~~4BACgB~~,MAAM~~;;IAG/C~~,mBAAmB;QACjB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IACxC,CAAC;IAED,MAAM;QACJ,OAAO,8DAAQ,CAAC;IAClB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-tab',\n styleUrl: 'tab.scss',\n shadow: false\n})\nexport class IfxTab {\n @Element() el: HTMLElement;\n @Prop() header: string;\n @Prop() disabled: boolean;\n @Prop() icon: string = '';\n @Prop() iconPosition: 'left' \| 'right' = 'left';\n @Event() tabHeaderChange: EventEmitter;\n\n componentWillUpdate() { \n this.tabHeaderChange.emit(this.header)\n }\n\n render() {\n return <slot />;\n }\n}"]}
1	+ {"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../src/components/tabs/tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAOjF,MAAM,OAAO,MAAM;IALnB;QASU,SAAI,GAAW,EAAE,CAAC;QAClB,iBAAY,GAAqB,MAAM,CAAC;KAUjD;IAPC,mBAAmB;QACjB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IACxC,CAAC;IAED,MAAM;QACJ,OAAO,8DAAQ,CAAC;IAClB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'ifx-tab',\n styleUrl: 'tab.scss',\n shadow: false\n})\nexport class IfxTab {\n @Element() el: HTMLElement;\n @Prop() header: string;\n @Prop() disabled: boolean;\n @Prop() icon: string = '';\n @Prop() iconPosition: 'left' \| 'right' = 'left';\n @Event() tabHeaderChange: EventEmitter;\n\n componentWillUpdate() { \n this.tabHeaderChange.emit(this.header)\n }\n\n render() {\n return <slot />;\n }\n}"]}

package/dist/collection/components/tabs/tabs.js CHANGED Viewed

@@ -5,7 +5,6 @@ export class IfxTabs {
         this.orientation = "horizontal";
         this.activeTabIndex = 0;
         this.fullWidth = false;
-        this.internalOrientation = undefined;
         this.internalActiveTabIndex = 0;
         this.internalFocusedTabIndex = 0;
         this.tabRefs = [];
@@ -42,7 +41,7 @@ export class IfxTabs {
     componentWillLoad() {
         this.internalOrientation = this.orientation.toLowerCase() === 'vertical' ? 'vertical' : 'horizontal';
         if (this.internalActiveTabIndex !== this.activeTabIndex) {
-            this.ifxTabChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: this.activeTabIndex });
+            this.ifxChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: this.activeTabIndex });
         }
         ;
         this.onSlotChange();
@@ -155,7 +154,7 @@ export class IfxTabs {
         return `tab-item ${this.fullWidth ? 'full-width' : ""} ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''} ${'icon__' + iconPosition}`;
     }
     handleClick(tab, index) {
-        this.ifxTabChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: index });
+        this.ifxChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: index });
         if (!tab.disabled)
             this.internalActiveTabIndex = index;
     }
@@ -188,15 +187,15 @@ export class IfxTabs {
             if (this.internalFocusedTabIndex !== -1 && !this.tabObjects[this.internalFocusedTabIndex].disabled) {
                 const previouslyActiveTabIndex = this.internalActiveTabIndex;
                 this.internalActiveTabIndex = this.internalFocusedTabIndex;
-                this.ifxTabChange.emit({ previousTab: previouslyActiveTabIndex, currentTab: this.internalFocusedTabIndex });
+                this.ifxChange.emit({ previousTab: previouslyActiveTabIndex, currentTab: this.internalFocusedTabIndex });
             }
         }
     }
     render() {
         var _a;
-        return (h("div", { key: '7d737252faf0c189cd7ca58cbfa5c1f1526cae69', "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation}` }, h("ul", { key: 'e9058cba8865f03c184337d7d3032c4cdf20b6b5', role: "tablist", class: "tabs-list" }, (_a = this.tabObjects) === null || _a === void 0 ? void 0 :
+        return (h("div", { key: '3a022d8b1299785fcfc8e23a0180debdaeebbc19', "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation}` }, h("ul", { key: '5d8d85681ad17528cfd5d51bed56df985e936bcd', role: "tablist", class: "tabs-list" }, (_a = this.tabObjects) === null || _a === void 0 ? void 0 :
             _a.map((tab, index) => (h("li", { class: this.getTabItemClass(index), ref: (el) => (this.tabHeaderRefs[index] = el), onMouseDown: (event) => event.preventDefault(), onClick: () => this.handleClick(tab, index), "aria-selected": index === this.internalActiveTabIndex ? 'true' : 'false', "aria-disabled": tab.disabled ? 'true' : 'false', role: "tab" }, (tab === null || tab === void 0 ? void 0 : tab.icon) ? h("ifx-icon", { icon: tab.icon }) : '', tab === null || tab === void 0 ? void 0 :
-                tab.header))), h("div", { key: '3da244a99ddb71e2c0a7fffdb1f181496828d9ef', class: "active-border" })), h("div", { key: '63d9a76df41d39be73f46eb9c731945e924a2059', class: "tab-content" }, Array.from(this.tabObjects).map((_, index) => (h("div", { style: { display: index === this.internalActiveTabIndex ? 'block' : 'none' } }, h("slot", { name: `tab-${index}` })))))));
+                tab.header))), h("div", { key: 'c0b1d541c10581ee7d097697d155b24a9c862178', class: "active-border" })), h("div", { key: '8b79fe69929791ffdc7ef4d765304a46ac09af08', class: "tab-content" }, Array.from(this.tabObjects).map((_, index) => (h("div", { style: { display: index === this.internalActiveTabIndex ? 'block' : 'none' } }, h("slot", { name: `tab-${index}` })))))));
     }
     static get is() { return "ifx-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -287,8 +286,8 @@ export class IfxTabs {
     }
     static get events() {
         return [{
-                "method": "ifxTabChange",
-                "name": "ifxTabChange",
+                "method": "ifxChange",
+                "name": "ifxChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,