@scania/tegel 1.11.0 → 1.12.1-ng-form-beta.0

package/dist/collection/components/dropdown/dropdown.js

@@ -8,40 +8,27 @@ import appendHiddenInput from "../../utils/appendHiddenInput";
 export class TdsDropdown {
     constructor() {
         this.setDefaultOption = () => {
-            // Ensure this.host.children is not empty
-            if (this.host.children.length === 0) {
-                console.warn('TDS DROPDOWN: Data missing. Disregard if loading data asynchronously.');
-                return;
-            }
             if (this.defaultValue) {
                 const children = Array.from(this.host.children).filter((element) => element.tagName === 'TDS-DROPDOWN-OPTION');
                 let matched = false;
-                children.forEach((element) => {
-                    if (this.multiselect) {
-                        this.defaultValue.split(',').forEach((value) => {
-                            if (value === element.value) {
-                                element.setSelected(true);
-                                this.value = this.value ? [...this.value, element.value] : [element.value];
-                                matched = true;
-                            }
-                        });
-                    }
-                    else {
-                        if (this.defaultValue === element.value) {
+                const defaultValues = this.multiselect
+                    ? new Set(this.defaultValue.split(','))
+                    : [this.defaultValue];
+                defaultValues.forEach((value) => {
+                    children.forEach((element) => {
+                        if (value === element.value) {
                             element.setSelected(true);
-                            this.value = [element.value];
+                            this.value = this.value
+                                ? [...new Set([...this.value, element.value])]
+                                : [element.value];
                             matched = true;
                         }
-                        else {
-                            element.setSelected(false);
-                        }
-                    }
-                    this.setValueAttribute();
-                    return element;
+                    });
                 });
                 if (!matched) {
                     console.warn(`TDS DROPDOWN: No matching option found for defaultValue "${this.defaultValue}"`);
                 }
+                this.setValueAttribute();
             }
         };
         /* Returns a list of all children that are tds-dropdown-option elements */
@@ -172,6 +159,7 @@ export class TdsDropdown {
     }
     /** Method that resets the Dropdown, marks all children as non-selected and resets the value to null. */
     async reset() {
+        this.dropdownList.scrollTop = 0;
         this.internalReset();
         this.handleChange();
     }
@@ -202,6 +190,7 @@ export class TdsDropdown {
             console.warn('Tried to select multiple items, but multiselect is not enabled.');
             nextValue = [nextValue[0]];
         }
+        nextValue = [...new Set(nextValue)];
         this.internalReset();
         for (let i = 0; i < nextValue.length; i++) {
             const optionExist = this.getChildren().some((element) => element.value === nextValue[i]);
@@ -349,7 +338,7 @@ export class TdsDropdown {
     render() {
         var _a, _b, _c, _d;
         appendHiddenInput(this.host, this.name, (_a = this.value) === null || _a === void 0 ? void 0 : _a.map((value) => value).toString(), this.disabled);
-        return (h(Host, { key: '9fee6da0243cf7b74abce8387454b32caacba96e', role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { key: 'd338fdc28fdf1a6b24f7254e52f0d8581cc46293', class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: 'a6852251cdf06567f2cb2a7516adb71d9ae3295d', class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: {
+        return (h(Host, { key: 'f08f174f60709c0ede8466ae013cab38f12fc809', role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { key: '5ab1a9904dbc8c3e95b8d62d7088ed99eee0a7c0', class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '57d50d6e45a036204d518545efa4e59a44d8f3f9', class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: {
                 filter: true,
                 focus: this.filterFocus,
                 disabled: this.disabled,
@@ -392,11 +381,11 @@ export class TdsDropdown {
                     label-inside-as-placeholder
                     ${this.size}
                     ${((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) ? 'selected' : ''}
-                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, ((_d = this.value) === null || _d === void 0 ? void 0 : _d.length) ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: '4db23bfa5b43445f3f995e6624eb4cc41e3dbca1', ref: (element) => (this.dropdownList = element), class: `dropdown-list
+                    ` }, this.label)), h("div", { class: `placeholder ${this.size}` }, ((_d = this.value) === null || _d === void 0 ? void 0 : _d.length) ? this.getValue() : this.placeholder), h("tds-icon", { "aria-label": "Open/Close dropdown", svgTitle: "Open/Close dropdown", class: `menu-icon ${this.open ? 'open' : 'closed'}`, name: "chevron_down", size: "16px" }))))), h("div", { key: '05f33587702d1d9f3a0bef68575a00b7f712db8e', ref: (element) => (this.dropdownList = element), class: `dropdown-list
             ${this.size}
             ${this.open ? 'open' : 'closed'}
             ${this.getOpenDirection()}
-            ${this.label && this.labelPosition === 'outside' ? 'label-outside' : ''}` }, h("slot", { key: '23a98af0ba0ec7457dd83f0542fad645ae63765a', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '43425685729146305b871cabef0f769748865d9a', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: 'a1988ef07e8bf4be2f15ed274e3a9e431127e0ce', class: `helper ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, this.error && h("tds-icon", { key: '2d2ccb11a76efbc7d67f663ca7a92a4f62563bf5', name: "error", size: "16px" }), this.helper))));
+            ${this.label && this.labelPosition === 'outside' ? 'label-outside' : ''}` }, h("slot", { key: '07fc8da74d16295b89a7e09c942dad2e1d4c7a85', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: 'b3952bdad6f4f69d6054e585070b446adb993c13', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '88b3cf13c0bd1ba03a5de47c58f6e4b42ecbaab1', class: `helper ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, this.error && h("tds-icon", { key: 'd9538b144e0bd14dc33969d65e78545d20fe1bf4', name: "error", size: "16px" }), this.helper))));
     }
     static get is() { return "tds-dropdown"; }
     static get encapsulation() { return "shadow"; }

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

@@ -16,7 +16,7 @@ export class TdsFooter {
         const usesStartSlot = hasSlot('start', this.host);
         const usesEndSlot = hasSlot('end', this.host);
         const usesCopyrightSlot = hasSlot('copyright', this.host);
-        return (h(Host, { key: '454d913eea834fa60400c9714370d14425bc24b6', class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("footer", { key: '77ee89f78b3df1658a6c9e1f5b73273b447aca6d' }, usesTopSlot && h("slot", { key: '6a3c601f7fcd034d659848c3a568460489f874ca', name: "top" }), h("div", { key: '245560e49f1aa3ac1c0d9234f2b53c6c8be12a32', class: "footer-main" }, (usesStartSlot || usesEndSlot) && (h("div", { key: '414068ba7282518630065a79d30b6ca557958e7b', class: "footer-main-top" }, usesStartSlot && h("slot", { key: 'c96a3102e93ffa917ccd4c0b2a28d62d7fca91af', name: "start" }), usesEndSlot && h("slot", { key: 'ac6b940e444782af4cbaadf8fd451e1f9143abe5', name: "end" }))), h("div", { key: 'ce82243d065384f15de5f1d2e3008fdf2054c0d4', class: "footer-main-bottom" }, h("small", { key: '77ac4db0d9d34ddb9347f7183bdb374bf9b10242', class: "copyright" }, usesCopyrightSlot ? h("slot", { name: "copyright" }) : this.copyrightText), h("div", { key: '551b06ad3b3d15aa954997e17cbf127ce61fc9fd', class: "brand" }, h("p", { key: '8f87301b189a00065a6d6441d074d42ed892bc70' }, "Scania")))))));
+        return (h(Host, { key: '454d913eea834fa60400c9714370d14425bc24b6', class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("footer", { key: '77ee89f78b3df1658a6c9e1f5b73273b447aca6d' }, usesTopSlot && h("slot", { key: '6a3c601f7fcd034d659848c3a568460489f874ca', name: "top" }), h("div", { key: '245560e49f1aa3ac1c0d9234f2b53c6c8be12a32', class: "footer-main" }, (usesStartSlot || usesEndSlot) && (h("div", { key: '2b3220a69f400b8b609fb423f4136b9fb3d1bf96', class: "footer-main-top" }, usesStartSlot && h("slot", { key: '952412fc57aef7abe5a195ac173a14a48a626c95', name: "start" }), usesEndSlot && h("slot", { key: 'a8b8f6d9c625b7da0ecee95e05a1cda4492b964a', name: "end" }))), h("div", { key: 'ca1e76bd613fa3662a5822882fc4ddc0e030c606', class: "footer-main-bottom" }, h("small", { key: '5c5c3803d71c51b8793993240f00912b89377985', class: "copyright" }, usesCopyrightSlot ? h("slot", { name: "copyright" }) : this.copyrightText), h("div", { key: '2ebada35ffde37a7824b100fe34dd947c525741e', class: "brand" }, h("p", { key: 'e6233b2ce0d5f36a54f9069a9feec687388bc795' }, "Scania")))))));
     }
     static get is() { return "tds-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/header/header-dropdown/header-dropdown.css

@@ -1,6 +1,7 @@
 :host {
   --tds-scrollbar-width-standard: thin;
   --tds-scrollbar-width: 10px;
+  --tds-scrollbar-height: 10px;
   --tds-scrollbar-thumb-border-width: 3px;
   --tds-scrollbar-thumb-border-hover-width: 2px;
 }

package/dist/collection/components/header/header-launcher/header-launcher.css

@@ -1,6 +1,7 @@
 :host {
   --tds-scrollbar-width-standard: thin;
   --tds-scrollbar-width: 10px;
+  --tds-scrollbar-height: 10px;
   --tds-scrollbar-thumb-border-width: 3px;
   --tds-scrollbar-thumb-border-hover-width: 2px;
 }

package/dist/collection/components/header/header.css

@@ -4,6 +4,7 @@
 :host {
   --tds-scrollbar-width-standard: thin;
   --tds-scrollbar-width: 10px;
+  --tds-scrollbar-height: 10px;
   --tds-scrollbar-thumb-border-width: 3px;
   --tds-scrollbar-thumb-border-hover-width: 2px;
 }

package/dist/collection/components/popover-canvas/popover-canvas.js

@@ -104,7 +104,7 @@ export class TdsPopoverCanvas {
                         "Placement": {
                             "location": "import",
                             "path": "@popperjs/core",
-                            "id": ""
+                            "id": "node_modules::Placement"
                         }
                     }
                 },

package/dist/collection/components/popover-core/popover-core.js

@@ -227,7 +227,7 @@ export class TdsPopoverCore {
                         "Placement": {
                             "location": "import",
                             "path": "@popperjs/core",
-                            "id": ""
+                            "id": "node_modules::Placement"
                         }
                     }
                 },

package/dist/collection/components/popover-menu/popover-menu.js

@@ -105,7 +105,7 @@ export class TdsPopoverMenu {
                         "Placement": {
                             "location": "import",
                             "path": "@popperjs/core",
-                            "id": ""
+                            "id": "node_modules::Placement"
                         }
                     }
                 },

package/dist/collection/components/side-menu/side-menu.css

@@ -4,6 +4,7 @@
 :host {
   --tds-scrollbar-width-standard: thin;
   --tds-scrollbar-width: 10px;
+  --tds-scrollbar-height: 10px;
   --tds-scrollbar-thumb-border-width: 3px;
   --tds-scrollbar-thumb-border-hover-width: 2px;
 }

package/dist/collection/components/side-menu/side-menu.js

@@ -163,7 +163,7 @@ export class TdsSideMenu {
                     "references": {
                         "CollapseEvent": {
                             "location": "local",
-                            "path": "/home/runner/work/tegel/tegel/packages/core/src/components/side-menu/side-menu.tsx",
+                            "path": "/Users/johnny/dev/scania/tegel/packages/core/src/components/side-menu/side-menu.tsx",
                             "id": "src/components/side-menu/side-menu.tsx::CollapseEvent"
                         }
                     }
@@ -187,7 +187,7 @@ export class TdsSideMenu {
                     "references": {
                         "CollapseEvent": {
                             "location": "local",
-                            "path": "/home/runner/work/tegel/tegel/packages/core/src/components/side-menu/side-menu.tsx",
+                            "path": "/Users/johnny/dev/scania/tegel/packages/core/src/components/side-menu/side-menu.tsx",
                             "id": "src/components/side-menu/side-menu.tsx::CollapseEvent"
                         }
                     }
@@ -211,7 +211,7 @@ export class TdsSideMenu {
                     "references": {
                         "InternalTdsSideMenuPropChange": {
                             "location": "local",
-                            "path": "/home/runner/work/tegel/tegel/packages/core/src/components/side-menu/side-menu.tsx",
+                            "path": "/Users/johnny/dev/scania/tegel/packages/core/src/components/side-menu/side-menu.tsx",
                             "id": "src/components/side-menu/side-menu.tsx::InternalTdsSideMenuPropChange"
                         }
                     }

package/dist/collection/components/stepper/step/step.css

@@ -2,9 +2,6 @@
   position: relative;
   display: table-cell;
 }
-:host tds-icon {
-  line-height: 1;
-}
 :host [role=listitem] {
   display: flex;
   justify-content: start;
@@ -24,6 +21,12 @@
   height: 30px;
   min-width: 30px;
 }
+:host [role=listitem].lg .content-container tds-icon {
+  vertical-align: bottom;
+}
+:host [role=listitem].lg .content-container .index-container {
+  vertical-align: sub;
+}
 :host [role=listitem].lg.vertical::after {
   content: " ";
   position: absolute;
@@ -81,10 +84,19 @@
   font: var(--tds-detail-05);
   letter-spacing: var(--tds-detail-05-ls);
 }
+:host [role=listitem].sm .index-container {
+  vertical-align: -webkit-baseline-middle;
+  vertical-align: -moz-middle-with-baseline;
+}
 :host [role=listitem].sm .content-container {
   height: 24px;
   min-width: 24px;
 }
+:host [role=listitem].sm .tds-step-icon {
+  vertical-align: -webkit-baseline-middle;
+  vertical-align: -moz-middle-with-baseline;
+  margin-top: -2px;
+}
 :host [role=listitem].sm.vertical::after {
   content: " ";
   position: absolute;
@@ -150,9 +162,7 @@
 :host [role=listitem] .content-container {
   border-radius: 100px;
   border: 1px solid var(--tds-stepper-icon-background);
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  text-align: center;
   position: relative;
 }
 :host [role=listitem] .content-container.error {

package/dist/collection/components/stepper/step/step.js

@@ -39,7 +39,7 @@ export class TdsStep {
         }
     }
     render() {
-        return (h(Host, { key: '25272154fa202dc80faadec2f69bb76c7cfb23ba' }, h("div", { key: 'b95ec3ae0c8842cce29a26a00b77e9d63ddf3e7c', role: "listitem", class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, h("div", { key: '5bc8c4ccdf3af7371ea49018d2cd9e1081f7055d', class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h("tds-icon", { name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (this.index)), !this.hideLabels && (h("div", { key: '971af264f2f27ddc0d42c9d05e9ae2d641d88bac', class: `label ${this.size} ${this.state}` }, h("slot", { key: 'dec79d74317c78f72230e4983ac7c672d2560e4b', name: "label" }))))));
+        return (h(Host, { key: '25272154fa202dc80faadec2f69bb76c7cfb23ba' }, h("div", { key: 'b95ec3ae0c8842cce29a26a00b77e9d63ddf3e7c', role: "listitem", class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, h("span", { key: '0dfc323696c80230df87de15858a08c2051e9f64', class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h("tds-icon", { class: 'tds-step-icon', name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (h("span", { class: "index-container" }, this.index))), !this.hideLabels && (h("div", { key: '1726259dde21fea66e1554f6f5760176e3a24b13', class: `label ${this.size} ${this.state}` }, h("slot", { key: 'dd9d6499348d2e7bbf36920c63dd836371dbd090', name: "label" }))))));
     }
     static get is() { return "tds-step"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stepper/stepper.js

@@ -173,7 +173,7 @@ export class TdsStepper {
                     "references": {
                         "InternalTdsStepperPropChange": {
                             "location": "local",
-                            "path": "/home/runner/work/tegel/tegel/packages/core/src/components/stepper/stepper.tsx",
+                            "path": "/Users/johnny/dev/scania/tegel/packages/core/src/components/stepper/stepper.tsx",
                             "id": "src/components/stepper/stepper.tsx::InternalTdsStepperPropChange"
                         }
                     }

package/dist/collection/components/table/table/table.css

@@ -1,3 +1,15 @@
+:host {
+  --tds-scrollbar-width-standard: thin;
+  --tds-scrollbar-width: 10px;
+  --tds-scrollbar-height: 10px;
+  --tds-scrollbar-thumb-border-width: 3px;
+  --tds-scrollbar-thumb-border-hover-width: 2px;
+}
+
+body {
+  scrollbar-width: thin;
+}
+
 :host,
 .tds-table {
   border-collapse: collapse;
@@ -12,4 +24,53 @@
 :host(.tds-table--responsive),
 .tds-table--responsive {
   width: 100%;
+}
+
+.tds-table--horizontal-scroll {
+  display: block;
+  overflow-x: scroll;
+  white-space: nowrap;
+}
+.tds-table--horizontal-scroll:hover::-webkit-scrollbar-thumb {
+  border: var(--tds-scrollbar-thumb-border-hover-width) solid transparent;
+  background: var(--tds-scrollbar-hover-thumb-color);
+  background-clip: padding-box;
+}
+.tds-table--horizontal-scroll::-webkit-scrollbar {
+  height: var(--tds-scrollbar-height);
+}
+.tds-table--horizontal-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+.tds-table--horizontal-scroll::-webkit-scrollbar-thumb {
+  border-radius: 40px;
+  background: var(--tds-scrollbar-thumb-color);
+  border: var(--tds-scrollbar-thumb-border-width) solid transparent;
+  background-clip: padding-box;
+}
+.tds-table--horizontal-scroll::-webkit-scrollbar-button {
+  height: 0;
+  width: 0;
+}
+@supports not selector(::-webkit-scrollbar) {
+  .tds-table--horizontal-scroll {
+    scrollbar-color: var(--tds-scrollbar-thumb-color) var(--tds-scrollbar-track-color);
+    scrollbar-width: var(--tds-scrollbar-width-standard);
+  }
+}
+
+.tds-table--horizontal-scroll-toolbar {
+  margin-top: 64px;
+}
+
+.tds-table--horizontal-scroll-toolbar-compact {
+  margin-top: 56px;
+}
+
+.tds-table--horizontal-scroll-footer {
+  margin-bottom: 49px;
+}
+
+.tds-table--horizontal-scroll-footer-compact {
+  margin-bottom: 33px;
 }

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

@@ -14,7 +14,10 @@ export class TdsTable {
         this.expandableRows = false;
         this.responsive = false;
         this.modeVariant = null;
+        this.horizontalScrollWidth = null;
         this.tableId = generateUniqueId();
+        this.enableHorizontalScrollToolbarDesign = false;
+        this.enableHorizontalScrollFooterDesign = false;
     }
     emitInternalTdsPropChange(changedValueName, changedValue) {
         this.internalTdsTablePropChange.emit({
@@ -63,18 +66,34 @@ export class TdsTable {
     modeVariantChanged(newValue) {
         this.emitInternalTdsPropChange('modeVariant', newValue);
     }
+    widthChanged(newValue) {
+        this.emitInternalTdsPropChange('horizontalScrollWidth', newValue);
+    }
+    componentWillRender() {
+        if (this.horizontalScrollWidth) {
+            this.enableHorizontalScrollToolbarDesign =
+                this.host.closest('tds-table').getElementsByTagName('tds-table-toolbar').length >= 1;
+            this.enableHorizontalScrollFooterDesign =
+                this.host.closest('tds-table').getElementsByTagName('tds-table-footer').length >= 1;
+        }
+    }
     render() {
-        return (h(Host, { key: 'e90429bc887c2a3a24eaf3acf0bba7748fd291ed', class: {
+        return (h(Host, { key: 'da929268a984ca0e81843132b2fafd6c79bec3b3', class: {
                 'tds-table--responsive': this.responsive,
                 'tds-mode-variant-primary': this.modeVariant === 'primary',
                 'tds-mode-variant-secondary': this.modeVariant === 'secondary',
-            } }, h("table", { key: '0ab17fb64542a59745bf6b5a8dee0fc365adecf3', class: {
+            } }, h("table", { key: '2ba662d97bc834a7a0d6d71338fc7c322bc15741', style: this.horizontalScrollWidth ? { width: this.horizontalScrollWidth } : {}, class: {
                 'tds-table': true,
                 'tds-table--compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table--no-min-width': this.noMinWidth,
                 'tds-table--responsive': this.responsive,
-            } }, h("slot", { key: '855c9d02a5564e5ac5cba37c92b87e19e6fba919' }))));
+                'tds-table--horizontal-scroll': !!this.horizontalScrollWidth,
+                'tds-table--horizontal-scroll-toolbar': this.enableHorizontalScrollToolbarDesign && !this.compactDesign,
+                'tds-table--horizontal-scroll-toolbar-compact': this.enableHorizontalScrollToolbarDesign && this.compactDesign,
+                'tds-table--horizontal-scroll-footer': this.enableHorizontalScrollFooterDesign && !this.compactDesign,
+                'tds-table--horizontal-scroll-footer-compact': this.enableHorizontalScrollFooterDesign && this.compactDesign,
+            } }, h("slot", { key: 'c95e71aeaac2f4378d440bb23ff890c9c4a76fdf' }))));
     }
     static get is() { return "tds-table"; }
     static get encapsulation() { return "shadow"; }
@@ -215,6 +234,24 @@ export class TdsTable {
                 "reflect": true,
                 "defaultValue": "null"
             },
+            "horizontalScrollWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Width of the table, used as the constraint for horizontal scrolling.\n**NOTE**: this will disable usage of the responsive flag"
+                },
+                "attribute": "horizontal-scroll-width",
+                "reflect": false,
+                "defaultValue": "null"
+            },
             "tableId": {
                 "type": "string",
                 "mutable": false,
@@ -235,6 +272,12 @@ export class TdsTable {
             }
         };
     }
+    static get states() {
+        return {
+            "enableHorizontalScrollToolbarDesign": {},
+            "enableHorizontalScrollFooterDesign": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "internalTdsTablePropChange",
@@ -255,7 +298,7 @@ export class TdsTable {
                     "references": {
                         "InternalTdsTablePropChange": {
                             "location": "local",
-                            "path": "/home/runner/work/tegel/tegel/packages/core/src/components/table/table/table.tsx",
+                            "path": "/Users/johnny/dev/scania/tegel/packages/core/src/components/table/table/table.tsx",
                             "id": "src/components/table/table/table.tsx::InternalTdsTablePropChange"
                         }
                     }
@@ -303,6 +346,9 @@ export class TdsTable {
             }, {
                 "propName": "modeVariant",
                 "methodName": "modeVariantChanged"
+            }, {
+                "propName": "horizontalScrollWidth",
+                "methodName": "widthChanged"
             }];
     }
 }

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

@@ -9,6 +9,9 @@ const relevantTableProps = [
 /**
  * @slot <default> - <b>Unnamed slot.</b> For the cells.
  * @slot expand-row - Slot for the expanded row.
+
+ * @part row - Selector for the main row of the table.
+ * @part expand-row - Selector for the expanded row of the table.
  */
 export class TdsTableBodyRowExpandable {
     constructor() {
@@ -81,18 +84,18 @@ export class TdsTableBodyRowExpandable {
         this.sendValue();
     }
     render() {
-        return (h(Host, { key: '74b02f93d3827e994ec32d6936861ca272cf6091', class: {
+        return (h(Host, { key: 'cd23997b2d0b659691199b0f6a7be6aa51689ee4', 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: '8c9b941b05eba4e785bd3d0d3b2fcc102e582e3b', class: {
+            } }, h("tr", { key: 'a3fec49a0b97a35f61db7c31dfc023ba3acebd86', class: {
                 'tds-table__row': true,
                 'tds-table__row--expanded': this.isExpanded,
-            } }, h("td", { key: '6ca2b7232372c6773b20cbebcf57c2dc22873b8e', class: "tds-table__cell tds-table__cell--expand" }, h("label", { key: '37831f286353d52f811edec384f2e8e9da65cd50', class: "tds-table__expand-control-container" }, h("input", { key: 'ecd7ac5041cba257b00485e44e9b2867fdd563a6', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded }), h("span", { key: '2eb29d27eea8ff2ee7a6afe74a70695b03aa141d', class: "tds-expendable-row-icon" }, h("svg", { key: '88731d236df24d952130566dfa395d3e161de82e', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '81a677c1f6a0b15145b879748cc4d9d6a93821d4', "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: 'deffa2b70b546db18812e4288e07fe6f8ac0d42d' })), h("tr", { key: '1515f8da52b7fec720a788ae9c2127d8a9a69fce', class: {
+            }, part: "row" }, h("td", { key: 'd995074fc578640544f59df3426762ff6595dd0b', class: "tds-table__cell tds-table__cell--expand" }, h("label", { key: '0f905bda5651a8c9dc30094dbc402e5e618e4030', class: "tds-table__expand-control-container" }, h("input", { key: '9b316a0e3a44cfa21851a1ac2ec0980d53d3aa54', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded }), h("span", { key: '022d891384b907d3ebce4b2138fef4f5c6f7d44f', class: "tds-expendable-row-icon" }, h("svg", { key: 'fb7ccb4d599e72a9d7a56808f59226779ffe611b', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { key: '1e2c766463813a4b1edc32093abbbf501b99974b', "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: '7f0e3d93df3da8eeff969daa9aba8eecaa1e6e23' })), h("tr", { key: '89766434b64dd9bf0aecf805fdd494aab68f8af9', class: {
                 'tds-table__row-expand': true,
                 'tds-table__row-expand--expanded': this.isExpanded,
-            } }, h("td", { key: 'e16011d9e155b003d011de4a73518a81414f2e91', class: "tds-table__cell-expand", colSpan: this.columnsNumber }, h("slot", { key: 'f60bf938090436423632bf93076bd41ee8def3ce', name: "expand-row" })))));
+            }, part: "expand-row" }, h("td", { key: 'f0c746d12fae92eae3e6bf9651c826fb3aacbefe', class: "tds-table__cell-expand", colSpan: this.columnsNumber }, h("slot", { key: '0a9e454379a7a6a72b3d6ea33a66a4aaaac09e8f', name: "expand-row" })))));
     }
     static get is() { return "tds-table-body-row-expandable"; }
     static get encapsulation() { return "shadow"; }

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

@@ -97,6 +97,12 @@
   width: 28px;
 }
 
+:host(.footer__horizontal-scroll) {
+  display: inline-table;
+  position: absolute;
+  margin-top: 10px;
+}
+
 @keyframes tds-shake-animation {
   10%, 90% {
     transform: translate3d(-1px, 0, 0);

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

@@ -1,5 +1,8 @@
 import { h, Host, } from "@stencil/core";
-const relevantTableProps = ['compactDesign'];
+const relevantTableProps = [
+    'compactDesign',
+    'horizontalScrollWidth',
+];
 function removeShakeAnimation(e) {
     e.target.classList.remove('tds-table__page-selector-input--shake');
 }
@@ -38,6 +41,7 @@ export class TdsTableFooter {
         this.compactDesign = false;
         this.lastCorrectValue = undefined;
         this.tableId = '';
+        this.horizontalScrollWidth = null;
     }
     internalTdsPropChangeListener(event) {
         if (this.tableId === event.detail.tableId) {
@@ -90,7 +94,10 @@ export class TdsTableFooter {
         this.storeLastCorrectValue(this.paginationValue);
     }
     render() {
-        return (h(Host, { key: '8a128e443420d841b0e56303d4c533ced7fef56c', class: this.compactDesign ? 'tds-table--compact' : '' }, h("tr", { key: '6315f2fdf35c670a702cb7a298b29d53a636a639', class: "tds-table__footer-row" }, h("td", { key: '6d179522f5e379c8899d545c1cae1ebf868dc9dc', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: 'd6b8f037c8a0b4ec05448a64ea3edc11b253289b', class: "tds-table__pagination" }, h("div", { key: '422d83996b22557dc9d31ab23e82b040a3106f62', class: "tds-table__row-selector" }), h("div", { key: 'a978da12ff6763049d9e75e9dea8d85e2786af07', class: "tds-table__page-selector" }, h("input", { key: '343d34c4c7edebd6a797e4bb5c59e20ea5b43fad', 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: '38d4a5c1897adeda83ea8faec711a4e32c1ef040', class: "tds-table__footer-text" }, "of ", h("span", { key: '0769b3a30cfe35dcfb13834625b60825ae087a60' }, this.pages), " pages"), h("button", { key: 'fa8af3c295fdbbeb5d965abd76ec71a7564f0a50', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: '0011853f15bc9f0880a2bdf98d20952df2f49ba8', name: "chevron_left", size: "20px" })), h("button", { key: '36c2c94ec609f6e6d30dfd9fc698709f65f24a98', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: 'e3affadd067d44e1f106be7a9334ffe14dae0f1f', name: "chevron_right", size: "20px" })))))))));
+        return (h(Host, { key: 'fe6221e5dd2ec57e63afefc5e45c0b3f5ad85d8f', class: {
+                'tds-table--compact': this.compactDesign,
+                'footer__horizontal-scroll': !!this.horizontalScrollWidth,
+            }, style: this.horizontalScrollWidth ? { width: this.horizontalScrollWidth } : {} }, h("tr", { key: '6f6bfca5e7719084b2c4564b86806f6eb7867601', class: "tds-table__footer-row" }, h("td", { key: '2c4389dfa2c028798246a5c4d8b9bdcc05a780f2', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: '0831e596963e20222feee940fb7d7d489f832b5e', class: "tds-table__pagination" }, h("div", { key: '1129e67d9b69b06a1fadde589f9ad37a1bd9fcca', class: "tds-table__row-selector" }), h("div", { key: '81e685df813d615027470d4c84c468bb2c5fccca', class: "tds-table__page-selector" }, h("input", { key: '4b116837ae02fcbf6b51b940587ae6159d40f5cb', 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: '927af4715b33f50679aef3ec5eccc5fd4044add7', class: "tds-table__footer-text" }, "of ", h("span", { key: '2d89421fbbbb0828623465f39edc506b9bfa82da' }, this.pages), " pages"), h("button", { key: '37916d812b7b4510b088b382f48b2d9f04d212b2', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: 'd89ac980f4c48fe6c14610f27ccc05e43994631e', name: "chevron_left", size: "20px" })), h("button", { key: '246b17fc6ff26e3830d5a359a4a5de844bc93a1b', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: '6fa3441ed75b484974e50ee41ea1444bea7c30e2', name: "chevron_right", size: "20px" })))))))));
     }
     static get is() { return "tds-table-footer"; }
     static get encapsulation() { return "shadow"; }
@@ -185,7 +192,8 @@ export class TdsTableFooter {
             "columnsNumber": {},
             "compactDesign": {},
             "lastCorrectValue": {},
-            "tableId": {}
+            "tableId": {},
+            "horizontalScrollWidth": {}
         };
     }
     static get events() {

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

@@ -22,6 +22,9 @@
   padding: 8px 16px;
   margin: 0;
 }
+:host(.tds-table__header-cell) .tds-table__header-text-no-padding {
+  padding: 0;
+}
 
 :host(.tds-table__header-cell--sortable) .tds-table__header-button {
   display: flex;
@@ -93,6 +96,10 @@
   min-width: unset;
 }
 
+:host(.tds-table--no-padding) {
+  height: unset;
+}
+
 :host(.tds-table__header-cell:first-of-type) {
   border-top-left-radius: 4px;
 }