@scania/tegel 1.40.0-ts-strict-mode-beta.0 → 1.41.0-angular-patch-types-beta.0

package/dist/cjs/tds-step.cjs.entry.js

@@ -1,11 +1,8 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ca8040ad.js');
+var index = require('./index-CxAGLnpY.js');
 
 const stepCss = ":host{position:relative;display:table-cell}:host [role=listitem]{display:flex;justify-content:start;flex-direction:row;align-items:center;gap:8px}:host [role=listitem].text-below{flex-direction:column}:host [role=listitem].lg{padding:0 20px;font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls)}:host [role=listitem].lg .content-container{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;background-color:var(--tds-stepper-divider-line);height:36px;width:1px;top:40px;left:36px}:host [role=listitem].lg.horizontal::after{content:\" \";position:absolute;background-color:var(--tds-stepper-divider-line);height:1px;left:calc(50% + 24px);right:0;top:18px}:host [role=listitem].lg.horizontal::before{content:\" \";position:absolute;background-color:var(--tds-stepper-divider-line);height:1px;right:calc(50% + 24px);left:0;top:18px}:host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::after{content:\" \";position:absolute;background-color:var(--tds-stepper-divider-line);height:1px;top:16px;width:10px;left:auto;right:-10px}:host [role=listitem].lg.horizontal.text-aside:not(.hide-labels)::before{content:\" \";position:absolute;background-color:var(--tds-stepper-divider-line);height:1px;top:16px;width:10px;left:-10px;right:auto}:host [role=listitem].sm{padding:0 20px;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;background-color:var(--tds-stepper-divider-line);height:20px;width:1px;top:34px;left:32px}:host [role=listitem].sm.vertical::before{content:\" \";position:absolute;background-color:var(--tds-stepper-divider-line);height:20px;width:1px;top:34px;left:32px}:host [role=listitem].sm.horizontal::after{content:\" \";position:absolute;background-color:var(--tds-stepper-divider-line);height:1px;left:calc(50% + 16px + 8px);right:0;top:13px}:host [role=listitem].sm.horizontal::before{content:\" \";position:absolute;background-color:var(--tds-stepper-divider-line);height:1px;left:0;right:calc(50% + 24px);top:13px}:host [role=listitem].sm.horizontal.text-aside:not(.hide-labels)::after{content:\" \";position:absolute;background-color:var(--tds-stepper-divider-line);height:1px;top:13px;width:10px;left:auto;right:-10px}:host [role=listitem].sm.horizontal.text-aside:not(.hide-labels)::before{content:\" \";position:absolute;background-color:var(--tds-stepper-divider-line);height:1px;top:13px;width:10px;left:-10px;right:auto}:host [role=listitem] .content-container{border-radius:100px;border:1px solid var(--tds-stepper-icon-background);text-align:center;position:relative}:host [role=listitem] .content-container.error{border-color:var(--tds-stepper-icon-step-border-color-warning);color:var(--tds-stepper-icon-step-border-color-warning)}:host [role=listitem] .content-container.success{background-color:var(--tds-stepper-icon-step-border-color-success);border-color:var(--tds-stepper-icon-step-border-color-success);color:var(--tds-white)}:host [role=listitem] .content-container.current{background-color:var(--tds-stepper-background);color:var(--tds-stepper-color)}:host [role=listitem] .content-container.upcoming{background-color:transparent;border-color:var(--tds-stepper-label-border-color-upcoming);color:var(--tds-stepper-label-text-color-upcoming)}:host [role=listitem] .label{text-align:center}:host [role=listitem] .label.lg{font:var(--tds-detail-01);letter-spacing:var(--tds-detail-01-ls)}:host [role=listitem] .label.sm{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls)}:host [role=listitem] .label.upcoming{color:var(--tds-stepper-label-text-color-upcoming);opacity:var(--tds-stepper-label-text-opacity-upcoming)}:host(:last-of-type) [role=listitem].horizontal{padding-right:0}:host(:last-of-type) [role=listitem].sm::after,:host(:last-of-type) [role=listitem].lg::after{display:none}:host(:last-of-type) [role=listitem].sm.vertical::before{display:none}:host(:first-of-type) [role=listitem].horizontal{padding-left:0}:host(:first-of-type) [role=listitem].sm::before,:host(:first-of-type) [role=listitem].lg::before{display:none}";
-const TdsStepStyle0 = stepCss;
 
 const propToStateMap = {
     orientation: 'orientation',
@@ -16,19 +13,12 @@ const propToStateMap = {
 const TdsStep = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.index = undefined;
+        /** State of the Step */
         this.state = 'upcoming';
-        this.tdsAriaCurrent = undefined;
-        this.hideLabels = undefined;
-        this.size = undefined;
-        this.orientation = undefined;
-        this.labelPosition = undefined;
     }
     /* Needs to be onload to do this on any updates. */
     componentWillLoad() {
         this.stepperEl = this.el.closest('tds-stepper');
-        if (!this.stepperEl)
-            return;
         this.orientation = this.stepperEl.orientation;
         this.labelPosition = this.stepperEl.labelPosition;
         this.size = this.stepperEl.size;
@@ -48,10 +38,10 @@ const TdsStep = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '4da9583f2f8f406775789bb2ba2fb4a048bd2bb2' }, index.h("div", { key: '68552288702a78338767482726cc50c294c813c4', role: "listitem", "aria-disabled": this.state === 'upcoming' ? 'true' : 'false', "aria-current": this.tdsAriaCurrent, tabIndex: -1, "aria-label": `Step ${this.index}: ${this.state}`, class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, index.h("span", { key: '12da4b94879916c29a142ae2b1c9158132369242', class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (index.h("tds-icon", { "aria-hidden": "true", svgTitle: `tds-step-icon-${this.stepperId}`, class: 'tds-step-icon', name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (index.h("span", { "aria-hidden": "true", class: "index-container" }, this.index))), !this.hideLabels && (index.h("div", { key: 'b67fe88775ae01d9878bfea0ed65a5e89bcd096c', "aria-hidden": "true", class: `label ${this.size} ${this.state}` }, index.h("slot", { key: '63476ee55ea1577a09b3885dd287ef117c00fc3c', name: "label" }))))));
+        return (index.h(index.Host, { key: '871df74d99ed0bdf15fa82e0c2980b08b94735a8' }, index.h("div", { key: 'e108eb5e43390635fbd6020195cb7e6a4912c7c2', role: "listitem", "aria-disabled": this.state === 'upcoming' ? 'true' : 'false', "aria-current": this.tdsAriaCurrent, tabIndex: -1, "aria-label": `Step ${this.index}: ${this.state}`, class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, index.h("span", { key: '8940a00dcd0001d6d264aff8cbc9331d4d890d49', class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (index.h("tds-icon", { "aria-hidden": "true", svgTitle: `tds-step-icon-${this.stepperId}`, class: 'tds-step-icon', name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (index.h("span", { "aria-hidden": "true", class: "index-container" }, this.index))), !this.hideLabels && (index.h("div", { key: 'daa62f4d9347c571d214b1b9eb68b7d56418aed2', "aria-hidden": "true", class: `label ${this.size} ${this.state}` }, index.h("slot", { key: '68a20d3daded858cf1188f43747edb77ed2c9cbf', name: "label" }))))));
     }
     get el() { return index.getElement(this); }
 };
-TdsStep.style = TdsStepStyle0;
+TdsStep.style = stepCss;
 
 exports.tds_step = TdsStep;

package/dist/cjs/tds-stepper.cjs.entry.js

@@ -1,22 +1,29 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ca8040ad.js');
-const generateUniqueId = require('./generateUniqueId-e3fc9863.js');
+var index = require('./index-CxAGLnpY.js');
+var generateUniqueId = require('./generateUniqueId-ComXTAM_.js');
 
 const stepperCss = ":host [role=list]{display:flex;justify-content:space-evenly;min-width:100%}:host [role=list]:not(.text-position-aside){display:table;table-layout:fixed;width:100%;list-style:none}:host [role=list].vertical{height:100%;display:flex;flex-direction:column;justify-content:unset;gap:52px}:host [role=list].vertical.sm{gap:36px}:host [role=list].horizontal.text-position-aside{justify-content:unset}";
-const TdsStepperStyle0 = stepperCss;
 
 const TdsStepper = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.internalTdsPropsChange = index.createEvent(this, "internalTdsPropsChange", 6);
+        /** The orientation the Steps */
         this.orientation = 'horizontal';
+        /** Text position, only available on a direction: horizontal */
         this.labelPosition = 'below';
+        /** Size of the component and it's children. */
         this.size = 'lg';
+        /** Hides the label for the child components if true. */
         this.hideLabels = false;
+        /** ID used for internal Stepper functionality and events, must be unique.
+         *
+         * **NOTE**: If you're listening for Stepper events, you need to set this ID yourself to identify the Stepper,
+         * as the default ID is random and will be different every time.
+         */
         this.stepperId = generateUniqueId.generateUniqueId();
+        /** Label for the stepper component, for screen reader users */
         this.tdsAriaLabel = 'Progress steps';
     }
     componentWillLoad() {
@@ -63,6 +70,6 @@ const TdsStepper = class {
         "hideLabels": ["handleHideLabelsChange"]
     }; }
 };
-TdsStepper.style = TdsStepperStyle0;
+TdsStepper.style = stepperCss;
 
 exports.tds_stepper = TdsStepper;

package/dist/cjs/tds-table-body-input-wrapper.cjs.entry.js

@@ -1,16 +1,14 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ca8040ad.js');
+var index = require('./index-CxAGLnpY.js');
 
 const tableBodyInputWrapperCss = ":host{position:relative}:host(.focused-input-wrapper) tds-icon{display:inline-block}:host(.show-icon) ::slotted(input){padding-right:var(--tds-spacing-element-24)}:host(:hover) tds-icon{display:inline-block}:host(:hover) ::slotted(input:not(:focus)){background-color:var(--tds-table-input-background-hover)}tds-icon.edit-icon{display:none;position:absolute;right:10px;top:1px;pointer-events:none;cursor:pointer}::slotted(input){box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);padding-left:var(--tds-spacing-element-16);padding-right:var(--tds-spacing-element-16);color:var(--tds-table-color);background-color:transparent;height:48px;border-radius:0;border:0;border-bottom:2px solid transparent;width:100%;cursor:pointer}::slotted(input)::placeholder{color:var(--tds-table-color)}::slotted(input:disabled){background-color:var(--tds-table-input-background-disabled)}::slotted(input:focus){outline:none;background-color:var(--tds-table-input-background-focus);border-bottom:2px solid var(--tds-text-field-bar)}:host(.tds-table__compact) ::slotted(input){height:32px;}";
-const TdsTableBodyInputWrapperStyle0 = tableBodyInputWrapperCss;
 
 const relevantTableProps = ['compactDesign'];
 const TdsTableBodyInputWrapper = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /** Controls if the edit icon is shown */
         this.showIcon = true;
         this.renderSlot = true;
         this.inputFocused = false;
@@ -90,7 +88,7 @@ const TdsTableBodyInputWrapper = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '332c2ebf290f802f6b8067a1b7b0754cbca2b9aa', class: {
+        return (index.h(index.Host, { key: '1ebf0bf16490030ce20a99e1234e68d81430eaf8', class: {
                 'focused-input-wrapper': this.inputFocused,
                 'show-icon': this.showIcon,
                 'tds-table__compact': this.compactDesign,
@@ -98,6 +96,6 @@ const TdsTableBodyInputWrapper = class {
     }
     get host() { return index.getElement(this); }
 };
-TdsTableBodyInputWrapper.style = TdsTableBodyInputWrapperStyle0;
+TdsTableBodyInputWrapper.style = tableBodyInputWrapperCss;
 
 exports.tds_table_body_input_wrapper = TdsTableBodyInputWrapper;

package/dist/cjs/tds-table-body-row-expandable.cjs.entry.js

@@ -1,12 +1,9 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ca8040ad.js');
-const generateUniqueId = require('./generateUniqueId-e3fc9863.js');
+var index = require('./index-CxAGLnpY.js');
+var generateUniqueId = require('./generateUniqueId-ComXTAM_.js');
 
 const tableBodyRowExpandableCss = ":host{box-sizing:border-box;display:contents}:host *{box-sizing:border-box}:host .tds-table__row,:host .tds-table__row-extend{display:table-row;border-bottom:1px solid var(--tds-table-divider);background-color:var(--tds-table-body-row-background);transition:background-color 200ms ease;color:var(--tds-table-color)}:host .tds-table__row--expanded{border-bottom:none}:host .tds-table__row:hover,:host .tds-table__row-extend:hover{background-color:var(--tds-table-body-row-background-hover)}:host .tds-table__expand-control-container{display:flex;justify-content:center;align-items:center;height:46px;cursor:pointer;padding:0 16px;position:relative}:host .tds-table__expand-control-container .tds-table__expand-input{all:unset;top:0;left:0;width:100%;height:100%;position:absolute;cursor:pointer}:host .tds-table__expand-control-container .tds-table__expand-input:focus{outline:2px solid var(--tds-focus-outline-color);box-shadow:0 0 0 1px var(--tds-white);outline-offset:1px;z-index:1}:host .tds-table__expand-control-container .tds-expendable-row-icon{height:16px;width:16px;transition:transform 200ms ease;transform:rotate(0)}:host .tds-table__row-expand{display:none;transition:background-color 200ms ease}:host .tds-table__row-expand--expanded{border-bottom:1px solid var(--tds-table-divider)}:host .tds-table__row-expand .tds-table__cell-expand{max-width:1px;overflow:auto;padding:16px 16px 16px 66px;color:var(--tds-table-color)}:host .tds-table__row-expand .tds-table__cell-expand--overflow-visible{overflow:visible}:host .tds-table__row-expand .tds-table__cell-expand--overflow-hidden{overflow:hidden}:host(.tds-table__row-expand--active) .tds-table__row{background-color:var(--tds-table-body-row-background-selected)}:host(.tds-table__row-expand--active) .tds-table__expand-control-container .tds-expendable-row-icon{transform:rotate(180deg)}:host(.tds-table__row-expand--active) .tds-table__row-expand{background-color:var(--tds-table-body-row-background-selected);display:table-row}:host(.tds-table__compact) .tds-table__expand-control-container{height:30px}:host(.tds-table__compact) .tds-table__row-expand .tds-table__cell-expand{padding:8px 16px 8px 66px}:host(.tds-table__row--hidden){display:none}:host(.tds-table--divider) .tds-table__cell--expand{border-right:1px solid var(--tds-table-divider)}";
-const TdsTableBodyRowExpandableStyle0 = tableBodyRowExpandableCss;
 
 const relevantTableProps = [
     'verticalDividers',
@@ -19,12 +16,19 @@ const TdsTableBodyRowExpandable = class {
         index.registerInstance(this, hostRef);
         this.internalTdsRowExpanded = index.createEvent(this, "internalTdsRowExpanded", 6);
         this.tdsChange = index.createEvent(this, "tdsChange", 6);
+        /** In case that automatic count of columns does not work, user can manually set this one.
+         *  Take in mind that expandable control is column too */
         this.colSpan = null;
+        /** ID for the table row. Randomly generated if not specified. */
         this.rowId = generateUniqueId.generateUniqueId();
-        this.expanded = undefined;
+        /** Controls the overflow behavior of the expandable row content */
         this.overflow = 'auto';
+        /** Sets isExpanded state to true or false internally */
+        /** Enables auto-collapse of other expandable rows when one row is expanded */
         this.autoCollapse = false;
+        /** Aria label for the expand button, providing an accessible description */
         this.tdsAriaLabelExpandButton = '';
+        /** Sets isExpanded state to true or fals internally */
         this.isExpanded = false;
         this.tableId = '';
         this.columnsNumber = null;
@@ -75,30 +79,24 @@ const TdsTableBodyRowExpandable = class {
         this.tdsChange.emit({ rowId: this.rowId, isExpanded: this.isExpanded, tableId: this.tableId });
     }
     connectedCallback() {
-        var _a;
         /* if user did set a prop we use that as default behaviour */
         if (this.expanded !== undefined) {
             this.isExpanded = this.expanded;
         }
         this.tableEl = this.host.closest('tds-table');
-        this.tableId = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a.tableId;
+        this.tableId = this.tableEl.tableId;
     }
     componentWillLoad() {
         relevantTableProps.forEach((tablePropName) => {
-            var _a;
-            this[tablePropName] = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a[tablePropName];
+            this[tablePropName] = this.tableEl[tablePropName];
         });
     }
     componentWillRender() {
-        var _a;
         if (this.colSpan !== null) {
             this.columnsNumber = this.colSpan;
         }
         else {
-            const header = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a.querySelector('tds-table-header');
-            if (header) {
-                this.columnsNumber = header.childElementCount + 1;
-            }
+            this.columnsNumber = this.tableEl.querySelector('tds-table-header').childElementCount + 1;
         }
     }
     sendValue() {
@@ -110,33 +108,32 @@ const TdsTableBodyRowExpandable = class {
         this.sendValue();
     }
     render() {
-        var _a;
-        return (index.h(index.Host, { key: 'd818a7b62472e7e6811b2aa6c22332e18d567d6d', class: {
+        return (index.h(index.Host, { key: '3d289d00082c284257728cec4f0ddcfc63dda863', class: {
                 'tds-table__row': true,
                 'tds-table__row-expand--active': this.isExpanded,
                 'tds-table__compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
-            } }, index.h("tr", { key: '0efc401cb4cd6687aa732200990b685acb84000b', id: `expandable-content-${this.rowId}`, class: {
+            } }, index.h("tr", { key: '246ee336a3ab871346e1fcf81f02109121dc9657', id: `expandable-content-${this.rowId}`, class: {
                 'tds-table__row': true,
                 'tds-table__row--expanded': this.isExpanded,
-            }, part: "row" }, index.h("td", { key: 'fae9736c8db81cfa7e7df618ebd03953b58c9178', class: {
+            }, part: "row" }, index.h("td", { key: 'b727b78965a4bdf0b6cf8ff7e8460d3dfae8327e', class: {
                 'tds-table__cell-expand': true,
-            } }, index.h("label", { key: '325036919c99275a30386ec075fc2eb828702c8f', class: "tds-table__expand-control-container" }, index.h("input", { key: '43e62f1d60a19801a526931ec4a9f0c5f7e98e6b', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `expandable-content-${this.rowId}`, "aria-label": this.tdsAriaLabelExpandButton }), index.h("span", { key: '0bea7d5d977ab0b2517ec5595a2b8640c6ce591b', class: "tds-expendable-row-icon" }, index.h("svg", { key: 'e7b63e3a6eb1d418f43259b25b84205abaa75bd7', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, index.h("path", { key: 'ff0e7f089fd0c1c2cfc5cc4339cdaab4e7f9e275', "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" }))))), index.h("slot", { key: '9bfd6e772f1a56cbcb5ada2fe9dd59c40e975faf' })), index.h("tr", { key: 'b3f61ca1d940ad529a44f283b81b43aefacc394d', class: {
+            } }, index.h("label", { key: 'c878be3429a3145b62b242f2e3d9c90ec0a74257', class: "tds-table__expand-control-container" }, index.h("input", { key: '6b99ef165e359012f83f7e298d9f83319493fc52', class: "tds-table__expand-input", type: "checkbox", onChange: (event) => this.onChangeHandler(event), checked: this.isExpanded, "aria-expanded": this.isExpanded ? 'true' : 'false', "aria-controls": `expandable-content-${this.rowId}`, "aria-label": this.tdsAriaLabelExpandButton }), index.h("span", { key: 'ec9e1aefc553362c0c3e15cb99118a9c2dfffd04', class: "tds-expendable-row-icon" }, index.h("svg", { key: '84b3270e5f1bfc7671adcea34d862fe0485f40a8', fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, index.h("path", { key: 'fc04209a4a2d35c19c7c74875c0ab302077abbf2', "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" }))))), index.h("slot", { key: '0c16341da217fbe920241a97b179335cb61e2364' })), index.h("tr", { key: 'a83ca5c30ec4945dfee096a408db4d1d240d3643', class: {
                 'tds-table__row-expand': true,
                 'tds-table__row-expand--expanded': this.isExpanded,
-            }, part: "expand-row" }, index.h("td", { key: '6635855ce743fa01d531119d90d3491ee416751b', class: {
+            }, part: "expand-row" }, index.h("td", { key: '2fcafe17b33ce39b5e1a3b149434006a70f6b8f3', class: {
                 'tds-table__cell-expand': true,
                 'tds-table__cell-expand--overflow-hidden': this.overflow === 'hidden',
                 'tds-table__cell-expand--overflow-visible': this.overflow === 'visible',
-            }, part: "expand-row-cell", colSpan: (_a = this.columnsNumber) !== null && _a !== void 0 ? _a : undefined }, index.h("div", { key: '0b99435f7c84aa90155ab7229921bef06e90373b', style: {
+            }, part: "expand-row-cell", colSpan: this.columnsNumber }, index.h("div", { key: 'b696b23d127e32a8017692b03de1ce8ee9497dcb', style: {
                 overflow: this.overflow,
-            } }, index.h("slot", { key: 'd8e730bcfabe84c4a370b111defa1aa1584f4b96', name: "expand-row" }))))));
+            } }, index.h("slot", { key: 'e64e00778fd7c85618ae4cbc19d232e2acb873b5', name: "expand-row" }))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
         "expanded": ["watchExpanded"]
     }; }
 };
-TdsTableBodyRowExpandable.style = TdsTableBodyRowExpandableStyle0;
+TdsTableBodyRowExpandable.style = tableBodyRowExpandableCss;
 
 exports.tds_table_body_row_expandable = TdsTableBodyRowExpandable;

package/dist/cjs/tds-table-body-row.cjs.entry.js

@@ -1,11 +1,8 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ca8040ad.js');
+var index = require('./index-CxAGLnpY.js');
 
 const tableBodyRowCss = ":host(.tds-table__row){box-sizing:border-box;display:table-row;border-bottom:1px solid var(--tds-table-divider);background-color:var(--tds-table-body-row-background);transition:background-color 200ms ease;color:var(--tds-table-color)}:host(.tds-table__row) *{box-sizing:border-box}:host(.tds-table__row) .tds-table__body-cell--checkbox{min-width:48px;width:48px;padding:0}:host(.tds-table__row:hover){border-bottom:1px solid var(--tds-table-divider-hover)}:host(.tds-table__row:hover){background-color:var(--tds-table-body-row-background-hover)}:host(.tds-table__row--selected){background-color:var(--tds-table-body-row-background-selected)}:host(.tds-table__row--selected:hover){background-color:var(--tds-table-body-row-background-selected-hover)}:host(.tds-table__row--hidden){display:none}:host(.tds-table__row--expended){width:100%;background-color:pink}:host .tds-form-label--table{width:100%;height:48px;display:flex;justify-content:center;align-items:center;cursor:pointer}:host(.tds-table__compact) .tds-form-label--table{height:32px}:host(.tds-table--divider) .tds-table__body-cell--checkbox{border-right:1px solid var(--tds-table-divider)}:host(.tds-table__row--clickable){cursor:pointer}:host(.tds-table__row--clickable:focus-visible){outline:var(--focus-outline, 2px solid blue)}";
-const TdsTableBodyRowStyle0 = tableBodyRowCss;
 
 const relevantTableProps = [
     'multiselect',
@@ -17,8 +14,11 @@ const TdsTableBodyRow = class {
         index.registerInstance(this, hostRef);
         this.tdsSelect = index.createEvent(this, "tdsSelect", 6);
         this.tdsClick = index.createEvent(this, "tdsClick", 6);
+        /** Marks the row as selected, used for multiselect table. */
         this.selected = false;
+        /** Marks the row as disabled, used for multiselect table. */
         this.disabled = false;
+        /** Makes the row clickable and tabbable for accessibility purposes. */
         this.clickable = false;
         this.multiselect = false;
         this.mainCheckBoxStatus = false;
@@ -28,19 +28,17 @@ const TdsTableBodyRow = class {
         this.tableId = '';
     }
     async handleCheckboxChange(event) {
-        var _a;
         this.selected = event.detail.checked;
         this.tdsSelect.emit({
             tableId: this.tableId,
             checked: this.selected,
-            selectedRows: await ((_a = this.tableEl) === null || _a === void 0 ? void 0 : _a.getSelectedRows()),
+            selectedRows: await this.tableEl.getSelectedRows(),
         });
     }
     handleRowClick(e) {
-        var _a, _b, _c;
         if (!this.clickable)
             return;
-        const rowIndex = Array.from((_c = (_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.children) !== null && _c !== void 0 ? _c : []).indexOf(this.host);
+        let rowIndex = Array.from(this.host.parentElement.children).indexOf(this.host);
         this.tdsClick.emit({
             event: e,
             tableId: this.tableId,
@@ -73,22 +71,21 @@ const TdsTableBodyRow = class {
     componentWillLoad() {
         if (this.tableEl) {
             relevantTableProps.forEach((tablePropName) => {
-                var _a;
-                this[tablePropName] = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a[tablePropName];
+                this[tablePropName] = this.tableEl[tablePropName];
             });
         }
     }
     render() {
-        return (index.h(index.Host, { key: '377d16a55b6c2cb87940ee6ec8629e71dde6ad17', tabindex: this.clickable ? '0' : null, class: {
+        return (index.h(index.Host, { key: '6bf3fee7c066bc4686c9aa0ecba45c04ca7b2aae', tabindex: this.clickable ? '0' : null, class: {
                 'tds-table__row': true,
                 'tds-table__row--selected': this.selected,
                 'tds-table__compact': this.compactDesign,
                 'tds-table--divider': this.verticalDividers,
                 'tds-table__row--clickable': this.clickable,
-            }, onClick: (e) => this.handleRowClick(e), onKeyDown: (e) => this.handleKeyDown(e), role: "row" }, this.multiselect && (index.h("td", { key: 'a65e6eed2e09e49c80c5f25312613c874a3d3b1a', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, index.h("tds-checkbox", { key: '37b7bb583a756031ee86c57015523fdb659d683d', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), index.h("slot", { key: '35cdd94e92fc239d756b4ba240f10cd1e1914512' })));
+            }, onClick: (e) => this.handleRowClick(e), onKeyDown: (e) => this.handleKeyDown(e), role: "row" }, this.multiselect && (index.h("td", { key: '845e64408b938254887c7ec840eae48fc4ed01e3', class: "tds-table__body-cell tds-table__body-cell--checkbox tds-form-label tds-form-label--table" }, index.h("tds-checkbox", { key: '817ef05632a9b2704148a0c9ce190b360b9cec3b', onTdsChange: (event) => this.handleCheckboxChange(event), checked: this.selected, disabled: this.disabled }))), index.h("slot", { key: '50cf1a5aeae24aaceeb813f432abe8e75ad53857' })));
     }
     get host() { return index.getElement(this); }
 };
-TdsTableBodyRow.style = TdsTableBodyRowStyle0;
+TdsTableBodyRow.style = tableBodyRowCss;
 
 exports.tds_table_body_row = TdsTableBodyRow;

package/dist/cjs/tds-table-body.cjs.entry.js

@@ -1,11 +1,8 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ca8040ad.js');
+var index = require('./index-CxAGLnpY.js');
 
 const tableBodyCss = ":host,tds-table-body{box-sizing:border-box;display:table-row-group}:host *,tds-table-body *{box-sizing:border-box}:host .tds-table__info-message,tds-table-body .tds-table__info-message{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:table-cell;box-sizing:border-box;color:var(--tds-table-color);padding:var(--tds-spacing-element-16);min-width:192px;vertical-align:top;background-color:transparent;transition:background-color 200ms ease}tds-table-body.tds-table--zebra-mode-rows-odd tds-table-body-row:nth-child(odd){background-color:var(--tds-table-zebra-mode-backround)}tds-table-body.tds-table--zebra-mode-rows-odd tds-table-body-row:nth-child(odd):hover{background-color:var(--tds-table-body-row-background-hover)}tds-table-body.tds-table--zebra-mode-rows-even tds-table-body-row:nth-child(even){background-color:var(--tds-table-zebra-mode-backround)}tds-table-body.tds-table--zebra-mode-rows-even tds-table-body-row:nth-child(even):hover{background-color:var(--tds-table-body-row-background-hover)}tds-table-body.tds-table--zebra-mode-columns-odd tds-body-cell:nth-child(odd){background-color:var(--tds-table-zebra-mode-backround)}tds-table-body.tds-table--zebra-mode-columns-odd tds-body-cell.tds-table__body-cell--hover:nth-child(odd){background-color:var(--tds-table-body-cell-background-hover)}tds-table-body.tds-table--zebra-mode-columns-even tds-body-cell:nth-child(even){background-color:var(--tds-table-zebra-mode-backround)}tds-table-body.tds-table--zebra-mode-columns-even tds-body-cell.tds-table__body-cell--hover:nth-child(even){background-color:var(--tds-table-body-cell-background-hover)}tds-table-body.tds-table--zebra-mode-columns-even tds-table-body-row:hover tds-body-cell,tds-table-body.tds-table--zebra-mode-columns-odd tds-table-body-row:hover tds-body-cell{background-color:transparent}";
-const TdsTableBodyStyle0 = tableBodyCss;
 
 const relevantTableProps = [
     'multiselect',
@@ -15,20 +12,19 @@ const relevantTableProps = [
 const TdsTableBody = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.bodyCheckBoxClicked = () => {
-            const numberOfRows = this.host.getElementsByClassName('tds-table__row').length;
-            const numberOfRowsSelected = this.host.getElementsByClassName('tds-table__row--selected').length;
-            this.mainCheckboxStatus = numberOfRows === numberOfRowsSelected;
-        };
         this.multiselect = false;
         this.enablePaginationTableBody = false;
         this.expandableRows = false;
         this.multiselectArray = [];
-        this.multiselectArrayJSON = undefined;
         this.mainCheckboxStatus = false;
         this.columnsNumber = 0;
         this.zebraMode = 'none';
         this.tableId = '';
+        this.bodyCheckBoxClicked = () => {
+            const numberOfRows = this.host.getElementsByClassName('tds-table__row').length;
+            const numberOfRowsSelected = this.host.getElementsByClassName('tds-table__row--selected').length;
+            this.mainCheckboxStatus = numberOfRows === numberOfRowsSelected;
+        };
     }
     internalTdsPropChangeListener(event) {
         if (this.tableId === event.detail.tableId) {
@@ -47,20 +43,16 @@ const TdsTableBody = class {
         this.bodyCheckBoxClicked();
     }
     connectedCallback() {
-        var _a;
         this.tableEl = this.host.closest('tds-table');
-        this.tableId = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a.tableId;
+        this.tableId = this.tableEl.tableId;
     }
     componentWillLoad() {
         relevantTableProps.forEach((tablePropName) => {
-            var _a;
-            this[tablePropName] = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a[tablePropName];
+            this[tablePropName] = this.tableEl[tablePropName];
         });
     }
     componentWillRender() {
-        var _a, _b;
-        const headrColumn = (_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('tds-table-header');
-        const headerColumnsNo = (_b = headrColumn === null || headrColumn === void 0 ? void 0 : headrColumn.children.length) !== null && _b !== void 0 ? _b : 0;
+        const headerColumnsNo = this.host.parentElement.querySelector('tds-table-header').children.length;
         // multiselect and expended features requires one extra column for controls...
         if (this.multiselect || this.expandableRows) {
             this.columnsNumber = headerColumnsNo + 1;
@@ -70,15 +62,15 @@ const TdsTableBody = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '80e470d85ca46b398d9254bbcf84865b65656c7c', "data-selected-rows": this.multiselectArrayJSON, class: {
+        return (index.h(index.Host, { key: 'f9472ae9b1dcad43aab101811dfe858dea4851e9', "data-selected-rows": this.multiselectArrayJSON, class: {
                 'tds-table--zebra-mode-rows-odd': this.zebraMode === 'rows-odd',
                 'tds-table--zebra-mode-rows-even': this.zebraMode === 'rows-even',
                 'tds-table--zebra-mode-columns-odd': this.zebraMode === 'columns-odd',
                 'tds-table--zebra-mode-columns-even': this.zebraMode === 'columns-even',
-            } }, index.h("slot", { key: 'ef1c5c7a13129ff08d48d568088c05e2416b8284' })));
+            } }, index.h("slot", { key: '61a0ec649d2f7f51ca386c46335a6ae018c993d0' })));
     }
     get host() { return index.getElement(this); }
 };
-TdsTableBody.style = TdsTableBodyStyle0;
+TdsTableBody.style = tableBodyCss;
 
 exports.tds_table_body = TdsTableBody;

package/dist/cjs/tds-table-footer.cjs.entry.js

@@ -1,11 +1,8 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ca8040ad.js');
+var index = require('./index-CxAGLnpY.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)}}";
-const TdsTableFooterStyle0 = tableFooterCss;
 
 const relevantTableProps = [
     'compactDesign',
@@ -18,6 +15,25 @@ const TdsTableFooter = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.tdsPagination = index.createEvent(this, "tdsPagination", 7);
+        /** Enable pagination and show pagination controls  */
+        this.pagination = false;
+        /** Sets the pagination number. */
+        this.paginationValue = 1;
+        /** Enable rows per page dropdown */
+        this.rowsperpage = true;
+        /** Set available rows per page values */
+        this.rowsPerPageValues = [10, 25, 50];
+        /** Sets the number of pages. */
+        this.pages = null;
+        /** <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;
+        /** State that memorize number of columns to display colSpan correctly - set from parent level */
+        this.columnsNumber = 0;
+        /* Sets the footer to use compact design. */
+        this.compactDesign = false;
+        this.tableId = '';
+        this.horizontalScrollWidth = null;
+        this.rowsPerPageValue = this.rowsPerPageValues[0];
         this.emitTdsPagination = () => {
             if (this.rowsperpage) {
                 this.tdsPagination.emit({
@@ -45,7 +61,7 @@ const TdsTableFooter = class {
         this.nextPage = () => {
             /** If pages and greater or equal to the number of pages, increase pagination value.
              * This is to not get above the number of pages in pagination value.  */
-            if (this.pages && this.paginationValue <= this.pages) {
+            if (this.paginationValue <= this.pages) {
                 this.paginationValue++;
             }
             this.emitTdsPagination();
@@ -61,18 +77,6 @@ const TdsTableFooter = class {
             this.emitTdsPagination();
             this.storeLastCorrectValue(this.paginationValue);
         };
-        this.pagination = false;
-        this.paginationValue = 1;
-        this.rowsperpage = true;
-        this.rowsPerPageValues = [10, 25, 50];
-        this.pages = 0;
-        this.cols = null;
-        this.columnsNumber = 0;
-        this.compactDesign = false;
-        this.lastCorrectValue = undefined;
-        this.tableId = '';
-        this.horizontalScrollWidth = null;
-        this.rowsPerPageValue = this.rowsPerPageValues[0];
     }
     internalTdsPropChangeListener(event) {
         if (this.tableId === event.detail.tableId) {
@@ -87,19 +91,16 @@ const TdsTableFooter = class {
         }
     }
     connectedCallback() {
-        var _a;
         this.tableEl = this.host.closest('tds-table');
-        this.tableId = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a.tableId;
+        this.tableId = this.tableEl.tableId;
     }
     componentWillLoad() {
-        var _a, _b, _c;
         relevantTableProps.forEach((tablePropName) => {
-            var _a;
-            this[tablePropName] = (_a = this.tableEl) === null || _a === void 0 ? void 0 : _a[tablePropName];
+            this[tablePropName] = this.tableEl[tablePropName];
         });
         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;
+        const numberOfColumns = this.host.parentElement.querySelector('tds-table-header').childElementCount;
         if (this.cols) {
             this.columnsNumber = this.cols;
         }
@@ -140,19 +141,15 @@ const TdsTableFooter = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'ccd4af0d18ff3abac93113618be574eaf4dfeccf', class: {
+        return (index.h(index.Host, { key: 'd064beda251b663ad3afccebc98fb4718e3f1d09', class: {
                 'tds-table--compact': this.compactDesign,
                 'footer__horizontal-scroll': !!this.horizontalScrollWidth,
-            }, style: this.getStyles() }, index.h("tr", { key: '83352ad6041939ce7c7faecf0a3357254bf70d20', class: "tds-table__footer-row" }, index.h("td", { key: '1c3448a74dedf1523c37598a9cdec1c119d32e29', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (index.h("div", { key: '49e152077961293d0d61a7ec2f7e6dfe4441812e', class: "tds-table__pagination" }, index.h("div", { key: '9d1bb01cbb816deaa6cf1f93c9c851f137dca9cf', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (index.h("div", { key: '5f8609d37e29b4303bd21146113bfc7133a29df8', class: "rows-per-page" }, index.h("p", { key: '90d62b23f416cfb6544b50a21b83dc0e6de030be' }, "Rows per page"), index.h("tds-dropdown", { key: '653df3963055fddacad426f82d204f91a98749f4', modeVariant: "secondary", id: "rows-dropdown", class: "page-dropdown", size: "xs", defaultValue: `${this.rowsPerPageValues[0]}`, onTdsChange: (event) => this.rowsPerPageChange(event) }, this.rowsPerPageValues.map((value) => {
+            }, style: this.getStyles() }, index.h("tr", { key: '02d6c97e498e44ad70c86fd08cc665a8b89e2a07', class: "tds-table__footer-row" }, index.h("td", { key: 'e9d64ea0f3be240867d886973a40c557fe9899da', class: "tds-table__footer-cell", colSpan: this.columnsNumber }, this.pagination && (index.h("div", { key: '4a8f3f921a4e103a1a14e368a4702cd8f6ceb18b', class: "tds-table__pagination" }, index.h("div", { key: 'c536fb9916071677bf20f033ebb184d469aa0774', class: "tds-table__row-selector" }, this.rowsperpage && ((_a = this.rowsPerPageValues) === null || _a === void 0 ? void 0 : _a.length) > 0 && (index.h("div", { key: '5a935d6c92a574e1ea0a081e955916526ec9da45', class: "rows-per-page" }, index.h("p", { key: 'ae9f908bc6803a814236a56e5801857a1989df54' }, "Rows per page"), index.h("tds-dropdown", { key: '1bcac2201accc7d613250c8f38b77ddc04bfb463', modeVariant: "secondary", id: "rows-dropdown", class: "page-dropdown", size: "xs", defaultValue: `${this.rowsPerPageValues[0]}`, onTdsChange: (event) => this.rowsPerPageChange(event) }, this.rowsPerPageValues.map((value) => {
             return (index.h("tds-dropdown-option", { value: `${value}` }, value));
-        }))))), index.h("div", { key: '0990d81388b9f835edeb24c8cb17a6fb4d11caf9', class: "tds-table__page-selector" }, index.h("input", { key: 'b9f888009f0f0bfc38b5476c328bb92ae4c0962f', 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 }), index.h("p", { key: '86f6a581d1f5fe50ea2106821ff4afa6dd479387', class: "tds-table__footer-text" }, "of ", index.h("span", { key: '91872a9e6eb05e4e1f540d2a6d203cc2e3fd7a27' }, this.pages), " pages"), index.h("button", { key: '03a354dde544ac8f6e622f6543b69278896963d3', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, index.h("tds-icon", { key: '6d80869e6cf2eba108b141113dc3ba3fe31e0a6a', name: "skip_backwards", size: "20px" })), index.h("button", { key: '0a95763fc3da9a93ca109dcf668ce8c5c5bd0e89', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, index.h("tds-icon", { key: '43e2b68e24844eb964b63a3fb291921edbcd079a', name: "chevron_left", size: "20px" })), index.h("button", { key: 'c61b81dc60bd58383055c5d98b311bc74b593518', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, index.h("tds-icon", { key: 'cdffb08f3cf5a72c98c6a526477add3feb4c5837', name: "chevron_right", size: "20px" })), index.h("button", { key: 'f6dc3bc7fc879bd205abce12dd235dbeaa767c5f', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, index.h("tds-icon", { key: '2c302a54f07077eb3dd3b9665aee6276caceab62', name: "skip_forward", size: "20px" })))))))));
+        }))))), index.h("div", { key: '08f90bbe4dd64812b95de4be540c65afea1a5d7c', class: "tds-table__page-selector" }, index.h("input", { key: '4e780ad0a24f39df03edc044d110b6278589a61a', 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 }), index.h("p", { key: '538690df3c6bef86bf14fe8b7c967b89257e5cb7', class: "tds-table__footer-text" }, "of ", index.h("span", { key: 'ec38ac0b07103bea8aec7ba3e7e88d73c2a756cb' }, this.pages), " pages"), index.h("button", { key: 'f196e4b87144a6e66a6a3d0451ca0d4ba32bd1af', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.firstPage() }, index.h("tds-icon", { key: '80041ff46837e3ba072b740cf79d1cf9bbf21b63', name: "skip_backwards", size: "20px" })), index.h("button", { key: 'c51d570daeb97dbe2cae4e344eb51b97d88bb10a', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue <= 1, onClick: () => this.previousPage() }, index.h("tds-icon", { key: 'bc02c69dc75f412fac63d952458d0ea06530593c', name: "chevron_left", size: "20px" })), index.h("button", { key: 'df29a47121d892642b24533a0e132d1f2d13d545', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.nextPage() }, index.h("tds-icon", { key: 'b2ae455a7a62c647f5c79cfc8f41bcae4b41b12d', name: "chevron_right", size: "20px" })), index.h("button", { key: 'd333d73217b7ed86841810bd342e2dd3152ef560', type: "button", class: "tds-table__footer-btn", disabled: this.paginationValue >= this.pages, onClick: () => this.lastPage() }, index.h("tds-icon", { key: '9d94abd5c17bc50b6a33c21dcc74b2689d514f2a', name: "skip_forward", size: "20px" })))))))));
     }
     get host() { return index.getElement(this); }
 };
-TdsTableFooter.style = TdsTableFooterStyle0;
+TdsTableFooter.style = tableFooterCss;
 
 exports.tds_table_footer = TdsTableFooter;

package/dist/cjs/tds-table-header-input-wrapper.cjs.entry.js

@@ -1,16 +1,14 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-ca8040ad.js');
+var index = require('./index-CxAGLnpY.js');
 
 const tableHeaderInputWrapperCss = ":host{position:relative}:host(:hover) tds-icon{display:inline-block}:host(.focused-input-wrapper) tds-icon{display:inline-block}:host(.focused-input-wrapper) ::slotted(input:not(:focus)){background-color:var(--tds-table-input-background-hover)}:host(.show-icon) ::slotted(input){padding-left:35px}tds-icon.search-icon{color:var(--tds-table-input-header-icon);position:absolute;left:15px;top:1px}::slotted(input){box-sizing:border-box;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-table-color);padding-left:var(--tds-spacing-element-16);padding-right:var(--tds-spacing-element-16);height:48px;border-radius:0;background-color:transparent;border:0;border-bottom:2px solid transparent}::slotted(input)::placeholder{color:var(--tds-table-input-header-placeholder)}::slotted(input:focus){outline:none;background-color:var(--tds-table-input-header-background-focus);border-bottom:2px solid var(--tds-text-field-bar)}:host(.tds-table__compact) ::slotted(input){height:32px;}";
-const TdsTableHeaderInputWrapperStyle0 = tableHeaderInputWrapperCss;
 
 const relevantTableProps = ['compactDesign'];
 const TdsTableHeaderInputWrapper = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /** Controls if the search icon is shown */
         this.showIcon = true;
         this.renderSlot = true;
         this.inputFocused = false;
@@ -72,7 +70,7 @@ const TdsTableHeaderInputWrapper = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '5d46a27bdb22aec58736f8f0dce6855d6ef48f23', class: {
+        return (index.h(index.Host, { key: '62070c88b54c313b2db10890023db32f0eaf66b5', class: {
                 'focused-input-wrapper': this.inputFocused,
                 'show-icon': this.showIcon,
                 'tds-table__compact': this.compactDesign,
@@ -80,6 +78,6 @@ const TdsTableHeaderInputWrapper = class {
     }
     get host() { return index.getElement(this); }
 };
-TdsTableHeaderInputWrapper.style = TdsTableHeaderInputWrapperStyle0;
+TdsTableHeaderInputWrapper.style = tableHeaderInputWrapperCss;
 
 exports.tds_table_header_input_wrapper = TdsTableHeaderInputWrapper;