@paperless/core 2.0.1-beta.33 → 2.0.1-beta.35

package/dist/collection/components/molecules/pagination/pagination.component.js

@@ -1,158 +1,59 @@
-import { h, Host, } from "@stencil/core";
+import { Fragment, h, Host, } from "@stencil/core";
+import { defaultSize, defaultSizeOptions } from "../pagination-size/constants";
+import { cva } from "class-variance-authority";
+const pagination = cva([
+    'p-pagination',
+    'items-center gap-2',
+    'rounded-full',
+    'bg-off-white-300 border border-off-white-700',
+    'p-1',
+], {
+    variants: {
+        hidden: {
+            false: 'flex',
+            true: 'hidden',
+        },
+    },
+});
 export class Pagination {
     constructor() {
+        this.hideOnSinglePage = true;
+        this.enablePaginationSize = true;
+        this.enablePaginationPages = true;
         this.page = 1;
-        this.pageSize = 12;
-        this.hideOnSinglePage = false;
         this.total = undefined;
+        this.pageSize = defaultSize;
+        this.pageSizeOptions = defaultSizeOptions;
+        this._hasPaginationPages = true;
     }
     /**
      * Event whenever the page changes
      */
     pageChange;
-    _pages = [];
-    _set = [];
-    componentWillRender() {
-        this._generate();
-    }
+    /**
+     * Event whenever the page changes
+     */
+    pageSizeChange;
     render() {
-        return (h(Host, { key: '3568c3e866dcd2ffee3fb8acd34a81d63e564068', class: `p-pagination ${this.hideOnSinglePage && this._set?.length === 3 && 'hidden'}` }, this._set?.map(p => {
-            if (p.type === 'previous' || p.type === 'next') {
-                return (h("p-pagination-item", { onClick: () => p.type === 'previous'
-                        ? this._previousClick()
-                        : this._nextClick() }, p.value));
-            }
-            if (p.type === 'ellipsis') {
-                return h("p-pagination-item", null, "...");
-            }
-            return (h("p-pagination-item", { active: p.value === this.page, onClick: () => this._pageClick(p.value) }, p.value));
-        })));
-    }
-    pageChangeHandler() {
-        this._generate();
-    }
-    _generate() {
-        this._pages = this._generatePages();
-        this._set = this._generateSet();
-        if (this.page > this._pages?.length) {
-            this._changePage(this._pages.length);
-        }
+        const hidePageSizeSelect = this.hideOnSinglePage && this.total < this.pageSizeOptions?.[0];
+        return (h(Host, { key: '90a23cd6c05cf683d848afc24ee03b95426e791e', class: pagination({
+                hidden: (hidePageSizeSelect && !this.enablePaginationSize) ||
+                    (!this.enablePaginationSize && !this.enablePaginationPages),
+            }) }, this.enablePaginationPages && this.enablePaginationSize && (h(Fragment, { key: 'c7f8ec9ddbf7a3e40ab466e5d356901df2ea6f3f' }, h("p-pagination-size", { key: 'f98822e9feab28e4a9bcec27229096f28e462158', hidden: hidePageSizeSelect, size: this.pageSize, sizeOptions: this.pageSizeOptions, onSizeChange: ({ detail }) => this._changePageSize(detail) }), !hidePageSizeSelect &&
+            this.hideOnSinglePage &&
+            this._hasPaginationPages && (h("p-divider", { key: '1f32c4da7c21822e2c4392c6f1e56e8048aa3f2f', variant: 'vertical', class: 'mx-0 h-4 text-human-beige-700' })))), this.enablePaginationPages && (h("p-pagination-pages", { key: '2bab7184cf3a49073cd26c68662532e00c5ffda2', pageSize: this.pageSize, total: this.total, page: this.page, hideOnSinglePage: this.hideOnSinglePage, onPageChange: ({ detail }) => this.pageChange.emit(detail), onPagesChange: ({ detail }) => (this._hasPaginationPages = detail > 1) }))));
     }
-    _changePage(p) {
-        if (!p) {
+    _changePageSize(s) {
+        if (!s) {
             return;
         }
-        this.page = p;
-        this.pageChange.emit(this.page);
+        this.pageSize = s;
+        this.pageSizeChange.emit(this.pageSize);
     }
-    _previousClick() {
-        const previousPage = this.page - 1;
-        if (previousPage < this._pages[0]) {
-            return;
-        }
-        this._changePage(previousPage);
-    }
-    _nextClick = () => {
-        const nextPage = this.page + 1;
-        if (nextPage > this._pages[this._pages.length - 1]) {
-            return;
-        }
-        this._changePage(nextPage);
-    };
-    _pageClick = (p) => this._changePage(p);
-    _generatePages() {
-        if (!this.total || !this.pageSize) {
-            return [];
-        }
-        const pages = Math.ceil(this.total / this.pageSize);
-        return new Array(pages).fill(undefined).map((_, i) => i + 1);
-    }
-    _generateSet = (range = 1, enableBoundaries = true) => {
-        const totalPages = this._pages.length;
-        if (!totalPages) {
-            return [];
-        }
-        let start = this.page - range;
-        let end = this.page + range;
-        if (end > totalPages) {
-            end = totalPages;
-            start = totalPages - range * 2;
-            start = start < 1 ? 1 : start;
-        }
-        if (start <= 1) {
-            start = 1;
-            end = Math.min(range * 2 + 1, totalPages);
-        }
-        const set = [];
-        const previous = {
-            type: 'previous',
-            value: (h("p-icon", { variant: 'caret', rotate: 90 })),
-        };
-        const next = {
-            type: 'next',
-            value: (h("p-icon", { variant: 'caret', rotate: -90 })),
-        };
-        // Disable page range, display all the pages
-        if (range === null) {
-            const p = this._pages.map(p => ({
-                type: 'page',
-                value: p,
-            }));
-            return enableBoundaries ? [previous, ...p, next] : p;
-        }
-        if (enableBoundaries) {
-            set.push(previous);
-        }
-        if (start <= 3) {
-            for (let i = 1; i < start; i++) {
-                set.push({
-                    type: 'page',
-                    value: this._pages[i - 1],
-                });
-            }
-        }
-        else {
-            set.push({
-                type: 'page',
-                value: 1,
-            });
-            set.push({
-                type: 'ellipsis',
-                value: 'ellipsis',
-            });
-        }
-        for (let i = start; i <= end; i++) {
-            set.push({
-                type: 'page',
-                value: this._pages[i - 1],
-            });
-        }
-        if (end >= totalPages - 2) {
-            for (let i = end + 1; i <= totalPages; i++) {
-                set.push({
-                    type: 'page',
-                    value: this._pages[i - 1],
-                });
-            }
-        }
-        else {
-            set.push({
-                type: 'ellipsis',
-            });
-            set.push({
-                type: 'page',
-                value: this._pages[this._pages.length - 1],
-            });
-        }
-        if (enableBoundaries) {
-            set.push(next);
-        }
-        return set;
-    };
     static get is() { return "p-pagination"; }
     static get originalStyleUrls() {
         return {
-            "$": ["pagination.component.scss"]
+            "$": ["pagination.component.css"]
         };
     }
     static get styleUrls() {
@@ -162,47 +63,47 @@ export class Pagination {
     }
     static get properties() {
         return {
-            "page": {
-                "type": "number",
-                "mutable": true,
+            "hideOnSinglePage": {
+                "type": "boolean",
+                "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The current page"
+                    "text": "Wether to hide when there is only 1 page available"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "page",
-                "reflect": true,
-                "defaultValue": "1"
+                "attribute": "hide-on-single-page",
+                "reflect": false,
+                "defaultValue": "true"
             },
-            "pageSize": {
-                "type": "number",
+            "enablePaginationSize": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The amount of items per page"
+                    "text": "Wether to enable pagination size select"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "page-size",
+                "attribute": "enable-pagination-size",
                 "reflect": false,
-                "defaultValue": "12"
+                "defaultValue": "true"
             },
-            "hideOnSinglePage": {
+            "enablePaginationPages": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -214,13 +115,33 @@ export class Pagination {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Wether to hide when there is only 1 page available"
+                    "text": "Wether to enable pagination pages"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "hide-on-single-page",
+                "attribute": "enable-pagination-pages",
                 "reflect": false,
-                "defaultValue": "false"
+                "defaultValue": "true"
+            },
+            "page": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The current page"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "page",
+                "reflect": true,
+                "defaultValue": "1"
             },
             "total": {
                 "type": "number",
@@ -240,9 +161,52 @@ export class Pagination {
                 "setter": false,
                 "attribute": "total",
                 "reflect": false
+            },
+            "pageSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The amount of items per page"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "page-size",
+                "reflect": false,
+                "defaultValue": "defaultSize"
+            },
+            "pageSizeOptions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "number[]",
+                    "resolved": "number[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The options for the page size"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "defaultSizeOptions"
             }
         };
     }
+    static get states() {
+        return {
+            "_hasPaginationPages": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "pageChange",
@@ -259,18 +223,21 @@ export class Pagination {
                     "resolved": "number",
                     "references": {}
                 }
-            }];
-    }
-    static get watchers() {
-        return [{
-                "propName": "page",
-                "methodName": "pageChangeHandler"
-            }, {
-                "propName": "pageSize",
-                "methodName": "pageChangeHandler"
             }, {
-                "propName": "total",
-                "methodName": "pageChangeHandler"
+                "method": "pageSizeChange",
+                "name": "pageSizeChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event whenever the page changes"
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
             }];
     }
 }

package/dist/collection/components/molecules/pagination/pagination.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.component.js","sourceRoot":"","sources":["../../../../src/components/molecules/pagination/pagination.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tEvent,\n\tEventEmitter,\n\th,\n\tHost,\n\tProp,\n\tWatch,\n} from '@stencil/core';\n\ntype PaginationSetItem = {\n\ttype: string;\n\tvalue?: number | Element | JSX.Element | string;\n};\n\n@Component({\n\ttag: 'p-pagination',\n\tstyleUrl: 'pagination.component.scss',\n})\nexport class Pagination {\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\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={`p-pagination ${\n\t\t\t\t\tthis.hideOnSinglePage && this._set?.length === 3 && 'hidden'\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-item\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-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 <p-pagination-item>...</p-pagination-item>;\n\t\t\t\t\t}\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<p-pagination-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-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\tconst previousPage = this.page - 1;\n\t\tif (previousPage < this._pages[0]) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._changePage(previousPage);\n\t}\n\n\tprivate _nextClick = () => {\n\t\tconst nextPage = this.page + 1;\n\t\tif (nextPage > this._pages[this._pages.length - 1]) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._changePage(nextPage);\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\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\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\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,"file":"pagination.component.js","sourceRoot":"","sources":["../../../../src/components/molecules/pagination/pagination.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EACT,KAAK,EAEL,QAAQ,EACR,CAAC,EACD,IAAI,EACJ,IAAI,EACJ,KAAK,GACL,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAE/C,MAAM,UAAU,GAAG,GAAG,CACrB;IACC,cAAc;IACd,oBAAoB;IACpB,cAAc;IACd,8CAA8C;IAC9C,KAAK;CACL,EACD;IACC,QAAQ,EAAE;QACT,MAAM,EAAE;YACP,KAAK,EAAE,MAAM;YACb,IAAI,EAAE,QAAQ;SACd;KACD;CACD,CACD,CAAC;AAMF,MAAM,OAAO,UAAU;;gCAIc,IAAI;oCAKA,IAAI;qCAKH,IAAI;oBAKU,CAAC;;wBAU7B,WAAW;+BAKF,kBAAkB;mCAkBf,IAAI;;IAhB3C;;OAEG;IAIH,UAAU,CAAuB;IAEjC;;OAEG;IAIH,cAAc,CAAuB;IAIrC,MAAM;QACL,MAAM,kBAAkB,GACvB,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,CAAC;QAEjE,OAAO,CACN,EAAC,IAAI,qDACJ,KAAK,EAAE,UAAU,CAAC;gBACjB,MAAM,EACL,CAAC,kBAAkB,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC;oBAClD,CAAC,CAAC,IAAI,CAAC,oBAAoB,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC;aAC5D,CAAC;YAED,IAAI,CAAC,qBAAqB,IAAI,IAAI,CAAC,oBAAoB,IAAI,CAC3D,EAAC,QAAQ;gBACR,0EACC,MAAM,EAAE,kBAAkB,EAC1B,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,WAAW,EAAE,IAAI,CAAC,eAAe,EACjC,YAAY,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,GACzD;gBAED,CAAC,kBAAkB;oBACnB,IAAI,CAAC,gBAAgB;oBACrB,IAAI,CAAC,mBAAmB,IAAI,CAC3B,kEACC,OAAO,EAAC,UAAU,EAClB,KAAK,EAAC,+BAA+B,GACpC,CACF,CACQ,CACX;YAEA,IAAI,CAAC,qBAAqB,IAAI,CAC9B,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,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,EAC1D,aAAa,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAC7B,CAAC,IAAI,CAAC,mBAAmB,GAAG,MAAM,GAAG,CAAC,CAAC,GAEvC,CACF,CACK,CACP,CAAC;IACH,CAAC;IAEO,eAAe,CAAC,CAAU;QACjC,IAAI,CAAC,CAAC,EAAE,CAAC;YACR,OAAO;QACR,CAAC;QAED,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;QAClB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACzC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import {\n\tComponent,\n\tEvent,\n\tEventEmitter,\n\tFragment,\n\th,\n\tHost,\n\tProp,\n\tState,\n} from '@stencil/core';\nimport { defaultSize, defaultSizeOptions } from '../pagination-size/constants';\nimport { cva } from 'class-variance-authority';\n\nconst pagination = cva(\n\t[\n\t\t'p-pagination',\n\t\t'items-center gap-2',\n\t\t'rounded-full',\n\t\t'bg-off-white-300 border border-off-white-700',\n\t\t'p-1',\n\t],\n\t{\n\t\tvariants: {\n\t\t\thidden: {\n\t\t\t\tfalse: 'flex',\n\t\t\t\ttrue: 'hidden',\n\t\t\t},\n\t\t},\n\t}\n);\n\n@Component({\n\ttag: 'p-pagination',\n\tstyleUrl: 'pagination.component.css',\n})\nexport class Pagination {\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 * Wether to enable pagination size select\n\t */\n\t@Prop() enablePaginationSize: boolean = true;\n\n\t/**\n\t * Wether to enable pagination pages\n\t */\n\t@Prop() enablePaginationPages: boolean = true;\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 * 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\tpageChange: EventEmitter<number>;\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@State() private _hasPaginationPages = true;\n\n\trender() {\n\t\tconst hidePageSizeSelect =\n\t\t\tthis.hideOnSinglePage && this.total < this.pageSizeOptions?.[0];\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={pagination({\n\t\t\t\t\thidden:\n\t\t\t\t\t\t(hidePageSizeSelect && !this.enablePaginationSize) ||\n\t\t\t\t\t\t(!this.enablePaginationSize && !this.enablePaginationPages),\n\t\t\t\t})}\n\t\t\t>\n\t\t\t\t{this.enablePaginationPages && this.enablePaginationSize && (\n\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t<p-pagination-size\n\t\t\t\t\t\t\thidden={hidePageSizeSelect}\n\t\t\t\t\t\t\tsize={this.pageSize}\n\t\t\t\t\t\t\tsizeOptions={this.pageSizeOptions}\n\t\t\t\t\t\t\tonSizeChange={({ detail }) => this._changePageSize(detail)}\n\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t{!hidePageSizeSelect &&\n\t\t\t\t\t\t\tthis.hideOnSinglePage &&\n\t\t\t\t\t\t\tthis._hasPaginationPages && (\n\t\t\t\t\t\t\t\t<p-divider\n\t\t\t\t\t\t\t\t\tvariant='vertical'\n\t\t\t\t\t\t\t\t\tclass='mx-0 h-4 text-human-beige-700'\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t</Fragment>\n\t\t\t\t)}\n\n\t\t\t\t{this.enablePaginationPages && (\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\tonPagesChange={({ detail }) =>\n\t\t\t\t\t\t\t(this._hasPaginationPages = detail > 1)\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\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"]}

package/dist/collection/components/molecules/pagination-pages/pagination-pages.component.css

@@ -0,0 +1 @@
+*{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}