@paperless/core 3.13.1 → 3.14.0

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

@@ -0,0 +1,402 @@
+import { h, } from "@stencil/core";
+import { cva } from "class-variance-authority";
+import { ThemedHost } from "../../../internal/themed-host.component";
+import { cn } from "../../../utils";
+const dropzone = cva(['flex w-full flex-col items-center gap-2', 'rounded-lg', 'border', 'p-8'], {
+    variants: {
+        uploaded: {
+            false: 'border-dashed',
+            true: 'border-off-white-700',
+        },
+        isOver: {
+            true: 'border-dashed border-indigo-500 bg-indigo-50',
+            false: 'border-white-800',
+        },
+    },
+    compoundVariants: [
+        {
+            uploaded: true,
+            isOver: false,
+            class: 'border-solid bg-positive-green-50',
+        },
+        {
+            uploaded: false,
+            isOver: false,
+            class: 'bg-white-600',
+        },
+    ],
+});
+export class Dropzone {
+    /**
+     * Icon to show on the dropzone
+     */
+    icon = 'file-export';
+    /**
+     * Wether to show the icon or not
+     */
+    showIcon = true;
+    /**
+     * The type of files to accept
+     */
+    acceptGroup = 'any';
+    /**
+     * The fileID to use to track the file
+     */
+    fileId;
+    /**
+     * Wether the attachment is loading
+     */
+    loading = false;
+    /**
+     * Allow multiple files
+     */
+    allowMultiple = true;
+    /**
+     * Wether the file is uploaded
+     */
+    uploaded = false;
+    /**
+     * Event when upload is pressed
+     */
+    upload;
+    /**
+     * The host element
+     */
+    _el;
+    _isOver = false;
+    _fileRef;
+    _filesToProcess = 0;
+    _results = [];
+    _documentBlocked = false;
+    _preventDefault = (ev) => ev.preventDefault();
+    componentWillRender() {
+        if (!this._isOver && this._documentBlocked) {
+            document.removeEventListener('drop', this._preventDefault);
+            document.removeEventListener('dragover', this._preventDefault);
+            this._documentBlocked = false;
+            return;
+        }
+        if (!this._isOver) {
+            return;
+        }
+        document.addEventListener('drop', this._preventDefault);
+        document.addEventListener('dragover', this._preventDefault);
+        this._documentBlocked = true;
+    }
+    render() {
+        const hasContent = this._el.innerHTML?.length > 0;
+        return (h(ThemedHost, { key: '850603b4fb37087fd8bd7db5f37d9fcb17687fd2' }, h("div", { key: '594badd15df513690f388b021993694ad710e5c6', class: cn(dropzone({
+                isOver: this._isOver,
+                uploaded: this.uploaded,
+            }), {}), onClick: () => this._uploadClick() }, !this.loading && this.showIcon && (h("p-icon", { key: '10d41c9cd21bcba962c186ed04f48c1abf9c2073', class: cn({
+                'text-storm-300': !this._isOver,
+                'text-indigo-900': this._isOver,
+            }), variant: this.icon })), this.loading && h("p-loader", { key: '1c2b811db6711ef9bc4ba54d380f4aff7870ea0b' }), hasContent && h("slot", { key: '2e1ab2124bef07b476a23bfefed446e4ac17c0d2' }), this.uploaded && !this._isOver && (h("div", { key: 'e277e12954fd53100ec6202002c1b495d42ddb8b', class: 'flex items-center gap-2 text-positive-green-800' }, h("p-icon", { key: '68dc24d68232b98aaed2d1a5b1bc38888c7efffb', variant: 'check-circle' }), h("span", { key: 'f8cc3ffc3201efb23cd90d30eb7921e5c597db62', class: 'font-medium' }, "Toegevoegd"))), (!this.uploaded || this._isOver) && (h("div", { key: 'be0dfd5990877b7e914580f3d6c193d48402ab2a', class: cn('flex flex-col text-center', {
+                'opacity-50': this._isOver,
+            }) }, h("span", { key: 'f406b49e7b8ec6b4fb01fff011523147714da170', class: 'font-medium' }, "Sleep je bestand hierheen"), h("span", { key: '7656b9d337a582f2e69cf555a4f5c8eaa70e6f51', class: 'font-normal' }, "of klik om te uploaden")))), h("input", { key: '09b2471f370d6140db3bd9359e7c4c7a9237b9dc', accept: this.acceptGroup == 'any' ? '' : 'image/*', class: 'hidden', multiple: this.allowMultiple === true ? true : undefined, ref: el => (this._fileRef = el), type: 'file', onChange: ev => this._onFileChange(ev) })));
+    }
+    onDrop(ev) {
+        const files = this._getFiles(ev);
+        if (!files?.length) {
+            return;
+        }
+        this._processFiles(files);
+    }
+    onDragOver(ev) {
+        if (!this._isFilesEvent(ev)) {
+            return;
+        }
+        this._isOver = true;
+    }
+    onDragLeave() {
+        this._isOver = false;
+    }
+    _isFilesEvent(ev) {
+        if (!ev.dataTransfer) {
+            return false;
+        }
+        const files = [...ev.dataTransfer.items].filter(item => item.kind === 'file');
+        if (files.length === 0) {
+            return false;
+        }
+        return true;
+    }
+    _getFiles(ev) {
+        if (!this._isFilesEvent(ev)) {
+            return;
+        }
+        const files = ev.dataTransfer?.files ?? [];
+        if (files.length === 0) {
+            return;
+        }
+        return [...files];
+    }
+    _uploadClick() {
+        if (!this._fileRef) {
+            return;
+        }
+        this._fileRef.click();
+    }
+    _onFileChange(ev) {
+        const target = ev.target;
+        if (!target.files) {
+            return;
+        }
+        const files = [...target.files];
+        if (!files?.length) {
+            return;
+        }
+        this._processFiles(files);
+    }
+    _processFiles(files) {
+        this._results = [];
+        if (!this.allowMultiple) {
+            files = [files[0]];
+        }
+        this._filesToProcess = files.length;
+        for (const file of files) {
+            this._processFile(file);
+        }
+    }
+    _processFile(file) {
+        this.loading = true;
+        const reader = new FileReader();
+        reader.addEventListener('load', (e) => this._onLoad(file, e?.currentTarget?.result));
+        reader.readAsDataURL(file);
+    }
+    _onLoad(file, result) {
+        this._results.push({
+            file,
+            result,
+        });
+        if (this._results?.length < this._filesToProcess) {
+            return;
+        }
+        const data = {
+            fileId: this.fileId,
+            results: this._results,
+        };
+        if (this._results.length === 1 || !this.allowMultiple) {
+            data.file = this._results[0].file;
+            data.result = this._results[0].result;
+        }
+        this.upload.emit(data);
+        if (this._fileRef) {
+            this._fileRef.value = '';
+        }
+        this.loading = false;
+    }
+    static get is() { return "p-dropzone"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropzone.component.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropzone.component.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconVariant",
+                    "resolved": "\"address-book\" | \"alarm\" | \"apple\" | \"arrow\" | \"attachment\" | \"bank\" | \"bell\" | \"bread\" | \"cake\" | \"calculator\" | \"calendar\" | \"calendar-free\" | \"calendar-multi\" | \"calendar-not-free\" | \"camera\" | \"car\" | \"caret\" | \"certified\" | \"chair\" | \"chat\" | \"check-circle\" | \"checkmark\" | \"checkmarkThick\" | \"city\" | \"clock\" | \"companies\" | \"company\" | \"component\" | \"copy\" | \"credit-card\" | \"cross-circle\" | \"cutlery\" | \"department\" | \"description\" | \"diamond\" | \"docter\" | \"document\" | \"double-arrow\" | \"double-caret\" | \"download\" | \"enter-key\" | \"envelope\" | \"error-circle\" | \"euro\" | \"exam\" | \"eye\" | \"eye-closed\" | \"female\" | \"file-export\" | \"file-import\" | \"filter\" | \"flag\" | \"flower\" | \"folder\" | \"globe\" | \"globe-2\" | \"google\" | \"hash\" | \"hat\" | \"headset\" | \"home\" | \"id\" | \"id-two\" | \"ideal\" | \"info-circle\" | \"integration\" | \"key\" | \"lamp\" | \"language\" | \"laptop\" | \"location\" | \"lock\" | \"mail\" | \"male\" | \"math\" | \"medal\" | \"menu\" | \"menu-arrow\" | \"minus\" | \"moon\" | \"more\" | \"negative\" | \"new-tab\" | \"other\" | \"pay\" | \"pdf\" | \"pencil\" | \"percent\" | \"phone\" | \"pie-chart\" | \"piggy-bank\" | \"placeholder\" | \"plus\" | \"power\" | \"question-circle\" | \"receipt\" | \"reset\" | \"running\" | \"scroll\" | \"search\" | \"send\" | \"settings\" | \"shuffle\" | \"sick\" | \"signature\" | \"sparkle\" | \"spinner\" | \"spinning\" | \"stack\" | \"star\" | \"stroller\" | \"tag\" | \"tasks\" | \"tools\" | \"tooth\" | \"train\" | \"trash\" | \"turn\" | \"unlocked\" | \"upload\" | \"user\" | \"users\" | \"warning\" | \"wave\" | \"xls\" | \"zipcode\"",
+                    "references": {
+                        "IconVariant": {
+                            "location": "import",
+                            "path": "../../../types",
+                            "id": "src/types/index.ts::IconVariant",
+                            "referenceLocation": "IconVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon to show on the dropzone"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "'file-export'"
+            },
+            "showIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether to show the icon or not"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-icon",
+                "defaultValue": "true"
+            },
+            "acceptGroup": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'any' | 'images'",
+                    "resolved": "\"any\" | \"images\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of files to accept"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accept-group",
+                "defaultValue": "'any'"
+            },
+            "fileId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The fileID to use to track the file"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "file-id"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether the attachment is loading"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "allowMultiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow multiple files"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "allow-multiple",
+                "defaultValue": "true"
+            },
+            "uploaded": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wether the file is uploaded"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "uploaded",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_isOver": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "upload",
+                "name": "upload",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event when upload is pressed"
+                },
+                "complexType": {
+                    "original": "DropzoneUploadEvent",
+                    "resolved": "DropzoneUploadEvent",
+                    "references": {
+                        "DropzoneUploadEvent": {
+                            "location": "local",
+                            "path": "/home/runner/work/Paperless/Paperless/packages/core/src/components/molecules/dropzone/dropzone.component.tsx",
+                            "id": "src/components/molecules/dropzone/dropzone.component.tsx::DropzoneUploadEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "_el"; }
+    static get listeners() {
+        return [{
+                "name": "drop",
+                "method": "onDrop",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "dragover",
+                "method": "onDragOver",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "dragleave",
+                "method": "onDragLeave",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }];
+    }
+}

package/dist/collection/components/molecules/dropzone/dropzone.stories.js

@@ -0,0 +1,44 @@
+import { action } from "@storybook/addon-actions";
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Molecules/Dropzone',
+    component: 'p-dropzone',
+    args: {
+        content: ''
+    },
+    argTypes: {
+        content: {
+            type: 'string',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ icon, 'show-icon': showIcon, 'accept-group': acceptGroup, 'file-id': fileId, uploaded, loading, content, 'allow-multiple': allowMultiple, }) => content.length > 0
+        ? html `
+				<p-dropzone
+					icon=${icon ?? nothing}
+					show-icon=${showIcon ?? nothing}
+					accept-group=${acceptGroup ?? nothing}
+					allow-multiple=${allowMultiple ?? nothing}
+					file-id=${fileId ?? nothing}
+					uploaded=${uploaded ?? nothing}
+					loading=${loading ?? nothing}
+					@upload=${action('upload')}
+				>
+					${content}
+				</p-dropzone>
+			`
+        : html `
+				<p-dropzone
+					icon=${icon ?? nothing}
+					show-icon=${showIcon ?? nothing}
+					accept-group=${acceptGroup ?? nothing}
+					allow-multiple=${allowMultiple ?? nothing}
+					file-id=${fileId ?? nothing}
+					uploaded=${uploaded ?? nothing}
+					loading=${loading ?? nothing}
+					@upload=${action('upload')}
+				/>
+			`,
+};

package/dist/collection/components/molecules/empty-state/empty-state.component.js

@@ -59,11 +59,11 @@ export class EmptyState {
         const hasHeaderSlot = !!this._el.querySelector(':scope > [slot="header"]');
         const hasContentSlot = !!this._el.querySelector(':scope > [slot="content"]');
         const hasActionSlot = !!this._el.querySelector(':scope > [slot="action"]');
-        return (h(ThemedHost, { key: 'c992e849c678678864c5f9cfec46f3c48c1eb20c' }, h("div", { key: '3cb20168072cb532d3cefb9b955d3e51f673276d', class: emptyState({
+        return (h(ThemedHost, { key: '46f56cd16b8fb196bf0386d0eb6e00f4033ace3d' }, h("div", { key: 'b3b10b96f1e3a657b9c76982ef9330dc1909d114', class: emptyState({
                 enableAction: asBoolean(this.enableAction, true),
             }), onClick: ev => this.enableAction && !this.actionLoading
                 ? this.action.emit(ev)
-                : undefined }, this.illustration && (h("p-illustration", { key: '79ea83f1d0060efe97457942a8de969f76fcc9b4', class: 'mb-8 text-5xl text-indigo-600', variant: this.illustration })), hasHeaderSlot ? (h("slot", { name: 'header' })) : (this.header?.length && (h("p", { class: '\n          my-0 text-center font-ambit text-sm font-bold text-storm-500\n          dark:text-white\n        ' }, this.header))), hasContentSlot ? (h("slot", { name: 'content' })) : (this.content?.length && (h("p", { class: '\n          my-0 text-center text-sm font-normal text-storm-300\n          dark:text-hurricane-200\n        ' }, this.content))), this.enableAction &&
+                : undefined }, this.illustration && (h("p-illustration", { key: '558279ba45c580a607d4227469bf60006e426da1', class: 'mb-8 text-5xl text-indigo-600', variant: this.illustration })), hasHeaderSlot ? (h("slot", { name: 'header' })) : (this.header?.length && (h("p", { class: '\n          my-0 text-center font-ambit text-sm font-bold text-storm-500\n          dark:text-white\n        ' }, this.header))), hasContentSlot ? (h("slot", { name: 'content' })) : (this.content?.length && (h("p", { class: '\n          my-0 text-center text-sm font-normal text-storm-300\n          dark:text-hurricane-200\n        ' }, this.content))), this.enableAction &&
             (hasActionSlot ? (h("slot", { name: 'action' })) : (h("p-button", { class: 'mt-4', icon: this.actionIcon, iconPosition: this.actionIconPosition, loading: this.actionLoading, variant: this.actionVariant }, this.actionText))))));
     }
     static get is() { return "p-empty-state"; }

package/dist/collection/components/molecules/field/container/field-container.component.js

@@ -105,27 +105,27 @@ export class FieldContainer {
     }
     render() {
         const { hasHeaderSlot, hasErrorSlot, helper, label, errorAndErrorIsNotBoolean, } = this._getSlotInfo();
-        let contentSlot = (h("slot", { key: 'e795f4695850003f41a5bfb815893affee00e8de', name: 'content', slot: 'trigger' }));
+        let contentSlot = (h("slot", { key: '2584c934001e26c03b752112c165dc89f31db007', name: 'content', slot: 'trigger' }));
         if (this.loading) {
-            contentSlot = (h("p-loader", { key: '1f65c3ca60cefbf0740c9d7235a18a3e69f1c788', class: loader({ variant: this.variant, size: this.loadingSize }), slot: 'trigger', variant: 'ghost' }));
+            contentSlot = (h("p-loader", { key: 'fe69f220c9021a637ca5bef74868f769222a635d', class: loader({ variant: this.variant, size: this.loadingSize }), slot: 'trigger', variant: 'ghost' }));
         }
-        return (h(ThemedHost, { key: '9b4ab7a1d59cead07a2065b0d6bc72be41d24287' }, h("label", { key: 'ac31d16bdd75b4b236479638efd367f4771627d1', class: cn('flex w-inherit flex-col gap-1', {
+        return (h(ThemedHost, { key: 'cbed8c2f71c7be4f1789b3d234aafca4f9f078d9' }, h("label", { key: '41c19529b5282769de686b834e1facfd69a323cf', class: cn('flex w-inherit flex-col gap-1', {
                 'cursor-auto': this.variant === 'read',
-            }), htmlFor: this.id }, h("div", { key: '512c7c3162d9a40483f5d43d7fbea5635c40b45d', class: cn(`
+            }), htmlFor: this.id }, h("div", { key: '44a2fbd0d1024cd153894dd5548d7b4e0f1f4aec', class: cn(`
          flex items-end justify-between gap-1
          empty:hidden
        `, {
                 'flex-row-reverse': this.align === 'end',
-            }) }, (!!label?.length || !!helper?.length) && (h("div", { key: '77b5887681e6537714b0352a02873a56ab22e304', class: 'flex min-w-0 gap-2', onClick: () => this.focus.emit() }, h("span", { key: '786e241b3537a05c4bf12f58333d5c10065879c3', class: '\n           min-w-0 overflow-hidden text-ellipsis text-xs font-medium\n           text-storm-300\n           dark:text-hurricane-200\n         ' }, label), helper && (h("p-helper", { key: 'd14700f7a78349ffb1de0a39bcb92ca9833e7f3b', class: 'flex flex-shrink-0', placement: 'top' }, helper)))), ((!asBoolean(this.required) && asBoolean(this.showOptional)) ||
-            hasHeaderSlot) && (h("div", { key: 'a3f63057ac68b62a68cf4d0b31b09039817ea87f', class: 'flex items-center gap-1' }, !asBoolean(this.required) &&
+            }) }, (!!label?.length || !!helper?.length) && (h("div", { key: '1e7519168574464c867c86f84ecdca2c4e15e460', class: 'flex min-w-0 gap-2', onClick: () => this.focus.emit() }, h("span", { key: 'ec3649c4a9436d9c54be7929781d1d9a5fc459df', class: '\n           min-w-0 overflow-hidden text-ellipsis text-xs font-medium\n           text-storm-300\n           dark:text-hurricane-200\n         ' }, label), helper && (h("p-helper", { key: '2cc430522904e8df5dcc7fbf40f71d26287b7f0a', class: 'flex flex-shrink-0', placement: 'top' }, helper)))), ((!asBoolean(this.required) && asBoolean(this.showOptional)) ||
+            hasHeaderSlot) && (h("div", { key: 'f6849a8c420eb3582a7d92d5e6b42bdd4e019a07', class: 'flex items-center gap-1' }, !asBoolean(this.required) &&
             asBoolean(this.showOptional) &&
-            this.variant === 'write' && (h("span", { key: '6e98ac54bcabfe7b4481b1745b7c25fbc0c1e717', class: '\n             text-xs font-medium text-storm-200\n             dark:text-hurricane-300\n           ' }, this.optionalTemplate())), hasHeaderSlot && h("slot", { key: 'e4b5a07a66a036c619d0a788c959a3d80af2f58c', name: 'header' })))), h("p-tooltip", { key: 'd482091d838534d3f3e3f177c9f5ccd605e8e519', class: cn({
+            this.variant === 'write' && (h("span", { key: '2329447c26577bc481fc46f11b1dcbfceff39f60', class: '\n             text-xs font-medium text-storm-200\n             dark:text-hurricane-300\n           ' }, this.optionalTemplate())), hasHeaderSlot && h("slot", { key: '09fffde1c42b4b160c455ba73f47d11e1d34dbc5', name: 'header' })))), h("p-tooltip", { key: '26a3e3aa6bb7e3d57ae990ca672e01df493d3f1d', class: cn({
                 'w-full': this.variant === 'write' || this.loading,
                 'ml-auto': this.align === 'end',
                 'font-normal': this.variant === 'read',
                 'text-storm-500 dark:text-white': this.variant === 'read',
             }), content: this.error, enableUserInput: false, placement: this.errorPlacement, show: errorAndErrorIsNotBoolean &&
-                asBoolean(this.forceShowTooltip, false), variant: 'error' }, hasErrorSlot && (h("slot", { key: '45fc720b8771ffca3ce381fcc98c162947aa1e71', name: 'error', slot: 'content' })), contentSlot))));
+                asBoolean(this.forceShowTooltip, false), variant: 'error' }, hasErrorSlot && (h("slot", { key: '5a0ce99a2d3c123566e6417eeec26fe86ce054c6', name: 'error', slot: 'content' })), contentSlot))));
     }
     async _setLocales() {
         this._locales = await getLocaleComponentStrings(this._el);

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

@@ -371,8 +371,8 @@ export class Field {
     }
     render() {
         const { id, prefix, suffix, hasHeaderSlot, hasLabelSlot, hasHelperSlot, hasErrorSlot, hasValueSlot, } = this._getSlotInfo();
-        return (h(ThemedHost, { key: '693e9a21acbdd989144794387bf0a6a9f37810fc' }, h("p-field-container", { key: '12a6fce14a365fdbb92647637c3d3226cd2037ff', align: this.align, error: this.error, forceShowTooltip: (!!this.error?.length && !this._focused && this.autoShowError) ||
-                (!!this.error?.length && this.forceShowTooltip), helper: this.helper, id: id, label: this.label, loading: this.loading, loadingSize: this.size, required: this.required, showOptional: this.showOptional, variant: this.variant }, hasLabelSlot && (h("slot", { key: 'a40ed4d8943adae016325f2c82a3c79364543b2e', name: 'label', slot: 'label' })), hasHeaderSlot && (h("slot", { key: '0203bf72c3afc6c0f24c0e15cbf2f7271ca6a5a0', name: 'header', slot: 'header' })), hasHelperSlot && (h("slot", { key: 'ca7d5bc949fb18d20eeebdcb86ed844f61f137c6', name: 'helper', slot: 'helper' })), hasErrorSlot && (h("slot", { key: 'f4fa21946e61b81a002f96cbc85e4e786562cb87', name: 'error', slot: 'error' })), h("div", { key: '2c12320e5273b0cded4bc0e9e47aa5b2e6ff3f88', class: field({
+        return (h(ThemedHost, { key: 'f985e2b3d25ebb7a9e30448fb6663d0b487f47a3' }, h("p-field-container", { key: '358983d8f8f6cb1b53e9e4c607c064fc4a27a9f0', align: this.align, error: this.error, forceShowTooltip: (!!this.error?.length && !this._focused && this.autoShowError) ||
+                (!!this.error?.length && this.forceShowTooltip), helper: this.helper, id: id, label: this.label, loading: this.loading, loadingSize: this.size, required: this.required, showOptional: this.showOptional, variant: this.variant }, hasLabelSlot && (h("slot", { key: '155d5efc1d951ea2e08076cb58c3ce96e12f0f13', name: 'label', slot: 'label' })), hasHeaderSlot && (h("slot", { key: '9012ea2ac18ebbdc337ef7fc3fc79a36b1c9c720', name: 'header', slot: 'header' })), hasHelperSlot && (h("slot", { key: 'f461db190f2ca1727117e062111e96c6f85728be', name: 'helper', slot: 'helper' })), hasErrorSlot && (h("slot", { key: '353b0153551e5e7adb23b19390a4111e0b96d0c4', name: 'error', slot: 'error' })), h("div", { key: '20152561ff55142e43b3b1cbfb151b254f145736', class: field({
                 error: !!this.error?.length,
                 disabled: asBoolean(this.disabled),
                 focused: asBoolean(this.focused) || this._focused,
@@ -383,7 +383,7 @@ export class Field {
                 ? `${this.value}`
                 : undefined }, (this.error?.length ||
             prefix ||
-            (this.icon && this.iconPosition === 'start')) && (h("div", { key: '68b8e1d339630c881583ea40fecb9cb414be1537', class: prefixAndSuffix({
+            (this.icon && this.iconPosition === 'start')) && (h("div", { key: 'bca5cf5eca02b9291eb710e6c3539e23bb349d96', class: prefixAndSuffix({
                 variant: this.variant,
                 error: !!this.error?.length,
                 disabled: asBoolean(this.disabled),
@@ -395,7 +395,7 @@ export class Field {
                 'mt-1': this.variant === 'read' && this.size === 'base',
             }), flip: this.iconFlip, rotate: this.iconRotate, variant: this.error?.length ? 'warning' : this.icon })) : (prefix))), this._getContent(hasValueSlot, id), (suffix ||
             (this.type === 'password' && this.enablePasswordEye) ||
-            (this.icon && this.iconPosition === 'end')) && (h("div", { key: '35d35041e9751d701dc74357abe1961d98f12f7e', class: cn(prefixAndSuffix({
+            (this.icon && this.iconPosition === 'end')) && (h("div", { key: '0ab5f5a94ff34eeeb76eb94cad88a4895a656bfd', class: cn(prefixAndSuffix({
                 variant: this.variant,
                 error: !!this.error?.length,
                 disabled: asBoolean(this.disabled),

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

@@ -75,17 +75,17 @@ export class Label {
      */
     keepMobileContent = false;
     render() {
-        return (h(ThemedHost, { key: '104ee5d95a9a998e9ff5d50a0319db1131dd49a9' }, h("div", { key: 'd0d2d11eab222b5183d5a835b3bd2fb195295552', class: label({
+        return (h(ThemedHost, { key: '2dcb1d9bafb86433ad4bc24a7f1947ca52656056' }, h("div", { key: 'ce580094967f042bef6aef229b393709f0993c34', class: label({
                 variant: this.variant,
                 iconOnly: this.iconOnly,
                 keepMobileContent: this.keepMobileContent,
-            }) }, this.icon && (h("p-icon", { key: '920c633b134bfca8b0643e8a8174bf66aa7066de', class: 'flex-shrink-0', flip: this.iconFlip, rotate: this.iconRotate, variant: this.icon })), !this.iconOnly && (h("div", { key: 'a178ec5c8f8543cd6b2f746cff170e43be54ff04', class: cn(`
+            }) }, this.icon && (h("p-icon", { key: '450bf31eec5f09c5b326f7819841f9b6dc155993', class: 'flex-shrink-0', flip: this.iconFlip, rotate: this.iconRotate, variant: this.icon })), !this.iconOnly && (h("div", { key: '825b6996bba84ffeb67dd8f4cfb114b0034599bf', class: cn(`
           flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-sm
           font-medium
         `, {
                 hidden: !this.keepMobileContent,
                 'desktop-xs:block': !this.keepMobileContent,
-            }) }, h("slot", { key: 'd8ef0efd720dbb24690ef5b354277eb84ede8921' }))))));
+            }) }, h("slot", { key: '6d71814586719b1b7898d5f46033a8d46ed63974' }))))));
     }
     static get is() { return "p-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/molecules/navigation/item/navigation-item.component.js

@@ -88,13 +88,13 @@ export class NavigationItem {
     render() {
         const TagType = this.as;
         const active = asBoolean(this.active) || this.class?.includes('active');
-        return (h(ThemedHost, { key: 'df75595509e2f081dbc13a244a77c07293d67bc1', class: cn('inline-block', this.class) }, h(TagType, { key: 'f6ad06191bdb4049387e1235a3a303718d8f6cc7', class: navigationItem({
+        return (h(ThemedHost, { key: 'af5ecc5d5485b1bbfb172794409d05e51c267a1b', class: cn('inline-block', this.class) }, h(TagType, { key: 'c88091c7b839ba181d22bff95978263443986d01', class: navigationItem({
                 icon: !!this.icon,
                 active,
-            }), href: this.href, target: this.target }, h("div", { key: '147abbbc9e2c6508a66081ead4cea2aa797a9240', class: navigationItemIconContainer({ active }) }, h("p-icon", { key: '2f1fd8c183e2f527fcb37aed28da145d81ed1c89', variant: this.icon })), h("span", { key: 'ae75ec4ac9c43bbb0cd620dcdf42dbc62631825e', class: cn({
+            }), href: this.href, target: this.target }, h("div", { key: '75572668b903ffacd852c765415b20deba35d4fa', class: navigationItemIconContainer({ active }) }, h("p-icon", { key: 'f5499b9eb148820f73109400aa4b9d6dd29e134d', variant: this.icon })), h("span", { key: '1ee78ad5c09e916baced632233ffcc5dd8ef8347', class: cn({
                 'has-counter': !!this.counter,
                 'w-full': this.applyFullWidth,
-            }) }, h("slot", { key: '0e92ba5694d3632367d37514bc72d9c7cbfa2a33' })), !!this.counter && this.counter !== '0' && (h("p-badge", { key: '4046f6ab8a1a4c3c985c2f0a5d8cccafc562f3df' }, this.counter)), !!this.loading && h("p-loader", { key: '5ab0e3decd808a160bdc233835d91b505f3ad8b8', class: 'ml-auto' }))));
+            }) }, h("slot", { key: '6c39a2140f511209e6e48fcc6a8eec2c02f36610' })), !!this.counter && this.counter !== '0' && (h("p-badge", { key: '46c7a53003e7e80737a82f00e82bf95bf294234a' }, this.counter)), !!this.loading && h("p-loader", { key: 'a9b88ff904559ce15a7f29020a714760e3183cd9', class: 'ml-auto' }))));
     }
     static get is() { return "p-navigation-item"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/molecules/navigation/section/navigation-section.component.js

@@ -6,7 +6,7 @@ export class NavigationSection {
      */
     header;
     render() {
-        return (h(ThemedHost, { key: 'd8d654a28420f399fba691f0a7acd8499e5ba7b2', class: 'flex flex-col gap-2' }, this.header?.length > 0 && (h("p-navigation-title", { key: '5e86faa0ea3bf13688086a881a6ab4a711fa0bd9' }, this.header)), h("div", { key: 'b78ef9a9c4e2493fcf80e1bb5a53fae31a449109', class: 'flex flex-col' }, h("slot", { key: '083951f8e74e0b70ef2102e523f9ed7e6f18e097' }))));
+        return (h(ThemedHost, { key: 'adc4546240455e2a90f355a85d26a29ec7e3b6f2', class: 'flex flex-col gap-2' }, this.header?.length > 0 && (h("p-navigation-title", { key: '8510c67a883e4973b9261ee63f7ef148cdbaedd4' }, this.header)), h("div", { key: '23b9cfcc54e590d5378ebd61fba0851e95ecc697', class: 'flex flex-col' }, h("slot", { key: '01521755f498890b3abf3adcdd30cf71e9ed8629' }))));
     }
     static get is() { return "p-navigation-section"; }
     static get originalStyleUrls() {

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

@@ -61,7 +61,7 @@ export class PaginationPages {
         this._generate();
     }
     render() {
-        return (h(ThemedHost, { key: '5320ff0fd0f44f422fda718e796b46d02c38d5aa' }, h("div", { key: 'e459750f29cc6e773478ff5aec76c8f19865069b', class: pagination({
+        return (h(ThemedHost, { key: '3c3bdfce0f2956d896456498d5e1d82f727068c8' }, h("div", { key: 'b489b3ea0d740554fbe17d5cba60824bf7bcfc15', class: pagination({
                 hidden: this.hideOnSinglePage && this._set?.length === 3,
             }) }, this._set?.map(p => {
             if (p.type === 'previous' || p.type === 'next') {

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

@@ -60,12 +60,12 @@ export class Pagination {
     _hasPaginationPages = true;
     render() {
         const hidePageSizeSelect = this.hideOnSinglePage && this.total <= this.pageSizeOptions?.[0];
-        return (h(ThemedHost, { key: '3f1b6ea1ac6b1ddae922000ee90b9796287de51b' }, h("div", { key: '28561b81a9717cfc6ed3301215f47962349fccd2', class: pagination({
+        return (h(ThemedHost, { key: '611fb4062cf7c6cd78adf2744d7694615fa8d502' }, h("div", { key: '80ebed4ee0978c78ecee629d08f7ca026e395349', class: pagination({
                 hidden: (hidePageSizeSelect && !this._hasPaginationPages) ||
                     (!this.enablePaginationSize && !this.enablePaginationPages),
-            }) }, this.enablePaginationPages && this.enablePaginationSize && (h(Fragment, { key: 'b4523497dc4e2c988df6a3ae71cb240b54e17d75' }, h("p-pagination-size", { key: '01b5b234b713ecfcd2cf8910079f00614eb0fbbe', hidden: hidePageSizeSelect, size: this.pageSize, sizeOptions: this.pageSizeOptions, onSizeChange: ({ detail }) => this._changePageSize(detail) }), !hidePageSizeSelect &&
+            }) }, this.enablePaginationPages && this.enablePaginationSize && (h(Fragment, { key: '81ffbba6758be70cb681d1b778365c1f83122048' }, h("p-pagination-size", { key: 'ede0a33d15261777f8d99ce866dedb3af3d63c86', hidden: hidePageSizeSelect, size: this.pageSize, sizeOptions: this.pageSizeOptions, onSizeChange: ({ detail }) => this._changePageSize(detail) }), !hidePageSizeSelect &&
             this.hideOnSinglePage &&
-            this._hasPaginationPages && (h("p-divider", { key: '7a8cfa9e69ae898cf2f2c25b4fffde7506fcc523', class: '\n            mx-0 h-4 text-off-white-700\n            dark:text-hurricane-400\n          ', variant: 'vertical' })))), this.enablePaginationPages && (h("p-pagination-pages", { key: 'd8d7a7bce55b5958be33b51f175bd34b7f3c6ede', hideOnSinglePage: this.hideOnSinglePage, page: this.page, pageSize: this.pageSize, total: this.total, onPageChange: ({ detail }) => this.pageChange.emit(detail), onPagesChange: ({ detail }) => {
+            this._hasPaginationPages && (h("p-divider", { key: '8d9956dd7d2277ea8849003e31ce2000eb88db7d', class: '\n            mx-0 h-4 text-off-white-700\n            dark:text-hurricane-400\n          ', variant: 'vertical' })))), this.enablePaginationPages && (h("p-pagination-pages", { key: 'c39df7ebd431fbcfa82eb847ff1c9a52acfc7b41', hideOnSinglePage: this.hideOnSinglePage, page: this.page, pageSize: this.pageSize, total: this.total, onPageChange: ({ detail }) => this.pageChange.emit(detail), onPagesChange: ({ detail }) => {
                 this._hasPaginationPages = detail > 1;
                 this.pagesChange.emit(detail);
             } })))));