@scania/tegel 0.0.1-beta.9 → 0.0.4

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

@@ -0,0 +1,291 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-18eb94f0.js');
+
+const dummyData = [
+	{
+		truck: "L-series",
+		driver: "Sonya Bruce",
+		country: "Brazil",
+		mileage: 123987
+	},
+	{
+		truck: "P-series",
+		driver: "Guerra Bowman",
+		country: "Sweden",
+		mileage: 2000852
+	},
+	{
+		truck: "G-series",
+		driver: "Ferrell Wallace",
+		country: "Germany",
+		mileage: 564
+	},
+	{
+		truck: "R-series",
+		driver: "Cox Burris",
+		country: "Spain",
+		mileage: 1789357
+	},
+	{
+		truck: "S-series",
+		driver: "Montgomery Cervantes",
+		country: "Croatia",
+		mileage: 65
+	},
+	{
+		truck: "L-series",
+		driver: "Sheryl Nielsen",
+		country: "Greece",
+		mileage: 365784
+	},
+	{
+		truck: "G-series",
+		driver: "Benton Gomez",
+		country: "France",
+		mileage: 80957
+	}
+];
+
+const tableBodyCss = ":host,sdds-table-body{box-sizing:border-box;display:table-row-group}:host *,sdds-table-body *{box-sizing:border-box}:host .sdds-table__info-message,sdds-table-body .sdds-table__info-message{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);display:table-cell;box-sizing:border-box;color:var(--sdds-data-table-color);padding:var(--sdds-spacing-element-16);min-width:192px;vertical-align:top;background-color:transparent;transition:background-color 200ms ease}";
+
+const relevantTableProps = [
+  'enableMultiselect',
+  'enableExpandableRows',
+];
+const TableBody = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.sortingSwitcherEvent = index.createEvent(this, "sortingSwitcherEvent", 7);
+    this.updateBodyCheckboxesEvent = index.createEvent(this, "updateBodyCheckboxesEvent", 7);
+    this.updateMainCheckboxEvent = index.createEvent(this, "updateMainCheckboxEvent", 7);
+    this.uncheckAll = () => {
+      this.mainCheckboxStatus = false;
+      this.updateMainCheckboxEvent.emit([this.tableId, this.mainCheckboxStatus]);
+      this.updateBodyCheckboxesEvent.emit([this.tableId, this.mainCheckboxStatus]);
+    };
+    this.selectedDataExporter = () => {
+      const selectedRows = this.host.getElementsByClassName('sdds-table__row--selected');
+      this.multiselectArray = [];
+      for (let j = 0; j < selectedRows.length; j++) {
+        const rowCells = selectedRows[j].getElementsByTagName('sdds-body-cell');
+        const selectedObject = {};
+        for (let i = 0; i < rowCells.length; i++) {
+          const currentCellKey = rowCells[i].getAttribute('cell-key');
+          const currentCellValue = rowCells[i].getAttribute('cell-value');
+          selectedObject[currentCellKey] = currentCellValue;
+        }
+        this.multiselectArray.push(selectedObject);
+      }
+      this.multiselectArrayJSON = JSON.stringify(this.multiselectArray);
+    };
+    this.bodyCheckBoxClicked = () => {
+      const numberOfRows = this.host.getElementsByClassName('sdds-table__row').length;
+      const numberOfRowsSelected = this.host.getElementsByClassName('sdds-table__row--selected').length;
+      this.mainCheckboxStatus = numberOfRows === numberOfRowsSelected;
+      this.updateMainCheckboxEvent.emit([this.tableId, this.mainCheckboxStatus]);
+      this.selectedDataExporter();
+    };
+    this.disableFilteringFunction = false;
+    this.disableSortingFunction = false;
+    this.bodyData = undefined;
+    this.enableDummyData = false;
+    this.dummyData = JSON.stringify(dummyData);
+    this.rowsPerPage = 1;
+    this.enableMultiselect = false;
+    this.enablePaginationTableBody = false;
+    this.enableExpandableRows = true;
+    this.innerBodyData = [];
+    this.bodyDataManipulated = [];
+    this.bodyDataOriginal = [];
+    this.multiselectArray = [];
+    this.multiselectArrayJSON = undefined;
+    this.mainCheckboxStatus = false;
+    this.columnsNumber = 0;
+    this.disableAllSorting = false;
+    this.numberOfPages = 0;
+    this.paginationValue = 1;
+    this.tempPaginationDisable = false;
+    this.showNoResultsMessage = false;
+    this.tableId = '';
+  }
+  arrayDataWatcher(newValue) {
+    if (typeof newValue === 'string') {
+      this.innerBodyData = JSON.parse(newValue);
+    }
+    else {
+      this.innerBodyData = newValue;
+    }
+    this.bodyDataManipulated = [...this.innerBodyData];
+    this.bodyDataOriginal = [...this.innerBodyData];
+  }
+  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];
+      });
+    }
+  }
+  static compareValues(key, order = 'asc') {
+    return function innerSort(a, b) {
+      // eslint-disable-next-line no-prototype-builtins
+      if (!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) {
+        // property doesn't exist on either object
+        return 0;
+      }
+      const varA = typeof a[key] === 'string' ? a[key].toUpperCase() : a[key];
+      const varB = typeof b[key] === 'string' ? b[key].toUpperCase() : b[key];
+      let comparison = 0;
+      if (varA > varB) {
+        comparison = 1;
+      }
+      else if (varA < varB) {
+        comparison = -1;
+      }
+      return order === 'desc' ? comparison * -1 : comparison;
+    };
+  }
+  sortData(keyValue, sortingDirection) {
+    if (!this.disableSortingFunction) {
+      if (this.enableMultiselect) {
+        // Uncheck all checkboxes as state of checkbox is lost on sorting. Do it only in case multiSelect is True.
+        this.uncheckAll();
+      }
+      // use spread operator to make enable sorting and modifying array, same as using .slice()
+      this.bodyDataManipulated = [...this.bodyDataManipulated];
+      this.bodyDataManipulated.sort(TableBody.compareValues(keyValue, sortingDirection));
+    }
+  }
+  // Listen to sortColumnData from data-table-header-element
+  updateOptionsContent(event) {
+    const [receivedID, receivedKeyValue, receivedSortingDirection] = event.detail;
+    if (this.tableId === receivedID) {
+      this.sortData(receivedKeyValue, receivedSortingDirection);
+    }
+  }
+  headCheckboxListener(event) {
+    if (this.tableId === event.detail[0]) {
+      [, this.mainCheckboxStatus] = event.detail;
+      this.selectedDataExporter();
+    }
+  }
+  // No need to read the value, event is here just to trigger another function
+  bodyCheckboxListener() {
+    this.bodyCheckBoxClicked();
+  }
+  searchFunction(searchTerm) {
+    if (!this.disableFilteringFunction) {
+      /*
+      // Logic for filtering JSON data on all columns
+      // Really nice solution, do not delete, might be needed in future
+      // Reason to go with upper one is not to lose selected state on checkboxes
+      if (searchTerm.length > 0) {
+        this.bodyDataManipulated = this.bodyDataOriginal.filter((option) =>
+          Object.keys(option).some(
+            (key) =>
+              String(option[key] ?? '')
+                .toLowerCase()
+                .indexOf(searchTerm) >= 0
+          )
+        );
+      } else {
+        this.bodyDataManipulated = this.bodyDataOriginal;
+      }
+  */
+      // grab all rows in body
+      const dataRowsFiltering = this.host.querySelectorAll('sdds-table-body-row');
+      if (searchTerm.length > 0) {
+        if (this.enablePaginationTableBody) {
+          this.tempPaginationDisable = true;
+        }
+        dataRowsFiltering.forEach((item) => {
+          const cells = item.querySelectorAll('sdds-body-cell');
+          const cellValuesArray = [];
+          // go through cells and save cell-values in array
+          cells.forEach((cellItem) => {
+            const cellValue = cellItem.getAttribute('cell-value').toLowerCase();
+            cellValuesArray.push(cellValue);
+          });
+          // iterate over array of values and see if one matches search string
+          const matchCounter = cellValuesArray.find((element) => element.includes(searchTerm));
+          // if matches, show parent row, otherwise hide the row
+          if (matchCounter) {
+            item.classList.remove('sdds-table__row--hidden');
+          }
+          else {
+            item.classList.add('sdds-table__row--hidden');
+          }
+        });
+        this.disableAllSorting = true;
+        this.sortingSwitcherEvent.emit([this.tableId, this.disableAllSorting]);
+        const dataRowsHidden = this.host.querySelectorAll('.sdds-table__row--hidden');
+        // If same, info message will be shown
+        this.showNoResultsMessage = dataRowsHidden.length === dataRowsFiltering.length;
+      }
+      else {
+        if (this.enablePaginationTableBody) {
+          this.tempPaginationDisable = false;
+        }
+        // Check if pagination is ON in order to prevent showing all rows
+        if (this.enablePaginationTableBody) ;
+        else {
+          dataRowsFiltering.forEach((item) => {
+            item.classList.remove('sdds-table__row--hidden');
+          });
+        }
+        this.disableAllSorting = false;
+        this.sortingSwitcherEvent.emit([this.tableId, this.disableAllSorting]);
+      }
+    }
+  }
+  // Listen to tableFilteringTerm from tableToolbar component
+  tableFilteringTermListener(event) {
+    if (this.tableId === event.detail[0]) {
+      this.searchFunction(event.detail[1]);
+    }
+  }
+  connectedCallback() {
+    this.tableEl = this.host.closest('sdds-table');
+    this.tableId = this.tableEl.tableId;
+  }
+  componentWillLoad() {
+    relevantTableProps.forEach((tablePropName) => {
+      this[tablePropName] = this.tableEl[tablePropName];
+    });
+    if (this.enableDummyData) {
+      this.bodyData = this.dummyData;
+    }
+    else if (this.bodyData) {
+      this.arrayDataWatcher(this.bodyData);
+    }
+  }
+  componentWillRender() {
+    const headerColumnsNo = this.host.parentElement.querySelector('sdds-table-header').children.length;
+    // multiselect and expended features requires one extra column for controls...
+    if (this.enableMultiselect || this.enableExpandableRows) {
+      this.columnsNumber = headerColumnsNo + 1;
+    }
+    else {
+      this.columnsNumber = headerColumnsNo;
+    }
+  }
+  render() {
+    return (index.h(index.Host, { "data-selected-rows": this.multiselectArrayJSON }, this.bodyDataManipulated.map((row) => (index.h("sdds-table-body-row", null, Object.keys(row).map((cellData) => (index.h("sdds-body-cell", { "cell-key": cellData, "cell-value": row[cellData] })))))), this.showNoResultsMessage && (index.h("tr", null, index.h("td", { class: "sdds-table__info-message", colSpan: this.columnsNumber }, "Unfortunately, no data matches your search term \uD83D\uDE15"))), index.h("slot", null)));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "bodyData": ["arrayDataWatcher"]
+  }; }
+};
+TableBody.style = tableBodyCss;
+
+exports.sdds_table_body = TableBody;
+
+//# sourceMappingURL=sdds-table-body.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"sdds-table-body.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["./src/components/data-table/table-body/table-body.scss?tag=sdds-table-body","./src/components/data-table/table-body/table-body.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host,\nsdds-table-body {\n  @include sdds-box-sizing;\n\n  display: table-row-group;\n\n  .sdds-table__info-message {\n    font: var(--sdds-detail-02);\n    letter-spacing: var(--sdds-detail-02-ls);\n    display: table-cell;\n    box-sizing: border-box;\n    color: var(--sdds-data-table-color);\n    padding: var(--sdds-spacing-element-16);\n    min-width: 192px;\n    vertical-align: top;\n    background-color: transparent;\n    transition: background-color 200ms ease;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport dummyData from './dummy-data.json';\nimport { TablePropsChangedEvent } from '../table/table';\n\nconst relevantTableProps: TablePropsChangedEvent['changed'] = [\n  'enableMultiselect',\n  'enableExpandableRows',\n];\n\n@Component({\n  tag: 'sdds-table-body',\n  styleUrl: 'table-body.scss',\n  shadow: false,\n})\nexport class TableBody {\n  /** Disables inbuilt filtering logic, leaving user an option to create own filter functionality while listening to events from sdds-table-toolbar component for search term */\n  @Prop() disableFilteringFunction: boolean = false;\n\n  /** Disables inbuilt sorting logic, leaving user an option to create own sorting functionality while listening to events from sdds-header-cell component for sorting */\n  @Prop() disableSortingFunction: boolean = false;\n\n  /** Prop to pass JSON string which enables automatic rendering of table rows and cells  */\n  @Prop() bodyData: any;\n\n  /** Prop for showcase of rendering JSON in body-data, just for presentation purposes */\n  @Prop() enableDummyData: boolean = false;\n\n  @State() dummyData: any = JSON.stringify(dummyData);\n\n  @Element() host: HTMLElement;\n\n  @State() rowsPerPage: number = 1;\n\n  @State() enableMultiselect: boolean = false;\n\n  @State() enablePaginationTableBody: boolean = false;\n\n  @State() enableExpandableRows: boolean = true;\n\n  @State() innerBodyData = [];\n\n  @State() bodyDataManipulated = [];\n\n  @State() bodyDataOriginal = [];\n\n  @State() multiselectArray = [];\n\n  @State() multiselectArrayJSON: string;\n\n  @State() mainCheckboxStatus: boolean = false;\n\n  @State() columnsNumber: number = 0;\n\n  @State() disableAllSorting: boolean = false;\n\n  @State() numberOfPages: number = 0;\n\n  @State() paginationValue: number = 1;\n\n  @State() tempPaginationDisable: boolean = false;\n\n  @State() showNoResultsMessage: boolean = false;\n\n  @State() tableId: string = '';\n\n  tableEl: HTMLSddsTableElement;\n\n  @Watch('bodyData')\n  arrayDataWatcher(newValue: string) {\n    if (typeof newValue === 'string') {\n      this.innerBodyData = JSON.parse(newValue);\n    } else {\n      this.innerBodyData = newValue;\n    }\n    this.bodyDataManipulated = [...this.innerBodyData];\n    this.bodyDataOriginal = [...this.innerBodyData];\n  }\n\n  /** Event that sends unique table identifier and enable/disable status for sorting functionality */\n  @Event({\n    eventName: 'sortingSwitcherEvent',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sortingSwitcherEvent: EventEmitter<any>;\n\n  /** Sends unique table identifier and mainCheckbox status to all rows when multiselect feature is enabled */\n  @Event({\n    eventName: 'updateBodyCheckboxesEvent',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  updateBodyCheckboxesEvent: EventEmitter<any>;\n\n  /** Sends unique table identifier and status if mainCheckbox should change its state based on selection status of single rows when multiselect feature is used */\n  @Event({\n    eventName: 'updateMainCheckboxEvent',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  updateMainCheckboxEvent: 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  static compareValues(key, order = 'asc') {\n    return function innerSort(a, b) {\n      // eslint-disable-next-line no-prototype-builtins\n      if (!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) {\n        // property doesn't exist on either object\n        return 0;\n      }\n\n      const varA = typeof a[key] === 'string' ? a[key].toUpperCase() : a[key];\n      const varB = typeof b[key] === 'string' ? b[key].toUpperCase() : b[key];\n\n      let comparison = 0;\n      if (varA > varB) {\n        comparison = 1;\n      } else if (varA < varB) {\n        comparison = -1;\n      }\n      return order === 'desc' ? comparison * -1 : comparison;\n    };\n  }\n\n  uncheckAll = () => {\n    this.mainCheckboxStatus = false;\n    this.updateMainCheckboxEvent.emit([this.tableId, this.mainCheckboxStatus]);\n    this.updateBodyCheckboxesEvent.emit([this.tableId, this.mainCheckboxStatus]);\n  };\n\n  sortData(keyValue, sortingDirection) {\n    if (!this.disableSortingFunction) {\n      if (this.enableMultiselect) {\n        // Uncheck all checkboxes as state of checkbox is lost on sorting. Do it only in case multiSelect is True.\n        this.uncheckAll();\n      }\n\n      // use spread operator to make enable sorting and modifying array, same as using .slice()\n      this.bodyDataManipulated = [...this.bodyDataManipulated];\n      this.bodyDataManipulated.sort(TableBody.compareValues(keyValue, sortingDirection));\n    }\n  }\n\n  // Listen to sortColumnData from data-table-header-element\n  @Listen('sortColumnDataEvent', { target: 'body' })\n  updateOptionsContent(event: CustomEvent<any>) {\n    const [receivedID, receivedKeyValue, receivedSortingDirection] = event.detail;\n    if (this.tableId === receivedID) {\n      this.sortData(receivedKeyValue, receivedSortingDirection);\n    }\n  }\n\n  selectedDataExporter = () => {\n    const selectedRows = this.host.getElementsByClassName('sdds-table__row--selected');\n\n    this.multiselectArray = [];\n    for (let j = 0; j < selectedRows.length; j++) {\n      const rowCells = selectedRows[j].getElementsByTagName('sdds-body-cell');\n      const selectedObject = {};\n      for (let i = 0; i < rowCells.length; i++) {\n        const currentCellKey = rowCells[i].getAttribute('cell-key');\n        const currentCellValue = rowCells[i].getAttribute('cell-value');\n        selectedObject[currentCellKey] = currentCellValue;\n      }\n      this.multiselectArray.push(selectedObject);\n    }\n    this.multiselectArrayJSON = JSON.stringify(this.multiselectArray);\n  };\n\n  @Listen('mainCheckboxSelectedEvent', { target: 'body' })\n  headCheckboxListener(event: CustomEvent<any>) {\n    if (this.tableId === event.detail[0]) {\n      [, this.mainCheckboxStatus] = event.detail;\n      this.selectedDataExporter();\n    }\n  }\n\n  bodyCheckBoxClicked = () => {\n    const numberOfRows = this.host.getElementsByClassName('sdds-table__row').length;\n\n    const numberOfRowsSelected = this.host.getElementsByClassName(\n      'sdds-table__row--selected',\n    ).length;\n\n    this.mainCheckboxStatus = numberOfRows === numberOfRowsSelected;\n\n    this.updateMainCheckboxEvent.emit([this.tableId, this.mainCheckboxStatus]);\n\n    this.selectedDataExporter();\n  };\n\n  // No need to read the value, event is here just to trigger another function\n  @Listen('bodyRowToTable', { target: 'body' })\n  bodyCheckboxListener() {\n    this.bodyCheckBoxClicked();\n  }\n\n  searchFunction(searchTerm) {\n    if (!this.disableFilteringFunction) {\n      /*\n      // Logic for filtering JSON data on all columns\n      // Really nice solution, do not delete, might be needed in future\n      // Reason to go with upper one is not to lose selected state on checkboxes\n      if (searchTerm.length > 0) {\n        this.bodyDataManipulated = this.bodyDataOriginal.filter((option) =>\n          Object.keys(option).some(\n            (key) =>\n              String(option[key] ?? '')\n                .toLowerCase()\n                .indexOf(searchTerm) >= 0\n          )\n        );\n      } else {\n        this.bodyDataManipulated = this.bodyDataOriginal;\n      }\n  */\n\n      // grab all rows in body\n      const dataRowsFiltering = this.host.querySelectorAll('sdds-table-body-row');\n\n      if (searchTerm.length > 0) {\n        if (this.enablePaginationTableBody) {\n          this.tempPaginationDisable = true;\n        }\n\n        dataRowsFiltering.forEach((item) => {\n          const cells = item.querySelectorAll('sdds-body-cell');\n          const cellValuesArray = [];\n\n          // go through cells and save cell-values in array\n          cells.forEach((cellItem) => {\n            const cellValue = cellItem.getAttribute('cell-value').toLowerCase();\n            cellValuesArray.push(cellValue);\n          });\n\n          // iterate over array of values and see if one matches search string\n          const matchCounter = cellValuesArray.find((element) => element.includes(searchTerm));\n\n          // if matches, show parent row, otherwise hide the row\n          if (matchCounter) {\n            item.classList.remove('sdds-table__row--hidden');\n          } else {\n            item.classList.add('sdds-table__row--hidden');\n          }\n        });\n\n        this.disableAllSorting = true;\n        this.sortingSwitcherEvent.emit([this.tableId, this.disableAllSorting]);\n\n        const dataRowsHidden = this.host.querySelectorAll('.sdds-table__row--hidden');\n\n        // If same, info message will be shown\n        this.showNoResultsMessage = dataRowsHidden.length === dataRowsFiltering.length;\n      } else {\n        if (this.enablePaginationTableBody) {\n          this.tempPaginationDisable = false;\n        }\n\n        // Check if pagination is ON in order to prevent showing all rows\n        if (this.enablePaginationTableBody) {\n          // TODO: EMIT PAGINATION\n        } else {\n          dataRowsFiltering.forEach((item) => {\n            item.classList.remove('sdds-table__row--hidden');\n          });\n        }\n\n        this.disableAllSorting = false;\n        this.sortingSwitcherEvent.emit([this.tableId, this.disableAllSorting]);\n      }\n    }\n  }\n\n  // Listen to tableFilteringTerm from tableToolbar component\n  @Listen('tableFilteringTerm', { target: 'body' })\n  tableFilteringTermListener(event: CustomEvent<any>) {\n    if (this.tableId === event.detail[0]) {\n      this.searchFunction(event.detail[1]);\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    if (this.enableDummyData) {\n      this.bodyData = this.dummyData;\n    } else if (this.bodyData) {\n      this.arrayDataWatcher(this.bodyData);\n    }\n  }\n\n  componentWillRender() {\n    const headerColumnsNo =\n      this.host.parentElement.querySelector('sdds-table-header').children.length;\n\n    // multiselect and expended features requires one extra column for controls...\n    if (this.enableMultiselect || this.enableExpandableRows) {\n      this.columnsNumber = headerColumnsNo + 1;\n    } else {\n      this.columnsNumber = headerColumnsNo;\n    }\n  }\n\n  render() {\n    return (\n      <Host data-selected-rows={this.multiselectArrayJSON}>\n        {this.bodyDataManipulated.map((row) => (\n          <sdds-table-body-row>\n            {Object.keys(row).map((cellData) => (\n              <sdds-body-cell cell-key={cellData} cell-value={row[cellData]}></sdds-body-cell>\n            ))}\n          </sdds-table-body-row>\n        ))}\n        {this.showNoResultsMessage && (\n          <tr>\n            <td class=\"sdds-table__info-message\" colSpan={this.columnsNumber}>\n              Unfortunately, no data matches your search term &#128533;\n            </td>\n          </tr>\n        )}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,166 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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); }
+};
+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}