@paperless/core 0.1.0-alpha.37 → 0.1.0-alpha.371

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

@@ -0,0 +1,1272 @@
+import { h, Host, } from '@stencil/core';
+import { formatTranslation, getLocaleComponentStrings } from '../../../utils';
+import { defaultSize, defaultSizeOptions, } from '../../molecules/page-size-select/constants';
+export class Table {
+  constructor() {
+    this._ctrlDown = false;
+    this._hasCustomFilterSlot = false;
+    this.items = undefined;
+    this.loading = false;
+    this.headerLoading = false;
+    this.footerLoading = false;
+    this.amountOfLoadingRows = 6;
+    this.enableRowSelection = true;
+    this.enableRowClick = true;
+    this.selectedRows = [];
+    this.selectionKey = undefined;
+    this.canSelectKey = undefined;
+    this.enableHeader = true;
+    this.quickFilters = [];
+    this.activeQuickFilterIdentifier = undefined;
+    this.enableSearch = true;
+    this.query = undefined;
+    this.enableFilter = true;
+    this.selectedFiltersAmount = undefined;
+    this.filterButtonTemplate = undefined;
+    this.enableEdit = true;
+    this.editButtonIcon = 'pencil';
+    this.editButtonText = undefined;
+    this.editButtonTemplate = undefined;
+    this.enableFooter = true;
+    this.enablePageSize = true;
+    this.enablePagination = true;
+    this.enableExport = true;
+    this.page = 1;
+    this.total = undefined;
+    this.pageSize = defaultSize;
+    this.pageSizeOptions = defaultSizeOptions;
+    this.hideOnSinglePage = true;
+    this.emptyStateHeader = () => { var _a; return formatTranslation((_a = this._locales.empty_state) === null || _a === void 0 ? void 0 : _a.no_filter.header); };
+    this.emptyStateContent = () => { var _a; return formatTranslation((_a = this._locales.empty_state) === null || _a === void 0 ? void 0 : _a.no_filter.content); };
+    this.emptyStateAction = () => { var _a; return formatTranslation((_a = this._locales.empty_state) === null || _a === void 0 ? void 0 : _a.no_filter.action); };
+    this.enableEmptyStateAction = true;
+    this.emptyStateFilteredHeader = () => formatTranslation(this._locales.empty_state.filtered.header);
+    this.emptyStateFilteredContent = () => formatTranslation(this._locales.empty_state.filtered.content);
+    this._locales = {};
+    this._columns = [];
+    this._items = [];
+  }
+  componentWillLoad() {
+    this._hasCustomFilterSlot = !!this._el.querySelector(':scope > [slot="custom-filter"]');
+    this._setLocales();
+    this._parseItems(this.items);
+    this._generateColumns();
+  }
+  componentDidRender() {
+    this.hasRendered.emit();
+  }
+  render() {
+    var _a, _b;
+    return (h(Host, { class: "p-table" }, h("p-table-container", null, this.enableHeader && (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, editIcon: this.editButtonIcon, editText: this.editButtonText, 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,
+      //loading
+      loading: this.headerLoading
+    }, this._hasCustomFilterSlot && (h("slot", { name: "custom-filter", slot: "custom-filter" })))), this._getHeader(), h("div", { class: "flex flex-col" }, this._getRows()), this.enableFooter && (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(),
+      //loading
+      loading: this.footerLoading
+    })))));
+  }
+  async _setLocales() {
+    this._locales = await getLocaleComponentStrings(this._el);
+  }
+  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-column');
+    this._columns = Array.from(definitions);
+  }
+  _getHeader() {
+    return (h("p-table-row", { variant: "header" }, this._columns.map((col, index) => (h("p-table-cell", { definition: col, value: col.name, variant: "header", checkbox: this._getCheckbox(index, null, 'header'), index: index })))));
+  }
+  _getRows() {
+    if (this.loading) {
+      return Array.from({
+        length: this.amountOfLoadingRows,
+      }, (_, i) => (h("p-table-row", { enableHover: this.enableRowSelection || this.enableRowClick }, this._getLoadingColumns(i))));
+    }
+    if (!this._items.length) {
+      return this._getEmptyState();
+    }
+    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("p-table-cell", { definition: col, item: item, checkbox: this._getCheckbox(colIndex, index), index: colIndex, rowIndex: index }));
+    });
+  }
+  _getLoadingColumns(index) {
+    return this._columns.map((col, colIndex) => {
+      return (h("p-table-cell", { definition: col, variant: "loading", checkbox: this._getCheckbox(colIndex, index, 'loading'), index: colIndex, rowIndex: index }));
+    });
+  }
+  _getCheckbox(index, rowIndex, variant = 'default') {
+    if (!this.enableRowSelection || !this.selectionKey || index !== 0) {
+      return;
+    }
+    if (variant === 'loading') {
+      return h("p-loader", { variant: "ghost", class: "h-6 w-6 rounded" });
+    }
+    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) }));
+  }
+  _getEmptyState() {
+    var _a;
+    if (((_a = this.query) === null || _a === void 0 ? void 0 : _a.length) || this.selectedFiltersAmount) {
+      return (h("div", { class: "flex max-w-[20rem] flex-col items-center self-center py-24 text-center" }, h("p-illustration", { variant: "empty-state-search", class: "mb-6" }), h("p", { class: "text-storm-default font-semibold" }, this.emptyStateFilteredHeader()), h("p", { class: "mb-14 text-sm text-storm-medium" }, this.emptyStateFilteredContent())));
+    }
+    return (h("div", { class: "flex max-w-[20rem] flex-col items-center self-center py-24 text-center" }, h("p-illustration", { variant: "empty-state-overview", class: "mb-6 cursor-pointer", onClick: () => this.emptyStateActionClick.emit(null) }), h("p", { class: "text-storm-default font-semibold" }, this.emptyStateHeader()), h("p", { class: "mb-6 text-sm text-storm-medium" }, this.emptyStateContent()), this.enableEmptyStateAction && (h("p-button", { variant: "secondary", icon: "plus", size: "small", onClick: () => this.emptyStateActionClick.emit(null) }, this.emptyStateAction()))));
+  }
+  _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);
+  }
+  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"
+      },
+      "headerLoading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether the header should show loading state"
+        },
+        "attribute": "header-loading",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "footerLoading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether the footer should show loading state"
+        },
+        "attribute": "footer-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": "6"
+      },
+      "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
+      },
+      "enableHeader": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether to show the header"
+        },
+        "attribute": "enable-header",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "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": "() => string",
+          "references": {
+            "templateFunc": {
+              "location": "local",
+              "path": "/home/runner/work/Paperless/Paperless/packages/core/src/components/organisms/table/table.component.tsx"
+            }
+          }
+        },
+        "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"
+      },
+      "editButtonIcon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "IconVariant",
+          "resolved": "\"arrow\" | \"attachment\" | \"bread\" | \"calendar\" | \"camera\" | \"car\" | \"checklist\" | \"checkmark\" | \"chevron\" | \"clock\" | \"cogs\" | \"comment\" | \"document\" | \"download\" | \"envelope\" | \"explanation\" | \"eye\" | \"filter\" | \"folder\" | \"grid\" | \"headset\" | \"integration\" | \"list\" | \"location\" | \"megaphone\" | \"menu\" | \"minus\" | \"more\" | \"negative\" | \"notification\" | \"pagination\" | \"payment\" | \"pencil\" | \"person\" | \"plus\" | \"question\" | \"reload\" | \"receipt\" | \"report\" | \"search\" | \"settings\" | \"sick\" | \"signout\" | \"switch\" | \"tachometer\" | \"task\" | \"template\" | \"tool\" | \"trash\" | \"turn\" | \"upload\" | \"warning\"",
+          "references": {
+            "IconVariant": {
+              "location": "import",
+              "path": "../../../components"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The edit button icon"
+        },
+        "attribute": "edit-button-icon",
+        "reflect": false,
+        "defaultValue": "'pencil'"
+      },
+      "editButtonText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The edit button text if changed"
+        },
+        "attribute": "edit-button-text",
+        "reflect": false
+      },
+      "editButtonTemplate": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "buttonTemplateFunc",
+          "resolved": "(amount: number) => string",
+          "references": {
+            "buttonTemplateFunc": {
+              "location": "import",
+              "path": "../../molecules/table-header/table-header.component"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The template for the edit button text"
+        }
+      },
+      "enableFooter": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether to show the header"
+        },
+        "attribute": "enable-footer",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "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"
+      },
+      "emptyStateHeader": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "templateFunc",
+          "resolved": "() => string",
+          "references": {
+            "templateFunc": {
+              "location": "local",
+              "path": "/home/runner/work/Paperless/Paperless/packages/core/src/components/organisms/table/table.component.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "() =>\n        formatTranslation(this._locales.empty_state?.no_filter.header)"
+      },
+      "emptyStateContent": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "templateFunc",
+          "resolved": "() => string",
+          "references": {
+            "templateFunc": {
+              "location": "local",
+              "path": "/home/runner/work/Paperless/Paperless/packages/core/src/components/organisms/table/table.component.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "() =>\n        formatTranslation(this._locales.empty_state?.no_filter.content)"
+      },
+      "emptyStateAction": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "templateFunc",
+          "resolved": "() => string",
+          "references": {
+            "templateFunc": {
+              "location": "local",
+              "path": "/home/runner/work/Paperless/Paperless/packages/core/src/components/organisms/table/table.component.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "() =>\n        formatTranslation(this._locales.empty_state?.no_filter.action)"
+      },
+      "enableEmptyStateAction": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether to enable empty state action"
+        },
+        "attribute": "enable-empty-state-action",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "emptyStateFilteredHeader": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "templateFunc",
+          "resolved": "() => string",
+          "references": {
+            "templateFunc": {
+              "location": "local",
+              "path": "/home/runner/work/Paperless/Paperless/packages/core/src/components/organisms/table/table.component.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "() =>\n        formatTranslation(this._locales.empty_state.filtered.header)"
+      },
+      "emptyStateFilteredContent": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "templateFunc",
+          "resolved": "() => string",
+          "references": {
+            "templateFunc": {
+              "location": "local",
+              "path": "/home/runner/work/Paperless/Paperless/packages/core/src/components/organisms/table/table.component.tsx"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "() =>\n        formatTranslation(this._locales.empty_state.filtered.content)"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_locales": {},
+      "_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": "hasRendered",
+        "name": "hasRendered",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event when the table has rendered"
+        },
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "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": {}
+        }
+      }, {
+        "method": "emptyStateActionClick",
+        "name": "emptyStateActionClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event whenever the empty state is clicked"
+        },
+        "complexType": {
+          "original": "null",
+          "resolved": "null",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "_el"; }
+  static get watchers() {
+    return [{
+        "propName": "items",
+        "methodName": "_parseItems"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "localeChanged",
+        "method": "_setLocales",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }, {
+        "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
+      }];
+  }
+}
+//# sourceMappingURL=table.component.js.map