@scania/tegel 1.42.0 → 1.44.0-sonarcloud-0

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

@@ -48,9 +48,9 @@ export class TdsTableBodyCell {
                     this.textAlignState = this.textAlign;
                 }
                 else {
-                    this.textAlignState = ['left', 'start', 'center', 'right', 'end'].includes(receivedTextAlign)
+                    this.textAlignState = (['left', 'start', 'right', 'end', 'center'].includes(receivedTextAlign)
                         ? receivedTextAlign
-                        : 'left';
+                        : 'left');
                 }
             }
         }
@@ -63,7 +63,8 @@ export class TdsTableBodyCell {
     componentWillLoad() {
         if (this.tableEl) {
             relevantTableProps.forEach((tablePropName) => {
-                this[tablePropName] = this.tableEl[tablePropName];
+                var _a;
+                this[tablePropName] = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a[tablePropName];
             });
         }
         if (this.textAlign) {
@@ -83,13 +84,13 @@ export class TdsTableBodyCell {
             // Conditionally set padding style
             padding: paddingStyle,
         };
-        return (h(Host, { key: 'cfabd07f5fb68862ec1afe31679d492593e5a579', class: {
+        return (h(Host, { key: '2f095d2b2cf724d8ef18ffb895f327832ef5ce66', 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: 'cb0466abad9e73f9daed8483304246deb79d37e8' })));
+            }, style: dynamicStyles, role: "cell" }, this.cellValue, h("slot", { key: '85ffbf1e995c5e797971b97101d350b9e3bc3921' })));
     }
     static get is() { return "tds-body-cell"; }
     static get encapsulation() { return "shadow"; }
@@ -110,11 +111,11 @@ export class TdsTableBodyCell {
                 "mutable": false,
                 "complexType": {
                     "original": "string | number",
-                    "resolved": "number | string",
+                    "resolved": "number | string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Value that will be presented as text inside a cell"
@@ -123,15 +124,15 @@ export class TdsTableBodyCell {
                 "reflect": true
             },
             "cellKey": {
-                "type": "any",
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
+                    "original": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Passing the same cell key for all body cells which is used in head cell enables features of text align and hovering"
@@ -161,12 +162,18 @@ export class TdsTableBodyCell {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'left' | 'start' | 'right' | 'end' | 'center'",
-                    "resolved": "\"center\" | \"end\" | \"left\" | \"right\" | \"start\"",
-                    "references": {}
+                    "original": "TextAlign",
+                    "resolved": "\"center\" | \"end\" | \"left\" | \"right\" | \"start\" | undefined",
+                    "references": {
+                        "TextAlign": {
+                            "location": "import",
+                            "path": "../table/table",
+                            "id": "src/components/table/table/table.tsx::TextAlign"
+                        }
+                    }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Setting for text align, default value \"left\". Other accepted values are \"left\", \"start\", \"right\", \"end\" or \"center\"."

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

@@ -81,7 +81,7 @@ export class TdsTableBodyInputWrapper {
         }
     }
     render() {
-        return (h(Host, { key: '1ebf0bf16490030ce20a99e1234e68d81430eaf8', class: {
+        return (h(Host, { key: 'ad9ea213210029f368ef88ecb62db60a0d79843d', class: {
                 'focused-input-wrapper': this.inputFocused,
                 'show-icon': this.showIcon,
                 'tds-table__compact': this.compactDesign,

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

@@ -20,17 +20,19 @@ export class TdsTableBodyRow {
         this.tableId = '';
     }
     async handleCheckboxChange(event) {
+        var _a;
         this.selected = event.detail.checked;
         this.tdsSelect.emit({
             tableId: this.tableId,
             checked: this.selected,
-            selectedRows: await this.tableEl.getSelectedRows(),
+            selectedRows: await ((_a = this.tableEl) === null || _a === void 0 ? void 0 : _a.getSelectedRows()),
         });
     }
     handleRowClick(e) {
+        var _a, _b, _c;
         if (!this.clickable)
             return;
-        let rowIndex = Array.from(this.host.parentElement.children).indexOf(this.host);
+        const rowIndex = Array.from((_c = (_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.children) !== null && _c !== void 0 ? _c : []).indexOf(this.host);
         this.tdsClick.emit({
             event: e,
             tableId: this.tableId,
@@ -63,18 +65,19 @@ export class TdsTableBodyRow {
     componentWillLoad() {
         if (this.tableEl) {
             relevantTableProps.forEach((tablePropName) => {
-                this[tablePropName] = this.tableEl[tablePropName];
+                var _a;
+                this[tablePropName] = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a[tablePropName];
             });
         }
     }
     render() {
-        return (h(Host, { key: '6bf3fee7c066bc4686c9aa0ecba45c04ca7b2aae', tabindex: this.clickable ? '0' : null, class: {
+        return (h(Host, { key: '94bac5b3613998d805d62da4ce0ca9480e337fbc', 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: '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' })));
+            }, onClick: (e) => this.handleRowClick(e), onKeyDown: (e) => this.handleKeyDown(e), role: "row" }, this.multiselect && (h("td", { key: 'cb823140e532475537b7f7e78ae667173fa49259', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: 'f4727dca32c80f8c0ec36995f0ac072fc7af1106', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("slot", { key: '33046cf6051498b6b1b314f8d7dd380b4c2309d0' })));
     }
     static get is() { return "tds-table-body-row"; }
     static get encapsulation() { return "shadow"; }
@@ -113,7 +116,7 @@ export class TdsTableBodyRow {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -168,8 +171,8 @@ export class TdsTableBodyRow {
                     "text": "Event emitted when a row is selected/deselected."
                 },
                 "complexType": {
-                    "original": "{\n    tableId: string;\n    checked: boolean;\n    selectedRows: any[];\n  }",
-                    "resolved": "{ tableId: string; checked: boolean; selectedRows: any[]; }",
+                    "original": "{\n    tableId: string | undefined;\n    checked: boolean;\n    selectedRows: object[] | undefined;\n  }",
+                    "resolved": "{ tableId: string | undefined; checked: boolean; selectedRows: object[] | undefined; }",
                     "references": {}
                 }
             }, {
@@ -183,8 +186,8 @@ export class TdsTableBodyRow {
                     "text": "Event emitted when a row is clicked."
                 },
                 "complexType": {
-                    "original": "{\n    event: MouseEvent;\n    tableId: string;\n    rowIndex: number;\n  }",
-                    "resolved": "{ event: MouseEvent; tableId: string; rowIndex: number; }",
+                    "original": "{\n    event: MouseEvent;\n    tableId: string | undefined;\n    rowIndex: number;\n  }",
+                    "resolved": "{ event: MouseEvent; tableId: string | undefined; rowIndex: number; }",
                     "references": {
                         "MouseEvent": {
                             "location": "global",

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

@@ -72,24 +72,30 @@ export class TdsTableBodyRowExpandable {
         this.tdsChange.emit({ rowId: this.rowId, isExpanded: this.isExpanded, tableId: this.tableId });
     }
     connectedCallback() {
+        var _a;
         /* if user did set a prop we use that as default behaviour */
         if (this.expanded !== undefined) {
             this.isExpanded = this.expanded;
         }
         this.tableEl = this.host.closest('tds-table');
-        this.tableId = this.tableEl.tableId;
+        this.tableId = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a.tableId;
     }
     componentWillLoad() {
         relevantTableProps.forEach((tablePropName) => {
-            this[tablePropName] = this.tableEl[tablePropName];
+            var _a;
+            this[tablePropName] = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a[tablePropName];
         });
     }
     componentWillRender() {
+        var _a;
         if (this.colSpan !== null) {
             this.columnsNumber = this.colSpan;
         }
         else {
-            this.columnsNumber = this.tableEl.querySelector('tds-table-header').childElementCount + 1;
+            const header = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a.querySelector('tds-table-header');
+            if (header) {
+                this.columnsNumber = header.childElementCount + 1;
+            }
         }
     }
     sendValue() {
@@ -101,26 +107,27 @@ export class TdsTableBodyRowExpandable {
         this.sendValue();
     }
     render() {
-        return (h(Host, { key: '3d289d00082c284257728cec4f0ddcfc63dda863', class: {
+        var _a;
+        return (h(Host, { key: '9747b45c606d94f6a79e35afd1e126e0d4940761', 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: '246ee336a3ab871346e1fcf81f02109121dc9657', id: `expandable-content-${this.rowId}`, class: {
+            } }, h("tr", { key: 'c3eb7c452c55cd64393d4d0820983a450b3c83de', id: `expandable-content-${this.rowId}`, class: {
                 'tds-table__row': true,
                 'tds-table__row--expanded': this.isExpanded,
-            }, part: "row" }, h("td", { key: 'b727b78965a4bdf0b6cf8ff7e8460d3dfae8327e', class: {
+            }, part: "row" }, h("td", { key: 'a269a53c209ac33f82475c92408a824194feea0d', class: {
                 'tds-table__cell-expand': true,
-            } }, 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: {
+            } }, h("label", { key: '3a32f175d6f584850e442a279818bbdec8fbc00a', class: "tds-table__expand-control-container" }, h("input", { key: '073584fdeda9b0aa6dc6fa51030ee84c1478f3a4', 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: 'd3782b0bb66e7ac420c94eaa310a18ec97de34a8', class: "tds-expendable-row-icon" }, h("svg", { key: 'd25d24e492917ecea514da86a7e92238089bfe3c', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '1849dbf3a843f1f98a415a0017ad32951e0af4ff', "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: 'c6af8843f62b83e6e96e3ea65087c276c0fb6e4f' })), h("tr", { key: '12d8127b203fd91f1b0a767b47aa752d84016aed', class: {
                 'tds-table__row-expand': true,
                 'tds-table__row-expand--expanded': this.isExpanded,
-            }, part: "expand-row" }, h("td", { key: '2fcafe17b33ce39b5e1a3b149434006a70f6b8f3', class: {
+            }, part: "expand-row" }, h("td", { key: '9bd6d1292ede611479fe3f59239ca0ae1257fddc', 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: 'b696b23d127e32a8017692b03de1ce8ee9497dcb', style: {
+            }, part: "expand-row-cell", colSpan: (_a = this.columnsNumber) !== null && _a !== void 0 ? _a : undefined }, h("div", { key: '6cfcd733564c5e6d1b55f6029e80e2b5713988d5', style: {
                 overflow: this.overflow,
-            } }, h("slot", { key: 'e64e00778fd7c85618ae4cbc19d232e2acb873b5', name: "expand-row" }))))));
+            } }, h("slot", { key: 'fa74913d8c68ad2fbfc359fe9d67f27b9b254d28', name: "expand-row" }))))));
     }
     static get is() { return "tds-table-body-row-expandable"; }
     static get encapsulation() { return "shadow"; }
@@ -140,8 +147,8 @@ export class TdsTableBodyRowExpandable {
                 "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "number | null",
+                    "resolved": "null | number",
                     "references": {}
                 },
                 "required": false,
@@ -177,11 +184,11 @@ export class TdsTableBodyRowExpandable {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Sets isExpanded state to true or false externally"
@@ -271,8 +278,8 @@ export class TdsTableBodyRowExpandable {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "any",
-                    "resolved": "any",
+                    "original": "object",
+                    "resolved": "object",
                     "references": {}
                 }
             }, {
@@ -286,8 +293,8 @@ export class TdsTableBodyRowExpandable {
                     "text": "Sends unique table row identifier and isExpanded status when it is expanded/collapsed."
                 },
                 "complexType": {
-                    "original": "{\n    rowId: string;\n    isExpanded: boolean;\n    tableId: string;\n  }",
-                    "resolved": "{ rowId: string; isExpanded: boolean; tableId: string; }",
+                    "original": "{\n    rowId: string;\n    isExpanded: boolean;\n    tableId: string | undefined;\n  }",
+                    "resolved": "{ rowId: string; isExpanded: boolean; tableId: string | undefined; }",
                     "references": {}
                 }
             }];

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

@@ -35,7 +35,7 @@ export class TdsTableFooter {
         this.nextPage = () => {
             /** If pages and greater or equal to the number of pages, increase pagination value.
              * This is to not get above the number of pages in pagination value.  */
-            if (this.paginationValue <= this.pages) {
+            if (this.pages && this.paginationValue <= this.pages) {
                 this.paginationValue++;
             }
             this.emitTdsPagination();
@@ -55,11 +55,11 @@ export class TdsTableFooter {
         this.paginationValue = 1;
         this.rowsperpage = true;
         this.rowsPerPageValues = [10, 25, 50];
-        this.pages = null;
+        this.pages = 0;
         this.cols = null;
         this.columnsNumber = 0;
         this.compactDesign = false;
-        this.lastCorrectValue = undefined;
+        this.lastCorrectValue = 1;
         this.tableId = '';
         this.horizontalScrollWidth = null;
         this.rowsPerPageValue = this.rowsPerPageValues[0];
@@ -77,16 +77,19 @@ export class TdsTableFooter {
         }
     }
     connectedCallback() {
+        var _a;
         this.tableEl = this.host.closest('tds-table');
-        this.tableId = this.tableEl.tableId;
+        this.tableId = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a.tableId;
     }
     componentWillLoad() {
+        var _a, _b, _c;
         relevantTableProps.forEach((tablePropName) => {
-            this[tablePropName] = this.tableEl[tablePropName];
+            var _a;
+            this[tablePropName] = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a[tablePropName];
         });
         this.storeLastCorrectValue(this.paginationValue);
         /** Get the number of columns. */
-        const numberOfColumns = this.host.parentElement.querySelector('tds-table-header').childElementCount;
+        const numberOfColumns = (_c = (_b = (_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('tds-table-header')) === null || _b === void 0 ? void 0 : _b.childElementCount) !== null && _c !== void 0 ? _c : 0;
         if (this.cols) {
             this.columnsNumber = this.cols;
         }
@@ -127,12 +130,16 @@ export class TdsTableFooter {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'd064beda251b663ad3afccebc98fb4718e3f1d09', class: {
+        return (h(Host, { key: '96d07c2b5e5b667c809b949d68f65be571ad1235', class: {
                 'tds-table--compact': this.compactDesign,
                 'footer__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, 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) => {
+            }, style: this.getStyles() }, h("tr", { key: '418f2868d0c4e5366f94d725b6cf3e7aa0346f27', class: "tds-table__footer-row" }, h("td", { key: '8734d546ea3cfba0738c4daf78242e4a5e5397ea', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: 'b348c2a48e321423523f1b2a46b916a90dc94889', class: "tds-table__pagination" }, h("div", { key: '5ddf22f56fda6e794e34b5e11cc0f84842c9efde', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { key: '39c3a7bdc7627c7710735804a121165d0fb204c8', class: "rows-per-page" }, h("p", { key: '0e33895d223c3e456f7847137a2242170ebea58b' }, "Rows per page"), h("tds-dropdown", { key: 'efdaba5e2e40e0bb6eaee4b2fa3ac86a36dd99e7', 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: '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" })))))))));
+        }))))), h("div", { key: 'aa4872b13712174bfa21c94b15b93816c713fd29', class: "tds-table__page-selector" }, h("input", { key: 'fa1964c83ec002ccc6e4061ae1f8596d9ee15836', ref: (element) => {
+                if (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: 'a8b07a6e86e18800f7681eca6377a722f12069ac', class: "tds-table__footer-text" }, "of ", h("span", { key: '17019da6fe48ec045f5d1335d8c08a273dc0ac6a' }, this.pages), " pages"), h("button", { key: 'daa1446d15681d297a024bfa8da1ec2173ed921c', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, h("tds-icon", { key: '6abd73717c6c232ef603f749f68da72600bf48e8', name: "skip_backwards", size: "20px" })), h("button", { key: '1ea33dbc2d1bcdb0b3613a312a43997bfbc39a55', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: '66c0d727d030b343d387b293f7cef4773f54e6b1', name: "chevron_left", size: "20px" })), h("button", { key: '05f18129f73975b81f252721b0f33686e32b8211', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: '120e02ba680a6dad5cdfaed8002467d8f09565ad', name: "chevron_right", size: "20px" })), h("button", { key: '58e65e438020594246c0f64fc06c751b13879ee3', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, h("tds-icon", { key: '9ea98a3a7f40a9051eb46e300e5d5128dc01a95c', name: "skip_forward", size: "20px" })))))))));
     }
     static get is() { return "tds-table-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -234,14 +241,14 @@ export class TdsTableFooter {
                 },
                 "attribute": "pages",
                 "reflect": true,
-                "defaultValue": "null"
+                "defaultValue": "0"
             },
             "cols": {
                 "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "number | null",
+                    "resolved": "null | number",
                     "references": {}
                 },
                 "required": false,
@@ -278,8 +285,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    rowsPerPage?: number;\n  }",
-                    "resolved": "{ tableId: string; paginationValue: number; rowsPerPage?: number; }",
+                    "original": "{\n    tableId: string | undefined;\n    paginationValue: number;\n    rowsPerPage?: number;\n  }",
+                    "resolved": "{ tableId: string | undefined; paginationValue: number; rowsPerPage?: number | undefined; }",
                     "references": {}
                 }
             }];

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

@@ -47,46 +47,52 @@ export class TdsTableHeaderRow {
         }
     }
     bodyExpandClicked() {
-        const numberOfExtendRowsActive = this.host.parentElement
-            .querySelector('tds-table-body')
-            .getElementsByClassName('tds-table__row-extend--active').length;
-        const numberOfExtendRows = this.host.parentElement
-            .querySelector('tds-table-body')
-            .getElementsByTagName('tds-table-body-row-expendable').length;
-        if (numberOfExtendRows === numberOfExtendRowsActive) {
-            this.mainExpendSelected = true;
-        }
-        else {
-            this.mainExpendSelected = false;
+        var _a;
+        const parentBody = (_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('tds-table-body');
+        if (parentBody) {
+            const numberOfExtendRowsActive = parentBody.getElementsByClassName('tds-table__row-extend--active').length;
+            const numberOfExtendRows = parentBody.getElementsByTagName('tds-table-body-row-expendable').length;
+            if (numberOfExtendRows === numberOfExtendRowsActive) {
+                this.mainExpendSelected = true;
+            }
+            else {
+                this.mainExpendSelected = false;
+            }
         }
     }
     connectedCallback() {
+        var _a;
         this.tableEl = this.host.closest('tds-table');
-        this.tableId = this.tableEl.tableId;
+        this.tableId = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a.tableId;
     }
     componentWillLoad() {
         relevantTableProps.forEach((tablePropName) => {
-            this[tablePropName] = this.tableEl[tablePropName];
+            var _a;
+            this[tablePropName] = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a[tablePropName];
         });
     }
     componentWillRender() {
-        this.enableToolbarDesign =
-            this.host.closest('tds-table').getElementsByTagName('tds-table-toolbar').length >= 1;
+        const closestTable = this.host.closest('tds-table');
+        if (closestTable) {
+            this.enableToolbarDesign =
+                (closestTable === null || closestTable === void 0 ? void 0 : closestTable.getElementsByTagName('tds-table-toolbar').length) >= 1;
+        }
     }
     async handleCheckboxChange(event) {
+        var _a;
         this.allSelected = event.detail.checked;
         this.tdsSelectAll.emit({
             tableId: this.tableId,
             checked: event.detail.checked,
-            selectedRows: await this.tableEl.getSelectedRows(),
+            selectedRows: await ((_a = this.tableEl) === null || _a === void 0 ? void 0 : _a.getSelectedRows()),
         });
     }
     render() {
-        return (h(Host, { key: '6c1cc431846a627cab836e62a551f9f5d6558a9d', class: {
+        return (h(Host, { key: 'd223210726dcf021431d5dbaae0339f46c948d01', class: {
                 'tds-table--compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table--toolbar-available': this.enableToolbarDesign,
-            } }, h("tr", { key: 'fe66a0019ffef72437ef0312e07d8e23b0c8f728' }, this.multiselect && (h("th", { key: 'a132d706ef3650e6909a2b1bd90ed51b53a8fe02', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { key: 'a4a62796419d0f77a9a9b035a2493ec7cc184e9f', class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '2b9e308d8098b8e2825936f6ff2ab0e1ec0e8897', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { key: '916a17bb35705db77de44bee119c579dd55c2d8f', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", { key: '79d44597fcb6fa6d2e94197c57a1c9dded7e9f3d' }))));
+            } }, h("tr", { key: 'e0378b5a3843b17a322b41a6062edfa44a46fc95' }, this.multiselect && (h("th", { key: '9641cb2e3ee11abb9cf30a7592c0b6d00f5f7575', class: "tds-table__header-cell tds-table__header-cell--checkbox" }, h("div", { key: 'a0a02dad1e01d7ffaed5a8069dcd885021076e51', class: "tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '5ed55d728588753457e279b955f1eba78b6dc311', checked: this.allSelected || this.selected, disabled: this.disabled, indeterminate: this.indeterminate, onTdsChange: (event) => this.handleCheckboxChange(event) })))), this.expandableRows && (h("th", { key: '7a5451320a3909e333bdbc21c2f748f95eafef74', class: "tds-table__header-cell tds-table__header-cell--checkbox" })), h("slot", { key: '841f44149457dfe9f5a9e9d09bdddcd8cd443646' }))));
     }
     static get is() { return "tds-table-header"; }
     static get encapsulation() { return "shadow"; }
@@ -128,11 +134,11 @@ export class TdsTableHeaderRow {
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Prop for controlling the checked/unchecked state of the \"All selected\"-checkbox."
@@ -145,7 +151,7 @@ export class TdsTableHeaderRow {
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -204,8 +210,8 @@ export class TdsTableHeaderRow {
                     "text": "Event emitted when the status of the select all checkbox changes."
                 },
                 "complexType": {
-                    "original": "{\n    tableId: string;\n    checked: boolean;\n    selectedRows: any[];\n  }",
-                    "resolved": "{ tableId: string; checked: boolean; selectedRows: any[]; }",
+                    "original": "{\n    tableId: string | undefined;\n    checked: boolean;\n    selectedRows: object[] | undefined;\n  }",
+                    "resolved": "{ tableId: string | undefined; checked: boolean; selectedRows: object[] | undefined; }",
                     "references": {}
                 }
             }];