@scania/tegel 0.0.1-beta.7 → 0.0.2

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

@@ -2,164 +2,163 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e1c79686.js');
+const index = require('./index-b98965c7.js');
 
-const tableFooterCss = ":host{box-sizing:border-box;display:table-footer-group;height:48px}:host *{box-sizing:border-box}:host .sdds-table__footer-row{background-color:var(--sdds-grey-100)}:host .sdds-table__footer-cell{padding:0 16px}:host .sdds-table__footer-cell .sdds-table__pagination{height:48px;display:flex;align-items:center;justify-content:space-between}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__row-selector,:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__page-selector{display:flex;align-items:center}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__page-selector-input{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);background-color:var(--sdds-grey-50);width:36px;height:30px;border:none;border-radius:4px;transition:background-color 250ms ease;margin-right:4px;padding-right:8px}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__page-selector-input:hover{background-color:var(--sdds-white)}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__page-selector-input:disabled{color:var(--sdds-grey-600)}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__page-selector-input--shake{animation:sdds-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;transform:translate3d(0, 0, 0);backface-visibility:hidden;perspective:1000px}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-text{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:1px 8px 0 0}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-btn{display:flex;justify-content:center;align-items:center;border:none;background-color:transparent;cursor:pointer;height:32px;width:32px;border-radius:4px;transition:background-color 250ms ease}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-btn:hover{background-color:var(--sdds-grey-300)}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-btn:disabled{cursor:default}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-btn:disabled:hover{background-color:transparent}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-btn-svg{height:20px;width:20px}:host(.sdds-table--compact){height:32px}:host(.sdds-table--compact) .sdds-table__footer-cell .sdds-table__pagination{height:32px}:host(.sdds-table--compact) .sdds-table__footer-cell .sdds-table__pagination .sdds-table__page-selector-input{height:24px}:host(.sdds-table--compact) .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-btn{height:28px;width:28px}";
+const tableFooterCss = ":host{box-sizing:border-box;display:table-footer-group;height:48px}:host *{box-sizing:border-box}:host .sdds-table__footer-row{background-color:var(--sdds-data-table-footer-background);color:var(--sdds-data-table-color)}:host .sdds-table__footer-cell{padding:0 16px}:host .sdds-table__footer-cell .sdds-table__pagination{height:48px;display:flex;align-items:center;justify-content:space-between}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__row-selector,:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__page-selector{display:flex;align-items:center}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__page-selector-input{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);background-color:var(--sdds-data-table-footer-page-selector-input-background);color:var(--sdds-data-table-color);width:36px;height:30px;border:none;border-radius:4px;transition:background-color 250ms ease;margin-right:4px;padding-right:8px}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__page-selector-input:hover{background-color:var(--sdds-data-table-footer-page-selector-input-background-hover)}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__page-selector-input:disabled{color:var(--sdds-data-table-footer-page-selector-input-color-disabled)}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__page-selector-input--shake{animation:sdds-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;transform:translate3d(0, 0, 0);backface-visibility:hidden;perspective:1000px}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-text{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:1px 8px 0 0}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-btn{display:flex;justify-content:center;align-items:center;border:none;background-color:transparent;cursor:pointer;height:32px;width:32px;border-radius:4px;transition:background-color 250ms ease}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-btn:hover{background-color:var(--sdds-data-table-footer-btn-hover)}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-btn:disabled{cursor:default;opacity:0.38}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-btn:disabled:hover{background-color:transparent}:host .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-btn-svg{height:20px;width:20px;fill:var(--sdds-data-table-color)}:host(.sdds-table--compact){height:32px}:host(.sdds-table--compact) .sdds-table__footer-cell .sdds-table__pagination{height:32px}:host(.sdds-table--compact) .sdds-table__footer-cell .sdds-table__pagination .sdds-table__page-selector-input{height:24px}:host(.sdds-table--compact) .sdds-table__footer-cell .sdds-table__pagination .sdds-table__footer-btn{height:28px;width:28px}";
 
-const relevantTableProps = [
-  'compactDesign',
-  'noMinWidth',
-  'verticalDividers',
-  'whiteBackground',
-];
-function removeShakeAnimation(e) {
-  e.target.classList.remove('sdds-table__page-selector-input--shake');
-}
-const TableFooter = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.enablePaginationEvent = index.createEvent(this, "enablePaginationEvent", 7);
-    this.currentPageValueEvent = index.createEvent(this, "currentPageValueEvent", 7);
-    this.paginationPrev = (event) => {
-      event.preventDefault();
-      // Enable lowering until 1st page
-      if (this.paginationValue >= 2) {
-        this.paginationValue--;
-        this.runPagination();
-      }
-    };
-    this.paginationNext = (event) => {
-      event.preventDefault();
-      // Enable increasing until the max number of pages
-      if (this.paginationValue <= this.numberOfPages) {
-        this.paginationValue++;
-        this.runPagination();
-      }
-    };
-    this.runPagination = () => {
-      if (!this.disablePaginationFunction) {
-        // grab all rows in body
-        const dataRowsPagination = this.host.parentNode
-          .querySelector('sdds-table-body')
-          .querySelectorAll('.sdds-table__row');
-        dataRowsPagination.forEach((item, i) => {
-          // for making logic easier 1st result, 2nd result...
-          const index = i + 1;
-          if (this.tempPaginationDisable) {
-            this.paginationValue = 1;
-          }
-          else {
-            const lastResult = this.rowsPerPage * this.paginationValue;
-            const firstResult = lastResult - this.rowsPerPage;
-            if (index > firstResult && index <= lastResult) {
-              item.classList.remove('sdds-table__row--hidden');
-            }
-            else {
-              item.classList.add('sdds-table__row--hidden');
-            }
-          }
-        });
-      }
-    };
-    this.clientPaginationPrev = (event) => {
-      event.preventDefault();
-      // Enable lowering until 1st page
-      if (this.clientPaginationValue >= 2) {
-        this.clientPaginationValue--;
-        this.sendPaginationValue(this.clientPaginationValue);
-      }
-    };
-    this.clientPaginationNext = (event) => {
-      event.preventDefault();
-      // Enable increasing until the max number of pages
-      if (this.clientPaginationValue <= this.clientMaxPages) {
-        this.clientPaginationValue++;
-        this.sendPaginationValue(this.clientPaginationValue);
-      }
-    };
-    this.enablePagination = false;
-    this.rowsPerPage = 5;
-    this.enableClientPagination = false;
-    this.clientPaginationValue = 1;
-    this.clientMaxPages = 1;
-    this.clientSetColumnsNumber = null;
-    this.disablePaginationFunction = false;
-    this.columnsNumber = 0;
-    this.numberOfPages = 0;
-    this.paginationValue = 1;
-    this.tempPaginationDisable = false;
-    this.verticalDividers = false;
-    this.compactDesign = false;
-    this.noMinWidth = false;
-    this.whiteBackground = false;
-    this.tableId = '';
-  }
-  tablePropsChangedEventListener(event) {
-    if (this.tableId === event.detail.tableId) {
-      event.detail.changed
-        .filter((changedProp) => relevantTableProps.includes(changedProp))
-        .forEach((changedProp) => {
-        if (typeof this[changedProp] === 'undefined') {
-          throw new Error(`Table prop is not supported: ${changedProp}`);
-        }
-        this[changedProp] = event.detail[changedProp];
-      });
-    }
-  }
-  connectedCallback() {
-    this.tableEl = this.host.closest('sdds-table');
-    this.tableId = this.tableEl.tableId;
-  }
-  componentWillLoad() {
-    relevantTableProps.forEach((tablePropName) => {
-      this[tablePropName] = this.tableEl[tablePropName];
-    });
-    const numberOfRows = this.host.parentElement.querySelector('sdds-table-body').childElementCount;
-    const numberOfColumns = this.host.parentElement.querySelector('sdds-table-header').childElementCount;
-    this.numberOfPages = Math.ceil(numberOfRows / this.rowsPerPage);
-    if (this.clientSetColumnsNumber !== null) {
-      this.columnsNumber = this.clientSetColumnsNumber;
-    }
-    else {
-      this.columnsNumber = numberOfColumns;
-    }
-    this.enablePaginationEvent.emit(this.tableId);
-  }
-  paginationInputChange(event) {
-    const insertedValue = event.target.value;
-    if (insertedValue > this.numberOfPages || insertedValue < 1) {
-      event.target.classList.add('sdds-table__page-selector-input--shake');
-      this.paginationValue = event.target.max;
-    }
-    else {
-      this.paginationValue = event.target.value;
-    }
-    this.runPagination();
-  }
-  runPaginationEventListener(event) {
-    if (this.tableId === event.detail) {
-      this.runPagination();
-    }
-  }
-  sendPaginationValue(value) {
-    this.currentPageValueEvent.emit([this.tableId, value]);
-  }
-  clientPaginationInputChange(event) {
-    const insertedValue = event.target.value;
-    if (insertedValue > this.clientMaxPages || insertedValue < 1) {
-      event.target.classList.add('sdds-table__page-selector-input--shake');
-      this.clientPaginationValue = event.target.max;
-    }
-    else {
-      this.clientPaginationValue = event.target.value;
-    }
-    this.sendPaginationValue(this.clientPaginationValue);
-  }
-  render() {
-    return (index.h(index.Host, { class: this.compactDesign ? 'sdds-table--compact' : '' }, index.h("tr", { class: "sdds-table__footer-row" }, index.h("td", { class: "sdds-table__footer-cell", colSpan: this.columnsNumber }, this.enablePagination && !this.enableClientPagination && (index.h("div", { class: "sdds-table__pagination" }, index.h("div", { class: "sdds-table__row-selector" }), index.h("div", { class: "sdds-table__page-selector" }, index.h("input", { class: "sdds-table__page-selector-input", type: "number", min: "1", max: this.numberOfPages, value: this.paginationValue, pattern: "[0-9]+", dir: "rtl", onChange: (event) => this.paginationInputChange(event), onFocusout: (event) => this.paginationInputChange(event), onAnimationEnd: removeShakeAnimation, disabled: this.tempPaginationDisable }), index.h("p", { class: "sdds-table__footer-text" }, "of ", index.h("span", null, this.tempPaginationDisable ? 1 : this.numberOfPages), " pages"), index.h("button", { class: "sdds-table__footer-btn", disabled: this.paginationValue <= 1 || this.tempPaginationDisable, onClick: (event) => this.paginationPrev(event) }, index.h("svg", { class: "sdds-table__footer-btn-svg", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M22.217 4.273a1 1 0 0 1 0 1.415l-9.888 9.888a.6.6 0 0 0 0 .848l9.888 9.888a1 1 0 0 1-1.414 1.415l-9.889-9.889a2.6 2.6 0 0 1 0-3.677l9.889-9.888a1 1 0 0 1 1.414 0Z", fill: "currentColor" }))), index.h("button", { class: "sdds-table__footer-btn", disabled: this.paginationValue >= this.numberOfPages || this.tempPaginationDisable, onClick: (event) => this.paginationNext(event) }, index.h("svg", { class: "sdds-table__footer-btn-svg", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M9.783 27.727a1 1 0 0 1 0-1.415l9.888-9.888a.6.6 0 0 0 0-.848L9.783 5.688a1 1 0 0 1 1.414-1.415l9.889 9.889a2.6 2.6 0 0 1 0 3.676l-9.889 9.889a1 1 0 0 1-1.414 0Z", fill: "currentColor" })))))), this.enableClientPagination && !this.enablePagination && (index.h("div", { class: "sdds-table__pagination" }, index.h("div", { class: "sdds-table__row-selector" }), index.h("div", { class: "sdds-table__page-selector" }, index.h("input", { class: "sdds-table__page-selector-input", type: "number", min: "1", max: this.clientMaxPages, value: this.clientPaginationValue, pattern: "[0-9]+", dir: "rtl", onChange: (event) => this.clientPaginationInputChange(event), onFocusout: (event) => this.clientPaginationInputChange(event), onAnimationEnd: removeShakeAnimation }), index.h("p", { class: "sdds-table__footer-text" }, "of ", index.h("span", null, this.clientMaxPages), " pages"), index.h("button", { class: "sdds-table__footer-btn", disabled: this.clientPaginationValue <= 1, onClick: (event) => this.clientPaginationPrev(event) }, index.h("svg", { class: "sdds-table__footer-btn-svg", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M22.217 4.273a1 1 0 0 1 0 1.415l-9.888 9.888a.6.6 0 0 0 0 .848l9.888 9.888a1 1 0 0 1-1.414 1.415l-9.889-9.889a2.6 2.6 0 0 1 0-3.677l9.889-9.888a1 1 0 0 1 1.414 0Z", fill: "currentColor" }))), index.h("button", { class: "sdds-table__footer-btn", disabled: this.clientPaginationValue >= this.clientMaxPages, onClick: (event) => this.clientPaginationNext(event) }, index.h("svg", { class: "sdds-table__footer-btn-svg", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M9.783 27.727a1 1 0 0 1 0-1.415l9.888-9.888a.6.6 0 0 0 0-.848L9.783 5.688a1 1 0 0 1 1.414-1.415l9.889 9.889a2.6 2.6 0 0 1 0 3.676l-9.889 9.889a1 1 0 0 1-1.414 0Z", fill: "currentColor" }))))))))));
-  }
-  get host() { return index.getElement(this); }
-};
+const relevantTableProps = [
+  'compactDesign',
+  'noMinWidth',
+  'verticalDividers',
+];
+function removeShakeAnimation(e) {
+  e.target.classList.remove('sdds-table__page-selector-input--shake');
+}
+const TableFooter = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.enablePaginationEvent = index.createEvent(this, "enablePaginationEvent", 7);
+    this.currentPageValueEvent = index.createEvent(this, "currentPageValueEvent", 7);
+    this.paginationPrev = (event) => {
+      event.preventDefault();
+      // Enable lowering until 1st page
+      if (this.paginationValue >= 2) {
+        this.paginationValue--;
+        this.runPagination();
+      }
+    };
+    this.paginationNext = (event) => {
+      event.preventDefault();
+      // Enable increasing until the max number of pages
+      if (this.paginationValue <= this.numberOfPages) {
+        this.paginationValue++;
+        this.runPagination();
+      }
+    };
+    this.runPagination = () => {
+      if (!this.disablePaginationFunction) {
+        // grab all rows in body
+        const dataRowsPagination = this.host.parentNode
+          .querySelector('sdds-table-body')
+          .querySelectorAll('.sdds-table__row');
+        dataRowsPagination.forEach((item, i) => {
+          // for making logic easier 1st result, 2nd result...
+          const index = i + 1;
+          if (this.tempPaginationDisable) {
+            this.paginationValue = 1;
+          }
+          else {
+            const lastResult = this.rowsPerPage * this.paginationValue;
+            const firstResult = lastResult - this.rowsPerPage;
+            if (index > firstResult && index <= lastResult) {
+              item.classList.remove('sdds-table__row--hidden');
+            }
+            else {
+              item.classList.add('sdds-table__row--hidden');
+            }
+          }
+        });
+      }
+    };
+    this.clientPaginationPrev = (event) => {
+      event.preventDefault();
+      // Enable lowering until 1st page
+      if (this.clientPaginationValue >= 2) {
+        this.clientPaginationValue--;
+        this.sendPaginationValue(this.clientPaginationValue);
+      }
+    };
+    this.clientPaginationNext = (event) => {
+      event.preventDefault();
+      // Enable increasing until the max number of pages
+      if (this.clientPaginationValue <= this.clientMaxPages) {
+        this.clientPaginationValue++;
+        this.sendPaginationValue(this.clientPaginationValue);
+      }
+    };
+    this.enablePagination = false;
+    this.rowsPerPage = 5;
+    this.enableClientPagination = false;
+    this.clientPaginationValue = 1;
+    this.clientMaxPages = 1;
+    this.clientSetColumnsNumber = null;
+    this.disablePaginationFunction = false;
+    this.columnsNumber = 0;
+    this.numberOfPages = 0;
+    this.paginationValue = 1;
+    this.tempPaginationDisable = false;
+    this.verticalDividers = false;
+    this.compactDesign = false;
+    this.noMinWidth = false;
+    this.whiteBackground = false;
+    this.tableId = '';
+  }
+  tablePropsChangedEventListener(event) {
+    if (this.tableId === event.detail.tableId) {
+      event.detail.changed
+        .filter((changedProp) => relevantTableProps.includes(changedProp))
+        .forEach((changedProp) => {
+        if (typeof this[changedProp] === 'undefined') {
+          throw new Error(`Table prop is not supported: ${changedProp}`);
+        }
+        this[changedProp] = event.detail[changedProp];
+      });
+    }
+  }
+  connectedCallback() {
+    this.tableEl = this.host.closest('sdds-table');
+    this.tableId = this.tableEl.tableId;
+  }
+  componentWillLoad() {
+    relevantTableProps.forEach((tablePropName) => {
+      this[tablePropName] = this.tableEl[tablePropName];
+    });
+    const numberOfRows = this.host.parentElement.querySelector('sdds-table-body').childElementCount;
+    const numberOfColumns = this.host.parentElement.querySelector('sdds-table-header').childElementCount;
+    this.numberOfPages = Math.ceil(numberOfRows / this.rowsPerPage);
+    if (this.clientSetColumnsNumber !== null) {
+      this.columnsNumber = this.clientSetColumnsNumber;
+    }
+    else {
+      this.columnsNumber = numberOfColumns;
+    }
+    this.enablePaginationEvent.emit(this.tableId);
+  }
+  paginationInputChange(event) {
+    const insertedValue = event.target.value;
+    if (insertedValue > this.numberOfPages || insertedValue < 1) {
+      event.target.classList.add('sdds-table__page-selector-input--shake');
+      this.paginationValue = event.target.max;
+    }
+    else {
+      this.paginationValue = event.target.value;
+    }
+    this.runPagination();
+  }
+  runPaginationEventListener(event) {
+    if (this.tableId === event.detail) {
+      this.runPagination();
+    }
+  }
+  sendPaginationValue(value) {
+    this.currentPageValueEvent.emit([this.tableId, value]);
+  }
+  clientPaginationInputChange(event) {
+    const insertedValue = event.target.value;
+    if (insertedValue > this.clientMaxPages || insertedValue < 1) {
+      event.target.classList.add('sdds-table__page-selector-input--shake');
+      this.clientPaginationValue = event.target.max;
+    }
+    else {
+      this.clientPaginationValue = event.target.value;
+    }
+    this.sendPaginationValue(this.clientPaginationValue);
+  }
+  render() {
+    return (index.h(index.Host, { class: this.compactDesign ? 'sdds-table--compact' : '' }, index.h("tr", { class: "sdds-table__footer-row" }, index.h("td", { class: "sdds-table__footer-cell", colSpan: this.columnsNumber }, this.enablePagination && !this.enableClientPagination && (index.h("div", { class: "sdds-table__pagination" }, index.h("div", { class: "sdds-table__row-selector" }), index.h("div", { class: "sdds-table__page-selector" }, index.h("input", { class: "sdds-table__page-selector-input", type: "number", min: "1", max: this.numberOfPages, value: this.paginationValue, pattern: "[0-9]+", dir: "rtl", onChange: (event) => this.paginationInputChange(event), onFocusout: (event) => this.paginationInputChange(event), onAnimationEnd: removeShakeAnimation, disabled: this.tempPaginationDisable }), index.h("p", { class: "sdds-table__footer-text" }, "of ", index.h("span", null, this.tempPaginationDisable ? 1 : this.numberOfPages), " pages"), index.h("button", { class: "sdds-table__footer-btn", disabled: this.paginationValue <= 1 || this.tempPaginationDisable, onClick: (event) => this.paginationPrev(event) }, index.h("svg", { class: "sdds-table__footer-btn-svg", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M22.217 4.273a1 1 0 0 1 0 1.415l-9.888 9.888a.6.6 0 0 0 0 .848l9.888 9.888a1 1 0 0 1-1.414 1.415l-9.889-9.889a2.6 2.6 0 0 1 0-3.677l9.889-9.888a1 1 0 0 1 1.414 0Z" }))), index.h("button", { class: "sdds-table__footer-btn", disabled: this.paginationValue >= this.numberOfPages || this.tempPaginationDisable, onClick: (event) => this.paginationNext(event) }, index.h("svg", { class: "sdds-table__footer-btn-svg", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M9.783 27.727a1 1 0 0 1 0-1.415l9.888-9.888a.6.6 0 0 0 0-.848L9.783 5.688a1 1 0 0 1 1.414-1.415l9.889 9.889a2.6 2.6 0 0 1 0 3.676l-9.889 9.889a1 1 0 0 1-1.414 0Z" })))))), this.enableClientPagination && !this.enablePagination && (index.h("div", { class: "sdds-table__pagination" }, index.h("div", { class: "sdds-table__row-selector" }), index.h("div", { class: "sdds-table__page-selector" }, index.h("input", { class: "sdds-table__page-selector-input", type: "number", min: "1", max: this.clientMaxPages, value: this.clientPaginationValue, pattern: "[0-9]+", dir: "rtl", onChange: (event) => this.clientPaginationInputChange(event), onFocusout: (event) => this.clientPaginationInputChange(event), onAnimationEnd: removeShakeAnimation }), index.h("p", { class: "sdds-table__footer-text" }, "of ", index.h("span", null, this.clientMaxPages), " pages"), index.h("button", { class: "sdds-table__footer-btn", disabled: this.clientPaginationValue <= 1, onClick: (event) => this.clientPaginationPrev(event) }, index.h("svg", { class: "sdds-table__footer-btn-svg", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M22.217 4.273a1 1 0 0 1 0 1.415l-9.888 9.888a.6.6 0 0 0 0 .848l9.888 9.888a1 1 0 0 1-1.414 1.415l-9.889-9.889a2.6 2.6 0 0 1 0-3.677l9.889-9.888a1 1 0 0 1 1.414 0Z" }))), index.h("button", { class: "sdds-table__footer-btn", disabled: this.clientPaginationValue >= this.clientMaxPages, onClick: (event) => this.clientPaginationNext(event) }, index.h("svg", { class: "sdds-table__footer-btn-svg", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, index.h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M9.783 27.727a1 1 0 0 1 0-1.415l9.888-9.888a.6.6 0 0 0 0-.848L9.783 5.688a1 1 0 0 1 1.414-1.415l9.889 9.889a2.6 2.6 0 0 1 0 3.676l-9.889 9.889a1 1 0 0 1-1.414 0Z" }))))))))));
+  }
+  get host() { return index.getElement(this); }
+};
 TableFooter.style = tableFooterCss;
 
 exports.sdds_table_footer = TableFooter;

package/dist/cjs/sdds-table-header.cjs.entry.js

@@ -2,99 +2,98 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e1c79686.js');
+const index = require('./index-b98965c7.js');
 
-const tableHeaderCss = ":root,.sdds-theme-light{--sdds-checkbox-color:var(--sdds-grey-900);--sdds-checkbox-interaction-01:var(--sdds-blue-800);--sdds-checkbox-interaction-02:var(--sdds-white);--sdds-checkbox-bg-hover:var(--sdds-blue-800);--sdds-checkbox-bg-focus:var(--sdds-blue-800);--sdds-checkbox-disabled:var(--sdds-grey-400);--sdds-checkbox-bg-img:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-bg-img-disabled:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23b0b7c4' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-border-color-disabled-after:var(--sdds-grey-500);--sdds-checkbox-color-disabled-after:var(--sdds-grey-500)}:root .sdds-theme-dark,.sdds-theme-light .sdds-theme-dark{--sdds-checkbox-color:var(--sdds-white);--sdds-checkbox-interaction-01:var(--sdds-white);--sdds-checkbox-interaction-02:var(--sdds-grey-958);--sdds-checkbox-bg-hover:white;--sdds-checkbox-bg-focus:white;--sdds-checkbox-disabled:white;--sdds-checkbox-bg-img:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%230D0F13' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-bg-img-disabled:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%2356657A' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-border-color-disabled-after:var(--sdds-grey-700);--sdds-checkbox-color-disabled-after:var(--sdds-grey-700)}.sdds-checkbox-item{box-sizing:border-box;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-checkbox-text);display:flex;align-items:center;margin-left:-4px}.sdds-checkbox-item *{box-sizing:border-box}.sdds-checkbox-item .sdds-form-input[type=checkbox]{appearance:none;outline:none;margin:0;border:0;border-radius:2px;width:24px;height:24px;position:relative;cursor:pointer}.sdds-checkbox-item .sdds-form-input[type=checkbox]+label{color:var(--sdds-checkbox-color);padding-left:var(--sdds-spacing-element-8);padding-top:var(--sdds-spacing-element-4);padding-bottom:var(--sdds-spacing-element-4);cursor:pointer}.sdds-checkbox-item .sdds-form-input[type=checkbox]::before,.sdds-checkbox-item .sdds-form-input[type=checkbox]::after{content:\"\";position:absolute;box-sizing:border-box;border-radius:2px}.sdds-checkbox-item .sdds-form-input[type=checkbox]::before{width:24px;height:24px;left:0;top:0}.sdds-checkbox-item .sdds-form-input[type=checkbox]::after{border:1px solid var(--sdds-checkbox-interaction-01);background-color:var(--sdds-checkbox-interaction-02);width:16px;height:16px;left:4px;top:4px}.sdds-checkbox-item .sdds-form-input[type=checkbox]:hover::before{background-color:var(--sdds-checkbox-bg-hover);opacity:0.12}.sdds-checkbox-item .sdds-form-input[type=checkbox]:focus::before{background-color:var(--sdds-checkbox-bg-focus);opacity:0.24;animation:cb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled{cursor:not-allowed}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled::after,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled::after{border-color:var(--sdds-checkbox-border-color-disabled-after)}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled+label,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled+label{color:var(--sdds-grey-600);cursor:not-allowed}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled:hover::before,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled:hover::before{display:none}.sdds-form-input[type=checkbox]:checked::after{background-image:var(--sdds-checkbox-bg-img);background-color:var(--sdds-checkbox-interaction-01);background-repeat:no-repeat;background-position:center}.sdds-form-input[type=checkbox]:checked:disabled:hover::before,.sdds-form-input[type=checkbox]:checked:disabled::before,.sdds-form-input[type=checkbox]:checked.disabled:hover::before,.sdds-form-input[type=checkbox]:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid #b0b7c4}.sdds-form-input[type=checkbox]:checked:disabled::after,.sdds-form-input[type=checkbox]:checked.disabled::after{background-image:var(--sdds-checkbox-bg-img-disabled);background-color:var(--sdds-checkbox-interaction-02);color:var(--sdds-checkbox-color-disabled-after)}@keyframes cb-focus{0%{transform:scale(0);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:0}}:host{box-sizing:border-box;display:table-header-group}:host *{box-sizing:border-box}:host .sdds-table__header-cell--checkbox{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);display:table-cell;text-align:left;color:var(--sdds-grey-958);background-color:var(--sdds-grey-300);border-bottom:1px solid var(--sdds-grey-400);height:48px;box-sizing:border-box;overflow:hidden;transition:background-color 200ms ease;min-width:unset;width:48px;padding:0;border-top-left-radius:4px}:host .sdds-form-label--data-table{width:100%;height:48px;display:flex;justify-content:center;align-items:center;cursor:pointer}:host .sdds-table__expand-control-container{display:flex;justify-content:center;align-items:center;height:48px;cursor:pointer}:host .sdds-table__expand-control-container .sdds-table__expand-input{display:none}:host .sdds-table__expand-control-container .sdds-expandable-row-icon{height:20px;width:20px;transition:transform 200ms ease;transform:rotate(0)}:host .sdds-table__expand-control-container .sdds-expandable-row-icon--opened{transform:rotate(180deg)}:host ::slotted(sdds-header-cell:hover){background-color:var(--sdds-grey-400)}:host(.sdds-table--compact) .sdds-table__header-cell--checkbox{height:32px}:host(.sdds-table--compact) .sdds-form-label--data-table{height:32px}:host(.sdds-table--divider) .sdds-table__header-cell--checkbox{border-right:1px solid var(--sdds-grey-400)}:host(.sdds-table--toolbar-available) .sdds-table__header-cell--checkbox{border-top-left-radius:0}";
+const tableHeaderCss = ":root,.sdds-mode-light{--sdds-checkbox-color:var(--sdds-grey-900);--sdds-checkbox-interaction-01:var(--sdds-blue-800);--sdds-checkbox-interaction-02:var(--sdds-white);--sdds-checkbox-background-hover:var(--sdds-blue-800);--sdds-checkbox-background-focus:var(--sdds-blue-800);--sdds-checkbox-disabled:var(--sdds-grey-400);--sdds-checkbox-background-img:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-background-img-disabled:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23b0b7c4' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-border-color-disabled-after:var(--sdds-grey-500);--sdds-checkbox-color-disabled-after:var(--sdds-grey-500)}:root .sdds-mode-dark,.sdds-mode-light .sdds-mode-dark{--sdds-checkbox-color:var(--sdds-white);--sdds-checkbox-interaction-01:var(--sdds-white);--sdds-checkbox-interaction-02:var(--sdds-grey-958);--sdds-checkbox-background-hover:white;--sdds-checkbox-background-focus:white;--sdds-checkbox-disabled:white;--sdds-checkbox-background-img:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%230D0F13' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-background-img-disabled:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%2356657A' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-border-color-disabled-after:var(--sdds-grey-700);--sdds-checkbox-color-disabled-after:var(--sdds-grey-700)}.sdds-checkbox-item{box-sizing:border-box;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-checkbox-text);display:flex;align-items:center;margin-left:-4px}.sdds-checkbox-item *{box-sizing:border-box}.sdds-checkbox-item .sdds-form-input[type=checkbox]{appearance:none;outline:none;margin:0;border:0;border-radius:2px;width:24px;height:24px;position:relative;cursor:pointer}.sdds-checkbox-item .sdds-form-input[type=checkbox]+label{color:var(--sdds-checkbox-color);padding-left:var(--sdds-spacing-element-4);padding-top:var(--sdds-spacing-element-4);padding-bottom:var(--sdds-spacing-element-4);cursor:pointer}.sdds-checkbox-item .sdds-form-input[type=checkbox]::before,.sdds-checkbox-item .sdds-form-input[type=checkbox]::after{content:\"\";position:absolute;box-sizing:border-box;border-radius:2px}.sdds-checkbox-item .sdds-form-input[type=checkbox]::before{width:24px;height:24px;left:0;top:0}.sdds-checkbox-item .sdds-form-input[type=checkbox]::after{border:1px solid var(--sdds-checkbox-interaction-01);background-color:var(--sdds-checkbox-interaction-02);width:16px;height:16px;left:4px;top:4px}.sdds-checkbox-item .sdds-form-input[type=checkbox]:hover::before{background-color:var(--sdds-checkbox-background-hover);opacity:0.12}.sdds-checkbox-item .sdds-form-input[type=checkbox]:focus::before{background-color:var(--sdds-checkbox-background-focus);opacity:0.24;transition:opacity 0.2s ease-in-out}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled{cursor:not-allowed}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled::after,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled::after{border-color:var(--sdds-checkbox-border-color-disabled-after)}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled+label,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled+label{color:var(--sdds-grey-600);cursor:not-allowed}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled:hover::before,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled:hover::before{display:none}.sdds-form-input[type=checkbox]:checked::after{background-image:var(--sdds-checkbox-background-img);background-color:var(--sdds-checkbox-interaction-01);background-repeat:no-repeat;background-position:center}.sdds-form-input[type=checkbox]:checked:disabled:hover::before,.sdds-form-input[type=checkbox]:checked:disabled::before,.sdds-form-input[type=checkbox]:checked.disabled:hover::before,.sdds-form-input[type=checkbox]:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid #b0b7c4}.sdds-form-input[type=checkbox]:checked:disabled::after,.sdds-form-input[type=checkbox]:checked.disabled::after{background-image:var(--sdds-checkbox-background-img-disabled);background-color:var(--sdds-checkbox-interaction-02);color:var(--sdds-checkbox-color-disabled-after)}:host{box-sizing:border-box;display:table-header-group}:host *{box-sizing:border-box}:host .sdds-table__header-cell--checkbox{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);display:table-cell;text-align:left;color:var(--sdds-data-table-color);background-color:var(--sdds-data-table-header-background);border-bottom:1px solid var(--sdds-data-table-divider);height:48px;box-sizing:border-box;overflow:hidden;transition:background-color 200ms ease;min-width:unset;width:48px;padding:0;border-top-left-radius:4px}:host .sdds-form-label--data-table{width:100%;height:48px;display:flex;justify-content:center;align-items:center;cursor:pointer}:host .sdds-table__expand-control-container{display:flex;justify-content:center;align-items:center;height:48px;cursor:pointer}:host .sdds-table__expand-control-container .sdds-table__expand-input{display:none}:host .sdds-table__expand-control-container .sdds-expandable-row-icon{height:20px;width:20px;transition:transform 200ms ease;transform:rotate(0)}:host .sdds-table__expand-control-container .sdds-expandable-row-icon--opened{transform:rotate(180deg)}:host ::slotted(sdds-header-cell:hover){background-color:var(--sdds-data-table-header-background-hover)}:host(.sdds-table--compact) .sdds-table__header-cell--checkbox{height:32px}:host(.sdds-table--compact) .sdds-form-label--data-table{height:32px}:host(.sdds-table--divider) .sdds-table__header-cell--checkbox{border-right:1px solid var(--sdds-data-table-divider)}:host(.sdds-table--toolbar-available) .sdds-table__header-cell--checkbox{border-top-left-radius:0}";
 
-const relevantTableProps = [
-  'enableMultiselect',
-  'enableExpandableRows',
-  'verticalDividers',
-  'compactDesign',
-  'noMinWidth',
-  'whiteBackground',
-];
-const TableHeaderRow = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.mainCheckboxSelectedEvent = index.createEvent(this, "mainCheckboxSelectedEvent", 7);
-    this.enableMultiselect = false;
-    this.enableExpandableRows = false;
-    this.mainCheckboxSelected = false;
-    this.mainExpendSelected = false;
-    this.verticalDividers = false;
-    this.compactDesign = false;
-    this.noMinWidth = false;
-    this.whiteBackground = false;
-    this.enableToolbarDesign = false;
-    this.tableId = '';
-  }
-  tablePropsChangedEventListener(event) {
-    if (this.tableId === event.detail.tableId) {
-      event.detail.changed
-        .filter((changedProp) => relevantTableProps.includes(changedProp))
-        .forEach((changedProp) => {
-        if (typeof this[changedProp] === 'undefined') {
-          throw new Error(`Table prop is not supported: ${changedProp}`);
-        }
-        this[changedProp] = event.detail[changedProp];
-      });
-    }
-  }
-  updateMainCheckboxEventListener(event) {
-    const [receivedID, receivedMainCheckboxStatus] = event.detail;
-    if (this.tableId === receivedID) {
-      this.mainCheckboxSelected = receivedMainCheckboxStatus;
-    }
-  }
-  singleRowExpandedEventListener(event) {
-    if (this.tableId === event.detail[0]) {
-      // TODO: Improve this logic. Why we get late repose in DOM?
-      setTimeout(() => {
-        this.bodyExpandClicked();
-      }, 100);
-    }
-  }
-  bodyExpandClicked() {
-    const numberOfExtendRowsActive = this.host.parentElement
-      .querySelector('sdds-table-body')
-      .getElementsByClassName('sdds-table__row-extend--active').length;
-    const numberOfExtendRows = this.host.parentElement
-      .querySelector('sdds-table-body')
-      .getElementsByTagName('sdds-table-body-row-expendable').length;
-    if (numberOfExtendRows === numberOfExtendRowsActive) {
-      this.mainExpendSelected = true;
-    }
-    else {
-      this.mainExpendSelected = false;
-    }
-  }
-  connectedCallback() {
-    this.tableEl = this.host.closest('sdds-table');
-    this.tableId = this.tableEl.tableId;
-  }
-  componentWillLoad() {
-    relevantTableProps.forEach((tablePropName) => {
-      this[tablePropName] = this.tableEl[tablePropName];
-    });
-  }
-  componentWillRender() {
-    this.enableToolbarDesign =
-      this.host.closest('sdds-table').getElementsByTagName('sdds-table-toolbar').length >= 1;
-  }
-  headCheckBoxClicked(event) {
-    this.mainCheckboxSelected = event.currentTarget.checked;
-    this.mainCheckboxSelectedEvent.emit([this.tableId, this.mainCheckboxSelected]);
-  }
-  render() {
-    return (index.h(index.Host, { class: {
-        'sdds-table--compact': this.compactDesign,
-        'sdds-table--divider': this.verticalDividers,
-        'sdds-table--toolbar-available': this.enableToolbarDesign,
-      } }, index.h("tr", null, this.enableMultiselect && (index.h("th", { class: "sdds-table__header-cell sdds-table__header-cell--checkbox" }, index.h("div", { class: "sdds-checkbox-item" }, index.h("label", { class: "sdds-form-label sdds-form-label--data-table" }, index.h("input", { class: "sdds-form-input", type: "checkbox", onChange: (e) => this.headCheckBoxClicked(e), checked: this.mainCheckboxSelected }))))), this.enableExpandableRows && (index.h("th", { class: "sdds-table__header-cell sdds-table__header-cell--checkbox" })), index.h("slot", null))));
-  }
-  get host() { return index.getElement(this); }
-};
+const relevantTableProps = [
+  'enableMultiselect',
+  'enableExpandableRows',
+  'verticalDividers',
+  'compactDesign',
+  'noMinWidth',
+];
+const TableHeaderRow = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.mainCheckboxSelectedEvent = index.createEvent(this, "mainCheckboxSelectedEvent", 7);
+    this.enableMultiselect = false;
+    this.enableExpandableRows = false;
+    this.mainCheckboxSelected = false;
+    this.mainExpendSelected = false;
+    this.verticalDividers = false;
+    this.compactDesign = false;
+    this.noMinWidth = false;
+    this.whiteBackground = false;
+    this.enableToolbarDesign = false;
+    this.tableId = '';
+  }
+  tablePropsChangedEventListener(event) {
+    if (this.tableId === event.detail.tableId) {
+      event.detail.changed
+        .filter((changedProp) => relevantTableProps.includes(changedProp))
+        .forEach((changedProp) => {
+        if (typeof this[changedProp] === 'undefined') {
+          throw new Error(`Table prop is not supported: ${changedProp}`);
+        }
+        this[changedProp] = event.detail[changedProp];
+      });
+    }
+  }
+  updateMainCheckboxEventListener(event) {
+    const [receivedID, receivedMainCheckboxStatus] = event.detail;
+    if (this.tableId === receivedID) {
+      this.mainCheckboxSelected = receivedMainCheckboxStatus;
+    }
+  }
+  singleRowExpandedEventListener(event) {
+    if (this.tableId === event.detail[0]) {
+      // TODO: Improve this logic. Why we get late repose in DOM?
+      setTimeout(() => {
+        this.bodyExpandClicked();
+      }, 100);
+    }
+  }
+  bodyExpandClicked() {
+    const numberOfExtendRowsActive = this.host.parentElement
+      .querySelector('sdds-table-body')
+      .getElementsByClassName('sdds-table__row-extend--active').length;
+    const numberOfExtendRows = this.host.parentElement
+      .querySelector('sdds-table-body')
+      .getElementsByTagName('sdds-table-body-row-expendable').length;
+    if (numberOfExtendRows === numberOfExtendRowsActive) {
+      this.mainExpendSelected = true;
+    }
+    else {
+      this.mainExpendSelected = false;
+    }
+  }
+  connectedCallback() {
+    this.tableEl = this.host.closest('sdds-table');
+    this.tableId = this.tableEl.tableId;
+  }
+  componentWillLoad() {
+    relevantTableProps.forEach((tablePropName) => {
+      this[tablePropName] = this.tableEl[tablePropName];
+    });
+  }
+  componentWillRender() {
+    this.enableToolbarDesign =
+      this.host.closest('sdds-table').getElementsByTagName('sdds-table-toolbar').length >= 1;
+  }
+  headCheckBoxClicked(event) {
+    this.mainCheckboxSelected = event.currentTarget.checked;
+    this.mainCheckboxSelectedEvent.emit([this.tableId, this.mainCheckboxSelected]);
+  }
+  render() {
+    return (index.h(index.Host, { class: {
+        'sdds-table--compact': this.compactDesign,
+        'sdds-table--divider': this.verticalDividers,
+        'sdds-table--toolbar-available': this.enableToolbarDesign,
+      } }, index.h("tr", null, this.enableMultiselect && (index.h("th", { class: "sdds-table__header-cell sdds-table__header-cell--checkbox" }, index.h("div", { class: "sdds-checkbox-item" }, index.h("label", { class: "sdds-form-label sdds-form-label--data-table" }, index.h("input", { class: "sdds-form-input", type: "checkbox", onChange: (e) => this.headCheckBoxClicked(e), checked: this.mainCheckboxSelected }))))), this.enableExpandableRows && (index.h("th", { class: "sdds-table__header-cell sdds-table__header-cell--checkbox" })), index.h("slot", null))));
+  }
+  get host() { return index.getElement(this); }
+};
 TableHeaderRow.style = tableHeaderCss;
 
 exports.sdds_table_header = TableHeaderRow;