@scania/tegel 0.0.2 → 0.0.4

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

@@ -2,163 +2,165 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b98965c7.js');
+const index = require('./index-18eb94f0.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-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',
-];
-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); }
-};
+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;
+
+//# sourceMappingURL=sdds-table-footer.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"sdds-table-footer.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["./src/components/data-table/table-footer/table-footer.scss?tag=sdds-table-footer&encapsulation=shadow","./src/components/data-table/table-footer/table-footer.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host {\n  @include sdds-box-sizing;\n\n  display: table-footer-group;\n  height: 48px;\n\n  .sdds-table__footer-row {\n    background-color: var(--sdds-data-table-footer-background);\n    color: var(--sdds-data-table-color);\n  }\n\n  .sdds-table__footer-cell {\n    padding: 0 16px;\n\n    .sdds-table__pagination {\n      height: 48px;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n\n      .sdds-table__row-selector,\n      .sdds-table__page-selector {\n        display: flex;\n        align-items: center;\n      }\n\n      .sdds-table__page-selector-input {\n        font: var(--sdds-detail-02);\n        letter-spacing: var(--sdds-detail-02-ls);\n        background-color: var(--sdds-data-table-footer-page-selector-input-background);\n        color: var(--sdds-data-table-color);\n        width: 36px;\n        height: 30px;\n        border: none;\n        border-radius: 4px;\n        transition: background-color 250ms ease;\n        margin-right: 4px;\n        padding-right: 8px;\n\n        &:hover {\n          background-color: var(--sdds-data-table-footer-page-selector-input-background-hover);\n        }\n\n        &:disabled {\n          color: var(--sdds-data-table-footer-page-selector-input-color-disabled);\n        }\n      }\n\n      .sdds-table__page-selector-input--shake {\n        animation: sdds-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;\n        transform: translate3d(0, 0, 0);\n        backface-visibility: hidden;\n        perspective: 1000px;\n      }\n\n      .sdds-table__footer-text {\n        font: var(--sdds-detail-02);\n        letter-spacing: var(--sdds-detail-02-ls);\n        padding: 1px 8px 0 0;\n      }\n\n      .sdds-table__footer-btn {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        border: none;\n        background-color: transparent;\n        cursor: pointer;\n        height: 32px;\n        width: 32px;\n        border-radius: 4px;\n        transition: background-color 250ms ease;\n\n        &:hover {\n          background-color: var(--sdds-data-table-footer-btn-hover);\n        }\n\n        &:disabled {\n          cursor: default;\n          opacity: 0.38;\n\n          &:hover {\n            background-color: transparent;\n          }\n        }\n      }\n\n      .sdds-table__footer-btn-svg {\n        height: 20px;\n        width: 20px;\n        fill: var(--sdds-data-table-color)\n      }\n    }\n  }\n}\n\n:host(.sdds-table--compact) {\n  height: 32px;\n\n  .sdds-table__footer-cell {\n    .sdds-table__pagination {\n      height: 32px;\n\n      .sdds-table__page-selector-input {\n        height: 24px;\n      }\n\n      .sdds-table__footer-btn {\n        height: 28px;\n        width: 28px;\n      }\n    }\n  }\n}\n","import {\n  Component,\n  h,\n  Host,\n  Listen,\n  State,\n  Event,\n  EventEmitter,\n  Prop,\n  Element,\n} from '@stencil/core';\nimport { TablePropsChangedEvent } from '../table/table';\n\nconst relevantTableProps: TablePropsChangedEvent['changed'] = [\n  'compactDesign',\n  'noMinWidth',\n  'verticalDividers',\n];\n\nfunction removeShakeAnimation(e: AnimationEvent & { target: HTMLElement }) {\n  e.target.classList.remove('sdds-table__page-selector-input--shake');\n}\n\n@Component({\n  tag: 'sdds-table-footer',\n  styleUrl: 'table-footer.scss',\n  shadow: true,\n})\nexport class TableFooter {\n  /** Enable pagination and show pagination controls  */\n  @Prop({ reflect: true }) enablePagination: boolean = false;\n\n  /** Sets how many rows to display when pagination is enabled */\n  @Prop({ reflect: true }) rowsPerPage: number = 5;\n\n  /** Prop to enable client controlled pagination  */\n  @Prop({ reflect: true }) enableClientPagination: boolean = false;\n\n  /** Prop for client to set current page number */\n  @Prop({ reflect: true }) clientPaginationValue: number = 1;\n\n  /** Prop for client to set max number of pages */\n  @Prop({ reflect: true }) clientMaxPages: number = 1;\n\n  /** 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 */\n  @Prop() clientSetColumnsNumber: number = null;\n\n  /** Disables inbuilt pagination logic, leaving user an option to create own pagination functionality while listening to events from sdds-table-footer component */\n  @Prop() disablePaginationFunction: boolean = false;\n\n  /** State that memorize number of columns to display colSpan correctly - set from parent level */\n  @State() columnsNumber: number = 0;\n\n  /** Total number of pages, number of the rows divided with number of rows per page */\n  @State() numberOfPages: number = 0;\n\n  /** Initial value for pagination in input element */\n  @State() paginationValue: number = 1;\n\n  /** Temporarily disable pagination - due to search - set from parent level */\n  @State() tempPaginationDisable: boolean = false;\n\n  @State() verticalDividers: boolean = false;\n\n  @State() compactDesign: boolean = false;\n\n  @State() noMinWidth: boolean = false;\n\n  @State() whiteBackground: boolean = false;\n\n  @State() tableId: string = '';\n\n  @Element() host: HTMLElement;\n\n  tableEl: HTMLSddsTableElement;\n\n  /** Event that footer sends out in order to receive other necessary information from other subcomponents */\n  @Event({\n    eventName: 'enablePaginationEvent',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  enablePaginationEvent: EventEmitter<any>;\n\n  @Listen('tablePropsChangedEvent', { target: 'body' })\n  tablePropsChangedEventListener(event: CustomEvent<TablePropsChangedEvent>) {\n    if (this.tableId === event.detail.tableId) {\n      event.detail.changed\n        .filter((changedProp) => relevantTableProps.includes(changedProp))\n        .forEach((changedProp) => {\n          if (typeof this[changedProp] === 'undefined') {\n            throw new Error(`Table prop is not supported: ${changedProp}`);\n          }\n          this[changedProp] = event.detail[changedProp];\n        });\n    }\n  }\n\n  connectedCallback() {\n    this.tableEl = this.host.closest('sdds-table');\n    this.tableId = this.tableEl.tableId;\n  }\n\n  componentWillLoad() {\n    relevantTableProps.forEach((tablePropName) => {\n      this[tablePropName] = this.tableEl[tablePropName];\n    });\n\n    const numberOfRows = this.host.parentElement.querySelector('sdds-table-body').childElementCount;\n\n    const numberOfColumns =\n      this.host.parentElement.querySelector('sdds-table-header').childElementCount;\n\n    this.numberOfPages = Math.ceil(numberOfRows / this.rowsPerPage);\n\n    if (this.clientSetColumnsNumber !== null) {\n      this.columnsNumber = this.clientSetColumnsNumber;\n    } else {\n      this.columnsNumber = numberOfColumns;\n    }\n\n    this.enablePaginationEvent.emit(this.tableId);\n  }\n\n  paginationPrev = (event) => {\n    event.preventDefault();\n    // Enable lowering until 1st page\n    if (this.paginationValue >= 2) {\n      this.paginationValue--;\n      this.runPagination();\n    }\n  };\n\n  paginationNext = (event) => {\n    event.preventDefault();\n    // Enable increasing until the max number of pages\n    if (this.paginationValue <= this.numberOfPages) {\n      this.paginationValue++;\n      this.runPagination();\n    }\n  };\n\n  paginationInputChange(event) {\n    const insertedValue = event.target.value;\n\n    if (insertedValue > this.numberOfPages || insertedValue < 1) {\n      event.target.classList.add('sdds-table__page-selector-input--shake');\n      this.paginationValue = event.target.max;\n    } else {\n      this.paginationValue = event.target.value;\n    }\n    this.runPagination();\n  }\n\n  @Listen('runPaginationEvent', { target: 'body' })\n  runPaginationEventListener(event: CustomEvent<any>) {\n    if (this.tableId === event.detail) {\n      this.runPagination();\n    }\n  }\n\n  runPagination = () => {\n    if (!this.disablePaginationFunction) {\n      // grab all rows in body\n      const dataRowsPagination = this.host.parentNode\n        .querySelector('sdds-table-body')\n        .querySelectorAll('.sdds-table__row');\n\n      dataRowsPagination.forEach((item, i) => {\n        // for making logic easier 1st result, 2nd result...\n        const index = i + 1;\n\n        if (this.tempPaginationDisable) {\n          this.paginationValue = 1;\n        } else {\n          const lastResult = this.rowsPerPage * this.paginationValue;\n          const firstResult = lastResult - this.rowsPerPage;\n\n          if (index > firstResult && index <= lastResult) {\n            item.classList.remove('sdds-table__row--hidden');\n          } else {\n            item.classList.add('sdds-table__row--hidden');\n          }\n        }\n      });\n    }\n  };\n\n  /* Client based functions below */\n\n  /** Event to send current page value back to sdds-table-body component */\n  @Event({\n    eventName: 'currentPageValueEvent',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  currentPageValueEvent: EventEmitter<any>;\n\n  sendPaginationValue(value) {\n    this.currentPageValueEvent.emit([this.tableId, value]);\n  }\n\n  clientPaginationPrev = (event) => {\n    event.preventDefault();\n    // Enable lowering until 1st page\n    if (this.clientPaginationValue >= 2) {\n      this.clientPaginationValue--;\n      this.sendPaginationValue(this.clientPaginationValue);\n    }\n  };\n\n  clientPaginationNext = (event) => {\n    event.preventDefault();\n    // Enable increasing until the max number of pages\n    if (this.clientPaginationValue <= this.clientMaxPages) {\n      this.clientPaginationValue++;\n      this.sendPaginationValue(this.clientPaginationValue);\n    }\n  };\n\n  clientPaginationInputChange(event) {\n    const insertedValue = event.target.value;\n\n    if (insertedValue > this.clientMaxPages || insertedValue < 1) {\n      event.target.classList.add('sdds-table__page-selector-input--shake');\n      this.clientPaginationValue = event.target.max;\n    } else {\n      this.clientPaginationValue = event.target.value;\n    }\n    this.sendPaginationValue(this.clientPaginationValue);\n  }\n\n  render() {\n    return (\n      <Host class={this.compactDesign ? 'sdds-table--compact' : ''}>\n        <tr class=\"sdds-table__footer-row\">\n          <td class=\"sdds-table__footer-cell\" colSpan={this.columnsNumber}>\n            {this.enablePagination && !this.enableClientPagination && (\n              <div class=\"sdds-table__pagination\">\n                <div class=\"sdds-table__row-selector\"></div>\n                <div class=\"sdds-table__page-selector\">\n                  <input\n                    class=\"sdds-table__page-selector-input\"\n                    type=\"number\"\n                    min=\"1\"\n                    max={this.numberOfPages}\n                    value={this.paginationValue}\n                    pattern=\"[0-9]+\"\n                    dir=\"rtl\"\n                    onChange={(event) => this.paginationInputChange(event)}\n                    onFocusout={(event) => this.paginationInputChange(event)}\n                    onAnimationEnd={removeShakeAnimation}\n                    disabled={this.tempPaginationDisable}\n                  />\n                  <p class=\"sdds-table__footer-text\">\n                    of <span>{this.tempPaginationDisable ? 1 : this.numberOfPages}</span> pages\n                  </p>\n                  <button\n                    class=\"sdds-table__footer-btn\"\n                    disabled={this.paginationValue <= 1 || this.tempPaginationDisable}\n                    onClick={(event) => this.paginationPrev(event)}\n                  >\n                    <svg\n                      class=\"sdds-table__footer-btn-svg\"\n                      fill=\"currentColor\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 32 32\"\n                    >\n                      <path\n                        fill-rule=\"evenodd\"\n                        clip-rule=\"evenodd\"\n                        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\"\n                      />\n                    </svg>\n                  </button>\n                  <button\n                    class=\"sdds-table__footer-btn\"\n                    disabled={\n                      this.paginationValue >= this.numberOfPages || this.tempPaginationDisable\n                    }\n                    onClick={(event) => this.paginationNext(event)}\n                  >\n                    <svg\n                      class=\"sdds-table__footer-btn-svg\"\n                      fill=\"currentColor\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 32 32\"\n                    >\n                      <path\n                        fill-rule=\"evenodd\"\n                        clip-rule=\"evenodd\"\n                        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\"\n                      />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n            )}\n            {this.enableClientPagination && !this.enablePagination && (\n              <div class=\"sdds-table__pagination\">\n                <div class=\"sdds-table__row-selector\"></div>\n                <div class=\"sdds-table__page-selector\">\n                  <input\n                    class=\"sdds-table__page-selector-input\"\n                    type=\"number\"\n                    min=\"1\"\n                    max={this.clientMaxPages}\n                    value={this.clientPaginationValue}\n                    pattern=\"[0-9]+\"\n                    dir=\"rtl\"\n                    onChange={(event) => this.clientPaginationInputChange(event)}\n                    onFocusout={(event) => this.clientPaginationInputChange(event)}\n                    onAnimationEnd={removeShakeAnimation}\n                  />\n                  <p class=\"sdds-table__footer-text\">\n                    of <span>{this.clientMaxPages}</span> pages\n                  </p>\n                  <button\n                    class=\"sdds-table__footer-btn\"\n                    disabled={this.clientPaginationValue <= 1}\n                    onClick={(event) => this.clientPaginationPrev(event)}\n                  >\n                    <svg\n                      class=\"sdds-table__footer-btn-svg\"\n                      fill=\"currentColor\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 32 32\"\n                    >\n                      <path\n                        fill-rule=\"evenodd\"\n                        clip-rule=\"evenodd\"\n                        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\"\n                      />\n                    </svg>\n                  </button>\n                  <button\n                    class=\"sdds-table__footer-btn\"\n                    disabled={this.clientPaginationValue >= this.clientMaxPages}\n                    onClick={(event) => this.clientPaginationNext(event)}\n                  >\n                    <svg\n                      class=\"sdds-table__footer-btn-svg\"\n                      fill=\"currentColor\"\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 32 32\"\n                    >\n                      <path\n                        fill-rule=\"evenodd\"\n                        clip-rule=\"evenodd\"\n                        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\"\n                      />\n                    </svg>\n                  </button>\n                </div>\n              </div>\n            )}\n          </td>\n        </tr>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -2,98 +2,100 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-b98965c7.js');
+const index = require('./index-18eb94f0.js');
 
 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',
-];
-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;
+
+//# sourceMappingURL=sdds-table-header.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"sdds-table-header.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["./src/components/data-table/table-header/table-header.scss?tag=sdds-table-header&encapsulation=shadow","./src/components/data-table/table-header/table-header.tsx"],"sourcesContent":["/* As checkbox is not a web component, we have to import them here in order to have styles available - shadow DOM is a reason */\n@import '../../checkbox/checkbox';\n@import '../../../mixins/box-sizing';\n\n:host {\n  @include sdds-box-sizing;\n\n  display: table-header-group;\n\n  .sdds-table__header-cell--checkbox {\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    display: table-cell;\n    text-align: left;\n    color: var(--sdds-data-table-color);\n    background-color: var(--sdds-data-table-header-background);\n    border-bottom: 1px solid var(--sdds-data-table-divider);\n    height: 48px;\n    box-sizing: border-box;\n\n    // To fix issues with border-radius propagating up from button\n    overflow: hidden;\n    transition: background-color 200ms ease;\n    min-width: unset;\n    width: 48px;\n    padding: 0;\n    border-top-left-radius: 4px;\n  }\n\n  // Extra rule for label use in data-data-table\n  .sdds-form-label--data-table {\n    width: 100%;\n    height: 48px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n  }\n\n  .sdds-table__expand-control-container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 48px;\n    cursor: pointer;\n\n    .sdds-table__expand-input {\n      display: none;\n    }\n\n    .sdds-expandable-row-icon {\n      height: 20px;\n      width: 20px;\n      transition: transform 200ms ease;\n      transform: rotate(0);\n    }\n\n    .sdds-expandable-row-icon--opened {\n      transform: rotate(180deg);\n    }\n  }\n\n  ::slotted(sdds-header-cell:hover) {\n    background-color: var(--sdds-data-table-header-background-hover);\n  }\n}\n\n:host(.sdds-table--compact) {\n  .sdds-table__header-cell--checkbox {\n    height: 32px;\n  }\n\n  // Extra rule for label use in data-data-table\n  .sdds-form-label--data-table {\n    height: 32px;\n  }\n}\n\n:host(.sdds-table--divider) {\n  .sdds-table__header-cell--checkbox {\n    border-right: 1px solid var(--sdds-data-table-divider);\n  }\n}\n\n:host(.sdds-table--toolbar-available) {\n  .sdds-table__header-cell--checkbox {\n    border-top-left-radius: 0;\n  }\n}\n","import { Component, h, Host, State, Event, EventEmitter, Listen, Element } from '@stencil/core';\nimport { TablePropsChangedEvent } from '../table/table';\n\nconst relevantTableProps: TablePropsChangedEvent['changed'] = [\n  'enableMultiselect',\n  'enableExpandableRows',\n  'verticalDividers',\n  'compactDesign',\n  'noMinWidth',\n];\n\n@Component({\n  tag: 'sdds-table-header',\n  styleUrl: 'table-header.scss',\n  shadow: true,\n})\nexport class TableHeaderRow {\n  @State() enableMultiselect: boolean = false;\n\n  @State() enableExpandableRows: boolean = false;\n\n  @State() mainCheckboxSelected: boolean = false;\n\n  @State() mainExpendSelected: boolean = false;\n\n  @State() verticalDividers: boolean = false;\n\n  @State() compactDesign: boolean = false;\n\n  @State() noMinWidth: boolean = false;\n\n  @State() whiteBackground: boolean = false;\n\n  @State() enableToolbarDesign: boolean = false;\n\n  @State() tableId: string = '';\n\n  @Element() host: HTMLElement;\n\n  tableEl: HTMLSddsTableElement;\n\n  /** Send status of main checkbox in header to the parent, sdds-table component */\n  @Event({\n    eventName: 'mainCheckboxSelectedEvent',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  mainCheckboxSelectedEvent: EventEmitter<any>;\n\n  @Listen('tablePropsChangedEvent', { target: 'body' })\n  tablePropsChangedEventListener(event: CustomEvent<TablePropsChangedEvent>) {\n    if (this.tableId === event.detail.tableId) {\n      event.detail.changed\n        .filter((changedProp) => relevantTableProps.includes(changedProp))\n        .forEach((changedProp) => {\n          if (typeof this[changedProp] === 'undefined') {\n            throw new Error(`Table prop is not supported: ${changedProp}`);\n          }\n          this[changedProp] = event.detail[changedProp];\n        });\n    }\n  }\n\n  @Listen('updateMainCheckboxEvent', { target: 'body' })\n  updateMainCheckboxEventListener(event: CustomEvent<any>) {\n    const [receivedID, receivedMainCheckboxStatus] = event.detail;\n    if (this.tableId === receivedID) {\n      this.mainCheckboxSelected = receivedMainCheckboxStatus;\n    }\n  }\n\n  @Listen('singleRowExpandedEvent', { target: 'body' })\n  singleRowExpandedEventListener(event: CustomEvent<any>) {\n    if (this.tableId === event.detail[0]) {\n      // TODO: Improve this logic. Why we get late repose in DOM?\n      setTimeout(() => {\n        this.bodyExpandClicked();\n      }, 100);\n    }\n  }\n\n  bodyExpandClicked() {\n    const numberOfExtendRowsActive = this.host.parentElement\n      .querySelector('sdds-table-body')\n      .getElementsByClassName('sdds-table__row-extend--active').length;\n    const numberOfExtendRows = this.host.parentElement\n      .querySelector('sdds-table-body')\n      .getElementsByTagName('sdds-table-body-row-expendable').length;\n\n    if (numberOfExtendRows === numberOfExtendRowsActive) {\n      this.mainExpendSelected = true;\n    } else {\n      this.mainExpendSelected = false;\n    }\n  }\n\n  connectedCallback() {\n    this.tableEl = this.host.closest('sdds-table');\n    this.tableId = this.tableEl.tableId;\n  }\n\n  componentWillLoad() {\n    relevantTableProps.forEach((tablePropName) => {\n      this[tablePropName] = this.tableEl[tablePropName];\n    });\n  }\n\n  componentWillRender() {\n    this.enableToolbarDesign =\n      this.host.closest('sdds-table').getElementsByTagName('sdds-table-toolbar').length >= 1;\n  }\n\n  headCheckBoxClicked(event) {\n    this.mainCheckboxSelected = event.currentTarget.checked;\n    this.mainCheckboxSelectedEvent.emit([this.tableId, this.mainCheckboxSelected]);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          'sdds-table--compact': this.compactDesign,\n          'sdds-table--divider': this.verticalDividers,\n          'sdds-table--toolbar-available': this.enableToolbarDesign,\n        }}\n      >\n        <tr>\n          {this.enableMultiselect && (\n            <th class=\"sdds-table__header-cell sdds-table__header-cell--checkbox\">\n              <div class=\"sdds-checkbox-item\">\n                <label class=\"sdds-form-label sdds-form-label--data-table\">\n                  <input\n                    class=\"sdds-form-input\"\n                    type=\"checkbox\"\n                    onChange={(e) => this.headCheckBoxClicked(e)}\n                    checked={this.mainCheckboxSelected}\n                  />\n                </label>\n              </div>\n            </th>\n          )}\n          {this.enableExpandableRows && (\n            <th class=\"sdds-table__header-cell sdds-table__header-cell--checkbox\"></th>\n          )}\n          <slot></slot>\n        </tr>\n      </Host>\n    );\n  }\n}\n"],"version":3}