@scania/tegel 1.52.0 → 1.53.0

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

@@ -16,11 +16,11 @@ export class TdsTableFooter {
         this.paginationValue = 1;
         /** Enable rows per page dropdown */
         this.rowsperpage = true;
-        /** Set available rows per page values */
+        /** Set available rows per page values. <br/> If pagination is enabled, this array must be defined and controlled by the consumer of Tegel */
         this.rowsPerPageValues = [10, 25, 50];
         /** Set rows per page dropdown open direction */
         this.rowsPerPageDropdownOpenDirection = 'auto';
-        /** Sets the number of pages. */
+        /** Sets the number of pages. <br/> If pagination is enabled, this value must be defined and controlled by the consumer of Tegel. */
         this.pages = 0;
         /** <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;
@@ -35,7 +35,6 @@ export class TdsTableFooter {
         this.lastCorrectValue = 1;
         this.tableId = '';
         this.horizontalScrollWidth = null;
-        this.rowsPerPageValue = this.rowsPerPageValues[0];
         this.emitTdsPagination = () => {
             if (this.rowsperpage) {
                 this.tdsPagination.emit({
@@ -128,6 +127,9 @@ export class TdsTableFooter {
             var _a;
             this[tablePropName] = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a[tablePropName];
         });
+        if (!this.rowsPerPageValue) {
+            this.rowsPerPageValue = this.rowsPerPageValues[0];
+        }
         this.storeLastCorrectValue(this.paginationValue);
         /** Get the number of columns. */
         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;
@@ -165,11 +167,14 @@ export class TdsTableFooter {
         this.emitTdsPagination();
         this.storeLastCorrectValue(this.paginationValue);
     }
-    rowsPerPageChange(event) {
-        this.rowsPerPageValue = parseInt(event.detail.value);
-        if (this.paginationValue > this.pages) {
+    pagesChange(newValue) {
+        if (this.paginationValue > newValue) {
             this.paginationValue = this.pages;
+            this.emitTdsPagination();
         }
+    }
+    rowsPerPageChange(event) {
+        this.rowsPerPageValue = parseInt(event.detail.value);
         this.emitTdsPagination();
     }
     getStyles() {
@@ -181,14 +186,14 @@ export class TdsTableFooter {
     }
     render() {
         var _a;
-        return (h(Host, { key: 'b9b2a655adbdac509705cf06f8b2cdc0e3b9a0ae', class: {
+        return (h(Host, { key: '482894dd95553b594dd56671a1b8a38960f5c690', class: {
                 'tds-table--compact': this.compactDesign,
                 'footer__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.getStyles() }, h("tr", { key: 'd6f7af8c3ad70cdae194eb633313f815b8cc400a', class: "tds-table__footer-row" }, h("td", { key: '1e5bd029e2cb154e8c4eb61a566311166b4b135f', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: '60abf7e8650298f0ec56bc48fc72488c3786e674', class: "tds-table__pagination" }, h("div", { key: 'aa3d9e8d9124efd479811b1e9c5e26437f798c54', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { key: '1f6ed9da5ca83748e507ce0f5193abaf5e36c213', class: "rows-per-page" }, h("p", { key: '8319a28772407a09752e5aa0646db4f83f2ce926' }, "Rows per page"), h("tds-dropdown", { key: 'cc7596459725ebd14500179a5e15f80404df41e0', modeVariant: "secondary", id: "rows-dropdown", class: "page-dropdown", size: "xs", defaultValue: `${this.rowsPerPageValues[0]}`, onTdsChange: (event) => this.rowsPerPageChange(event), openDirection: this.rowsPerPageDropdownOpenDirection }, this.rowsPerPageValues.map((value) => (h("tds-dropdown-option", { value: `${value}` }, value))))))), h("div", { key: '3b7d98daceb0b48ceda16618914033c69eca0e10', class: "tds-table__page-selector" }, h("input", { key: 'd050a2fdf9c4cb49447ab84eaa5b4da60339ff53', ref: (element) => {
+            }, style: this.getStyles() }, h("tr", { key: 'cc0be5953fda3cc32cf88956d511473944a7b13a', class: "tds-table__footer-row" }, h("td", { key: 'f647d4ef2979a980e70b9f142626196fdf72d170', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: 'a998711732c8085557ce0759b309e19b469ae665', class: "tds-table__pagination" }, h("div", { key: '0455ce54c5ec1f535cf6f85f6e039d24ae6dcd23', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { key: 'b9ca320cfb96935deb4171d12c7a0062fd08cd54', class: "rows-per-page" }, h("p", { key: '289cdf00f94fc228672b5e82f22ffebb5315ec3c' }, "Rows per page"), h("tds-dropdown", { key: 'dbc0a944294d509f1b4e87a221db63e8461a810a', modeVariant: "secondary", id: "rows-dropdown", class: "page-dropdown", size: "xs", tdsAriaLabel: "Select rows per page", defaultValue: `${this.rowsPerPageValue}`, onTdsChange: (event) => this.rowsPerPageChange(event), openDirection: this.rowsPerPageDropdownOpenDirection }, this.rowsPerPageValues.map((value) => (h("tds-dropdown-option", { value: `${value}` }, value))))))), h("div", { key: 'dfb4f5119d13fc42269568f506f81e3e6a9b46bd', class: "tds-table__page-selector" }, h("input", { key: '75be207207ff0e5bcb9a89a8f3611c54c8b7aa24', 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: 'fa177ca38fd59d80de9f75eb64e27d516b99bf18', class: "tds-table__footer-text" }, "of ", h("span", { key: 'e15b05026a1ae3e0b5f01e6f3604cf2d88ed0cbb' }, this.pages), " pages"), h("button", { key: '12b29edbd391eb68dea8bc7439f4cc154f81ed47', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, h("tds-icon", { key: 'b365b40363e6036e0e7500d121e8af86ea7f9097', name: "skip_backwards", size: "20px" })), h("button", { key: '6458ce6240499c1d801506756c6bdda25893bea3', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: '9a0f4b8696d5437758a9b255b9e5abb4db40e9f1', name: "chevron_left", size: "20px" })), h("button", { key: '9672939723a0359217578ddd9055d2c269b201ec', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: 'f84e8a062daebddafef3f58e17015df1a741eca0', name: "chevron_right", size: "20px" })), h("button", { key: '9d00d09e9bf6b59664faa828ec85e3a43b3b17e2', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, h("tds-icon", { key: '815192910a462e07046048d84bbddb5cf2f850ba', name: "skip_forward", size: "20px" })))))))));
+            }, 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: '391644af3ab2c48f89167745c717fdf95ef542f1', class: "tds-table__footer-text" }, "of ", h("span", { key: 'b69a412fe7e0e9b63f9608633d5b8b539d697453' }, this.pages), " pages"), h("button", { key: '8828b14195d9b20c6fdeb35791be15d8514de4f7', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, h("tds-icon", { key: '59eea824cda8abbd9f02438d86b55da75c43f84b', name: "skip_backwards", size: "20px" })), h("button", { key: 'a64a857b6bc6002e72370604d3d601f19d212c21', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: '6000b40ebb29c0e93b05111aef80c90aea6a9066', name: "chevron_left", size: "20px" })), h("button", { key: '758935d7d58ce2be8c8ba31f1e1c2505fa454ea8', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: '4b39306ecc009aa9974916def328bcfbbfd7bfdc', name: "chevron_right", size: "20px" })), h("button", { key: '208e9276568873de41d5e38d1000056c5999e233', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, h("tds-icon", { key: 'f394d9f7bfe31df460765dbaf3de069ba2913436', name: "skip_forward", size: "20px" })))))))));
     }
     static get is() { return "tds-table-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -276,7 +281,7 @@ export class TdsTableFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Set available rows per page values"
+                    "text": "Set available rows per page values. <br/> If pagination is enabled, this array must be defined and controlled by the consumer of Tegel"
                 },
                 "getter": false,
                 "setter": false,
@@ -314,7 +319,7 @@ export class TdsTableFooter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Sets the number of pages."
+                    "text": "Sets the number of pages. <br/> If pagination is enabled, this value must be defined and controlled by the consumer of Tegel."
                 },
                 "getter": false,
                 "setter": false,
@@ -341,6 +346,25 @@ export class TdsTableFooter {
                 "reflect": true,
                 "attribute": "cols",
                 "defaultValue": "null"
+            },
+            "rowsPerPageValue": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the number of rows that should appear per page. <br/> If pagination is enabled, this value must be defined and controlled by the consumer of Tegel. <br/> Otherwise, it will default to the first element of the \"rowsPerPageValues\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rows-per-page-value"
             }
         };
     }
@@ -352,8 +376,7 @@ export class TdsTableFooter {
             "expandableRows": {},
             "lastCorrectValue": {},
             "tableId": {},
-            "horizontalScrollWidth": {},
-            "rowsPerPageValue": {}
+            "horizontalScrollWidth": {}
         };
     }
     static get events() {
@@ -385,6 +408,9 @@ export class TdsTableFooter {
             }, {
                 "propName": "expandableRows",
                 "methodName": "updateColumnsNumber"
+            }, {
+                "propName": "pages",
+                "methodName": "pagesChange"
             }];
     }
     static get listeners() {

package/dist/collection/components/tag/tag.css

@@ -1,8 +1,9 @@
+/* Typography Usage mixins */
 :host {
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
-  border-radius: 4px;
+  border-radius: var(--tds-tag-border-radius);
   background-color: var(--tds-tag-neutral-background);
   color: var(--tds-tag-neutral-color);
   gap: 4px;
@@ -14,22 +15,36 @@
   padding: 4px;
 }
 :host.sm {
-  border-radius: 2px;
+  border-radius: var(--tds-tag-border-radius);
   padding: 2px 4px;
-  font: var(--tds-detail-05);
+  font-family: var(--detail-05-font-family);
+  font-size: var(--detail-05-font-size);
+  line-height: var(--detail-05-line-height);
+  font-weight: var(--detail-05-font-weight);
+  letter-spacing: var(--detail-05-letter-spacing);
+  text-transform: var(--detail-05-text-transform);
 }
 :host.success {
   background-color: var(--tds-tag-success-background);
   color: var(--tds-tag-success-color);
 }
+:host.success [slot=prefix] {
+  color: var(--tds-tag-success-icon-color);
+}
 :host.warning {
   background-color: var(--tds-tag-warning-background);
   color: var(--tds-tag-warning-color);
 }
+:host.warning [slot=prefix] {
+  color: var(--tds-tag-warning-icon-color);
+}
 :host.new {
   background-color: var(--tds-tag-new-background);
   color: var(--tds-tag-new-color);
 }
+:host.new [slot=prefix] {
+  color: var(--tds-tag-new-icon-color);
+}
 :host.neutral {
   background-color: var(--tds-tag-neutral-background);
   color: var(--tds-tag-neutral-color);
@@ -38,10 +53,16 @@
   background-color: var(--tds-tag-information-background);
   color: var(--tds-tag-information-color);
 }
+:host.information [slot=prefix] {
+  color: var(--tds-tag-information-icon-color);
+}
 :host.error {
   background-color: var(--tds-tag-error-background);
   color: var(--tds-tag-error-color);
 }
+:host.error [slot=prefix] {
+  color: var(--tds-tag-error-icon-color);
+}
 
 .tds-tag__content {
   display: flex;

package/dist/collection/components/tooltip/tooltip.css

@@ -1,16 +1,21 @@
+/* Typography Usage mixins */
 :host {
   position: absolute;
 }
 
 .tds-tooltip {
   box-sizing: border-box;
-  font: var(--tds-detail-05);
-  letter-spacing: var(--tds-detail-05-ls);
+  font-family: var(--detail-05-font-family);
+  font-size: var(--detail-05-font-size);
+  line-height: var(--detail-05-line-height);
+  font-weight: var(--detail-05-font-weight);
+  letter-spacing: var(--detail-05-letter-spacing);
+  text-transform: var(--detail-05-text-transform);
   color: var(--tds-tooltip-color);
   background-color: var(--tds-tooltip-background);
-  border-radius: 4px;
+  border-radius: var(--tds-tooltip-border-radius);
   padding: 8px;
-  word-wrap: break-word;
+  overflow-wrap: break-word;
   white-space: normal;
   max-width: 192px;
   z-index: 900;
@@ -22,16 +27,16 @@
   box-sizing: border-box;
 }
 .tds-tooltip.tds-tooltip-top-left {
-  border-radius: 0 4px 4px;
+  border-radius: var(--tds-tooltip-border-radius-none) var(--tds-tooltip-border-radius) var(--tds-tooltip-border-radius);
 }
 .tds-tooltip.tds-tooltip-top-right {
-  border-radius: 4px 0 4px 4px;
+  border-radius: var(--tds-tooltip-border-radius) var(--tds-tooltip-border-radius-none) var(--tds-tooltip-border-radius) var(--tds-tooltip-border-radius);
 }
 .tds-tooltip.tds-tooltip-bottom-right {
-  border-radius: 4px 4px 0;
+  border-radius: var(--tds-tooltip-border-radius) var(--tds-tooltip-border-radius) var(--tds-tooltip-border-radius-none);
 }
 .tds-tooltip.tds-tooltip-bottom-left {
-  border-radius: 4px 4px 4px 0;
+  border-radius: var(--tds-tooltip-border-radius) var(--tds-tooltip-border-radius) var(--tds-tooltip-border-radius) var(--tds-tooltip-border-radius-none);
 }
 
 .tds-tooltip-show {