@scania/tegel 1.39.0 → 1.40.0-stencil-core-4.38.1-beta.0

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

@@ -7,15 +7,32 @@ import generateUniqueId from "../../../utils/generateUniqueId";
  */
 export class TdsTable {
     constructor() {
+        /** Enables style with vertical dividers between columns */
         this.verticalDividers = false;
+        /** Enables style where Table toolbar, rows and footer are less high */
         this.compactDesign = false;
-        this.noMinWidth = undefined;
+        // TODO: Due to unknown reason, one of this items has to be left as is.
+        //  If all are false, it seems like emitting is not properly done and it affects other events in Table.
+        //  Try setting it and observe text-align set on header cell
+        /** Enables multiselect feature of Table */
         this.multiselect = false;
+        /** Enables extended row feature of Table */
         this.expandableRows = false;
+        /** Enables Table to take 100% available width with equal spacing of columns */
         this.responsive = false;
+        /** Variant of the component, based on current mode. */
         this.modeVariant = null;
+        /** Enables zebra stripe mode on the table rows or columns. */
         this.zebraMode = 'none';
+        /** Width of the table, used as the constraint for horizontal scrolling.
+         * **NOTE**: this will disable usage of the responsive flag
+         * */
         this.horizontalScrollWidth = null;
+        /** ID used for internal Table functionality and events, must be unique.
+         *
+         * **NOTE**: If you're listening for Table events, you need to set this ID yourself to identify the Table,
+         * as the default ID is random and will be different every time.
+         */
         this.tableId = generateUniqueId();
         this.enableHorizontalScrollToolbarDesign = false;
         this.enableHorizontalScrollFooterDesign = false;
@@ -134,8 +151,10 @@ export class TdsTable {
                     "tags": [],
                     "text": "Enables style with vertical dividers between columns"
                 },
-                "attribute": "vertical-dividers",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "vertical-dividers",
                 "defaultValue": "false"
             },
             "compactDesign": {
@@ -152,8 +171,10 @@ export class TdsTable {
                     "tags": [],
                     "text": "Enables style where Table toolbar, rows and footer are less high"
                 },
-                "attribute": "compact-design",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "compact-design",
                 "defaultValue": "false"
             },
             "noMinWidth": {
@@ -170,8 +191,10 @@ export class TdsTable {
                     "tags": [],
                     "text": "Enables to customize width on Table columns"
                 },
-                "attribute": "no-min-width",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "no-min-width"
             },
             "multiselect": {
                 "type": "boolean",
@@ -187,8 +210,10 @@ export class TdsTable {
                     "tags": [],
                     "text": "Enables multiselect feature of Table"
                 },
-                "attribute": "multiselect",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "multiselect",
                 "defaultValue": "false"
             },
             "expandableRows": {
@@ -205,8 +230,10 @@ export class TdsTable {
                     "tags": [],
                     "text": "Enables extended row feature of Table"
                 },
-                "attribute": "expandable-rows",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "expandable-rows",
                 "defaultValue": "false"
             },
             "responsive": {
@@ -223,8 +250,10 @@ export class TdsTable {
                     "tags": [],
                     "text": "Enables Table to take 100% available width with equal spacing of columns"
                 },
-                "attribute": "responsive",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "responsive",
                 "defaultValue": "false"
             },
             "modeVariant": {
@@ -241,8 +270,10 @@ export class TdsTable {
                     "tags": [],
                     "text": "Variant of the component, based on current mode."
                 },
-                "attribute": "mode-variant",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "mode-variant",
                 "defaultValue": "null"
             },
             "zebraMode": {
@@ -259,8 +290,10 @@ export class TdsTable {
                     "tags": [],
                     "text": "Enables zebra stripe mode on the table rows or columns."
                 },
-                "attribute": "zebra-mode",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "zebra-mode",
                 "defaultValue": "'none'"
             },
             "horizontalScrollWidth": {
@@ -277,8 +310,10 @@ export class TdsTable {
                     "tags": [],
                     "text": "Width of the table, used as the constraint for horizontal scrolling.\n**NOTE**: this will disable usage of the responsive flag"
                 },
-                "attribute": "horizontal-scroll-width",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "horizontal-scroll-width",
                 "defaultValue": "null"
             },
             "tableId": {
@@ -295,8 +330,10 @@ export class TdsTable {
                     "tags": [],
                     "text": "ID used for internal Table functionality and events, must be unique.\n\n**NOTE**: If you're listening for Table events, you need to set this ID yourself to identify the Table,\nas the default ID is random and will be different every time."
                 },
-                "attribute": "table-id",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "table-id",
                 "defaultValue": "generateUniqueId()"
             }
         };

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

@@ -9,20 +9,19 @@ const relevantTableProps = [
  */
 export class TdsTableBody {
     constructor() {
-        this.bodyCheckBoxClicked = () => {
-            const numberOfRows = this.host.getElementsByClassName('tds-table__row').length;
-            const numberOfRowsSelected = this.host.getElementsByClassName('tds-table__row--selected').length;
-            this.mainCheckboxStatus = numberOfRows === numberOfRowsSelected;
-        };
         this.multiselect = false;
         this.enablePaginationTableBody = false;
         this.expandableRows = false;
         this.multiselectArray = [];
-        this.multiselectArrayJSON = undefined;
         this.mainCheckboxStatus = false;
         this.columnsNumber = 0;
         this.zebraMode = 'none';
         this.tableId = '';
+        this.bodyCheckBoxClicked = () => {
+            const numberOfRows = this.host.getElementsByClassName('tds-table__row').length;
+            const numberOfRowsSelected = this.host.getElementsByClassName('tds-table__row--selected').length;
+            this.mainCheckboxStatus = numberOfRows === numberOfRowsSelected;
+        };
     }
     internalTdsPropChangeListener(event) {
         if (this.tableId === event.detail.tableId) {
@@ -60,12 +59,12 @@ export class TdsTableBody {
         }
     }
     render() {
-        return (h(Host, { key: '22e2e49b6db83c7c71e1e674b3dbfcb1ffd04e66', "data-selected-rows": this.multiselectArrayJSON, class: {
+        return (h(Host, { key: 'f9472ae9b1dcad43aab101811dfe858dea4851e9', "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: 'deb2aa129f332b48f7b9a38b0de25c2076fd86d9' })));
+            } }, h("slot", { key: '61a0ec649d2f7f51ca386c46335a6ae018c993d0' })));
     }
     static get is() { return "tds-table-body"; }
     static get originalStyleUrls() {

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

@@ -9,11 +9,8 @@ const relevantTableProps = [
  */
 export class TdsTableBodyCell {
     constructor() {
-        this.cellValue = undefined;
-        this.cellKey = undefined;
+        /** Disables internal padding. Useful when passing other components to cell. */
         this.disablePadding = false;
-        this.textAlign = undefined;
-        this.textAlignState = undefined;
         this.activeSorting = false;
         this.verticalDividers = false;
         this.compactDesign = false;
@@ -83,13 +80,13 @@ export class TdsTableBodyCell {
             // Conditionally set padding style
             padding: paddingStyle,
         };
-        return (h(Host, { key: '726912df89435650c3ad1f39729fdff7d2a497e3', class: {
+        return (h(Host, { key: 'cfabd07f5fb68862ec1afe31679d492593e5a579', 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, role: "cell" }, this.cellValue, h("slot", { key: 'ff6fb6613f29e94552916cfa75932b670e22ea80' })));
+            }, style: dynamicStyles, role: "cell" }, this.cellValue, h("slot", { key: 'cb0466abad9e73f9daed8483304246deb79d37e8' })));
     }
     static get is() { return "tds-body-cell"; }
     static get encapsulation() { return "shadow"; }
@@ -119,8 +116,10 @@ export class TdsTableBodyCell {
                     "tags": [],
                     "text": "Value that will be presented as text inside a cell"
                 },
-                "attribute": "cell-value",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "cell-value"
             },
             "cellKey": {
                 "type": "any",
@@ -136,8 +135,10 @@ export class TdsTableBodyCell {
                     "tags": [],
                     "text": "Passing the same cell key for all body cells which is used in head cell enables features of text align and hovering"
                 },
-                "attribute": "cell-key",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "cell-key"
             },
             "disablePadding": {
                 "type": "boolean",
@@ -153,8 +154,10 @@ export class TdsTableBodyCell {
                     "tags": [],
                     "text": "Disables internal padding. Useful when passing other components to cell."
                 },
-                "attribute": "disable-padding",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "disable-padding",
                 "defaultValue": "false"
             },
             "textAlign": {
@@ -171,8 +174,10 @@ export class TdsTableBodyCell {
                     "tags": [],
                     "text": "Setting for text align, default value \"left\". Other accepted values are \"left\", \"start\", \"right\", \"end\" or \"center\"."
                 },
-                "attribute": "text-align",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "text-align"
             }
         };
     }

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

@@ -2,6 +2,7 @@ import { h, Host } from "@stencil/core";
 const relevantTableProps = ['compactDesign'];
 export class TdsTableBodyInputWrapper {
     constructor() {
+        /** Controls if the edit icon is shown */
         this.showIcon = true;
         this.renderSlot = true;
         this.inputFocused = false;
@@ -81,7 +82,7 @@ export class TdsTableBodyInputWrapper {
         }
     }
     render() {
-        return (h(Host, { key: '47496dfe7467e43cede5af53d6c30fe17c116eaf', class: {
+        return (h(Host, { key: '8030b00df873e3a242708a9b4fe88b4ad618d069', class: {
                 'focused-input-wrapper': this.inputFocused,
                 'show-icon': this.showIcon,
                 'tds-table__compact': this.compactDesign,
@@ -115,8 +116,10 @@ export class TdsTableBodyInputWrapper {
                     "tags": [],
                     "text": "Controls if the edit icon is shown"
                 },
-                "attribute": "show-icon",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "show-icon",
                 "defaultValue": "true"
             }
         };

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

@@ -9,8 +9,11 @@ const relevantTableProps = [
  */
 export class TdsTableBodyRow {
     constructor() {
+        /** Marks the row as selected, used for multiselect table. */
         this.selected = false;
+        /** Marks the row as disabled, used for multiselect table. */
         this.disabled = false;
+        /** Makes the row clickable and tabbable for accessibility purposes. */
         this.clickable = false;
         this.multiselect = false;
         this.mainCheckBoxStatus = false;
@@ -68,13 +71,13 @@ export class TdsTableBodyRow {
         }
     }
     render() {
-        return (h(Host, { key: '13b790e1c4586e110853125bb2856166f8090cc3', tabindex: this.clickable ? '0' : null, class: {
+        return (h(Host, { key: '6bf3fee7c066bc4686c9aa0ecba45c04ca7b2aae', tabindex: this.clickable ? '0' : null, class: {
                 'tds-table__row': true,
                 'tds-table__row--selected': this.selected,
                 'tds-table__compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table__row--clickable': this.clickable,
-            }, onClick: (e) => this.handleRowClick(e), onKeyDown: (e) => this.handleKeyDown(e), role: "row" }, this.multiselect && (h("td", { key: '3a966516c5a227907f9530d047e6e1c19eb5362c', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '90811b5dd064a36dfe9363dae55376fb7b4ca78d', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("slot", { key: '4a16bce9add5ec4b9e4119e5361d556f5ee104f9' })));
+            }, onClick: (e) => this.handleRowClick(e), onKeyDown: (e) => this.handleKeyDown(e), role: "row" }, this.multiselect && (h("td", { key: '845e64408b938254887c7ec840eae48fc4ed01e3', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '817ef05632a9b2704148a0c9ce190b360b9cec3b', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("slot", { key: '50cf1a5aeae24aaceeb813f432abe8e75ad53857' })));
     }
     static get is() { return "tds-table-body-row"; }
     static get encapsulation() { return "shadow"; }
@@ -104,8 +107,10 @@ export class TdsTableBodyRow {
                     "tags": [],
                     "text": "Marks the row as selected, used for multiselect table."
                 },
-                "attribute": "selected",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "selected",
                 "defaultValue": "false"
             },
             "disabled": {
@@ -122,8 +127,10 @@ export class TdsTableBodyRow {
                     "tags": [],
                     "text": "Marks the row as disabled, used for multiselect table."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "clickable": {
@@ -140,8 +147,10 @@ export class TdsTableBodyRow {
                     "tags": [],
                     "text": "Makes the row clickable and tabbable for accessibility purposes."
                 },
-                "attribute": "clickable",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "clickable",
                 "defaultValue": "false"
             }
         };

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

@@ -16,12 +16,19 @@ const relevantTableProps = [
  */
 export class TdsTableBodyRowExpandable {
     constructor() {
+        /** In case that automatic count of columns does not work, user can manually set this one.
+         *  Take in mind that expandable control is column too */
         this.colSpan = null;
+        /** ID for the table row. Randomly generated if not specified. */
         this.rowId = generateUniqueId();
-        this.expanded = undefined;
+        /** Controls the overflow behavior of the expandable row content */
         this.overflow = 'auto';
+        /** Sets isExpanded state to true or false internally */
+        /** Enables auto-collapse of other expandable rows when one row is expanded */
         this.autoCollapse = false;
+        /** Aria label for the expand button, providing an accessible description */
         this.tdsAriaLabelExpandButton = '';
+        /** Sets isExpanded state to true or fals internally */
         this.isExpanded = false;
         this.tableId = '';
         this.columnsNumber = null;
@@ -101,26 +108,26 @@ export class TdsTableBodyRowExpandable {
         this.sendValue();
     }
     render() {
-        return (h(Host, { key: '36be80e7cd0916cb8e196f52676281fcabc1996e', class: {
+        return (h(Host, { key: '3d289d00082c284257728cec4f0ddcfc63dda863', 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: '868377d055d9d66fcf1824ed811e4a56f67b79e0', id: `expandable-content-${this.rowId}`, class: {
+            } }, h("tr", { key: '246ee336a3ab871346e1fcf81f02109121dc9657', id: `expandable-content-${this.rowId}`, class: {
                 'tds-table__row': true,
                 'tds-table__row--expanded': this.isExpanded,
-            }, part: "row" }, h("td", { key: '059858ff5293deda48d039fdc81dd4a5d8ae6fce', class: {
+            }, part: "row" }, h("td", { key: 'b727b78965a4bdf0b6cf8ff7e8460d3dfae8327e', class: {
                 'tds-table__cell-expand': true,
-            } }, h("label", { key: '6e05d93a509cb77cb3fd76f3d869b820b5d83163', class: "tds-table__expand-control-container" }, h("input", { key: 'ed7091d4dfdac43c082ee63548c7bff2e87379dd', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `expandable-content-${this.rowId}`, "aria-label": this.tdsAriaLabelExpandButton }), h("span", { key: '84622275a00b28685834e0de8552f5c7a36bc983', class: "tds-expendable-row-icon" }, h("svg", { key: '633d1030453895343295b30142410ece7f15dec3', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: 'e4d21588ca0bb6fbcd68af3a7afb48bafe180bc1', "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: '5c66154a24fe8d21bb6b9d91930ad7efd4cb1ec5' })), h("tr", { key: '1417c7143b8aaafbb2143557e53443cde9afcbde', class: {
+            } }, h("label", { key: 'c878be3429a3145b62b242f2e3d9c90ec0a74257', class: "tds-table__expand-control-container" }, h("input", { key: '6b99ef165e359012f83f7e298d9f83319493fc52', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `expandable-content-${this.rowId}`, "aria-label": this.tdsAriaLabelExpandButton }), h("span", { key: 'ec9e1aefc553362c0c3e15cb99118a9c2dfffd04', class: "tds-expendable-row-icon" }, h("svg", { key: '84b3270e5f1bfc7671adcea34d862fe0485f40a8', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: 'fc04209a4a2d35c19c7c74875c0ab302077abbf2', "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: '0c16341da217fbe920241a97b179335cb61e2364' })), h("tr", { key: 'a83ca5c30ec4945dfee096a408db4d1d240d3643', class: {
                 'tds-table__row-expand': true,
                 'tds-table__row-expand--expanded': this.isExpanded,
-            }, part: "expand-row" }, h("td", { key: 'b72d532f22b5c7c0bc7c7b23caf5887d4228b9d0', class: {
+            }, part: "expand-row" }, h("td", { key: '2fcafe17b33ce39b5e1a3b149434006a70f6b8f3', class: {
                 'tds-table__cell-expand': true,
                 'tds-table__cell-expand--overflow-hidden': this.overflow === 'hidden',
                 'tds-table__cell-expand--overflow-visible': this.overflow === 'visible',
-            }, part: "expand-row-cell", colSpan: this.columnsNumber }, h("div", { key: '256a827b43a8099b9ea4e5a5a43023ff9bf0b828', style: {
+            }, part: "expand-row-cell", colSpan: this.columnsNumber }, h("div", { key: 'b696b23d127e32a8017692b03de1ce8ee9497dcb', style: {
                 overflow: this.overflow,
-            } }, h("slot", { key: '6bbc0eeca7b7a654da9c1b7da6992aa8928e1974', name: "expand-row" }))))));
+            } }, h("slot", { key: 'e64e00778fd7c85618ae4cbc19d232e2acb873b5', name: "expand-row" }))))));
     }
     static get is() { return "tds-table-body-row-expandable"; }
     static get encapsulation() { return "shadow"; }
@@ -150,8 +157,10 @@ export class TdsTableBodyRowExpandable {
                     "tags": [],
                     "text": "In case that automatic count of columns does not work, user can manually set this one.\nTake in mind that expandable control is column too"
                 },
-                "attribute": "col-span",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "col-span",
                 "defaultValue": "null"
             },
             "rowId": {
@@ -168,8 +177,10 @@ export class TdsTableBodyRowExpandable {
                     "tags": [],
                     "text": "ID for the table row. Randomly generated if not specified."
                 },
-                "attribute": "row-id",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "row-id",
                 "defaultValue": "generateUniqueId()"
             },
             "expanded": {
@@ -186,8 +197,10 @@ export class TdsTableBodyRowExpandable {
                     "tags": [],
                     "text": "Sets isExpanded state to true or false externally"
                 },
-                "attribute": "expanded",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "expanded"
             },
             "overflow": {
                 "type": "string",
@@ -203,8 +216,10 @@ export class TdsTableBodyRowExpandable {
                     "tags": [],
                     "text": "Controls the overflow behavior of the expandable row content"
                 },
-                "attribute": "overflow",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "overflow",
                 "defaultValue": "'auto'"
             },
             "autoCollapse": {
@@ -221,8 +236,10 @@ export class TdsTableBodyRowExpandable {
                     "tags": [],
                     "text": "Enables auto-collapse of other expandable rows when one row is expanded"
                 },
-                "attribute": "auto-collapse",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "auto-collapse",
                 "defaultValue": "false"
             },
             "tdsAriaLabelExpandButton": {
@@ -239,8 +256,10 @@ export class TdsTableBodyRowExpandable {
                     "tags": [],
                     "text": "Aria label for the expand button, providing an accessible description"
                 },
-                "attribute": "tds-aria-label-expand-button",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "tds-aria-label-expand-button",
                 "defaultValue": "''"
             }
         };

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

@@ -8,6 +8,25 @@ function removeShakeAnimation(e) {
 }
 export class TdsTableFooter {
     constructor() {
+        /** Enable pagination and show pagination controls  */
+        this.pagination = false;
+        /** Sets the pagination number. */
+        this.paginationValue = 1;
+        /** Enable rows per page dropdown */
+        this.rowsperpage = true;
+        /** Set available rows per page values */
+        this.rowsPerPageValues = [10, 25, 50];
+        /** Sets the number of pages. */
+        this.pages = null;
+        /** <b>Client override</b> Used to set the column span of the footer. Use as fallback if the automatic count of columns fails. */
+        this.cols = null;
+        /** State that memorize number of columns to display colSpan correctly - set from parent level */
+        this.columnsNumber = 0;
+        /* Sets the footer to use compact design. */
+        this.compactDesign = false;
+        this.tableId = '';
+        this.horizontalScrollWidth = null;
+        this.rowsPerPageValue = this.rowsPerPageValues[0];
         this.emitTdsPagination = () => {
             if (this.rowsperpage) {
                 this.tdsPagination.emit({
@@ -51,18 +70,6 @@ export class TdsTableFooter {
             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;
-        this.compactDesign = false;
-        this.lastCorrectValue = undefined;
-        this.tableId = '';
-        this.horizontalScrollWidth = null;
-        this.rowsPerPageValue = this.rowsPerPageValues[0];
     }
     internalTdsPropChangeListener(event) {
         if (this.tableId === event.detail.tableId) {
@@ -127,12 +134,12 @@ export class TdsTableFooter {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'fd6a5604adc116a78c9723ce3f16535ea6fa7edf', class: {
+        return (h(Host, { key: 'd064beda251b663ad3afccebc98fb4718e3f1d09', class: {
                 'tds-table--compact': this.compactDesign,
                 'footer__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.getStyles() }, h("tr", { key: '5ec3649f1e76f54a1d09cc023f52f165bf55a175', class: "tds-table__footer-row" }, h("td", { key: '0815d2e9083b0b3793dbf3572869b76c2445396e', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: '3bdc6acf5b034f8ee141e1fde58e32cb76e7ab33', class: "tds-table__pagination" }, h("div", { key: 'd8bd734bb3890593404d7950b5cb353e0af1b37f', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { key: '0cc09dd7662a2ceba454fb1e1c3eb3a389e9eb4d', class: "rows-per-page" }, h("p", { key: '57ae73ac509c9cd7ce9c93ae60737724035fb376' }, "Rows per page"), h("tds-dropdown", { key: '6fc1d8794bb2cecc406d9143c1e501733a990993', modeVariant: "secondary", id: "rows-dropdown", class: "page-dropdown", size: "xs", defaultValue: `${this.rowsPerPageValues[0]}`, onTdsChange: (event) => this.rowsPerPageChange(event) }, this.rowsPerPageValues.map((value) => {
+            }, style: this.getStyles() }, h("tr", { key: '02d6c97e498e44ad70c86fd08cc665a8b89e2a07', class: "tds-table__footer-row" }, h("td", { key: 'e9d64ea0f3be240867d886973a40c557fe9899da', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: '4a8f3f921a4e103a1a14e368a4702cd8f6ceb18b', class: "tds-table__pagination" }, h("div", { key: 'c536fb9916071677bf20f033ebb184d469aa0774', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { key: '5a935d6c92a574e1ea0a081e955916526ec9da45', class: "rows-per-page" }, h("p", { key: 'ae9f908bc6803a814236a56e5801857a1989df54' }, "Rows per page"), h("tds-dropdown", { key: '1bcac2201accc7d613250c8f38b77ddc04bfb463', 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: '71e30ccac9cb36acf61f46de47fc39d4b45c49d3', class: "tds-table__page-selector" }, h("input", { key: 'fe99cbdae18c4b297e0823de2f2a5529f24ed7f4', 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: 'd49b93524aeaddacd2e6c431d8f191fd87c768be', class: "tds-table__footer-text" }, "of ", h("span", { key: '1d6f7429e0837f200db90259e1e23cb879643756' }, this.pages), " pages"), h("button", { key: 'b5e0a8d72a1e7ff35570dfd2c131735f91ebb824', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, h("tds-icon", { key: '06ffe814de254c6c194ab88d89fe5f6da5239c44', name: "skip_backwards", size: "20px" })), h("button", { key: '271a59221429937f24873f984526fe55dd12c874', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: 'b2231b490bdd4234d62399f2785edf3136789af5', name: "chevron_left", size: "20px" })), h("button", { key: '6b06a0fad602d8593bb834672e934afb00d45edf', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: '384751f9299ce4078e35fc15be37d2d529ddeffa', name: "chevron_right", size: "20px" })), h("button", { key: 'cf0fa5f2967d7f249ffbd548039e8021e4121bec', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, h("tds-icon", { key: '6da11c4f01f58a7e39698b7a91034567527464e6', name: "skip_forward", size: "20px" })))))))));
+        }))))), h("div", { key: '08f90bbe4dd64812b95de4be540c65afea1a5d7c', class: "tds-table__page-selector" }, h("input", { key: '4e780ad0a24f39df03edc044d110b6278589a61a', 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: '538690df3c6bef86bf14fe8b7c967b89257e5cb7', class: "tds-table__footer-text" }, "of ", h("span", { key: 'ec38ac0b07103bea8aec7ba3e7e88d73c2a756cb' }, this.pages), " pages"), h("button", { key: 'f196e4b87144a6e66a6a3d0451ca0d4ba32bd1af', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, h("tds-icon", { key: '80041ff46837e3ba072b740cf79d1cf9bbf21b63', name: "skip_backwards", size: "20px" })), h("button", { key: 'c51d570daeb97dbe2cae4e344eb51b97d88bb10a', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: 'bc02c69dc75f412fac63d952458d0ea06530593c', name: "chevron_left", size: "20px" })), h("button", { key: 'df29a47121d892642b24533a0e132d1f2d13d545', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: 'b2ae455a7a62c647f5c79cfc8f41bcae4b41b12d', name: "chevron_right", size: "20px" })), h("button", { key: 'd333d73217b7ed86841810bd342e2dd3152ef560', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, h("tds-icon", { key: '9d94abd5c17bc50b6a33c21dcc74b2689d514f2a', name: "skip_forward", size: "20px" })))))))));
     }
     static get is() { return "tds-table-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -162,8 +169,10 @@ export class TdsTableFooter {
                     "tags": [],
                     "text": "Enable pagination and show pagination controls"
                 },
-                "attribute": "pagination",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "pagination",
                 "defaultValue": "false"
             },
             "paginationValue": {
@@ -180,8 +189,10 @@ export class TdsTableFooter {
                     "tags": [],
                     "text": "Sets the pagination number."
                 },
-                "attribute": "pagination-value",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "pagination-value",
                 "defaultValue": "1"
             },
             "rowsperpage": {
@@ -198,8 +209,10 @@ export class TdsTableFooter {
                     "tags": [],
                     "text": "Enable rows per page dropdown"
                 },
-                "attribute": "rowsperpage",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "rowsperpage",
                 "defaultValue": "true"
             },
             "rowsPerPageValues": {
@@ -216,6 +229,8 @@ export class TdsTableFooter {
                     "tags": [],
                     "text": "Set available rows per page values"
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "[10, 25, 50]"
             },
             "pages": {
@@ -232,8 +247,10 @@ export class TdsTableFooter {
                     "tags": [],
                     "text": "Sets the number of pages."
                 },
-                "attribute": "pages",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "pages",
                 "defaultValue": "null"
             },
             "cols": {
@@ -250,8 +267,10 @@ export class TdsTableFooter {
                     "tags": [],
                     "text": "<b>Client override</b> Used to set the column span of the footer. Use as fallback if the automatic count of columns fails."
                 },
-                "attribute": "cols",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "cols",
                 "defaultValue": "null"
             }
         };