@paperless/core 2.0.1-beta.32 → 2.0.1-beta.34

package/dist/components/{pagination.component.js → pagination-pages.component.js}

@@ -1,15 +1,25 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as cva } from './index2.js';
 import { d as defineCustomElement$2 } from './icon.component.js';
-import { d as defineCustomElement$1 } from './pagination-item.component.js';
+import { d as defineCustomElement$1 } from './pagination-pages-item.component.js';
 
-const paginationComponentCss = ".flex{display:flex!important}*{box-sizing:border-box}p-pagination{display:flex}.static{position:static!important}.hidden{display:none!important}";
-const PPaginationStyle0 = paginationComponentCss;
+const paginationPagesComponentCss = "*{box-sizing:border-box}.static{position:static!important}.flex{display:flex!important}.hidden{display:none!important}.items-center{align-items:center!important}.gap-2{gap:.5rem!important}";
+const PPaginationPagesStyle0 = paginationPagesComponentCss;
 
-const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTMLElement {
+const pagination = cva(['p-pagination', 'flex gap-2 items-center'], {
+    variants: {
+        hidden: {
+            false: 'flex',
+            true: 'hidden',
+        },
+    },
+});
+const PaginationPages = /*@__PURE__*/ proxyCustomElement(class PaginationPages extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.pageChange = createEvent(this, "pageChange", 3);
+        this.pagesChange = createEvent(this, "pagesChange", 7);
         this.page = 1;
         this.pageSize = 12;
         this.hideOnSinglePage = false;
@@ -19,22 +29,28 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
      * Event whenever the page changes
      */
     pageChange;
+    /**
+     * The pages that were generated
+     */
+    pagesChange;
     _pages = [];
     _set = [];
     componentWillRender() {
         this._generate();
     }
     render() {
-        return (h(Host, { key: '3568c3e866dcd2ffee3fb8acd34a81d63e564068', class: `p-pagination ${this.hideOnSinglePage && this._set?.length === 3 && 'hidden'}` }, this._set?.map(p => {
+        return (h(Host, { key: 'e0690bf05d27e87d7e85b24cd2944ed338296dbf', class: pagination({
+                hidden: this.hideOnSinglePage && this._set?.length === 3,
+            }) }, this._set?.map(p => {
             if (p.type === 'previous' || p.type === 'next') {
-                return (h("p-pagination-item", { onClick: () => p.type === 'previous'
+                return (h("p-pagination-pages-item", { variant: 'carousel', disabled: this._carouselDisabled(p.type), onClick: () => p.type === 'previous'
                         ? this._previousClick()
                         : this._nextClick() }, p.value));
             }
             if (p.type === 'ellipsis') {
-                return h("p-pagination-item", null, "...");
+                return (h("p-pagination-pages-item", { hover: false }, "..."));
             }
-            return (h("p-pagination-item", { active: p.value === this.page, onClick: () => this._pageClick(p.value) }, p.value));
+            return (h("p-pagination-pages-item", { active: p.value === this.page, onClick: () => this._pageClick(p.value) }, p.value));
         })));
     }
     pageChangeHandler() {
@@ -55,18 +71,31 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
         this.pageChange.emit(this.page);
     }
     _previousClick() {
-        const previousPage = this.page - 1;
-        if (previousPage < this._pages[0]) {
+        if (this._carouselDisabled('previous')) {
             return;
         }
-        this._changePage(previousPage);
+        this._changePage(this.page - 1);
     }
     _nextClick = () => {
-        const nextPage = this.page + 1;
-        if (nextPage > this._pages[this._pages.length - 1]) {
+        if (this._carouselDisabled('next')) {
             return;
         }
-        this._changePage(nextPage);
+        this._changePage(this.page + 1);
+    };
+    _carouselDisabled = (type) => {
+        if (type === 'next') {
+            const nextPage = this.page + 1;
+            if (nextPage > this._pages[this._pages.length - 1]) {
+                return true;
+            }
+        }
+        if (type === 'previous') {
+            const previousPage = this.page - 1;
+            if (previousPage < this._pages[0]) {
+                return true;
+            }
+        }
+        return false;
     };
     _pageClick = (p) => this._changePage(p);
     _generatePages() {
@@ -74,6 +103,7 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
             return [];
         }
         const pages = Math.ceil(this.total / this.pageSize);
+        this.pagesChange.emit(pages);
         return new Array(pages).fill(undefined).map((_, i) => i + 1);
     }
     _generateSet = (range = 1, enableBoundaries = true) => {
@@ -95,11 +125,11 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
         const set = [];
         const previous = {
             type: 'previous',
-            value: (h("p-icon", { variant: 'caret', rotate: 90 })),
+            value: (h("p-icon", { variant: 'caret', size: 'sm', rotate: 90 })),
         };
         const next = {
             type: 'next',
-            value: (h("p-icon", { variant: 'caret', rotate: -90 })),
+            value: (h("p-icon", { variant: 'caret', size: 'sm', rotate: -90 })),
         };
         // Disable page range, display all the pages
         if (range === null) {
@@ -163,8 +193,8 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
         "pageSize": ["pageChangeHandler"],
         "total": ["pageChangeHandler"]
     }; }
-    static get style() { return PPaginationStyle0; }
-}, [0, "p-pagination", {
+    static get style() { return PPaginationPagesStyle0; }
+}, [0, "p-pagination-pages", {
         "page": [1538],
         "pageSize": [2, "page-size"],
         "hideOnSinglePage": [4, "hide-on-single-page"],
@@ -178,11 +208,11 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["p-pagination", "p-icon", "p-pagination-item"];
+    const components = ["p-pagination-pages", "p-icon", "p-pagination-pages-item"];
     components.forEach(tagName => { switch (tagName) {
-        case "p-pagination":
+        case "p-pagination-pages":
             if (!customElements.get(tagName)) {
-                customElements.define(tagName, Pagination);
+                customElements.define(tagName, PaginationPages);
             }
             break;
         case "p-icon":
@@ -190,7 +220,7 @@ function defineCustomElement() {
                 defineCustomElement$2();
             }
             break;
-        case "p-pagination-item":
+        case "p-pagination-pages-item":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }
@@ -198,6 +228,6 @@ function defineCustomElement() {
     } });
 }
 
-export { Pagination as P, defineCustomElement as d };
+export { PaginationPages as P, defineCustomElement as d };
 
-//# sourceMappingURL=pagination.component.js.map
+//# sourceMappingURL=pagination-pages.component.js.map

package/dist/components/pagination-pages.component.js.map

@@ -0,0 +1 @@
+{"file":"pagination-pages.component.js","mappings":"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","names":[],"sources":["src/components/molecules/pagination-pages/pagination-pages.component.css?tag=p-pagination-pages","src/components/molecules/pagination-pages/pagination-pages.component.tsx"],"sourcesContent":["","import {\n\tComponent,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tProp,\n\tWatch,\n} from '@stencil/core';\nimport { cva } from 'class-variance-authority';\n\ntype PaginationSetItem = {\n\ttype: string;\n\tvalue?: number | Element | JSX.Element | string;\n};\n\nconst pagination = cva(['p-pagination', 'flex gap-2 items-center'], {\n\tvariants: {\n\t\thidden: {\n\t\t\tfalse: 'flex',\n\t\t\ttrue: 'hidden',\n\t\t},\n\t},\n});\n\n@Component({\n\ttag: 'p-pagination-pages',\n\tstyleUrl: 'pagination-pages.component.css',\n})\nexport class PaginationPages {\n\t/**\n\t * The current page\n\t */\n\t@Prop({ mutable: true, reflect: true }) page: number = 1;\n\n\t/**\n\t * Event whenever the page changes\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tpageChange: EventEmitter<number>;\n\n\t/**\n\t * The amount of items per page\n\t */\n\t@Prop() pageSize: number = 12;\n\n\t/**\n\t * Wether to hide when there is only 1 page available\n\t */\n\t@Prop() hideOnSinglePage: boolean = false;\n\n\t/**\n\t * The total amount of items\n\t */\n\t@Prop() total!: number;\n\n\t/**\n\t * The pages that were generated\n\t */\n\t@Event() pagesChange: EventEmitter<number>;\n\n\tprivate _pages: number[] = [];\n\tprivate _set: PaginationSetItem[] = [];\n\n\tcomponentWillRender() {\n\t\tthis._generate();\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={pagination({\n\t\t\t\t\thidden: this.hideOnSinglePage && this._set?.length === 3,\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{this._set?.map(p => {\n\t\t\t\t\tif (p.type === 'previous' || p.type === 'next') {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<p-pagination-pages-item\n\t\t\t\t\t\t\t\tvariant='carousel'\n\t\t\t\t\t\t\t\tdisabled={this._carouselDisabled(p.type)}\n\t\t\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\t\t\tp.type === 'previous'\n\t\t\t\t\t\t\t\t\t\t? this._previousClick()\n\t\t\t\t\t\t\t\t\t\t: this._nextClick()\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{p.value}\n\t\t\t\t\t\t\t</p-pagination-pages-item>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\n\t\t\t\t\tif (p.type === 'ellipsis') {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<p-pagination-pages-item hover={false}>\n\t\t\t\t\t\t\t\t...\n\t\t\t\t\t\t\t</p-pagination-pages-item>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<p-pagination-pages-item\n\t\t\t\t\t\t\tactive={p.value === this.page}\n\t\t\t\t\t\t\tonClick={() => this._pageClick(p.value as number)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{p.value}\n\t\t\t\t\t\t</p-pagination-pages-item>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Watch('page')\n\t@Watch('pageSize')\n\t@Watch('total')\n\tprotected pageChangeHandler() {\n\t\tthis._generate();\n\t}\n\n\tprivate _generate() {\n\t\tthis._pages = this._generatePages();\n\t\tthis._set = this._generateSet();\n\n\t\tif (this.page > this._pages?.length) {\n\t\t\tthis._changePage(this._pages.length);\n\t\t}\n\t}\n\n\tprivate _changePage(p?: number) {\n\t\tif (!p) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.page = p;\n\t\tthis.pageChange.emit(this.page);\n\t}\n\n\tprivate _previousClick() {\n\t\tif (this._carouselDisabled('previous')) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._changePage(this.page - 1);\n\t}\n\n\tprivate _nextClick = () => {\n\t\tif (this._carouselDisabled('next')) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._changePage(this.page + 1);\n\t};\n\n\tprivate _carouselDisabled = (type: 'previous' | 'next') => {\n\t\tif (type === 'next') {\n\t\t\tconst nextPage = this.page + 1;\n\t\t\tif (nextPage > this._pages[this._pages.length - 1]) {\n\t\t\t\treturn true;\n\t\t\t}\n\t\t}\n\n\t\tif (type === 'previous') {\n\t\t\tconst previousPage = this.page - 1;\n\t\t\tif (previousPage < this._pages[0]) {\n\t\t\t\treturn true;\n\t\t\t}\n\t\t}\n\n\t\treturn false;\n\t};\n\n\tprivate _pageClick = (p?: number) => this._changePage(p);\n\n\tprivate _generatePages() {\n\t\tif (!this.total || !this.pageSize) {\n\t\t\treturn [];\n\t\t}\n\n\t\tconst pages = Math.ceil(this.total / this.pageSize);\n\t\tthis.pagesChange.emit(pages);\n\t\treturn new Array(pages).fill(undefined).map((_, i) => i + 1);\n\t}\n\n\tprivate _generateSet = (\n\t\trange: number = 1,\n\t\tenableBoundaries: boolean = true\n\t): PaginationSetItem[] => {\n\t\tconst totalPages = this._pages.length;\n\n\t\tif (!totalPages) {\n\t\t\treturn [];\n\t\t}\n\n\t\tlet start = this.page - range;\n\t\tlet end = this.page + range;\n\n\t\tif (end > totalPages) {\n\t\t\tend = totalPages;\n\t\t\tstart = totalPages - range * 2;\n\t\t\tstart = start < 1 ? 1 : start;\n\t\t}\n\n\t\tif (start <= 1) {\n\t\t\tstart = 1;\n\t\t\tend = Math.min(range * 2 + 1, totalPages);\n\t\t}\n\n\t\tconst set = [];\n\n\t\tconst previous = {\n\t\t\ttype: 'previous',\n\t\t\tvalue: (\n\t\t\t\t<p-icon\n\t\t\t\t\tvariant='caret'\n\t\t\t\t\tsize='sm'\n\t\t\t\t\trotate={90}\n\t\t\t\t/>\n\t\t\t),\n\t\t};\n\n\t\tconst next = {\n\t\t\ttype: 'next',\n\t\t\tvalue: (\n\t\t\t\t<p-icon\n\t\t\t\t\tvariant='caret'\n\t\t\t\t\tsize='sm'\n\t\t\t\t\trotate={-90}\n\t\t\t\t/>\n\t\t\t),\n\t\t};\n\n\t\t// Disable page range, display all the pages\n\t\tif (range === null) {\n\t\t\tconst p = this._pages.map(p => ({\n\t\t\t\ttype: 'page',\n\t\t\t\tvalue: p,\n\t\t\t}));\n\n\t\t\treturn enableBoundaries ? [previous, ...p, next] : p;\n\t\t}\n\n\t\tif (enableBoundaries) {\n\t\t\tset.push(previous);\n\t\t}\n\n\t\tif (start <= 3) {\n\t\t\tfor (let i = 1; i < start; i++) {\n\t\t\t\tset.push({\n\t\t\t\t\ttype: 'page',\n\t\t\t\t\tvalue: this._pages[i - 1],\n\t\t\t\t});\n\t\t\t}\n\t\t} else {\n\t\t\tset.push({\n\t\t\t\ttype: 'page',\n\t\t\t\tvalue: 1,\n\t\t\t});\n\n\t\t\tset.push({\n\t\t\t\ttype: 'ellipsis',\n\t\t\t\tvalue: 'ellipsis',\n\t\t\t});\n\t\t}\n\n\t\tfor (let i = start; i <= end; i++) {\n\t\t\tset.push({\n\t\t\t\ttype: 'page',\n\t\t\t\tvalue: this._pages[i - 1],\n\t\t\t});\n\t\t}\n\n\t\tif (end >= totalPages - 2) {\n\t\t\tfor (let i = end + 1; i <= totalPages; i++) {\n\t\t\t\tset.push({\n\t\t\t\t\ttype: 'page',\n\t\t\t\t\tvalue: this._pages[i - 1],\n\t\t\t\t});\n\t\t\t}\n\t\t} else {\n\t\t\tset.push({\n\t\t\t\ttype: 'ellipsis',\n\t\t\t});\n\n\t\t\tset.push({\n\t\t\t\ttype: 'page',\n\t\t\t\tvalue: this._pages[this._pages.length - 1],\n\t\t\t});\n\t\t}\n\n\t\tif (enableBoundaries) {\n\t\t\tset.push(next);\n\t\t}\n\n\t\treturn set;\n\t};\n}\n"],"version":3}

package/dist/components/pagination-size.component.js

@@ -0,0 +1,134 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { f as formatTranslation, g as getLocaleComponentStrings } from './localization.js';
+import { c as cva } from './index2.js';
+import { d as defineCustomElement$6 } from './checkbox.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 './portal.component.js';
+
+const defaultSize = 12;
+const defaultSizeOptions = [12, 24, 68, 136];
+
+const paginationSizeComponentCss = "*{box-sizing:border-box}.static{position:static!important}.flex{display:flex!important}.hidden{display:none!important}.h-6{height:1.5rem!important}.min-w-0{min-width:0!important}.flex-1{flex:1 1 0%!important}.flex-shrink-0{flex-shrink:0!important}.cursor-pointer{cursor:pointer!important}.items-center{align-items:center!important}.gap-2{gap:.5rem!important}.overflow-hidden{overflow:hidden!important}.text-ellipsis{text-overflow:ellipsis!important}.text-nowrap{text-wrap:nowrap!important}.rounded-full{border-radius:9999px!important}.bg-dark-teal-600{--tw-bg-opacity:1!important;background-color:rgb(0 72 64/var(--tw-bg-opacity,1))!important}.bg-dark-teal-800{--tw-bg-opacity:1!important;background-color:rgb(1 37 33/var(--tw-bg-opacity,1))!important}.px-2{padding-left:.5rem!important;padding-right:.5rem!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-medium{font-weight:500!important}.text-white{--tw-text-opacity:1!important;color:rgb(255 255 255/var(--tw-text-opacity,1))!important}.hover\\:bg-dark-teal-700:hover{--tw-bg-opacity:1!important;background-color:rgb(0 56 50/var(--tw-bg-opacity,1))!important}";
+const PPaginationSizeStyle0 = paginationSizeComponentCss;
+
+const paginationSize = cva('p-pagination-size', {
+    variants: {
+        hidden: {
+            false: null,
+            true: 'hidden',
+        },
+    },
+});
+const trigger = cva([
+    'flex items-center gap-2',
+    'px-2 h-6',
+    'text-sm text-white font-medium ',
+    'cursor-pointer rounded-full',
+], {
+    variants: {
+        active: {
+            false: 'bg-dark-teal-600 hover:bg-dark-teal-700',
+            true: 'bg-dark-teal-800',
+        },
+    },
+});
+const PaginationSize = /*@__PURE__*/ proxyCustomElement(class PaginationSize extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.sizeChange = createEvent(this, "sizeChange", 3);
+        this.size = defaultSize;
+        this.sizeOptions = defaultSizeOptions;
+        this.itemTemplate = this._defaultItemTemplate;
+        this.hidden = false;
+        this.dropdownIsOpen = false;
+        this._locales = {};
+    }
+    _defaultItemTemplate = size => formatTranslation(this._locales.item, { size });
+    /**
+     * Event whenever the size changes
+     */
+    sizeChange;
+    get _el() { return this; }
+    componentWillLoad() {
+        this._setLocales();
+    }
+    render() {
+        return (h(Host, { key: 'c6a8bdc78842d4eea1a88621dfea502146de809e', class: paginationSize({ hidden: this.hidden }) }, h("p-dropdown", { key: '426f6a7215cf96574d6b541582730f486d99f603', variant: 'dark-teal', placement: 'top-start', chevronDirection: 'down', calculateWidth: true, onIsOpen: ({ detail }) => (this.dropdownIsOpen = detail) }, h("div", { key: '1d0e91bbda0055e463d5240b58ddb5a1fa4f4ff5', class: trigger({
+                active: this.dropdownIsOpen,
+            }), slot: 'trigger' }, h("p", { key: '22fd50f9438b897fd2e44ae1c7b36f2964c6b415', class: 'min-w-0 flex-1 overflow-hidden text-ellipsis text-nowrap' }, this.itemTemplate
+            ? this.itemTemplate(this.size)
+            : this._defaultItemTemplate(this.size)), h("p-icon", { key: '0d1b2ef85f9a19593e454923adc3c969c8c4351d', class: 'flex-shrink-0', variant: 'double-caret', size: 'sm' })), h("slot", { key: '95bb00e64170b9df61ba489343e58fdf647051b3', slot: 'items' }, this.sizeOptions.map(option => (h("p-dropdown-menu-item", { active: option === this.size, onClick: () => this._changeSize(option) }, this.itemTemplate
+            ? this.itemTemplate(option)
+            : this._defaultItemTemplate(option))))))));
+    }
+    async _setLocales() {
+        this._locales = await getLocaleComponentStrings(this._el);
+    }
+    _changeSize(s) {
+        if (!s) {
+            return;
+        }
+        this.size = s;
+        this.sizeChange.emit(this.size);
+    }
+    static get style() { return PPaginationSizeStyle0; }
+}, [1, "p-pagination-size", {
+        "size": [1538],
+        "sizeOptions": [16],
+        "itemTemplate": [16],
+        "hidden": [4],
+        "dropdownIsOpen": [32],
+        "_locales": [32]
+    }, [[16, "localeChanged", "_setLocales"]]]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["p-pagination-size", "p-checkbox", "p-dropdown", "p-dropdown-menu-container", "p-dropdown-menu-item", "p-icon", "p-portal"];
+    components.forEach(tagName => { switch (tagName) {
+        case "p-pagination-size":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PaginationSize);
+            }
+            break;
+        case "p-checkbox":
+            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-portal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { PaginationSize as P, defaultSizeOptions as a, defineCustomElement as b, defaultSize as d };
+
+//# sourceMappingURL=pagination-size.component.js.map

package/dist/components/pagination-size.component.js.map

@@ -0,0 +1 @@
+{"file":"pagination-size.component.js","mappings":";;;;;;;;;;MAAa,WAAW,GAAG,GAAG;MACjB,kBAAkB,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG;;ACDlD,MAAM,0BAA0B,GAAG,4nCAA4nC,CAAC;AAChqC,8BAAe,0BAA0B;;ACmBzC,MAAM,cAAc,GAAG,GAAG,CAAC,mBAAmB,EAAE;IAC/C,QAAQ,EAAE;QACT,MAAM,EAAE;YACP,KAAK,EAAE,IAAI;YACX,IAAI,EAAE,QAAQ;SACd;KACD;CACD,CAAC,CAAC;AAEH,MAAM,OAAO,GAAG,GAAG,CAClB;IACC,yBAAyB;IACzB,UAAU;IACV,iCAAiC;IACjC,6BAA6B;CAC7B,EACD;IACC,QAAQ,EAAE;QACT,MAAM,EAAE;YACP,KAAK,EAAE,yCAAyC;YAChD,IAAI,EAAE,kBAAkB;SACxB;KACD;CACD,CACD,CAAC;MAOW,cAAc;;;;;;oBAM6B,WAAW;2BAKlC,kBAAkB;4BAab,IAAI,CAAC,oBAAoB;sBAUpC,KAAK;8BAKL,KAAK;wBAKE,EAAE;;IA3C3B,oBAAoB,GAAiB,IAAI,IAChD,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;;;;IAiBjD,UAAU,CAAuB;;IA2BjC,iBAAiB;QAChB,IAAI,CAAC,WAAW,EAAE,CAAC;KACnB;IAED,MAAM;QACL,QACC,EAAC,IAAI,qDAAC,KAAK,EAAE,cAAc,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,IACnD,mEACC,OAAO,EAAC,WAAW,EACnB,SAAS,EAAC,WAAW,EACrB,gBAAgB,EAAC,MAAM,EACvB,cAAc,EAAE,IAAI,EACpB,QAAQ,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC,IAExD,4DACC,KAAK,EAAE,OAAO,CAAC;gBACd,MAAM,EAAE,IAAI,CAAC,cAAc;aAC3B,CAAC,EACF,IAAI,EAAC,SAAS,IAEd,0DAAG,KAAK,EAAC,0DAA0D,IACjE,IAAI,CAAC,YAAY;cACf,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;cAC5B,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CACpC,EACJ,+DACC,KAAK,EAAC,eAAe,EACrB,OAAO,EAAC,cAAc,EACtB,IAAI,EAAC,IAAI,GACR,CACG,EACN,6DAAM,IAAI,EAAC,OAAO,IAChB,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,MAAM,KAC3B,4BACC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC,IAAI,EAC5B,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,IAEtC,IAAI,CAAC,YAAY;cACf,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;cACzB,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,CACd,CACvB,CAAC,CACI,CACK,CACP,EACN;KACF;IAGO,MAAM,WAAW;QACxB,IAAI,CAAC,QAAQ,GAAG,MAAM,yBAAyB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC1D;IAEO,WAAW,CAAC,CAAU;QAC7B,IAAI,CAAC,CAAC,EAAE;YACP,OAAO;SACP;QAED,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;QACd,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAChC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/molecules/pagination-size/constants.tsx","src/components/molecules/pagination-size/pagination-size.component.css?tag=p-pagination-size&encapsulation=shadow","src/components/molecules/pagination-size/pagination-size.component.tsx"],"sourcesContent":["export const defaultSize = 12;\nexport const defaultSizeOptions = [12, 24, 68, 136];\n","","import {\n\tComponent,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tProp,\n\tState,\n} from '@stencil/core';\nimport {\n\tformatTranslation,\n\tgetLocaleComponentStrings,\n} from '../../../utils/localization';\nimport { defaultSize, defaultSizeOptions } from './constants';\nimport { cva } from 'class-variance-authority';\n\nexport type templateFunc = (value: number) => string;\n\nconst paginationSize = cva('p-pagination-size', {\n\tvariants: {\n\t\thidden: {\n\t\t\tfalse: null,\n\t\t\ttrue: 'hidden',\n\t\t},\n\t},\n});\n\nconst trigger = cva(\n\t[\n\t\t'flex items-center gap-2',\n\t\t'px-2 h-6',\n\t\t'text-sm text-white font-medium ',\n\t\t'cursor-pointer rounded-full',\n\t],\n\t{\n\t\tvariants: {\n\t\t\tactive: {\n\t\t\t\tfalse: 'bg-dark-teal-600 hover:bg-dark-teal-700',\n\t\t\t\ttrue: 'bg-dark-teal-800',\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-pagination-size',\n\tstyleUrl: 'pagination-size.component.css',\n\tshadow: true,\n})\nexport class PaginationSize {\n\tprivate _defaultItemTemplate: templateFunc = size =>\n\t\tformatTranslation(this._locales.item, { size });\n\t/**\n\t * The current page\n\t */\n\t@Prop({ mutable: true, reflect: true }) size: number = defaultSize;\n\n\t/**\n\t * The available sizes\n\t */\n\t@Prop() sizeOptions: number[] = defaultSizeOptions;\n\n\t/**\n\t * Event whenever the size changes\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tsizeChange: EventEmitter<number>;\n\n\t/**\n\t * The template for the data view\n\t */\n\t@Prop() itemTemplate: templateFunc = this._defaultItemTemplate;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\t/**\n\t * Wether to hide when there is only 1 page available\n\t */\n\t@Prop() hidden: boolean = false;\n\n\t/**\n\t * Wether the dropdown is open\n\t */\n\t@State() dropdownIsOpen = false;\n\n\t/**\n\t * Locales used for this component\n\t */\n\t@State() private _locales: any = {};\n\n\tcomponentWillLoad() {\n\t\tthis._setLocales();\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={paginationSize({ hidden: this.hidden })}>\n\t\t\t\t<p-dropdown\n\t\t\t\t\tvariant='dark-teal'\n\t\t\t\t\tplacement='top-start'\n\t\t\t\t\tchevronDirection='down'\n\t\t\t\t\tcalculateWidth={true}\n\t\t\t\t\tonIsOpen={({ detail }) => (this.dropdownIsOpen = detail)}\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass={trigger({\n\t\t\t\t\t\t\tactive: this.dropdownIsOpen,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\tslot='trigger'\n\t\t\t\t\t>\n\t\t\t\t\t\t<p class='min-w-0 flex-1 overflow-hidden text-ellipsis text-nowrap'>\n\t\t\t\t\t\t\t{this.itemTemplate\n\t\t\t\t\t\t\t\t? this.itemTemplate(this.size)\n\t\t\t\t\t\t\t\t: this._defaultItemTemplate(this.size)}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<p-icon\n\t\t\t\t\t\t\tclass='flex-shrink-0'\n\t\t\t\t\t\t\tvariant='double-caret'\n\t\t\t\t\t\t\tsize='sm'\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<slot slot='items'>\n\t\t\t\t\t\t{this.sizeOptions.map(option => (\n\t\t\t\t\t\t\t<p-dropdown-menu-item\n\t\t\t\t\t\t\t\tactive={option === this.size}\n\t\t\t\t\t\t\t\tonClick={() => this._changeSize(option)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{this.itemTemplate\n\t\t\t\t\t\t\t\t\t? this.itemTemplate(option)\n\t\t\t\t\t\t\t\t\t: this._defaultItemTemplate(option)}\n\t\t\t\t\t\t\t</p-dropdown-menu-item>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</slot>\n\t\t\t\t</p-dropdown>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Listen('localeChanged', { target: 'body' })\n\tprivate async _setLocales(): Promise<void> {\n\t\tthis._locales = await getLocaleComponentStrings(this._el);\n\t}\n\n\tprivate _changeSize(s?: number) {\n\t\tif (!s) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.size = s;\n\t\tthis.sizeChange.emit(this.size);\n\t}\n}\n"],"version":3}

package/dist/components/portal.component.js

@@ -17,7 +17,7 @@ const Portal = /*@__PURE__*/ proxyCustomElement(class Portal extends HTMLElement
         this._moved ? this._el.remove() : (this._moved = true);
     }
     render() {
-        return (h(Host, { key: '7604d2cbdf309fb03b9a051d737f2b92fa57a354' }, h("slot", { key: 'f4edec28f68504e7622f7fcffe9a80cf55501af9' })));
+        return (h(Host, { key: 'bb0d2d84023af6e4d6b9d87ebeba83d16c37949b' }, h("slot", { key: '014316bcd782e41366cbf3489357b1ea47b5d23b' })));
     }
 }, [4, "p-portal"]);
 function defineCustomElement() {

package/dist/components/segment-container.component.js

@@ -9,7 +9,7 @@ const SegmentContainer = /*@__PURE__*/ proxyCustomElement(class SegmentContainer
         this.__registerHost();
     }
     render() {
-        return (h(Host, { key: 'f79a4fe8be098c3d1b6fd7665fd1f9b6c60ea6b7', class: 'p-segment-container flex rounded-full border border-solid border-off-white-700 bg-off-white-300 p-1' }, h("slot", { key: '0ef77a6b16756590ada3d45dd706cb7067aabebf' })));
+        return (h(Host, { key: 'e171752c7eb839f1efea4ffe9c09caa08da154bc', class: 'p-segment-container flex rounded-full border border-solid border-off-white-700 bg-off-white-300 p-1' }, h("slot", { key: 'a9fba3fe448232dffc7a495507d53faa059e405d' })));
     }
     static get style() { return PSegmentContainerStyle0; }
 }, [4, "p-segment-container"]);

package/dist/components/segment-item.component.js

@@ -33,10 +33,10 @@ const SegmentItem = /*@__PURE__*/ proxyCustomElement(class SegmentItem extends H
         this.iconRotate = undefined;
     }
     render() {
-        return (h(Host, { key: 'af7456be3e588b691ccd3b1adda951e04adf5ba2', class: segmentItem({
+        return (h(Host, { key: 'b038e9d37e1ed6fef2c26b526f756d5b4d3969c8', class: segmentItem({
                 active: this.active,
                 iconOnly: this.iconOnly,
-            }) }, this.icon && (h("p-icon", { key: 'dc5df1291d42c311a2c24c7a6fd89ce03f716e46', variant: this.icon, flip: this.iconFlip, rotate: this.iconRotate })), h("slot", { key: '65c6decbb477758300ce389a7a07f0ac174867f8' })));
+            }) }, this.icon && (h("p-icon", { key: '01ad5164e37f166395422a6a5ffe38499a42b26b', variant: this.icon, flip: this.iconFlip, rotate: this.iconRotate })), h("slot", { key: '0b8d0661e1f774422008fc22e3c96e64c8388ac4' })));
     }
     static get style() { return PSegmentItemStyle0; }
 }, [4, "p-segment-item", {

package/dist/components/slider-indicator.component.js

@@ -11,7 +11,7 @@ const SliderIndicator = /*@__PURE__*/ proxyCustomElement(class SliderIndicator e
         this.active = false;
     }
     render() {
-        return (h(Host, { key: '3fea5f2ed9499de58de65a9d313a9b84813af48c', class: `p-slider-indicator ${this.active && 'active'}` }));
+        return (h(Host, { key: 'b4a76296cb2107ee168a257a89fcf4cd75a724dc', class: `p-slider-indicator ${this.active && 'active'}` }));
     }
     static get style() { return PSliderIndicatorStyle0; }
 }, [1, "p-slider-indicator", {

package/dist/components/stepper-line.component.js

@@ -12,7 +12,7 @@ const StepperLine = /*@__PURE__*/ proxyCustomElement(class StepperLine extends H
         this.direction = 'horizontal';
     }
     render() {
-        return h(Host, { key: 'a92797d409afb13452d2e973fc0ad35e7d5e6dee', class: "p-stepper-line" });
+        return h(Host, { key: '1f10907cd345fbd5beda9a9d022426dbeb1d769d', class: "p-stepper-line" });
     }
     static get style() { return PStepperLineStyle0; }
 }, [1, "p-stepper-line", {

package/dist/components/table-cell.component.js

@@ -33,7 +33,7 @@ const TableCell = /*@__PURE__*/ proxyCustomElement(class TableCell extends HTMLE
         };
     }
     render() {
-        return (h(Host, { key: 'fdd68a4b75fa75a0301b2721d81a069cac64d098', class: {
+        return (h(Host, { key: '5ea2d685b03dbab341e3dc4707a2fec3b1959e2c', class: {
                 'p-table-cell': true,
                 [`variant-${this.variant}`]: true,
                 ...this._getColumnClasses(),

package/dist/components/table-container.component.js

@@ -11,7 +11,7 @@ const TableContainer = /*@__PURE__*/ proxyCustomElement(class TableContainer ext
         this.shadow = true;
     }
     render() {
-        return (h(Host, { key: '73eb4897c9a50ca1f673eff5d331d180462d3b5d', class: `p-table-container ${!this.shadow && 'no-shadow'}` }, h("slot", { key: 'ee29b6fd875e4e170343caf2e1c04e6177779425' })));
+        return (h(Host, { key: 'f9b97958a4f0e448258e16b116fe42a81b014eb8', class: `p-table-container ${!this.shadow && 'no-shadow'}` }, h("slot", { key: 'dfb4247a6e6a80479c44ae9481d620666fad2a55' })));
     }
     static get style() { return PTableContainerStyle0; }
 }, [1, "p-table-container", {

package/dist/components/table-footer.component.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { f as formatTranslation, g as getLocaleComponentStrings } from './localization.js';
-import { a as defaultSize, b as defaultSizeOptions, d as defineCustomElement$4 } from './page-size-select.component.js';
+import { d as defaultSize, a as defaultSizeOptions, b as defineCustomElement$2 } from './pagination-size.component.js';
 import { d as defineCustomElement$b } from './button.component.js';
 import { d as defineCustomElement$a } from './checkbox.component.js';
 import { d as defineCustomElement$9 } from './dropdown.component.js';
@@ -8,11 +8,11 @@ import { d as defineCustomElement$8 } from './dropdown-menu-container.component.
 import { d as defineCustomElement$7 } from './dropdown-menu-item.component.js';
 import { d as defineCustomElement$6 } from './icon.component.js';
 import { d as defineCustomElement$5 } from './loader.component.js';
-import { d as defineCustomElement$3 } from './pagination.component.js';
-import { d as defineCustomElement$2 } from './pagination-item.component.js';
+import { d as defineCustomElement$4 } from './pagination-pages.component.js';
+import { d as defineCustomElement$3 } from './pagination-pages-item.component.js';
 import { d as defineCustomElement$1 } from './portal.component.js';
 
-const tableFooterComponentCss = ".flex{display:flex!important}.grid{display:grid!important}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))!important}.justify-self-end{justify-self:end!important}.justify-self-center{justify-self:center!important}*{box-sizing:border-box}:host{display:grid;gap:1rem;grid-template-columns:repeat(1,minmax(0,1fr));padding:1.5rem;width:100%}:host>p-pagination{display:flex;grid-column-start:1;justify-self:center}:host>p-loader{grid-column-start:1}@media (min-width:64rem){:host{grid-template-areas:\"page-size pagination export\";grid-template-columns:repeat(3,minmax(0,1fr))}:host>p-page-size-select{grid-column-start:1}:host>p-pagination{grid-column-start:2}:host>p-loader{grid-column-start:2}:host>p-button{grid-column-start:3;justify-self:end}}:host(.page-size-disabled.export-disabled){grid-template-columns:repeat(1,minmax(0,1fr))}:host(.page-size-disabled.export-disabled)>p-pagination{grid-column-start:1}.static{position:static!important}.hidden{display:none!important}.h-8{height:2rem!important}.w-full{width:100%!important}.rounded{border-radius:.25rem!important}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}";
+const tableFooterComponentCss = ".col-start-1{grid-column-start:1!important}.col-start-3{grid-column-start:3!important}.flex{display:flex!important}.grid{display:grid!important}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))!important}*{box-sizing:border-box}:host{display:grid;gap:1rem;grid-template-columns:repeat(1,minmax(0,1fr));padding:1.5rem;width:100%}:host>p-pagination{display:flex;grid-column-start:1;justify-self:center}:host>p-loader{grid-column-start:1}@media (min-width:64rem){:host{grid-template-areas:\"page-size pagination export\";grid-template-columns:repeat(3,minmax(0,1fr))}:host>p-pagination-size{grid-column-start:1}:host>p-pagination-pages{grid-column-start:2}:host>p-loader{grid-column-start:2}:host>p-button{grid-column-start:3;justify-self:end}}:host(.page-size-disabled.export-disabled){grid-template-columns:repeat(1,minmax(0,1fr))}:host(.page-size-disabled.export-disabled)>p-pagination{grid-column-start:1}.static{position:static!important}.hidden{display:none!important}.h-8{height:2rem!important}.w-full{width:100%!important}.rounded{border-radius:.25rem!important}@media (min-width:64rem){.desktop-xs\\:flex{display:flex!important}}";
 const PTableFooterStyle0 = tableFooterComponentCss;
 
 const TableFooter = /*@__PURE__*/ proxyCustomElement(class TableFooter extends HTMLElement {
@@ -52,7 +52,7 @@ const TableFooter = /*@__PURE__*/ proxyCustomElement(class TableFooter extends H
     }
     render() {
         const hidePageSizeSelect = this.hideOnSinglePage && this.total < this.pageSizeOptions?.[0];
-        return (h(Host, { key: '8c85669efe0bdc3f14fe0dfb5cbca5a38451b2ca', class: `p-table-footer ${!this.enablePageSize && 'page-size-disabled'} ${!this.enablePagination && 'pagination-disabled'} ${!this.enableExport && 'export-disabled'}` }, !this.loading && this.enablePagination && this.enablePageSize && (h("p-page-size-select", { key: '69cb04177926201d314ab138ac72452d9a32ccd3', class: !hidePageSizeSelect && 'hidden desktop-xs:flex', hidden: hidePageSizeSelect, size: this.pageSize, sizeOptions: this.pageSizeOptions, onSizeChange: ({ detail }) => this._changePageSize(detail) })), this.loading && (h("p-loader", { key: '4601f2a8736bb05af33159769bfba2e1854c8cdf', variant: 'ghost', class: 'h-8 w-full rounded' })), !this.loading && this.enablePagination && (h("p-pagination", { key: 'e9c672d24d92cb973482a37b16f8a1210fb17345', pageSize: this.pageSize, total: this.total, page: this.page, hideOnSinglePage: this.hideOnSinglePage, onPageChange: ({ detail }) => this.pageChange.emit(detail) })), !this.loading && this.enableExport && (h("p-button", { key: '3f6942fb87389cb69281e397134f857d2cedb87c', class: 'hidden desktop-xs:flex', variant: 'secondary', size: 'sm', icon: 'download', onClick: () => this.export.emit() }, formatTranslation(this._locales.export)))));
+        return (h(Host, { key: 'cb2418de42dab7f9020c52c4883d11dd74ada665', class: `p-table-footer ${!this.enablePageSize && 'page-size-disabled'} ${!this.enablePagination && 'pagination-disabled'} ${!this.enableExport && 'export-disabled'}` }, !this.loading && this.enablePagination && this.enablePageSize && (h("p-pagination-size", { key: '7e35edad34ffafecbfd1574025e43accf4d6875c', class: !hidePageSizeSelect && 'hidden desktop-xs:flex', hidden: hidePageSizeSelect, size: this.pageSize, sizeOptions: this.pageSizeOptions, onSizeChange: ({ detail }) => this._changePageSize(detail) })), this.loading && (h("p-loader", { key: 'ef267282c339b87669ec03e7e7c2d01969480563', variant: 'ghost', class: 'h-8 w-full rounded' })), !this.loading && this.enablePagination && (h("p-pagination-pages", { key: '7524b69f3ec82817f753ac66bd6a791bb905b4a0', pageSize: this.pageSize, total: this.total, page: this.page, hideOnSinglePage: this.hideOnSinglePage, onPageChange: ({ detail }) => this.pageChange.emit(detail) })), !this.loading && this.enableExport && (h("p-button", { key: '508ddec714228b334d682f93185a555a030c5cd2', class: 'hidden desktop-xs:flex', variant: 'secondary', size: 'sm', icon: 'download', onClick: () => this.export.emit() }, formatTranslation(this._locales.export)))));
     }
     async _setLocales() {
         this._locales = await getLocaleComponentStrings(this._el);
@@ -81,7 +81,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["p-table-footer", "p-button", "p-checkbox", "p-dropdown", "p-dropdown-menu-container", "p-dropdown-menu-item", "p-icon", "p-loader", "p-page-size-select", "p-pagination", "p-pagination-item", "p-portal"];
+    const components = ["p-table-footer", "p-button", "p-checkbox", "p-dropdown", "p-dropdown-menu-container", "p-dropdown-menu-item", "p-icon", "p-loader", "p-pagination-pages", "p-pagination-pages-item", "p-pagination-size", "p-portal"];
     components.forEach(tagName => { switch (tagName) {
         case "p-table-footer":
             if (!customElements.get(tagName)) {
@@ -123,17 +123,17 @@ function defineCustomElement() {
                 defineCustomElement$5();
             }
             break;
-        case "p-page-size-select":
+        case "p-pagination-pages":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "p-pagination":
+        case "p-pagination-pages-item":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "p-pagination-item":
+        case "p-pagination-size":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/dist/components/table-footer.component.js.map

@@ -1 +1 @@
-{"file":"table-footer.component.js","mappings":";;;;;;;;;;;;;;AAAA,MAAM,uBAAuB,GAAG,+nCAA+nC,CAAC;AAChqC,2BAAe,uBAAuB;;MCqBzB,WAAW;;;;;;;;8BAIW,IAAI;gCAKF,IAAI;4BAKR,IAAI;uBAKT,KAAK;oBAKuB,CAAC;;wBAkB7B,WAAW;+BAKF,kBAAkB;gCAqBlB,IAAI;wBAUP,EAAE;;;;;IAzCnC,UAAU,CAAuB;;;;IAkBjC,cAAc,CAAuB;;;;IAQrC,MAAM,CAAuB;;IAiB7B,iBAAiB;QAChB,IAAI,CAAC,WAAW,EAAE,CAAC;KACnB;IAED,MAAM;QACL,MAAM,kBAAkB,GACvB,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC;QACjE,QACC,EAAC,IAAI,qDACJ,KAAK,EAAE,kBACN,CAAC,IAAI,CAAC,cAAc,IAAI,oBACzB,IAAI,CAAC,IAAI,CAAC,gBAAgB,IAAI,qBAAqB,IAClD,CAAC,IAAI,CAAC,YAAY,IAAI,iBACvB,EAAE,IAED,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,cAAc,KAC7D,2EACC,KAAK,EAAE,CAAC,kBAAkB,IAAI,wBAAwB,EACtD,MAAM,EAAE,kBAAkB,EAC1B,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,WAAW,EAAE,IAAI,CAAC,eAAe,EACjC,YAAY,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,GACzD,CACF,EAEA,IAAI,CAAC,OAAO,KACZ,iEACC,OAAO,EAAC,OAAO,EACf,KAAK,EAAC,oBAAoB,GACf,CACZ,EAEA,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,gBAAgB,KACtC,qEACC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,YAAY,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,GACzD,CACF,EACA,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,YAAY,KAClC,iEACC,KAAK,EAAC,wBAAwB,EAC9B,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,IAAI,EACT,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,IAEhC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAC9B,CACX,CACK,EACN;KACF;IAGO,MAAM,WAAW;QACxB,IAAI,CAAC,QAAQ,GAAG,MAAM,yBAAyB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC1D;IAEO,eAAe,CAAC,CAAU;QACjC,IAAI,CAAC,CAAC,EAAE;YACP,OAAO;SACP;QAED,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;QAClB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACxC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/molecules/table-footer/table-footer.component.scss?tag=p-table-footer&encapsulation=shadow","src/components/molecules/table-footer/table-footer.component.tsx"],"sourcesContent":[":host {\n\t@apply grid grid-cols-1 gap-4;\n\t@apply w-full;\n\t@apply p-6;\n\n\t> p-pagination {\n\t\t@apply flex justify-self-center col-start-1;\n\t}\n\n\t> p-loader {\n\t\t@apply col-start-1;\n\t}\n\n\t@screen desktop-xs {\n\t\t@apply grid-cols-3;\n\t\tgrid-template-areas: 'page-size pagination export';\n\n\t\t> p-page-size-select {\n\t\t\t@apply col-start-1;\n\t\t}\n\n\t\t> p-pagination {\n\t\t\t@apply col-start-2;\n\t\t}\n\n\t\t> p-loader {\n\t\t\t@apply col-start-2;\n\t\t}\n\n\t\t> p-button {\n\t\t\t@apply justify-self-end col-start-3;\n\t\t}\n\t}\n}\n\n:host(.page-size-disabled.export-disabled) {\n\t@apply grid-cols-1;\n\n\t> p-pagination {\n\t\t@apply col-start-1;\n\t}\n}\n","import {\n\tComponent,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tProp,\n\tState,\n} from '@stencil/core';\nimport {\n\tformatTranslation,\n\tgetLocaleComponentStrings,\n} from '../../../utils/localization';\nimport { defaultSize, defaultSizeOptions } from '../page-size-select/constants';\n\n@Component({\n\ttag: 'p-table-footer',\n\tstyleUrl: 'table-footer.component.scss',\n\tshadow: true,\n})\nexport class TableFooter {\n\t/**\n\t * Wether to enable page size select\n\t */\n\t@Prop() enablePageSize: boolean = true;\n\n\t/**\n\t * Wether to enable pagination\n\t */\n\t@Prop() enablePagination: boolean = true;\n\n\t/**\n\t * Wether to enable export\n\t */\n\t@Prop() enableExport: boolean = true;\n\n\t/**\n\t * Wether we want to show loading state\n\t */\n\t@Prop() loading: boolean = false;\n\n\t/**\n\t * The current page\n\t */\n\t@Prop({ mutable: true, reflect: true }) page: number = 1;\n\n\t/**\n\t * The total amount of items\n\t */\n\t@Prop() total!: number;\n\n\t/**\n\t * Event whenever the page changes\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tpageChange: EventEmitter<number>;\n\n\t/**\n\t * The amount of items per page\n\t */\n\t@Prop() pageSize: number = defaultSize;\n\n\t/**\n\t * The options for the page size\n\t */\n\t@Prop() pageSizeOptions: number[] = defaultSizeOptions;\n\n\t/**\n\t * Event whenever the page changes\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tpageSizeChange: EventEmitter<number>;\n\n\t/**\n\t * Event whenever the page changes\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\texport: EventEmitter<number>;\n\n\t/**\n\t * Wether to hide when there is only 1 page available\n\t */\n\t@Prop() hideOnSinglePage: boolean = true;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\t/**\n\t * Locales used for this component\n\t */\n\t@State() private _locales: any = {};\n\n\tcomponentWillLoad() {\n\t\tthis._setLocales();\n\t}\n\n\trender() {\n\t\tconst hidePageSizeSelect =\n\t\t\tthis.hideOnSinglePage && this.total < this.pageSizeOptions?.[0];\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={`p-table-footer ${\n\t\t\t\t\t!this.enablePageSize && 'page-size-disabled'\n\t\t\t\t} ${!this.enablePagination && 'pagination-disabled'} ${\n\t\t\t\t\t!this.enableExport && 'export-disabled'\n\t\t\t\t}`}\n\t\t\t>\n\t\t\t\t{!this.loading && this.enablePagination && this.enablePageSize && (\n\t\t\t\t\t<p-page-size-select\n\t\t\t\t\t\tclass={!hidePageSizeSelect && 'hidden desktop-xs:flex'}\n\t\t\t\t\t\thidden={hidePageSizeSelect}\n\t\t\t\t\t\tsize={this.pageSize}\n\t\t\t\t\t\tsizeOptions={this.pageSizeOptions}\n\t\t\t\t\t\tonSizeChange={({ detail }) => this._changePageSize(detail)}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{this.loading && (\n\t\t\t\t\t<p-loader\n\t\t\t\t\t\tvariant='ghost'\n\t\t\t\t\t\tclass='h-8 w-full rounded'\n\t\t\t\t\t></p-loader>\n\t\t\t\t)}\n\n\t\t\t\t{!this.loading && this.enablePagination && (\n\t\t\t\t\t<p-pagination\n\t\t\t\t\t\tpageSize={this.pageSize}\n\t\t\t\t\t\ttotal={this.total}\n\t\t\t\t\t\tpage={this.page}\n\t\t\t\t\t\thideOnSinglePage={this.hideOnSinglePage}\n\t\t\t\t\t\tonPageChange={({ detail }) => this.pageChange.emit(detail)}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{!this.loading && this.enableExport && (\n\t\t\t\t\t<p-button\n\t\t\t\t\t\tclass='hidden desktop-xs:flex'\n\t\t\t\t\t\tvariant='secondary'\n\t\t\t\t\t\tsize='sm'\n\t\t\t\t\t\ticon='download'\n\t\t\t\t\t\tonClick={() => this.export.emit()}\n\t\t\t\t\t>\n\t\t\t\t\t\t{formatTranslation(this._locales.export)}\n\t\t\t\t\t</p-button>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Listen('localeChanged', { target: 'body' })\n\tprivate async _setLocales(): Promise<void> {\n\t\tthis._locales = await getLocaleComponentStrings(this._el);\n\t}\n\n\tprivate _changePageSize(s?: number) {\n\t\tif (!s) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.pageSize = s;\n\t\tthis.pageSizeChange.emit(this.pageSize);\n\t}\n}\n"],"version":3}
+{"file":"table-footer.component.js","mappings":";;;;;;;;;;;;;;AAAA,MAAM,uBAAuB,GAAG,0nCAA0nC,CAAC;AAC3pC,2BAAe,uBAAuB;;MCqBzB,WAAW;;;;;;;;8BAIW,IAAI;gCAKF,IAAI;4BAKR,IAAI;uBAKT,KAAK;oBAKuB,CAAC;;wBAkB7B,WAAW;+BAKF,kBAAkB;gCAqBlB,IAAI;wBAUP,EAAE;;;;;IAzCnC,UAAU,CAAuB;;;;IAkBjC,cAAc,CAAuB;;;;IAQrC,MAAM,CAAuB;;IAiB7B,iBAAiB;QAChB,IAAI,CAAC,WAAW,EAAE,CAAC;KACnB;IAED,MAAM;QACL,MAAM,kBAAkB,GACvB,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC;QACjE,QACC,EAAC,IAAI,qDACJ,KAAK,EAAE,kBACN,CAAC,IAAI,CAAC,cAAc,IAAI,oBACzB,IAAI,CAAC,IAAI,CAAC,gBAAgB,IAAI,qBAAqB,IAClD,CAAC,IAAI,CAAC,YAAY,IAAI,iBACvB,EAAE,IAED,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,cAAc,KAC7D,0EACC,KAAK,EAAE,CAAC,kBAAkB,IAAI,wBAAwB,EACtD,MAAM,EAAE,kBAAkB,EAC1B,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,WAAW,EAAE,IAAI,CAAC,eAAe,EACjC,YAAY,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,GACzD,CACF,EAEA,IAAI,CAAC,OAAO,KACZ,iEACC,OAAO,EAAC,OAAO,EACf,KAAK,EAAC,oBAAoB,GACf,CACZ,EAEA,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,gBAAgB,KACtC,2EACC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,YAAY,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,GACzD,CACF,EAEA,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,YAAY,KAClC,iEACC,KAAK,EAAC,wBAAwB,EAC9B,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,IAAI,EACT,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,IAEhC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,CAC9B,CACX,CACK,EACN;KACF;IAGO,MAAM,WAAW;QACxB,IAAI,CAAC,QAAQ,GAAG,MAAM,yBAAyB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC1D;IAEO,eAAe,CAAC,CAAU;QACjC,IAAI,CAAC,CAAC,EAAE;YACP,OAAO;SACP;QAED,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;QAClB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACxC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/molecules/table-footer/table-footer.component.scss?tag=p-table-footer&encapsulation=shadow","src/components/molecules/table-footer/table-footer.component.tsx"],"sourcesContent":[":host {\n\t@apply grid grid-cols-1 gap-4;\n\t@apply w-full;\n\t@apply p-6;\n\n\t> p-pagination {\n\t\t@apply col-start-1 flex justify-self-center;\n\t}\n\n\t> p-loader {\n\t\t@apply col-start-1;\n\t}\n\n\t@screen desktop-xs {\n\t\t@apply grid-cols-3;\n\t\tgrid-template-areas: 'page-size pagination export';\n\n\t\t> p-pagination-size {\n\t\t\t@apply col-start-1;\n\t\t}\n\n\t\t> p-pagination-pages {\n\t\t\t@apply col-start-2;\n\t\t}\n\n\t\t> p-loader {\n\t\t\t@apply col-start-2;\n\t\t}\n\n\t\t> p-button {\n\t\t\t@apply col-start-3 justify-self-end;\n\t\t}\n\t}\n}\n\n:host(.page-size-disabled.export-disabled) {\n\t@apply grid-cols-1;\n\n\t> p-pagination {\n\t\t@apply col-start-1;\n\t}\n}\n","import {\n\tComponent,\n\tElement,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tListen,\n\tProp,\n\tState,\n} from '@stencil/core';\nimport {\n\tformatTranslation,\n\tgetLocaleComponentStrings,\n} from '../../../utils/localization';\nimport { defaultSize, defaultSizeOptions } from '../pagination-size/constants';\n\n@Component({\n\ttag: 'p-table-footer',\n\tstyleUrl: 'table-footer.component.scss',\n\tshadow: true,\n})\nexport class TableFooter {\n\t/**\n\t * Wether to enable page size select\n\t */\n\t@Prop() enablePageSize: boolean = true;\n\n\t/**\n\t * Wether to enable pagination\n\t */\n\t@Prop() enablePagination: boolean = true;\n\n\t/**\n\t * Wether to enable export\n\t */\n\t@Prop() enableExport: boolean = true;\n\n\t/**\n\t * Wether we want to show loading state\n\t */\n\t@Prop() loading: boolean = false;\n\n\t/**\n\t * The current page\n\t */\n\t@Prop({ mutable: true, reflect: true }) page: number = 1;\n\n\t/**\n\t * The total amount of items\n\t */\n\t@Prop() total!: number;\n\n\t/**\n\t * Event whenever the page changes\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tpageChange: EventEmitter<number>;\n\n\t/**\n\t * The amount of items per page\n\t */\n\t@Prop() pageSize: number = defaultSize;\n\n\t/**\n\t * The options for the page size\n\t */\n\t@Prop() pageSizeOptions: number[] = defaultSizeOptions;\n\n\t/**\n\t * Event whenever the page changes\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\tpageSizeChange: EventEmitter<number>;\n\n\t/**\n\t * Event whenever the page changes\n\t */\n\t@Event({\n\t\tbubbles: false,\n\t})\n\texport: EventEmitter<number>;\n\n\t/**\n\t * Wether to hide when there is only 1 page available\n\t */\n\t@Prop() hideOnSinglePage: boolean = true;\n\n\t/**\n\t * The host element\n\t */\n\t@Element() private _el: HTMLElement;\n\n\t/**\n\t * Locales used for this component\n\t */\n\t@State() private _locales: any = {};\n\n\tcomponentWillLoad() {\n\t\tthis._setLocales();\n\t}\n\n\trender() {\n\t\tconst hidePageSizeSelect =\n\t\t\tthis.hideOnSinglePage && this.total < this.pageSizeOptions?.[0];\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={`p-table-footer ${\n\t\t\t\t\t!this.enablePageSize && 'page-size-disabled'\n\t\t\t\t} ${!this.enablePagination && 'pagination-disabled'} ${\n\t\t\t\t\t!this.enableExport && 'export-disabled'\n\t\t\t\t}`}\n\t\t\t>\n\t\t\t\t{!this.loading && this.enablePagination && this.enablePageSize && (\n\t\t\t\t\t<p-pagination-size\n\t\t\t\t\t\tclass={!hidePageSizeSelect && 'hidden desktop-xs:flex'}\n\t\t\t\t\t\thidden={hidePageSizeSelect}\n\t\t\t\t\t\tsize={this.pageSize}\n\t\t\t\t\t\tsizeOptions={this.pageSizeOptions}\n\t\t\t\t\t\tonSizeChange={({ detail }) => this._changePageSize(detail)}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{this.loading && (\n\t\t\t\t\t<p-loader\n\t\t\t\t\t\tvariant='ghost'\n\t\t\t\t\t\tclass='h-8 w-full rounded'\n\t\t\t\t\t></p-loader>\n\t\t\t\t)}\n\n\t\t\t\t{!this.loading && this.enablePagination && (\n\t\t\t\t\t<p-pagination-pages\n\t\t\t\t\t\tpageSize={this.pageSize}\n\t\t\t\t\t\ttotal={this.total}\n\t\t\t\t\t\tpage={this.page}\n\t\t\t\t\t\thideOnSinglePage={this.hideOnSinglePage}\n\t\t\t\t\t\tonPageChange={({ detail }) => this.pageChange.emit(detail)}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{!this.loading && this.enableExport && (\n\t\t\t\t\t<p-button\n\t\t\t\t\t\tclass='hidden desktop-xs:flex'\n\t\t\t\t\t\tvariant='secondary'\n\t\t\t\t\t\tsize='sm'\n\t\t\t\t\t\ticon='download'\n\t\t\t\t\t\tonClick={() => this.export.emit()}\n\t\t\t\t\t>\n\t\t\t\t\t\t{formatTranslation(this._locales.export)}\n\t\t\t\t\t</p-button>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Listen('localeChanged', { target: 'body' })\n\tprivate async _setLocales(): Promise<void> {\n\t\tthis._locales = await getLocaleComponentStrings(this._el);\n\t}\n\n\tprivate _changePageSize(s?: number) {\n\t\tif (!s) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.pageSize = s;\n\t\tthis.pageSizeChange.emit(this.pageSize);\n\t}\n}\n"],"version":3}

package/dist/components/table-header.component.js

@@ -989,13 +989,13 @@ const TableHeader = /*@__PURE__*/ proxyCustomElement(class TableHeader extends H
         const mobileTotal = (this.selectedFiltersAmount || 0) + (activeQuickFilter?.default ? 0 : 1);
         const hasCustomFilterSlot = !!this._el.querySelector(':scope > [slot="custom-filter"]');
         const hasCustomActionsSlot = !!this._el.querySelector(':scope > [slot="custom-actions"]');
-        return (h(Host, { key: '9261f1ac3d1ffc7b3f696d7dc528eb39d21e39f3', class: 'p-table-header' }, this.loading && (h("p-loader", { key: '52cb48056ac2ce46ae3825e97a83735c90926e4e', variant: 'ghost', class: 'hidden h-8 w-3/4 rounded desktop-xs:flex' })), !this.loading &&
-            (hasCustomFilterSlot || this.quickFilters.length > 0) && (h("div", { key: '4c1a883ae11bb2a8a9a0a3d1339600d58174543b', class: 'left-side flex flex-col justify-start gap-4 desktop-xs:flex-row' }, hasCustomFilterSlot && h("slot", { key: '0ef29f9afb9cb27761f11146fa41933e64e7fed8', name: 'custom-filter' }), this.quickFilters.length > 0 && (h("p-segment-container", { key: '480435085fab332399b5386d33fed70b0d96d718', class: 'hidden desktop-xs:flex' }, this.quickFilters.map(item => (h("p-segment-item", { active: item.identifier === this.activeQuickFilterIdentifier, onClick: () => this.quickFilter.emit(item) }, typeof item.text === 'string' ? item.text : item.text(), ' ', item?.count >= 0 ? `(${item.count})` : ''))))))), h("div", { key: 'a5c1add14f7a2c3056195936325004ed8d1710fe', class: 'right-side flex flex-col justify-end gap-4 desktop-xs:flex-row' }, this.enableSearch && (h("p-field", { key: '0bd8f8e0037be9c1eef724d158542f2815990fd7', icon: 'search', size: 'sm', class: 'desktop-xs:w-48', placeholder: 'Zoeken...', value: this.query, onValueChange: ev => this._queryObserver.next(ev.detail) })), this.enableFilter && (h("p-button", { key: 'b101dd2da885d7abc10c2d2e76e9d4f6e549e984', icon: 'filter', variant: 'secondary', size: 'sm', class: `w-full ${this.enableFilterDesktop
+        return (h(Host, { key: '7ca9e5d35de2a348f49b1d21f97d9e0ab363b4fd', class: 'p-table-header' }, this.loading && (h("p-loader", { key: 'a839bd495927d4ee2fc06f07adb8aa32d9a18e93', variant: 'ghost', class: 'hidden h-8 w-3/4 rounded desktop-xs:flex' })), !this.loading &&
+            (hasCustomFilterSlot || this.quickFilters.length > 0) && (h("div", { key: 'a200ab308bc8a16aff2e611fc438fc6a31cdc92f', class: 'left-side flex flex-col justify-start gap-4 desktop-xs:flex-row' }, hasCustomFilterSlot && h("slot", { key: '712c11750cc41a874823a70ead4fedc95fac1df5', name: 'custom-filter' }), this.quickFilters.length > 0 && (h("p-segment-container", { key: 'acf8f0d1b01a91750ca501a94527b247509a15c0', class: 'hidden desktop-xs:flex' }, this.quickFilters.map(item => (h("p-segment-item", { active: item.identifier === this.activeQuickFilterIdentifier, onClick: () => this.quickFilter.emit(item) }, typeof item.text === 'string' ? item.text : item.text(), ' ', item?.count >= 0 ? `(${item.count})` : ''))))))), h("div", { key: '0b82b63c0f79f376b2134f6e31f475831d0e0715', class: 'right-side flex flex-col justify-end gap-4 desktop-xs:flex-row' }, this.enableSearch && (h("p-field", { key: 'e9e9f525d88b1ecc619adf3dfc8f5c4af0c9a541', icon: 'search', size: 'sm', class: 'desktop-xs:w-48', placeholder: 'Zoeken...', value: this.query, onValueChange: ev => this._queryObserver.next(ev.detail) })), this.enableFilter && (h("p-button", { key: '4444a6ef4b2229c11df9d85df652a25b71a0bb48', icon: 'filter', variant: 'secondary', size: 'sm', class: `w-full ${this.enableFilterDesktop
                 ? 'desktop-xs:w-auto'
                 : 'desktop-xs:hidden'}`, onClick: () => this.filter.emit() }, this.filterButtonTemplate
             ? this.filterButtonTemplate()
             : this._defaultFilterButtonTemplate(), this.selectedFiltersAmount &&
-            this._getLabel(this.selectedFiltersAmount), mobileTotal > 0 && this._getLabel(mobileTotal, 'mobile'))), this.enableAction && this._buttonTemplate(), hasCustomActionsSlot && h("slot", { key: '0d1293590817ed31001298900752cc1ee09b61f9', name: 'custom-actions' })), this.enableAction && this.canUseAction && (h("div", { key: '41dce94131e7458342885f2e5451efad7a0e85ef', class: 'fixed bottom-0 left-0 block w-full border border-solid border-transparent border-t-mystic-dark bg-white p-4 desktop-xs:hidden' }, this._buttonTemplate(true)))));
+            this._getLabel(this.selectedFiltersAmount), mobileTotal > 0 && this._getLabel(mobileTotal, 'mobile'))), this.enableAction && this._buttonTemplate(), hasCustomActionsSlot && h("slot", { key: '6606497a19a00cf0ddcdca6aedc61d893bac1f25', name: 'custom-actions' })), this.enableAction && this.canUseAction && (h("div", { key: '8f5ad8071074b89dc1e8700e6f72c48619fcb9c5', class: 'fixed bottom-0 left-0 block w-full border border-solid border-transparent border-t-mystic-dark bg-white p-4 desktop-xs:hidden' }, this._buttonTemplate(true)))));
     }
     async _setLocales() {
         this._locales = await getLocaleComponentStrings(this._el);

package/dist/components/table-row.component.js

@@ -13,9 +13,9 @@ const TableRow = /*@__PURE__*/ proxyCustomElement(class TableRow extends HTMLEle
         this.enableHover = true;
     }
     render() {
-        return (h(Host, { key: '962ec4f0187a22416270df391edb910c6584fc57', class: `p-table-row variant-${this.variant} ${this.enableHover &&
+        return (h(Host, { key: '30832de6f65ec6849708070a37a0a1e93a627d56', class: `p-table-row variant-${this.variant} ${this.enableHover &&
                 this.variant === 'default' &&
-                'enable-hover'} group` }, h("div", { key: '45deb1c2a22e4afdf99b3e4f407f8ceedc3769fc', class: "content" }, h("slot", { key: 'd9bae05aad34f48ef13598e432813ffacab3d3f6' })), this.variant === 'default' && h("p-divider", { key: 'efdc3dcb43ea3f74786495f62ceaf7b6a62908d6', class: "m-0" })));
+                'enable-hover'} group` }, h("div", { key: '55c7a8370ab3b78a0fa61155eb9ca34106d9a576', class: "content" }, h("slot", { key: '5b37ff815b031f54d518bea2ddc7bdcbe3448f83' })), this.variant === 'default' && h("p-divider", { key: '9460911560d0fde992a41dac8a271ed2637e0479', class: "m-0" })));
     }
     static get style() { return PTableRowStyle0; }
 }, [1, "p-table-row", {

package/dist/components/tooltip.component.js

@@ -89,19 +89,19 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
             ref: el => this._load(el),
         };
         let tooltip;
-        const tooltipElement = (h("div", { key: 'dffb30b5a876eea1666df8277d032a1f245d9998', class: popover({
+        const tooltipElement = (h("div", { key: '6f9c3f17c03fd05f38542ae9c7c0bcbd974a5bbb', class: popover({
                 variant: this.variant,
                 strategy: this.usePortal ? 'none' : this.strategy,
-            }), ...(this.usePortal ? {} : tooltipProps) }, h("div", { key: 'dadc96e74bd8b69a4dfef0f5a247a20690d8f31d', class: 'flex gap-2' }, this.variant === 'error' && (h("div", { key: '94a267c1c89cae726db52160a9b6c08b66689426', class: 'w-[2px] bg-negative-red' })), this.content ? this.content : h("slot", { name: 'content' }))));
+            }), ...(this.usePortal ? {} : tooltipProps) }, h("div", { key: '24a0b7be9128f683c5b97b025c127ccc099a350d', class: 'flex gap-2' }, this.variant === 'error' && (h("div", { key: 'bdef4cbe31d0642f4db9134e8b1dac420476f662', class: 'w-[2px] bg-negative-red' })), this.content ? this.content : h("slot", { name: 'content' }))));
         if (this.usePortal) {
-            tooltip = (h("p-portal", { key: 'ea7f1b8bc46937a4cb3caa32f8fa905ea4c246a5', class: portal({
+            tooltip = (h("p-portal", { key: '261fa01590875e3b7b89e1071340a28e1a9c0026', class: portal({
                     strategy: this.strategy,
                 }), ...tooltipProps }, tooltipElement));
         }
         else {
             tooltip = tooltipElement;
         }
-        return (h(Host, { key: 'db9de49ecbb2b080d3a44bf0931bc3b3df38bb17', class: 'p-popover flex cursor-pointer' }, h("div", { key: '1e774544a922ce477a0006a4c86e3e1f28c5c9a7', class: 'relative h-inherit w-inherit' }, h("slot", { key: '5ec39f84d2e3c6ac8131e1f147c72ec778a51241', name: 'trigger' }), tooltip)));
+        return (h(Host, { key: '5bc62f68bb9f49ce77f5e50f3713ad8a9b68e350', class: 'p-popover flex cursor-pointer' }, h("div", { key: '3792040756275f17dde8dad661af0cec0c40192b', class: 'relative h-inherit w-inherit' }, h("slot", { key: '7426bd33a80902bd576168c6dff9cfcfc70c128f', name: 'trigger' }), tooltip)));
     }
     clickHandler() {
         if (this.variant === 'hover' || !this.enableUserInput) {

package/dist/esm/{constants-3500ea14.js → constants-1dd98b15.js}

@@ -3,4 +3,4 @@ const defaultSizeOptions = [12, 24, 68, 136];
 
 export { defaultSizeOptions as a, defaultSize as d };
 
-//# sourceMappingURL=constants-3500ea14.js.map
+//# sourceMappingURL=constants-1dd98b15.js.map

package/dist/esm/constants-1dd98b15.js.map

@@ -0,0 +1 @@
+{"file":"constants-1dd98b15.js","mappings":"MAAa,WAAW,GAAG,GAAG;MACjB,kBAAkB,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG;;;;","names":[],"sources":["src/components/molecules/pagination-size/constants.tsx"],"sourcesContent":["export const defaultSize = 12;\nexport const defaultSizeOptions = [12, 24, 68, 136];\n"],"version":3}