@scania/tegel 1.47.2 → 1.48.0-beta.globals-test-2

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

@@ -1,8 +1,11 @@
-:host(.tds-table__header-cell) {
+:host {
+  display: contents;
+}
+
+:host(.tds-table__header-cell) th {
   box-sizing: border-box;
   font: var(--tds-headline-07);
   letter-spacing: var(--tds-headline-07-ls);
-  display: table-cell;
   text-align: left;
   color: var(--tds-table-color);
   background-color: var(--tds-table-header-background);
@@ -15,18 +18,22 @@
   overflow: hidden;
   transition: background-color 200ms ease;
 }
-:host(.tds-table__header-cell) * {
+:host(.tds-table__header-cell) th * {
   box-sizing: border-box;
 }
-:host(.tds-table__header-cell) .tds-table__header-text {
+:host(.tds-table__header-cell) th .tds-table__header-text {
   padding: 8px 16px;
   margin: 0;
 }
-:host(.tds-table__header-cell) .tds-table__header-text-no-padding {
+:host(.tds-table__header-cell) th .tds-table__header-text-no-padding {
   padding: 0;
 }
 
-:host(.tds-table__header-cell--sortable) .tds-table__header-button {
+:host(.tds-table__header-cell) th:hover {
+  background-color: var(--tds-table-header-background-hover);
+}
+
+:host(.tds-table__header-cell--sortable) th .tds-table__header-button {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -40,20 +47,20 @@
   cursor: pointer;
   transition: background-color 200ms ease;
 }
-:host(.tds-table__header-cell--sortable) .tds-table__header-button:focus {
+:host(.tds-table__header-cell--sortable) th .tds-table__header-button:focus {
   outline: 2px solid var(--tds-table-header-btn-focus);
   outline-offset: -2px;
 }
-:host(.tds-table__header-cell--sortable) .tds-table__header-button:focus .tds-table__header-button-icon {
+:host(.tds-table__header-cell--sortable) th .tds-table__header-button:focus .tds-table__header-button-icon {
   opacity: 1;
 }
-:host(.tds-table__header-cell--sortable) .tds-table__header-button .tds-table__header-button-text {
+:host(.tds-table__header-cell--sortable) th .tds-table__header-button .tds-table__header-button-text {
   font: var(--tds-headline-07);
   letter-spacing: var(--tds-headline-07-ls);
   text-align: left;
   color: var(--tds-table-header-btn-color);
 }
-:host(.tds-table__header-cell--sortable) .tds-table__header-button .tds-table__header-button-icon {
+:host(.tds-table__header-cell--sortable) th .tds-table__header-button .tds-table__header-button-icon {
   /* not to shrink on lot of text */
   flex: 0 0 16px;
   height: 16px;
@@ -63,67 +70,67 @@
   transition: opacity 200ms ease-in, transform 200ms ease;
   color: var(--tds-table-color);
 }
-:host(.tds-table__header-cell--sortable) .tds-table__header-button:hover .tds-table__header-button-icon {
+:host(.tds-table__header-cell--sortable) th .tds-table__header-button:hover .tds-table__header-button-icon {
   opacity: 1;
 }
 
-:host(.tds-table__header-cell--is-sorted) .tds-table__header-button {
+:host(.tds-table__header-cell--is-sorted) th .tds-table__header-button {
   background-color: var(--tds-table-header-btn-background);
 }
-:host(.tds-table__header-cell--is-sorted) .tds-table__header-button:hover {
+:host(.tds-table__header-cell--is-sorted) th .tds-table__header-button:hover {
   background-color: var(--tds-table-header-btn-background-hover);
 }
-:host(.tds-table__header-cell--is-sorted) .tds-table__header-button .tds-table__header-button-icon {
+:host(.tds-table__header-cell--is-sorted) th .tds-table__header-button .tds-table__header-button-icon {
   opacity: 1;
 }
-:host(.tds-table__header-cell--is-sorted) .tds-table__header-button .tds-table__header-button-icon--rotate {
+:host(.tds-table__header-cell--is-sorted) th .tds-table__header-button .tds-table__header-button-icon--rotate {
   transform: rotate(180deg);
 }
 
-:host(.tds-table--compact) {
+:host(.tds-table--compact) th {
   height: 33px;
 }
 
-:host(.tds-table--divider) {
+:host(.tds-table--divider) th {
   border-right: 1px solid var(--tds-table-divider);
 }
 
-:host(.tds-table--divider:last-of-type) {
+:host(.tds-table--divider:last-of-type) th {
   border-right: none;
 }
 
-:host(.tds-table--no-min-width) {
+:host(.tds-table--no-min-width) th {
   min-width: unset;
 }
 
-:host(.tds-table--no-padding) {
+:host(.tds-table--no-padding) th {
   height: unset;
 }
 
-:host(.tds-table__header-cell:first-of-type) {
+:host(.tds-table__header-cell:first-of-type) th {
   border-top-left-radius: 4px;
 }
 
-:host(.tds-table__header-cell:last-of-type) {
+:host(.tds-table__header-cell:last-of-type) th {
   border-top-right-radius: 4px;
 }
 
-:host(.tds-table--extra-column:first-of-type) {
+:host(.tds-table--extra-column:first-of-type) th {
   border-top-left-radius: 0;
 }
 
-:host(.tds-table--toolbar-available) {
+:host(.tds-table--toolbar-available) th {
   border-radius: 0;
 }
 
-:host(.tds-table--extra-column.tds-table--toolbar-available) {
+:host(.tds-table--extra-column.tds-table--toolbar-available) th {
   border-radius: 0;
 }
 
-:host(.tds-table__header-cell.tds-table--toolbar-available:first-of-type) {
+:host(.tds-table__header-cell.tds-table--toolbar-available:first-of-type) th {
   border-top-left-radius: 0;
 }
 
-:host(.tds-table__header-cell.tds-table--toolbar-available:last-of-type) {
+:host(.tds-table__header-cell.tds-table--toolbar-available:last-of-type) th {
   border-top-right-radius: 0;
 }

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

@@ -11,6 +11,23 @@ const relevantTableProps = [
  */
 export class TdsTableHeaderCell {
     constructor() {
+        /** Enables sorting on that column */
+        this.sortable = false;
+        /** Setting for text align, default is "left". Other accepted values are "left", "start", "right" or "end". */
+        this.textAlign = 'left';
+        /** Disables internal padding. Useful when passing other components to cell. */
+        this.disablePadding = false;
+        /** Aria label for the sort button, providing an accessible description */
+        this.tdsAriaLabelSortButton = '';
+        this.textAlignState = 'left';
+        this.sortedByMyKey = false;
+        this.verticalDividers = false;
+        this.compactDesign = false;
+        this.noMinWidth = false;
+        this.multiselect = false;
+        this.enableToolbarDesign = false;
+        this.tableId = '';
+        this.expandableRows = false;
         this.sortButtonClick = () => {
             if (this.sortingDirection !== 'asc' && this.sortingDirection !== 'desc') {
                 this.sortingDirection = 'asc';
@@ -41,26 +58,9 @@ export class TdsTableHeaderCell {
         this.onHeadCellHover = (key) => {
             this.internalTdsHover.emit({
                 tableId: this.tableId,
-                key,
+                key: key !== null && key !== void 0 ? key : '',
             });
         };
-        this.cellKey = undefined;
-        this.cellValue = undefined;
-        this.customWidth = undefined;
-        this.sortable = false;
-        this.textAlign = 'left';
-        this.disablePadding = false;
-        this.tdsAriaLabelSortButton = '';
-        this.textAlignState = 'left';
-        this.sortingDirection = undefined;
-        this.sortedByMyKey = false;
-        this.verticalDividers = false;
-        this.compactDesign = false;
-        this.noMinWidth = false;
-        this.multiselect = false;
-        this.enableToolbarDesign = false;
-        this.tableId = '';
-        this.expandableRows = false;
     }
     internalTdsPropChangeListener(event) {
         if (this.tableId === event.detail.tableId) {
@@ -118,7 +118,7 @@ export class TdsTableHeaderCell {
         return 'none';
     }
     render() {
-        return (h(Host, { key: '4df64a3d4a0ef86b377db355cfc149daf9b246b5', class: {
+        return (h(Host, { key: '5607f55acda25cb351a509f65f499fce013b1a97', class: {
                 'tds-table__header-cell': true,
                 'tds-table__header-cell--sortable': this.sortable,
                 'tds-table__header-cell--is-sorted': this.sortedByMyKey,
@@ -129,7 +129,7 @@ export class TdsTableHeaderCell {
                 'tds-table--extra-column': this.multiselect || this.expandableRows,
                 'tds-table--toolbar-available': this.enableToolbarDesign,
                 'tds-table--no-padding': this.disablePadding,
-            }, style: { minWidth: this.customWidth }, onMouseOver: () => this.onHeadCellHover(this.cellKey), onMouseLeave: () => this.onHeadCellHover(''), role: "columnheader", "aria-sort": this.getAriaSort() }, this.headerCellContent()));
+            } }, h("th", { key: 'bd60c7fa0e964e949394954e92ca8619e51273af', style: { minWidth: this.customWidth }, onMouseOver: () => this.onHeadCellHover(this.cellKey), onFocus: () => this.onHeadCellHover(this.cellKey), onMouseLeave: () => this.onHeadCellHover(''), onBlur: () => this.onHeadCellHover(''), "aria-sort": this.getAriaSort(), colSpan: this.colSpan, rowSpan: this.rowSpan }, this.headerCellContent())));
     }
     static get is() { return "tds-header-cell"; }
     static get encapsulation() { return "shadow"; }
@@ -159,8 +159,10 @@ export class TdsTableHeaderCell {
                     "tags": [],
                     "text": "The value of column key, usually comes from JSON, needed for sorting"
                 },
-                "attribute": "cell-key",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "cell-key"
             },
             "cellValue": {
                 "type": "string",
@@ -176,8 +178,10 @@ export class TdsTableHeaderCell {
                     "tags": [],
                     "text": "Text that displays in column cell"
                 },
-                "attribute": "cell-value",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "cell-value"
             },
             "customWidth": {
                 "type": "string",
@@ -193,8 +197,10 @@ export class TdsTableHeaderCell {
                     "tags": [],
                     "text": "In case noMinWidth is set, the user has to specify the width value for each column."
                 },
-                "attribute": "custom-width",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "custom-width"
             },
             "sortable": {
                 "type": "boolean",
@@ -210,8 +216,10 @@ export class TdsTableHeaderCell {
                     "tags": [],
                     "text": "Enables sorting on that column"
                 },
-                "attribute": "sortable",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "sortable",
                 "defaultValue": "false"
             },
             "textAlign": {
@@ -224,7 +232,8 @@ export class TdsTableHeaderCell {
                         "TextAlign": {
                             "location": "import",
                             "path": "../table/table",
-                            "id": "src/components/table/table/table.tsx::TextAlign"
+                            "id": "src/components/table/table/table.tsx::TextAlign",
+                            "referenceLocation": "TextAlign"
                         }
                     }
                 },
@@ -234,8 +243,10 @@ export class TdsTableHeaderCell {
                     "tags": [],
                     "text": "Setting for text align, default is \"left\". Other accepted values are \"left\", \"start\", \"right\" or \"end\"."
                 },
-                "attribute": "text-align",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "text-align",
                 "defaultValue": "'left'"
             },
             "disablePadding": {
@@ -252,8 +263,10 @@ export class TdsTableHeaderCell {
                     "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"
             },
             "tdsAriaLabelSortButton": {
@@ -270,9 +283,49 @@ export class TdsTableHeaderCell {
                     "tags": [],
                     "text": "Aria label for the sort button, providing an accessible description"
                 },
-                "attribute": "tds-aria-label-sort-button",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "tds-aria-label-sort-button",
                 "defaultValue": "''"
+            },
+            "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-header-input-wrapper/table-header-input-wrapper.js

@@ -2,6 +2,7 @@ import { h, Host } from "@stencil/core";
 const relevantTableProps = ['compactDesign'];
 export class TdsTableHeaderInputWrapper {
     constructor() {
+        /** Controls if the search icon is shown */
         this.showIcon = true;
         this.renderSlot = true;
         this.inputFocused = false;
@@ -63,7 +64,7 @@ export class TdsTableHeaderInputWrapper {
         }
     }
     render() {
-        return (h(Host, { key: '76de40e0a578e0592d9c85d278d65187d84d7573', class: {
+        return (h(Host, { key: '4528be1b81397ac403bb7ba6cd274f26e1a6aff3', class: {
                 'focused-input-wrapper': this.inputFocused,
                 'show-icon': this.showIcon,
                 'tds-table__compact': this.compactDesign,
@@ -97,8 +98,10 @@ export class TdsTableHeaderInputWrapper {
                     "tags": [],
                     "text": "Controls if the search icon is shown"
                 },
-                "attribute": "show-icon",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "show-icon",
                 "defaultValue": "true"
             },
             "compactDesign": {
@@ -115,8 +118,10 @@ export class TdsTableHeaderInputWrapper {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "compact-design",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "compact-design",
                 "defaultValue": "false"
             }
         };

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

@@ -11,8 +11,11 @@ const relevantTableProps = [
  */
 export class TdsTableToolbar {
     constructor() {
+        /** Adds title to the Table */
         this.tableTitle = '';
+        /** Enables preview of searchbar */
         this.filter = false;
+        /** Aria label for the search input, providing an accessible description */
         this.tdsSearchAriaLabel = '';
         this.verticalDividers = false;
         this.compactDesign = false;
@@ -70,10 +73,10 @@ export class TdsTableToolbar {
         return styles;
     }
     render() {
-        return (h(Host, { key: '37a65522a8efe0d073906a1c0ad59bc0574faa0c', class: {
+        return (h(Host, { key: 'be05d6c6aea404550a6717e89d10b8927e135ff1', class: {
                 'tds-table--compact': this.compactDesign,
                 'toolbar__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.getStyles(), "aria-labelledby": "table-toolbar-title" }, h("div", { key: 'f4116716bd302f31f5c5a1c6344cbd263f20aadb', class: "tds-table__upper-bar-flex" }, h("div", { key: '7c1088b56cd537ba8d6734bfdd8a87604c0038c3', class: "tds-table__actionbar-left" }, this.tableTitle && (h("caption", { key: 'aab5ff50d91410486069f9a734fd74606674819b', id: "table-toolbar-title", class: "tds-table__title" }, this.tableTitle)), h("slot", { key: '2e7f6fdbe8865712cba24e3b4a6e5833dd684ef0', name: "start" })), h("div", { key: '1d78a673fc3d4af7955cfb9ee00ff4d2265b73e9', class: "tds-table__actionbar" }, this.filter && (h("div", { key: '6fcef1537fb441d8e835d6d6978a2ca8ae107eef', class: "tds-table__searchbar" }, h("input", { key: 'd74bd73c0b0a969d69ea6d5ac142215466ab3add', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event), "aria-label": this.tdsSearchAriaLabel }), h("span", { key: '6b97b5d9b0ff3bb5b17f228d9786a64b1ea1ebe4', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: '268d432c7c1ed126e2b0186e72ffd4fa53f33d3a', name: "search", size: "20px" })))), h("slot", { key: 'ef138ddefb88afc9967230c39600538a9d112dbb', name: "end" })))));
+            }, style: this.getStyles(), "aria-labelledby": "table-toolbar-title" }, h("div", { key: '7a352d94ee0b3d66cb5aff378bbaa50ab7cf7570', class: "tds-table__upper-bar-flex" }, h("div", { key: '0d5e20bcf75ee696d3fb6b9aabbe81e4d06caca3', class: "tds-table__actionbar-left" }, this.tableTitle && (h("caption", { key: '4fbd20e21eed929f095ed9ccc7b0976745a44d5c', id: "table-toolbar-title", class: "tds-table__title" }, this.tableTitle)), h("slot", { key: '1f27b7ee7619d5fa0f3d7955d8389fd0a6ad240e', name: "start" })), h("div", { key: 'e1834ffef99023a09055afceabb3881b8dc9282e', class: "tds-table__actionbar" }, this.filter && (h("div", { key: 'b19d36b835ae78223f7aff455b7b737c9bd7e8b1', class: "tds-table__searchbar" }, h("input", { key: '0dc7030b377d68a4f38af12938a775f56a66f916', class: "tds-table__searchbar-input", type: "text", onKeyUp: (event) => this.handleSearch(event), "aria-label": this.tdsSearchAriaLabel }), h("span", { key: '78ba2ad22e558359f43e6a3962df1cd62f5df087', class: "tds-table__searchbar-icon" }, h("tds-icon", { key: 'ccb72495379cf0bfed59263efc3c36bc9d004b55', name: "search", size: "20px" })))), h("slot", { key: 'baefd115b4f5b42a203698afdc9ce7b6d3a28d89', name: "end" })))));
     }
     static get is() { return "tds-table-toolbar"; }
     static get encapsulation() { return "shadow"; }
@@ -103,8 +106,10 @@ export class TdsTableToolbar {
                     "tags": [],
                     "text": "Adds title to the Table"
                 },
-                "attribute": "table-title",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "table-title",
                 "defaultValue": "''"
             },
             "filter": {
@@ -121,8 +126,10 @@ export class TdsTableToolbar {
                     "tags": [],
                     "text": "Enables preview of searchbar"
                 },
-                "attribute": "filter",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "filter",
                 "defaultValue": "false"
             },
             "tdsSearchAriaLabel": {
@@ -139,8 +146,10 @@ export class TdsTableToolbar {
                     "tags": [],
                     "text": "Aria label for the search input, providing an accessible description"
                 },
-                "attribute": "tds-search-aria-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "tds-search-aria-label",
                 "defaultValue": "''"
             }
         };

package/dist/collection/components/tabs/folder-tabs/folder-tab/folder-tab.js

@@ -4,9 +4,9 @@ import { Host, h } from "@stencil/core";
  */
 export class TdsFolderTab {
     constructor() {
+        /** Disables the Tab. */
         this.disabled = false;
         this.selected = false;
-        this.tabWidth = undefined;
     }
     /** @internal Method to set the width of the tab. Used by the <tds-folder-tabs> */
     async setTabWidth(width) {
@@ -35,10 +35,10 @@ export class TdsFolderTab {
         }
     }
     render() {
-        return (h(Host, { key: '4a695d366a2e8e8e5b11b76f4be517c348e55c5b', "aria-selected": this.selected }, h("div", { key: 'b5dc85bc80aede911238d245d41b06ba82143c47', class: {
+        return (h(Host, { key: '3a6f843e08803fe8f005c0741449cc9f4a6df938', "aria-selected": this.selected }, h("div", { key: '5feeee7938110401632ccae56c7c9dda5fefdafd', class: {
                 selected: this.selected,
                 disabled: this.disabled,
-            }, style: { width: `${this.tabWidth}px` } }, h("slot", { key: 'a3c58caf8081862b9b89052f30e7100493ea0985' }))));
+            }, style: { width: `${this.tabWidth}px` } }, h("slot", { key: '5b3947a9e16cde774eddcb896849f965e16042c8' }))));
     }
     static get is() { return "tds-folder-tab"; }
     static get encapsulation() { return "shadow"; }
@@ -68,8 +68,10 @@ export class TdsFolderTab {
                     "tags": [],
                     "text": "Disables the Tab."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             }
         };