@paperless/core 0.1.0-alpha.127 → 0.1.0-alpha.129

package/dist/components/p-table.js

@@ -0,0 +1,492 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defaultSize, a as defaultSizeOptions, b as defineCustomElement$c } from './page-size-select.component.js';
+import { d as defineCustomElement$l } from './button.component.js';
+import { d as defineCustomElement$k } from './divider.component.js';
+import { d as defineCustomElement$j } from './dropdown.component.js';
+import { d as defineCustomElement$i } from './dropdown-menu-container.component.js';
+import { d as defineCustomElement$h } from './dropdown-menu-item.component.js';
+import { d as defineCustomElement$g } from './helper.component.js';
+import { d as defineCustomElement$f } from './icon.component.js';
+import { d as defineCustomElement$e } from './input-group.component.js';
+import { d as defineCustomElement$d } from './loader.component.js';
+import { d as defineCustomElement$b } from './pagination.component.js';
+import { d as defineCustomElement$a } from './pagination-item.component.js';
+import { d as defineCustomElement$9 } from './segment-container.component.js';
+import { d as defineCustomElement$8 } from './segment-item.component.js';
+import { d as defineCustomElement$7 } from './table-container.component.js';
+import { d as defineCustomElement$6 } from './table-footer.component.js';
+import { d as defineCustomElement$5 } from './table-header.component.js';
+import { d as defineCustomElement$4 } from './table-row.component.js';
+import { d as defineCustomElement$3 } from './tag.component.js';
+import { d as defineCustomElement$2 } from './tooltip.component.js';
+
+const objectGetByPath = (obj, path, defaultValue = undefined) => {
+  const travel = (regexp) => String.prototype.split
+    .call(path, regexp)
+    .filter(Boolean)
+    .reduce((res, key) => res !== null && res !== undefined ? res[key] : res, obj);
+  const result = travel(/[,[\]]+?/) || travel(/[,[\].]+?/);
+  return result === undefined || result === obj ? defaultValue : result;
+};
+
+const tableComponentCss = ".visible{visibility:visible!important}.static{position:static!important}.fixed{position:fixed!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.m-0{margin:0!important}.ml-1{margin-left:.25rem!important}.block{display:block!important}.flex{display:flex!important}.table{display:table!important}.hidden{display:none!important}.w-1{width:.25rem!important}.w-2{width:.5rem!important}.w-3{width:.75rem!important}.w-4{width:1rem!important}.w-5{width:1.25rem!important}.w-6{width:1.5rem!important}.w-7{width:1.75rem!important}.w-8{width:2rem!important}.w-9{width:2.25rem!important}.w-10{width:2.5rem!important}.w-11{width:2.75rem!important}.w-auto{width:auto!important}.w-full{width:100%!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.justify-start{justify-content:flex-start!important}.justify-end{justify-content:flex-end!important}.justify-center{justify-content:center!important}.gap-4{gap:1rem!important}.justify-self-end{justify-self:end!important}.border{border-width:1px!important}.border-solid{border-style:solid!important}.border-transparent{border-color:transparent!important}.border-t-mystic-dark{--tw-border-opacity:1!important;border-top-color:rgb(218 230 240/var(--tw-border-opacity))!important}.bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.p-4{padding:1rem!important}.font-semibold{font-weight:600!important}.text-storm-dark{--tw-text-opacity:1!important;color:rgb(39 40 56/var(--tw-text-opacity))!important}.blur{--tw-blur:blur(8px)!important}.blur,.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}*{box-sizing:border-box}p-table{display:flex;flex-direction:column}.w-1\\/12{width:8.333333%!important}.w-2\\/12{width:16.666667%!important}.w-3\\/12{width:25%!important}.w-4\\/12{width:33.333333%!important}.w-5\\/12{width:41.666667%!important}.w-6\\/12{width:50%!important}.w-7\\/12{width:58.333333%!important}.w-8\\/12{width:66.666667%!important}.w-9\\/12{width:75%!important}.w-10\\/12{width:83.333333%!important}.w-11\\/12{width:91.666667%!important}@media (min-width:40rem){.tablet\\:w-1\\/12{width:8.333333%!important}.tablet\\:w-2\\/12{width:16.666667%!important}.tablet\\:w-3\\/12{width:25%!important}.tablet\\:w-4\\/12{width:33.333333%!important}.tablet\\:w-5\\/12{width:41.666667%!important}.tablet\\:w-6\\/12{width:50%!important}.tablet\\:w-7\\/12{width:58.333333%!important}.tablet\\:w-8\\/12{width:66.666667%!important}.tablet\\:w-9\\/12{width:75%!important}.tablet\\:w-10\\/12{width:83.333333%!important}.tablet\\:w-11\\/12{width:91.666667%!important}}@media (min-width:64rem){.desktop-xs\\:w-1\\/12{width:8.333333%!important}.desktop-xs\\:w-2\\/12{width:16.666667%!important}.desktop-xs\\:w-3\\/12{width:25%!important}.desktop-xs\\:w-4\\/12{width:33.333333%!important}.desktop-xs\\:w-5\\/12{width:41.666667%!important}.desktop-xs\\:w-6\\/12{width:50%!important}.desktop-xs\\:w-7\\/12{width:58.333333%!important}.desktop-xs\\:w-8\\/12{width:66.666667%!important}.desktop-xs\\:w-9\\/12{width:75%!important}.desktop-xs\\:w-10\\/12{width:83.333333%!important}.desktop-xs\\:w-11\\/12{width:91.666667%!important}}@media (min-width:80rem){.desktop-sm\\:w-1\\/12{width:8.333333%!important}.desktop-sm\\:w-2\\/12{width:16.666667%!important}.desktop-sm\\:w-3\\/12{width:25%!important}.desktop-sm\\:w-4\\/12{width:33.333333%!important}.desktop-sm\\:w-5\\/12{width:41.666667%!important}.desktop-sm\\:w-6\\/12{width:50%!important}.desktop-sm\\:w-7\\/12{width:58.333333%!important}.desktop-sm\\:w-8\\/12{width:66.666667%!important}.desktop-sm\\:w-9\\/12{width:75%!important}.desktop-sm\\:w-10\\/12{width:83.333333%!important}.desktop-sm\\:w-11\\/12{width:91.666667%!important}}@media (min-width:85.375rem){.desktop\\:w-1\\/12{width:8.333333%!important}.desktop\\:w-2\\/12{width:16.666667%!important}.desktop\\:w-3\\/12{width:25%!important}.desktop\\:w-4\\/12{width:33.333333%!important}.desktop\\:w-5\\/12{width:41.666667%!important}.desktop\\:w-6\\/12{width:50%!important}.desktop\\:w-7\\/12{width:58.333333%!important}.desktop\\:w-8\\/12{width:66.666667%!important}.desktop\\:w-9\\/12{width:75%!important}.desktop\\:w-10\\/12{width:83.333333%!important}.desktop\\:w-11\\/12{width:91.666667%!important}}@media (min-width:90rem){.desktop-lg\\:w-1\\/12{width:8.333333%!important}.desktop-lg\\:w-2\\/12{width:16.666667%!important}.desktop-lg\\:w-3\\/12{width:25%!important}.desktop-lg\\:w-4\\/12{width:33.333333%!important}.desktop-lg\\:w-5\\/12{width:41.666667%!important}.desktop-lg\\:w-6\\/12{width:50%!important}.desktop-lg\\:w-7\\/12{width:58.333333%!important}.desktop-lg\\:w-8\\/12{width:66.666667%!important}.desktop-lg\\:w-9\\/12{width:75%!important}.desktop-lg\\:w-10\\/12{width:83.333333%!important}.desktop-lg\\:w-11\\/12{width:91.666667%!important}}@media (min-width:120rem){.desktop-xl\\:w-1\\/12{width:8.333333%!important}.desktop-xl\\:w-2\\/12{width:16.666667%!important}.desktop-xl\\:w-3\\/12{width:25%!important}.desktop-xl\\:w-4\\/12{width:33.333333%!important}.desktop-xl\\:w-5\\/12{width:41.666667%!important}.desktop-xl\\:w-6\\/12{width:50%!important}.desktop-xl\\:w-7\\/12{width:58.333333%!important}.desktop-xl\\:w-8\\/12{width:66.666667%!important}.desktop-xl\\:w-9\\/12{width:75%!important}.desktop-xl\\:w-10\\/12{width:83.333333%!important}.desktop-xl\\:w-11\\/12{width:91.666667%!important}}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}.desktop-xs\\:hidden{display:none!important}.desktop-xs\\:w-auto{width:auto!important}.desktop-xs\\:flex-row{flex-direction:row!important}}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}";
+
+const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.selectedRowsChange = createEvent(this, "selectedRowsChange", 7);
+    this.rowClick = createEvent(this, "rowClick", 7);
+    this.rowSelected = createEvent(this, "rowSelected", 7);
+    this.rowDeselected = createEvent(this, "rowDeselected", 7);
+    this.quickFilter = createEvent(this, "quickFilter", 7);
+    this.queryChange = createEvent(this, "queryChange", 7);
+    this.filter = createEvent(this, "filter", 7);
+    this.edit = createEvent(this, "edit", 7);
+    this.pageChange = createEvent(this, "pageChange", 7);
+    this.pageSizeChange = createEvent(this, "pageSizeChange", 7);
+    this.export = createEvent(this, "export", 7);
+    /**
+     * Wether to enable selection
+     */
+    this.enableRowSelection = 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;
+    this._columns = [];
+    this._items = [];
+  }
+  componentWillLoad() {
+    this._parseItems(this.items);
+  }
+  componentWillRender() {
+    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", {
+      // 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();
+  }
+  _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() {
+    return this._items.map((item, index) => (h("p-table-row", { enableHover: this.enableRowSelection, 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" }, col.template({
+        value: objectGetByPath(item, col.path),
+        item,
+        index,
+      }))));
+    });
+  }
+  _getCheckbox(index, rowIndex, variant = 'default') {
+    if (variant === 'header') {
+      return (this.enableRowSelection &&
+        index === 0 && (h("input", { class: "p-input", type: "checkbox", onChange: (ev) => this._selectAllChange(ev), checked: this._selectionContainsAll(), indeterminate: this._selectionIndeterminate() })));
+    }
+    const item = this._items[index];
+    return (this.enableRowSelection &&
+      index === 0 && (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 = this._getSizes(col);
+    return Object.assign({ flex: true, 'gap-4': true, 'items-center': true, 'justify-start': !col.align || col.align === 'start', 'justify-center': col.align === 'center', 'justify-end': col.align === 'end', 'font-semibold': !isHeader && col.type === 'th', 'text-storm-dark': !isHeader && col.type === 'th' }, sizes);
+  }
+  _selectAllChange($event) {
+    const value = this._getCheckedValue($event.target);
+    if (value) {
+      for (let i = 0; i < this._items.length; i++) {
+        const row = this._items[i];
+        if (this.canSelectKey && !row[this.canSelectKey]) {
+          continue;
+        }
+        const key = this._getSelectionValue(row, i);
+        if (this.selectedRows.indexOf(key) >= 0) {
+          continue;
+        }
+        this.selectedRows = [...this.selectedRows, key];
+        this.rowSelected.emit(row);
+      }
+      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) === value);
+      if (!row) {
+        continue;
+      }
+      this.rowDeselected.emit(row);
+    }
+    this.selectedRows = [];
+    this.selectedRowsChange.emit(this.selectedRows);
+  }
+  _checkboxChange(target, index) {
+    const row = this._items[index];
+    const value = this._getCheckedValue(target);
+    const toAdd = this._getSelectionValue(row, index);
+    if (value) {
+      this.selectedRows = [...this.selectedRows, toAdd];
+      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 toAdd = this._getSelectionValue(row, index);
+    const returnValue = this.selectedRows.indexOf(toAdd);
+    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;
+  }
+  _rowClick($event, index) {
+    const row = this._findRow($event.target);
+    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);
+  }
+  /*
+   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,
+    };
+  }
+  get _el() { return this; }
+  static get watchers() { return {
+    "items": ["_parseItems"]
+  }; }
+  static get style() { return tableComponentCss; }
+}, [0, "p-table", {
+    "items": [1],
+    "enableRowSelection": [4, "enable-row-selection"],
+    "selectedRows": [16],
+    "selectionKey": [1, "selection-key"],
+    "canSelectKey": [1, "can-select-key"],
+    "quickFilters": [16],
+    "activeQuickFilterIdentifier": [1, "active-quick-filter-identifier"],
+    "enableSearch": [4, "enable-search"],
+    "query": [1025],
+    "enableFilter": [4, "enable-filter"],
+    "selectedFiltersAmount": [2, "selected-filters-amount"],
+    "filterButtonTemplate": [16],
+    "enableEdit": [4, "enable-edit"],
+    "editButtonTemplate": [16],
+    "enablePageSize": [4, "enable-page-size"],
+    "enablePagination": [4, "enable-pagination"],
+    "enableExport": [4, "enable-export"],
+    "page": [1538],
+    "total": [2],
+    "pageSize": [2, "page-size"],
+    "pageSizeOptions": [16],
+    "_columns": [32],
+    "_items": [32]
+  }, [[16, "tableDefinitionChanged", "onTableDefinitionUpdated"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["p-table", "p-button", "p-divider", "p-dropdown", "p-dropdown-menu-container", "p-dropdown-menu-item", "p-helper", "p-icon", "p-input-group", "p-loader", "p-page-size-select", "p-pagination", "p-pagination-item", "p-segment-container", "p-segment-item", "p-table-container", "p-table-footer", "p-table-header", "p-table-row", "p-tag", "p-tooltip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "p-table":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Table);
+      }
+      break;
+    case "p-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$l();
+      }
+      break;
+    case "p-divider":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$k();
+      }
+      break;
+    case "p-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$j();
+      }
+      break;
+    case "p-dropdown-menu-container":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$i();
+      }
+      break;
+    case "p-dropdown-menu-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$h();
+      }
+      break;
+    case "p-helper":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$g();
+      }
+      break;
+    case "p-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$f();
+      }
+      break;
+    case "p-input-group":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$e();
+      }
+      break;
+    case "p-loader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
+      }
+      break;
+    case "p-page-size-select":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
+    case "p-pagination":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
+    case "p-pagination-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "p-segment-container":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "p-segment-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "p-table-container":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "p-table-footer":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "p-table-header":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "p-table-row":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "p-tag":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "p-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const PTable = Table;
+const defineCustomElement = defineCustomElement$1;
+
+export { PTable, defineCustomElement, objectGetByPath as o };

package/dist/components/p-tag.js

@@ -1,42 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const tagComponentCss = ".static{position:static!important}.block{display:block!important}.flex{display:flex!important}.hidden{display:none!important}.h-\\[1\\.625rem\\]{height:1.625rem!important}.h-2{height:.5rem!important}.items-center{align-items:center!important}.gap-1{gap:.25rem!important}.rounded{border-radius:.25rem!important}.rounded-round{border-radius:100%!important}.px-3{padding-left:.75rem!important;padding-right:.75rem!important}.text-xs{font-size:.75rem!important;line-height:1rem!important}*{box-sizing:border-box}:host{align-items:center;border-radius:.25rem;display:flex;font-size:.75rem;font-weight:600;gap:.25rem;height:1.625rem;line-height:1rem;padding-left:.75rem;padding-right:.75rem}:host .circle{border-radius:100%;display:none;height:.5rem;width:.5rem}:host([circle]){padding-left:.5rem}:host([circle]) .circle{display:block}:host([circle=false]) .circle{display:none}:host([variant=info]){--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(245 254 255/var(--tw-bg-opacity));color:rgb(30 218 227/var(--tw-text-opacity))}:host([variant=info]) .circle{--tw-bg-opacity:1;background-color:rgb(30 218 227/var(--tw-bg-opacity))}:host([variant=positive]){--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(229 255 242/var(--tw-bg-opacity));color:rgb(40 209 124/var(--tw-text-opacity))}:host([variant=positive]) .circle{--tw-bg-opacity:1;background-color:rgb(40 209 124/var(--tw-bg-opacity))}:host([variant=unbiased]){--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(255 246 220/var(--tw-bg-opacity));color:rgb(255 199 45/var(--tw-text-opacity))}:host([variant=unbiased]) .circle{--tw-bg-opacity:1;background-color:rgb(255 199 45/var(--tw-bg-opacity))}:host([variant=negative]){--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgb(255 204 211/var(--tw-bg-opacity));color:rgb(185 30 40/var(--tw-text-opacity))}:host([variant=negative]) .circle{--tw-bg-opacity:1;background-color:rgb(185 30 40/var(--tw-bg-opacity))}";
-
-const Tag = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    /**
-     * Variant of the tag
-     */
-    this.variant = 'info';
-    /**
-     * Wether to add the circle or not
-     */
-    this.circle = true;
-  }
-  render() {
-    return (h(Host, { class: "p-tag" }, h("div", { class: "circle" }), h("slot", null)));
-  }
-  static get style() { return tagComponentCss; }
-}, [1, "p-tag", {
-    "variant": [513],
-    "circle": [516]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["p-tag"];
-  components.forEach(tagName => { switch (tagName) {
-    case "p-tag":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Tag);
-      }
-      break;
-  } });
-}
+import { T as Tag, d as defineCustomElement$1 } from './tag.component.js';
 
 const PTag = Tag;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/page-size-select.component.js

@@ -0,0 +1,118 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { f as formatTranslation, g as getLocaleComponentStrings } from './localization.js';
+import { d as defineCustomElement$6 } from './button.component.js';
+import { d as defineCustomElement$5 } from './dropdown.component.js';
+import { d as defineCustomElement$4 } from './dropdown-menu-container.component.js';
+import { d as defineCustomElement$3 } from './dropdown-menu-item.component.js';
+import { d as defineCustomElement$2 } from './icon.component.js';
+import { d as defineCustomElement$1 } from './loader.component.js';
+
+const defaultSize = 12;
+const defaultSizeOptions = [12, 24, 68, 136];
+
+const PageSizeSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.sizeChange = createEvent(this, "sizeChange", 7);
+    /**
+     * The current page
+     */
+    this.size = defaultSize;
+    /**
+     * The available sizes
+     */
+    this.sizeOptions = defaultSizeOptions;
+    /**
+     * Chevron position
+     */
+    this.chevronPosition = 'start';
+    /**
+     * The size of the button
+     */
+    this.buttonSize = 'small';
+    /**
+     * The template for the data view
+     */
+    this.buttonTemplate = (size) => formatTranslation(this._locales.button, { size });
+    /**
+     * The template for the data view
+     */
+    this.itemTemplate = (size) => formatTranslation(this._locales.item, { size });
+    /**
+     * Locales used for this component
+     */
+    this._locales = {};
+  }
+  componentWillLoad() {
+    this._setLocales();
+  }
+  render() {
+    return (h(Host, { class: "p-page-size-select" }, h("p-dropdown", { placement: "top-start", chevronPosition: this.chevronPosition, chevronDirection: "down" }, h("p-button", { variant: "secondary", slot: "trigger", size: this.buttonSize }, this.buttonTemplate(this.size)), h("slot", { slot: "items" }, this.sizeOptions.map((option) => (h("p-dropdown-menu-item", { active: option === this.size, onClick: () => this._changeSize(option) }, this.itemTemplate(option))))))));
+  }
+  async _setLocales() {
+    this._locales = await getLocaleComponentStrings(this._el);
+  }
+  _changeSize(s) {
+    if (!s) {
+      return;
+    }
+    this.size = s;
+    this.sizeChange.emit(this.size);
+  }
+  get _el() { return this; }
+}, [1, "p-page-size-select", {
+    "size": [1538],
+    "sizeOptions": [16],
+    "chevronPosition": [1, "chevron-position"],
+    "buttonSize": [1, "button-size"],
+    "buttonTemplate": [16],
+    "itemTemplate": [16],
+    "_locales": [32]
+  }, [[16, "localeChanged", "_setLocales"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["p-page-size-select", "p-button", "p-dropdown", "p-dropdown-menu-container", "p-dropdown-menu-item", "p-icon", "p-loader"];
+  components.forEach(tagName => { switch (tagName) {
+    case "p-page-size-select":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PageSizeSelect);
+      }
+      break;
+    case "p-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "p-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "p-dropdown-menu-container":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "p-dropdown-menu-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "p-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "p-loader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { PageSizeSelect as P, defaultSizeOptions as a, defineCustomElement as b, defaultSize as d };