@paperless/core 0.1.0-alpha.16 → 0.1.0-alpha.161

package/dist/collection/components/organisms/table/table.component.js

@@ -0,0 +1,1070 @@
+import { Component, Element, Event, h, Host, Listen, Prop, State, Watch, } from '@stencil/core';
+import { objectGetByPath } from '../../../utils/object-get-by-path';
+import { defaultSize, defaultSizeOptions, } from '../../molecules/page-size-select/constants';
+export class Table {
+  constructor() {
+    /**
+     * Wether data is loading
+     */
+    this.loading = false;
+    /**
+     * The amount of loading rows to show
+     */
+    this.amountOfLoadingRows = 4;
+    /**
+     * Wether to enable selection
+     */
+    this.enableRowSelection = true;
+    /**
+     * Wether to enable row clicking
+     */
+    this.enableRowClick = true;
+    /**
+     * The current selection of items
+     */
+    this.selectedRows = [];
+    /** START HEADER */
+    /**
+     * Quick filters to show
+     */
+    this.quickFilters = [];
+    /**
+     * Wether to show the search input
+     */
+    this.enableSearch = true;
+    /**
+     * Wether to show the filter button
+     */
+    this.enableFilter = true;
+    /**
+     * Wether to show the edit button
+     */
+    this.enableEdit = true;
+    /** START FOOTER */
+    /**
+     * Wether to enable page size select
+     */
+    this.enablePageSize = true;
+    /**
+     * Wether to enable pagination
+     */
+    this.enablePagination = true;
+    /**
+     * Wether to enable export
+     */
+    this.enableExport = true;
+    /**
+     * The current page
+     */
+    this.page = 1;
+    /**
+     * The amount of items per page
+     */
+    this.pageSize = defaultSize;
+    /**
+     * The options for the page size
+     */
+    this.pageSizeOptions = defaultSizeOptions;
+    /**
+     * Wether to hide when there is only 1 page available
+     */
+    this.hideOnSinglePage = true;
+    this._columns = [];
+    this._items = [];
+    this._ctrlDown = false;
+  }
+  componentWillLoad() {
+    this._parseItems(this.items);
+    this._generateColumns();
+  }
+  render() {
+    var _a, _b;
+    return (h(Host, { class: "p-table" },
+      h("p-table-container", null,
+        h("p-table-header", { 
+          // quick filters
+          quickFilters: this.quickFilters, activeQuickFilterIdentifier: this.activeQuickFilterIdentifier, onQuickFilter: ({ detail }) => this.quickFilter.emit(detail), 
+          // search
+          enableSearch: this.enableSearch, query: this.query, onQueryChange: ({ detail }) => this.queryChange.emit(detail), 
+          // filter button
+          enableFilter: this.enableFilter, selectedFiltersAmount: this.selectedFiltersAmount, filterButtonTemplate: this.filterButtonTemplate, onFilter: () => this.filter.emit(), 
+          // edit button
+          enableEdit: this.enableEdit, canEdit: !!((_a = this.selectedRows) === null || _a === void 0 ? void 0 : _a.length), editButtonTemplate: this.editButtonTemplate, onEdit: () => this.edit.emit(), itemsSelectedAmount: (_b = this.selectedRows) === null || _b === void 0 ? void 0 : _b.length }),
+        this._getHeader(),
+        h("div", { class: "flex flex-col" }, this._getRows()),
+        h("p-table-footer", { 
+          // overall
+          hideOnSinglePage: this.hideOnSinglePage, 
+          // page size select
+          enablePageSize: this.enablePageSize, pageSize: this.pageSize, pageSizeOptions: this.pageSizeOptions, onPageSizeChange: ({ detail }) => this.pageSizeChange.emit(detail), 
+          // pagination
+          enablePagination: this.enablePagination, page: this.page, total: this.total, onPageChange: ({ detail }) => this.pageChange.emit(detail), 
+          // export
+          enableExport: this.enableExport, onExport: () => this.export.emit() }))));
+  }
+  onTableDefinitionUpdated() {
+    this._generateColumns();
+  }
+  keyDown({ key }) {
+    if (key !== 'Control' || this._ctrlDown === true) {
+      return;
+    }
+    this._ctrlDown = true;
+  }
+  keyUp({ key }) {
+    if (key !== 'Control' || this._ctrlDown === false) {
+      return;
+    }
+    this._ctrlDown = false;
+  }
+  visibilityChange() {
+    if (document.visibilityState !== 'hidden' || this._ctrlDown === false) {
+      return;
+    }
+    this._ctrlDown = false;
+  }
+  _parseItems(items) {
+    if (!items) {
+      this._items = [];
+      return;
+    }
+    if (Array.isArray(items)) {
+      this._items = items;
+      return;
+    }
+    this._items = JSON.parse(items);
+  }
+  _generateColumns() {
+    const definitions = this._el.querySelectorAll('p-table-definition');
+    this._columns = Array.from(definitions);
+  }
+  _getHeader() {
+    return (h("p-table-row", { variant: "header" }, this._columns.map((col, index) => (h("div", { class: this._getColumnClasses(col, true) },
+      this._getCheckbox(index, null, 'header'),
+      h("div", { class: "flex" }, col.name))))));
+  }
+  _getRows() {
+    if (this.loading) {
+      return Array.from({
+        length: this.amountOfLoadingRows,
+      }, (_, i) => (h("p-table-row", { enableHover: this.enableRowSelection || this.enableRowClick }, this._getLoadingColumns(i))));
+    }
+    return this._items.map((item, index) => (h("p-table-row", { enableHover: this.enableRowSelection || this.enableRowClick, onClick: (ev) => this._rowClick(ev, index) }, this._getRowColumns(item, index))));
+  }
+  _getRowColumns(item, index) {
+    return this._columns.map((col, colIndex) => {
+      return (h("div", { class: this._getColumnClasses(col) },
+        this._getCheckbox(colIndex, index),
+        h("div", { class: "flex", "data-is-action": "true" }, col.template({
+          value: objectGetByPath(item, col.path),
+          item,
+          index,
+        }))));
+    });
+  }
+  _getLoadingColumns(index) {
+    return this._columns.map((col, colIndex) => {
+      return (h("div", { class: this._getColumnClasses(col) },
+        this._getCheckbox(colIndex, index, 'loading'),
+        h("p-loader", { variant: "ghost", class: "rounded flex-1 w-full h-6" })));
+    });
+  }
+  _getCheckbox(index, rowIndex, variant = 'default') {
+    if (!this.enableRowSelection || !this.selectionKey || index !== 0) {
+      return;
+    }
+    if (variant === 'loading') {
+      return h("p-loader", { variant: "ghost", class: "rounded w-6 h-6" });
+    }
+    if (variant === 'header') {
+      return (h("input", { class: "p-input", type: "checkbox", onChange: (ev) => this._selectAllChange(ev), checked: this._selectionContainsAll(), indeterminate: this._selectionIndeterminate() }));
+    }
+    const item = this._items[rowIndex];
+    return (h("input", { class: "p-input", type: "checkbox", onChange: (ev) => this._checkboxChange(ev === null || ev === void 0 ? void 0 : ev.target, rowIndex), disabled: this.canSelectKey && !item[this.canSelectKey], checked: this._selectionContains(item, rowIndex) }));
+  }
+  _getColumnClasses(col, isHeader = false) {
+    const sizes = col ? this._getSizes(col) : {};
+    return Object.assign({ flex: true, 'gap-4': true, 'items-center': true, 'justify-start': !(col === null || col === void 0 ? void 0 : col.align) || (col === null || col === void 0 ? void 0 : col.align) === 'start', 'justify-center': (col === null || col === void 0 ? void 0 : col.align) === 'center', 'justify-end': (col === null || col === void 0 ? void 0 : col.align) === 'end', 'font-semibold': !isHeader && (col === null || col === void 0 ? void 0 : col.type) === 'th', 'text-storm-dark': !isHeader && (col === null || col === void 0 ? void 0 : col.type) === 'th' }, sizes);
+  }
+  _selectAllChange($event) {
+    if (!this.enableRowSelection) {
+      return;
+    }
+    const value = this._getCheckedValue($event.target);
+    if (value) {
+      const toAdd = [];
+      for (let i = 0; i < this._items.length; i++) {
+        const row = this._items[i];
+        if (this.canSelectKey && !row[this.canSelectKey]) {
+          continue;
+        }
+        if (this._selectionContains(row, i)) {
+          continue;
+        }
+        toAdd.push(row);
+        this.rowSelected.emit(row);
+      }
+      this.selectedRows = [...this.selectedRows, ...toAdd];
+      this.selectedRowsChange.emit(this.selectedRows);
+      return;
+    }
+    for (let i = 0; i < this.selectedRows.length; i++) {
+      const value = this.selectedRows[i];
+      const row = this._items.find((d) => this._getSelectionValue(d, i) ===
+        this._getSelectionValue(value, i));
+      if (!row) {
+        continue;
+      }
+      this.rowDeselected.emit(row);
+    }
+    this.selectedRows = [];
+    this.selectedRowsChange.emit(this.selectedRows);
+  }
+  _checkboxChange(target, index) {
+    if (!this.enableRowSelection) {
+      return;
+    }
+    const row = this._items[index];
+    if (this.canSelectKey && !row[this.canSelectKey]) {
+      target.checked = false;
+      return;
+    }
+    const value = this._getCheckedValue(target);
+    if (value) {
+      this.selectedRows = [...this.selectedRows, row];
+      this.selectedRowsChange.emit(this.selectedRows);
+      this.rowSelected.emit(row);
+      return;
+    }
+    const indexOfToRemove = this._selectionContains(row, index, true);
+    // we need to do this, because splice does not trigger the selection setter.
+    const selection = [...this.selectedRows];
+    selection.splice(indexOfToRemove, 1);
+    this.selectedRows = selection;
+    this.selectedRowsChange.emit(this.selectedRows);
+    this.rowDeselected.emit(row);
+  }
+  _getCheckedValue(target) {
+    return target === null || target === void 0 ? void 0 : target.checked;
+  }
+  _getSelectionValue(row, index) {
+    return this.selectionKey ? (row === null || row === void 0 ? void 0 : row[this.selectionKey]) || index : index;
+  }
+  _selectionContains(row, index, returnIndex = false) {
+    const returnValue = this.selectedRows.findIndex((item) => this._getSelectionValue(row, index) ===
+      this._getSelectionValue(item, index));
+    return !returnIndex ? returnValue >= 0 : returnValue;
+  }
+  _selectionContainsAll() {
+    var _a, _b;
+    let returnValue = true;
+    if (!((_a = this._items) === null || _a === void 0 ? void 0 : _a.length)) {
+      return false;
+    }
+    for (let i = 0; i < ((_b = this._items) === null || _b === void 0 ? void 0 : _b.length); i++) {
+      const item = this._items[i];
+      const contains = this._selectionContains(item, i);
+      if (!contains) {
+        returnValue = false;
+        break;
+      }
+    }
+    return returnValue;
+  }
+  _selectionIndeterminate() {
+    var _a, _b, _c;
+    if (!((_a = this._items) === null || _a === void 0 ? void 0 : _a.length) || !((_b = this.selectedRows) === null || _b === void 0 ? void 0 : _b.length)) {
+      return false;
+    }
+    let containsCount = 0;
+    for (let i = 0; i < ((_c = this._items) === null || _c === void 0 ? void 0 : _c.length); i++) {
+      const item = this._items[i];
+      const contains = this._selectionContains(item, i);
+      if (contains) {
+        containsCount++;
+      }
+    }
+    return containsCount > 0 && containsCount !== this._items.length;
+  }
+  _rowClick($event, index) {
+    const target = $event.target;
+    if (target.tagName.toLowerCase() === 'input' ||
+      target.type === 'checkbox') {
+      return;
+    }
+    const row = this._findRow($event.target);
+    if (this.enableRowClick) {
+      const action = this._findRowAction($event.target);
+      if (action) {
+        return;
+      }
+      const item = this._items[index];
+      this.rowClick.emit({
+        item,
+        ctrlDown: this._ctrlDown,
+      });
+      return;
+    }
+    if (!this.enableRowSelection) {
+      return;
+    }
+    const checkbox = row === null || row === void 0 ? void 0 : row.querySelector('input[type="checkbox"]');
+    if (!checkbox) {
+      return;
+    }
+    checkbox.checked = !checkbox.checked;
+    this._checkboxChange(checkbox, index);
+  }
+  _findRow(el) {
+    var _a;
+    if (!el) {
+      return el;
+    }
+    if (((_a = el === null || el === void 0 ? void 0 : el.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'p-table-row') {
+      return el;
+    }
+    return this._findRow(el === null || el === void 0 ? void 0 : el.parentElement);
+  }
+  _findRowAction(el) {
+    var _a;
+    if (!el) {
+      return null;
+    }
+    if (el.getAttribute('data-is-action') !== null &&
+      el.getAttribute('data-is-action') !== 'false') {
+      return el;
+    }
+    if (((_a = el === null || el === void 0 ? void 0 : el.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'p-table-row') {
+      return null;
+    }
+    return this._findRowAction(el === null || el === void 0 ? void 0 : el.parentElement);
+  }
+  /*
+   With this, we shall hack the system in ways no one would ever have thought.
+   
+   w-1/12 w-2/12 w-3/12 w-4/12 w-5/12 w-6/12 w-7/12 w-8/12 w-9/12 w-10/12 w-11/12 w-12/12
+   tablet:w-1/12 tablet:w-2/12 tablet:w-3/12 tablet:w-4/12 tablet:w-5/12 tablet:w-6/12 tablet:w-7/12 tablet:w-8/12 tablet:w-9/12 tablet:w-10/12 tablet:w-11/12 tablet:w-12/12
+   desktop-xs:w-1/12 desktop-xs:w-2/12 desktop-xs:w-3/12 desktop-xs:w-4/12 desktop-xs:w-5/12 desktop-xs:w-6/12 desktop-xs:w-7/12 desktop-xs:w-8/12 desktop-xs:w-9/12 desktop-xs:w-10/12 desktop-xs:w-11/12 desktop-xs:w-12/12
+   desktop-xs:w-1/12 desktop-xs:w-2/12 desktop-xs:w-3/12 desktop-xs:w-4/12 desktop-xs:w-5/12 desktop-xs:w-6/12 desktop-xs:w-7/12 desktop-xs:w-8/12 desktop-xs:w-9/12 desktop-xs:w-10/12 desktop-xs:w-11/12 desktop-xs:w-12/12
+   desktop-sm:w-1/12 desktop-sm:w-2/12 desktop-sm:w-3/12 desktop-sm:w-4/12 desktop-sm:w-5/12 desktop-sm:w-6/12 desktop-sm:w-7/12 desktop-sm:w-8/12 desktop-sm:w-9/12 desktop-sm:w-10/12 desktop-sm:w-11/12 desktop-sm:w-12/12
+   desktop:w-1/12 desktop:w-2/12 desktop:w-3/12 desktop:w-4/12 desktop:w-5/12 desktop:w-6/12 desktop:w-7/12 desktop:w-8/12 desktop:w-9/12 desktop:w-10/12 desktop:w-11/12 desktop:w-12/12
+   desktop-lg:w-1/12 desktop-lg:w-2/12 desktop-lg:w-3/12 desktop-lg:w-4/12 desktop-lg:w-5/12 desktop-lg:w-6/12 desktop-lg:w-7/12 desktop-lg:w-8/12 desktop-lg:w-9/12 desktop-lg:w-10/12 desktop-lg:w-11/12 desktop-lg:w-12/12
+   desktop-xl:w-1/12 desktop-xl:w-2/12 desktop-xl:w-3/12 desktop-xl:w-4/12 desktop-xl:w-5/12 desktop-xl:w-6/12 desktop-xl:w-7/12 desktop-xl:w-8/12 desktop-xl:w-9/12 desktop-xl:w-10/12 desktop-xl:w-11/12 desktop-xl:w-12/12
+
+   
+      ⠀⠀⠀⠀⠀⣠⣴⣶⣿⣿⠿⣷⣶⣤⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⣴⣶⣷⠿⣿⣿⣶⣦⣀⠀⠀⠀⠀⠀
+      ⠀⠀⠀⢀⣾⣿⣿⣿⣿⣿⣿⣿⣶⣦⣬⡉⠒⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠚⢉⣥⣴⣾⣿⣿⣿⣿⣿⣿⣿⣧⠀⠀⠀⠀
+      ⠀⠀⠀⡾⠿⠛⠛⠛⠛⠿⢿⣿⣿⣿⣿⣿⣷⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⣾⣿⣿⣿⣿⣿⠿⠿⠛⠛⠛⠛⠿⢧⠀⠀⠀
+      ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⠻⣿⣿⣿⣿⣿⡄⠀⠀⠀⠀⠀⠀⣠⣿⣿⣿⣿⡿⠟⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+      ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢿⣿⡄⠀⠀⠀⠀⠀⠀⠀⠀⢰⣿⡿⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+      ⠀⠀⠀⠀⠀⠀⠀⣠⣤⠶⠶⠶⠰⠦⣤⣀⠀⠙⣷⠀⠀⠀⠀⠀⠀⠀⢠⡿⠋⢀⣀⣤⢴⠆⠲⠶⠶⣤⣄⠀⠀⠀⠀⠀⠀⠀
+      ⠀⠘⣆⠀⠀⢠⣾⣫⣶⣾⣿⣿⣿⣿⣷⣯⣿⣦⠈⠃⡇⠀⠀⠀⠀⢸⠘⢁⣶⣿⣵⣾⣿⣿⣿⣿⣷⣦⣝⣷⡄⠀⠀⡰⠂⠀
+      ⠀⠀⣨⣷⣶⣿⣧⣛⣛⠿⠿⣿⢿⣿⣿⣛⣿⡿⠀⠀⡇⠀⠀⠀⠀⢸⠀⠈⢿⣟⣛⠿⢿⡿⢿⢿⢿⣛⣫⣼⡿⣶⣾⣅⡀⠀
+      ⢀⡼⠋⠁⠀⠀⠈⠉⠛⠛⠻⠟⠸⠛⠋⠉⠁⠀⠀⢸⡇⠀⠀⠄⠀⢸⡄⠀⠀⠈⠉⠙⠛⠃⠻⠛⠛⠛⠉⠁⠀⠀⠈⠙⢧⡀
+      ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣿⡇⢠⠀⠀⠀⢸⣷⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+      ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣾⣿⡇⠀⠀⠀⠀⢸⣿⣷⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+      ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⠟⠁⣿⠇⠀⠀⠀⠀⢸⡇⠙⢿⣆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+      ⠀⠰⣄⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⣾⠖⡾⠁⠀⠀⣿⠀⠀⠀⠀⠀⠘⣿⠀⠀⠙⡇⢸⣷⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⣰⠄⠀
+      ⠀⠀⢻⣷⡦⣤⣤⣤⡴⠶⠿⠛⠉⠁⠀⢳⠀⢠⡀⢿⣀⠀⠀⠀⠀⣠⡟⢀⣀⢠⠇⠀⠈⠙⠛⠷⠶⢦⣤⣤⣤⢴⣾⡏⠀⠀
+      ⠀⠀⠈⣿⣧⠙⣿⣷⣄⠀⠀⠀⠀⠀⠀⠀⠀⠘⠛⢊⣙⠛⠒⠒⢛⣋⡚⠛⠉⠀⠀⠀⠀⠀⠀⠀⠀⣠⣿⡿⠁⣾⡿⠀⠀⠀
+      ⠀⠀⠀⠘⣿⣇⠈⢿⣿⣦⠀⠀⠀⠀⠀⠀⠀⠀⣰⣿⣿⣿⡿⢿⣿⣿⣿⣆⠀⠀⠀⠀⠀⠀⠀⢀⣼⣿⡟⠁⣼⡿⠁⠀⠀⠀
+      ⠀⠀⠀⠀⠘⣿⣦⠀⠻⣿⣷⣦⣤⣤⣶⣶⣶⣿⣿⣿⣿⠏⠀⠀⠻⣿⣿⣿⣿⣶⣶⣶⣦⣤⣴⣿⣿⠏⢀⣼⡿⠁⠀⠀⠀⠀
+      ⠀⠀⠀⠀⠀⠘⢿⣷⣄⠙⠻⠿⠿⠿⠿⠿⢿⣿⣿⣿⣁⣀⣀⣀⣀⣙⣿⣿⣿⠿⠿⠿⠿⠿⠿⠟⠁⣠⣿⡿⠁⠀⠀⠀⠀⠀
+      ⠀⠀⠀⠀⠀⠀⠈⠻⣯⠙⢦⣀⠀⠀⠀⠀⠀⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠀⠀⠀⠀⠀⣠⠴⢋⣾⠟⠀⠀⠀⠀⠀⠀⠀
+      ⠀⠀⠀⠀⠀⠀⠀⠀⠙⢧⡀⠈⠉⠒⠀⠀⠀⠀⠀⠀⣀⠀⠀⠀⠀⢀⠀⠀⠀⠀⠀⠐⠒⠉⠁⢀⡾⠃⠀⠀⠀⠀⠀⠀⠀⠀
+      ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠳⣄⠀⠀⠀⠀⠀⠀⠀⠀⠻⣿⣿⣿⣿⠋⠀⠀⠀⠀⠀⠀⠀⠀⣠⠟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+      ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⢦⡀⠀⠀⠀⠀⠀⠀⠀⣸⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⢀⡴⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+      ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠋⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+      ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠐⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+      ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⡿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+      ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+      ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠸⣿⣿⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+  */
+  _getSizes({ sizes }) {
+    if (sizes === 'auto') {
+      return {
+        'w-auto': true,
+      };
+    }
+    if (typeof sizes === 'object') {
+      const classes = {};
+      for (const size of Object.keys(sizes)) {
+        if (size === 'default') {
+          classes[`w-${sizes.default}/12`] = true;
+          continue;
+        }
+        classes[`${size}:w-${sizes[`${size}`]}/12`] = true;
+      }
+      return classes;
+    }
+    // is a number.
+    return {
+      [`w-${sizes}/12`]: true,
+    };
+  }
+  static get is() { return "p-table"; }
+  static get originalStyleUrls() { return {
+    "$": ["table.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["table.component.css"]
+  }; }
+  static get properties() { return {
+    "items": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The items to be fed to the table"
+      },
+      "attribute": "items",
+      "reflect": false
+    },
+    "loading": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether data is loading"
+      },
+      "attribute": "loading",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "amountOfLoadingRows": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The amount of loading rows to show"
+      },
+      "attribute": "amount-of-loading-rows",
+      "reflect": false,
+      "defaultValue": "4"
+    },
+    "enableRowSelection": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to enable selection"
+      },
+      "attribute": "enable-row-selection",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "enableRowClick": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to enable row clicking"
+      },
+      "attribute": "enable-row-click",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "selectedRows": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "any[]",
+        "resolved": "any[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The current selection of items"
+      },
+      "defaultValue": "[]"
+    },
+    "selectionKey": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The key to determine if a row is selected"
+      },
+      "attribute": "selection-key",
+      "reflect": false
+    },
+    "canSelectKey": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "A key to determine if a row can be selected"
+      },
+      "attribute": "can-select-key",
+      "reflect": false
+    },
+    "quickFilters": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "QuickFilter[]",
+        "resolved": "QuickFilter[]",
+        "references": {
+          "QuickFilter": {
+            "location": "import",
+            "path": "../../../types/table"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Quick filters to show"
+      },
+      "defaultValue": "[]"
+    },
+    "activeQuickFilterIdentifier": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Active quick filter identifier"
+      },
+      "attribute": "active-quick-filter-identifier",
+      "reflect": false
+    },
+    "enableSearch": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to show the search input"
+      },
+      "attribute": "enable-search",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "query": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The query to show in the search bar"
+      },
+      "attribute": "query",
+      "reflect": false
+    },
+    "enableFilter": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to show the filter button"
+      },
+      "attribute": "enable-filter",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "selectedFiltersAmount": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The amount of filters being selected"
+      },
+      "attribute": "selected-filters-amount",
+      "reflect": false
+    },
+    "filterButtonTemplate": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "templateFunc",
+        "resolved": "(value: number) => string",
+        "references": {
+          "templateFunc": {
+            "location": "import",
+            "path": "../../molecules/page-size-select/page-size-select.component"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The template for the filter button text"
+      }
+    },
+    "enableEdit": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to show the edit button"
+      },
+      "attribute": "enable-edit",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "editButtonTemplate": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "templateFunc",
+        "resolved": "(value: number) => string",
+        "references": {
+          "templateFunc": {
+            "location": "import",
+            "path": "../../molecules/page-size-select/page-size-select.component"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The template for the edit button text"
+      }
+    },
+    "enablePageSize": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to enable page size select"
+      },
+      "attribute": "enable-page-size",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "enablePagination": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to enable pagination"
+      },
+      "attribute": "enable-pagination",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "enableExport": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to enable export"
+      },
+      "attribute": "enable-export",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "page": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The current page"
+      },
+      "attribute": "page",
+      "reflect": true,
+      "defaultValue": "1"
+    },
+    "total": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The total amount of items"
+      },
+      "attribute": "total",
+      "reflect": false
+    },
+    "pageSize": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The amount of items per page"
+      },
+      "attribute": "page-size",
+      "reflect": false,
+      "defaultValue": "defaultSize"
+    },
+    "pageSizeOptions": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "number[]",
+        "resolved": "number[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The options for the page size"
+      },
+      "defaultValue": "defaultSizeOptions"
+    },
+    "hideOnSinglePage": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to hide when there is only 1 page available"
+      },
+      "attribute": "hide-on-single-page",
+      "reflect": false,
+      "defaultValue": "true"
+    }
+  }; }
+  static get states() { return {
+    "_columns": {},
+    "_items": {}
+  }; }
+  static get events() { return [{
+      "method": "selectedRowsChange",
+      "name": "selectedRowsChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event whenever the current selection changes"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "rowClick",
+      "name": "rowClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event whenever a row is clicked"
+      },
+      "complexType": {
+        "original": "RowClickEvent",
+        "resolved": "RowClickEvent",
+        "references": {
+          "RowClickEvent": {
+            "location": "import",
+            "path": "../../../types/table"
+          }
+        }
+      }
+    }, {
+      "method": "rowSelected",
+      "name": "rowSelected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event whenever a row is selected"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "rowDeselected",
+      "name": "rowDeselected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event whenever a row is deselected"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "quickFilter",
+      "name": "quickFilter",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event when one of the quick filters is clicked"
+      },
+      "complexType": {
+        "original": "QuickFilter",
+        "resolved": "QuickFilter",
+        "references": {
+          "QuickFilter": {
+            "location": "import",
+            "path": "../../../types/table"
+          }
+        }
+      }
+    }, {
+      "method": "queryChange",
+      "name": "queryChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event when the query changes"
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "filter",
+      "name": "filter",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event when the filter button is clicked"
+      },
+      "complexType": {
+        "original": "null",
+        "resolved": "null",
+        "references": {}
+      }
+    }, {
+      "method": "edit",
+      "name": "edit",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event when the edit button is clicked"
+      },
+      "complexType": {
+        "original": "null",
+        "resolved": "null",
+        "references": {}
+      }
+    }, {
+      "method": "pageChange",
+      "name": "pageChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event whenever the page changes"
+      },
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      }
+    }, {
+      "method": "pageSizeChange",
+      "name": "pageSizeChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event whenever the page changes"
+      },
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      }
+    }, {
+      "method": "export",
+      "name": "export",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event whenever the page changes"
+      },
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "_el"; }
+  static get watchers() { return [{
+      "propName": "items",
+      "methodName": "_parseItems"
+    }]; }
+  static get listeners() { return [{
+      "name": "tableDefinitionChanged",
+      "method": "onTableDefinitionUpdated",
+      "target": "body",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "keydown",
+      "method": "keyDown",
+      "target": "document",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "keyup",
+      "method": "keyUp",
+      "target": "document",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "visibilitychange",
+      "method": "visibilityChange",
+      "target": "document",
+      "capture": false,
+      "passive": false
+    }]; }
+}