@scania/tegel 0.0.1-beta.7 → 0.0.2

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

@@ -1,193 +1,192 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
-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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.enablePaginationEvent = createEvent(this, "enablePaginationEvent", 7);
-    this.currentPageValueEvent = 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 (h(Host, { class: this.compactDesign ? 'sdds-table--compact' : '' }, h("tr", { class: "sdds-table__footer-row" }, h("td", { class: "sdds-table__footer-cell", colSpan: this.columnsNumber }, this.enablePagination && !this.enableClientPagination && (h("div", { class: "sdds-table__pagination" }, h("div", { class: "sdds-table__row-selector" }), h("div", { class: "sdds-table__page-selector" }, 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 }), h("p", { class: "sdds-table__footer-text" }, "of ", h("span", null, this.tempPaginationDisable ? 1 : this.numberOfPages), " pages"), h("button", { class: "sdds-table__footer-btn", disabled: this.paginationValue <= 1 || this.tempPaginationDisable, onClick: (event) => this.paginationPrev(event) }, h("svg", { class: "sdds-table__footer-btn-svg", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, 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" }))), h("button", { class: "sdds-table__footer-btn", disabled: this.paginationValue >= this.numberOfPages || this.tempPaginationDisable, onClick: (event) => this.paginationNext(event) }, h("svg", { class: "sdds-table__footer-btn-svg", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, 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 && (h("div", { class: "sdds-table__pagination" }, h("div", { class: "sdds-table__row-selector" }), h("div", { class: "sdds-table__page-selector" }, 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 }), h("p", { class: "sdds-table__footer-text" }, "of ", h("span", null, this.clientMaxPages), " pages"), h("button", { class: "sdds-table__footer-btn", disabled: this.clientPaginationValue <= 1, onClick: (event) => this.clientPaginationPrev(event) }, h("svg", { class: "sdds-table__footer-btn-svg", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, 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" }))), h("button", { class: "sdds-table__footer-btn", disabled: this.clientPaginationValue >= this.clientMaxPages, onClick: (event) => this.clientPaginationNext(event) }, h("svg", { class: "sdds-table__footer-btn-svg", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, 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 this; }
-  static get style() { return tableFooterCss; }
-}, [1, "sdds-table-footer", {
-    "enablePagination": [516, "enable-pagination"],
-    "rowsPerPage": [514, "rows-per-page"],
-    "enableClientPagination": [516, "enable-client-pagination"],
-    "clientPaginationValue": [514, "client-pagination-value"],
-    "clientMaxPages": [514, "client-max-pages"],
-    "clientSetColumnsNumber": [2, "client-set-columns-number"],
-    "disablePaginationFunction": [4, "disable-pagination-function"],
-    "columnsNumber": [32],
-    "numberOfPages": [32],
-    "paginationValue": [32],
-    "tempPaginationDisable": [32],
-    "verticalDividers": [32],
-    "compactDesign": [32],
-    "noMinWidth": [32],
-    "whiteBackground": [32],
-    "tableId": [32]
-  }, [[16, "tablePropsChangedEvent", "tablePropsChangedEventListener"], [16, "runPaginationEvent", "runPaginationEventListener"]]]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-table-footer"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-table-footer":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TableFooter);
-      }
-      break;
-  } });
+const relevantTableProps = [
+  'compactDesign',
+  'noMinWidth',
+  'verticalDividers',
+];
+function removeShakeAnimation(e) {
+  e.target.classList.remove('sdds-table__page-selector-input--shake');
+}
+const TableFooter = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.enablePaginationEvent = createEvent(this, "enablePaginationEvent", 7);
+    this.currentPageValueEvent = 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 (h(Host, { class: this.compactDesign ? 'sdds-table--compact' : '' }, h("tr", { class: "sdds-table__footer-row" }, h("td", { class: "sdds-table__footer-cell", colSpan: this.columnsNumber }, this.enablePagination && !this.enableClientPagination && (h("div", { class: "sdds-table__pagination" }, h("div", { class: "sdds-table__row-selector" }), h("div", { class: "sdds-table__page-selector" }, 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 }), h("p", { class: "sdds-table__footer-text" }, "of ", h("span", null, this.tempPaginationDisable ? 1 : this.numberOfPages), " pages"), h("button", { class: "sdds-table__footer-btn", disabled: this.paginationValue <= 1 || this.tempPaginationDisable, onClick: (event) => this.paginationPrev(event) }, h("svg", { class: "sdds-table__footer-btn-svg", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, 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" }))), h("button", { class: "sdds-table__footer-btn", disabled: this.paginationValue >= this.numberOfPages || this.tempPaginationDisable, onClick: (event) => this.paginationNext(event) }, h("svg", { class: "sdds-table__footer-btn-svg", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, 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 && (h("div", { class: "sdds-table__pagination" }, h("div", { class: "sdds-table__row-selector" }), h("div", { class: "sdds-table__page-selector" }, 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 }), h("p", { class: "sdds-table__footer-text" }, "of ", h("span", null, this.clientMaxPages), " pages"), h("button", { class: "sdds-table__footer-btn", disabled: this.clientPaginationValue <= 1, onClick: (event) => this.clientPaginationPrev(event) }, h("svg", { class: "sdds-table__footer-btn-svg", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, 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" }))), h("button", { class: "sdds-table__footer-btn", disabled: this.clientPaginationValue >= this.clientMaxPages, onClick: (event) => this.clientPaginationNext(event) }, h("svg", { class: "sdds-table__footer-btn-svg", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, 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 this; }
+  static get style() { return tableFooterCss; }
+}, [1, "sdds-table-footer", {
+    "enablePagination": [516, "enable-pagination"],
+    "rowsPerPage": [514, "rows-per-page"],
+    "enableClientPagination": [516, "enable-client-pagination"],
+    "clientPaginationValue": [514, "client-pagination-value"],
+    "clientMaxPages": [514, "client-max-pages"],
+    "clientSetColumnsNumber": [2, "client-set-columns-number"],
+    "disablePaginationFunction": [4, "disable-pagination-function"],
+    "columnsNumber": [32],
+    "numberOfPages": [32],
+    "paginationValue": [32],
+    "tempPaginationDisable": [32],
+    "verticalDividers": [32],
+    "compactDesign": [32],
+    "noMinWidth": [32],
+    "whiteBackground": [32],
+    "tableId": [32]
+  }, [[16, "tablePropsChangedEvent", "tablePropsChangedEventListener"], [16, "runPaginationEvent", "runPaginationEventListener"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-table-footer"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-table-footer":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TableFooter);
+      }
+      break;
+  } });
 }
 
 const SddsTableFooter = TableFooter;