@paperless/core 0.1.0-alpha.28 → 0.1.0-alpha.281

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

@@ -0,0 +1,1163 @@
+import { Component, Element, Event, h, Host, Listen, Prop, State, Watch, } from '@stencil/core';
+import { formatTranslation, getLocaleComponentStrings } from '../../../utils';
+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 = 6;
+    /**
+     * 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;
+    /* Empty state start */
+    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.emptyStateFilteredHeader = () => formatTranslation(this._locales.empty_state.filtered.header);
+    this.emptyStateFilteredContent = () => formatTranslation(this._locales.empty_state.filtered.content);
+    /**
+     * Locales used for this component
+     */
+    this._locales = {};
+    this._columns = [];
+    this._items = [];
+    this._ctrlDown = false;
+  }
+  componentWillLoad() {
+    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,
+        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() }))));
+  }
+  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: "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) }));
+  }
+  _getEmptyState() {
+    var _a;
+    if (((_a = this.query) === null || _a === void 0 ? void 0 : _a.length) || this.selectedFiltersAmount) {
+      return (h("div", { class: "flex flex-col items-center text-center py-24 max-w-[20rem] self-center" },
+        h("p-illustration", { variant: "empty-state-search", class: "mb-6" }),
+        h("p", { class: "font-semibold text-storm-default" }, this.emptyStateFilteredHeader()),
+        h("p", { class: "text-sm text-storm-medium mb-14" }, this.emptyStateFilteredContent())));
+    }
+    return (h("div", { class: "flex flex-col items-center text-center py-24 max-w-[20rem] self-center" },
+      h("p-illustration", { variant: "empty-state-overview", class: "cursor-pointer mb-6", onClick: () => this.emptyStateActionClick.emit(null) }),
+      h("p", { class: "font-semibold text-storm-default" }, this.emptyStateHeader()),
+      h("p", { class: "text-sm text-storm-medium mb-6" }, this.emptyStateContent()),
+      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"
+    },
+    "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
+    },
+    "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"
+          }
+        }
+      },
+      "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": "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"
+      }
+    },
+    "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"
+          }
+        }
+      },
+      "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"
+          }
+        }
+      },
+      "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"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "() =>\n        formatTranslation(this._locales.empty_state?.no_filter.action)"
+    },
+    "emptyStateFilteredHeader": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "templateFunc",
+        "resolved": "() => string",
+        "references": {
+          "templateFunc": {
+            "location": "local"
+          }
+        }
+      },
+      "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"
+          }
+        }
+      },
+      "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
+    }]; }
+}