@scania/tegel 1.47.2 → 1.48.0-beta.0-tabbing-test

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

@@ -9,10 +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;
@@ -84,13 +82,13 @@ export class TdsTableBodyCell {
             // Conditionally set padding style
             padding: paddingStyle,
         };
-        return (h(Host, { key: '2f095d2b2cf724d8ef18ffb895f327832ef5ce66', class: {
+        return (h(Host, { key: 'd16b67e516e23d4f1efee4d09dfc451f79af08b2', 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: '85ffbf1e995c5e797971b97101d350b9e3bc3921' })));
+            } }, h("td", { key: '2ce3e0c0f219a4878deb118f2afa623d76c7cfbd', style: dynamicStyles, colSpan: this.colSpan, rowSpan: this.rowSpan }, this.cellValue, h("slot", { key: '5118a6568969761c1e4673ea0b2c1d947dc53164' }))));
     }
     static get is() { return "tds-body-cell"; }
     static get encapsulation() { return "shadow"; }
@@ -120,8 +118,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": "string",
@@ -137,8 +137,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",
@@ -154,8 +156,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": {
@@ -168,7 +172,8 @@ export class TdsTableBodyCell {
                         "TextAlign": {
                             "location": "import",
                             "path": "../table/table",
-                            "id": "src/components/table/table/table.tsx::TextAlign"
+                            "id": "src/components/table/table/table.tsx::TextAlign",
+                            "referenceLocation": "TextAlign"
                         }
                     }
                 },
@@ -178,8 +183,48 @@ 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"
+            },
+            "colSpan": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of columns the cell should span."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "col-span"
+            },
+            "rowSpan": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of rows the cell should span."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "row-span"
             }
         };
     }

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;
@@ -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;
@@ -71,13 +74,13 @@ export class TdsTableBodyRow {
         }
     }
     render() {
-        return (h(Host, { key: '94bac5b3613998d805d62da4ce0ca9480e337fbc', tabindex: this.clickable ? '0' : null, class: {
+        return (h(Host, { key: 'de0e413cf92011d5b652d19512dd58c243fb40f2', 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: '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' })));
+            }, onClick: (e) => this.handleRowClick(e), onKeyDown: (e) => this.handleKeyDown(e), role: "row" }, this.multiselect && (h("td", { key: '23fb993da5cac2a419719723d7a259460b179f55', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: 'eab391b07c02f9fa913022fc9c8ebef0dab16ce8', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("slot", { key: '5cd67b73cc428535ede2cb934d6b3dc36630e36d' })));
     }
     static get is() { return "tds-table-body-row"; }
     static get encapsulation() { return "shadow"; }
@@ -107,8 +110,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": {
@@ -125,8 +130,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": {
@@ -143,8 +150,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.css

@@ -16,10 +16,29 @@
 :host .tds-table__row--expanded {
   border-bottom: none;
 }
+:host .tds-table__row--selected {
+  background-color: var(--tds-table-body-row-background-selected);
+}
 :host .tds-table__row:hover,
 :host .tds-table__row-extend:hover {
   background-color: var(--tds-table-body-row-background-hover);
 }
+:host .tds-table__row--selected:hover {
+  background-color: var(--tds-table-body-row-background-selected-hover);
+}
+:host .tds-table__body-cell--checkbox {
+  min-width: 48px;
+  width: 48px;
+  padding: 0;
+}
+:host .tds-form-label--table {
+  width: 100%;
+  height: 48px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
 :host .tds-table__expand-control-container {
   display: flex;
   justify-content: center;
@@ -87,11 +106,17 @@
 :host(.tds-table__compact) .tds-table__row-expand .tds-table__cell-expand {
   padding: 8px 16px 8px 66px;
 }
+:host(.tds-table__compact) .tds-form-label--table {
+  height: 32px;
+}
 
 :host(.tds-table__row--hidden) {
   display: none;
 }
 
-:host(.tds-table--divider) .tds-table__cell--expand {
+:host(.tds-table--divider) .tds-table__cell-expand {
+  border-right: 1px solid var(--tds-table-divider);
+}
+:host(.tds-table--divider) .tds-table__body-cell--checkbox {
   border-right: 1px solid var(--tds-table-divider);
 }

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

@@ -5,6 +5,7 @@ const relevantTableProps = [
     'compactDesign',
     'noMinWidth',
     'modeVariant',
+    'multiselect',
 ];
 /**
  * @slot <default> - <b>Unnamed slot.</b> For the cells.
@@ -16,12 +17,23 @@ 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 = '';
+        /** Marks the row as selected, used for multiselect table. */
+        this.selected = false;
+        /** Marks the row as disabled, used for multiselect table. */
+        this.disabled = false;
+        /** Sets isExpanded state to true or fals internally */
         this.isExpanded = false;
         this.tableId = '';
         this.columnsNumber = null;
@@ -29,6 +41,7 @@ export class TdsTableBodyRowExpandable {
         this.compactDesign = false;
         this.noMinWidth = false;
         this.modeVariant = null;
+        this.multiselect = false;
     }
     internalTdsPropChangeListener(event) {
         if (this.tableId === event.detail.tableId) {
@@ -94,7 +107,15 @@ export class TdsTableBodyRowExpandable {
         else {
             const header = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a.querySelector('tds-table-header');
             if (header) {
-                this.columnsNumber = header.childElementCount + 1;
+                // Start with the number of data columns (header cells from slot)
+                let totalColumns = header.childElementCount;
+                // Add 1 for the expandable row control column
+                totalColumns += 1;
+                // Add 1 if multiselect is enabled (checkbox column)
+                if (this.multiselect) {
+                    totalColumns += 1;
+                }
+                this.columnsNumber = totalColumns;
             }
         }
     }
@@ -106,28 +127,38 @@ export class TdsTableBodyRowExpandable {
         this.isExpanded = event.currentTarget.checked === true;
         this.sendValue();
     }
+    async handleCheckboxChange(event) {
+        var _a;
+        this.selected = event.detail.checked;
+        this.tdsSelect.emit({
+            tableId: this.tableId,
+            checked: this.selected,
+            selectedRows: await ((_a = this.tableEl) === null || _a === void 0 ? void 0 : _a.getSelectedRows()),
+        });
+    }
     render() {
         var _a;
-        return (h(Host, { key: '9747b45c606d94f6a79e35afd1e126e0d4940761', class: {
+        return (h(Host, { key: '53c6c5c66dd79503113385dd2b70026ea160fbf6', 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: 'c3eb7c452c55cd64393d4d0820983a450b3c83de', id: `expandable-content-${this.rowId}`, class: {
+            } }, h("tr", { key: '6dc01208f1eb843e3e06c33f4e25913049957769', id: `expandable-content-${this.rowId}`, class: {
                 'tds-table__row': true,
                 'tds-table__row--expanded': this.isExpanded,
-            }, part: "row" }, h("td", { key: 'a269a53c209ac33f82475c92408a824194feea0d', class: {
+                'tds-table__row--selected': this.selected,
+            }, part: "row" }, this.multiselect && (h("td", { key: '5a71e2f9bff42312b3cd9b2d45718c8344be06fe', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, h("tds-checkbox", { key: '9d7c37bec627e917ac93a2d5ebcd2eb3633b5208', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), h("td", { key: '5dfa199437435c4dc1c847f19a1dd2aa97803639', class: {
                 'tds-table__cell-expand': true,
-            } }, 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: {
+            } }, h("label", { key: '010aef1164845e706485d3e5770c83225b6f0c70', class: "tds-table__expand-control-container" }, h("input", { key: 'c27e847d9b855cb7a016236347c8af908f991f12', 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: 'b0ba2cb10f89f3e81bad48f982d2f84d994d49c3', class: "tds-expendable-row-icon" }, h("svg", { key: 'a0d7f78a7a7da51d056ed22b6092e74715f506af', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '5dc808624d2fcff7b4b9dd83fc9ef2b2b00e2cea', "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: 'c7e24da48dafb8ecd8d461a272897efa9723c634' })), h("tr", { key: '8b538e7208adf89505842965b969e0bcc393e1ab', class: {
                 'tds-table__row-expand': true,
                 'tds-table__row-expand--expanded': this.isExpanded,
-            }, part: "expand-row" }, h("td", { key: '9bd6d1292ede611479fe3f59239ca0ae1257fddc', class: {
+            }, part: "expand-row" }, h("td", { key: 'b8cc7780fd35b1eb46718d1670f89b2c28c5e0fd', 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: (_a = this.columnsNumber) !== null && _a !== void 0 ? _a : undefined }, h("div", { key: '6cfcd733564c5e6d1b55f6029e80e2b5713988d5', style: {
+            }, part: "expand-row-cell", colSpan: (_a = this.columnsNumber) !== null && _a !== void 0 ? _a : undefined }, h("div", { key: '877805be7aa699870575767188b63bf9b5eb4ffe', style: {
                 overflow: this.overflow,
-            } }, h("slot", { key: 'fa74913d8c68ad2fbfc359fe9d67f27b9b254d28', name: "expand-row" }))))));
+            } }, h("slot", { key: '0fcc6e24283b7c8e755e42fc16a6adccdd0193b9', name: "expand-row" }))))));
     }
     static get is() { return "tds-table-body-row-expandable"; }
     static get encapsulation() { return "shadow"; }
@@ -157,8 +188,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": {
@@ -175,8 +208,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": {
@@ -193,8 +228,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",
@@ -210,8 +247,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": {
@@ -228,8 +267,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": {
@@ -246,9 +287,51 @@ 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": "''"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the row as selected, used for multiselect table."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Marks the row as disabled, used for multiselect table."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
             }
         };
     }
@@ -260,7 +343,8 @@ export class TdsTableBodyRowExpandable {
             "verticalDividers": {},
             "compactDesign": {},
             "noMinWidth": {},
-            "modeVariant": {}
+            "modeVariant": {},
+            "multiselect": {}
         };
     }
     static get events() {
@@ -297,6 +381,21 @@ export class TdsTableBodyRowExpandable {
                     "resolved": "{ rowId: string; isExpanded: boolean; tableId: string | undefined; }",
                     "references": {}
                 }
+            }, {
+                "method": "tdsSelect",
+                "name": "tdsSelect",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when a row is selected/deselected."
+                },
+                "complexType": {
+                    "original": "{\n    tableId: string | undefined;\n    checked: boolean;\n    selectedRows: object[] | undefined;\n  }",
+                    "resolved": "{ tableId: string | undefined; checked: boolean; selectedRows: object[] | undefined; }",
+                    "references": {}
+                }
             }];
     }
     static get methods() {