npm - @infineon/infineon-design-system-stencil - Versions diffs - 30.9.3--canary.1678.5b4a7e71bc0aa2e3f495f00864e3c9507193dd72.0 → 30.9.3--canary.1640.e9ef59f97cf624f94f0207779497ed5e51e1ed11.0 - Mend

@infineon/infineon-design-system-stencil 30.9.3--canary.1678.5b4a7e71bc0aa2e3f495f00864e3c9507193dd72.0 → 30.9.3--canary.1640.e9ef59f97cf624f94f0207779497ed5e51e1ed11.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 (304) 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.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/tabs.js CHANGED Viewed

@@ -41,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();
@@ -154,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;
     }
@@ -187,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: 'b94b74545720034560b78d35909a4757c9239c28', "aria-label": "navigation tabs", class: `tabs ${this.internalOrientation}` }, h("ul", { key: '9689012ae62d5d22c7f9938bce7a5247d7fd1022', 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: '0365da7db703747de5996d5b48f1a59ba3ebc3e0', class: "active-border" })), h("div", { key: '53bdc3fbd557dec39cbdea5543ef7e56bf57a156', 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"; }
@@ -286,8 +286,8 @@ export class IfxTabs {
     }
     static get events() {
         return [{
-                "method": "ifxTabChange",
-                "name": "ifxTabChange",
+                "method": "ifxChange",
+                "name": "ifxChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["//ifxTabs.tsx\nimport { Component, h, Prop, State, Element, Listen, Event, EventEmitter, Watch } from '@stencil/core';\n \n\n\n@Component({\n tag: 'ifx-tabs',\n styleUrl: 'tabs.scss',\n shadow: true\n})\nexport class IfxTabs {\n @Element() el: HTMLElement;\n\n @Prop() orientation: string = \"horizontal\";\n @Prop({ mutable: true }) activeTabIndex: number = 0;\n @Prop() fullWidth: boolean = false;\n\n @State() internalOrientation: string;\n @State() internalActiveTabIndex: number = 0;\n @State() internalFocusedTabIndex: number = 0;\n @State() tabRefs: HTMLElement[] = [];\n @State() tabHeaderRefs: HTMLElement[] = [];\n @State() disabledTabs: string[] = [];\n @State() tabObjects: any[] = [];\n\n @Event() ifxTabChange: EventEmitter;\n\n @Listen('resize', {target: 'window'})\n updateBorderOnWindowResize() {\n this.updateBorderAndFocus();\n }\n\n setActiveAndFocusedTab(index: number) {\n if (index >= this.tabObjects.length) {\n index = this.tabObjects.length - 1;\n }\n if (index < 0) {\n index = 0;\n }\n if (!this.tabObjects[index]?.disabled) {\n this.internalActiveTabIndex = index;\n this.internalFocusedTabIndex = index;\n }\n }\n\n @Listen('tabHeaderChange')\n handleTabHeaderChange(e) { \n const tabIndex = e.target.getAttribute('slot').replace('tab-', '');\n this.tabObjects[tabIndex].header = e.detail;\n this.tabObjects = [...this.tabObjects]; \n }\n \n\n @Watch('activeTabIndex')\n activeTabIndexChanged(newValue: number, oldValue: number) {\n if (newValue !== oldValue) {\n this.setActiveAndFocusedTab(newValue);\n }\n }\n\n\n\n componentWillLoad() {\n this.internalOrientation = this.orientation.toLowerCase() === 'vertical' ? 'vertical' : 'horizontal';\n if (this.internalActiveTabIndex !== this.activeTabIndex) {\n this.ifxTabChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: this.activeTabIndex });\n };\n this.onSlotChange();\n this.setActiveAndFocusedTab(this.activeTabIndex);\n this.updateTabStyles();\n }\n\n updateTabStyles() {\n this.tabHeaderRefs.forEach((tab, index) => {\n tab.classList.toggle('active', index === this.internalActiveTabIndex);\n tab.setAttribute('aria-selected', index === this.internalActiveTabIndex ? 'true' : 'false')\n });\n }\n\n\n // needed for smooth border transition\n reRenderBorder() {\n const borderElement = this.el.shadowRoot.querySelector('.active-border') as HTMLElement;\n if (borderElement && this.tabHeaderRefs[this.internalActiveTabIndex]) {\n if (this.orientation === 'horizontal') {\n\n borderElement.style.left = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetLeft}px`;\n borderElement.style.width = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetWidth}px`;\n borderElement.style.top = '';\n borderElement.style.height = '';\n } else {\n borderElement.style.top = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetTop}px`;\n borderElement.style.height = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetHeight}px`;\n borderElement.style.left = '';\n borderElement.style.width = '';\n }\n }\n }\n\n\n // when a slot is removed / added\n @Listen('slotchange')\n onSlotChange() {\n const tabs = this.el.querySelectorAll('ifx-tab');\n this.tabObjects = Array.from(tabs).map((tab) => {\n return {\n header: tab?.header,\n disabled: tab?.disabled === true,\n icon: tab?.icon,\n iconPosition: tab?.iconPosition\n }\n });\n\n this.tabRefs = Array.from(tabs);\n this.tabRefs.forEach((tab, index) => {\n tab.setAttribute('slot', `tab-${index}`);\n });\n }\n\n setDefaultOrientation() {\n const validOrientations = ['horizontal', 'vertical'];\n const lowercaseOrientation = this.orientation.toLowerCase();\n\n if (!validOrientations.includes(lowercaseOrientation)) {\n this.internalOrientation = 'horizontal';\n } else this.internalOrientation = this.orientation;\n }\n\n componentDidLoad() {\n this.updateBorderAndFocus();\n // Add keyboard event listeners for each tab header\n this.tabHeaderRefs.forEach((tab, index) => {\n tab.addEventListener('focus', this.onTabFocus(index));\n });\n\n }\n\n onTabFocus(index) {\n return () => {\n this.internalFocusedTabIndex = index;\n };\n }\n\n disconnectedCallback() {\n // Remove keyboard event listeners when component is unmounted\n this.tabHeaderRefs.forEach((tab, index) => {\n tab.removeEventListener('focus', this.onTabFocus(index));\n });\n }\n componentDidUpdate() {\n this.updateBorderAndFocus();\n }\n\n private updateBorderAndFocus() {\n this.reRenderBorder()\n this.updateTabFocusability();\n }\n\n private updateTabFocusability() {\n this.tabHeaderRefs.forEach((tab, index) => {\n tab.tabIndex = index === this.internalActiveTabIndex ? 0 : -1;\n })\n }\n\n\n private focusNextTab() {\n let nextIndex = this.internalFocusedTabIndex + 1;\n while (nextIndex < this.tabHeaderRefs.length && this.tabObjects[nextIndex].disabled) {\n nextIndex++;\n }\n if (nextIndex >= 0 && nextIndex < this.tabHeaderRefs.length) {\n this.internalFocusedTabIndex = nextIndex;\n this.tabHeaderRefs[nextIndex].focus();\n }\n }\n\n private focusPreviousTab() {\n let prevIndex = this.internalFocusedTabIndex - 1;\n while ((prevIndex >= 0) && (this.tabObjects[prevIndex].disabled)) {\n prevIndex--;\n }\n if ((prevIndex >= 0) && (prevIndex < this.tabHeaderRefs.length)) {\n this.internalFocusedTabIndex = prevIndex;\n this.tabHeaderRefs[prevIndex].focus();\n }\n }\n\n\n private getTabItemClass(index: number) {\n const isActive = index === this.internalActiveTabIndex && !this.tabObjects[index].disabled;\n const isDisabled = this.tabObjects[index].disabled;\n const iconPosition = this.tabObjects[index].iconPosition\n return `tab-item ${this.fullWidth ? 'full-width' : \"\"} ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''} ${'icon__'+iconPosition}`;\n }\n\n private handleClick(tab, index) {\n this.ifxTabChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: index })\n if (!tab.disabled) this.internalActiveTabIndex = index;\n\n }\n\n\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if (ev.key === 'Tab') {\n\n if (ev.shiftKey) {\n // Shift + Tab\n if (this.internalFocusedTabIndex === 0) {\n // Allow default behavior to move focus out of component\n return;\n } else {\n ev.preventDefault();\n this.focusPreviousTab();\n }\n } else {\n // Tab\n if (this.internalFocusedTabIndex === this.tabHeaderRefs.length - 1) {\n // Allow default behavior to move focus out of component\n return;\n } else {\n ev.preventDefault();\n this.focusNextTab();\n }\n }\n } else if (ev.key === 'Enter') {\n if (this.internalFocusedTabIndex !== -1 && !this.tabObjects[this.internalFocusedTabIndex].disabled) {\n const previouslyActiveTabIndex = this.internalActiveTabIndex;\n this.internalActiveTabIndex = this.internalFocusedTabIndex;\n this.ifxTabChange.emit({ previousTab: previouslyActiveTabIndex, currentTab: this.internalFocusedTabIndex })\n }\n }\n }\n\n\n render() {\n return (\n <div aria-label=\"navigation tabs\" class={`tabs ${this.internalOrientation}`}>\n <ul role=\"tablist\" class=\"tabs-list\">\n {this.tabObjects?.map((tab, index) => (\n <li\n class={this.getTabItemClass(index)}\n ref={(el) => (this.tabHeaderRefs[index] = el)}\n onMouseDown={(event) => event.preventDefault()}\n onClick={() => this.handleClick(tab, index)}\n aria-selected={index === this.internalActiveTabIndex ? 'true' : 'false'}\n aria-disabled={tab.disabled ? 'true' : 'false'}\n role=\"tab\"\n > \n {tab?.icon ? <ifx-icon icon = {tab.icon}></ifx-icon> : ''}\n {tab?.header}\n </li>\n ))}\n <div class=\"active-border\"></div>\n </ul>\n <div class=\"tab-content\">\n {Array.from(this.tabObjects).map((_, index) => (\n <div style={{ display: index === this.internalActiveTabIndex ? 'block' : 'none' }}>\n <slot name={`tab-${index}`} />\n </div>\n ))}\n </div>\n </div>\n );\n }\n\n}"]}
1	+ {"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["//ifxTabs.tsx\nimport { Component, h, Prop, State, Element, Listen, Event, EventEmitter, Watch } from '@stencil/core';\n \n\n\n@Component({\n tag: 'ifx-tabs',\n styleUrl: 'tabs.scss',\n shadow: true\n})\nexport class IfxTabs {\n @Element() el: HTMLElement;\n\n @Prop() orientation: string = \"horizontal\";\n @Prop({ mutable: true }) activeTabIndex: number = 0;\n @Prop() fullWidth: boolean = false;\n\n @State() internalOrientation: string;\n @State() internalActiveTabIndex: number = 0;\n @State() internalFocusedTabIndex: number = 0;\n @State() tabRefs: HTMLElement[] = [];\n @State() tabHeaderRefs: HTMLElement[] = [];\n @State() disabledTabs: string[] = [];\n @State() tabObjects: any[] = [];\n\n @Event() ifxChange: EventEmitter;\n\n @Listen('resize', {target: 'window'})\n updateBorderOnWindowResize() {\n this.updateBorderAndFocus();\n }\n\n setActiveAndFocusedTab(index: number) {\n if (index >= this.tabObjects.length) {\n index = this.tabObjects.length - 1;\n }\n if (index < 0) {\n index = 0;\n }\n if (!this.tabObjects[index]?.disabled) {\n this.internalActiveTabIndex = index;\n this.internalFocusedTabIndex = index;\n }\n }\n\n @Listen('tabHeaderChange')\n handleTabHeaderChange(e) { \n const tabIndex = e.target.getAttribute('slot').replace('tab-', '');\n this.tabObjects[tabIndex].header = e.detail;\n this.tabObjects = [...this.tabObjects]; \n }\n \n\n @Watch('activeTabIndex')\n activeTabIndexChanged(newValue: number, oldValue: number) {\n if (newValue !== oldValue) {\n this.setActiveAndFocusedTab(newValue);\n }\n }\n\n\n\n componentWillLoad() {\n this.internalOrientation = this.orientation.toLowerCase() === 'vertical' ? 'vertical' : 'horizontal';\n if (this.internalActiveTabIndex !== this.activeTabIndex) {\n this.ifxChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: this.activeTabIndex });\n };\n this.onSlotChange();\n this.setActiveAndFocusedTab(this.activeTabIndex);\n this.updateTabStyles();\n }\n\n updateTabStyles() {\n this.tabHeaderRefs.forEach((tab, index) => {\n tab.classList.toggle('active', index === this.internalActiveTabIndex);\n tab.setAttribute('aria-selected', index === this.internalActiveTabIndex ? 'true' : 'false')\n });\n }\n\n\n // needed for smooth border transition\n reRenderBorder() {\n const borderElement = this.el.shadowRoot.querySelector('.active-border') as HTMLElement;\n if (borderElement && this.tabHeaderRefs[this.internalActiveTabIndex]) {\n if (this.orientation === 'horizontal') {\n\n borderElement.style.left = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetLeft}px`;\n borderElement.style.width = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetWidth}px`;\n borderElement.style.top = '';\n borderElement.style.height = '';\n } else {\n borderElement.style.top = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetTop}px`;\n borderElement.style.height = `${this.tabHeaderRefs[this.internalActiveTabIndex].offsetHeight}px`;\n borderElement.style.left = '';\n borderElement.style.width = '';\n }\n }\n }\n\n\n // when a slot is removed / added\n @Listen('slotchange')\n onSlotChange() {\n const tabs = this.el.querySelectorAll('ifx-tab');\n this.tabObjects = Array.from(tabs).map((tab) => {\n return {\n header: tab?.header,\n disabled: tab?.disabled === true,\n icon: tab?.icon,\n iconPosition: tab?.iconPosition\n }\n });\n\n this.tabRefs = Array.from(tabs);\n this.tabRefs.forEach((tab, index) => {\n tab.setAttribute('slot', `tab-${index}`);\n });\n }\n\n setDefaultOrientation() {\n const validOrientations = ['horizontal', 'vertical'];\n const lowercaseOrientation = this.orientation.toLowerCase();\n\n if (!validOrientations.includes(lowercaseOrientation)) {\n this.internalOrientation = 'horizontal';\n } else this.internalOrientation = this.orientation;\n }\n\n componentDidLoad() {\n this.updateBorderAndFocus();\n // Add keyboard event listeners for each tab header\n this.tabHeaderRefs.forEach((tab, index) => {\n tab.addEventListener('focus', this.onTabFocus(index));\n });\n\n }\n\n onTabFocus(index) {\n return () => {\n this.internalFocusedTabIndex = index;\n };\n }\n\n disconnectedCallback() {\n // Remove keyboard event listeners when component is unmounted\n this.tabHeaderRefs.forEach((tab, index) => {\n tab.removeEventListener('focus', this.onTabFocus(index));\n });\n }\n componentDidUpdate() {\n this.updateBorderAndFocus();\n }\n\n private updateBorderAndFocus() {\n this.reRenderBorder()\n this.updateTabFocusability();\n }\n\n private updateTabFocusability() {\n this.tabHeaderRefs.forEach((tab, index) => {\n tab.tabIndex = index === this.internalActiveTabIndex ? 0 : -1;\n })\n }\n\n\n private focusNextTab() {\n let nextIndex = this.internalFocusedTabIndex + 1;\n while (nextIndex < this.tabHeaderRefs.length && this.tabObjects[nextIndex].disabled) {\n nextIndex++;\n }\n if (nextIndex >= 0 && nextIndex < this.tabHeaderRefs.length) {\n this.internalFocusedTabIndex = nextIndex;\n this.tabHeaderRefs[nextIndex].focus();\n }\n }\n\n private focusPreviousTab() {\n let prevIndex = this.internalFocusedTabIndex - 1;\n while ((prevIndex >= 0) && (this.tabObjects[prevIndex].disabled)) {\n prevIndex--;\n }\n if ((prevIndex >= 0) && (prevIndex < this.tabHeaderRefs.length)) {\n this.internalFocusedTabIndex = prevIndex;\n this.tabHeaderRefs[prevIndex].focus();\n }\n }\n\n\n private getTabItemClass(index: number) {\n const isActive = index === this.internalActiveTabIndex && !this.tabObjects[index].disabled;\n const isDisabled = this.tabObjects[index].disabled;\n const iconPosition = this.tabObjects[index].iconPosition\n return `tab-item ${this.fullWidth ? 'full-width' : \"\"} ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''} ${'icon__'+iconPosition}`;\n }\n\n private handleClick(tab, index) {\n this.ifxChange.emit({ previousTab: this.internalActiveTabIndex, currentTab: index })\n if (!tab.disabled) this.internalActiveTabIndex = index;\n\n }\n\n\n\n @Listen('keydown')\n handleKeyDown(ev: KeyboardEvent) {\n if (ev.key === 'Tab') {\n\n if (ev.shiftKey) {\n // Shift + Tab\n if (this.internalFocusedTabIndex === 0) {\n // Allow default behavior to move focus out of component\n return;\n } else {\n ev.preventDefault();\n this.focusPreviousTab();\n }\n } else {\n // Tab\n if (this.internalFocusedTabIndex === this.tabHeaderRefs.length - 1) {\n // Allow default behavior to move focus out of component\n return;\n } else {\n ev.preventDefault();\n this.focusNextTab();\n }\n }\n } else if (ev.key === 'Enter') {\n if (this.internalFocusedTabIndex !== -1 && !this.tabObjects[this.internalFocusedTabIndex].disabled) {\n const previouslyActiveTabIndex = this.internalActiveTabIndex;\n this.internalActiveTabIndex = this.internalFocusedTabIndex;\n this.ifxChange.emit({ previousTab: previouslyActiveTabIndex, currentTab: this.internalFocusedTabIndex })\n }\n }\n }\n\n\n render() {\n return (\n <div aria-label=\"navigation tabs\" class={`tabs ${this.internalOrientation}`}>\n <ul role=\"tablist\" class=\"tabs-list\">\n {this.tabObjects?.map((tab, index) => (\n <li\n class={this.getTabItemClass(index)}\n ref={(el) => (this.tabHeaderRefs[index] = el)}\n onMouseDown={(event) => event.preventDefault()}\n onClick={() => this.handleClick(tab, index)}\n aria-selected={index === this.internalActiveTabIndex ? 'true' : 'false'}\n aria-disabled={tab.disabled ? 'true' : 'false'}\n role=\"tab\"\n > \n {tab?.icon ? <ifx-icon icon = {tab.icon}></ifx-icon> : ''}\n {tab?.header}\n </li>\n ))}\n <div class=\"active-border\"></div>\n </ul>\n <div class=\"tab-content\">\n {Array.from(this.tabObjects).map((_, index) => (\n <div style={{ display: index === this.internalActiveTabIndex ? 'block' : 'none' }}>\n <slot name={`tab-${index}`} />\n </div>\n ))}\n </div>\n </div>\n );\n }\n\n}"]}