@scania/tegel 1.23.0-feat-dropdown-allow-numbers-beta.4 → 1.23.0-fix-form-components-slider-reset-beta.0

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

@@ -8,15 +8,17 @@ import appendHiddenInput from "../../utils/appendHiddenInput";
 export class TdsDropdown {
     constructor() {
         this.setDefaultOption = () => {
-            if (this.initialValue) {
+            if (this.defaultValue) {
                 const children = Array.from(this.host.children).filter((element) => element.tagName === 'TDS-DROPDOWN-OPTION');
                 if (children.length === 0) {
                     console.warn('TDS DROPDOWN: No options found. Disregard if loading data asynchronously.');
                     return;
                 }
-                const initialValues = typeof this.initialValue === 'object' ? this.initialValue : [this.initialValue];
+                const defaultValues = this.multiselect
+                    ? new Set(this.defaultValue.split(','))
+                    : [this.defaultValue];
                 const childrenMap = new Map(children.map((element) => [element.value, element]));
-                const matchedValues = Array.from(initialValues).filter((value) => {
+                const matchedValues = Array.from(defaultValues).filter((value) => {
                     const element = childrenMap.get(value);
                     if (element) {
                         element.setSelected(true);
@@ -29,7 +31,7 @@ export class TdsDropdown {
                     this.setValueAttribute();
                 }
                 else {
-                    console.warn(`TDS DROPDOWN: No matching option found for initialValue "${this.initialValue}"`);
+                    console.warn(`TDS DROPDOWN: No matching option found for defaultValue "${this.defaultValue}"`);
                 }
             }
         };
@@ -145,7 +147,7 @@ export class TdsDropdown {
             var _a, _b;
             this.tdsChange.emit({
                 name: this.name,
-                value: (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.map((value) => value)) !== null && _b !== void 0 ? _b : null,
+                value: (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.map((value) => value).toString()) !== null && _b !== void 0 ? _b : null,
             });
         };
         this.name = undefined;
@@ -163,7 +165,7 @@ export class TdsDropdown {
         this.filter = false;
         this.normalizeText = true;
         this.noResultText = 'No result';
-        this.initialValue = undefined;
+        this.defaultValue = undefined;
         this.open = false;
         this.value = undefined;
         this.filterResult = undefined;
@@ -199,7 +201,7 @@ export class TdsDropdown {
     // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
     async setValue(value, label) {
         let nextValue;
-        if (typeof value === 'string' || typeof value === 'number')
+        if (typeof value === 'string')
             nextValue = [value];
         else
             nextValue = value;
@@ -355,7 +357,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: 'afd54c5eb55a6824c302dc4c8ede449cee82c085', role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { key: 'bb96452b5c240e55e9b4b2598b9da90e4901922c', class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '3daa5d2f3e70a8619d4b8a3b2a9a73abb9709419', class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: {
+        return (h(Host, { key: '1c4995be9b1e47e254ec9976b334c4d74a44263b', role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { key: 'ad423934dedc56ff39d06bf7746e47d011bed002', class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '99c87c0add1152f47533bf6ef5e6794cffdbb18c', class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: {
                 filter: true,
                 focus: this.filterFocus,
                 disabled: this.disabled,
@@ -405,7 +407,7 @@ 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: 'e06e0d2da1ff7b630c450b4d7c4b791c1e49bb09', ref: (element) => (this.dropdownList = element), class: {
+                    ` }, 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: 'dd850ac34b473f9cac51ad5bdc8417d994b7946a', ref: (element) => (this.dropdownList = element), class: {
                 'dropdown-list': true,
                 [this.size]: true,
                 [this.getOpenDirection()]: true,
@@ -414,7 +416,7 @@ export class TdsDropdown {
                 'closed': !this.open,
                 [`animation-enter-${this.animation}`]: this.animation !== 'none' && this.open,
                 [`animation-exit-${this.animation}`]: this.animation !== 'none' && !this.open,
-            } }, h("slot", { key: '663ec973bc3c5fee4ebef6bb785e04057544ee89', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: 'ed64eb54675e70489efbe411f639ef4377f7b547', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '00f483bcce9f59ce93791a49ca039d13385ac920', class: `helper ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, this.error && h("tds-icon", { key: '4aa60b3eceff171bdf799a7c7c9304654944c443', name: "error", size: "16px" }), this.helper))));
+            } }, h("slot", { key: '790885487da46ec88e05ad98272cbd43eb6fc7ac', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '7d9c9f695c5dc2c734fa51a746c6c1c3547d5dec', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: 'b044b0d4dd3e39000fa0262a838aa860451e5986', class: `helper ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, this.error && h("tds-icon", { key: '506204fd3f113c6a903b616372660902295d0886', name: "error", size: "16px" }), this.helper))));
     }
     static get is() { return "tds-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -695,12 +697,12 @@ export class TdsDropdown {
                 "reflect": false,
                 "defaultValue": "'No result'"
             },
-            "initialValue": {
-                "type": "any",
+            "defaultValue": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | number | (string | number)[]",
-                    "resolved": "(string | number)[] | number | string",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -709,7 +711,7 @@ export class TdsDropdown {
                     "tags": [],
                     "text": "Default value selected in the Dropdown."
                 },
-                "attribute": "initial-value",
+                "attribute": "default-value",
                 "reflect": false
             }
         };
@@ -734,8 +736,8 @@ export class TdsDropdown {
                     "text": "Change event for the Dropdown."
                 },
                 "complexType": {
-                    "original": "{\n    name: string;\n    value: (string | number)[];\n  }",
-                    "resolved": "{ name: string; value: (string | number)[]; }",
+                    "original": "{\n    name: string;\n    value: string;\n  }",
+                    "resolved": "{ name: string; value: string; }",
                     "references": {}
                 }
             }, {
@@ -838,10 +840,10 @@ export class TdsDropdown {
             },
             "setValue": {
                 "complexType": {
-                    "signature": "(value: string | number | (string | number)[], label?: string) => Promise<{ value: string | number; label: string; }[]>",
+                    "signature": "(value: string | string[], label?: string) => Promise<{ value: string; label: string; }[]>",
                     "parameters": [{
                             "name": "value",
-                            "type": "string | number | (string | number)[]",
+                            "type": "string | string[]",
                             "docs": ""
                         }, {
                             "name": "label",
@@ -858,7 +860,7 @@ export class TdsDropdown {
                             "id": "global::HTMLTdsDropdownOptionElement"
                         }
                     },
-                    "return": "Promise<{ value: string | number; label: string; }[]>"
+                    "return": "Promise<{ value: string; label: string; }[]>"
                 },
                 "docs": {
                     "text": "Method for setting the value of the Dropdown.\n\nSingle selection example:\n\n<code>\ndropdown.setValue('option-1', 'Option 1');\n</code>\n\nMultiselect example:\n\n<code>\ndropdown.setValue(['option-1', 'option-2']);\n</code>",
@@ -867,10 +869,10 @@ export class TdsDropdown {
             },
             "appendValue": {
                 "complexType": {
-                    "signature": "(value: string | number) => Promise<void>",
+                    "signature": "(value: string) => Promise<void>",
                     "parameters": [{
                             "name": "value",
-                            "type": "string | number",
+                            "type": "string",
                             "docs": ""
                         }],
                     "references": {
@@ -891,10 +893,10 @@ export class TdsDropdown {
             },
             "removeValue": {
                 "complexType": {
-                    "signature": "(oldValue: string | number) => Promise<{ value: string | number; label: string; }[]>",
+                    "signature": "(oldValue: string) => Promise<{ value: string; label: string; }[]>",
                     "parameters": [{
                             "name": "oldValue",
-                            "type": "string | number",
+                            "type": "string",
                             "docs": ""
                         }],
                     "references": {
@@ -907,7 +909,7 @@ export class TdsDropdown {
                             "id": "global::HTMLTdsDropdownOptionElement"
                         }
                     },
-                    "return": "Promise<{ value: string | number; label: string; }[]>"
+                    "return": "Promise<{ value: string; label: string; }[]>"
                 },
                 "docs": {
                     "text": "Method for removing a selected value in the Dropdown.",

package/dist/collection/components/slider/slider.js

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, } from "@stencil/core";
 import generateUniqueId from "../../utils/generateUniqueId";
 export class TdsSlider {
     constructor() {
@@ -16,6 +16,7 @@ export class TdsSlider {
         this.useSnapping = false;
         this.supposedValueSlot = -1;
         this.resizeObserverAdded = false;
+        this.resetEventListenerAdded = false;
         this.label = '';
         this.value = '0';
         this.min = '0';
@@ -295,26 +296,41 @@ export class TdsSlider {
         }
         this.calculateThumbLeftFromValue(this.value);
         this.updateTrack();
+        // Only set the initial value once:
+        if (!this.initialValue) {
+            this.initialValue = this.value;
+        }
+    }
+    componentDidRender() {
+        // Only add the event listener once:
+        if (!this.resetEventListenerAdded) {
+            const form = this.host.closest('form');
+            form.addEventListener('reset', () => {
+                this.forceValueUpdate(this.initialValue);
+                this.reset();
+            });
+            this.resetEventListenerAdded = true;
+        }
     }
     render() {
-        return (h("div", { key: 'fd7d051192c33b19e8c68cbeaa50ea43149457bb', class: {
+        return (h("div", { key: '478b77234be1d2f650d972f633e0fa69373ddc15', class: {
                 'tds-slider-wrapper': true,
                 'read-only': this.readOnly,
-            } }, h("input", { key: 'd2fe02893f865f5791736cb5f05b5bcd2494e471', class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, value: this.value, disabled: this.disabled }), h("div", { key: '2d436a5654cb20923cd20ed61f9449bd0705edd2', class: {
+            } }, h("input", { key: '3df3c581b11ca0a4181335793eb67da17e7c677f', class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, value: this.value, disabled: this.disabled }), h("div", { key: 'c45af15623d4036cdbd1cc40637a724da7cd1886', class: {
                 'tds-slider': true,
                 'disabled': this.disabled,
                 'tds-slider-small': this.useSmall,
             }, ref: (el) => {
                 this.wrapperElement = el;
-            } }, h("label", { key: 'd9d444d15acabbbc23c7b7633e5312f405ff9120', class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { key: '2f0d0419138851724891e2ab04fef2f3b3e099f1', class: "tds-slider__input-values" }, h("div", { key: '7f23007c0f4a1aa6358ffa7c5aaae027d0927b63', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: 'df4a00a40c541b83aa8459dfcdaf22c348e2c80a', class: "tds-slider__controls" }, h("div", { key: '96cc419d369098137895b725f97a8fa3d7d50dfc', class: "tds-slider__control tds-slider__control-minus", onClick: (event) => this.stepLeft(event) }, h("tds-icon", { key: '09ed43c9f2fe81baeada6a07e4cba18027f04ba1', name: "minus", size: "16px" })))), h("div", { key: '402647683b57076bd4ac3ce3d754585a89a48e08', class: "tds-slider-inner" }, this.tickValues.length > 0 && (h("div", { key: 'd80c648eca47c7e52725e967a32fe4a4692a5729', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: '030106df49f12a55c1b32a9c1c257f449629644a', class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { key: 'fef7013f82a191c32bc3a4d297f5e10a4db127a1', class: "tds-slider__track", ref: (el) => {
+            } }, h("label", { key: '902c3a1ae75d70855bd8352324a8f6f3e75a6248', class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { key: 'd49c4c4e4e5c01ec7eb2e43765da935240066fc8', class: "tds-slider__input-values" }, h("div", { key: 'b29361d522e7db6f060554c8e21607b23ee900c9', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: '8f6dabc200858de423c434572a7ac03f3e9b1b16', class: "tds-slider__controls" }, h("div", { key: '5bb7d9ce16760b992b4aca73e403d517452b2118', class: "tds-slider__control tds-slider__control-minus", onClick: (event) => this.stepLeft(event) }, h("tds-icon", { key: '5966ddd50b6b6780ba7f9e64ea74061ddfc01d81', name: "minus", size: "16px" })))), h("div", { key: 'a893175a93cbff981f73223b8f803ba4fe70d7ba', class: "tds-slider-inner" }, this.tickValues.length > 0 && (h("div", { key: 'c3a85f6ad96e8b057c879c43b09dc1af402fa7c3', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: 'a167169954a6de1bb7b0695775ce15a795160a48', class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { key: '15d212b6e04b8200e1c8e07aeddc96ec46a3d11d', class: "tds-slider__track", ref: (el) => {
                 this.trackElement = el;
-            }, tabindex: this.disabled ? '-1' : '0' }, h("div", { key: '24a583182c45114d1e011bffef0f81f1e4f93a36', class: "tds-slider__track-fill", ref: (el) => {
+            }, tabindex: this.disabled ? '-1' : '0' }, h("div", { key: '208bcaae8fff5c5c0cf0cde765cdc2945c0dcaa1', class: "tds-slider__track-fill", ref: (el) => {
                 this.trackFillElement = el;
-            } }), h("div", { key: '3bea53237beb92f41264386fb5ac181d1e9966a4', class: "tds-slider__thumb", ref: (el) => {
+            } }), h("div", { key: '9cb48a58d4a4247336a5c8d58e365535b4b4a7f4', class: "tds-slider__thumb", ref: (el) => {
                 this.thumbElement = el;
-            }, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb() }, this.tooltip && (h("div", { key: '3ac44629cad3b03524602f9babe7fa4582b38660', class: "tds-slider__value" }, this.value, h("svg", { key: '5adbbcc274555d14454c5329f0eea8c072a3db2c', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '248b1f8521b89be4214631e411c0ba9c7bcc07a8', d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), h("div", { key: 'bc778a9ccd25a5229aa7685cc6c22ed5385b9d98', class: "tds-slider__thumb-inner", ref: (el) => {
+            }, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb() }, this.tooltip && (h("div", { key: '52b88d0a51bb16c9c87199bcefc6165c613504d1', class: "tds-slider__value" }, this.value, h("svg", { key: '0e57a96dac780b70351c4aac112ad21a93cc5293', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'bfb6441c14afc4699195c30652d0b63cbe696264', d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), h("div", { key: '60a2e5543226c9b283a16c9195d779e38e9ec77d', class: "tds-slider__thumb-inner", ref: (el) => {
                 this.thumbInnerElement = el;
-            } })))), this.useInput && (h("div", { key: '077ffffeb0986504a2c9fc4e1b08095ec689402c', class: "tds-slider__input-values" }, h("div", { key: '74a528a286e2b49a6739c5817cca8a0436b908b9', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: 'af2a647636c8eecba19637aa92ddda37adc52a1b', class: "tds-slider__input-field-wrapper" }, h("input", { key: '02701d15de6119994f7be13b9c9ac69ae6f2269b', size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, readOnly: this.readOnly, onBlur: (event) => this.updateSliderValueOnInputChange(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event), type: "number", min: this.min, max: this.max })))), this.useControls && (h("div", { key: 'ef215ef613c381601674d4bb7dbea583a3ddde2a', class: "tds-slider__controls" }, h("div", { key: '4e553194348daf32529c9c8cedc32b0686ac32ff', class: "tds-slider__control tds-slider__control-plus", onClick: (event) => this.stepRight(event) }, h("tds-icon", { key: 'd5d67ea7ff64ed19d28bd078acad56ebda742f93', name: "plus", size: "16px" })))))));
+            } })))), this.useInput && (h("div", { key: 'f2b33ee9181c5043ef9a317c65903c95952166f9', class: "tds-slider__input-values" }, h("div", { key: '64494cbab8e9502857e20f264db20395420914ca', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: '05d8485c2c386648b9d72c327b483977755ff746', class: "tds-slider__input-field-wrapper" }, h("input", { key: 'a1c78406290cdca1f24af959699823f656bb8bad', size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, readOnly: this.readOnly, onBlur: (event) => this.updateSliderValueOnInputChange(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event), type: "number", min: this.min, max: this.max })))), this.useControls && (h("div", { key: 'df1cd75920b192ec5e4ee490a66353ef72b09942', class: "tds-slider__controls" }, h("div", { key: '9b1fe4d993155f225025e8e7b265673f962e73da', class: "tds-slider__control tds-slider__control-plus", onClick: (event) => this.stepRight(event) }, h("tds-icon", { key: '785a35d6e6b9c3c033b3df66b0849541511f97f5', name: "plus", size: "16px" })))))));
     }
     static get is() { return "tds-slider"; }
     static get originalStyleUrls() {
@@ -673,6 +689,7 @@ export class TdsSlider {
             }
         };
     }
+    static get elementRef() { return "host"; }
     static get watchers() {
         return [{
                 "propName": "value",

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

@@ -130,7 +130,7 @@ export class TdsTableFooter {
         return (h(Host, { key: 'ef2cd69929908fa46254c82d0799c1b1a4ee52b3', class: {
                 'tds-table--compact': this.compactDesign,
                 'footer__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.getStyles() }, h("tr", { key: 'f18eb0b2a49d1d8df9dacc998138dae4e5f8d256', class: "tds-table__footer-row" }, h("td", { key: 'abb1f6f2971c9fa9b68bfb856882817406d0d87f', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: '8226ac0aee40b97cad90035ff9aba54b8365b960', class: "tds-table__pagination" }, h("div", { key: '9b604d5ccb7dbdac0cdb1bc96567d7b29d7fa250', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { key: '716b6830e891305611ceb6213bd696298dbcfe12', class: "rows-per-page" }, h("p", { key: 'd6b7bfff5262fcf0174f6b2d92dcfdedda97dfc2' }, "Rows per page"), h("tds-dropdown", { key: '9da6799f30172a1628a4630aa5474456f6351089', modeVariant: "secondary", id: "rows-dropdown", class: "page-dropdown", size: "xs", initialValue: `${this.rowsPerPageValues[0]}`, onTdsChange: (event) => this.rowsPerPageChange(event) }, this.rowsPerPageValues.map((value) => {
+            }, style: this.getStyles() }, h("tr", { key: 'f18eb0b2a49d1d8df9dacc998138dae4e5f8d256', class: "tds-table__footer-row" }, h("td", { key: 'abb1f6f2971c9fa9b68bfb856882817406d0d87f', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: '8226ac0aee40b97cad90035ff9aba54b8365b960', class: "tds-table__pagination" }, h("div", { key: '9b604d5ccb7dbdac0cdb1bc96567d7b29d7fa250', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { key: '716b6830e891305611ceb6213bd696298dbcfe12', class: "rows-per-page" }, h("p", { key: 'd6b7bfff5262fcf0174f6b2d92dcfdedda97dfc2' }, "Rows per page"), h("tds-dropdown", { key: '9da6799f30172a1628a4630aa5474456f6351089', modeVariant: "secondary", id: "rows-dropdown", class: "page-dropdown", size: "xs", defaultValue: `${this.rowsPerPageValues[0]}`, onTdsChange: (event) => this.rowsPerPageChange(event) }, this.rowsPerPageValues.map((value) => {
             return (h("tds-dropdown-option", { value: `${value}` }, value));
         }))))), h("div", { key: '73c5849886a0144c22b79d31b92a607d8f794483', class: "tds-table__page-selector" }, h("input", { key: 'a297fd5b739df5d4353b045a25ba6e480dbad03e', 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: 'f6d1257c745638b2152843d52c494db23d26b2ca', class: "tds-table__footer-text" }, "of ", h("span", { key: '81b8c076cf322798709eafae1fad43b036127ada' }, this.pages), " pages"), h("button", { key: 'd9789d9d6ccd45f1d0c4e4d427c3ed1bb13e7440', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, h("tds-icon", { key: 'dac60e50f54fd71ae1d89e21e6140bbcbbda6680', name: "skip_backwards", size: "20px" })), h("button", { key: '39810bac01a38c71427192beea48257b7d2dd2b1', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: '2987abbbdc7be2c7485d7bfcabcafe94983f5f54', name: "chevron_left", size: "20px" })), h("button", { key: '2252c555a816a4014c130b05ae70d2e25893f460', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: 'a19c83f25082c82cdac308d3538c274bbce62826', name: "chevron_right", size: "20px" })), h("button", { key: 'e06ec885711559b6e7893d90ada5057292f624e0', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, h("tds-icon", { key: '6a8f4218a45cc5bdbb0c8b0711e802ce5f2dfed1', name: "skip_forward", size: "20px" })))))))));
     }

package/dist/components/{p-47c3b5c5.js → p-2523819c.js}

@@ -72,15 +72,17 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
         this.tdsBlur = createEvent(this, "tdsBlur", 6);
         this.tdsInput = createEvent(this, "tdsInput", 6);
         this.setDefaultOption = () => {
-            if (this.initialValue) {
+            if (this.defaultValue) {
                 const children = Array.from(this.host.children).filter((element) => element.tagName === 'TDS-DROPDOWN-OPTION');
                 if (children.length === 0) {
                     console.warn('TDS DROPDOWN: No options found. Disregard if loading data asynchronously.');
                     return;
                 }
-                const initialValues = typeof this.initialValue === 'object' ? this.initialValue : [this.initialValue];
+                const defaultValues = this.multiselect
+                    ? new Set(this.defaultValue.split(','))
+                    : [this.defaultValue];
                 const childrenMap = new Map(children.map((element) => [element.value, element]));
-                const matchedValues = Array.from(initialValues).filter((value) => {
+                const matchedValues = Array.from(defaultValues).filter((value) => {
                     const element = childrenMap.get(value);
                     if (element) {
                         element.setSelected(true);
@@ -93,7 +95,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
                     this.setValueAttribute();
                 }
                 else {
-                    console.warn(`TDS DROPDOWN: No matching option found for initialValue "${this.initialValue}"`);
+                    console.warn(`TDS DROPDOWN: No matching option found for defaultValue "${this.defaultValue}"`);
                 }
             }
         };
@@ -209,7 +211,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
             var _a, _b;
             this.tdsChange.emit({
                 name: this.name,
-                value: (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.map((value) => value)) !== null && _b !== void 0 ? _b : null,
+                value: (_b = (_a = this.value) === null || _a === void 0 ? void 0 : _a.map((value) => value).toString()) !== null && _b !== void 0 ? _b : null,
             });
         };
         this.name = undefined;
@@ -227,7 +229,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
         this.filter = false;
         this.normalizeText = true;
         this.noResultText = 'No result';
-        this.initialValue = undefined;
+        this.defaultValue = undefined;
         this.open = false;
         this.value = undefined;
         this.filterResult = undefined;
@@ -263,7 +265,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
     // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
     async setValue(value, label) {
         let nextValue;
-        if (typeof value === 'string' || typeof value === 'number')
+        if (typeof value === 'string')
             nextValue = [value];
         else
             nextValue = value;
@@ -419,7 +421,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
     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: 'afd54c5eb55a6824c302dc4c8ede449cee82c085', role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { key: 'bb96452b5c240e55e9b4b2598b9da90e4901922c', class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '3daa5d2f3e70a8619d4b8a3b2a9a73abb9709419', class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: {
+        return (h(Host, { key: '1c4995be9b1e47e254ec9976b334c4d74a44263b', role: "select", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && this.labelPosition === 'outside' && (h("div", { key: 'ad423934dedc56ff39d06bf7746e47d011bed002', class: `label-outside ${this.disabled ? 'disabled' : ''}` }, this.label)), h("div", { key: '99c87c0add1152f47533bf6ef5e6794cffdbb18c', class: `dropdown-select ${this.size} ${this.disabled ? 'disabled' : ''}` }, this.filter ? (h("div", { class: {
                 filter: true,
                 focus: this.filterFocus,
                 disabled: this.disabled,
@@ -469,7 +471,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
                     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: 'e06e0d2da1ff7b630c450b4d7c4b791c1e49bb09', ref: (element) => (this.dropdownList = element), class: {
+                    ` }, 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: 'dd850ac34b473f9cac51ad5bdc8417d994b7946a', ref: (element) => (this.dropdownList = element), class: {
                 'dropdown-list': true,
                 [this.size]: true,
                 [this.getOpenDirection()]: true,
@@ -478,7 +480,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
                 'closed': !this.open,
                 [`animation-enter-${this.animation}`]: this.animation !== 'none' && this.open,
                 [`animation-exit-${this.animation}`]: this.animation !== 'none' && !this.open,
-            } }, h("slot", { key: '663ec973bc3c5fee4ebef6bb785e04057544ee89', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: 'ed64eb54675e70489efbe411f639ef4377f7b547', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: '00f483bcce9f59ce93791a49ca039d13385ac920', class: `helper ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, this.error && h("tds-icon", { key: '4aa60b3eceff171bdf799a7c7c9304654944c443', name: "error", size: "16px" }), this.helper))));
+            } }, h("slot", { key: '790885487da46ec88e05ad98272cbd43eb6fc7ac', onSlotchange: () => this.handleSlotChange() }), this.filterResult === 0 && this.noResultText !== '' && (h("div", { key: '7d9c9f695c5dc2c734fa51a746c6c1c3547d5dec', class: `no-result ${this.size}` }, this.noResultText))), this.helper && (h("div", { key: 'b044b0d4dd3e39000fa0262a838aa860451e5986', class: `helper ${this.error ? 'error' : ''} ${this.disabled ? 'disabled' : ''}` }, this.error && h("tds-icon", { key: '506204fd3f113c6a903b616372660902295d0886', name: "error", size: "16px" }), this.helper))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -501,7 +503,7 @@ const TdsDropdown = /*@__PURE__*/ proxyCustomElement(class TdsDropdown extends H
         "filter": [4],
         "normalizeText": [4, "normalize-text"],
         "noResultText": [1, "no-result-text"],
-        "initialValue": [8, "initial-value"],
+        "defaultValue": [1, "default-value"],
         "open": [32],
         "value": [32],
         "filterResult": [32],

package/dist/components/{p-6dcd4146.js → p-462b77e8.js}

@@ -71,7 +71,7 @@ const TdsDropdownOption = /*@__PURE__*/ proxyCustomElement(class TdsDropdownOpti
         this.selected = selected;
     }
     render() {
-        return (h(Host, { key: '98f57bb76aa504cbacbd40cbd1c76648f678b58f', role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected }, h("div", { key: 'd22f24e290fc61c14c8b9ca1c908bafd466f6d97', class: `dropdown-option 
+        return (h(Host, { key: '1cb00a19c5dbcc47e1b2bc97d1d5ccc8ac5a532a', role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected }, h("div", { key: '5deaf44c7306f4b1856200bf0a5640e99fcb449d', class: `dropdown-option 
           ${this.size}
           ${this.selected ? 'selected' : ''}
           ${this.disabled ? 'disabled' : ''}
@@ -91,7 +91,7 @@ const TdsDropdownOption = /*@__PURE__*/ proxyCustomElement(class TdsDropdownOpti
     get host() { return this; }
     static get style() { return TdsDropdownOptionStyle0; }
 }, [17, "tds-dropdown-option", {
-        "value": [8],
+        "value": [1],
         "disabled": [4],
         "selected": [32],
         "multiselect": [32],

package/dist/components/tds-dropdown-option.js

@@ -1,4 +1,4 @@
-import { T as TdsDropdownOption$1, d as defineCustomElement$1 } from './p-6dcd4146.js';
+import { T as TdsDropdownOption$1, d as defineCustomElement$1 } from './p-462b77e8.js';
 
 const TdsDropdownOption = TdsDropdownOption$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/tds-dropdown.js

@@ -1,4 +1,4 @@
-import { T as TdsDropdown$1, d as defineCustomElement$1 } from './p-47c3b5c5.js';
+import { T as TdsDropdown$1, d as defineCustomElement$1 } from './p-2523819c.js';
 
 const TdsDropdown = TdsDropdown$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/tds-slider.js

@@ -25,6 +25,7 @@ const TdsSlider$1 = /*@__PURE__*/ proxyCustomElement(class TdsSlider extends H {
         this.useSnapping = false;
         this.supposedValueSlot = -1;
         this.resizeObserverAdded = false;
+        this.resetEventListenerAdded = false;
         this.label = '';
         this.value = '0';
         this.min = '0';
@@ -302,27 +303,43 @@ const TdsSlider$1 = /*@__PURE__*/ proxyCustomElement(class TdsSlider extends H {
         }
         this.calculateThumbLeftFromValue(this.value);
         this.updateTrack();
+        // Only set the initial value once:
+        if (!this.initialValue) {
+            this.initialValue = this.value;
+        }
+    }
+    componentDidRender() {
+        // Only add the event listener once:
+        if (!this.resetEventListenerAdded) {
+            const form = this.host.closest('form');
+            form.addEventListener('reset', () => {
+                this.forceValueUpdate(this.initialValue);
+                this.reset();
+            });
+            this.resetEventListenerAdded = true;
+        }
     }
     render() {
-        return (h("div", { key: 'fd7d051192c33b19e8c68cbeaa50ea43149457bb', class: {
+        return (h("div", { key: '478b77234be1d2f650d972f633e0fa69373ddc15', class: {
                 'tds-slider-wrapper': true,
                 'read-only': this.readOnly,
-            } }, h("input", { key: 'd2fe02893f865f5791736cb5f05b5bcd2494e471', class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, value: this.value, disabled: this.disabled }), h("div", { key: '2d436a5654cb20923cd20ed61f9449bd0705edd2', class: {
+            } }, h("input", { key: '3df3c581b11ca0a4181335793eb67da17e7c677f', class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, value: this.value, disabled: this.disabled }), h("div", { key: 'c45af15623d4036cdbd1cc40637a724da7cd1886', class: {
                 'tds-slider': true,
                 'disabled': this.disabled,
                 'tds-slider-small': this.useSmall,
             }, ref: (el) => {
                 this.wrapperElement = el;
-            } }, h("label", { key: 'd9d444d15acabbbc23c7b7633e5312f405ff9120', class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { key: '2f0d0419138851724891e2ab04fef2f3b3e099f1', class: "tds-slider__input-values" }, h("div", { key: '7f23007c0f4a1aa6358ffa7c5aaae027d0927b63', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: 'df4a00a40c541b83aa8459dfcdaf22c348e2c80a', class: "tds-slider__controls" }, h("div", { key: '96cc419d369098137895b725f97a8fa3d7d50dfc', class: "tds-slider__control tds-slider__control-minus", onClick: (event) => this.stepLeft(event) }, h("tds-icon", { key: '09ed43c9f2fe81baeada6a07e4cba18027f04ba1', name: "minus", size: "16px" })))), h("div", { key: '402647683b57076bd4ac3ce3d754585a89a48e08', class: "tds-slider-inner" }, this.tickValues.length > 0 && (h("div", { key: 'd80c648eca47c7e52725e967a32fe4a4692a5729', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: '030106df49f12a55c1b32a9c1c257f449629644a', class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { key: 'fef7013f82a191c32bc3a4d297f5e10a4db127a1', class: "tds-slider__track", ref: (el) => {
+            } }, h("label", { key: '902c3a1ae75d70855bd8352324a8f6f3e75a6248', class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { key: 'd49c4c4e4e5c01ec7eb2e43765da935240066fc8', class: "tds-slider__input-values" }, h("div", { key: 'b29361d522e7db6f060554c8e21607b23ee900c9', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: '8f6dabc200858de423c434572a7ac03f3e9b1b16', class: "tds-slider__controls" }, h("div", { key: '5bb7d9ce16760b992b4aca73e403d517452b2118', class: "tds-slider__control tds-slider__control-minus", onClick: (event) => this.stepLeft(event) }, h("tds-icon", { key: '5966ddd50b6b6780ba7f9e64ea74061ddfc01d81', name: "minus", size: "16px" })))), h("div", { key: 'a893175a93cbff981f73223b8f803ba4fe70d7ba', class: "tds-slider-inner" }, this.tickValues.length > 0 && (h("div", { key: 'c3a85f6ad96e8b057c879c43b09dc1af402fa7c3', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: 'a167169954a6de1bb7b0695775ce15a795160a48', class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { key: '15d212b6e04b8200e1c8e07aeddc96ec46a3d11d', class: "tds-slider__track", ref: (el) => {
                 this.trackElement = el;
-            }, tabindex: this.disabled ? '-1' : '0' }, h("div", { key: '24a583182c45114d1e011bffef0f81f1e4f93a36', class: "tds-slider__track-fill", ref: (el) => {
+            }, tabindex: this.disabled ? '-1' : '0' }, h("div", { key: '208bcaae8fff5c5c0cf0cde765cdc2945c0dcaa1', class: "tds-slider__track-fill", ref: (el) => {
                 this.trackFillElement = el;
-            } }), h("div", { key: '3bea53237beb92f41264386fb5ac181d1e9966a4', class: "tds-slider__thumb", ref: (el) => {
+            } }), h("div", { key: '9cb48a58d4a4247336a5c8d58e365535b4b4a7f4', class: "tds-slider__thumb", ref: (el) => {
                 this.thumbElement = el;
-            }, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb() }, this.tooltip && (h("div", { key: '3ac44629cad3b03524602f9babe7fa4582b38660', class: "tds-slider__value" }, this.value, h("svg", { key: '5adbbcc274555d14454c5329f0eea8c072a3db2c', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '248b1f8521b89be4214631e411c0ba9c7bcc07a8', d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), h("div", { key: 'bc778a9ccd25a5229aa7685cc6c22ed5385b9d98', class: "tds-slider__thumb-inner", ref: (el) => {
+            }, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb() }, this.tooltip && (h("div", { key: '52b88d0a51bb16c9c87199bcefc6165c613504d1', class: "tds-slider__value" }, this.value, h("svg", { key: '0e57a96dac780b70351c4aac112ad21a93cc5293', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'bfb6441c14afc4699195c30652d0b63cbe696264', d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), h("div", { key: '60a2e5543226c9b283a16c9195d779e38e9ec77d', class: "tds-slider__thumb-inner", ref: (el) => {
                 this.thumbInnerElement = el;
-            } })))), this.useInput && (h("div", { key: '077ffffeb0986504a2c9fc4e1b08095ec689402c', class: "tds-slider__input-values" }, h("div", { key: '74a528a286e2b49a6739c5817cca8a0436b908b9', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: 'af2a647636c8eecba19637aa92ddda37adc52a1b', class: "tds-slider__input-field-wrapper" }, h("input", { key: '02701d15de6119994f7be13b9c9ac69ae6f2269b', size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, readOnly: this.readOnly, onBlur: (event) => this.updateSliderValueOnInputChange(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event), type: "number", min: this.min, max: this.max })))), this.useControls && (h("div", { key: 'ef215ef613c381601674d4bb7dbea583a3ddde2a', class: "tds-slider__controls" }, h("div", { key: '4e553194348daf32529c9c8cedc32b0686ac32ff', class: "tds-slider__control tds-slider__control-plus", onClick: (event) => this.stepRight(event) }, h("tds-icon", { key: 'd5d67ea7ff64ed19d28bd078acad56ebda742f93', name: "plus", size: "16px" })))))));
+            } })))), this.useInput && (h("div", { key: 'f2b33ee9181c5043ef9a317c65903c95952166f9', class: "tds-slider__input-values" }, h("div", { key: '64494cbab8e9502857e20f264db20395420914ca', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: '05d8485c2c386648b9d72c327b483977755ff746', class: "tds-slider__input-field-wrapper" }, h("input", { key: 'a1c78406290cdca1f24af959699823f656bb8bad', size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, readOnly: this.readOnly, onBlur: (event) => this.updateSliderValueOnInputChange(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event), type: "number", min: this.min, max: this.max })))), this.useControls && (h("div", { key: 'df1cd75920b192ec5e4ee490a66353ef72b09942', class: "tds-slider__controls" }, h("div", { key: '9b1fe4d993155f225025e8e7b265673f962e73da', class: "tds-slider__control tds-slider__control-plus", onClick: (event) => this.stepRight(event) }, h("tds-icon", { key: '785a35d6e6b9c3c033b3df66b0849541511f97f5', name: "plus", size: "16px" })))))));
     }
+    get host() { return this; }
     static get watchers() { return {
         "value": ["handleValueUpdate"]
     }; }

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

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-28ef5186.js';
 import { d as defineCustomElement$5 } from './p-e4d7c655.js';
-import { d as defineCustomElement$4 } from './p-47c3b5c5.js';
-import { d as defineCustomElement$3 } from './p-6dcd4146.js';
+import { d as defineCustomElement$4 } from './p-2523819c.js';
+import { d as defineCustomElement$3 } from './p-462b77e8.js';
 import { d as defineCustomElement$2 } from './p-18c1245b.js';
 
 const tableFooterCss = ":host{box-sizing:border-box;display:table-footer-group;height:var(--tds-spacing-element-48)}:host *{box-sizing:border-box}:host .tds-table__footer-row{background-color:var(--tds-table-footer-background);color:var(--tds-table-color)}:host .tds-table__footer-cell{padding:0 var(--tds-spacing-element-16)}:host .tds-table__footer-cell .tds-table__pagination{height:var(--tds-spacing-element-48);display:flex;align-items:center;justify-content:space-between}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector{display:flex;align-items:center}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector .rows-per-page,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector .rows-per-page{display:flex;align-items:center;margin-right:var(--tds-spacing-element-16)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__row-selector .rows-per-page p,:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector .rows-per-page p{margin-right:var(--tds-spacing-element-8)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);background-color:var(--tds-table-footer-page-selector-input-background);color:var(--tds-table-color);width:74px;height:30px;border:none;border-radius:var(--tds-spacing-element-4);transition:background-color 250ms ease;margin-right:var(--tds-spacing-element-4);padding-left:var(--tds-spacing-element-16)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:hover{background-color:var(--tds-table-footer-page-selector-input-background-hover)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input:disabled{color:var(--tds-table-footer-page-selector-input-color-disabled)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input--shake{animation:tds-shake-animation 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;transform:translate3d(0, 0, 0);backface-visibility:hidden;perspective:1000px}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-text{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding:1px 8px 0 0}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn{display:flex;justify-content:center;align-items:center;border:none;background-color:transparent;cursor:pointer;height:var(--tds-spacing-element-32);width:var(--tds-spacing-element-32);border-radius:var(--tds-spacing-element-4);transition:background-color 250ms ease;color:var(--tds-table-footer-page-selector-icon)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:hover{background-color:var(--tds-table-footer-btn-hover)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled{cursor:default;color:var(--tds-table-footer-page-selector-icon-disabled)}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn:disabled:hover{background-color:transparent}:host .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn-svg{height:var(--tds-spacing-element-20);width:var(--tds-spacing-element-20);fill:var(--tds-table-color)}:host(.tds-table--compact){height:var(--tds-spacing-element-32)}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination{height:var(--tds-spacing-element-32)}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination .tds-table__page-selector-input{height:var(--tds-spacing-element-24)}:host(.tds-table--compact) .tds-table__footer-cell .tds-table__pagination .tds-table__footer-btn{height:28px;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)}20%,80%{transform:translate3d(2px, 0, 0)}30%,50%,70%{transform:translate3d(-4px, 0, 0)}40%,60%{transform:translate3d(4px, 0, 0)}}tds-dropdown:focus-within::after{content:\"\";position:absolute;bottom:0;left:0;height:100%;width:100%;background-color:transparent;border-radius:var(--tds-spacing-element-4);pointer-events:none;outline:2px solid var(--tds-blue-400);outline-offset:-2px}";
@@ -142,7 +142,7 @@ const TdsTableFooter$1 = /*@__PURE__*/ proxyCustomElement(class TdsTableFooter e
         return (h(Host, { key: 'ef2cd69929908fa46254c82d0799c1b1a4ee52b3', class: {
                 'tds-table--compact': this.compactDesign,
                 'footer__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.getStyles() }, h("tr", { key: 'f18eb0b2a49d1d8df9dacc998138dae4e5f8d256', class: "tds-table__footer-row" }, h("td", { key: 'abb1f6f2971c9fa9b68bfb856882817406d0d87f', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: '8226ac0aee40b97cad90035ff9aba54b8365b960', class: "tds-table__pagination" }, h("div", { key: '9b604d5ccb7dbdac0cdb1bc96567d7b29d7fa250', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { key: '716b6830e891305611ceb6213bd696298dbcfe12', class: "rows-per-page" }, h("p", { key: 'd6b7bfff5262fcf0174f6b2d92dcfdedda97dfc2' }, "Rows per page"), h("tds-dropdown", { key: '9da6799f30172a1628a4630aa5474456f6351089', modeVariant: "secondary", id: "rows-dropdown", class: "page-dropdown", size: "xs", initialValue: `${this.rowsPerPageValues[0]}`, onTdsChange: (event) => this.rowsPerPageChange(event) }, this.rowsPerPageValues.map((value) => {
+            }, style: this.getStyles() }, h("tr", { key: 'f18eb0b2a49d1d8df9dacc998138dae4e5f8d256', class: "tds-table__footer-row" }, h("td", { key: 'abb1f6f2971c9fa9b68bfb856882817406d0d87f', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (h("div", { key: '8226ac0aee40b97cad90035ff9aba54b8365b960', class: "tds-table__pagination" }, h("div", { key: '9b604d5ccb7dbdac0cdb1bc96567d7b29d7fa250', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { key: '716b6830e891305611ceb6213bd696298dbcfe12', class: "rows-per-page" }, h("p", { key: 'd6b7bfff5262fcf0174f6b2d92dcfdedda97dfc2' }, "Rows per page"), h("tds-dropdown", { key: '9da6799f30172a1628a4630aa5474456f6351089', modeVariant: "secondary", id: "rows-dropdown", class: "page-dropdown", size: "xs", defaultValue: `${this.rowsPerPageValues[0]}`, onTdsChange: (event) => this.rowsPerPageChange(event) }, this.rowsPerPageValues.map((value) => {
             return (h("tds-dropdown-option", { value: `${value}` }, value));
         }))))), h("div", { key: '73c5849886a0144c22b79d31b92a607d8f794483', class: "tds-table__page-selector" }, h("input", { key: 'a297fd5b739df5d4353b045a25ba6e480dbad03e', 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: 'f6d1257c745638b2152843d52c494db23d26b2ca', class: "tds-table__footer-text" }, "of ", h("span", { key: '81b8c076cf322798709eafae1fad43b036127ada' }, this.pages), " pages"), h("button", { key: 'd9789d9d6ccd45f1d0c4e4d427c3ed1bb13e7440', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, h("tds-icon", { key: 'dac60e50f54fd71ae1d89e21e6140bbcbbda6680', name: "skip_backwards", size: "20px" })), h("button", { key: '39810bac01a38c71427192beea48257b7d2dd2b1', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, h("tds-icon", { key: '2987abbbdc7be2c7485d7bfcabcafe94983f5f54', name: "chevron_left", size: "20px" })), h("button", { key: '2252c555a816a4014c130b05ae70d2e25893f460', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, h("tds-icon", { key: 'a19c83f25082c82cdac308d3538c274bbce62826', name: "chevron_right", size: "20px" })), h("button", { key: 'e06ec885711559b6e7893d90ada5057292f624e0', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, h("tds-icon", { key: '6a8f4218a45cc5bdbb0c8b0711e802ce5f2dfed1', name: "skip_forward", size: "20px" })))))))));
     }