@paperless/core 0.1.0-alpha.21 → 0.1.0-alpha.210

package/dist/components/p-table.js

@@ -0,0 +1,520 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { a as defaultSize, b as defaultSizeOptions, d as defineCustomElement$c } from './page-size-select.component.js';
+import { d as defineCustomElement$m } from './button.component.js';
+import { d as defineCustomElement$l } from './divider.component.js';
+import { d as defineCustomElement$k } from './dropdown.component.js';
+import { d as defineCustomElement$j } from './dropdown-menu-container.component.js';
+import { d as defineCustomElement$i } from './dropdown-menu-item.component.js';
+import { d as defineCustomElement$h } from './helper.component.js';
+import { d as defineCustomElement$g } from './icon.component.js';
+import { d as defineCustomElement$f } from './input-group.component.js';
+import { d as defineCustomElement$e } from './label.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-cell.component.js';
+import { d as defineCustomElement$6 } from './table-container.component.js';
+import { d as defineCustomElement$5 } from './table-footer.component.js';
+import { d as defineCustomElement$4 } from './table-header.component.js';
+import { d as defineCustomElement$3 } from './table-row.component.js';
+import { d as defineCustomElement$2 } from './tooltip.component.js';
+
+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}.h-6{height:1.5rem!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-full{width:100%!important}.w-auto{width:auto!important}.flex-1{flex:1 1 0%!important}.flex-col{flex-direction:column!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}.rounded{border-radius:.25rem!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.hasRendered = createEvent(this, "hasRendered", 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 data is loading
+     */
+    this.loading = false;
+    /**
+     * The amount of loading rows to show
+     */
+    this.amountOfLoadingRows = 4;
+    /**
+     * Wether to enable selection
+     */
+    this.enableRowSelection = true;
+    /**
+     * Wether to enable row clicking
+     */
+    this.enableRowClick = true;
+    /**
+     * The current selection of items
+     */
+    this.selectedRows = [];
+    /** START HEADER */
+    /**
+     * Quick filters to show
+     */
+    this.quickFilters = [];
+    /**
+     * Wether to show the search input
+     */
+    this.enableSearch = true;
+    /**
+     * Wether to show the filter button
+     */
+    this.enableFilter = true;
+    /**
+     * Wether to show the edit button
+     */
+    this.enableEdit = true;
+    /** START FOOTER */
+    /**
+     * Wether to enable page size select
+     */
+    this.enablePageSize = true;
+    /**
+     * Wether to enable pagination
+     */
+    this.enablePagination = true;
+    /**
+     * Wether to enable export
+     */
+    this.enableExport = true;
+    /**
+     * The current page
+     */
+    this.page = 1;
+    /**
+     * The amount of items per page
+     */
+    this.pageSize = defaultSize;
+    /**
+     * The options for the page size
+     */
+    this.pageSizeOptions = defaultSizeOptions;
+    /**
+     * Wether to hide when there is only 1 page available
+     */
+    this.hideOnSinglePage = true;
+    this._columns = [];
+    this._items = [];
+    this._ctrlDown = false;
+  }
+  componentWillLoad() {
+    this._parseItems(this.items);
+    this._generateColumns();
+  }
+  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()
+    }))));
+  }
+  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))));
+    }
+    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) }));
+  }
+  _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);
+  }
+  get _el() { return this; }
+  static get watchers() { return {
+    "items": ["_parseItems"]
+  }; }
+  static get style() { return tableComponentCss; }
+}, [0, "p-table", {
+    "items": [1],
+    "loading": [4],
+    "amountOfLoadingRows": [2, "amount-of-loading-rows"],
+    "enableRowSelection": [4, "enable-row-selection"],
+    "enableRowClick": [4, "enable-row-click"],
+    "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],
+    "hideOnSinglePage": [4, "hide-on-single-page"],
+    "_columns": [32],
+    "_items": [32]
+  }, [[16, "tableDefinitionChanged", "onTableDefinitionUpdated"], [4, "keydown", "keyDown"], [4, "keyup", "keyUp"], [4, "visibilitychange", "visibilityChange"]]]);
+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-label", "p-loader", "p-page-size-select", "p-pagination", "p-pagination-item", "p-segment-container", "p-segment-item", "p-table-cell", "p-table-container", "p-table-footer", "p-table-header", "p-table-row", "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$m();
+      }
+      break;
+    case "p-divider":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$l();
+      }
+      break;
+    case "p-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$k();
+      }
+      break;
+    case "p-dropdown-menu-container":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$j();
+      }
+      break;
+    case "p-dropdown-menu-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$i();
+      }
+      break;
+    case "p-helper":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$h();
+      }
+      break;
+    case "p-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$g();
+      }
+      break;
+    case "p-input-group":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$f();
+      }
+      break;
+    case "p-label":
+      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-cell":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "p-table-container":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "p-table-footer":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "p-table-header":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "p-table-row":
+      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 };

package/dist/components/p-toast-container.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PToastContainer extends Components.PToastContainer, HTMLElement {}
+export const PToastContainer: {
+  prototype: PToastContainer;
+  new (): PToastContainer;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/p-toast-container.js

@@ -0,0 +1,46 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const toastContainerComponentCss = ".static{position:static!important}.fixed{position:fixed!important}.top-0{top:0!important}.bottom-0{bottom:0!important}.left-0{left:0!important}.right-0{right:0!important}.z-\\[600\\]{z-index:600!important}.flex{display:flex!important}.w-full{width:100%!important}.max-w-full{max-width:100%!important}.flex-col{flex-direction:column!important}.gap-4{gap:1rem!important}.p-4{padding:1rem!important}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:85.375rem){.container{max-width:85.375rem}}@media (min-width:90rem){.container{max-width:90rem}}@media (min-width:120rem){.container{max-width:120rem}}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}*{box-sizing:border-box}:host{display:flex;flex-direction:column;gap:1rem;max-width:100%;padding:1rem;width:100%;z-index:700;z-index:600}@media (min-width:40rem){:host{max-width:26.5rem}}@media (min-width:40rem){.tablet\\:max-w-\\[26\\.5rem\\]{max-width:26.5rem!important}}";
+
+const ToastContainer = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    /**
+     * The placement of the container
+     */
+    this.placement = 'top-end';
+  }
+  render() {
+    return (h(Host, { class: {
+        'p-toast-container': true,
+        fixed: true,
+        'top-0': this.placement.indexOf('top') === 0,
+        'bottom-0': this.placement.indexOf('bottom') === 0,
+        'left-0': this.placement.indexOf('start') > 0,
+        'right-0': this.placement.indexOf('end') > 0,
+      } }, h("slot", null)));
+  }
+  static get style() { return toastContainerComponentCss; }
+}, [1, "p-toast-container", {
+    "placement": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["p-toast-container"];
+  components.forEach(tagName => { switch (tagName) {
+    case "p-toast-container":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, ToastContainer);
+      }
+      break;
+  } });
+}
+
+const PToastContainer = ToastContainer;
+const defineCustomElement = defineCustomElement$1;
+
+export { PToastContainer, defineCustomElement };

package/dist/components/p-toast.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PToast extends Components.PToast, HTMLElement {}
+export const PToast: {
+  prototype: PToast;
+  new (): PToast;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/p-toast.js

@@ -0,0 +1,73 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$4 } from './button.component.js';
+import { d as defineCustomElement$3 } from './icon.component.js';
+import { d as defineCustomElement$2 } from './loader.component.js';
+
+const toastComponentCss = ".static{position:static!important}.flex{display:flex!important}.w-full{width:100%!important}.min-w-0{min-width:0!important}.flex-1{flex:1 1 0%!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.justify-between{justify-content:space-between!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.rounded{border-radius:.25rem!important}.border-l-4{border-left-width:4px!important}.border-solid{border-style:solid!important}.border-l-positive{--tw-border-opacity:1!important;border-left-color:rgb(40 209 124/var(--tw-border-opacity))!important}.border-l-unbiased{--tw-border-opacity:1!important;border-left-color:rgb(255 199 45/var(--tw-border-opacity))!important}.border-l-negative{--tw-border-opacity:1!important;border-left-color:rgb(185 30 40/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}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-semibold{font-weight:600!important}.text-storm{color:rgb(81 83 107/var(--tw-text-opacity))!important}.text-storm,.text-storm-medium{--tw-text-opacity:1!important}.text-storm-medium{color:rgb(128 130 158/var(--tw-text-opacity))!important}.shadow-4{--tw-shadow:0px 0.3125rem 1rem rgba(0,24,98,.08),0px 0.0625rem 0.1875rem rgba(0,24,98,.13)!important;--tw-shadow-colored:0px 0.3125rem 1rem var(--tw-shadow-color),0px 0.0625rem 0.1875rem var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}*{box-sizing:border-box}:host{--tw-bg-opacity:1;--tw-shadow:0px 0.3125rem 1rem rgba(0,24,98,.08),0px 0.0625rem 0.1875rem rgba(0,24,98,.13)!important;--tw-shadow-colored:0px 0.3125rem 1rem var(--tw-shadow-color),0px 0.0625rem 0.1875rem var(--tw-shadow-color)!important;align-items:center;background-color:rgb(255 255 255/var(--tw-bg-opacity));border-left-width:4px!important;border-radius:.25rem;border-style:solid!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important;box-sizing:border-box;display:flex;gap:.5rem;justify-content:space-between;padding:1rem 1rem 1rem 1.25rem;width:100%}:host p{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.variant-positive){--tw-border-opacity:1!important;border-left-color:rgb(40 209 124/var(--tw-border-opacity))!important}:host(.variant-unbiased){--tw-border-opacity:1!important;border-left-color:rgb(255 199 45/var(--tw-border-opacity))!important}:host(.variant-negative){--tw-border-opacity:1!important;border-left-color:rgb(185 30 40/var(--tw-border-opacity))!important}";
+
+const Toast = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.action = createEvent(this, "action", 7);
+    /**
+     * The variant of the toast
+     */
+    this.variant = 'positive';
+    /**
+     * Wether to enable the close button
+     */
+    this.enableAction = true;
+    /**
+     * Icon to show on the button
+     */
+    this.actionIcon = 'negative';
+  }
+  render() {
+    var _a, _b;
+    return (h(Host, { class: `p-toast variant-${this.variant}` }, h("div", { class: "flex flex-col w-full min-w-0" }, h("p", { class: "font-semibold text-storm" }, ((_a = this.header) === null || _a === void 0 ? void 0 : _a.length) ? (this.header) : (h("slot", { name: "header" }))), h("p", { class: "text-sm text-storm-medium w-full" }, ((_b = this.content) === null || _b === void 0 ? void 0 : _b.length) ? (this.content) : (h("slot", { name: "content" })))), this.enableAction && (h("p-button", { class: "flex-1", variant: "secondary", iconOnly: true, size: "small", icon: this.actionIcon, iconFlip: this.actionIconFlip, iconRotate: this.actionIconRotate, onClick: () => this.action.emit() }))));
+  }
+  static get style() { return toastComponentCss; }
+}, [1, "p-toast", {
+    "variant": [1],
+    "header": [1],
+    "content": [1],
+    "enableAction": [4, "enable-action"],
+    "actionIcon": [1, "action-icon"],
+    "actionIconFlip": [1, "action-icon-flip"],
+    "actionIconRotate": [2, "action-icon-rotate"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["p-toast", "p-button", "p-icon", "p-loader"];
+  components.forEach(tagName => { switch (tagName) {
+    case "p-toast":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Toast);
+      }
+      break;
+    case "p-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "p-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "p-loader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const PToast = Toast;
+const defineCustomElement = defineCustomElement$1;
+
+export { PToast, defineCustomElement };