@scania/tegel 1.15.0-table-issue-beta.0 → 1.16.0

package/dist/collection/components/dropdown/dropdown.js

@@ -342,7 +342,7 @@ export class TdsDropdown {
     render() {
         var _a, _b, _c, _d;
         appendHiddenInput(this.host, this.name, (_a = this.value) === null || _a === void 0 ? void 0 : _a.map((value) => value).toString(), this.disabled);
-        return (h(Host, { key: '62778591bba0279591717580456056657bb96e44', role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { key: 'd511a016571d4aa5b1b6db2e183356612c354a0b', class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: 'e9a1f512fc81191d66918f967bc90cff26f13080', class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: {
+        return (h(Host, { key: '1e7eacac32eba892288cd94254053ef9d09b03f7', role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { key: '8a97e693abbf5ff8973fde64c1d383e926d5c5a8', class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '55d98944321d2084de6cb3fd5f70b32b5b84d518', class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: {
                 filter: true,
                 focus: this.filterFocus,
                 disabled: this.disabled,
@@ -385,11 +385,11 @@ export class TdsDropdown {
                     label-inside-as-placeholder
                     ${this.size}
                     ${((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) ? 'selected' : ''}
-                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, ((_d = this.value) === null || _d === void 0 ? void 0 : _d.length) ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: '33d624c7a3669842e5f3c10fff22182185a81eb6', ref: (element) => (this.dropdownList = element), class: `dropdown-list
+                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, ((_d = this.value) === null || _d === void 0 ? void 0 : _d.length) ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: 'b661988b59447f31ab71e6d03da4b6226caab184', ref: (element) => (this.dropdownList = element), class: `dropdown-list
             ${this.size}
             ${this.open ? 'open' : 'closed'}
             ${this.getOpenDirection()}
-            ${this.label && this.labelPosition === 'outside' ? 'label-outside' : ''}` }, h("slot", { key: 'f65db159240901a2df850c299d926fe2b21d48df', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: 'a1f2a9b42feea0ca9a332c4ec765b2053a186637', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '173ddb47f30e6901198a58221c274ddf4502cf15', class: `helper ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, this.error && h("tds-icon", { key: 'f68ef6f14584bca3c932655be7e63451aac3863e', name: "error", size: "16px" }), this.helper))));
+            ${this.label && this.labelPosition === 'outside' ? 'label-outside' : ''}` }, h("slot", { key: '855021b97bdc5e56d8a2ebcd981e143aabb8a1ef', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: 'c282e26376e176e3eca36261eb269bfe4cce60da', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '6bce306c718a21a8eb5320da036a7f8909467d76', class: `helper ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, this.error && h("tds-icon", { key: 'a15e4b87b4388fd44701db482b4be4a9cfee68f2', name: "error", size: "16px" }), this.helper))));
     }
     static get is() { return "tds-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -548,8 +548,8 @@ export class TdsDropdown {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'sm' | 'md' | 'lg'",
-                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "original": "'xs' | 'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xs\"",
                     "references": {}
                 },
                 "required": false,

package/dist/collection/components/side-menu/side-menu.js

@@ -163,7 +163,7 @@ export class TdsSideMenu {
                     "references": {
                         "CollapseEvent": {
                             "location": "local",
-                            "path": "/Users/charles.krook/Umain/tegel/packages/core/src/components/side-menu/side-menu.tsx",
+                            "path": "/home/runner/work/tegel/tegel/packages/core/src/components/side-menu/side-menu.tsx",
                             "id": "src/components/side-menu/side-menu.tsx::CollapseEvent"
                         }
                     }
@@ -187,7 +187,7 @@ export class TdsSideMenu {
                     "references": {
                         "CollapseEvent": {
                             "location": "local",
-                            "path": "/Users/charles.krook/Umain/tegel/packages/core/src/components/side-menu/side-menu.tsx",
+                            "path": "/home/runner/work/tegel/tegel/packages/core/src/components/side-menu/side-menu.tsx",
                             "id": "src/components/side-menu/side-menu.tsx::CollapseEvent"
                         }
                     }
@@ -211,7 +211,7 @@ export class TdsSideMenu {
                     "references": {
                         "InternalTdsSideMenuPropChange": {
                             "location": "local",
-                            "path": "/Users/charles.krook/Umain/tegel/packages/core/src/components/side-menu/side-menu.tsx",
+                            "path": "/home/runner/work/tegel/tegel/packages/core/src/components/side-menu/side-menu.tsx",
                             "id": "src/components/side-menu/side-menu.tsx::InternalTdsSideMenuPropChange"
                         }
                     }

package/dist/collection/components/stepper/stepper.js

@@ -173,7 +173,7 @@ export class TdsStepper {
                     "references": {
                         "InternalTdsStepperPropChange": {
                             "location": "local",
-                            "path": "/Users/charles.krook/Umain/tegel/packages/core/src/components/stepper/stepper.tsx",
+                            "path": "/home/runner/work/tegel/tegel/packages/core/src/components/stepper/stepper.tsx",
                             "id": "src/components/stepper/stepper.tsx::InternalTdsStepperPropChange"
                         }
                     }

package/dist/collection/components/table/table/table.js

@@ -14,6 +14,7 @@ export class TdsTable {
         this.expandableRows = false;
         this.responsive = false;
         this.modeVariant = null;
+        this.zebraMode = 'none';
         this.horizontalScrollWidth = null;
         this.tableId = generateUniqueId();
         this.enableHorizontalScrollToolbarDesign = false;
@@ -70,6 +71,9 @@ export class TdsTable {
     noMinWidthChanged(newValue) {
         this.emitInternalTdsPropChange('noMinWidth', newValue);
     }
+    zebraModeChanged(newValue) {
+        this.emitInternalTdsPropChange('zebraMode', newValue);
+    }
     modeVariantChanged(newValue) {
         this.emitInternalTdsPropChange('modeVariant', newValue);
     }
@@ -85,11 +89,11 @@ export class TdsTable {
         }
     }
     render() {
-        return (h(Host, { key: '580c1c90c9f4556b16037c3200ae739a891bea88', class: {
+        return (h(Host, { key: '4d156fac32972a0493c44dc235134370f503c43c', class: {
                 'tds-table--responsive': this.responsive,
                 'tds-mode-variant-primary': this.modeVariant === 'primary',
                 'tds-mode-variant-secondary': this.modeVariant === 'secondary',
-            } }, h("table", { key: 'f2e9d248c5e93e6d83cfcd74408f99ed54c1ae95', style: this.getStyles(), class: {
+            } }, h("table", { key: 'da2663a9406f0f5a68ba789fd9ae16e474f28b6e', style: this.getStyles(), class: {
                 'tds-table': true,
                 'tds-table--compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
@@ -100,7 +104,7 @@ export class TdsTable {
                 'tds-table--horizontal-scroll-toolbar-compact': this.enableHorizontalScrollToolbarDesign && this.compactDesign,
                 'tds-table--horizontal-scroll-footer': this.enableHorizontalScrollFooterDesign && !this.compactDesign,
                 'tds-table--horizontal-scroll-footer-compact': this.enableHorizontalScrollFooterDesign && this.compactDesign,
-            } }, h("slot", { key: '74edfe5bc755d4a7880b1368452f2906ebc5346a' }))));
+            } }, h("slot", { key: '1fc2d3dc9a43c87adea2ad500f573838c23bd2ca' }))));
     }
     static get is() { return "tds-table"; }
     static get encapsulation() { return "shadow"; }
@@ -241,6 +245,24 @@ export class TdsTable {
                 "reflect": true,
                 "defaultValue": "null"
             },
+            "zebraMode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "| 'rows-odd'\n    | 'rows-even'\n    | 'columns-odd'\n    | 'columns-even'\n    | 'none'",
+                    "resolved": "\"columns-even\" | \"columns-odd\" | \"none\" | \"rows-even\" | \"rows-odd\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enables zebra stripe mode on the table rows or columns."
+                },
+                "attribute": "zebra-mode",
+                "reflect": true,
+                "defaultValue": "'none'"
+            },
             "horizontalScrollWidth": {
                 "type": "string",
                 "mutable": false,
@@ -305,7 +327,7 @@ export class TdsTable {
                     "references": {
                         "InternalTdsTablePropChange": {
                             "location": "local",
-                            "path": "/Users/charles.krook/Umain/tegel/packages/core/src/components/table/table/table.tsx",
+                            "path": "/home/runner/work/tegel/tegel/packages/core/src/components/table/table/table.tsx",
                             "id": "src/components/table/table/table.tsx::InternalTdsTablePropChange"
                         }
                     }
@@ -350,6 +372,9 @@ export class TdsTable {
             }, {
                 "propName": "noMinWidth",
                 "methodName": "noMinWidthChanged"
+            }, {
+                "propName": "zebraMode",
+                "methodName": "zebraModeChanged"
             }, {
                 "propName": "modeVariant",
                 "methodName": "modeVariantChanged"

package/dist/collection/components/table/table-body/table-body.css

@@ -19,4 +19,32 @@ tds-table-body .tds-table__info-message {
   vertical-align: top;
   background-color: transparent;
   transition: background-color 200ms ease;
+}
+
+tds-table-body.tds-table--zebra-mode-rows-odd tds-table-body-row:nth-child(odd) {
+  background-color: var(--tds-table-zebra-mode-backround);
+}
+tds-table-body.tds-table--zebra-mode-rows-odd tds-table-body-row:nth-child(odd):hover {
+  background-color: var(--tds-table-body-row-background-hover);
+}
+tds-table-body.tds-table--zebra-mode-rows-even tds-table-body-row:nth-child(even) {
+  background-color: var(--tds-table-zebra-mode-backround);
+}
+tds-table-body.tds-table--zebra-mode-rows-even tds-table-body-row:nth-child(even):hover {
+  background-color: var(--tds-table-body-row-background-hover);
+}
+tds-table-body.tds-table--zebra-mode-columns-odd tds-body-cell:nth-child(odd) {
+  background-color: var(--tds-table-zebra-mode-backround);
+}
+tds-table-body.tds-table--zebra-mode-columns-odd tds-body-cell.tds-table__body-cell--hover:nth-child(odd) {
+  background-color: var(--tds-table-body-cell-background-hover);
+}
+tds-table-body.tds-table--zebra-mode-columns-even tds-body-cell:nth-child(even) {
+  background-color: var(--tds-table-zebra-mode-backround);
+}
+tds-table-body.tds-table--zebra-mode-columns-even tds-body-cell.tds-table__body-cell--hover:nth-child(even) {
+  background-color: var(--tds-table-body-cell-background-hover);
+}
+tds-table-body.tds-table--zebra-mode-columns-even tds-table-body-row:hover tds-body-cell, tds-table-body.tds-table--zebra-mode-columns-odd tds-table-body-row:hover tds-body-cell {
+  background-color: transparent;
 }

package/dist/collection/components/table/table-body/table-body.js

@@ -1,5 +1,9 @@
 import { h, Host } from "@stencil/core";
-const relevantTableProps = ['multiselect', 'expandableRows'];
+const relevantTableProps = [
+    'multiselect',
+    'expandableRows',
+    'zebraMode',
+];
 /**
  * @slot <default> - <b>Unnamed slot.</b> For table rows.
  */
@@ -17,6 +21,7 @@ export class TdsTableBody {
         this.multiselectArrayJSON = undefined;
         this.mainCheckboxStatus = false;
         this.columnsNumber = 0;
+        this.zebraMode = 'none';
         this.tableId = '';
     }
     internalTdsPropChangeListener(event) {
@@ -45,10 +50,7 @@ export class TdsTableBody {
         });
     }
     componentWillRender() {
-        const headerElement = this.host.parentElement.querySelector('tds-table-header');
-        const headerColumnsNo = headerElement
-            ? this.host.parentElement.querySelector('tds-table-header').children.length
-            : 0;
+        const headerColumnsNo = this.host.parentElement.querySelector('tds-table-header').children.length;
         // multiselect and expended features requires one extra column for controls...
         if (this.multiselect || this.expandableRows) {
             this.columnsNumber = headerColumnsNo + 1;
@@ -58,7 +60,12 @@ export class TdsTableBody {
         }
     }
     render() {
-        return (h(Host, { key: '5f7031a5167cd4bf867bb7813cf9fabb8c9405b9', "data-selected-rows": this.multiselectArrayJSON }, h("slot", { key: 'ccc4113754dec3e5b5da2447867de906d009dd93' })));
+        return (h(Host, { key: '0e5ac81e32535901ac4940316a474472368cca86', "data-selected-rows": this.multiselectArrayJSON, class: {
+                'tds-table--zebra-mode-rows-odd': this.zebraMode === 'rows-odd',
+                'tds-table--zebra-mode-rows-even': this.zebraMode === 'rows-even',
+                'tds-table--zebra-mode-columns-odd': this.zebraMode === 'columns-odd',
+                'tds-table--zebra-mode-columns-even': this.zebraMode === 'columns-even',
+            } }, h("slot", { key: 'c43f3047fc836b0d7f147e00680befd56b25721c' })));
     }
     static get is() { return "tds-table-body"; }
     static get originalStyleUrls() {
@@ -80,6 +87,7 @@ export class TdsTableBody {
             "multiselectArrayJSON": {},
             "mainCheckboxStatus": {},
             "columnsNumber": {},
+            "zebraMode": {},
             "tableId": {}
         };
     }

package/dist/collection/components/table/table-body-cell/table-body-cell.js

@@ -18,7 +18,6 @@ export class TdsTableBodyCell {
         this.verticalDividers = false;
         this.compactDesign = false;
         this.noMinWidth = false;
-        this.whiteBackground = false;
         this.tableId = '';
     }
     internalTdsPropChangeListener(event) {
@@ -81,13 +80,13 @@ export class TdsTableBodyCell {
             // Conditionally set padding style
             padding: paddingStyle,
         };
-        return (h(Host, { key: '11e448416f213f9fdf6dea7bd5ccff4512c7a8dd', class: {
+        return (h(Host, { key: '30e53ca949c66ba4499463aa9e4710b48a5c6a2b', class: {
                 'tds-table__body-cell': true,
                 'tds-table__body-cell--hover': this.activeSorting,
                 'tds-table__compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table--no-min-width': this.noMinWidth,
-            }, style: dynamicStyles }, this.cellValue, h("slot", { key: '5c7052d46ee8351e2710cf72fc4db07ff84bd843' })));
+            }, style: dynamicStyles }, this.cellValue, h("slot", { key: '800cc9978517c7486b87b603e3cff2d576e9a3fc' })));
     }
     static get is() { return "tds-body-cell"; }
     static get encapsulation() { return "shadow"; }
@@ -181,7 +180,6 @@ export class TdsTableBodyCell {
             "verticalDividers": {},
             "compactDesign": {},
             "noMinWidth": {},
-            "whiteBackground": {},
             "tableId": {}
         };
     }

package/dist/collection/components/table/table-body-row-expandable/table-body-row-expandable.css

@@ -57,7 +57,7 @@
 }
 :host .tds-table__row-expand .tds-table__cell-expand {
   max-width: 1px;
-  overflow: scroll;
+  overflow: auto;
   padding: 16px 16px 16px 66px;
   color: var(--tds-table-color);
 }

package/dist/collection/components/table/table-body-row-expandable/table-body-row-expandable.js

@@ -18,6 +18,7 @@ export class TdsTableBodyRowExpandable {
         this.colSpan = null;
         this.rowId = generateUniqueId();
         this.expanded = undefined;
+        this.overflow = 'auto';
         this.isExpanded = false;
         this.tableId = '';
         this.columnsNumber = null;
@@ -44,12 +45,12 @@ export class TdsTableBodyRowExpandable {
             this.tdsChange.emit({ rowId: this.rowId, isExpanded: this.isExpanded });
         }
     }
-    /** method to expand table row */
+    /** Method to expand table row */
     async expand() {
         this.isExpanded = true;
         this.tdsChange.emit({ rowId: this.rowId, isExpanded: this.isExpanded });
     }
-    /** method to collapse table row */
+    /** Method to collapse table row */
     async collapse() {
         this.isExpanded = false;
         this.tdsChange.emit({ rowId: this.rowId, isExpanded: this.isExpanded });
@@ -84,18 +85,20 @@ export class TdsTableBodyRowExpandable {
         this.sendValue();
     }
     render() {
-        return (h(Host, { key: 'cd23997b2d0b659691199b0f6a7be6aa51689ee4', class: {
+        return (h(Host, { key: '46a17e89125c4647a7a3db2c04cb8dff90dcc06a', class: {
                 'tds-table__row': true,
                 'tds-table__row-expand--active': this.isExpanded,
                 'tds-table__compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
-            } }, h("tr", { key: 'a3fec49a0b97a35f61db7c31dfc023ba3acebd86', class: {
+            } }, h("tr", { key: '656a636f2444586e1c78fb5c5de45c623a47e2b5', class: {
                 'tds-table__row': true,
                 'tds-table__row--expanded': this.isExpanded,
-            }, part: "row" }, h("td", { key: 'd995074fc578640544f59df3426762ff6595dd0b', class: "tds-table__cell tds-table__cell--expand" }, h("label", { key: '0f905bda5651a8c9dc30094dbc402e5e618e4030', class: "tds-table__expand-control-container" }, h("input", { key: '9b316a0e3a44cfa21851a1ac2ec0980d53d3aa54', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded }), h("span", { key: '022d891384b907d3ebce4b2138fef4f5c6f7d44f', class: "tds-expendable-row-icon" }, h("svg", { key: 'fb7ccb4d599e72a9d7a56808f59226779ffe611b', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '1e2c766463813a4b1edc32093abbbf501b99974b', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z", fill: "currentColor" }))))), h("slot", { key: '7f0e3d93df3da8eeff969daa9aba8eecaa1e6e23' })), h("tr", { key: '89766434b64dd9bf0aecf805fdd494aab68f8af9', class: {
+            }, part: "row" }, h("td", { key: '65cb018b213aca84d520a737761e528a6244da8b', class: "tds-table__cell tds-table__cell--expand" }, h("label", { key: 'c029a732fe57be3189cfe51c456cb8cdd90739c2', class: "tds-table__expand-control-container" }, h("input", { key: '8bfe49a5a02b5467cd38563244910ea7544c7c5d', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded }), h("span", { key: '31b764bf3293b551fc036a4d2a17db4d2c379ab6', class: "tds-expendable-row-icon" }, h("svg", { key: 'e35527f2c66ead3523736ea2dbaf0ce2fcfd3c69', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '00c9f5bca5b04898e0f17ab567e0826d39fe71c4', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M4.273 9.783a1 1 0 0 1 1.415 0l9.888 9.888a.6.6 0 0 0 .848 0l9.888-9.888a1 1 0 1 1 1.415 1.414l-9.889 9.889a2.6 2.6 0 0 1-3.677 0l-9.888-9.889a1 1 0 0 1 0-1.414Z", fill: "currentColor" }))))), h("slot", { key: '983217a323605c06a600a8db70174fd7464c826c' })), h("tr", { key: '5a2f7db44631b3d912ea93bc97b490d996803d4f', class: {
                 'tds-table__row-expand': true,
                 'tds-table__row-expand--expanded': this.isExpanded,
-            }, part: "expand-row" }, h("td", { key: 'f0c746d12fae92eae3e6bf9651c826fb3aacbefe', class: "tds-table__cell-expand", colSpan: this.columnsNumber }, h("slot", { key: '0a9e454379a7a6a72b3d6ea33a66a4aaaac09e8f', name: "expand-row" })))));
+            }, part: "expand-row" }, h("td", { key: '38ee3a00705e910161f43894990f987596f3f139', class: "tds-table__cell-expand", colSpan: this.columnsNumber }, h("div", { key: '5fccf84bd2f7454afc3bb036210294e55f80f781', style: {
+                overflow: this.overflow,
+            } }, h("slot", { key: '01a7f9edf532244bd4f7205b339ffcafb93ceb20', name: "expand-row" }))))));
     }
     static get is() { return "tds-table-body-row-expandable"; }
     static get encapsulation() { return "shadow"; }
@@ -163,6 +166,24 @@ export class TdsTableBodyRowExpandable {
                 },
                 "attribute": "expanded",
                 "reflect": true
+            },
+            "overflow": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'auto' | 'hidden'",
+                    "resolved": "\"auto\" | \"hidden\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the overflow behavior of the expandable row content"
+                },
+                "attribute": "overflow",
+                "reflect": true,
+                "defaultValue": "'auto'"
             }
         };
     }
@@ -228,7 +249,7 @@ export class TdsTableBodyRowExpandable {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "method to expand table row",
+                    "text": "Method to expand table row",
                     "tags": []
                 }
             },
@@ -245,7 +266,7 @@ export class TdsTableBodyRowExpandable {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "method to collapse table row",
+                    "text": "Method to collapse table row",
                     "tags": []
                 }
             }

package/dist/collection/components/table/table-footer/table-footer.css

@@ -24,6 +24,16 @@
   display: flex;
   align-items: center;
 }
+:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector .rows-per-page,
+:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector .rows-per-page {
+  display: flex;
+  align-items: center;
+  margin-right: 16px;
+}
+:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector .rows-per-page p,
+:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector .rows-per-page p {
+  margin-right: 8px;
+}
 :host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input {
   font: var(--tds-detail-02);
   letter-spacing: var(--tds-detail-02-ls);

package/dist/collection/components/table/table-footer/table-footer.js

@@ -8,17 +8,28 @@ function removeShakeAnimation(e) {
 }
 export class TdsTableFooter {
     constructor() {
+        this.emitTdsPagination = () => {
+            if (this.rowsperpage) {
+                this.tdsPagination.emit({
+                    tableId: this.tableId,
+                    paginationValue: Number(this.paginationValue),
+                    rowsPerPage: this.rowsPerPageValue,
+                });
+            }
+            else {
+                this.tdsPagination.emit({
+                    tableId: this.tableId,
+                    paginationValue: Number(this.paginationValue),
+                });
+            }
+        };
         this.previousPage = () => {
             /** If pages and greater or equal to 2, decrease pagination value.
              * This is to not get under 1 in pagination value.  */
             if (this.paginationValue >= 2) {
                 this.paginationValue--;
             }
-            /* Emits pagination event. */
-            this.tdsPagination.emit({
-                tableId: this.tableId,
-                paginationValue: Number(this.paginationValue),
-            });
+            this.emitTdsPagination();
             this.storeLastCorrectValue(this.paginationValue);
         };
         this.nextPage = () => {
@@ -27,14 +38,23 @@ export class TdsTableFooter {
             if (this.paginationValue <= this.pages) {
                 this.paginationValue++;
             }
-            this.tdsPagination.emit({
-                tableId: this.tableId,
-                paginationValue: Number(this.paginationValue),
-            });
+            this.emitTdsPagination();
+            this.storeLastCorrectValue(this.paginationValue);
+        };
+        this.lastPage = () => {
+            this.paginationValue = this.pages;
+            this.emitTdsPagination();
+            this.storeLastCorrectValue(this.paginationValue);
+        };
+        this.firstPage = () => {
+            this.paginationValue = 1;
+            this.emitTdsPagination();
             this.storeLastCorrectValue(this.paginationValue);
         };
         this.pagination = false;
         this.paginationValue = 1;
+        this.rowsperpage = true;
+        this.rowsPerPageValues = [10, 25, 50];
         this.pages = null;
         this.cols = null;
         this.columnsNumber = 0;
@@ -42,6 +62,7 @@ export class TdsTableFooter {
         this.lastCorrectValue = undefined;
         this.tableId = '';
         this.horizontalScrollWidth = null;
+        this.rowsPerPageValue = this.rowsPerPageValues[0];
     }
     internalTdsPropChangeListener(event) {
         if (this.tableId === event.detail.tableId) {
@@ -87,12 +108,13 @@ export class TdsTableFooter {
         else {
             this.paginationValue = insertedValue;
         }
-        this.tdsPagination.emit({
-            tableId: this.tableId,
-            paginationValue: Number(this.paginationValue),
-        });
+        this.emitTdsPagination();
         this.storeLastCorrectValue(this.paginationValue);
     }
+    rowsPerPageChange(event) {
+        this.rowsPerPageValue = parseInt(event.detail.value);
+        this.emitTdsPagination();
+    }
     getStyles() {
         const styles = {};
         if (this.horizontalScrollWidth) {
@@ -101,10 +123,13 @@ export class TdsTableFooter {
         return styles;
     }
     render() {
-        return (h(Host, { key: '0d611bd3d31ce4dd1a7238784aa6aa6ab29d2abd', class: {
+        var _a;
+        return (h(Host, { key: 'a47ca76a46aae73aca5ce929c70c2e76f8c2c853', class: {
                 'tds-table--compact': this.compactDesign,
                 'footer__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.getStyles() }, h("tr", { key: 'cb4fc7ffecfa791f08a3da4a167459ccfb32e782', class: "tds-table__footer-row" }, h("td", { key: 'bf7388bc8aa26313cadba5333dc587d431a29867', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: 'ace766078c85f047034ac614712dc58b6dc7b540', class: "tds-table__pagination" }, h("div", { key: '0ef2c3c300bab7595773b65aa40da1399af4b7b8', class: "tds-table__row-selector" }), h("div", { key: '3fe2283dcbfd64fb54bd8faa9bd269dac22e81d8', class: "tds-table__page-selector" }, h("input", { key: '84295a91900f676742795c975f1706d4fbe196f6', ref: (element) => (this.inputElement = element), class: "tds-table__page-selector-input", type: "number", min: "1", max: this.pages, value: this.paginationValue, pattern: "[0-9]+", dir: "ltr", onChange: (event) => this.paginationInputChange(event), onAnimationEnd: removeShakeAnimation }), h("p", { key: '88c7d7d7cfe66f2431b44c9ed38ebee5771f54b7', class: "tds-table__footer-text" }, "of ", h("span", { key: '42cf669a05c6e0e86a56aa568f2623c562bf83f6' }, this.pages), " pages"), h("button", { key: '3f022e45c6ca31ce542854c5e659349ab54b372a', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: '253b1cb33d4038ce03ff8fdb0bad30ba46ab0c13', name: "chevron_left", size: "20px" })), h("button", { key: 'ad21b63c30fc638372c89bb366be77df419bf532', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: '58a640745984554b8c7cba3ce07130063299223e', name: "chevron_right", size: "20px" })))))))));
+            }, style: this.getStyles() }, h("tr", { key: '725d46b781fd8abe9748a1aabeff92ca419a4189', class: "tds-table__footer-row" }, h("td", { key: 'dce6cb9b634da75b37cd6181d12fbfdfa1eba34c', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: '045cf654031b791addb51eb1c9a7b951cb5aec5c', class: "tds-table__pagination" }, h("div", { key: 'e321a6407dc41bb0d5ea8ff272a3ad5a73cc7bf9', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { key: 'c126a905a62dbbfad2b1f9b4e90e24ea0a5d1f7d', class: "rows-per-page" }, h("p", { key: '68da58804bf6bf222179368ff99b83aaa2e891b4' }, "Rows per page"), h("tds-dropdown", { key: '4db380d47b1944a45c31b083a69d4662c0951fa4', modeVariant: "secondary", id: "rows-dropdown", class: "page-dropdown", size: "xs", defaultValue: `${this.rowsPerPageValues[0]}`, onTdsChange: (event) => this.rowsPerPageChange(event) }, this.rowsPerPageValues.map((value) => {
+            return (h("tds-dropdown-option", { value: `${value}` }, value));
+        }))))), h("div", { key: '81951e2a1405f7d8d9fb9d5602ded2652fa3574e', class: "tds-table__page-selector" }, h("input", { key: 'f9a0b0e94c31df6c7f6b78c8334f172b412fde64', ref: (element) => (this.inputElement = element), class: "tds-table__page-selector-input", type: "number", min: "1", max: this.pages, value: this.paginationValue, pattern: "[0-9]+", dir: "ltr", onChange: (event) => this.paginationInputChange(event), onAnimationEnd: removeShakeAnimation }), h("p", { key: '9f03ddfb2efed8f29d932e4272f37cb7fea99366', class: "tds-table__footer-text" }, "of ", h("span", { key: '0e925460d959f6e00f83011d13e5ef2d7ed3cbb6' }, this.pages), " pages"), h("button", { key: '50da78d78b7ef971056e33ba0d0a1bac78149319', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, h("tds-icon", { key: 'd69ea67ed2ff1dff364c9d3805b3cb29fd953050', name: "skip_backwards", size: "20px" })), h("button", { key: 'c3aeea0024fc6a72aea633d59c10db7729f76022', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: '0df46c69a9682fb2a4ec4c75b15adc50b7d436da', name: "chevron_left", size: "20px" })), h("button", { key: '5bd78c3e14dc55421763ac78e19daac64c184e34', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: 'c0739697329a13021dd9cdb771b69491264962a5', name: "chevron_right", size: "20px" })), h("button", { key: 'b1317db56a99632abf132f619bc59c773e631e04', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, h("tds-icon", { key: '3d6b0997ae36fd372aeb2099a304f02282766f7e', name: "skip_forward", size: "20px" })))))))));
     }
     static get is() { return "tds-table-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -156,6 +181,40 @@ export class TdsTableFooter {
                 "reflect": true,
                 "defaultValue": "1"
             },
+            "rowsperpage": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable rows per page dropdown"
+                },
+                "attribute": "rowsperpage",
+                "reflect": true,
+                "defaultValue": "true"
+            },
+            "rowsPerPageValues": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "number[]",
+                    "resolved": "number[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set available rows per page values"
+                },
+                "defaultValue": "[10, 25, 50]"
+            },
             "pages": {
                 "type": "number",
                 "mutable": false,
@@ -200,7 +259,8 @@ export class TdsTableFooter {
             "compactDesign": {},
             "lastCorrectValue": {},
             "tableId": {},
-            "horizontalScrollWidth": {}
+            "horizontalScrollWidth": {},
+            "rowsPerPageValue": {}
         };
     }
     static get events() {
@@ -215,8 +275,8 @@ export class TdsTableFooter {
                     "text": "Event to send current page value to tds-table-body component, can also be listened to in order to implement custom pagination logic."
                 },
                 "complexType": {
-                    "original": "{\n    tableId: string;\n    paginationValue: number;\n  }",
-                    "resolved": "{ tableId: string; paginationValue: number; }",
+                    "original": "{\n    tableId: string;\n    paginationValue: number;\n    rowsPerPage?: number;\n  }",
+                    "resolved": "{ tableId: string; paginationValue: number; rowsPerPage?: number; }",
                     "references": {}
                 }
             }];

package/dist/collection/components/table/table-header/table-header.js

@@ -82,11 +82,11 @@ export class TdsTableHeaderRow {
         });
     }
     render() {
-        return (h(Host, { key: '5f212887d3d35e32240e9745d62685b7024100e1', class: {
+        return (h(Host, { key: '08dd2d38a8df4e8715c780dde55d81d52a26b26f', class: {
                 'tds-table--compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table--toolbar-available': this.enableToolbarDesign,
-            } }, h("tr", { key: '1a40af0dddfb627c39ae5df47aedc80eb1006f04' }, this.multiselect && (h("th", { key: '17d16e6bf8964b30e0ce93a76c436112ac0a6540', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { key: '98f282baf5a0b4a929ad04c850319e04955090a0', class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '9d8115deb1403df121309d32a166ccc6eac685d5', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { key: '7cc0e1c0d3d7ec9f4bef917a5b8346cca8bc58ae', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", { key: '2f7aa3bd3acdd69f1f2a20d3525ad5901f0ac239' }))));
+            } }, h("tr", { key: '5d5d3f8fa7293ce9e8b09fdb241225ce16e4b0d5' }, this.multiselect && (h("th", { key: '7b3034bd06348bc8df55a90fe13991f4910715a2', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { key: '0cae18f657cb4121c8ed21437ff55cefa308a5ff', class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '423b6ff577d3b65e7eb4f6e8a5f3f914d810904a', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { key: '74eb896f4b1de85cf9b561b9aa10e6d9e309031c', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", { key: 'a9b444c190c08a4eb53fa634281e2ff591046c5a' }))));
     }
     static get is() { return "tds-table-header"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table/table-header-cell/table-header-cell.js

@@ -105,7 +105,7 @@ export class TdsTableHeaderCell {
             this.host.closest('tds-table').getElementsByTagName('tds-table-toolbar').length >= 1;
     }
     render() {
-        return (h(Host, { key: '6a051465b3a5af5460f7c5ac112798b521f9b4a8', class: {
+        return (h(Host, { key: 'c40924cf774a94e3f78d114eb91632fe57388ba2', class: {
                 'tds-table__header-cell': true,
                 'tds-table__header-cell--sortable': this.sortable,
                 'tds-table__header-cell--is-sorted': this.sortedByMyKey,

package/dist/collection/components/table/table-header-input-wrapper/table-header-input-wrapper.js

@@ -63,7 +63,7 @@ export class TdsTableHeaderInputWrapper {
         }
     }
     render() {
-        return (h(Host, { key: '43243a6c8e1a0ef0f18d9f1f1d4cd4cba6bc15b4', class: {
+        return (h(Host, { key: '733f9d487fd530eea4b597368c5ecdc46fd8dedd', class: {
                 'focused-input-wrapper': this.inputFocused,
                 'show-icon': this.showIcon,
                 'tds-table__compact': this.compactDesign,

package/dist/collection/components/table/table-toolbar/table-toolbar.js

@@ -63,10 +63,10 @@ export class TdsTableToolbar {
         return styles;
     }
     render() {
-        return (h(Host, { key: '7f94e84dc631768fb7fba68846408c049959eee7', class: {
+        return (h(Host, { key: 'c3488722c0a27313efa13acafeab81ca23c6c765', class: {
                 'tds-table--compact': this.compactDesign,
                 'toolbar__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.getStyles() }, h("div", { key: 'ecbf925fcd58dd77de40fd4b15c0a57c07b8a1c0', class: "tds-table__upper-bar-flex" }, h("caption", { key: 'd2f230c4944590897ac220fc2c35cd72008b8f4c', class: "tds-table__title" }, this.tableTitle), h("div", { key: 'd75faf41e03bd19b1e268e85c884298c75d74450', class: "tds-table__actionbar" }, this.filter && (h("div", { key: '7b098f02923e9580e1c8852dfcca11d4c21c75bd', class: "tds-table__searchbar" }, h("input", { key: 'c9d76e665ef26e197a7dad1e9ac83a0095ad66e9', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event) }), h("span", { key: '1af8c1344e160cd494eeafc43c4f2422f7119d83', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: '9c85fc3e817afcf7b548f2f851f3ce0970f82c00', name: "search", size: "20px" })))), h("slot", { key: 'ff6e2d21cc06fa5981e7814040d6d79581f8d974', name: "end" })))));
+            }, style: this.getStyles() }, h("div", { key: '688e2903c9b447cb0770a8ee15dc8d1c4d3608d3', class: "tds-table__upper-bar-flex" }, h("caption", { key: 'a9c57a3b3cdbc61d7176163310cd8acda8ed58a2', class: "tds-table__title" }, this.tableTitle), h("div", { key: 'ae28004762b94923faa433a9f13245ab8595493b', class: "tds-table__actionbar" }, this.filter && (h("div", { key: '0d85e682ee8a733fc61df0855ed1a56bd7356069', class: "tds-table__searchbar" }, h("input", { key: '50b9c945f34cb13d440ed448f8be58ea2900f9f7', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event) }), h("span", { key: 'eff520922329f0379f22cb31171b81887c6bbdf7', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: '09c7d084aed40ec2a3a25dc1ca86d978b8ef39ec', name: "search", size: "20px" })))), h("slot", { key: '1b7dc61ec5ec9d5ac7e5ea116cedfd6a773d5628', name: "end" })))));
     }
     static get is() { return "tds-table-toolbar"; }
     static get encapsulation() { return "shadow"; }