@paperless/core 2.22.0-alpha.32 → 2.22.0-alpha.34

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

@@ -127,12 +127,12 @@ export class Dropdown {
         this._checkItems();
     }
     render() {
-        return (h(Host, { key: 'a4b635c184cc8a58c74f1ba5dbb5f455df1a7b86', class: 'relative' }, h("div", { key: 'd0d1a3f05d117bb2b3a28022e8737fae2f25fcb3', class: 'trigger', onClick: () => this._triggerClickHandler() }, h("slot", { key: '5697825e61fb1c07139663c6c5ac400c48da998a', name: 'trigger' })), h("div", { key: '815b60a51d6b074e878eab047cac77cce5a3e337', class: 'relative w-full' }, h("p-dropdown-menu-container", { key: '60bf00e8beb6e42e7629b57283d317bfe0a2b40a', variant: this.variant, maxWidth: this.applyMaxWidth, fullWidth: this.applyFullWidth && !this.applyMaxWidth, allowOverflow: this.allowOverflow, scrollable: this.scrollable, class: cn(dropdownContainerClass({
+        return (h(Host, { key: 'a4b635c184cc8a58c74f1ba5dbb5f455df1a7b86', class: 'relative' }, h("div", { key: 'd0d1a3f05d117bb2b3a28022e8737fae2f25fcb3', class: 'trigger', onClick: () => this._triggerClickHandler() }, h("slot", { key: '5697825e61fb1c07139663c6c5ac400c48da998a', name: 'trigger' })), h("div", { key: '815b60a51d6b074e878eab047cac77cce5a3e337', class: 'relative w-full' }, h("p-dropdown-menu-container", { key: '60bf00e8beb6e42e7629b57283d317bfe0a2b40a', allowOverflow: this.allowOverflow, class: cn(dropdownContainerClass({
                 strategy: this.strategy,
                 maxWidth: this.applyMaxWidth,
                 fullWidth: this.applyFullWidth && !this.applyMaxWidth,
                 isDatepicker: this.isDatepicker,
-            }), this.containerClass), ref: el => this._load(el), onClick: () => this._containerClickHandler(), role: 'popover', "data-placement": this.placement, "data-strategy": this.strategy }, h("slot", { key: '34a4da54cb7e3949a494b028b6188b9655b294c2', name: 'items' })))));
+            }), this.containerClass), "data-placement": this.placement, "data-strategy": this.strategy, fullWidth: this.applyFullWidth && !this.applyMaxWidth, maxWidth: this.applyMaxWidth, ref: el => this._load(el), role: 'popover', scrollable: this.scrollable, variant: this.variant, onClick: () => this._containerClickHandler() }, h("slot", { key: '34a4da54cb7e3949a494b028b6188b9655b294c2', name: 'items' })))));
     }
     _checkButtons(active = false) {
         if (!this.applyChevron) {

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

@@ -105,13 +105,13 @@ export class FieldContainer {
     }
     render() {
         const { hasHeaderSlot, hasErrorSlot, helper, label, errorAndErrorIsNotBoolean, } = this._getSlotInfo();
-        let contentSlot = (h("slot", { key: 'e795f4695850003f41a5bfb815893affee00e8de', slot: 'trigger', name: 'content' }));
+        let contentSlot = (h("slot", { key: 'e795f4695850003f41a5bfb815893affee00e8de', name: 'content', slot: 'trigger' }));
         if (this.loading) {
-            contentSlot = (h("p-loader", { key: '1f65c3ca60cefbf0740c9d7235a18a3e69f1c788', variant: 'ghost', class: loader({ variant: this.variant, size: this.loadingSize }), slot: 'trigger' }));
+            contentSlot = (h("p-loader", { key: '1f65c3ca60cefbf0740c9d7235a18a3e69f1c788', class: loader({ variant: this.variant, size: this.loadingSize }), slot: 'trigger', variant: 'ghost' }));
         }
-        return (h(ThemedHost, { key: '9b4ab7a1d59cead07a2065b0d6bc72be41d24287' }, h("label", { key: 'ac31d16bdd75b4b236479638efd367f4771627d1', htmlFor: this.id, class: cn('flex w-inherit flex-col gap-1', {
+        return (h(ThemedHost, { key: '9b4ab7a1d59cead07a2065b0d6bc72be41d24287' }, h("label", { key: 'ac31d16bdd75b4b236479638efd367f4771627d1', class: cn('flex w-inherit flex-col gap-1', {
                 'cursor-auto': this.variant === 'read',
-            }) }, h("div", { key: '06a0c419582c71df7323bc3b0deb2d8a98541ca7', class: cn('flex items-end justify-between gap-1 empty:hidden', {
+            }), htmlFor: this.id }, h("div", { key: '06a0c419582c71df7323bc3b0deb2d8a98541ca7', class: cn('flex items-end justify-between gap-1 empty:hidden', {
                 'flex-row-reverse': this.align === 'end',
             }) }, (!!label?.length || !!helper?.length) && (h("div", { key: '97d2b33bb04145650b000dde1859015361855fa3', class: 'flex min-w-0 gap-2', onClick: () => this.focus.emit() }, h("span", { key: '4a2fc2b62dba4fc7d4a5f816944996333cff2ca3', class: 'min-w-0 overflow-hidden text-ellipsis text-xs font-medium text-storm-300 dark:text-hurricane-200' }, label), helper && (h("p-helper", { key: '1638bb0c6c3683bd2bd0836b9f4fd0ca07561baf', class: 'flex flex-shrink-0', placement: 'top' }, helper)))), ((!asBoolean(this.required) && asBoolean(this.showOptional)) ||
             hasHeaderSlot) && (h("div", { key: '4f9f56fc0951dab62bd75c4cc7ea724e17ec05aa', class: 'flex items-center gap-1' }, !asBoolean(this.required) &&
@@ -121,8 +121,8 @@ export class FieldContainer {
                 'ml-auto': this.align === 'end',
                 'font-normal': this.variant === 'read',
                 'text-storm-500 dark:text-white': this.variant === 'read',
-            }), variant: 'error', content: this.error, show: errorAndErrorIsNotBoolean &&
-                asBoolean(this.forceShowTooltip, false), enableUserInput: false, placement: this.errorPlacement }, hasErrorSlot && (h("slot", { key: '3670780d5e0907d655e282fbea6c43dcceea7e00', name: 'error', slot: 'content' })), contentSlot))));
+            }), content: this.error, enableUserInput: false, placement: this.errorPlacement, show: errorAndErrorIsNotBoolean &&
+                asBoolean(this.forceShowTooltip, false), variant: 'error' }, hasErrorSlot && (h("slot", { key: '3670780d5e0907d655e282fbea6c43dcceea7e00', name: 'error', slot: 'content' })), contentSlot))));
     }
     async _setLocales() {
         this._locales = await getLocaleComponentStrings(this._el);

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

@@ -329,17 +329,17 @@ export class Field {
     }
     render() {
         const { id, prefix, suffix, hasHeaderSlot, hasLabelSlot, hasHelperSlot, hasErrorSlot, hasValueSlot, } = this._getSlotInfo();
-        return (h(ThemedHost, { key: '09b8254690a1603271faac4d9653c90a582a4766' }, h("p-field-container", { key: '776ed3812a980004c1cdc1b6c5b79df5908b383e', forceShowTooltip: (!!this.error?.length && !this._focused && this.autoShowError) ||
-                (!!this.error?.length && this.forceShowTooltip), id: id, label: this.label, align: this.align, loading: this.loading, loadingSize: this.size, helper: this.helper, error: this.error, required: this.required, showOptional: this.showOptional, variant: this.variant }, hasLabelSlot && (h("slot", { key: '597e07f1227421eb34575f2c35a5f752f60a66a3', name: 'label', slot: 'label' })), hasHeaderSlot && (h("slot", { key: '0ec1fd3a079f51c605b593e90d8514119ae0ffa3', name: 'header', slot: 'header' })), hasHelperSlot && (h("slot", { key: 'c71b52f8f6f8fc374e9d7e0c2ed4f838c9f9cb86', name: 'helper', slot: 'helper' })), hasErrorSlot && (h("slot", { key: 'd62e1c5f5592540dacbb2e18cf5cc560efbbc5a4', name: 'error', slot: 'error' })), h("div", { key: '7d30604708a80bd509b5d739e46d82b5fa23b464', class: field({
+        return (h(ThemedHost, { key: '09b8254690a1603271faac4d9653c90a582a4766' }, h("p-field-container", { key: '776ed3812a980004c1cdc1b6c5b79df5908b383e', 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: '597e07f1227421eb34575f2c35a5f752f60a66a3', name: 'label', slot: 'label' })), hasHeaderSlot && (h("slot", { key: '0ec1fd3a079f51c605b593e90d8514119ae0ffa3', name: 'header', slot: 'header' })), hasHelperSlot && (h("slot", { key: 'c71b52f8f6f8fc374e9d7e0c2ed4f838c9f9cb86', name: 'helper', slot: 'helper' })), hasErrorSlot && (h("slot", { key: 'd62e1c5f5592540dacbb2e18cf5cc560efbbc5a4', name: 'error', slot: 'error' })), h("div", { key: '7d30604708a80bd509b5d739e46d82b5fa23b464', class: field({
                 error: !!this.error?.length,
                 disabled: asBoolean(this.disabled),
                 focused: asBoolean(this.focused) || this._focused,
                 size: this.size,
                 variant: this.variant,
                 isTextarea: this.type === 'textarea',
-            }), title: this.variant === 'read' && !hasValueSlot
+            }), slot: 'content', title: this.variant === 'read' && !hasValueSlot
                 ? `${this.value}`
-                : undefined, slot: 'content' }, (this.error?.length ||
+                : undefined }, (this.error?.length ||
             prefix ||
             (this.icon && this.iconPosition === 'start')) && (h("div", { key: 'b4b203ba8f20620b2d7f368d2c6367bdadea9878', class: prefixAndSuffix({
                 variant: this.variant,
@@ -351,7 +351,7 @@ export class Field {
             }), onClick: () => this._focusInput() }, (this.icon && this.iconPosition === 'start') ||
             this.error?.length ? (h("p-icon", { class: cn('flex', {
                 'mt-1': this.variant === 'read' && this.size === 'base',
-            }), variant: this.error?.length ? 'warning' : this.icon, rotate: this.iconRotate, flip: this.iconFlip })) : (prefix))), this._getContent(hasValueSlot, id), (suffix || (this.icon && this.iconPosition === 'end')) && (h("div", { key: '5fe27dcdc61d7ba5646ecd6e062ad51f808dc4dd', class: prefixAndSuffix({
+            }), flip: this.iconFlip, rotate: this.iconRotate, variant: this.error?.length ? 'warning' : this.icon })) : (prefix))), this._getContent(hasValueSlot, id), (suffix || (this.icon && this.iconPosition === 'end')) && (h("div", { key: '5fe27dcdc61d7ba5646ecd6e062ad51f808dc4dd', class: prefixAndSuffix({
                 variant: this.variant,
                 error: !!this.error?.length,
                 disabled: asBoolean(this.disabled),
@@ -360,7 +360,7 @@ export class Field {
                 isTextarea: this.type === 'textarea',
             }), onClick: () => this._focusInput() }, this.icon && this.iconPosition === 'end' ? (h("p-icon", { class: cn('flex', {
                 'mt-1': this.variant === 'read' && this.size === 'base',
-            }), variant: this.icon, rotate: this.iconRotate, flip: this.iconFlip })) : (suffix)))))));
+            }), flip: this.iconFlip, rotate: this.iconRotate, variant: this.icon })) : (suffix)))))));
     }
     watchvalue(value) {
         if (!this._inputRef) {
@@ -435,7 +435,7 @@ export class Field {
     }
     _getContent(hasValueSlot = false, id) {
         if (this.variant === 'read') {
-            return hasValueSlot ? (h("slot", { name: 'value' })) : !!this.value && `${this.value}`.length > 0 ? (this.value) : this.showAddOnEmpty ? (h("p-button", { variant: 'text', icon: 'plus', size: 'sm', onClick: () => this.add.emit() }, this.addText)) : ('—');
+            return hasValueSlot ? (h("slot", { name: 'value' })) : !!this.value && `${this.value}`.length > 0 ? (this.value) : this.showAddOnEmpty ? (h("p-button", { icon: 'plus', size: 'sm', variant: 'text', onClick: () => this.add.emit() }, this.addText)) : ('—');
         }
         if (this.type === 'slot') {
             return h("slot", { name: 'input' });
@@ -459,7 +459,7 @@ export class Field {
         if (this.type === 'textarea') {
             return (h("textarea", { ref: ref => this._setInputRef(ref), ...props, ...properties }));
         }
-        return (h("input", { type: this.type, ref: ref => this._setInputRef(ref), ...props, ...properties }));
+        return (h("input", { ref: ref => this._setInputRef(ref), type: this.type, ...props, ...properties }));
     }
     _setInputRef(ref) {
         this._inputRef = ref;

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

@@ -73,7 +73,7 @@ export class Label {
                 variant: this.variant,
                 iconOnly: this.iconOnly,
                 keepMobileContent: this.keepMobileContent,
-            }) }, this.icon && (h("p-icon", { key: '24ec81f74dfeea24990a76edac38ccdc79490e88', class: 'flex-shrink-0', variant: this.icon, flip: this.iconFlip, rotate: this.iconRotate })), !this.iconOnly && (h("div", { key: 'd0b89fc24b7304a8e61e5157bcf4bdae3bdb26ca', class: cn('flex-1 overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium', {
+            }) }, this.icon && (h("p-icon", { key: '24ec81f74dfeea24990a76edac38ccdc79490e88', class: 'flex-shrink-0', flip: this.iconFlip, rotate: this.iconRotate, variant: this.icon })), !this.iconOnly && (h("div", { key: 'd0b89fc24b7304a8e61e5157bcf4bdae3bdb26ca', 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: 'ad87aa170cc6f7980678a1cfc25f5dbdf510127e' }))))));

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

@@ -65,19 +65,19 @@ export class PaginationPages {
                 hidden: this.hideOnSinglePage && this._set?.length === 3,
             }) }, this._set?.map(p => {
             if (p.type === 'previous' || p.type === 'next') {
-                return (h("p-pagination-pages-item", { variant: 'carousel', disabled: this._carouselDisabled(p.type), onClick: () => p.type === 'previous'
+                return (h("p-pagination-pages-item", { disabled: this._carouselDisabled(p.type), variant: 'carousel', onClick: () => p.type === 'previous'
                         ? this._previousClick()
                         : this._nextClick() }, p.value));
             }
             if (p.type === 'ellipsis') {
-                return (h("p-dropdown", { placement: 'top', applyChevron: false, insideClick: true, show: this._showDropdown[p.dropdownIndex], onIsOpen: ({ detail }) => this._onShowDropdown(detail, p.dropdownIndex), ref: el => (this._dropdowns[p.dropdownIndex] = el) }, h("p-pagination-pages-item", { slot: 'trigger' }, "..."), p.options?.slice(0, 5).map(v => (h("p-dropdown-menu-item", { variant: 'pagination', autoHeight: true, onClick: () => this._pageClick(v), slot: 'items' }, this.dropdownPageTemplate
+                return (h("p-dropdown", { applyChevron: false, insideClick: true, placement: 'top', ref: el => (this._dropdowns[p.dropdownIndex] = el), show: this._showDropdown[p.dropdownIndex], onIsOpen: ({ detail }) => this._onShowDropdown(detail, p.dropdownIndex) }, h("p-pagination-pages-item", { slot: 'trigger' }, "..."), p.options?.slice(0, 5).map(v => (h("p-dropdown-menu-item", { autoHeight: true, slot: 'items', variant: 'pagination', onClick: () => this._pageClick(v) }, this.dropdownPageTemplate
                     ? this.dropdownPageTemplate(v)
                     : this._defaultDropdownPageTemplate(v)))), p.options?.length > 5 &&
-                    this._showDropdown[p.dropdownIndex] && (h("p-field", { class: 'mt-2 w-28', size: 'sm', icon: 'enter-key', iconPosition: 'end', type: 'number', properties: {
+                    this._showDropdown[p.dropdownIndex] && (h("p-field", { autoFocus: true, class: 'mt-2 w-28', icon: 'enter-key', iconPosition: 'end', properties: {
                         min: 1,
                         max: this._pages.length,
                         step: 1,
-                    }, autoFocus: true, onEnter: ({ detail }) => this._enterPress(detail), slot: 'items' }))));
+                    }, size: 'sm', slot: 'items', type: 'number', onEnter: ({ detail }) => this._enterPress(detail) }))));
             }
             return (h("p-pagination-pages-item", { active: p.value === this.page, onClick: () => this._pageClick(p.value) }, p.value));
         }))));
@@ -190,11 +190,11 @@ export class PaginationPages {
         const set = [];
         const previous = {
             type: 'previous',
-            value: (h("p-icon", { variant: 'caret', size: 'sm', rotate: 90 })),
+            value: (h("p-icon", { rotate: 90, size: 'sm', variant: 'caret' })),
         };
         const next = {
             type: 'next',
-            value: (h("p-icon", { variant: 'caret', size: 'sm', rotate: -90 })),
+            value: (h("p-icon", { rotate: -90, size: 'sm', variant: 'caret' })),
         };
         // Disable page range, display all the pages
         if (range === null) {

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

@@ -66,7 +66,7 @@ export class Pagination {
                     (!this.enablePaginationSize && !this.enablePaginationPages),
             }) }, this.enablePaginationPages && this.enablePaginationSize && (h(Fragment, { key: '5812bfaaee47936e0f1d910c4da0421589e5cf9b' }, h("p-pagination-size", { key: '2fe1f8e733d96ef2843d184f17c02b2db44b3fb5', hidden: hidePageSizeSelect, size: this.pageSize, sizeOptions: this.pageSizeOptions, onSizeChange: ({ detail }) => this._changePageSize(detail) }), !hidePageSizeSelect &&
             this.hideOnSinglePage &&
-            this._hasPaginationPages && (h("p-divider", { key: 'fa14cc1d718604f931f95ee9d2accd28b1bf43e7', variant: 'vertical', class: 'mx-0 h-4 text-off-white-700 dark:text-hurricane-400' })))), this.enablePaginationPages && (h("p-pagination-pages", { key: '265840dfb523c4330e5c44a00fe28d9397f7b45c', pageSize: this.pageSize, total: this.total, page: this.page, hideOnSinglePage: this.hideOnSinglePage, onPageChange: ({ detail }) => this.pageChange.emit(detail), onPagesChange: ({ detail }) => {
+            this._hasPaginationPages && (h("p-divider", { key: 'fa14cc1d718604f931f95ee9d2accd28b1bf43e7', class: 'mx-0 h-4 text-off-white-700 dark:text-hurricane-400', variant: 'vertical' })))), this.enablePaginationPages && (h("p-pagination-pages", { key: '265840dfb523c4330e5c44a00fe28d9397f7b45c', 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);
             } })))));

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

@@ -73,7 +73,7 @@ export class PaginationSize {
         this._setLocales();
     }
     render() {
-        return (h(ThemedHost, { key: '1062e4a018038b23e5514a50f9fa658b6fae7010', class: paginationSize({ hidden: asBoolean(this.hidden) }) }, h("p-dropdown", { key: '521979380d535dcd911c26b881338ddaaf3e7344', applyFullWidth: true, applyMaxWidth: false, placement: 'top-start', chevronDirection: 'down', onIsOpen: ({ detail }) => (this.dropdownIsOpen = detail) }, h("div", { key: '81cdccac14a27636661d30889d5894a9fb5d7ce6', class: trigger({
+        return (h(ThemedHost, { key: '1062e4a018038b23e5514a50f9fa658b6fae7010', class: paginationSize({ hidden: asBoolean(this.hidden) }) }, h("p-dropdown", { key: '521979380d535dcd911c26b881338ddaaf3e7344', applyFullWidth: true, applyMaxWidth: false, chevronDirection: 'down', placement: 'top-start', onIsOpen: ({ detail }) => (this.dropdownIsOpen = detail) }, h("div", { key: '81cdccac14a27636661d30889d5894a9fb5d7ce6', class: trigger({
                 active: this.dropdownIsOpen,
             }), slot: 'trigger' }, h("p", { key: '3477755b3365205fef5a3e3f8f465f0d1d41ddd1', class: 'min-w-0 flex-1 overflow-hidden text-ellipsis text-nowrap' }, this.itemTemplate
             ? this.itemTemplate(this.size)
@@ -84,7 +84,7 @@ export class PaginationSize {
             ], {
                 'text-storm-300 dark:text-hurricane-200': !this.dropdownIsOpen,
                 'text-storm-500 dark:text-white': !!this.dropdownIsOpen,
-            }), variant: 'double-caret', size: 'sm' })), h("slot", { key: '4ac113bf401a0a3019c6430a58f5cfd8a153e5c4', slot: 'items' }, this.sizeOptions.map(option => (h("p-dropdown-menu-item", { active: option === this.size, onClick: () => this._changeSize(option) }, this.itemTemplate
+            }), size: 'sm', variant: 'double-caret' })), h("slot", { key: '4ac113bf401a0a3019c6430a58f5cfd8a153e5c4', 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))))))));
     }

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

@@ -28,7 +28,7 @@ export class Profile {
     }
     render() {
         const content = this._getContent();
-        return (h(ThemedHost, { key: 'd8b3c59997be743df436a92d272715015d2e876d' }, this._hasDropdownSlot ? (h("p-dropdown", { strategy: 'absolute', placement: this.dropdownLocation, applyFullWidth: true, applyMaxWidth: false, onIsOpen: ev => (this._dropdownOpen = ev.detail) }, h("p-button", { variant: 'dropdown', chevron: this._dropdownOpen ? 'up' : 'down', active: this._dropdownOpen, slot: 'trigger', size: 'lg', class: 'w-full' }, content), h("div", { slot: 'items' }, h("slot", { name: 'dropdown', onSlotchange: () => this._checkDropdownSlot() })))) : (content)));
+        return (h(ThemedHost, { key: 'd8b3c59997be743df436a92d272715015d2e876d' }, this._hasDropdownSlot ? (h("p-dropdown", { applyChevron: false, applyFullWidth: true, applyMaxWidth: false, placement: this.dropdownLocation, strategy: 'absolute', onIsOpen: ev => (this._dropdownOpen = ev.detail) }, h("p-button", { active: this._dropdownOpen, chevron: this._dropdownOpen ? 'up' : 'down', class: 'w-full', size: 'lg', slot: 'trigger', variant: 'dropdown' }, content), h("div", { slot: 'items' }, h("slot", { name: 'dropdown', onSlotchange: () => this._checkDropdownSlot() })))) : (content)));
     }
     slotchange() {
         this._checkDropdownSlot();

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

@@ -23,7 +23,7 @@ export class Range {
     valueChange;
     render() {
         const percentage = Math.round((this.value / (this.max - this.min)) * 100);
-        return (h(ThemedHost, { key: 'cb6a6b717940ba17aa7a6df5cc36577a991d3831' }, h("div", { key: '86f3c5cfa6b35bab44279382db58fc28cbfb864d', class: 'flex w-inherit items-center gap-2 text-storm-300 dark:text-hurricane-200' }, h("p-icon", { key: 'c39ee42a23403c618cf6980ee68610b0d2210f59', variant: 'minus' }), h("div", { key: 'ea69ab86a1006f763f2306cc5a644b12ebd68540', class: 'relative h-6 flex-1' }, h("input", { key: '36594b239d75623d5494a27ac44fffab83f2c51d', type: 'range', min: this.min, max: this.max, step: this.step, value: this.value, onInput: ev => {
+        return (h(ThemedHost, { key: 'cb6a6b717940ba17aa7a6df5cc36577a991d3831' }, h("div", { key: '86f3c5cfa6b35bab44279382db58fc28cbfb864d', class: 'flex w-inherit items-center gap-2 text-storm-300 dark:text-hurricane-200' }, h("p-icon", { key: 'c39ee42a23403c618cf6980ee68610b0d2210f59', variant: 'minus' }), h("div", { key: 'ea69ab86a1006f763f2306cc5a644b12ebd68540', class: 'relative h-6 flex-1' }, h("input", { key: '36594b239d75623d5494a27ac44fffab83f2c51d', max: this.max, min: this.min, step: this.step, type: 'range', value: this.value, onInput: ev => {
                 const value = ev.target.value;
                 this.value = Number.parseFloat(value);
                 this.valueChange.emit(value);

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

@@ -322,8 +322,8 @@ export class Select {
         if (this.error?.length) {
             buttonIcon = 'warning';
         }
-        return (h(ThemedHost, { key: '617063ca6cf31255928f6f6856cb1902b1d225a2' }, h("p-field-container", { key: '4a6d95f7bfbc79b886044f2fe31695990b4e210d', variant: 'write', prefix: this.prefix, label: this.label, helper: this.helper, required: this.required, showOptional: this.showOptional, error: this.error, forceShowTooltip: !!this.error?.length && !this._showDropdown }, h("p-dropdown", { key: 'a505febe8197f86f5e43ffa71f99c4b72cd2d8aa', applyFullWidth: true, applyMaxWidth: false, slot: 'content', insideClick: true, manual: true, scrollable: this.enableAutocomplete ? 'large' : true, "disable-trigger-click": this.disabled, show: this._showDropdown, onIsOpen: ev => this._onDropdownOpen(ev), strategy: this.strategy }, h("p-button", { key: 'fd28bc0407580787fdb73d87dc3f282c78db0cd4', slot: 'trigger', class: 'w-full', variant: 'secondary', size: this.size, chevron: this.showChevron ? (this._showDropdown ? 'up' : 'down') : false, active: this._showDropdown, error: !!this.error?.length, icon: buttonIcon, iconClass: this.applyClassOnSelectedItem &&
-                this._selectedItem?.[this.iconClassKey], onClick: ev => this._onClick(ev) }, h("div", { key: 'bd68cd902b3b2c09c7f0810aab598fb12b06e84f', class: 'relative min-w-0 flex-1', ref: ref => (this._inputRef = ref) }, this._displayValue)), this.loading ? this._getLoadingItems() : this._getItems(), this.showAddItem && this._getAddItem()))));
+        return (h(ThemedHost, { key: '617063ca6cf31255928f6f6856cb1902b1d225a2' }, h("p-field-container", { key: '4a6d95f7bfbc79b886044f2fe31695990b4e210d', error: this.error, forceShowTooltip: !!this.error?.length && !this._showDropdown, helper: this.helper, label: this.label, prefix: this.prefix, required: this.required, showOptional: this.showOptional, variant: 'write' }, h("p-dropdown", { key: '85f6409928f327efcfc78cef1dddb9c30178e6ed', applyChevron: false, applyFullWidth: true, applyMaxWidth: false, "disable-trigger-click": this.disabled, insideClick: true, manual: true, scrollable: this.enableAutocomplete ? 'large' : true, show: this._showDropdown, slot: 'content', strategy: this.strategy, onIsOpen: ev => this._onDropdownOpen(ev) }, h("p-button", { key: '9c892e4edc472af73e0c2cbba419012d08302adc', active: this._showDropdown, chevron: this.showChevron ? (this._showDropdown ? 'up' : 'down') : false, class: 'w-full', error: !!this.error?.length, icon: buttonIcon, iconClass: this.applyClassOnSelectedItem &&
+                this._selectedItem?.[this.iconClassKey], size: this.size, slot: 'trigger', variant: 'secondary', onClick: ev => this._onClick(ev) }, h("div", { key: '6fa19bac84f26dbc0c3aa97985c6deb40c4eb641', class: 'relative min-w-0 flex-1', ref: ref => (this._inputRef = ref) }, this._displayValue)), this.loading ? this._getLoadingItems() : this._getItems(), this.showAddItem && this._getAddItem()))));
     }
     documentClickHandler(event) {
         if (!this._showDropdown || childOfComposed(event, this._el)) {
@@ -480,7 +480,7 @@ export class Select {
                 ? this._selectedItem.some(i => i[this._identifierKey] === item[this._identifierKey])
                 : item[this._identifierKey] ===
                     this._selectedItem?.[this._identifierKey];
-            return (h("p-dropdown-menu-item", { enableTextWrap: this.enableTextWrap, useContainer: false, onClick: () => this._selectValue(item), active: isSelected, checkbox: this.multi ? true : false, slot: 'items' }, this._getDisplay(item, false, isSelected)));
+            return (h("p-dropdown-menu-item", { active: isSelected, checkbox: this.multi ? true : false, enableTextWrap: this.enableTextWrap, slot: 'items', useContainer: false, onClick: () => this._selectValue(item) }, this._getDisplay(item, false, isSelected)));
         });
         if (this._items.length === 0) {
             items = [
@@ -488,7 +488,7 @@ export class Select {
             ];
         }
         if (this.enableSelectAll && this._items.length > 0) {
-            items.unshift(h("p-dropdown-menu-item", { slot: 'items', useContainer: false, checkbox: true, onClick: () => this._selectAllChange(), active: this._allSelected }, this.selectAllIcon?.length ? (h("span", { class: 'flex items-center gap-2' }, h("div", { class: 'flex w-6 justify-center text-lg' }, h("p-icon", { variant: this.selectAllIcon })), ' ', this.selectAllText)) : (this.selectAllText)));
+            items.unshift(h("p-dropdown-menu-item", { active: this._allSelected, slot: 'items', useContainer: false, checkbox: true, onClick: () => this._selectAllChange() }, this.selectAllIcon?.length ? (h("span", { class: 'flex items-center gap-2' }, h("div", { class: 'flex w-6 justify-center text-lg' }, h("p-icon", { variant: this.selectAllIcon })), ' ', this.selectAllText)) : (this.selectAllText)));
         }
         if (this.enableAutocomplete) {
             items.unshift(this._getAutoCompleteItem());
@@ -496,17 +496,17 @@ export class Select {
         return items;
     }
     _getAddItem() {
-        return (h("p-dropdown-menu-item", { onClick: () => this.add.emit(), useContainer: false, slot: 'items' }, h("span", { class: 'flex items-center gap-1 font-semibold text-indigo-600' }, this.addItemText, h("p-icon", { variant: 'plus' }))));
+        return (h("p-dropdown-menu-item", { slot: 'items', useContainer: false, onClick: () => this.add.emit() }, h("span", { class: 'flex items-center gap-1 font-semibold text-indigo-600' }, this.addItemText, h("p-icon", { variant: 'plus' }))));
     }
     _getLoadingItems() {
-        const items = [0, 0, 0].map(() => (h("p-dropdown-menu-item", { enableHover: false, slot: 'items' }, h("p-loader", { variant: 'ghost', class: 'h-6 w-full rounded' }))));
+        const items = [0, 0, 0].map(() => (h("p-dropdown-menu-item", { enableHover: false, slot: 'items' }, h("p-loader", { class: 'h-6 w-full rounded', variant: 'ghost' }))));
         if (this.enableAutocomplete) {
             items.unshift(this._getAutoCompleteItem());
         }
         return items;
     }
     _getAutoCompleteItem() {
-        return (h("div", { class: 'sticky top-0 z-10 mb-3 h-8', slot: 'items' }, h("p-field", { class: 'block', placeholder: this.autocompletePlaceholder, onValueChange: ev => this._onAutoComplete(ev), onInputRefChange: ev => (this.autocompleteInputRef = ev.detail), value: this.query })));
+        return (h("div", { class: 'sticky top-0 z-10 mb-3 h-8', slot: 'items' }, h("p-field", { class: 'block', placeholder: this.autocompletePlaceholder, value: this.query, onInputRefChange: ev => (this.autocompleteInputRef = ev.detail), onValueChange: ev => this._onAutoComplete(ev) })));
     }
     _setMultiContainerMaxWidth() {
         if (!this._inputRef || !this._multiContainerRef) {
@@ -570,7 +570,7 @@ export class Select {
             ? (this.selectionDisplayKey ?? this.displayKey)
             : this.displayKey]));
         if (this.avatarKey) {
-            content = (h("span", { class: 'flex items-center gap-2' }, h("p-avatar", { size: 'sm', src: item[this.avatarKey], letters: item[this.avatarLettersKey] }), h("div", { class: textContainer({
+            content = (h("span", { class: 'flex items-center gap-2' }, h("p-avatar", { letters: item[this.avatarLettersKey], size: 'sm', src: item[this.avatarKey] }), h("div", { class: textContainer({
                     variant: 'default',
                     error: !!this.error?.length,
                     enableTextWrap: this.enableTextWrap && !isSelection,

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

@@ -91,7 +91,7 @@ export class TableCell {
     }
     _getContent() {
         if (this.variant === 'loading') {
-            return (h("p-loader", { variant: 'ghost', class: 'h-6 w-[calc(100%-1rem)] flex-1 rounded' }));
+            return (h("p-loader", { class: 'h-6 w-[calc(100%-1rem)] flex-1 rounded', variant: 'ghost' }));
         }
         const align = this.variant === 'header'
             ? (this.definition.headerAlign ?? this.definition.align)

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

@@ -105,7 +105,7 @@ export class TableFooter {
                 hidden: this._hidden,
                 tableHeaderHasAction: this.tableHeaderHasAction,
             }) }, (this.enablePaginationPages || this.enablePaginationSize) &&
-            this.total > 0 && (h("p-pagination", { key: '9bbe8d8de8dce310f2799829469b6826642aa295', class: 'z-[2]', enablePaginationSize: this.enablePaginationSize, enablePaginationPages: this.enablePaginationPages, pageSize: this.pageSize, pageSizeOptions: this.pageSizeOptions, onPageSizeChange: ({ detail }) => this._changePageSize(detail), page: this.page, hideOnSinglePage: this.hideOnSinglePage, onPageChange: ({ detail }) => this.pageChange.emit(detail), total: this.total, onPagesChange: ({ detail }) => (this._hasPaginationPages = detail > 1) })))));
+            this.total > 0 && (h("p-pagination", { key: '9bbe8d8de8dce310f2799829469b6826642aa295', class: 'z-[2]', enablePaginationPages: this.enablePaginationPages, enablePaginationSize: this.enablePaginationSize, hideOnSinglePage: this.hideOnSinglePage, page: this.page, pageSize: this.pageSize, pageSizeOptions: this.pageSizeOptions, total: this.total, onPageChange: ({ detail }) => this.pageChange.emit(detail), onPageSizeChange: ({ detail }) => this._changePageSize(detail), onPagesChange: ({ detail }) => (this._hasPaginationPages = detail > 1) })))));
     }
     _changePageSize(s) {
         if (!s) {

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

@@ -130,21 +130,21 @@ export class TableHeader {
         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(ThemedHost, { key: 'dcf65ce62e7dc90f0c45e7748fd23872f21e7fad' }, h("div", { key: '3082ccae779f57c8812afc4b2400b20c87dd22a0', class: header() }, this.loading && (h("p-loader", { key: 'cbcf94e4afb27f7ee22b4adfbcadd9d72db2a189', variant: 'ghost', class: 'hidden h-8 w-3/4 rounded desktop-xs:flex' })), !this.loading &&
+        return (h(ThemedHost, { key: 'dcf65ce62e7dc90f0c45e7748fd23872f21e7fad' }, h("div", { key: '3082ccae779f57c8812afc4b2400b20c87dd22a0', class: header() }, this.loading && (h("p-loader", { key: 'cbcf94e4afb27f7ee22b4adfbcadd9d72db2a189', class: 'hidden h-8 w-3/4 rounded desktop-xs:flex', variant: 'ghost' })), !this.loading &&
             (hasCustomFilterSlot || quickFilters.length > 0) && (h("div", { key: '04c40b4406a49b0faf09c1e72ffe0d3b64e54548', class: 'flex flex-col justify-start gap-4 justify-self-start desktop-xs:flex-row' }, hasCustomFilterSlot && h("slot", { key: '409423868e33814d87381c29d41cfede57deead0', name: 'custom-filter' }), quickFilters.length > 0 && (h("p-segment-container", { key: '51c257a5ad8c65e84dac192b86c2cb291435884e', class: 'hidden desktop-xs:flex' }, 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: '6f8295a5c359b799f2f03d82e65d4f9e4acb5109', class: 'flex flex-col justify-end gap-2 desktop-xs:ml-auto desktop-xs:flex-row desktop-xs:items-center' }, this.enableSearch && (h("p-field", { key: 'e52e1dbe939f318c711e0f5ae25e8c667f6fcf31', icon: 'search', class: 'desktop-xs:max-w-60', placeholder: 'Zoeken...', value: this.query, onValueChange: ev => this._queryObserver.next(ev.detail) })), h("div", { key: 'b914ffa439de0484c5528fa9c02b4a32dc853c27', class: 'flex items-center gap-2' }, this.enableFilter && (h("p-button", { key: '5ea25448415e1b54883dc86059192b065cb23093', icon: 'filter', variant: 'secondary', class: `w-full ${this.enableFilterDesktop
+            : item.text(), ' ', item?.count >= 0 ? `(${item.count})` : ''))))))), h("div", { key: '6f8295a5c359b799f2f03d82e65d4f9e4acb5109', class: 'flex flex-col justify-end gap-2 desktop-xs:ml-auto desktop-xs:flex-row desktop-xs:items-center' }, this.enableSearch && (h("p-field", { key: 'e52e1dbe939f318c711e0f5ae25e8c667f6fcf31', class: 'desktop-xs:max-w-60', icon: 'search', placeholder: 'Zoeken...', value: this.query, onValueChange: ev => this._queryObserver.next(ev.detail) })), h("div", { key: 'b914ffa439de0484c5528fa9c02b4a32dc853c27', class: 'flex items-center gap-2' }, this.enableFilter && (h("p-button", { key: '5ea25448415e1b54883dc86059192b065cb23093', class: `w-full ${this.enableFilterDesktop
                 ? 'desktop-xs:w-auto'
-                : 'desktop-xs:hidden'}`, onOnClick: () => this.filter.emit() }, this.filterButtonTemplate
+                : 'desktop-xs:hidden'}`, icon: 'filter', variant: 'secondary', onOnClick: () => this.filter.emit() }, this.filterButtonTemplate
             ? this.filterButtonTemplate()
             : this._defaultFilterButtonTemplate(), this.selectedFiltersAmount &&
-            this._getLabel(this.selectedFiltersAmount), mobileTotal > 0 && this._getLabel(mobileTotal, 'mobile'))), !this.loading && this.enableExport && this.enableFilter && (h("p-divider", { key: '38dc1a4aa1902f41b4b3e3cb85da7d442fc98fd0', variant: 'vertical', class: 'hidden h-4 tablet:flex dark:text-white/15' })), !this.loading && this.enableExport && (h("p-button", { key: 'f8180ecb38e763dc2cf045c3c8e33ed276d591ab', variant: 'secondary', icon: 'upload', class: 'desktop-xs:auto w-full', onOnClick: () => this.export.emit() }, formatTranslation(this._locales.export)))), this.enableAction && this._buttonTemplate(), hasCustomActionsSlot && h("slot", { key: '24b7bee12f89bb16e4e4d690ee03564fcd106638', name: 'custom-actions' })), this.enableAction && this.canUseAction && (h("div", { key: '6c3739a262107b564f6418a605ba6e16943c2c36', class: 'fixed bottom-0 left-0 z-[2] block w-full border border-solid border-transparent bg-white p-4 desktop-xs:hidden dark:border-t-hurricane-400 dark:bg-hurricane-500' }, this._buttonTemplate(true))))));
+            this._getLabel(this.selectedFiltersAmount), mobileTotal > 0 && this._getLabel(mobileTotal, 'mobile'))), !this.loading && this.enableExport && this.enableFilter && (h("p-divider", { key: '38dc1a4aa1902f41b4b3e3cb85da7d442fc98fd0', class: 'hidden h-4 tablet:flex dark:text-white/15', variant: 'vertical' })), !this.loading && this.enableExport && (h("p-button", { key: 'f8180ecb38e763dc2cf045c3c8e33ed276d591ab', class: 'desktop-xs:auto w-full', icon: 'upload', variant: 'secondary', onOnClick: () => this.export.emit() }, formatTranslation(this._locales.export)))), this.enableAction && this._buttonTemplate(), hasCustomActionsSlot && h("slot", { key: '24b7bee12f89bb16e4e4d690ee03564fcd106638', name: 'custom-actions' })), this.enableAction && this.canUseAction && (h("div", { key: '6c3739a262107b564f6418a605ba6e16943c2c36', class: 'fixed bottom-0 left-0 z-[2] block w-full border border-solid border-transparent bg-white p-4 desktop-xs:hidden dark:border-t-hurricane-400 dark:bg-hurricane-500' }, this._buttonTemplate(true))))));
     }
     async _setLocales() {
         this._locales = await getLocaleComponentStrings(this._el);
     }
     _buttonTemplate(mobile = false) {
-        return (h("p-button", { class: mobile ? 'w-full' : 'hidden desktop-xs:flex', icon: this.actionIcon, disabled: !this.canUseAction, onOnClick: () => this.action.emit(), loading: this.actionLoading }, this.actionButtonTemplate
+        return (h("p-button", { class: mobile ? 'w-full' : 'hidden desktop-xs:flex', disabled: !this.canUseAction, icon: this.actionIcon, loading: this.actionLoading, onOnClick: () => this.action.emit() }, this.actionButtonTemplate
             ? this.actionButtonTemplate(mobile ? this.itemsSelectedAmount : 0)
             : this._defaultActionButtonTemplate(mobile ? this.itemsSelectedAmount : 0)));
     }

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

@@ -49,7 +49,7 @@ export class Toast {
      */
     action;
     render() {
-        return (h(ThemedHost, { key: '6fd875b74af13f4a1c7dd6e924d7044ff06c944f' }, h("div", { key: 'f908fa3fc32e0818e5b7ccd64adf925678719072', class: 'flex gap-2 rounded-lg border border-solid border-storm-100 bg-white p-2 shadow-2 dark:border-hurricane-800 dark:bg-hurricane-800', onClick: () => this._onClick() }, h("div", { key: '7f2788fde508ad480ffaaf544f6815f87e520499', class: indicator({ variant: this.variant }) }), h("div", { key: '99bde4f91347f270375852e62b573cba43d570d2', class: content() }, h("div", { key: '2ea0b73745021b483607c52166204f3e00b33d38', class: 'flex w-full min-w-0 flex-col' }, h("p", { key: 'd9cf48a043d897e211da6ce6d389ee65c59d7560', class: 'm-0 overflow-hidden text-ellipsis whitespace-nowrap text-sm font-semibold text-storm-500 dark:text-white' }, this.header?.length ? this.header : h("slot", { name: 'header' })), h("p", { key: 'cbae153aafab6f54d0af33ab3a99f1c03a44cd78', class: 'm-0 w-full overflow-hidden text-ellipsis whitespace-nowrap text-xs text-storm-300 dark:text-hurricane-200' }, this.content?.length ? this.content : h("slot", { name: 'content' }))), this.enableAction && (h("div", { key: '300ae00c2e2e30c87c32f78bf05a3bb3a65e2a97', class: 'flex-shrink-0 cursor-pointer p-2 text-storm-200 hover:text-storm-500 hover:text-white dark:text-hurricane-200' }, h("p-icon", { key: 'a7849a36ec22b1a300c0d788c0e41ea1e8e76340', variant: this.actionIcon, flip: this.actionIconFlip, rotate: this.actionIconRotate })))))));
+        return (h(ThemedHost, { key: '6fd875b74af13f4a1c7dd6e924d7044ff06c944f' }, h("div", { key: 'f908fa3fc32e0818e5b7ccd64adf925678719072', class: 'flex gap-2 rounded-lg border border-solid border-storm-100 bg-white p-2 shadow-2 dark:border-hurricane-800 dark:bg-hurricane-800', onClick: () => this._onClick() }, h("div", { key: '7f2788fde508ad480ffaaf544f6815f87e520499', class: indicator({ variant: this.variant }) }), h("div", { key: '99bde4f91347f270375852e62b573cba43d570d2', class: content() }, h("div", { key: '2ea0b73745021b483607c52166204f3e00b33d38', class: 'flex w-full min-w-0 flex-col' }, h("p", { key: 'd9cf48a043d897e211da6ce6d389ee65c59d7560', class: 'm-0 overflow-hidden text-ellipsis whitespace-nowrap text-sm font-semibold text-storm-500 dark:text-white' }, this.header?.length ? this.header : h("slot", { name: 'header' })), h("p", { key: 'cbae153aafab6f54d0af33ab3a99f1c03a44cd78', class: 'm-0 w-full overflow-hidden text-ellipsis whitespace-nowrap text-xs text-storm-300 dark:text-hurricane-200' }, this.content?.length ? this.content : h("slot", { name: 'content' }))), this.enableAction && (h("div", { key: '300ae00c2e2e30c87c32f78bf05a3bb3a65e2a97', class: 'flex-shrink-0 cursor-pointer p-2 text-storm-200 hover:text-storm-500 hover:text-white dark:text-hurricane-200' }, h("p-icon", { key: 'a7849a36ec22b1a300c0d788c0e41ea1e8e76340', flip: this.actionIconFlip, rotate: this.actionIconRotate, variant: this.actionIcon })))))));
     }
     _onClick() {
         if (this.enableAction) {

package/dist/collection/components/organisms/drawer/drawer.component.js

@@ -51,7 +51,7 @@ export class Drawer {
         }
         const headerContent = h("slot", { name: 'header' });
         const bodyContent = h("slot", { name: 'content' });
-        return (h("p-backdrop", { variant: 'drawer', applyBlur: this.applyBlur, onClicked: ev => this._backdropClick(ev.detail), closing: this._closing, scrollLock: this.scrollLock }, h("p-drawer-container", { closing: this._closing }, (this.header?.length || this._hasHeaderSlot) && (h("p-drawer-header", { "show-close": this.showClose, onClose: ev => this.close(ev.detail, 'close') }, this._hasHeaderSlot ? headerContent : this.header)), h("p-drawer-body", null, bodyContent))));
+        return (h("p-backdrop", { applyBlur: this.applyBlur, closing: this._closing, scrollLock: this.scrollLock, variant: 'drawer', onClicked: ev => this._backdropClick(ev.detail) }, h("p-drawer-container", { closing: this._closing }, (this.header?.length || this._hasHeaderSlot) && (h("p-drawer-header", { "show-close": this.showClose, onClose: ev => this.close(ev.detail, 'close') }, this._hasHeaderSlot ? headerContent : this.header)), h("p-drawer-body", null, bodyContent))));
     }
     _backdropClick(ev) {
         if (!this.backdropClickClose) {

package/dist/collection/components/organisms/modal/modal.component.js

@@ -47,7 +47,7 @@ export class Modal {
     _hasFooterSlot = false;
     _hasHeaderSlot = false;
     _closing = false;
-    componentWillLoad() {
+    componentWillRender() {
         this._hasFooterSlot = !!this._el.querySelector(':scope > [slot="footer"]');
         this._hasHeaderSlot = !!this._el.querySelector(':scope > [slot="header"]');
     }
@@ -58,7 +58,7 @@ export class Modal {
         const headerContent = h("slot", { name: 'header' });
         const bodyContent = h("slot", { name: 'content' });
         const footerContent = h("slot", { name: 'footer' });
-        return (h("p-backdrop", { applyBlur: this.applyBlur, onClicked: ev => this._backdropClick(ev.detail), closing: this._closing, scrollLock: this.scrollLock }, h("p-modal-container", { size: this.size, closing: this._closing }, (this.header?.length || this._hasHeaderSlot) && (h("p-modal-header", { showClose: this.showClose, onClose: ev => this.close('button', ev.detail) }, this._hasHeaderSlot ? headerContent : this.header)), h("p-modal-body", { roundedBottom: !this._hasFooterSlot, roundedTop: !this._hasHeaderSlot && !this.header?.length }, bodyContent), this._hasFooterSlot && (h("p-modal-footer", null, footerContent)))));
+        return (h("p-backdrop", { applyBlur: this.applyBlur, closing: this._closing, scrollLock: this.scrollLock, onClicked: ev => this._backdropClick(ev.detail) }, h("p-modal-container", { closing: this._closing, size: this.size }, (this.header?.length || this._hasHeaderSlot) && (h("p-modal-header", { showClose: this.showClose, onClose: ev => this.close('button', ev.detail) }, this._hasHeaderSlot ? headerContent : this.header)), h("p-modal-body", { roundedBottom: !this._hasFooterSlot, roundedTop: !this._hasHeaderSlot && !this.header?.length }, bodyContent), this._hasFooterSlot && (h("p-modal-footer", null, footerContent)))));
     }
     _backdropClick(ev) {
         if (!this.backdropClickClose) {

package/dist/collection/components/organisms/navbar/navbar.component.js

@@ -44,7 +44,7 @@ const backdrop = cva(['z-navbar-backdrop layout-1280:hidden transition-opacity r
 export class Navbar {
     _show = false;
     render() {
-        return (h(ThemedHost, { key: 'ee599d3472ef0a332d17353d8e7f559e36d5529b' }, h("p-backdrop", { key: 'aa5b71247881e2a23998bab23f194ff6f58a6662', class: backdrop({ show: this._show }), scrollLock: this._show, onClicked: () => (this._show = false) }), h("div", { key: '121da670f6b7dbbfbce4a018c56b56ac1352c212', class: sidebar({ class: sidebarAndTopbar(), show: this._show }) }, h("div", { key: 'e789b6c904b4715c271e03324d8e8643acd5d8a8', class: 'flex w-full items-center justify-end layout-1280:hidden' }, h("p-button", { key: '9d6f49157fc731f91ff34bc7e37aebe40c5d0612', variant: 'secondary', icon: 'menu-arrow', iconFlip: 'horizontal', iconOnly: true, onClick: () => (this._show = false) })), h("div", { key: 'c88909335eed7df5a93b32a65d24b1a8ff2a3f19', class: 'flex w-full flex-shrink-0 flex-col items-stretch' }, h("slot", { key: 'e09b2eaefb99e51502f3629c377728d298b0e8d9', name: 'company' })), h("div", { key: '2ce82f037a53e8529d834958812d74f3cdd25ef2', class: 'flex w-full flex-1 flex-col gap-6 overflow-y-auto' }, h("slot", { key: 'eaf615dd6f9d5b8fb260fe5a10c43b1e0b6f52c0', name: 'content' })), h("div", { key: '9b8bedc34ab2bcbe8935426007b6fd8c2d33c177', class: 'mt-auto hidden w-full flex-shrink-0 flex-col layout-1280:flex' }, h("slot", { key: '7a4889a2554cad25f9e8be122863fb5c2783376d', name: 'user' }))), h("div", { key: 'e9d88767781757f7fc81c772fbe750a15a03fa6c', class: topbar({ class: sidebarAndTopbar() }) }, h("p-button", { key: '3517c55339958c4461f20b190c220358658a71cf', variant: 'secondary', iconOnly: true, icon: 'menu-arrow', onClick: () => (this._show = true) }), h("slot", { key: 'b89f63dfbeba643e3f46f72e6862944ba75f1213', name: 'topbar' }))));
+        return (h(ThemedHost, { key: 'ee599d3472ef0a332d17353d8e7f559e36d5529b' }, h("p-backdrop", { key: 'aa5b71247881e2a23998bab23f194ff6f58a6662', class: backdrop({ show: this._show }), scrollLock: this._show, onClicked: () => (this._show = false) }), h("div", { key: '121da670f6b7dbbfbce4a018c56b56ac1352c212', class: sidebar({ class: sidebarAndTopbar(), show: this._show }) }, h("div", { key: 'e789b6c904b4715c271e03324d8e8643acd5d8a8', class: 'flex w-full items-center justify-end layout-1280:hidden' }, h("p-button", { key: '9d6f49157fc731f91ff34bc7e37aebe40c5d0612', icon: 'menu-arrow', iconFlip: 'horizontal', iconOnly: true, variant: 'secondary', onClick: () => (this._show = false) })), h("div", { key: 'c88909335eed7df5a93b32a65d24b1a8ff2a3f19', class: 'flex w-full flex-shrink-0 flex-col items-stretch' }, h("slot", { key: 'e09b2eaefb99e51502f3629c377728d298b0e8d9', name: 'company' })), h("div", { key: '2ce82f037a53e8529d834958812d74f3cdd25ef2', class: 'flex w-full flex-1 flex-col gap-6 overflow-y-auto' }, h("slot", { key: 'eaf615dd6f9d5b8fb260fe5a10c43b1e0b6f52c0', name: 'content' })), h("div", { key: '9b8bedc34ab2bcbe8935426007b6fd8c2d33c177', class: 'mt-auto hidden w-full flex-shrink-0 flex-col layout-1280:flex' }, h("slot", { key: '7a4889a2554cad25f9e8be122863fb5c2783376d', name: 'user' }))), h("div", { key: 'e9d88767781757f7fc81c772fbe750a15a03fa6c', class: topbar({ class: sidebarAndTopbar() }) }, h("p-button", { key: '3517c55339958c4461f20b190c220358658a71cf', icon: 'menu-arrow', iconOnly: true, variant: 'secondary', onClick: () => (this._show = true) }), h("slot", { key: 'b89f63dfbeba643e3f46f72e6862944ba75f1213', name: 'topbar' }))));
     }
     handleCloseNavbar() {
         this._show = false;

package/dist/collection/components/organisms/stepper/stepper.component.js

@@ -104,7 +104,7 @@ export class Stepper {
     }
     _getItem(data, i) {
         const activeStep = this.activeStep - 1 || 0;
-        return (h("p-stepper-item", { active: this.enableAutoStatus ? i === activeStep : data.active, finished: this.enableAutoStatus ? i < activeStep : data.finished, number: i + 1, align: this.direction === 'vertical' ? this.align : 'start', contentPosition: this.contentPosition }, data.content));
+        return (h("p-stepper-item", { active: this.enableAutoStatus ? i === activeStep : data.active, align: this.direction === 'vertical' ? this.align : 'start', contentPosition: this.contentPosition, finished: this.enableAutoStatus ? i < activeStep : data.finished, number: i + 1 }, data.content));
     }
     _getLine(i) {
         const activeStep = this.activeStep - 1 || 0;

package/dist/collection/components/organisms/table/table.component.js

@@ -257,41 +257,19 @@ export class Table {
         this.hasRendered.emit();
     }
     render() {
-        return (h(Host, { key: '7ece1479d7c90b408fa55f045feba734f9e27b28', class: 'z-0 flex flex-col' }, h("p-table-container", { key: '290cf20abdacab6257ebef5479b834df529bccbd' }, this.enableHeader && (h("p-table-header", { key: '9d49ef03a1b0c8b47e8292f36ade24a2eb0b3f7d', class: 'mb-8',
-            // quick filters
-            quickFilters: this.quickFilters, activeQuickFilterIdentifier: this.activeQuickFilterIdentifier, onQuickFilter: ({ detail }) => this.quickFilter.emit(detail),
-            // search
-            enableSearch: this.enableSearch, query: this.query, onQueryChange: ({ detail }) => this.queryChange.emit(detail),
-            // filter button
-            enableFilter: this.enableFilter, enableFilterDesktop: this.enableFilterDesktop, selectedFiltersAmount: this.selectedFiltersAmount, filterButtonTemplate: this.filterButtonTemplate, onFilter: () => this.filter.emit(),
-            // action button
-            enableAction: this.enableAction, actionIcon: this.actionButtonIcon, actionText: this.actionButtonText, actionLoading: this.actionButtonLoading, canUseAction: this.actionButtonEnabled, actionButtonTemplate: this.actionButtonTemplate, onAction: () => this.action.emit(), itemsSelectedAmount: this.selectedRows?.length,
-            //export
-            enableExport: this.enableExport, onExport: () => this.export.emit(),
-            //loading
-            loading: this.headerLoading }, this._hasCustomFilterSlot && (h("slot", { key: '555237f446a654201d12321505062d4c4e06210c', name: 'custom-filter', slot: 'custom-filter' })), this._hasCustomActionsSlot && (h("slot", { key: '4e935caf48c9cf1b0516a61ca9076a3755f98546', name: 'custom-actions', slot: 'custom-actions' })))), this._getExtraHeader(), this._getHeader(), h("div", { key: '23816ab229344ba5a7c5cc02a358b277e5ff8da1', class: 'flex flex-1 flex-col' }, this._getRows(), h("slot", { key: 'd3012e94582c06ca536db0ab83d1bd0df4d80c48', name: 'custom-rows' })), this.enableFloatingMenu && this._enableRowSelection ? (h("p-floating-menu-container", { usedInTable: true, class: floatingMenuContainerClass({
+        return (h(Host, { key: '7ece1479d7c90b408fa55f045feba734f9e27b28', class: 'z-0 flex flex-col' }, h("p-table-container", { key: '290cf20abdacab6257ebef5479b834df529bccbd' }, this.enableHeader && (h("p-table-header", { key: '6a1af71c86b2b23d26d8d344b1528b1356d7bd7b', actionButtonTemplate: this.actionButtonTemplate, actionIcon: this.actionButtonIcon, actionLoading: this.actionButtonLoading, actionText: this.actionButtonText, activeQuickFilterIdentifier: this.activeQuickFilterIdentifier, canUseAction: this.actionButtonEnabled, class: 'mb-8', enableAction: this.enableAction, enableExport: this.enableExport, enableFilter: this.enableFilter, enableFilterDesktop: this.enableFilterDesktop, enableSearch: this.enableSearch, filterButtonTemplate: this.filterButtonTemplate, itemsSelectedAmount: this.selectedRows?.length, loading: this.headerLoading, query: this.query, quickFilters: this.quickFilters, selectedFiltersAmount: this.selectedFiltersAmount, onAction: () => this.action.emit(), onExport: () => this.export.emit(), onFilter: () => this.filter.emit(), onQueryChange: ({ detail }) => this.queryChange.emit(detail), onQuickFilter: ({ detail }) => this.quickFilter.emit(detail) }, this._hasCustomFilterSlot && (h("slot", { key: '6bfe4727050ba7d6a3e6e280cc1c467259b9166b', name: 'custom-filter', slot: 'custom-filter' })), this._hasCustomActionsSlot && (h("slot", { key: 'da4f2aea31f0daa62749393a0390219fa4342b20', name: 'custom-actions', slot: 'custom-actions' })))), this._getExtraHeader(), this._getHeader(), h("div", { key: '799d65d57bf36a924ff40e6cb9416c4be0da4eaf', class: 'flex flex-1 flex-col' }, this._getRows(), h("slot", { key: 'b0060fa16edf49898787df195c86a35adf397798', name: 'custom-rows' })), this.enableFloatingMenu && this._enableRowSelection ? (h("p-floating-menu-container", { amount: this.selectedRows?.length, amountSelectedTemplate: this.floatingMenuAmountSelectedTemplate, class: floatingMenuContainerClass({
                 hasFooter: this.enableFooter && !this._footerHidden,
                 active: !!this.selectedRows?.length,
                 shown: this._floatingMenuShown,
-            }), amountSelectedTemplate: this.floatingMenuAmountSelectedTemplate, amount: this.selectedRows?.length, enableAmountSelected: !!this._rowActionsFloating?.length, onClose: () => this._selectAllChange(null, false) }, this._rowActionsFloating?.length &&
-            this._rowActionsFloating.map(a => (h("p-floating-menu-item", { slot: 'floating-menu-item', disabled: a.disabled, loading: a.loading, icon: a.icon, iconRotate: a.iconRotate, iconFlip: a.iconFlip, onClick: () => !a.disabled &&
+            }), enableAmountSelected: !!this._rowActionsFloating?.length, usedInTable: true, onClose: () => this._selectAllChange(null, false) }, this._rowActionsFloating?.length &&
+            this._rowActionsFloating.map(a => (h("p-floating-menu-item", { disabled: a.disabled, icon: a.icon, iconFlip: a.iconFlip, iconRotate: a.iconRotate, loading: a.loading, slot: 'floating-menu-item', onClick: () => !a.disabled &&
                     !a.loading &&
                     !!a.action &&
                     a.type === 'single'
                     ? a.action(this.selectedRows[0], false)
-                    : a.action(this.selectedRows, true) }, a.label))))) : (''), this.enableFooter && (h("p-table-footer", { key: '3c5138a3af7594642a8e750d40524bc13f138892',
-            // overall
-            hideOnSinglePage: this.hideOnSinglePage,
-            // page size select
-            enablePaginationSize: this.enablePaginationSize, pageSize: this.pageSize, pageSizeOptions: this.pageSizeOptions, onPageSizeChange: ({ detail }) => this.pageSizeChange.emit(detail),
-            // pagination
-            enablePaginationPages: this.enablePaginationPages, page: this.page, total: this.total, onPageChange: ({ detail }) => this.pageChange.emit(detail),
-            //loading
-            loading: this.footerLoading, onHiddenChange: ({ detail }) => (this._footerHidden = detail),
-            // header adjustment
-            tableHeaderHasAction: this.enableHeader &&
+                    : a.action(this.selectedRows, true) }, a.label))))) : (''), this.enableFooter && (h("p-table-footer", { key: '57d24f1f3803e58053eba3da5fad1ab6474eccc6', enablePaginationPages: this.enablePaginationPages, enablePaginationSize: this.enablePaginationSize, hideOnSinglePage: this.hideOnSinglePage, loading: this.footerLoading, page: this.page, pageSize: this.pageSize, pageSizeOptions: this.pageSizeOptions, tableHeaderHasAction: this.enableHeader &&
                 this.enableAction &&
-                this.actionButtonEnabled })))));
+                this.actionButtonEnabled, total: this.total, onHiddenChange: ({ detail }) => (this._footerHidden = detail), onPageChange: ({ detail }) => this.pageChange.emit(detail), onPageSizeChange: ({ detail }) => this.pageSizeChange.emit(detail) })))));
     }
     async _setLocales() {
         this._locales = await getLocaleComponentStrings(this._el);
@@ -387,12 +365,12 @@ export class Table {
         if (!this._extraHeaders?.length) {
             return null;
         }
-        return (h("p-table-row", { variant: 'header-secondary', isLast: true }, this._extraHeaders.map((col, index) => (h("p-table-cell", { definition: col, variant: 'header-secondary', checkboxOffset: index === 0 && this._enableRowSelection, index: index }, h("b", null, col.name))))));
+        return (h("p-table-row", { isLast: true, variant: 'header-secondary' }, this._extraHeaders.map((col, index) => (h("p-table-cell", { checkboxOffset: index === 0 && this._enableRowSelection, definition: col, index: index, variant: 'header-secondary' }, h("b", null, col.name))))));
     }
     _getHeader() {
-        return (h("p-table-row", { variant: 'header' }, this._columns.map((col, index) => (h("p-table-cell", { definition: col, value: col.name, variant: 'header', checkbox: index === 0 || col.hasCheckbox
+        return (h("p-table-row", { variant: 'header' }, this._columns.map((col, index) => (h("p-table-cell", { checkbox: index === 0 || col.hasCheckbox
                 ? this._getCheckbox(null, this.loading ? 'loading' : 'header')
-                : null, index: index })))));
+                : null, definition: col, index: index, value: col.name, variant: 'header' })))));
     }
     _getRows() {
         if (this.loading) {
@@ -403,22 +381,22 @@ export class Table {
         if (this._items.length === 0) {
             return this._getEmptyState();
         }
-        return this._items.map((item, index) => (h("p-table-row", { enableHover: this._enableRowSelection || this.enableRowClick, checked: this._selectionContains(index), onClick: ev => this._rowClick(ev, index), isLast: index === this._items.length - 1 }, this._getRowColumns(item, index), this._getActions(item, index))));
+        return this._items.map((item, index) => (h("p-table-row", { checked: this._selectionContains(index), enableHover: this._enableRowSelection || this.enableRowClick, isLast: index === this._items.length - 1, onClick: ev => this._rowClick(ev, index) }, this._getRowColumns(item, index), this._getActions(item, index))));
     }
     _getActions(item, index) {
         const actions = this._rowActionsRow.filter(a => a.showFunction ? a.showFunction(item) : true);
         if (actions?.length && !isMobile()) {
-            return (h("p-table-row-actions-container", { slot: 'actions', checked: this._selectionContains(index) }, actions.map(a => (h("p-tooltip", { strategy: 'fixed', content: a.label }, h("p-button", { "data-is-action": true, variant: 'secondary', slot: 'trigger', icon: a.icon, iconRotate: a.iconRotate, iconFlip: a.iconFlip, iconOnly: true, size: 'sm', onClick: () => typeof a.action === 'function' && a.action?.(item, false) }))))));
+            return (h("p-table-row-actions-container", { checked: this._selectionContains(index), slot: 'actions' }, actions.map(a => (h("p-tooltip", { content: a.label, strategy: 'fixed' }, h("p-button", { icon: a.icon, iconFlip: a.iconFlip, iconOnly: true, iconRotate: a.iconRotate, size: 'sm', slot: 'trigger', variant: 'secondary', "data-is-action": true, onClick: () => typeof a.action === 'function' && a.action?.(item, false) }))))));
         }
         return null;
     }
     _getRowColumns(item, index) {
-        return this._columns.map((col, colIndex) => (h("p-table-cell", { definition: col, item: item, checkbox: colIndex === 0 || col.hasCheckbox ? this._getCheckbox(index) : null, index: colIndex, rowIndex: index })));
+        return this._columns.map((col, colIndex) => (h("p-table-cell", { checkbox: colIndex === 0 || col.hasCheckbox ? this._getCheckbox(index) : null, definition: col, index: colIndex, item: item, rowIndex: index })));
     }
     _getLoadingColumns(index) {
-        return this._columns.map((col, colIndex) => (h("p-table-cell", { definition: col, variant: 'loading', checkbox: colIndex === 0 || col.hasCheckbox
+        return this._columns.map((col, colIndex) => (h("p-table-cell", { checkbox: colIndex === 0 || col.hasCheckbox
                 ? this._getCheckbox(index, 'loading')
-                : null, index: colIndex, rowIndex: index })));
+                : null, definition: col, index: colIndex, rowIndex: index, variant: 'loading' })));
     }
     _getCheckbox(rowIndex, variant = 'default') {
         if (!this._enableRowSelection ||
@@ -426,25 +404,25 @@ export class Table {
             return;
         }
         if (variant === 'loading') {
-            return (h("p-loader", { variant: 'ghost', class: 'h-6 w-6 rounded' }));
+            return (h("p-loader", { class: 'h-6 w-6 rounded', variant: 'ghost' }));
         }
         if (variant === 'header') {
-            return (h("p-checkbox", { class: cn({
+            return (h("p-checkbox", { checked: this._selectionContainsAll(), class: cn({
                     'opacity-0': this._rowSelectionLimit !== undefined,
-                }), checked: this._selectionContainsAll(), indeterminate: this._selectionIndeterminate(), disabled: this._rowSelectionLimit !== undefined, onCheckedChange: ev => this._selectAllChange(ev) }));
+                }), disabled: this._rowSelectionLimit !== undefined, indeterminate: this._selectionIndeterminate(), onCheckedChange: ev => this._selectAllChange(ev) }));
         }
         const item = this._items[rowIndex];
         const selectionContains = this._selectionContains(rowIndex);
-        return (h("p-checkbox", { class: 'flex-shrink-0', disabled: (this.canSelectKey && !item[this.canSelectKey]) ||
+        return (h("p-checkbox", { checked: selectionContains, class: 'flex-shrink-0', disabled: (this.canSelectKey && !item[this.canSelectKey]) ||
                 (this._rowSelectionLimit !== undefined &&
                     !selectionContains &&
-                    this.selectedRows.length === this._rowSelectionLimit), checked: selectionContains, onCheckedChange: ev => this._checkboxChange(ev, rowIndex) }));
+                    this.selectedRows.length === this._rowSelectionLimit), onCheckedChange: ev => this._checkboxChange(ev, rowIndex) }));
     }
     _getEmptyState() {
         if (this.query?.length || this.selectedFiltersAmount) {
-            return (h("p-empty-state", { class: 'my-16 self-center', illustration: 'search', header: this.emptyStateFilteredHeader(), content: this.emptyStateFilteredContent() }));
+            return (h("p-empty-state", { class: 'my-16 self-center', content: this.emptyStateFilteredContent(), header: this.emptyStateFilteredHeader(), illustration: 'search' }));
         }
-        return (h("p-empty-state", { class: 'my-16 self-center', illustration: 'table', header: this.emptyStateHeader(), content: this.emptyStateContent(), enableAction: this.enableEmptyStateAction, actionIcon: 'plus', actionText: this.emptyStateAction(), onAction: () => this.enableAction && this.action.emit() }));
+        return (h("p-empty-state", { actionIcon: 'plus', actionText: this.emptyStateAction(), class: 'my-16 self-center', content: this.emptyStateContent(), enableAction: this.enableEmptyStateAction, header: this.emptyStateHeader(), illustration: 'table', onAction: () => this.enableAction && this.action.emit() }));
     }
     _selectAllChange(ev, forceValue) {
         if (!this._enableRowSelection) {