@flusys/ng-shared 5.4.1 → 6.0.0-beta.1

package/fesm2022/flusys-ng-shared.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, PLATFORM_ID, Injectable, DOCUMENT, REQUEST, signal, computed, ElementRef, input, effect, Directive, TemplateRef, ViewContainerRef, output, Pipe, Injector, isDevMode, NgModule, resource, model, runInInjectionContext, untracked, forwardRef, contentChildren, Component, ViewEncapsulation, InjectionToken, DestroyRef, ApplicationRef, viewChild, afterNextRender } from '@angular/core';
+import { inject, PLATFORM_ID, Injectable, DOCUMENT, REQUEST, signal, computed, ElementRef, input, effect, Directive, TemplateRef, ViewContainerRef, output, Pipe, Injector, isDevMode, NgModule, resource, model, runInInjectionContext, untracked, forwardRef, contentChildren, Component, InjectionToken, DestroyRef, ViewEncapsulation, ApplicationRef, viewChild, afterNextRender } from '@angular/core';
 import * as i1 from '@angular/common';
 import { isPlatformServer, DOCUMENT as DOCUMENT$1, isPlatformBrowser, CommonModule, NgOptimizedImage, NgComponentOutlet, DatePipe } from '@angular/common';
 import { HttpClient, HttpContextToken, HttpHeaders, HttpParams } from '@angular/common/http';
@@ -8,67 +8,9 @@ import { of, catchError as catchError$1, throwError, firstValueFrom, map as map$
 import { map, tap, catchError } from 'rxjs/operators';
 import * as i2 from '@angular/forms';
 import { NgControl, FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import * as i3$1 from 'primeng/api';
-import { MessageService, ConfirmationService } from 'primeng/api';
+import * as i3 from '@flusys/ng-ui';
+import { MessageService, UiModule, ConfirmationService, UiIconComponent } from '@flusys/ng-ui';
 import { RouterOutlet, RouterLink, RouterLinkActive, Router } from '@angular/router';
-import { AutoCompleteModule } from 'primeng/autocomplete';
-import { AvatarModule } from 'primeng/avatar';
-import * as i3 from 'primeng/button';
-import { ButtonModule } from 'primeng/button';
-import * as i4 from 'primeng/card';
-import { CardModule } from 'primeng/card';
-import * as i5$1 from 'primeng/checkbox';
-import { CheckboxModule } from 'primeng/checkbox';
-import { ConfirmDialogModule } from 'primeng/confirmdialog';
-import * as i6$1 from 'primeng/datepicker';
-import { DatePickerModule } from 'primeng/datepicker';
-import * as i5$2 from 'primeng/dialog';
-import { DialogModule } from 'primeng/dialog';
-import { DividerModule } from 'primeng/divider';
-import { FileUploadModule } from 'primeng/fileupload';
-import * as i5 from 'primeng/iconfield';
-import { IconFieldModule } from 'primeng/iconfield';
-import { ImageModule } from 'primeng/image';
-import * as i6 from 'primeng/inputicon';
-import { InputIconModule } from 'primeng/inputicon';
-import * as i7 from 'primeng/inputnumber';
-import { InputNumberModule } from 'primeng/inputnumber';
-import * as i8 from 'primeng/inputtext';
-import { InputTextModule } from 'primeng/inputtext';
-import { ListboxModule } from 'primeng/listbox';
-import * as i9$1 from 'primeng/multiselect';
-import { MultiSelectModule } from 'primeng/multiselect';
-import { PaginatorModule } from 'primeng/paginator';
-import { PanelModule } from 'primeng/panel';
-import * as i10$1 from 'primeng/password';
-import { PasswordModule } from 'primeng/password';
-import { PopoverModule } from 'primeng/popover';
-import * as i2$1 from 'primeng/progressbar';
-import { ProgressBarModule } from 'primeng/progressbar';
-import { RadioButtonModule } from 'primeng/radiobutton';
-import { RippleModule } from 'primeng/ripple';
-import * as i11 from 'primeng/select';
-import { SelectModule } from 'primeng/select';
-import { SelectButtonModule } from 'primeng/selectbutton';
-import { SkeletonModule } from 'primeng/skeleton';
-import { SplitButtonModule } from 'primeng/splitbutton';
-import { StepsModule } from 'primeng/steps';
-import * as i8$1 from 'primeng/table';
-import { TableModule } from 'primeng/table';
-import { TabsModule } from 'primeng/tabs';
-import * as i9 from 'primeng/tag';
-import { TagModule } from 'primeng/tag';
-import * as i12 from 'primeng/textarea';
-import { TextareaModule } from 'primeng/textarea';
-import { ToastModule } from 'primeng/toast';
-import { ToggleButtonModule } from 'primeng/togglebutton';
-import * as i13 from 'primeng/toggleswitch';
-import { ToggleSwitchModule } from 'primeng/toggleswitch';
-import * as i10 from 'primeng/tooltip';
-import { TooltipModule } from 'primeng/tooltip';
-import { TreeTableModule } from 'primeng/treetable';
-import { ProgressSpinnerModule } from 'primeng/progressspinner';
-import { ColorPickerModule } from 'primeng/colorpicker';
 import { DomSanitizer } from '@angular/platform-browser';
 
 const SHARED_MESSAGES = {
@@ -85,6 +27,10 @@ const SHARED_MESSAGES = {
     'error.conflict': '{{entity}} with this {{field}} already exists',
     'error.db.foreign.key': "Invalid reference for '{{field}}'",
     'error.db.not.null': "Required field '{{field}}' cannot be null",
+    'error.db.invalid.input': "Invalid {{type}} value",
+    'error.db.value.too.long': "Value too long for '{{field}}'",
+    'error.db.check.constraint': '{{entity}} violates a validation rule',
+    'error.db.deadlock': 'The request could not be completed due to a conflict, please try again',
     'error.internal': 'Internal server error',
     'error.service.unavailable': 'Service temporarily unavailable',
     'error.unknown': 'Unknown error occurred',
@@ -231,99 +177,6 @@ const SHARED_MESSAGES = {
     'shared.view.details': 'View Details',
     'shared.yes': 'Yes',
     'shared.validation': 'Validation',
-    // cross-package shared keys (primeng.* — PrimeNG i18n provider)
-    'primeng.accept': 'Yes',
-    'primeng.add.rule': 'Add Rule',
-    'primeng.apply': 'Apply',
-    'primeng.aria.cancel.edit': 'Cancel Edit',
-    'primeng.aria.close': 'Close',
-    'primeng.aria.collapse.row': 'Row Collapsed',
-    'primeng.aria.edit.row': 'Edit Row',
-    'primeng.aria.expand.row': 'Row Expanded',
-    'primeng.aria.false.label': 'False',
-    'primeng.aria.filter.constraint': 'Filter Constraint',
-    'primeng.aria.filter.operator': 'Filter Operator',
-    'primeng.aria.first.page.label': 'First Page',
-    'primeng.aria.grid.view': 'Grid View',
-    'primeng.aria.hide.filter.menu': 'Hide Filter Menu',
-    'primeng.aria.jump.to.page.dropdown.label': 'Jump to Page Dropdown',
-    'primeng.aria.jump.to.page.input.label': 'Jump to Page Input',
-    'primeng.aria.last.page.label': 'Last Page',
-    'primeng.aria.list.view': 'List View',
-    'primeng.aria.move.all.to.source': 'Move All to Source',
-    'primeng.aria.move.all.to.target': 'Move All to Target',
-    'primeng.aria.move.bottom': 'Move Bottom',
-    'primeng.aria.move.down': 'Move Down',
-    'primeng.aria.move.to.source': 'Move to Source',
-    'primeng.aria.move.to.target': 'Move to Target',
-    'primeng.aria.move.top': 'Move Top',
-    'primeng.aria.move.up': 'Move Up',
-    'primeng.aria.navigation': 'Navigation',
-    'primeng.aria.next': 'Next',
-    'primeng.aria.next.page.label': 'Next Page',
-    'primeng.aria.null.label': 'Not Selected',
-    'primeng.aria.page.label': 'Page {page}',
-    'primeng.aria.prev.page.label': 'Previous Page',
-    'primeng.aria.previous': 'Previous',
-    'primeng.aria.rotate.left': 'Rotate Left',
-    'primeng.aria.rotate.right': 'Rotate Right',
-    'primeng.aria.rows.per.page.label': 'Rows per page',
-    'primeng.aria.save.edit': 'Save Edit',
-    'primeng.aria.scroll.top': 'Scroll Top',
-    'primeng.aria.select.all': 'All items selected',
-    'primeng.aria.select.row': 'Row Selected',
-    'primeng.aria.show.filter.menu': 'Show Filter Menu',
-    'primeng.aria.slide': 'Slide',
-    'primeng.aria.slide.number': '{slideNumber}',
-    'primeng.aria.star': '1 star',
-    'primeng.aria.stars': '{star} stars',
-    'primeng.aria.true.label': 'True',
-    'primeng.aria.unselect.all': 'All items unselected',
-    'primeng.aria.unselect.row': 'Row Unselected',
-    'primeng.aria.zoom.image': 'Zoom Image',
-    'primeng.aria.zoom.in': 'Zoom In',
-    'primeng.aria.zoom.out': 'Zoom Out',
-    'primeng.cancel': 'Cancel',
-    'primeng.choose': 'Choose',
-    'primeng.choose.date': 'Choose Date',
-    'primeng.clear': 'Clear',
-    'primeng.contains': 'Contains',
-    'primeng.date.after': 'Date is after',
-    'primeng.date.before': 'Date is before',
-    'primeng.date.is': 'Date is',
-    'primeng.date.is.not': 'Date is not',
-    'primeng.empty.filter.message': 'No results found',
-    'primeng.empty.message': 'No results found',
-    'primeng.empty.search.message': 'No results found',
-    'primeng.empty.selection.message': 'No selected item',
-    'primeng.ends.with': 'Ends with',
-    'primeng.equals': 'Equals',
-    'primeng.first.day.of.week': '0',
-    'primeng.gt': 'Greater than',
-    'primeng.gte': 'Greater than or equal to',
-    'primeng.lt': 'Less than',
-    'primeng.lte': 'Less than or equal to',
-    'primeng.match.all': 'Match All',
-    'primeng.match.any': 'Match Any',
-    'primeng.no.filter': 'No Filter',
-    'primeng.not.contains': 'Not contains',
-    'primeng.not.equals': 'Not equals',
-    'primeng.pending': 'Pending',
-    'primeng.reject': 'No',
-    'primeng.remove.rule': 'Remove Rule',
-    'primeng.selection.message': '{0} items selected',
-    'primeng.starts.with': 'Starts with',
-    'primeng.today': 'Today',
-    'primeng.upload': 'Upload',
-    'primeng.week.header': 'Wk',
-    'primeng.choose.year': 'Choose Year',
-    'primeng.choose.month': 'Choose Month',
-    'primeng.date.format': 'mm/dd/yy',
-    'primeng.weak': 'Weak',
-    'primeng.medium': 'Medium',
-    'primeng.strong': 'Strong',
-    'primeng.password.prompt': 'Enter a password',
-    'primeng.country.placeholder': 'Choose a country',
 };
 
 // ==================== AUTH MODULE ====================
@@ -521,18 +374,18 @@ function isFileTypeAllowed(file, allowedTypes) {
 }
 function getFileIconClass(contentType) {
     if (contentType.startsWith('image/'))
-        return 'pi pi-image';
+        return 'image';
     if (contentType.startsWith('video/'))
-        return 'pi pi-video';
+        return 'video';
     if (contentType.startsWith('audio/'))
-        return 'pi pi-volume-up';
+        return 'volume-up';
     if (contentType.includes('pdf'))
-        return 'pi pi-file-pdf';
+        return 'file-pdf';
     if (contentType.includes('word') || contentType.includes('document'))
-        return 'pi pi-file-word';
+        return 'file-word';
     if (contentType.includes('excel') || contentType.includes('spreadsheet'))
-        return 'pi pi-file-excel';
-    return 'pi pi-file';
+        return 'file-excel';
+    return 'file';
 }
 function formatFileSize(sizeInKb) {
     const kb = typeof sizeInKb === 'string' ? parseFloat(sizeInKb) : sizeInKb;
@@ -546,9 +399,8 @@ function formatFileSize(sizeInKb) {
 
 var IconTypeEnum;
 (function (IconTypeEnum) {
-    IconTypeEnum[IconTypeEnum["PRIMENG_ICON"] = 1] = "PRIMENG_ICON";
+    IconTypeEnum[IconTypeEnum["ICON_NAME"] = 1] = "ICON_NAME";
     IconTypeEnum[IconTypeEnum["IMAGE_FILE_LINK"] = 2] = "IMAGE_FILE_LINK";
-    IconTypeEnum[IconTypeEnum["DIRECT_TAG_SVG"] = 3] = "DIRECT_TAG_SVG";
 })(IconTypeEnum || (IconTypeEnum = {}));
 
 class PlatformService {
@@ -556,10 +408,10 @@ class PlatformService {
     get isServer() {
         return isPlatformServer(this.platformId);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PlatformService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PlatformService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PlatformService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PlatformService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PlatformService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PlatformService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -571,10 +423,10 @@ class CookieService {
     get() {
         return !this.platformService.isServer ? this.doc.cookie : this.request?.headers.get('cookie') ?? "";
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CookieService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CookieService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CookieService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CookieService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: CookieService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CookieService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -588,7 +440,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 class FileUrlService {
     http = inject(HttpClient);
     appConfig = inject(APP_CONFIG);
-    _cache = signal(new Map(), ...(ngDevMode ? [{ debugName: "_cache" }] : []));
+    _cache = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_cache" }] : /* istanbul ignore next */ []));
     cache = this._cache.asReadonly();
     /** Fetch file URLs from backend and update cache */
     fetchFileUrls(fileIds, forceRefresh = false) {
@@ -625,10 +478,10 @@ class FileUrlService {
             .map((id) => cache.get(id))
             .filter((f) => f !== undefined);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FileUrlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FileUrlService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FileUrlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FileUrlService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FileUrlService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FileUrlService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -698,9 +551,11 @@ function hasAllPermissions(permissionCodes, permissions) {
  * Provides signal-based storage and permission checking with wildcard support.
  */
 class PermissionValidatorService {
-    _permissions = signal([], ...(ngDevMode ? [{ debugName: "_permissions" }] : []));
+    _permissions = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_permissions" }] : /* istanbul ignore next */ []));
     permissions = this._permissions.asReadonly();
-    _isLoaded = signal(false, ...(ngDevMode ? [{ debugName: "_isLoaded" }] : []));
+    _isLoaded = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isLoaded" }] : /* istanbul ignore next */ []));
     isLoaded = this._isLoaded.asReadonly();
     /** Set permissions (replaces existing) */
     setPermissions(permissions) {
@@ -723,10 +578,10 @@ class PermissionValidatorService {
     isPermissionsLoaded() {
         return this._isLoaded();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PermissionValidatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PermissionValidatorService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PermissionValidatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PermissionValidatorService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PermissionValidatorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PermissionValidatorService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -764,10 +619,10 @@ class TranslateService {
             return value !== undefined ? String(value) : match;
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TranslateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TranslateService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TranslateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TranslateService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TranslateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TranslateService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -802,10 +657,10 @@ class FaviconService {
             link.href = `data:image/svg+xml,${encodeURIComponent(resolved)}`;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FaviconService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FaviconService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FaviconService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FaviconService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FaviconService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FaviconService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -813,7 +668,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 class EditModeElementChangerDirective {
     el = inject(ElementRef);
     ngControl = inject(NgControl, { optional: true });
-    isEditMode = input.required(...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
+    isEditMode = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isEditMode" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             const editMode = this.isEditMode();
@@ -839,23 +695,23 @@ class EditModeElementChangerDirective {
                 inputElement.classList.remove('edit-mode-element-css');
             }
         }
-        if (inputElement.tagName === 'P-SELECT') {
-            const dropdown = inputElement.querySelector('.p-select-dropdown');
-            const label = inputElement.querySelector('.p-select-label');
+        if (inputElement.tagName === 'F-SELECT') {
+            const trigger = inputElement.querySelector('[data-select-trigger]');
+            const label = inputElement.querySelector('[data-select-label]');
             if (!editMode) {
                 inputElement.classList.add('edit-mode-element-css', 'overflow-hidden');
-                if (dropdown)
-                    dropdown.style.display = 'none';
+                if (trigger)
+                    trigger.style.display = 'none';
                 label?.classList.add('edit-mode-element-css');
             }
             else {
                 inputElement.classList.remove('edit-mode-element-css', 'overflow-hidden');
-                if (dropdown)
-                    dropdown.style.display = 'flex';
+                if (trigger)
+                    trigger.style.display = '';
                 label?.classList.remove('edit-mode-element-css');
             }
         }
-        if (inputElement.tagName === 'P-CALENDAR') {
+        if (inputElement.tagName === 'F-DATEPICKER') {
             const firstChild = inputElement.firstElementChild;
             if (!editMode) {
                 firstChild?.children[0]?.classList.add('edit-mode-element-css', 'cursor-auto');
@@ -867,10 +723,10 @@ class EditModeElementChangerDirective {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: EditModeElementChangerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: EditModeElementChangerDirective, isStandalone: true, selector: "[appEditModeElementChanger]", inputs: { isEditMode: { classPropertyName: "isEditMode", publicName: "isEditMode", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditModeElementChangerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: EditModeElementChangerDirective, isStandalone: true, selector: "[appEditModeElementChanger]", inputs: { isEditMode: { classPropertyName: "isEditMode", publicName: "isEditMode", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: EditModeElementChangerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: EditModeElementChangerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appEditModeElementChanger]',
@@ -936,7 +792,8 @@ class HasPermissionDirective {
      * - string: Single permission code to check
      * - ILogicNode: Complex permission logic tree
      */
-    hasPermission = input(null, ...(ngDevMode ? [{ debugName: "hasPermission" }] : []));
+    hasPermission = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasPermission" }] : /* istanbul ignore next */ []));
     /**
      * View created state
      */
@@ -988,10 +845,10 @@ class HasPermissionDirective {
             this.viewCreated = false;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: HasPermissionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: HasPermissionDirective, isStandalone: true, selector: "[hasPermission]", inputs: { hasPermission: { classPropertyName: "hasPermission", publicName: "hasPermission", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: HasPermissionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: HasPermissionDirective, isStandalone: true, selector: "[hasPermission]", inputs: { hasPermission: { classPropertyName: "hasPermission", publicName: "hasPermission", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: HasPermissionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: HasPermissionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hasPermission]',
@@ -999,8 +856,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
         }], ctorParameters: () => [], propDecorators: { hasPermission: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasPermission", required: false }] }] } });
 
 class IsEmptyImageDirective {
-    src = input('', ...(ngDevMode ? [{ debugName: "src" }] : []));
-    hasError = signal(false, ...(ngDevMode ? [{ debugName: "hasError" }] : []));
+    src = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    hasError = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
     defaultImg = 'lib/assets/images/default/default-image.jpg';
     imageSrc = computed(() => {
         if (this.hasError()) {
@@ -1008,14 +867,15 @@ class IsEmptyImageDirective {
         }
         const srcValue = this.src();
         return srcValue ? srcValue : this.defaultImg;
-    }, ...(ngDevMode ? [{ debugName: "imageSrc" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "imageSrc" }] : /* istanbul ignore next */ []));
     onError() {
         this.hasError.set(true);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: IsEmptyImageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: IsEmptyImageDirective, isStandalone: true, selector: "img", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "error": "onError()" }, properties: { "src": "imageSrc()" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: IsEmptyImageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: IsEmptyImageDirective, isStandalone: true, selector: "img", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "error": "onError()" }, properties: { "src": "imageSrc()" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: IsEmptyImageDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: IsEmptyImageDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'img',
@@ -1027,8 +887,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
         }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }] } });
 
 class PreventDefaultDirective {
-    eventType = input('click', ...(ngDevMode ? [{ debugName: "eventType" }] : []));
-    preventKey = input(undefined, ...(ngDevMode ? [{ debugName: "preventKey" }] : []));
+    eventType = input('click', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "eventType" }] : /* istanbul ignore next */ []));
+    preventKey = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "preventKey" }] : /* istanbul ignore next */ []));
     action = output();
     onClick(event) {
         if (this.eventType() === 'click') {
@@ -1053,10 +915,10 @@ class PreventDefaultDirective {
         event.preventDefault();
         this.action.emit(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PreventDefaultDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: PreventDefaultDirective, isStandalone: true, selector: "[appPreventDefault]", inputs: { eventType: { classPropertyName: "eventType", publicName: "eventType", isSignal: true, isRequired: false, transformFunction: null }, preventKey: { classPropertyName: "preventKey", publicName: "preventKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeydown($event)", "keyup": "onKeyup($event)" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PreventDefaultDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: PreventDefaultDirective, isStandalone: true, selector: "[appPreventDefault]", inputs: { eventType: { classPropertyName: "eventType", publicName: "eventType", isSignal: true, isRequired: false, transformFunction: null }, preventKey: { classPropertyName: "preventKey", publicName: "preventKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeydown($event)", "keyup": "onKeyup($event)" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PreventDefaultDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: PreventDefaultDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appPreventDefault]',
@@ -1076,10 +938,10 @@ class TranslatePipe {
         const result = this.translateAdapter.translate(key, params ?? undefined);
         return fallback !== undefined && result === key ? fallback : result;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TranslatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.5", ngImport: i0, type: TranslatePipe, isStandalone: true, name: "translate", pure: false });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TranslatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: TranslatePipe, isStandalone: true, name: "translate", pure: false });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: TranslatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: TranslatePipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'translate',
@@ -1305,8 +1167,8 @@ function resolveTranslationModule(config) {
 }
 
 class AngularModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AngularModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.5", ngImport: i0, type: AngularModule, imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AngularModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.6", ngImport: i0, type: AngularModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             RouterOutlet,
@@ -1325,13 +1187,13 @@ class AngularModule {
             NgOptimizedImage,
             NgComponentOutlet,
             PreventDefaultDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AngularModule, providers: [DatePipe], imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AngularModule, providers: [DatePipe], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule, CommonModule,
             FormsModule,
             ReactiveFormsModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: AngularModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: AngularModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1362,137 +1224,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 }]
         }] });
 
-class PrimeModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PrimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.5", ngImport: i0, type: PrimeModule, exports: [AutoCompleteModule,
-            AvatarModule,
-            ButtonModule,
-            CardModule,
-            CheckboxModule,
-            ConfirmDialogModule,
-            DatePickerModule,
-            DialogModule,
-            DividerModule,
-            FileUploadModule,
-            IconFieldModule,
-            ImageModule,
-            InputIconModule,
-            InputNumberModule,
-            InputTextModule,
-            ListboxModule,
-            MultiSelectModule,
-            PaginatorModule,
-            PanelModule,
-            PasswordModule,
-            PopoverModule,
-            ProgressBarModule,
-            RadioButtonModule,
-            RippleModule,
-            SelectButtonModule,
-            SelectModule,
-            SkeletonModule,
-            SplitButtonModule,
-            StepsModule,
-            TableModule,
-            TabsModule,
-            TagModule,
-            TextareaModule,
-            ToastModule,
-            ToggleButtonModule,
-            ToggleSwitchModule,
-            TooltipModule,
-            TreeTableModule,
-            ProgressSpinnerModule,
-            ColorPickerModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PrimeModule, imports: [AutoCompleteModule,
-            AvatarModule,
-            ButtonModule,
-            CardModule,
-            CheckboxModule,
-            ConfirmDialogModule,
-            DatePickerModule,
-            DialogModule,
-            DividerModule,
-            FileUploadModule,
-            IconFieldModule,
-            ImageModule,
-            InputIconModule,
-            InputNumberModule,
-            InputTextModule,
-            ListboxModule,
-            MultiSelectModule,
-            PaginatorModule,
-            PanelModule,
-            PasswordModule,
-            PopoverModule,
-            ProgressBarModule,
-            RadioButtonModule,
-            RippleModule,
-            SelectButtonModule,
-            SelectModule,
-            SkeletonModule,
-            SplitButtonModule,
-            StepsModule,
-            TableModule,
-            TabsModule,
-            TagModule,
-            TextareaModule,
-            ToastModule,
-            ToggleButtonModule,
-            ToggleSwitchModule,
-            TooltipModule,
-            TreeTableModule,
-            ProgressSpinnerModule,
-            ColorPickerModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PrimeModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    exports: [
-                        AutoCompleteModule,
-                        AvatarModule,
-                        ButtonModule,
-                        CardModule,
-                        CheckboxModule,
-                        ConfirmDialogModule,
-                        DatePickerModule,
-                        DialogModule,
-                        DividerModule,
-                        FileUploadModule,
-                        IconFieldModule,
-                        ImageModule,
-                        InputIconModule,
-                        InputNumberModule,
-                        InputTextModule,
-                        ListboxModule,
-                        MultiSelectModule,
-                        PaginatorModule,
-                        PanelModule,
-                        PasswordModule,
-                        PopoverModule,
-                        ProgressBarModule,
-                        RadioButtonModule,
-                        RippleModule,
-                        SelectButtonModule,
-                        SelectModule,
-                        SkeletonModule,
-                        SplitButtonModule,
-                        StepsModule,
-                        TableModule,
-                        TabsModule,
-                        TagModule,
-                        TextareaModule,
-                        ToastModule,
-                        ToggleButtonModule,
-                        ToggleSwitchModule,
-                        TooltipModule,
-                        TreeTableModule,
-                        ProgressSpinnerModule,
-                        ColorPickerModule,
-                    ],
-                }]
-        }] });
-
 // ── Separate default filter into a named constant so it's sharable/testable ──
 const DEFAULT_FILTER = {
     pagination: { currentPage: 0, pageSize: 10 },
@@ -1507,29 +1238,36 @@ class ApiResourceService {
     baseUrl;
     moduleApiName;
     // ── Public writable signals ───────────────────────────────────────────────
-    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
-    filterData = signal({ ...DEFAULT_FILTER }, ...(ngDevMode ? [{ debugName: "filterData" }] : []));
+    searchTerm = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
+    filterData = signal({ ...DEFAULT_FILTER }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterData" }] : /* istanbul ignore next */ []));
     // ── Private activation gate: avoids an initial fetch before fetchList() ──
-    _active = signal(false, ...(ngDevMode ? [{ debugName: "_active" }] : []));
+    _active = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_active" }] : /* istanbul ignore next */ []));
     // ── Resource (reactive list fetching with abort support) ──────────────────
     listResource;
     // ── Derived/computed signals (pure reads, no side-effects) ────────────────
-    isLoading = computed(() => this.listResource.isLoading(), ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    isLoading = computed(() => this.listResource.isLoading(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
     data = computed(() => {
         if (this.listResource.error())
             return [];
         return this.listResource.value()?.data ?? [];
-    }, ...(ngDevMode ? [{ debugName: "data" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
     total = computed(() => {
         if (this.listResource.error())
             return 0;
         return this.listResource.value()?.meta?.total ?? 0;
-    }, ...(ngDevMode ? [{ debugName: "total" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
     pageInfo = computed(() => {
         if (this.listResource.error())
             return undefined;
         return this.listResource.value()?.meta;
-    }, ...(ngDevMode ? [{ debugName: "pageInfo" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageInfo" }] : /* istanbul ignore next */ []));
     hasMore = computed(() => {
         if (this.listResource.error())
             return false;
@@ -1537,9 +1275,12 @@ class ApiResourceService {
         if (!meta)
             return false;
         return meta.hasMore ?? (meta.page + 1) * meta.pageSize < meta.total;
-    }, ...(ngDevMode ? [{ debugName: "hasMore" }] : []));
-    error = computed(() => this.listResource.error(), ...(ngDevMode ? [{ debugName: "error" }] : []));
-    status = computed(() => this.listResource.status(), ...(ngDevMode ? [{ debugName: "status" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasMore" }] : /* istanbul ignore next */ []));
+    error = computed(() => this.listResource.error(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    status = computed(() => this.listResource.status(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
     constructor(moduleApiName, serviceName) {
         this.moduleApiName = moduleApiName;
         // ── Resolve base URL once at construction, not per-request ───────────────
@@ -1549,7 +1290,7 @@ class ApiResourceService {
         this.baseUrl = moduleApiName
             ? `${serviceBaseUrl}/${moduleApiName}`
             : serviceBaseUrl;
-        this.listResource = resource({ ...(ngDevMode ? { debugName: "listResource" } : {}), params: () => {
+        this.listResource = resource({ ...(ngDevMode ? { debugName: "listResource" } : /* istanbul ignore next */ {}), params: () => {
                 // Short-circuit: skip the loader entirely when not yet activated
                 if (!this._active())
                     return undefined;
@@ -1661,8 +1402,10 @@ class ApiResourceService {
 
 class BaseFormControl {
     injector = inject(Injector);
-    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
+    disabled = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    touched = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
     // ── CVA callbacks ─────────────────────────────────────────────────────────
     // Initialised to no-ops so subclasses never need null-guards
     onChange = () => { };
@@ -1724,10 +1467,10 @@ class BaseFormControl {
             this.onTouched();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BaseFormControl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: BaseFormControl, isStandalone: true, inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", touched: "touchedChange" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BaseFormControl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: BaseFormControl, isStandalone: true, inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", touched: "touchedChange" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BaseFormControl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BaseFormControl, decorators: [{
             type: Directive
         }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }] } });
 /**
@@ -1750,177 +1493,13 @@ function provideValueAccessor(component) {
     };
 }
 
-class BaseListTemplateDirective {
-    key = input.required({ ...(ngDevMode ? { debugName: "key" } : {}), alias: 'baseListTemplate' });
-    templateRef = inject((TemplateRef));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BaseListTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: BaseListTemplateDirective, isStandalone: true, selector: "ng-template[baseListTemplate]", inputs: { key: { classPropertyName: "key", publicName: "baseListTemplate", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BaseListTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: 'ng-template[baseListTemplate]' }]
-        }], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseListTemplate", required: true }] }] } });
-
-class BaseListComponent {
-    translateAdapter = inject(TranslateService, { optional: true });
-    router = inject(Router, { optional: true });
-    messageService = inject(MessageService, { optional: true });
-    confirmationService = inject(ConfirmationService, { optional: true });
-    columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : []));
-    actions = input([], ...(ngDevMode ? [{ debugName: "actions" }] : []));
-    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
-    showCreateButton = input(true, ...(ngDevMode ? [{ debugName: "showCreateButton" }] : []));
-    searchable = input(false, ...(ngDevMode ? [{ debugName: "searchable" }] : []));
-    pageSize = input(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
-    emptyMessage = input('', ...(ngDevMode ? [{ debugName: "emptyMessage" }] : []));
-    createButtonLabel = input('', ...(ngDevMode ? [{ debugName: "createButtonLabel" }] : []));
-    createButtonIcon = input('pi pi-plus', ...(ngDevMode ? [{ debugName: "createButtonIcon" }] : []));
-    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
-    total = input(0, ...(ngDevMode ? [{ debugName: "total" }] : []));
-    isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
-    service = input(null, ...(ngDevMode ? [{ debugName: "service" }] : []));
-    filter = input({}, ...(ngDevMode ? [{ debugName: "filter" }] : []));
-    createRoute = input(null, ...(ngDevMode ? [{ debugName: "createRoute" }] : []));
-    editRoute = input(null, ...(ngDevMode ? [{ debugName: "editRoute" }] : []));
-    deleteConfirmField = input(null, ...(ngDevMode ? [{ debugName: "deleteConfirmField" }] : []));
-    idField = input('id', ...(ngDevMode ? [{ debugName: "idField" }] : []));
-    canEdit = input(null, ...(ngDevMode ? [{ debugName: "canEdit" }] : []));
-    canDelete = input(null, ...(ngDevMode ? [{ debugName: "canDelete" }] : []));
-    onCreate = output();
-    onLazyLoad = output();
-    onSearch = output();
-    columnTemplates = contentChildren(BaseListTemplateDirective, ...(ngDevMode ? [{ debugName: "columnTemplates" }] : []));
-    _first = signal(0, ...(ngDevMode ? [{ debugName: "_first" }] : []));
-    _searchTerm = signal('', ...(ngDevMode ? [{ debugName: "_searchTerm" }] : []));
-    first = this._first.asReadonly();
-    searchTerm = this._searchTerm.asReadonly();
-    effectiveData = computed(() => this.service()?.data() ?? this.data(), ...(ngDevMode ? [{ debugName: "effectiveData" }] : []));
-    effectiveTotal = computed(() => this.service()?.total() ?? this.total(), ...(ngDevMode ? [{ debugName: "effectiveTotal" }] : []));
-    effectiveIsLoading = computed(() => this.service()?.isLoading() ?? this.isLoading(), ...(ngDevMode ? [{ debugName: "effectiveIsLoading" }] : []));
-    effectiveActions = computed(() => {
-        const editRoute = this.editRoute();
-        const deleteField = this.deleteConfirmField();
-        const editAction = editRoute
-            ? [{ icon: 'pi pi-pencil', tooltip: 'shared.edit', severity: 'info',
-                    show: this.canEdit() ?? undefined, handler: (item) => this.handleEditItem(item) }]
-            : [];
-        const deleteAction = deleteField
-            ? [{ icon: 'pi pi-trash', tooltip: 'shared.delete', severity: 'danger',
-                    show: this.canDelete() ?? undefined, handler: (item) => this.handleDeleteItem(item) }]
-            : [];
-        return [...editAction, ...this.actions(), ...deleteAction];
-    }, ...(ngDevMode ? [{ debugName: "effectiveActions" }] : []));
-    visibleColumns = computed(() => this.columns().filter((c) => !c.hidden), ...(ngDevMode ? [{ debugName: "visibleColumns" }] : []));
-    columnCount = computed(() => this.visibleColumns().length + (this.effectiveActions().length > 0 ? 1 : 0), ...(ngDevMode ? [{ debugName: "columnCount" }] : []));
-    resolvedEmptyMessage = computed(() => this.emptyMessage() || this.t('shared.no.data'), ...(ngDevMode ? [{ debugName: "resolvedEmptyMessage" }] : []));
-    resolvedCreateLabel = computed(() => this.createButtonLabel() || this.t('shared.create'), ...(ngDevMode ? [{ debugName: "resolvedCreateLabel" }] : []));
-    handleLazyLoad(event) {
-        const first = event.first ?? 0;
-        const rows = event.rows ?? this.pageSize();
-        this._first.set(first);
-        const service = this.service();
-        if (service) {
-            service.fetchList(this.searchTerm(), {
-                pagination: { currentPage: Math.floor(first / rows), pageSize: rows },
-                filter: this.filter(),
-            });
-        }
-        this.onLazyLoad.emit({ first, rows });
-    }
-    onSearchChange(value) {
-        this._first.set(0);
-        this._searchTerm.set(value);
-        const service = this.service();
-        if (service) {
-            service.fetchList(value, {
-                pagination: { currentPage: 0, pageSize: this.pageSize() },
-                filter: this.filter(),
-            });
-        }
-        this.onSearch.emit(value);
-    }
-    handleCreate() {
-        const route = this.createRoute();
-        if (route && this.router)
-            this.router.navigate([route]);
-        this.onCreate.emit();
-    }
-    handleEditItem(item) {
-        const route = this.editRoute();
-        const id = this.getFieldValueAsString(item, this.idField());
-        if (route && id && this.router)
-            this.router.navigate([route, id]);
-    }
-    handleDeleteItem(item) {
-        const nameField = this.deleteConfirmField();
-        const name = this.getFieldValueAsString(item, nameField);
-        const id = this.getFieldValueAsString(item, this.idField());
-        this.confirmationService?.confirm({
-            message: this.t('shared.confirm.delete.item', { name }),
-            header: this.t('shared.confirm.delete'),
-            icon: 'pi pi-exclamation-triangle',
-            acceptButtonStyleClass: 'p-button-danger',
-            accept: async () => {
-                try {
-                    const response = await this.service()?.delete({ id, type: 'delete' });
-                    this.messageService?.add({
-                        severity: 'success',
-                        summary: this.t('shared.success'),
-                        detail: response?.messageKey
-                            ? this.t(response.messageKey, response.messageVariables)
-                            : (response?.message ?? ''),
-                    });
-                    this.service()?.reload();
-                }
-                catch {
-                    // handled by global interceptor
-                }
-            },
-        });
-    }
-    getFieldValue(item, field) {
-        return field
-            .split('.')
-            .reduce((obj, key) => (obj != null ? obj[key] : null), item);
-    }
-    getFieldValueAsString(item, field) {
-        return String(this.getFieldValue(item, field) ?? '');
-    }
-    getTagConfig(col, value) {
-        return col.tagMap?.[String(value)] ?? null;
-    }
-    getColumnTemplate(field) {
-        return this.columnTemplates().find((t) => t.key() === field)?.templateRef ?? null;
-    }
-    truncateText(value, limit) {
-        const str = String(value ?? '');
-        return limit && str.length > limit ? `${str.slice(0, limit)}…` : str;
-    }
-    getCellClass(col) {
-        switch (col.align) {
-            case 'center': return 'text-center';
-            case 'right': return 'text-right';
-            default: return '';
-        }
-    }
-    t(key, vars) {
-        return this.translateAdapter?.translate(key, vars) ?? key;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BaseListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: BaseListComponent, isStandalone: true, selector: "lib-base-list", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showCreateButton: { classPropertyName: "showCreateButton", publicName: "showCreateButton", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, createButtonLabel: { classPropertyName: "createButtonLabel", publicName: "createButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, createButtonIcon: { classPropertyName: "createButtonIcon", publicName: "createButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, createRoute: { classPropertyName: "createRoute", publicName: "createRoute", isSignal: true, isRequired: false, transformFunction: null }, editRoute: { classPropertyName: "editRoute", publicName: "editRoute", isSignal: true, isRequired: false, transformFunction: null }, deleteConfirmField: { classPropertyName: "deleteConfirmField", publicName: "deleteConfirmField", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: false, transformFunction: null }, canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null }, canDelete: { classPropertyName: "canDelete", publicName: "canDelete", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCreate: "onCreate", onLazyLoad: "onLazyLoad", onSearch: "onSearch" }, queries: [{ propertyName: "columnTemplates", predicate: BaseListTemplateDirective, isSignal: true }], ngImport: i0, template: "<p-card>\n  <ng-template #header>\n    @if (title() || searchable() || showCreateButton()) {\n      <div class=\"flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 p-4\">\n        @if (title()) {\n          <h2 class=\"text-xl font-semibold m-0\">{{ title() }}</h2>\n        }\n        <div class=\"flex items-center gap-2\" [class.ml-auto]=\"!!title()\">\n          @if (searchable()) {\n            <p-iconfield>\n              <p-inputicon class=\"pi pi-search\" />\n              <input\n                pInputText\n                type=\"text\"\n                [ngModel]=\"searchTerm()\"\n                (ngModelChange)=\"onSearchChange($event)\"\n                [placeholder]=\"t('shared.search')\"\n              />\n            </p-iconfield>\n          }\n          @if (showCreateButton()) {\n            <p-button\n              [icon]=\"createButtonIcon()\"\n              [label]=\"resolvedCreateLabel()\"\n              (onClick)=\"handleCreate()\"\n            />\n          }\n        </div>\n      </div>\n    }\n  </ng-template>\n\n  <div class=\"overflow-x-auto\">\n    <p-table\n      [value]=\"effectiveData()\"\n      [loading]=\"effectiveIsLoading()\"\n      [lazy]=\"true\"\n      [scrollable]=\"true\"\n      [paginator]=\"effectiveTotal() > pageSize()\"\n      [rows]=\"pageSize()\"\n      [totalRecords]=\"effectiveTotal()\"\n      [first]=\"first()\"\n      (onLazyLoad)=\"handleLazyLoad($event)\"\n      [showCurrentPageReport]=\"true\"\n      [currentPageReportTemplate]=\"t('shared.pagination.report')\"\n      class=\"p-datatable-striped\"\n    >\n      <ng-template #header>\n        <tr>\n          @for (col of visibleColumns(); track col.field) {\n            <th [style.width]=\"col.width\" [style.min-width]=\"col.minWidth\" [class]=\"getCellClass(col)\">\n              {{ col.header }}\n            </th>\n          }\n          @if (effectiveActions().length > 0) {\n            <th style=\"width: 120px; text-align: center;\">{{ t('shared.actions') }}</th>\n          }\n        </tr>\n      </ng-template>\n\n      <ng-template #body let-item>\n        <tr>\n          @for (col of visibleColumns(); track col.field) {\n            <td [class]=\"getCellClass(col)\">\n              @switch (col.type ?? 'text') {\n                @case ('tag') {\n                  @if (getTagConfig(col, getFieldValue(item, col.field)); as tagCfg) {\n                    <p-tag [severity]=\"tagCfg.severity\" [value]=\"tagCfg.label ?? getFieldValueAsString(item, col.field)\" />\n                  } @else {\n                    {{ getFieldValueAsString(item, col.field) }}\n                  }\n                }\n                @case ('boolean') {\n                  <p-tag\n                    [severity]=\"getFieldValue(item, col.field) ? 'success' : 'danger'\"\n                    [value]=\"getFieldValue(item, col.field) ? t('shared.yes') : t('shared.no')\"\n                  />\n                }\n                @case ('date') {\n                  {{ getFieldValueAsString(item, col.field) | date: (col.dateFormat ?? 'dd/MM/yyyy') }}\n                }\n                @case ('number') {\n                  {{ getFieldValueAsString(item, col.field) | number }}\n                }\n                @case ('custom') {\n                  <ng-container\n                    *ngTemplateOutlet=\"getColumnTemplate(col.field); context: { $implicit: item, field: col.field }\"\n                  />\n                }\n                @default {\n                  {{ truncateText(getFieldValue(item, col.field), col.truncate) }}\n                }\n              }\n            </td>\n          }\n          @if (effectiveActions().length > 0) {\n            <td>\n              <div class=\"flex items-center justify-center gap-2\">\n                @for (action of effectiveActions(); track $index) {\n                  @if (!action.show || action.show(item)) {\n                    <p-button\n                      [icon]=\"action.icon\"\n                      [severity]=\"action.severity\"\n                      [pTooltip]=\"action.tooltip ? t(action.tooltip) : ''\"\n                      [disabled]=\"action.disabled ? action.disabled(item) : false\"\n                      (onClick)=\"action.handler(item)\"\n                      [rounded]=\"true\"\n                      [text]=\"true\"\n                    />\n                  }\n                }\n              </div>\n            </td>\n          }\n        </tr>\n      </ng-template>\n\n      <ng-template #emptymessage>\n        <tr>\n          <td [attr.colspan]=\"columnCount()\">\n            <div class=\"flex flex-col items-center justify-center py-12 text-surface-400\">\n              <i class=\"pi pi-inbox text-5xl mb-3\"></i>\n              <span>{{ resolvedEmptyMessage() }}</span>\n            </div>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n  </div>\n</p-card>\n", dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i4.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: i5.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i6.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i8.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i8$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "component", type: i9.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "directive", type: i10.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "showOnEllipsis", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BaseListComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-base-list', imports: [AngularModule, PrimeModule], template: "<p-card>\n  <ng-template #header>\n    @if (title() || searchable() || showCreateButton()) {\n      <div class=\"flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 p-4\">\n        @if (title()) {\n          <h2 class=\"text-xl font-semibold m-0\">{{ title() }}</h2>\n        }\n        <div class=\"flex items-center gap-2\" [class.ml-auto]=\"!!title()\">\n          @if (searchable()) {\n            <p-iconfield>\n              <p-inputicon class=\"pi pi-search\" />\n              <input\n                pInputText\n                type=\"text\"\n                [ngModel]=\"searchTerm()\"\n                (ngModelChange)=\"onSearchChange($event)\"\n                [placeholder]=\"t('shared.search')\"\n              />\n            </p-iconfield>\n          }\n          @if (showCreateButton()) {\n            <p-button\n              [icon]=\"createButtonIcon()\"\n              [label]=\"resolvedCreateLabel()\"\n              (onClick)=\"handleCreate()\"\n            />\n          }\n        </div>\n      </div>\n    }\n  </ng-template>\n\n  <div class=\"overflow-x-auto\">\n    <p-table\n      [value]=\"effectiveData()\"\n      [loading]=\"effectiveIsLoading()\"\n      [lazy]=\"true\"\n      [scrollable]=\"true\"\n      [paginator]=\"effectiveTotal() > pageSize()\"\n      [rows]=\"pageSize()\"\n      [totalRecords]=\"effectiveTotal()\"\n      [first]=\"first()\"\n      (onLazyLoad)=\"handleLazyLoad($event)\"\n      [showCurrentPageReport]=\"true\"\n      [currentPageReportTemplate]=\"t('shared.pagination.report')\"\n      class=\"p-datatable-striped\"\n    >\n      <ng-template #header>\n        <tr>\n          @for (col of visibleColumns(); track col.field) {\n            <th [style.width]=\"col.width\" [style.min-width]=\"col.minWidth\" [class]=\"getCellClass(col)\">\n              {{ col.header }}\n            </th>\n          }\n          @if (effectiveActions().length > 0) {\n            <th style=\"width: 120px; text-align: center;\">{{ t('shared.actions') }}</th>\n          }\n        </tr>\n      </ng-template>\n\n      <ng-template #body let-item>\n        <tr>\n          @for (col of visibleColumns(); track col.field) {\n            <td [class]=\"getCellClass(col)\">\n              @switch (col.type ?? 'text') {\n                @case ('tag') {\n                  @if (getTagConfig(col, getFieldValue(item, col.field)); as tagCfg) {\n                    <p-tag [severity]=\"tagCfg.severity\" [value]=\"tagCfg.label ?? getFieldValueAsString(item, col.field)\" />\n                  } @else {\n                    {{ getFieldValueAsString(item, col.field) }}\n                  }\n                }\n                @case ('boolean') {\n                  <p-tag\n                    [severity]=\"getFieldValue(item, col.field) ? 'success' : 'danger'\"\n                    [value]=\"getFieldValue(item, col.field) ? t('shared.yes') : t('shared.no')\"\n                  />\n                }\n                @case ('date') {\n                  {{ getFieldValueAsString(item, col.field) | date: (col.dateFormat ?? 'dd/MM/yyyy') }}\n                }\n                @case ('number') {\n                  {{ getFieldValueAsString(item, col.field) | number }}\n                }\n                @case ('custom') {\n                  <ng-container\n                    *ngTemplateOutlet=\"getColumnTemplate(col.field); context: { $implicit: item, field: col.field }\"\n                  />\n                }\n                @default {\n                  {{ truncateText(getFieldValue(item, col.field), col.truncate) }}\n                }\n              }\n            </td>\n          }\n          @if (effectiveActions().length > 0) {\n            <td>\n              <div class=\"flex items-center justify-center gap-2\">\n                @for (action of effectiveActions(); track $index) {\n                  @if (!action.show || action.show(item)) {\n                    <p-button\n                      [icon]=\"action.icon\"\n                      [severity]=\"action.severity\"\n                      [pTooltip]=\"action.tooltip ? t(action.tooltip) : ''\"\n                      [disabled]=\"action.disabled ? action.disabled(item) : false\"\n                      (onClick)=\"action.handler(item)\"\n                      [rounded]=\"true\"\n                      [text]=\"true\"\n                    />\n                  }\n                }\n              </div>\n            </td>\n          }\n        </tr>\n      </ng-template>\n\n      <ng-template #emptymessage>\n        <tr>\n          <td [attr.colspan]=\"columnCount()\">\n            <div class=\"flex flex-col items-center justify-center py-12 text-surface-400\">\n              <i class=\"pi pi-inbox text-5xl mb-3\"></i>\n              <span>{{ resolvedEmptyMessage() }}</span>\n            </div>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n  </div>\n</p-card>\n" }]
-        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], showCreateButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCreateButton", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], createButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "createButtonLabel", required: false }] }], createButtonIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "createButtonIcon", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], service: [{ type: i0.Input, args: [{ isSignal: true, alias: "service", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], createRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "createRoute", required: false }] }], editRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "editRoute", required: false }] }], deleteConfirmField: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteConfirmField", required: false }] }], idField: [{ type: i0.Input, args: [{ isSignal: true, alias: "idField", required: false }] }], canEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "canEdit", required: false }] }], canDelete: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDelete", required: false }] }], onCreate: [{ type: i0.Output, args: ["onCreate"] }], onLazyLoad: [{ type: i0.Output, args: ["onLazyLoad"] }], onSearch: [{ type: i0.Output, args: ["onSearch"] }], columnTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => BaseListTemplateDirective), { isSignal: true }] }] } });
-
 class BaseFormTemplateDirective {
-    key = input.required({ ...(ngDevMode ? { debugName: "key" } : {}), alias: 'baseFormTemplate' });
+    key = input.required({ ...(ngDevMode ? { debugName: "key" } : /* istanbul ignore next */ {}), alias: 'baseFormTemplate' });
     templateRef = inject((TemplateRef));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BaseFormTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: BaseFormTemplateDirective, isStandalone: true, selector: "ng-template[baseFormTemplate]", inputs: { key: { classPropertyName: "key", publicName: "baseFormTemplate", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BaseFormTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: BaseFormTemplateDirective, isStandalone: true, selector: "ng-template[baseFormTemplate]", inputs: { key: { classPropertyName: "key", publicName: "baseFormTemplate", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BaseFormTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BaseFormTemplateDirective, decorators: [{
             type: Directive,
             args: [{ selector: 'ng-template[baseFormTemplate]' }]
         }], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseFormTemplate", required: true }] }] } });
@@ -1929,47 +1508,75 @@ class BaseFormComponent {
     translateAdapter = inject(TranslateService, { optional: true });
     router = inject(Router, { optional: true });
     messageService = inject(MessageService, { optional: true });
-    fields = input.required(...(ngDevMode ? [{ debugName: "fields" }] : []));
-    title = input('', ...(ngDevMode ? [{ debugName: "title" }] : []));
-    createTitle = input('', ...(ngDevMode ? [{ debugName: "createTitle" }] : []));
-    editTitle = input('', ...(ngDevMode ? [{ debugName: "editTitle" }] : []));
-    columns = input(2, ...(ngDevMode ? [{ debugName: "columns" }] : []));
-    submitLabel = input('', ...(ngDevMode ? [{ debugName: "submitLabel" }] : []));
-    cancelLabel = input('', ...(ngDevMode ? [{ debugName: "cancelLabel" }] : []));
-    isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
-    isEditMode = input(false, ...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
-    initialValue = input({}, ...(ngDevMode ? [{ debugName: "initialValue" }] : []));
-    service = input(null, ...(ngDevMode ? [{ debugName: "service" }] : []));
-    editId = input(null, ...(ngDevMode ? [{ debugName: "editId" }] : []));
-    cancelRoute = input(null, ...(ngDevMode ? [{ debugName: "cancelRoute" }] : []));
-    navigateOnSuccess = input(null, ...(ngDevMode ? [{ debugName: "navigateOnSuccess" }] : []));
-    mapToRequest = input(null, ...(ngDevMode ? [{ debugName: "mapToRequest" }] : []));
-    mapFromEntity = input(null, ...(ngDevMode ? [{ debugName: "mapFromEntity" }] : []));
+    fields = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
+    title = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    createTitle = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "createTitle" }] : /* istanbul ignore next */ []));
+    editTitle = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editTitle" }] : /* istanbul ignore next */ []));
+    columns = input(2, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    submitLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "submitLabel" }] : /* istanbul ignore next */ []));
+    cancelLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
+    isLoading = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    isEditMode = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isEditMode" }] : /* istanbul ignore next */ []));
+    initialValue = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "initialValue" }] : /* istanbul ignore next */ []));
+    service = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "service" }] : /* istanbul ignore next */ []));
+    editId = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editId" }] : /* istanbul ignore next */ []));
+    cancelRoute = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cancelRoute" }] : /* istanbul ignore next */ []));
+    navigateOnSuccess = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navigateOnSuccess" }] : /* istanbul ignore next */ []));
+    mapToRequest = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mapToRequest" }] : /* istanbul ignore next */ []));
+    mapFromEntity = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mapFromEntity" }] : /* istanbul ignore next */ []));
     onSubmit = output();
     onCancel = output();
     onValueChange = output();
-    fieldTemplates = contentChildren(BaseFormTemplateDirective, ...(ngDevMode ? [{ debugName: "fieldTemplates" }] : []));
-    _formData = signal({}, ...(ngDevMode ? [{ debugName: "_formData" }] : []));
-    _submitted = signal(false, ...(ngDevMode ? [{ debugName: "_submitted" }] : []));
-    _isLoadingInternal = signal(false, ...(ngDevMode ? [{ debugName: "_isLoadingInternal" }] : []));
-    _touchedFields = signal(new Set(), ...(ngDevMode ? [{ debugName: "_touchedFields" }] : []));
+    fieldTemplates = contentChildren(BaseFormTemplateDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fieldTemplates" }] : /* istanbul ignore next */ []));
+    _formData = signal({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formData" }] : /* istanbul ignore next */ []));
+    _submitted = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_submitted" }] : /* istanbul ignore next */ []));
+    _isLoadingInternal = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isLoadingInternal" }] : /* istanbul ignore next */ []));
+    _touchedFields = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_touchedFields" }] : /* istanbul ignore next */ []));
+    _visiblePasswordFields = signal(new Set(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_visiblePasswordFields" }] : /* istanbul ignore next */ []));
     formData = this._formData.asReadonly();
     submitted = this._submitted.asReadonly();
-    effectiveIsEditMode = computed(() => this.isEditMode() || !!this.editId(), ...(ngDevMode ? [{ debugName: "effectiveIsEditMode" }] : []));
-    effectiveIsLoading = computed(() => this.isLoading() || this._isLoadingInternal(), ...(ngDevMode ? [{ debugName: "effectiveIsLoading" }] : []));
-    isFormValid = computed(() => this.checkValidity(), ...(ngDevMode ? [{ debugName: "isFormValid" }] : []));
+    effectiveIsEditMode = computed(() => this.isEditMode() || !!this.editId(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveIsEditMode" }] : /* istanbul ignore next */ []));
+    effectiveIsLoading = computed(() => this.isLoading() || this._isLoadingInternal(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveIsLoading" }] : /* istanbul ignore next */ []));
+    isFormValid = computed(() => this.checkValidity(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFormValid" }] : /* istanbul ignore next */ []));
     resolvedTitle = computed(() => {
         if (this.effectiveIsEditMode())
             return this.editTitle() || this.title();
         return this.createTitle() || this.title();
-    }, ...(ngDevMode ? [{ debugName: "resolvedTitle" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedTitle" }] : /* istanbul ignore next */ []));
     gridClass = computed(() => {
         switch (this.columns()) {
             case 1: return 'grid-cols-1';
             case 3: return 'grid-cols-1 md:grid-cols-3';
             default: return 'grid-cols-1 md:grid-cols-2';
         }
-    }, ...(ngDevMode ? [{ debugName: "gridClass" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "gridClass" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             const fields = this.fields();
@@ -2016,6 +1623,19 @@ class BaseFormComponent {
     markFieldTouched(key) {
         this._touchedFields.update((set) => new Set([...set, key]));
     }
+    isPasswordVisible(key) {
+        return this._visiblePasswordFields().has(key);
+    }
+    togglePasswordVisibility(key) {
+        this._visiblePasswordFields.update((set) => {
+            const next = new Set(set);
+            if (next.has(key))
+                next.delete(key);
+            else
+                next.add(key);
+            return next;
+        });
+    }
     isFieldInvalid(field) {
         const isActive = this._submitted() || this._touchedFields().has(field.key);
         if (!isActive || !field.required)
@@ -2107,35 +1727,208 @@ class BaseFormComponent {
                 return '';
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BaseFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: BaseFormComponent, isStandalone: true, selector: "lib-base-form", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, createTitle: { classPropertyName: "createTitle", publicName: "createTitle", isSignal: true, isRequired: false, transformFunction: null }, editTitle: { classPropertyName: "editTitle", publicName: "editTitle", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, submitLabel: { classPropertyName: "submitLabel", publicName: "submitLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isEditMode: { classPropertyName: "isEditMode", publicName: "isEditMode", isSignal: true, isRequired: false, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: false, transformFunction: null }, editId: { classPropertyName: "editId", publicName: "editId", isSignal: true, isRequired: false, transformFunction: null }, cancelRoute: { classPropertyName: "cancelRoute", publicName: "cancelRoute", isSignal: true, isRequired: false, transformFunction: null }, navigateOnSuccess: { classPropertyName: "navigateOnSuccess", publicName: "navigateOnSuccess", isSignal: true, isRequired: false, transformFunction: null }, mapToRequest: { classPropertyName: "mapToRequest", publicName: "mapToRequest", isSignal: true, isRequired: false, transformFunction: null }, mapFromEntity: { classPropertyName: "mapFromEntity", publicName: "mapFromEntity", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSubmit: "onSubmit", onCancel: "onCancel", onValueChange: "onValueChange" }, queries: [{ propertyName: "fieldTemplates", predicate: BaseFormTemplateDirective, isSignal: true }], ngImport: i0, template: "<p-card>\n  <ng-template #header>\n    @if (resolvedTitle()) {\n      <div class=\"flex justify-between items-center p-4\">\n        <h2 class=\"text-xl font-semibold m-0\">{{ resolvedTitle() }}</h2>\n      </div>\n    }\n  </ng-template>\n\n  <form (ngSubmit)=\"handleSubmit()\" novalidate>\n    <div class=\"grid gap-4\" [class]=\"gridClass()\">\n      @for (field of fields(); track field.key) {\n        <div class=\"flex flex-col gap-2\" [class.col-span-full]=\"field.fullWidth\">\n          @if (field.type !== 'checkbox' && field.type !== 'toggle') {\n            <label [for]=\"field.key\" class=\"font-medium\">\n              {{ field.label }}\n              @if (field.required) {\n                <span class=\"text-red-500 ml-1\">*</span>\n              }\n            </label>\n          }\n\n          @switch (field.type) {\n            @case ('text') {\n              <input\n                pInputText\n                [id]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                (blur)=\"markFieldTouched(field.key)\"\n                [placeholder]=\"field.placeholder ?? ''\"\n                [disabled]=\"field.disabled ?? false\"\n                [class.ng-invalid]=\"isFieldInvalid(field)\"\n                [class.ng-dirty]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n              />\n            }\n\n            @case ('email') {\n              <input\n                pInputText\n                type=\"email\"\n                [id]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                (blur)=\"markFieldTouched(field.key)\"\n                [placeholder]=\"field.placeholder ?? ''\"\n                [disabled]=\"field.disabled ?? false\"\n                [class.ng-invalid]=\"isFieldInvalid(field)\"\n                [class.ng-dirty]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n              />\n            }\n\n            @case ('password') {\n              <p-password\n                [inputId]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                (onBlur)=\"markFieldTouched(field.key)\"\n                [placeholder]=\"field.placeholder ?? ''\"\n                [disabled]=\"field.disabled ?? false\"\n                [feedback]=\"false\"\n                [toggleMask]=\"true\"\n                [invalid]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n                inputStyleClass=\"w-full\"\n              />\n            }\n\n            @case ('number') {\n              <p-inputnumber\n                [inputId]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                (onBlur)=\"markFieldTouched(field.key)\"\n                [placeholder]=\"field.placeholder ?? ''\"\n                [disabled]=\"field.disabled ?? false\"\n                [min]=\"field.min ?? undefined\"\n                [max]=\"field.max ?? undefined\"\n                [invalid]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n                inputStyleClass=\"w-full\"\n              />\n            }\n\n            @case ('textarea') {\n              <textarea\n                pTextarea\n                [id]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                (blur)=\"markFieldTouched(field.key)\"\n                [placeholder]=\"field.placeholder ?? ''\"\n                [disabled]=\"field.disabled ?? false\"\n                [rows]=\"field.rows ?? 3\"\n                [class.ng-invalid]=\"isFieldInvalid(field)\"\n                [class.ng-dirty]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n              ></textarea>\n            }\n\n            @case ('select') {\n              <p-select\n                [inputId]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                [options]=\"field.options ?? []\"\n                optionLabel=\"label\"\n                optionValue=\"value\"\n                [placeholder]=\"field.placeholder ?? t('shared.select.placeholder')\"\n                [disabled]=\"field.disabled ?? false\"\n                [invalid]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n              />\n            }\n\n            @case ('multiselect') {\n              <p-multiselect\n                [inputId]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                [options]=\"field.options ?? []\"\n                optionLabel=\"label\"\n                optionValue=\"value\"\n                [placeholder]=\"field.placeholder ?? t('shared.select.placeholder')\"\n                [disabled]=\"field.disabled ?? false\"\n                [invalid]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n              />\n            }\n\n            @case ('date') {\n              <p-datepicker\n                [inputId]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                (onBlur)=\"markFieldTouched(field.key)\"\n                [placeholder]=\"field.placeholder ?? ''\"\n                [disabled]=\"field.disabled ?? false\"\n                [minDate]=\"field.minDate ?? undefined\"\n                [maxDate]=\"field.maxDate ?? undefined\"\n                [invalid]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n                inputStyleClass=\"w-full\"\n              />\n            }\n\n            @case ('checkbox') {\n              <div class=\"flex items-center gap-2 h-9\">\n                <p-checkbox\n                  [inputId]=\"field.key\"\n                  [name]=\"field.key\"\n                  [ngModel]=\"getFieldValue(field.key)\"\n                  (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                  [disabled]=\"field.disabled ?? false\"\n                  [binary]=\"true\"\n                  [invalid]=\"isFieldInvalid(field)\"\n                />\n                <label [for]=\"field.key\" class=\"font-medium cursor-pointer select-none\">\n                  {{ field.label }}\n                  @if (field.required) {\n                    <span class=\"text-red-500 ml-1\">*</span>\n                  }\n                </label>\n              </div>\n            }\n\n            @case ('toggle') {\n              <div class=\"flex items-center gap-3 h-9\">\n                <p-toggleswitch\n                  [inputId]=\"field.key\"\n                  [name]=\"field.key\"\n                  [ngModel]=\"getFieldValue(field.key)\"\n                  (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                  [disabled]=\"field.disabled ?? false\"\n                />\n                <label [for]=\"field.key\" class=\"font-medium cursor-pointer select-none\">\n                  {{ field.label }}\n                  @if (field.required) {\n                    <span class=\"text-red-500 ml-1\">*</span>\n                  }\n                </label>\n              </div>\n            }\n\n            @case ('custom') {\n              <ng-container\n                *ngTemplateOutlet=\"getFieldTemplate(field.key); context: { $implicit: getFieldValue(field.key), field: field }\"\n              />\n            }\n          }\n\n          @if (isFieldInvalid(field)) {\n            <small class=\"text-red-500\">{{ field.label }} {{ t('shared.required') }}</small>\n          }\n\n          @if (field.hint && !isFieldInvalid(field)) {\n            <small class=\"text-surface-400\">{{ field.hint }}</small>\n          }\n        </div>\n      }\n\n      <div class=\"col-span-full flex justify-end gap-4 pt-4\">\n        <p-button\n          type=\"button\"\n          [label]=\"cancelLabel() || t('shared.cancel')\"\n          severity=\"secondary\"\n          [outlined]=\"true\"\n          [disabled]=\"effectiveIsLoading()\"\n          (onClick)=\"handleCancel()\"\n        />\n        <p-button\n          type=\"submit\"\n          [label]=\"submitLabel() || (effectiveIsEditMode() ? t('shared.update') : t('shared.save'))\"\n          [loading]=\"effectiveIsLoading()\"\n          [disabled]=\"!isFormValid() || effectiveIsLoading()\"\n        />\n      </div>\n    </div>\n  </form>\n</p-card>\n", dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i4.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: i5$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "component", type: i6$1.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: i7.InputNumber, selector: "p-inputNumber, p-inputnumber, p-input-number", inputs: ["showButtons", "format", "buttonLayout", "inputId", "styleClass", "placeholder", "tabindex", "title", "ariaLabelledBy", "ariaDescribedBy", "ariaLabel", "ariaRequired", "autocomplete", "incrementButtonClass", "decrementButtonClass", "incrementButtonIcon", "decrementButtonIcon", "readonly", "allowEmpty", "locale", "localeMatcher", "mode", "currency", "currencyDisplay", "useGrouping", "minFractionDigits", "maxFractionDigits", "prefix", "suffix", "inputStyle", "inputStyleClass", "showClear", "autofocus"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown", "onClear"] }, { kind: "directive", type: i8.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i9$1.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i10$1.Password, selector: "p-password", inputs: ["ariaLabel", "ariaLabelledBy", "label", "promptLabel", "mediumRegex", "strongRegex", "weakLabel", "mediumLabel", "maxLength", "strongLabel", "inputId", "feedback", "toggleMask", "inputStyleClass", "styleClass", "inputStyle", "showTransitionOptions", "hideTransitionOptions", "autocomplete", "placeholder", "showClear", "autofocus", "tabindex", "appendTo", "motionOptions", "overlayOptions"], outputs: ["onFocus", "onBlur", "onClear"] }, { kind: "component", type: i11.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i12.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["pTextareaPT", "pTextareaUnstyled", "autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "component", type: i13.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BaseFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: BaseFormComponent, isStandalone: true, selector: "lib-base-form", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, createTitle: { classPropertyName: "createTitle", publicName: "createTitle", isSignal: true, isRequired: false, transformFunction: null }, editTitle: { classPropertyName: "editTitle", publicName: "editTitle", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, submitLabel: { classPropertyName: "submitLabel", publicName: "submitLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isEditMode: { classPropertyName: "isEditMode", publicName: "isEditMode", isSignal: true, isRequired: false, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: false, transformFunction: null }, editId: { classPropertyName: "editId", publicName: "editId", isSignal: true, isRequired: false, transformFunction: null }, cancelRoute: { classPropertyName: "cancelRoute", publicName: "cancelRoute", isSignal: true, isRequired: false, transformFunction: null }, navigateOnSuccess: { classPropertyName: "navigateOnSuccess", publicName: "navigateOnSuccess", isSignal: true, isRequired: false, transformFunction: null }, mapToRequest: { classPropertyName: "mapToRequest", publicName: "mapToRequest", isSignal: true, isRequired: false, transformFunction: null }, mapFromEntity: { classPropertyName: "mapFromEntity", publicName: "mapFromEntity", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSubmit: "onSubmit", onCancel: "onCancel", onValueChange: "onValueChange" }, queries: [{ propertyName: "fieldTemplates", predicate: BaseFormTemplateDirective, isSignal: true }], ngImport: i0, template: "<f-card>\n  <ng-template #header>\n    @if (resolvedTitle()) {\n      <div class=\"flex justify-between items-center p-4\">\n        <h2 class=\"text-xl font-semibold m-0\">{{ resolvedTitle() }}</h2>\n      </div>\n    }\n  </ng-template>\n\n  <form (ngSubmit)=\"handleSubmit()\" novalidate>\n    <div class=\"grid gap-4\" [class]=\"gridClass()\">\n      @for (field of fields(); track field.key) {\n        <div class=\"flex flex-col gap-2\" [class.col-span-full]=\"field.fullWidth\">\n          @if (field.type !== 'checkbox' && field.type !== 'toggle') {\n            <label [for]=\"field.key\" class=\"font-medium\">\n              {{ field.label }}\n              @if (field.required) {\n                <span class=\"text-red-500 ml-1\">*</span>\n              }\n            </label>\n          }\n\n          @switch (field.type) {\n            @case ('text') {\n              <input\n                fInputText\n                [id]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                (blur)=\"markFieldTouched(field.key)\"\n                [placeholder]=\"field.placeholder ?? ''\"\n                [disabled]=\"field.disabled ?? false\"\n                [class.ng-invalid]=\"isFieldInvalid(field)\"\n                [class.ng-dirty]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n              />\n            }\n\n            @case ('email') {\n              <input\n                fInputText\n                type=\"email\"\n                [id]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                (blur)=\"markFieldTouched(field.key)\"\n                [placeholder]=\"field.placeholder ?? ''\"\n                [disabled]=\"field.disabled ?? false\"\n                [class.ng-invalid]=\"isFieldInvalid(field)\"\n                [class.ng-dirty]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n              />\n            }\n\n            @case ('password') {\n              <f-iconfield iconPosition=\"right\" class=\"w-full\">\n                <input\n                  fInputText\n                  fInputPassword\n                  [id]=\"field.key\"\n                  [name]=\"field.key\"\n                  [mask]=\"!isPasswordVisible(field.key)\"\n                  [ngModel]=\"getFieldValue(field.key)\"\n                  (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                  (blur)=\"markFieldTouched(field.key)\"\n                  [placeholder]=\"field.placeholder ?? ''\"\n                  [disabled]=\"field.disabled ?? false\"\n                  [invalid]=\"isFieldInvalid(field)\"\n                  class=\"w-full\"\n                />\n                <f-inputicon\n                  class=\"cursor-pointer\"\n                  (click)=\"togglePasswordVisibility(field.key)\"\n                >\n                  <ui-icon [name]=\"isPasswordVisible(field.key) ? 'eye-slash' : 'eye'\"></ui-icon>\n                </f-inputicon>\n              </f-iconfield>\n            }\n\n            @case ('number') {\n              <f-inputnumber\n                [inputId]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                (onBlur)=\"markFieldTouched(field.key)\"\n                [placeholder]=\"field.placeholder ?? ''\"\n                [disabled]=\"field.disabled ?? false\"\n                [min]=\"field.min ?? null\"\n                [max]=\"field.max ?? null\"\n                [invalid]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n                inputStyleClass=\"w-full\"\n              />\n            }\n\n            @case ('textarea') {\n              <textarea\n                fTextarea\n                [id]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                (blur)=\"markFieldTouched(field.key)\"\n                [placeholder]=\"field.placeholder ?? ''\"\n                [disabled]=\"field.disabled ?? false\"\n                [rows]=\"field.rows ?? 3\"\n                [class.ng-invalid]=\"isFieldInvalid(field)\"\n                [class.ng-dirty]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n              ></textarea>\n            }\n\n            @case ('select') {\n              <f-select\n                [inputId]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                [options]=\"field.options ?? []\"\n                optionLabel=\"label\"\n                optionValue=\"value\"\n                [placeholder]=\"field.placeholder ?? t('shared.select.placeholder')\"\n                [disabled]=\"field.disabled ?? false\"\n                [invalid]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n              />\n            }\n\n            @case ('multiselect') {\n              <f-multiselect\n                [inputId]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                [options]=\"field.options ?? []\"\n                optionLabel=\"label\"\n                optionValue=\"value\"\n                [placeholder]=\"field.placeholder ?? t('shared.select.placeholder')\"\n                [disabled]=\"field.disabled ?? false\"\n                [invalid]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n              />\n            }\n\n            @case ('date') {\n              <f-datepicker\n                [inputId]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                (onBlur)=\"markFieldTouched(field.key)\"\n                [placeholder]=\"field.placeholder ?? ''\"\n                [disabled]=\"field.disabled ?? false\"\n                [minDate]=\"field.minDate ?? null\"\n                [maxDate]=\"field.maxDate ?? null\"\n                [invalid]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n                inputStyleClass=\"w-full\"\n              />\n            }\n\n            @case ('checkbox') {\n              <div class=\"flex items-center gap-2 h-9\">\n                <f-checkbox\n                  [inputId]=\"field.key\"\n                  [name]=\"field.key\"\n                  [ngModel]=\"getFieldValue(field.key)\"\n                  (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                  [disabled]=\"field.disabled ?? false\"\n                  [binary]=\"true\"\n                  [invalid]=\"isFieldInvalid(field)\"\n                />\n                <label [for]=\"field.key\" class=\"font-medium cursor-pointer select-none\">\n                  {{ field.label }}\n                  @if (field.required) {\n                    <span class=\"text-red-500 ml-1\">*</span>\n                  }\n                </label>\n              </div>\n            }\n\n            @case ('toggle') {\n              <div class=\"flex items-center gap-3 h-9\">\n                <f-toggleswitch\n                  [inputId]=\"field.key\"\n                  [name]=\"field.key\"\n                  [ngModel]=\"getFieldValue(field.key)\"\n                  (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                  [disabled]=\"field.disabled ?? false\"\n                />\n                <label [for]=\"field.key\" class=\"font-medium cursor-pointer select-none\">\n                  {{ field.label }}\n                  @if (field.required) {\n                    <span class=\"text-red-500 ml-1\">*</span>\n                  }\n                </label>\n              </div>\n            }\n\n            @case ('custom') {\n              <ng-container\n                *ngTemplateOutlet=\"getFieldTemplate(field.key); context: { $implicit: getFieldValue(field.key), field: field }\"\n              />\n            }\n          }\n\n          @if (isFieldInvalid(field)) {\n            <small class=\"text-red-500\">{{ field.label }} {{ t('shared.required') }}</small>\n          }\n\n          @if (field.hint && !isFieldInvalid(field)) {\n            <small class=\"text-surface-400\">{{ field.hint }}</small>\n          }\n        </div>\n      }\n\n      <div class=\"col-span-full flex justify-end gap-4 pt-4\">\n        <button\n          fButton\n          type=\"button\"\n          severity=\"secondary\"\n          [outlined]=\"true\"\n          [disabled]=\"effectiveIsLoading()\"\n          (click)=\"handleCancel()\"\n        >\n          <span pButtonLabel>{{ cancelLabel() || t('shared.cancel') }}</span>\n        </button>\n        <button\n          fButton\n          type=\"submit\"\n          [disabled]=\"!isFormValid() || effectiveIsLoading()\"\n        >\n          @if (effectiveIsLoading()) {\n            <ui-icon pButtonIcon name=\"spinner\" [spin]=\"true\"></ui-icon>\n          }\n          <span pButtonLabel>{{ submitLabel() || (effectiveIsEditMode() ? t('shared.update') : t('shared.save')) }}</span>\n        </button>\n      </div>\n    </div>\n  </form>\n</f-card>\n", dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: UiModule }, { kind: "directive", type: i3.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "rounded", "raised", "fluid", "disabled", "loading", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i3.CheckboxComponent, selector: "f-checkbox", inputs: ["label", "binary", "disabled", "inputId", "invalid", "indeterminate", "touched", "styleClass", "checked"], outputs: ["onChange", "onBlur", "touch", "checkedChange"] }, { kind: "component", type: i3.DatePickerComponent, selector: "f-datepicker", inputs: ["placeholder", "dateFormat", "disabled", "showTime", "selectionMode", "minDate", "maxDate", "inputId", "invalid", "touched", "showClear", "inputStyleClass", "showIcon", "showButtonBar", "appendTo", "styleClass"], outputs: ["onBlur"] }, { kind: "component", type: i3.IconFieldComponent, selector: "f-iconfield" }, { kind: "component", type: i3.InputIconComponent, selector: "f-inputicon", inputs: ["styleClass"] }, { kind: "component", type: i3.InputNumberComponent, selector: "f-inputnumber", inputs: ["min", "max", "step", "showButtons", "disabled", "inputId", "invalid", "touched", "placeholder", "prefix", "suffix", "useGrouping", "buttonLayout", "inputStyleClass"], outputs: ["onBlur"] }, { kind: "directive", type: i3.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched"] }, { kind: "directive", type: i3.InputPasswordDirective, selector: "[fInputPassword]", inputs: ["mask"] }, { kind: "component", type: i3.MultiSelectComponent, selector: "f-multiselect", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "inputId", "invalid", "touched", "showClear", "optionDisabled", "display", "maxSelectedLabels", "selectionLimit", "showToggleAll", "styleClass"], outputs: ["onBlur"] }, { kind: "component", type: i3.SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "showClear", "loading", "inputId", "invalid", "touched", "styleClass", "editable"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur"] }, { kind: "directive", type: i3.TextareaDirective, selector: "[fTextarea]", inputs: ["invalid", "touched"] }, { kind: "component", type: i3.ToggleSwitchComponent, selector: "f-toggleswitch", inputs: ["disabled", "readonly", "invalid", "ariaLabel", "trueValue", "falseValue", "inputId"] }, { kind: "component", type: i3.CardComponent, selector: "f-card", inputs: ["header", "subheader", "styleClass"] }, { kind: "component", type: i3.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BaseFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BaseFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-base-form', imports: [AngularModule, PrimeModule], template: "<p-card>\n  <ng-template #header>\n    @if (resolvedTitle()) {\n      <div class=\"flex justify-between items-center p-4\">\n        <h2 class=\"text-xl font-semibold m-0\">{{ resolvedTitle() }}</h2>\n      </div>\n    }\n  </ng-template>\n\n  <form (ngSubmit)=\"handleSubmit()\" novalidate>\n    <div class=\"grid gap-4\" [class]=\"gridClass()\">\n      @for (field of fields(); track field.key) {\n        <div class=\"flex flex-col gap-2\" [class.col-span-full]=\"field.fullWidth\">\n          @if (field.type !== 'checkbox' && field.type !== 'toggle') {\n            <label [for]=\"field.key\" class=\"font-medium\">\n              {{ field.label }}\n              @if (field.required) {\n                <span class=\"text-red-500 ml-1\">*</span>\n              }\n            </label>\n          }\n\n          @switch (field.type) {\n            @case ('text') {\n              <input\n                pInputText\n                [id]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                (blur)=\"markFieldTouched(field.key)\"\n                [placeholder]=\"field.placeholder ?? ''\"\n                [disabled]=\"field.disabled ?? false\"\n                [class.ng-invalid]=\"isFieldInvalid(field)\"\n                [class.ng-dirty]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n              />\n            }\n\n            @case ('email') {\n              <input\n                pInputText\n                type=\"email\"\n                [id]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                (blur)=\"markFieldTouched(field.key)\"\n                [placeholder]=\"field.placeholder ?? ''\"\n                [disabled]=\"field.disabled ?? false\"\n                [class.ng-invalid]=\"isFieldInvalid(field)\"\n                [class.ng-dirty]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n              />\n            }\n\n            @case ('password') {\n              <p-password\n                [inputId]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                (onBlur)=\"markFieldTouched(field.key)\"\n                [placeholder]=\"field.placeholder ?? ''\"\n                [disabled]=\"field.disabled ?? false\"\n                [feedback]=\"false\"\n                [toggleMask]=\"true\"\n                [invalid]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n                inputStyleClass=\"w-full\"\n              />\n            }\n\n            @case ('number') {\n              <p-inputnumber\n                [inputId]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                (onBlur)=\"markFieldTouched(field.key)\"\n                [placeholder]=\"field.placeholder ?? ''\"\n                [disabled]=\"field.disabled ?? false\"\n                [min]=\"field.min ?? undefined\"\n                [max]=\"field.max ?? undefined\"\n                [invalid]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n                inputStyleClass=\"w-full\"\n              />\n            }\n\n            @case ('textarea') {\n              <textarea\n                pTextarea\n                [id]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                (blur)=\"markFieldTouched(field.key)\"\n                [placeholder]=\"field.placeholder ?? ''\"\n                [disabled]=\"field.disabled ?? false\"\n                [rows]=\"field.rows ?? 3\"\n                [class.ng-invalid]=\"isFieldInvalid(field)\"\n                [class.ng-dirty]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n              ></textarea>\n            }\n\n            @case ('select') {\n              <p-select\n                [inputId]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                [options]=\"field.options ?? []\"\n                optionLabel=\"label\"\n                optionValue=\"value\"\n                [placeholder]=\"field.placeholder ?? t('shared.select.placeholder')\"\n                [disabled]=\"field.disabled ?? false\"\n                [invalid]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n              />\n            }\n\n            @case ('multiselect') {\n              <p-multiselect\n                [inputId]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                [options]=\"field.options ?? []\"\n                optionLabel=\"label\"\n                optionValue=\"value\"\n                [placeholder]=\"field.placeholder ?? t('shared.select.placeholder')\"\n                [disabled]=\"field.disabled ?? false\"\n                [invalid]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n              />\n            }\n\n            @case ('date') {\n              <p-datepicker\n                [inputId]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                (onBlur)=\"markFieldTouched(field.key)\"\n                [placeholder]=\"field.placeholder ?? ''\"\n                [disabled]=\"field.disabled ?? false\"\n                [minDate]=\"field.minDate ?? undefined\"\n                [maxDate]=\"field.maxDate ?? undefined\"\n                [invalid]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n                inputStyleClass=\"w-full\"\n              />\n            }\n\n            @case ('checkbox') {\n              <div class=\"flex items-center gap-2 h-9\">\n                <p-checkbox\n                  [inputId]=\"field.key\"\n                  [name]=\"field.key\"\n                  [ngModel]=\"getFieldValue(field.key)\"\n                  (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                  [disabled]=\"field.disabled ?? false\"\n                  [binary]=\"true\"\n                  [invalid]=\"isFieldInvalid(field)\"\n                />\n                <label [for]=\"field.key\" class=\"font-medium cursor-pointer select-none\">\n                  {{ field.label }}\n                  @if (field.required) {\n                    <span class=\"text-red-500 ml-1\">*</span>\n                  }\n                </label>\n              </div>\n            }\n\n            @case ('toggle') {\n              <div class=\"flex items-center gap-3 h-9\">\n                <p-toggleswitch\n                  [inputId]=\"field.key\"\n                  [name]=\"field.key\"\n                  [ngModel]=\"getFieldValue(field.key)\"\n                  (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                  [disabled]=\"field.disabled ?? false\"\n                />\n                <label [for]=\"field.key\" class=\"font-medium cursor-pointer select-none\">\n                  {{ field.label }}\n                  @if (field.required) {\n                    <span class=\"text-red-500 ml-1\">*</span>\n                  }\n                </label>\n              </div>\n            }\n\n            @case ('custom') {\n              <ng-container\n                *ngTemplateOutlet=\"getFieldTemplate(field.key); context: { $implicit: getFieldValue(field.key), field: field }\"\n              />\n            }\n          }\n\n          @if (isFieldInvalid(field)) {\n            <small class=\"text-red-500\">{{ field.label }} {{ t('shared.required') }}</small>\n          }\n\n          @if (field.hint && !isFieldInvalid(field)) {\n            <small class=\"text-surface-400\">{{ field.hint }}</small>\n          }\n        </div>\n      }\n\n      <div class=\"col-span-full flex justify-end gap-4 pt-4\">\n        <p-button\n          type=\"button\"\n          [label]=\"cancelLabel() || t('shared.cancel')\"\n          severity=\"secondary\"\n          [outlined]=\"true\"\n          [disabled]=\"effectiveIsLoading()\"\n          (onClick)=\"handleCancel()\"\n        />\n        <p-button\n          type=\"submit\"\n          [label]=\"submitLabel() || (effectiveIsEditMode() ? t('shared.update') : t('shared.save'))\"\n          [loading]=\"effectiveIsLoading()\"\n          [disabled]=\"!isFormValid() || effectiveIsLoading()\"\n        />\n      </div>\n    </div>\n  </form>\n</p-card>\n" }]
+            args: [{ selector: 'lib-base-form', imports: [AngularModule, UiModule], template: "<f-card>\n  <ng-template #header>\n    @if (resolvedTitle()) {\n      <div class=\"flex justify-between items-center p-4\">\n        <h2 class=\"text-xl font-semibold m-0\">{{ resolvedTitle() }}</h2>\n      </div>\n    }\n  </ng-template>\n\n  <form (ngSubmit)=\"handleSubmit()\" novalidate>\n    <div class=\"grid gap-4\" [class]=\"gridClass()\">\n      @for (field of fields(); track field.key) {\n        <div class=\"flex flex-col gap-2\" [class.col-span-full]=\"field.fullWidth\">\n          @if (field.type !== 'checkbox' && field.type !== 'toggle') {\n            <label [for]=\"field.key\" class=\"font-medium\">\n              {{ field.label }}\n              @if (field.required) {\n                <span class=\"text-red-500 ml-1\">*</span>\n              }\n            </label>\n          }\n\n          @switch (field.type) {\n            @case ('text') {\n              <input\n                fInputText\n                [id]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                (blur)=\"markFieldTouched(field.key)\"\n                [placeholder]=\"field.placeholder ?? ''\"\n                [disabled]=\"field.disabled ?? false\"\n                [class.ng-invalid]=\"isFieldInvalid(field)\"\n                [class.ng-dirty]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n              />\n            }\n\n            @case ('email') {\n              <input\n                fInputText\n                type=\"email\"\n                [id]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                (blur)=\"markFieldTouched(field.key)\"\n                [placeholder]=\"field.placeholder ?? ''\"\n                [disabled]=\"field.disabled ?? false\"\n                [class.ng-invalid]=\"isFieldInvalid(field)\"\n                [class.ng-dirty]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n              />\n            }\n\n            @case ('password') {\n              <f-iconfield iconPosition=\"right\" class=\"w-full\">\n                <input\n                  fInputText\n                  fInputPassword\n                  [id]=\"field.key\"\n                  [name]=\"field.key\"\n                  [mask]=\"!isPasswordVisible(field.key)\"\n                  [ngModel]=\"getFieldValue(field.key)\"\n                  (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                  (blur)=\"markFieldTouched(field.key)\"\n                  [placeholder]=\"field.placeholder ?? ''\"\n                  [disabled]=\"field.disabled ?? false\"\n                  [invalid]=\"isFieldInvalid(field)\"\n                  class=\"w-full\"\n                />\n                <f-inputicon\n                  class=\"cursor-pointer\"\n                  (click)=\"togglePasswordVisibility(field.key)\"\n                >\n                  <ui-icon [name]=\"isPasswordVisible(field.key) ? 'eye-slash' : 'eye'\"></ui-icon>\n                </f-inputicon>\n              </f-iconfield>\n            }\n\n            @case ('number') {\n              <f-inputnumber\n                [inputId]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                (onBlur)=\"markFieldTouched(field.key)\"\n                [placeholder]=\"field.placeholder ?? ''\"\n                [disabled]=\"field.disabled ?? false\"\n                [min]=\"field.min ?? null\"\n                [max]=\"field.max ?? null\"\n                [invalid]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n                inputStyleClass=\"w-full\"\n              />\n            }\n\n            @case ('textarea') {\n              <textarea\n                fTextarea\n                [id]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                (blur)=\"markFieldTouched(field.key)\"\n                [placeholder]=\"field.placeholder ?? ''\"\n                [disabled]=\"field.disabled ?? false\"\n                [rows]=\"field.rows ?? 3\"\n                [class.ng-invalid]=\"isFieldInvalid(field)\"\n                [class.ng-dirty]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n              ></textarea>\n            }\n\n            @case ('select') {\n              <f-select\n                [inputId]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                [options]=\"field.options ?? []\"\n                optionLabel=\"label\"\n                optionValue=\"value\"\n                [placeholder]=\"field.placeholder ?? t('shared.select.placeholder')\"\n                [disabled]=\"field.disabled ?? false\"\n                [invalid]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n              />\n            }\n\n            @case ('multiselect') {\n              <f-multiselect\n                [inputId]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                [options]=\"field.options ?? []\"\n                optionLabel=\"label\"\n                optionValue=\"value\"\n                [placeholder]=\"field.placeholder ?? t('shared.select.placeholder')\"\n                [disabled]=\"field.disabled ?? false\"\n                [invalid]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n              />\n            }\n\n            @case ('date') {\n              <f-datepicker\n                [inputId]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                (onBlur)=\"markFieldTouched(field.key)\"\n                [placeholder]=\"field.placeholder ?? ''\"\n                [disabled]=\"field.disabled ?? false\"\n                [minDate]=\"field.minDate ?? null\"\n                [maxDate]=\"field.maxDate ?? null\"\n                [invalid]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n                inputStyleClass=\"w-full\"\n              />\n            }\n\n            @case ('checkbox') {\n              <div class=\"flex items-center gap-2 h-9\">\n                <f-checkbox\n                  [inputId]=\"field.key\"\n                  [name]=\"field.key\"\n                  [ngModel]=\"getFieldValue(field.key)\"\n                  (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                  [disabled]=\"field.disabled ?? false\"\n                  [binary]=\"true\"\n                  [invalid]=\"isFieldInvalid(field)\"\n                />\n                <label [for]=\"field.key\" class=\"font-medium cursor-pointer select-none\">\n                  {{ field.label }}\n                  @if (field.required) {\n                    <span class=\"text-red-500 ml-1\">*</span>\n                  }\n                </label>\n              </div>\n            }\n\n            @case ('toggle') {\n              <div class=\"flex items-center gap-3 h-9\">\n                <f-toggleswitch\n                  [inputId]=\"field.key\"\n                  [name]=\"field.key\"\n                  [ngModel]=\"getFieldValue(field.key)\"\n                  (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                  [disabled]=\"field.disabled ?? false\"\n                />\n                <label [for]=\"field.key\" class=\"font-medium cursor-pointer select-none\">\n                  {{ field.label }}\n                  @if (field.required) {\n                    <span class=\"text-red-500 ml-1\">*</span>\n                  }\n                </label>\n              </div>\n            }\n\n            @case ('custom') {\n              <ng-container\n                *ngTemplateOutlet=\"getFieldTemplate(field.key); context: { $implicit: getFieldValue(field.key), field: field }\"\n              />\n            }\n          }\n\n          @if (isFieldInvalid(field)) {\n            <small class=\"text-red-500\">{{ field.label }} {{ t('shared.required') }}</small>\n          }\n\n          @if (field.hint && !isFieldInvalid(field)) {\n            <small class=\"text-surface-400\">{{ field.hint }}</small>\n          }\n        </div>\n      }\n\n      <div class=\"col-span-full flex justify-end gap-4 pt-4\">\n        <button\n          fButton\n          type=\"button\"\n          severity=\"secondary\"\n          [outlined]=\"true\"\n          [disabled]=\"effectiveIsLoading()\"\n          (click)=\"handleCancel()\"\n        >\n          <span pButtonLabel>{{ cancelLabel() || t('shared.cancel') }}</span>\n        </button>\n        <button\n          fButton\n          type=\"submit\"\n          [disabled]=\"!isFormValid() || effectiveIsLoading()\"\n        >\n          @if (effectiveIsLoading()) {\n            <ui-icon pButtonIcon name=\"spinner\" [spin]=\"true\"></ui-icon>\n          }\n          <span pButtonLabel>{{ submitLabel() || (effectiveIsEditMode() ? t('shared.update') : t('shared.save')) }}</span>\n        </button>\n      </div>\n    </div>\n  </form>\n</f-card>\n" }]
         }], ctorParameters: () => [], propDecorators: { fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], createTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "createTitle", required: false }] }], editTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "editTitle", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], submitLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], isEditMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEditMode", required: false }] }], initialValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialValue", required: false }] }], service: [{ type: i0.Input, args: [{ isSignal: true, alias: "service", required: false }] }], editId: [{ type: i0.Input, args: [{ isSignal: true, alias: "editId", required: false }] }], cancelRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelRoute", required: false }] }], navigateOnSuccess: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigateOnSuccess", required: false }] }], mapToRequest: [{ type: i0.Input, args: [{ isSignal: true, alias: "mapToRequest", required: false }] }], mapFromEntity: [{ type: i0.Input, args: [{ isSignal: true, alias: "mapFromEntity", required: false }] }], onSubmit: [{ type: i0.Output, args: ["onSubmit"] }], onCancel: [{ type: i0.Output, args: ["onCancel"] }], onValueChange: [{ type: i0.Output, args: ["onValueChange"] }], fieldTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => BaseFormTemplateDirective), { isSignal: true }] }] } });
 
-class InlineSvgComponent {
-    src = input.required(...(ngDevMode ? [{ debugName: "src" }] : []));
-    http = inject(HttpClient);
-    sanitizer = inject(DomSanitizer);
-    svg = resource({ ...(ngDevMode ? { debugName: "svg" } : {}), params: this.src,
-        loader: ({ params: url }) => firstValueFrom(this.http.get(url, { responseType: 'text' })).then((text) => this.sanitizer.bypassSecurityTrustHtml(text)) });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: InlineSvgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: InlineSvgComponent, isStandalone: true, selector: "inline-svg", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-    @if (svg.hasValue()) {
-      <span [innerHTML]="svg.value()"></span>
+class BaseListTemplateDirective {
+    key = input.required({ ...(ngDevMode ? { debugName: "key" } : /* istanbul ignore next */ {}), alias: 'baseListTemplate' });
+    templateRef = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BaseListTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: BaseListTemplateDirective, isStandalone: true, selector: "ng-template[baseListTemplate]", inputs: { key: { classPropertyName: "key", publicName: "baseListTemplate", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BaseListTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[baseListTemplate]' }]
+        }], propDecorators: { key: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseListTemplate", required: true }] }] } });
+
+class BaseListComponent {
+    translateAdapter = inject(TranslateService, { optional: true });
+    router = inject(Router, { optional: true });
+    messageService = inject(MessageService, { optional: true });
+    confirmationService = inject(ConfirmationService, { optional: true });
+    columns = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    actions = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actions" }] : /* istanbul ignore next */ []));
+    title = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    showCreateButton = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showCreateButton" }] : /* istanbul ignore next */ []));
+    searchable = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchable" }] : /* istanbul ignore next */ []));
+    pageSize = input(10, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    emptyMessage = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+    createButtonLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "createButtonLabel" }] : /* istanbul ignore next */ []));
+    createButtonIcon = input('plus', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "createButtonIcon" }] : /* istanbul ignore next */ []));
+    data = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    total = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
+    isLoading = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    service = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "service" }] : /* istanbul ignore next */ []));
+    filter = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filter" }] : /* istanbul ignore next */ []));
+    createRoute = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "createRoute" }] : /* istanbul ignore next */ []));
+    editRoute = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "editRoute" }] : /* istanbul ignore next */ []));
+    deleteConfirmField = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "deleteConfirmField" }] : /* istanbul ignore next */ []));
+    idField = input('id', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "idField" }] : /* istanbul ignore next */ []));
+    canEdit = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canEdit" }] : /* istanbul ignore next */ []));
+    canDelete = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canDelete" }] : /* istanbul ignore next */ []));
+    onCreate = output();
+    onLazyLoad = output();
+    onSearch = output();
+    columnTemplates = contentChildren(BaseListTemplateDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnTemplates" }] : /* istanbul ignore next */ []));
+    _first = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_first" }] : /* istanbul ignore next */ []));
+    _searchTerm = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_searchTerm" }] : /* istanbul ignore next */ []));
+    first = this._first.asReadonly();
+    searchTerm = this._searchTerm.asReadonly();
+    effectiveData = computed(() => this.service()?.data() ?? this.data(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveData" }] : /* istanbul ignore next */ []));
+    effectiveTotal = computed(() => this.service()?.total() ?? this.total(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveTotal" }] : /* istanbul ignore next */ []));
+    effectiveIsLoading = computed(() => this.service()?.isLoading() ?? this.isLoading(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveIsLoading" }] : /* istanbul ignore next */ []));
+    effectiveActions = computed(() => {
+        const editRoute = this.editRoute();
+        const deleteField = this.deleteConfirmField();
+        const editAction = editRoute
+            ? [{ icon: 'pencil', tooltip: 'shared.edit', severity: 'info',
+                    show: this.canEdit() ?? undefined, handler: (item) => this.handleEditItem(item) }]
+            : [];
+        const deleteAction = deleteField
+            ? [{ icon: 'trash', tooltip: 'shared.delete', severity: 'danger',
+                    show: this.canDelete() ?? undefined, handler: (item) => this.handleDeleteItem(item) }]
+            : [];
+        return [...editAction, ...this.actions(), ...deleteAction];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveActions" }] : /* istanbul ignore next */ []));
+    visibleColumns = computed(() => this.columns().filter((c) => !c.hidden), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleColumns" }] : /* istanbul ignore next */ []));
+    columnCount = computed(() => this.visibleColumns().length + (this.effectiveActions().length > 0 ? 1 : 0), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "columnCount" }] : /* istanbul ignore next */ []));
+    resolvedEmptyMessage = computed(() => this.emptyMessage() || this.t('shared.no.data'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedEmptyMessage" }] : /* istanbul ignore next */ []));
+    resolvedCreateLabel = computed(() => this.createButtonLabel() || this.t('shared.create'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedCreateLabel" }] : /* istanbul ignore next */ []));
+    handleLazyLoad(event) {
+        const first = event.first ?? 0;
+        const rows = event.rows ?? this.pageSize();
+        this._first.set(first);
+        const service = this.service();
+        if (service) {
+            service.fetchList(this.searchTerm(), {
+                pagination: { currentPage: Math.floor(first / rows), pageSize: rows },
+                filter: this.filter(),
+            });
+        }
+        this.onLazyLoad.emit({ first, rows });
     }
-  `, isInline: true, styles: ["inline-svg{display:inline-flex;align-items:center}inline-svg span{display:inline-flex;align-items:center;height:100%;width:100%}inline-svg svg{height:100%;width:auto}\n"], encapsulation: i0.ViewEncapsulation.None });
+    onSearchChange(value) {
+        this._first.set(0);
+        this._searchTerm.set(value);
+        const service = this.service();
+        if (service) {
+            service.fetchList(value, {
+                pagination: { currentPage: 0, pageSize: this.pageSize() },
+                filter: this.filter(),
+            });
+        }
+        this.onSearch.emit(value);
+    }
+    handleCreate() {
+        const route = this.createRoute();
+        if (route && this.router)
+            this.router.navigate([route]);
+        this.onCreate.emit();
+    }
+    handleEditItem(item) {
+        const route = this.editRoute();
+        const id = this.getFieldValueAsString(item, this.idField());
+        if (route && id && this.router)
+            this.router.navigate([route, id]);
+    }
+    handleDeleteItem(item) {
+        const nameField = this.deleteConfirmField();
+        const name = this.getFieldValueAsString(item, nameField);
+        const id = this.getFieldValueAsString(item, this.idField());
+        this.confirmationService?.confirm({
+            message: this.t('shared.confirm.delete.item', { name }),
+            header: this.t('shared.confirm.delete'),
+            icon: 'exclamation-triangle',
+            acceptButtonStyleClass: 'p-button-danger',
+            accept: async () => {
+                try {
+                    const response = await this.service()?.delete({ id, type: 'delete' });
+                    this.messageService?.add({
+                        severity: 'success',
+                        summary: this.t('shared.success'),
+                        detail: response?.messageKey
+                            ? this.t(response.messageKey, response.messageVariables)
+                            : (response?.message ?? ''),
+                    });
+                    this.service()?.reload();
+                }
+                catch {
+                    // handled by global interceptor
+                }
+            },
+        });
+    }
+    getFieldValue(item, field) {
+        return field
+            .split('.')
+            .reduce((obj, key) => (obj != null ? obj[key] : null), item);
+    }
+    getFieldValueAsString(item, field) {
+        return String(this.getFieldValue(item, field) ?? '');
+    }
+    getTagConfig(col, value) {
+        return col.tagMap?.[String(value)] ?? null;
+    }
+    getColumnTemplate(field) {
+        return this.columnTemplates().find((t) => t.key() === field)?.templateRef ?? null;
+    }
+    truncateText(value, limit) {
+        const str = String(value ?? '');
+        return limit && str.length > limit ? `${str.slice(0, limit)}…` : str;
+    }
+    getCellClass(col) {
+        switch (col.align) {
+            case 'center': return 'text-center';
+            case 'right': return 'text-right';
+            default: return '';
+        }
+    }
+    t(key, vars) {
+        return this.translateAdapter?.translate(key, vars) ?? key;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BaseListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: BaseListComponent, isStandalone: true, selector: "lib-base-list", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showCreateButton: { classPropertyName: "showCreateButton", publicName: "showCreateButton", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, createButtonLabel: { classPropertyName: "createButtonLabel", publicName: "createButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, createButtonIcon: { classPropertyName: "createButtonIcon", publicName: "createButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, createRoute: { classPropertyName: "createRoute", publicName: "createRoute", isSignal: true, isRequired: false, transformFunction: null }, editRoute: { classPropertyName: "editRoute", publicName: "editRoute", isSignal: true, isRequired: false, transformFunction: null }, deleteConfirmField: { classPropertyName: "deleteConfirmField", publicName: "deleteConfirmField", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: false, transformFunction: null }, canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null }, canDelete: { classPropertyName: "canDelete", publicName: "canDelete", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCreate: "onCreate", onLazyLoad: "onLazyLoad", onSearch: "onSearch" }, queries: [{ propertyName: "columnTemplates", predicate: BaseListTemplateDirective, isSignal: true }], ngImport: i0, template: "<f-card>\n  <ng-template #header>\n    @if (title() || searchable() || showCreateButton()) {\n      <div class=\"flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 p-4\">\n        @if (title()) {\n          <h2 class=\"text-xl font-semibold m-0\">{{ title() }}</h2>\n        }\n        <div class=\"flex items-center gap-2\" [class.ml-auto]=\"!!title()\">\n          @if (searchable()) {\n            <f-iconfield>\n              <f-inputicon><ui-icon name=\"search\" class=\"text-sm\"></ui-icon></f-inputicon>\n              <input\n                fInputText\n                type=\"text\"\n                [ngModel]=\"searchTerm()\"\n                (ngModelChange)=\"onSearchChange($event)\"\n                [placeholder]=\"t('shared.search')\"\n              />\n            </f-iconfield>\n          }\n          @if (showCreateButton()) {\n            <button\n              fButton\n              (click)=\"handleCreate()\"\n            >\n              <ui-icon pButtonIcon [name]=\"createButtonIcon()\"></ui-icon>\n              <span pButtonLabel>{{ resolvedCreateLabel() }}</span>\n            </button>\n          }\n        </div>\n      </div>\n    }\n  </ng-template>\n\n  <div class=\"overflow-x-auto\">\n    <f-table\n      [value]=\"effectiveData()\"\n      [loading]=\"effectiveIsLoading()\"\n      [lazy]=\"true\"\n      [scrollable]=\"true\"\n      [paginator]=\"effectiveTotal() > pageSize()\"\n      [rows]=\"pageSize()\"\n      [totalRecords]=\"effectiveTotal()\"\n      [first]=\"first()\"\n      (onLazyLoad)=\"handleLazyLoad($event)\"\n      [showCurrentPageReport]=\"true\"\n      [currentPageReportTemplate]=\"t('shared.pagination.report')\"\n      class=\"p-datatable-striped\"\n    >\n      <ng-template #header>\n        <tr>\n          @for (col of visibleColumns(); track col.field) {\n            <th [style.width]=\"col.width\" [style.min-width]=\"col.minWidth\" [class]=\"getCellClass(col)\">\n              {{ col.header }}\n            </th>\n          }\n          @if (effectiveActions().length > 0) {\n            <th style=\"width: 120px; text-align: center;\">{{ t('shared.actions') }}</th>\n          }\n        </tr>\n      </ng-template>\n\n      <ng-template #body let-item>\n        <tr>\n          @for (col of visibleColumns(); track col.field) {\n            <td [class]=\"getCellClass(col)\">\n              @switch (col.type ?? 'text') {\n                @case ('tag') {\n                  @if (getTagConfig(col, getFieldValue(item, col.field)); as tagCfg) {\n                    <f-tag [severity]=\"tagCfg.severity\" [value]=\"tagCfg.label ?? getFieldValueAsString(item, col.field)\" />\n                  } @else {\n                    {{ getFieldValueAsString(item, col.field) }}\n                  }\n                }\n                @case ('boolean') {\n                  <f-tag\n                    [severity]=\"getFieldValue(item, col.field) ? 'success' : 'danger'\"\n                    [value]=\"getFieldValue(item, col.field) ? t('shared.yes') : t('shared.no')\"\n                  />\n                }\n                @case ('date') {\n                  {{ getFieldValueAsString(item, col.field) | date: (col.dateFormat ?? 'dd/MM/yyyy') }}\n                }\n                @case ('number') {\n                  {{ getFieldValueAsString(item, col.field) | number }}\n                }\n                @case ('custom') {\n                  <ng-container\n                    *ngTemplateOutlet=\"getColumnTemplate(col.field); context: { $implicit: item, field: col.field }\"\n                  />\n                }\n                @default {\n                  {{ truncateText(getFieldValue(item, col.field), col.truncate) }}\n                }\n              }\n            </td>\n          }\n          @if (effectiveActions().length > 0) {\n            <td>\n              <div class=\"flex items-center justify-center gap-2\">\n                @for (action of effectiveActions(); track $index) {\n                  @if (!action.show || action.show(item)) {\n                    <button\n                      fButton\n                      [severity]=\"action.severity ?? 'secondary'\"\n                      [fTooltip]=\"action.tooltip ? t(action.tooltip) : ''\"\n                      [disabled]=\"action.disabled ? action.disabled(item) : false\"\n                      (click)=\"action.handler(item)\"\n                      [rounded]=\"true\"\n                      [text]=\"true\"\n                    >\n                      <ui-icon pButtonIcon [name]=\"action.icon\"></ui-icon>\n                    </button>\n                  }\n                }\n              </div>\n            </td>\n          }\n        </tr>\n      </ng-template>\n\n      <ng-template #emptymessage>\n        <tr>\n          <td [attr.colspan]=\"columnCount()\">\n            <div class=\"flex flex-col items-center justify-center py-12 text-surface-400\">\n              <ui-icon name=\"inbox\" class=\"text-5xl mb-3\"></ui-icon>\n              <span>{{ resolvedEmptyMessage() }}</span>\n            </div>\n          </td>\n        </tr>\n      </ng-template>\n    </f-table>\n  </div>\n</f-card>\n", dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: UiModule }, { kind: "directive", type: i3.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "rounded", "raised", "fluid", "disabled", "loading", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i3.TagComponent, selector: "f-tag", inputs: ["value", "severity", "icon", "rounded", "color"] }, { kind: "component", type: i3.IconFieldComponent, selector: "f-iconfield" }, { kind: "component", type: i3.InputIconComponent, selector: "f-inputicon", inputs: ["styleClass"] }, { kind: "directive", type: i3.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched"] }, { kind: "component", type: i3.CardComponent, selector: "f-card", inputs: ["header", "subheader", "styleClass"] }, { kind: "component", type: i3.TableComponent, selector: "f-table", inputs: ["value", "lazy", "loading", "rows", "totalRecords", "rowHover", "dataKey", "scrollable", "paginator", "first", "rowsPerPageOptions", "showCurrentPageReport", "currentPageReportTemplate", "tableStyle", "styleClass", "globalFilterFields", "sortField", "sortOrder"], outputs: ["sortFieldChange", "sortOrderChange", "onLazyLoad", "onSort"] }, { kind: "directive", type: i3.TooltipDirective, selector: "[fTooltip]", inputs: ["fTooltip", "tooltipPosition", "tooltipStyleClass", "disabled", "tooltipEvent", "showDelay", "hideDelay"] }, { kind: "component", type: i3.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: InlineSvgComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BaseListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'inline-svg', encapsulation: ViewEncapsulation.None, template: `
-    @if (svg.hasValue()) {
-      <span [innerHTML]="svg.value()"></span>
-    }
-  `, styles: ["inline-svg{display:inline-flex;align-items:center}inline-svg span{display:inline-flex;align-items:center;height:100%;width:100%}inline-svg svg{height:100%;width:auto}\n"] }]
-        }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: true }] }] } });
+            args: [{ selector: 'lib-base-list', imports: [AngularModule, UiModule], template: "<f-card>\n  <ng-template #header>\n    @if (title() || searchable() || showCreateButton()) {\n      <div class=\"flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 p-4\">\n        @if (title()) {\n          <h2 class=\"text-xl font-semibold m-0\">{{ title() }}</h2>\n        }\n        <div class=\"flex items-center gap-2\" [class.ml-auto]=\"!!title()\">\n          @if (searchable()) {\n            <f-iconfield>\n              <f-inputicon><ui-icon name=\"search\" class=\"text-sm\"></ui-icon></f-inputicon>\n              <input\n                fInputText\n                type=\"text\"\n                [ngModel]=\"searchTerm()\"\n                (ngModelChange)=\"onSearchChange($event)\"\n                [placeholder]=\"t('shared.search')\"\n              />\n            </f-iconfield>\n          }\n          @if (showCreateButton()) {\n            <button\n              fButton\n              (click)=\"handleCreate()\"\n            >\n              <ui-icon pButtonIcon [name]=\"createButtonIcon()\"></ui-icon>\n              <span pButtonLabel>{{ resolvedCreateLabel() }}</span>\n            </button>\n          }\n        </div>\n      </div>\n    }\n  </ng-template>\n\n  <div class=\"overflow-x-auto\">\n    <f-table\n      [value]=\"effectiveData()\"\n      [loading]=\"effectiveIsLoading()\"\n      [lazy]=\"true\"\n      [scrollable]=\"true\"\n      [paginator]=\"effectiveTotal() > pageSize()\"\n      [rows]=\"pageSize()\"\n      [totalRecords]=\"effectiveTotal()\"\n      [first]=\"first()\"\n      (onLazyLoad)=\"handleLazyLoad($event)\"\n      [showCurrentPageReport]=\"true\"\n      [currentPageReportTemplate]=\"t('shared.pagination.report')\"\n      class=\"p-datatable-striped\"\n    >\n      <ng-template #header>\n        <tr>\n          @for (col of visibleColumns(); track col.field) {\n            <th [style.width]=\"col.width\" [style.min-width]=\"col.minWidth\" [class]=\"getCellClass(col)\">\n              {{ col.header }}\n            </th>\n          }\n          @if (effectiveActions().length > 0) {\n            <th style=\"width: 120px; text-align: center;\">{{ t('shared.actions') }}</th>\n          }\n        </tr>\n      </ng-template>\n\n      <ng-template #body let-item>\n        <tr>\n          @for (col of visibleColumns(); track col.field) {\n            <td [class]=\"getCellClass(col)\">\n              @switch (col.type ?? 'text') {\n                @case ('tag') {\n                  @if (getTagConfig(col, getFieldValue(item, col.field)); as tagCfg) {\n                    <f-tag [severity]=\"tagCfg.severity\" [value]=\"tagCfg.label ?? getFieldValueAsString(item, col.field)\" />\n                  } @else {\n                    {{ getFieldValueAsString(item, col.field) }}\n                  }\n                }\n                @case ('boolean') {\n                  <f-tag\n                    [severity]=\"getFieldValue(item, col.field) ? 'success' : 'danger'\"\n                    [value]=\"getFieldValue(item, col.field) ? t('shared.yes') : t('shared.no')\"\n                  />\n                }\n                @case ('date') {\n                  {{ getFieldValueAsString(item, col.field) | date: (col.dateFormat ?? 'dd/MM/yyyy') }}\n                }\n                @case ('number') {\n                  {{ getFieldValueAsString(item, col.field) | number }}\n                }\n                @case ('custom') {\n                  <ng-container\n                    *ngTemplateOutlet=\"getColumnTemplate(col.field); context: { $implicit: item, field: col.field }\"\n                  />\n                }\n                @default {\n                  {{ truncateText(getFieldValue(item, col.field), col.truncate) }}\n                }\n              }\n            </td>\n          }\n          @if (effectiveActions().length > 0) {\n            <td>\n              <div class=\"flex items-center justify-center gap-2\">\n                @for (action of effectiveActions(); track $index) {\n                  @if (!action.show || action.show(item)) {\n                    <button\n                      fButton\n                      [severity]=\"action.severity ?? 'secondary'\"\n                      [fTooltip]=\"action.tooltip ? t(action.tooltip) : ''\"\n                      [disabled]=\"action.disabled ? action.disabled(item) : false\"\n                      (click)=\"action.handler(item)\"\n                      [rounded]=\"true\"\n                      [text]=\"true\"\n                    >\n                      <ui-icon pButtonIcon [name]=\"action.icon\"></ui-icon>\n                    </button>\n                  }\n                }\n              </div>\n            </td>\n          }\n        </tr>\n      </ng-template>\n\n      <ng-template #emptymessage>\n        <tr>\n          <td [attr.colspan]=\"columnCount()\">\n            <div class=\"flex flex-col items-center justify-center py-12 text-surface-400\">\n              <ui-icon name=\"inbox\" class=\"text-5xl mb-3\"></ui-icon>\n              <span>{{ resolvedEmptyMessage() }}</span>\n            </div>\n          </td>\n        </tr>\n      </ng-template>\n    </f-table>\n  </div>\n</f-card>\n" }]
+        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], showCreateButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCreateButton", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], createButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "createButtonLabel", required: false }] }], createButtonIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "createButtonIcon", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], service: [{ type: i0.Input, args: [{ isSignal: true, alias: "service", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], createRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "createRoute", required: false }] }], editRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "editRoute", required: false }] }], deleteConfirmField: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteConfirmField", required: false }] }], idField: [{ type: i0.Input, args: [{ isSignal: true, alias: "idField", required: false }] }], canEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "canEdit", required: false }] }], canDelete: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDelete", required: false }] }], onCreate: [{ type: i0.Output, args: ["onCreate"] }], onLazyLoad: [{ type: i0.Output, args: ["onLazyLoad"] }], onSearch: [{ type: i0.Output, args: ["onSearch"] }], columnTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => BaseListTemplateDirective), { isSignal: true }] }] } });
 
 /**
  * Injection Tokens for Provider Interfaces
@@ -2265,9 +2058,12 @@ class FileUploaderComponent {
         optional: true,
     });
     fileProvider = inject(FILE_PROVIDER, { optional: true });
-    uploadFile = input(...(ngDevMode ? [undefined, { debugName: "uploadFile" }] : []));
-    uploadMultipleFiles = input(...(ngDevMode ? [undefined, { debugName: "uploadMultipleFiles" }] : []));
-    hasUploadCapability = computed(() => !!this.uploadFile() || !!this.fileProvider, ...(ngDevMode ? [{ debugName: "hasUploadCapability" }] : []));
+    uploadFile = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "uploadFile" }] : /* istanbul ignore next */ []));
+    uploadMultipleFiles = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "uploadMultipleFiles" }] : /* istanbul ignore next */ []));
+    hasUploadCapability = computed(() => !!this.uploadFile() || !!this.fileProvider, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasUploadCapability" }] : /* istanbul ignore next */ []));
     getUploadFn() {
         const inputFn = this.uploadFile();
         if (inputFn)
@@ -2285,24 +2081,38 @@ class FileUploaderComponent {
         }
         return undefined;
     }
-    acceptTypes = input([], ...(ngDevMode ? [{ debugName: "acceptTypes" }] : []));
-    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
-    maxFiles = input(10, ...(ngDevMode ? [{ debugName: "maxFiles" }] : []));
-    maxSizeMb = input(10, ...(ngDevMode ? [{ debugName: "maxSizeMb" }] : []));
-    uploadOptions = input({}, ...(ngDevMode ? [{ debugName: "uploadOptions" }] : []));
-    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
-    showPreview = input(true, ...(ngDevMode ? [{ debugName: "showPreview" }] : []));
-    autoUpload = input(true, ...(ngDevMode ? [{ debugName: "autoUpload" }] : []));
+    acceptTypes = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "acceptTypes" }] : /* istanbul ignore next */ []));
+    multiple = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    maxFiles = input(10, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxFiles" }] : /* istanbul ignore next */ []));
+    maxSizeMb = input(10, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxSizeMb" }] : /* istanbul ignore next */ []));
+    uploadOptions = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uploadOptions" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    showPreview = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showPreview" }] : /* istanbul ignore next */ []));
+    autoUpload = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autoUpload" }] : /* istanbul ignore next */ []));
     fileUploaded = output();
     filesUploaded = output();
     onError = output();
     fileSelected = output();
-    isUploading = signal(false, ...(ngDevMode ? [{ debugName: "isUploading" }] : []));
-    isDragOver = signal(false, ...(ngDevMode ? [{ debugName: "isDragOver" }] : []));
-    uploadProgress = signal(0, ...(ngDevMode ? [{ debugName: "uploadProgress" }] : []));
-    uploadingFileName = signal('', ...(ngDevMode ? [{ debugName: "uploadingFileName" }] : []));
-    selectedFiles = signal([], ...(ngDevMode ? [{ debugName: "selectedFiles" }] : []));
-    acceptString = computed(() => getAcceptString(this.acceptTypes()), ...(ngDevMode ? [{ debugName: "acceptString" }] : []));
+    isUploading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isUploading" }] : /* istanbul ignore next */ []));
+    isDragOver = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDragOver" }] : /* istanbul ignore next */ []));
+    uploadProgress = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uploadProgress" }] : /* istanbul ignore next */ []));
+    uploadingFileName = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uploadingFileName" }] : /* istanbul ignore next */ []));
+    selectedFiles = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedFiles" }] : /* istanbul ignore next */ []));
+    acceptString = computed(() => getAcceptString(this.acceptTypes()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "acceptString" }] : /* istanbul ignore next */ []));
     acceptTypesDisplay = computed(() => {
         const types = this.acceptTypes();
         if (!types.length)
@@ -2317,7 +2127,8 @@ class FileUploaderComponent {
         if (typesStr === JSON.stringify(FILE_TYPE_FILTERS.AUDIO))
             return this.t('shared.file.type.audio');
         return types.map((t) => t.split('/')[1] || t).join(', ');
-    }, ...(ngDevMode ? [{ debugName: "acceptTypesDisplay" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "acceptTypesDisplay" }] : /* istanbul ignore next */ []));
     onDragOver(event) {
         event.preventDefault();
         event.stopPropagation();
@@ -2473,13 +2284,13 @@ class FileUploaderComponent {
         }
         return key;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FileUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: FileUploaderComponent, isStandalone: true, selector: "lib-file-uploader", inputs: { uploadFile: { classPropertyName: "uploadFile", publicName: "uploadFile", isSignal: true, isRequired: false, transformFunction: null }, uploadMultipleFiles: { classPropertyName: "uploadMultipleFiles", publicName: "uploadMultipleFiles", isSignal: true, isRequired: false, transformFunction: null }, acceptTypes: { classPropertyName: "acceptTypes", publicName: "acceptTypes", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, maxSizeMb: { classPropertyName: "maxSizeMb", publicName: "maxSizeMb", isSignal: true, isRequired: false, transformFunction: null }, uploadOptions: { classPropertyName: "uploadOptions", publicName: "uploadOptions", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showPreview: { classPropertyName: "showPreview", publicName: "showPreview", isSignal: true, isRequired: false, transformFunction: null }, autoUpload: { classPropertyName: "autoUpload", publicName: "autoUpload", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileUploaded: "fileUploaded", filesUploaded: "filesUploaded", onError: "onError", fileSelected: "fileSelected" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FileUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: FileUploaderComponent, isStandalone: true, selector: "lib-file-uploader", inputs: { uploadFile: { classPropertyName: "uploadFile", publicName: "uploadFile", isSignal: true, isRequired: false, transformFunction: null }, uploadMultipleFiles: { classPropertyName: "uploadMultipleFiles", publicName: "uploadMultipleFiles", isSignal: true, isRequired: false, transformFunction: null }, acceptTypes: { classPropertyName: "acceptTypes", publicName: "acceptTypes", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxFiles: { classPropertyName: "maxFiles", publicName: "maxFiles", isSignal: true, isRequired: false, transformFunction: null }, maxSizeMb: { classPropertyName: "maxSizeMb", publicName: "maxSizeMb", isSignal: true, isRequired: false, transformFunction: null }, uploadOptions: { classPropertyName: "uploadOptions", publicName: "uploadOptions", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showPreview: { classPropertyName: "showPreview", publicName: "showPreview", isSignal: true, isRequired: false, transformFunction: null }, autoUpload: { classPropertyName: "autoUpload", publicName: "autoUpload", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileUploaded: "fileUploaded", filesUploaded: "filesUploaded", onError: "onError", fileSelected: "fileSelected" }, ngImport: i0, template: `
     @if (!hasUploadCapability()) {
       <div
         class="p-4 border border-dashed border-orange-300 bg-orange-50 dark:bg-orange-900/20 rounded-lg text-center"
       >
-        <i class="pi pi-exclamation-triangle text-2xl text-orange-500 mb-2"></i>
+        <ui-icon name="exclamation-triangle" class="text-2xl text-orange-500 mb-2"></ui-icon>
         <p class="text-sm text-orange-700 dark:text-orange-300">
           {{
             'shared.upload.provider.not.configured'
@@ -2503,9 +2314,7 @@ class FileUploaderComponent {
         >
           @if (isUploading()) {
             <div class="flex flex-col items-center">
-              <i
-                class="pi pi-spin pi-spinner text-3xl sm:text-4xl text-primary"
-              ></i>
+              <ui-icon name="loader-circle" spin class="text-3xl sm:text-4xl text-primary"></ui-icon>
               <p class="mt-2 text-sm sm:text-base break-all px-2">
                 {{
                   'shared.upload.uploading'
@@ -2513,7 +2322,7 @@ class FileUploaderComponent {
                 }}
               </p>
               @if (uploadProgress() > 0) {
-                <p-progressBar
+                <f-progressbar
                   [value]="uploadProgress()"
                   [showValue]="true"
                   class="w-full mt-2 max-w-xs"
@@ -2522,9 +2331,7 @@ class FileUploaderComponent {
             </div>
           } @else {
             <div class="flex flex-col items-center">
-              <i
-                class="pi pi-cloud-upload text-3xl sm:text-4xl text-primary"
-              ></i>
+              <ui-icon name="cloud-upload" class="text-3xl sm:text-4xl text-primary"></ui-icon>
               <p class="mt-2 mb-1 font-semibold text-sm sm:text-base">
                 {{
                   multiple()
@@ -2567,10 +2374,10 @@ class FileUploaderComponent {
               <div
                 class="file-preview-item flex items-center gap-2 p-2 sm:p-3 rounded-lg"
               >
-                <i
-                  [class]="fileIcon"
+                <ui-icon
+                  [name]="fileIcon"
                   class="text-lg sm:text-xl flex-shrink-0"
-                ></i>
+                ></ui-icon>
                 <span class="flex-1 truncate text-sm sm:text-base min-w-0">{{
                   file.name
                 }}</span>
@@ -2578,31 +2385,33 @@ class FileUploaderComponent {
                   class="text-xs sm:text-sm text-color-secondary whitespace-nowrap"
                   >{{ fileSize }}</span
                 >
-                <p-button
-                  icon="pi pi-times"
+                <button
+                  fButton
                   [text]="true"
                   [rounded]="true"
                   size="small"
                   severity="secondary"
                   [disabled]="isUploading()"
-                  (onClick)="removeFile(file)"
-                />
+                  (click)="removeFile(file)"
+                >
+                  <ui-icon pButtonIcon name="times"></ui-icon>
+                </button>
               </div>
             }
           </div>
         }
       </div>
     }
-  `, isInline: true, styles: [".upload-zone{border-color:var(--p-surface-300);background:var(--p-surface-50)}.upload-zone:hover:not(.cursor-not-allowed){border-color:var(--p-primary-color);background:var(--p-surface-100)}.upload-zone.drag-over{border-color:var(--p-primary-color);background:var(--p-primary-50)}:host-context(.p-dark) .upload-zone,.dark .upload-zone{border-color:var(--p-surface-600);background:var(--p-surface-800)}:host-context(.p-dark) .upload-zone:hover:not(.cursor-not-allowed),.dark .upload-zone:hover:not(.cursor-not-allowed){border-color:var(--p-primary-color);background:var(--p-surface-700)}:host-context(.p-dark) .upload-zone.drag-over,.dark .upload-zone.drag-over{border-color:var(--p-primary-color);background:var(--p-primary-900)}.file-preview-item{border:1px solid var(--p-surface-200);background:var(--p-surface-0)}:host-context(.p-dark) .file-preview-item,.dark .file-preview-item{border-color:var(--p-surface-600);background:var(--p-surface-800)}\n"], dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i3.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i2$1.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "unit", "mode", "color"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+  `, isInline: true, styles: [".upload-zone{border-color:var(--f-surface-300);background:var(--f-surface-50)}.upload-zone:hover:not(.cursor-not-allowed){border-color:var(--f-primary-color);background:var(--f-surface-100)}.upload-zone.drag-over{border-color:var(--f-primary-color);background:var(--f-primary-50)}:host-context(.p-dark) .upload-zone,.dark .upload-zone{border-color:var(--f-surface-600);background:var(--f-surface-800)}:host-context(.p-dark) .upload-zone:hover:not(.cursor-not-allowed),.dark .upload-zone:hover:not(.cursor-not-allowed){border-color:var(--f-primary-color);background:var(--f-surface-700)}:host-context(.p-dark) .upload-zone.drag-over,.dark .upload-zone.drag-over{border-color:var(--f-primary-color);background:var(--f-primary-900)}.file-preview-item{border:1px solid var(--f-surface-200);background:var(--f-surface-0)}:host-context(.p-dark) .file-preview-item,.dark .file-preview-item{border-color:var(--f-surface-600);background:var(--f-surface-800)}\n"], dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "ngmodule", type: UiModule }, { kind: "directive", type: i3.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "rounded", "raised", "fluid", "disabled", "loading", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i3.ProgressbarComponent, selector: "f-progressbar", inputs: ["value", "mode", "showValue"] }, { kind: "component", type: i3.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FileUploaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FileUploaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-file-uploader', imports: [AngularModule, PrimeModule, TranslatePipe], template: `
+            args: [{ selector: 'lib-file-uploader', imports: [AngularModule, UiModule, TranslatePipe], template: `
     @if (!hasUploadCapability()) {
       <div
         class="p-4 border border-dashed border-orange-300 bg-orange-50 dark:bg-orange-900/20 rounded-lg text-center"
       >
-        <i class="pi pi-exclamation-triangle text-2xl text-orange-500 mb-2"></i>
+        <ui-icon name="exclamation-triangle" class="text-2xl text-orange-500 mb-2"></ui-icon>
         <p class="text-sm text-orange-700 dark:text-orange-300">
           {{
             'shared.upload.provider.not.configured'
@@ -2626,9 +2435,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
         >
           @if (isUploading()) {
             <div class="flex flex-col items-center">
-              <i
-                class="pi pi-spin pi-spinner text-3xl sm:text-4xl text-primary"
-              ></i>
+              <ui-icon name="loader-circle" spin class="text-3xl sm:text-4xl text-primary"></ui-icon>
               <p class="mt-2 text-sm sm:text-base break-all px-2">
                 {{
                   'shared.upload.uploading'
@@ -2636,7 +2443,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                 }}
               </p>
               @if (uploadProgress() > 0) {
-                <p-progressBar
+                <f-progressbar
                   [value]="uploadProgress()"
                   [showValue]="true"
                   class="w-full mt-2 max-w-xs"
@@ -2645,9 +2452,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
             </div>
           } @else {
             <div class="flex flex-col items-center">
-              <i
-                class="pi pi-cloud-upload text-3xl sm:text-4xl text-primary"
-              ></i>
+              <ui-icon name="cloud-upload" class="text-3xl sm:text-4xl text-primary"></ui-icon>
               <p class="mt-2 mb-1 font-semibold text-sm sm:text-base">
                 {{
                   multiple()
@@ -2690,10 +2495,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
               <div
                 class="file-preview-item flex items-center gap-2 p-2 sm:p-3 rounded-lg"
               >
-                <i
-                  [class]="fileIcon"
+                <ui-icon
+                  [name]="fileIcon"
                   class="text-lg sm:text-xl flex-shrink-0"
-                ></i>
+                ></ui-icon>
                 <span class="flex-1 truncate text-sm sm:text-base min-w-0">{{
                   file.name
                 }}</span>
@@ -2701,22 +2506,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                   class="text-xs sm:text-sm text-color-secondary whitespace-nowrap"
                   >{{ fileSize }}</span
                 >
-                <p-button
-                  icon="pi pi-times"
+                <button
+                  fButton
                   [text]="true"
                   [rounded]="true"
                   size="small"
                   severity="secondary"
                   [disabled]="isUploading()"
-                  (onClick)="removeFile(file)"
-                />
+                  (click)="removeFile(file)"
+                >
+                  <ui-icon pButtonIcon name="times"></ui-icon>
+                </button>
               </div>
             }
           </div>
         }
       </div>
     }
-  `, styles: [".upload-zone{border-color:var(--p-surface-300);background:var(--p-surface-50)}.upload-zone:hover:not(.cursor-not-allowed){border-color:var(--p-primary-color);background:var(--p-surface-100)}.upload-zone.drag-over{border-color:var(--p-primary-color);background:var(--p-primary-50)}:host-context(.p-dark) .upload-zone,.dark .upload-zone{border-color:var(--p-surface-600);background:var(--p-surface-800)}:host-context(.p-dark) .upload-zone:hover:not(.cursor-not-allowed),.dark .upload-zone:hover:not(.cursor-not-allowed){border-color:var(--p-primary-color);background:var(--p-surface-700)}:host-context(.p-dark) .upload-zone.drag-over,.dark .upload-zone.drag-over{border-color:var(--p-primary-color);background:var(--p-primary-900)}.file-preview-item{border:1px solid var(--p-surface-200);background:var(--p-surface-0)}:host-context(.p-dark) .file-preview-item,.dark .file-preview-item{border-color:var(--p-surface-600);background:var(--p-surface-800)}\n"] }]
+  `, styles: [".upload-zone{border-color:var(--f-surface-300);background:var(--f-surface-50)}.upload-zone:hover:not(.cursor-not-allowed){border-color:var(--f-primary-color);background:var(--f-surface-100)}.upload-zone.drag-over{border-color:var(--f-primary-color);background:var(--f-primary-50)}:host-context(.p-dark) .upload-zone,.dark .upload-zone{border-color:var(--f-surface-600);background:var(--f-surface-800)}:host-context(.p-dark) .upload-zone:hover:not(.cursor-not-allowed),.dark .upload-zone:hover:not(.cursor-not-allowed){border-color:var(--f-primary-color);background:var(--f-surface-700)}:host-context(.p-dark) .upload-zone.drag-over,.dark .upload-zone.drag-over{border-color:var(--f-primary-color);background:var(--f-primary-900)}.file-preview-item{border:1px solid var(--f-surface-200);background:var(--f-surface-0)}:host-context(.p-dark) .file-preview-item,.dark .file-preview-item{border-color:var(--f-surface-600);background:var(--f-surface-800)}\n"] }]
         }], propDecorators: { uploadFile: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadFile", required: false }] }], uploadMultipleFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadMultipleFiles", required: false }] }], acceptTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptTypes", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxFiles", required: false }] }], maxSizeMb: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSizeMb", required: false }] }], uploadOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadOptions", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPreview", required: false }] }], autoUpload: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoUpload", required: false }] }], fileUploaded: [{ type: i0.Output, args: ["fileUploaded"] }], filesUploaded: [{ type: i0.Output, args: ["filesUploaded"] }], onError: [{ type: i0.Output, args: ["onError"] }], fileSelected: [{ type: i0.Output, args: ["fileSelected"] }] } });
 
 const DEFAULT_PAGE_SIZE$1 = 20;
@@ -2729,9 +2536,12 @@ class FileSelectorDialogComponent {
     fileProvider = inject(FILE_PROVIDER, { optional: true });
     abortController = null;
     searchDebounceTimer = null;
-    header = input(...(ngDevMode ? [undefined, { debugName: "header" }] : []));
-    acceptTypes = input([], ...(ngDevMode ? [{ debugName: "acceptTypes" }] : []));
-    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+    header = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "header" }] : /* istanbul ignore next */ []));
+    acceptTypes = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "acceptTypes" }] : /* istanbul ignore next */ []));
+    multiple = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
     dialogHeader = computed(() => {
         const customHeader = this.header();
         if (customHeader)
@@ -2739,41 +2549,63 @@ class FileSelectorDialogComponent {
         return this.t(this.multiple()
             ? 'shared.file.selector.select.files'
             : 'shared.file.selector.select.file');
-    }, ...(ngDevMode ? [{ debugName: "dialogHeader" }] : []));
-    maxSelection = input(10, ...(ngDevMode ? [{ debugName: "maxSelection" }] : []));
-    pageSize = input(DEFAULT_PAGE_SIZE$1, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
-    folderId = input(...(ngDevMode ? [undefined, { debugName: "folderId" }] : [])); // Filter by folder
-    withUploader = input(false, ...(ngDevMode ? [{ debugName: "withUploader" }] : []));
-    visible = model(false, ...(ngDevMode ? [{ debugName: "visible" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dialogHeader" }] : /* istanbul ignore next */ []));
+    maxSelection = input(10, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxSelection" }] : /* istanbul ignore next */ []));
+    pageSize = input(DEFAULT_PAGE_SIZE$1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    folderId = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "folderId" }] : /* istanbul ignore next */ [])); // Filter by folder
+    withUploader = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "withUploader" }] : /* istanbul ignore next */ []));
+    visible = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
     fileSelected = output();
     filesSelected = output();
     closed = output();
     onError = output();
-    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
-    files = signal([], ...(ngDevMode ? [{ debugName: "files" }] : []));
-    selectedFiles = signal([], ...(ngDevMode ? [{ debugName: "selectedFiles" }] : []));
-    total = signal(undefined, ...(ngDevMode ? [{ debugName: "total" }] : []));
+    isLoading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    files = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
+    selectedFiles = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedFiles" }] : /* istanbul ignore next */ []));
+    total = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
     pagination = signal({
         pageSize: DEFAULT_PAGE_SIZE$1,
         currentPage: 0,
-    }, ...(ngDevMode ? [{ debugName: "pagination" }] : []));
-    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
-    folders = signal([], ...(ngDevMode ? [{ debugName: "folders" }] : []));
-    selectedFolderId = signal(null, ...(ngDevMode ? [{ debugName: "selectedFolderId" }] : []));
-    foldersLoading = signal(false, ...(ngDevMode ? [{ debugName: "foldersLoading" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pagination" }] : /* istanbul ignore next */ []));
+    searchTerm = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
+    folders = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "folders" }] : /* istanbul ignore next */ []));
+    selectedFolderId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedFolderId" }] : /* istanbul ignore next */ []));
+    foldersLoading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "foldersLoading" }] : /* istanbul ignore next */ []));
     foldersPagination = signal({
         pageSize: DEFAULT_SELECTOR_PAGE_SIZE,
         currentPage: 0,
-    }, ...(ngDevMode ? [{ debugName: "foldersPagination" }] : []));
-    foldersTotal = signal(undefined, ...(ngDevMode ? [{ debugName: "foldersTotal" }] : []));
-    storageConfigs = signal([], ...(ngDevMode ? [{ debugName: "storageConfigs" }] : []));
-    selectedStorageConfigId = signal(null, ...(ngDevMode ? [{ debugName: "selectedStorageConfigId" }] : []));
-    storageConfigsLoading = signal(false, ...(ngDevMode ? [{ debugName: "storageConfigsLoading" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "foldersPagination" }] : /* istanbul ignore next */ []));
+    foldersTotal = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "foldersTotal" }] : /* istanbul ignore next */ []));
+    storageConfigs = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "storageConfigs" }] : /* istanbul ignore next */ []));
+    selectedStorageConfigId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedStorageConfigId" }] : /* istanbul ignore next */ []));
+    storageConfigsLoading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "storageConfigsLoading" }] : /* istanbul ignore next */ []));
     storageConfigsPagination = signal({
         pageSize: DEFAULT_SELECTOR_PAGE_SIZE,
         currentPage: 0,
-    }, ...(ngDevMode ? [{ debugName: "storageConfigsPagination" }] : []));
-    storageConfigsTotal = signal(undefined, ...(ngDevMode ? [{ debugName: "storageConfigsTotal" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "storageConfigsPagination" }] : /* istanbul ignore next */ []));
+    storageConfigsTotal = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "storageConfigsTotal" }] : /* istanbul ignore next */ []));
     effectiveStorageConfigId = computed(() => {
         const selected = this.selectedStorageConfigId();
         if (selected)
@@ -2781,7 +2613,8 @@ class FileSelectorDialogComponent {
         // Find default config
         const defaultConfig = this.storageConfigs().find((c) => c.isDefault);
         return defaultConfig?.id;
-    }, ...(ngDevMode ? [{ debugName: "effectiveStorageConfigId" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveStorageConfigId" }] : /* istanbul ignore next */ []));
     uploadFileFn = (file, options) => {
         if (!this.fileProvider)
             throw new Error('shared.file.selector.provider.not.configured');
@@ -3066,9 +2899,9 @@ class FileSelectorDialogComponent {
         }
         return key;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FileSelectorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: FileSelectorDialogComponent, isStandalone: true, selector: "lib-file-selector-dialog", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, acceptTypes: { classPropertyName: "acceptTypes", publicName: "acceptTypes", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxSelection: { classPropertyName: "maxSelection", publicName: "maxSelection", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, folderId: { classPropertyName: "folderId", publicName: "folderId", isSignal: true, isRequired: false, transformFunction: null }, withUploader: { classPropertyName: "withUploader", publicName: "withUploader", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", fileSelected: "fileSelected", filesSelected: "filesSelected", closed: "closed", onError: "onError" }, ngImport: i0, template: `
-    <p-dialog
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FileSelectorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: FileSelectorDialogComponent, isStandalone: true, selector: "lib-file-selector-dialog", inputs: { header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, acceptTypes: { classPropertyName: "acceptTypes", publicName: "acceptTypes", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, maxSelection: { classPropertyName: "maxSelection", publicName: "maxSelection", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, folderId: { classPropertyName: "folderId", publicName: "folderId", isSignal: true, isRequired: false, transformFunction: null }, withUploader: { classPropertyName: "withUploader", publicName: "withUploader", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", fileSelected: "fileSelected", filesSelected: "filesSelected", closed: "closed", onError: "onError" }, ngImport: i0, template: `
+    <f-dialog
       [header]="dialogHeader()"
       [(visible)]="visible"
       [modal]="true"
@@ -3082,9 +2915,7 @@ class FileSelectorDialogComponent {
     >
       @if (!fileProvider) {
         <div class="p-6 text-center">
-          <i
-            class="pi pi-exclamation-triangle text-4xl text-orange-500 mb-3"
-          ></i>
+          <ui-icon name="exclamation-triangle" class="text-4xl text-orange-500 mb-3"></ui-icon>
           <p class="text-lg font-medium text-color mb-2">
             {{ 'shared.file.selector.provider.not.configured' | translate }}
           </p>
@@ -3095,12 +2926,12 @@ class FileSelectorDialogComponent {
               >provideStorageProviders()</code
             >
           </p>
-          <button
-            pButton
+          <f-button
             [label]="'shared.close' | translate"
-            class="p-button-text"
-            (click)="onCancel()"
-          ></button>
+            severity="secondary"
+            [text]="true"
+            (onClick)="onCancel()"
+          />
         </div>
       } @else {
         @if (withUploader()) {
@@ -3122,10 +2953,10 @@ class FileSelectorDialogComponent {
         <div
           class="flex flex-col sm:flex-row gap-2 mb-3 items-stretch sm:items-center"
         >
-          <p-iconfield class="flex-1">
-            <p-inputicon class="pi pi-search" />
+          <f-iconfield class="flex-1">
+            <f-inputicon><ui-icon name="search" /></f-inputicon>
             <input
-              pInputText
+              fInputText
               type="text"
               [ngModel]="searchTerm()"
               (ngModelChange)="onSearchChange($event)"
@@ -3134,10 +2965,10 @@ class FileSelectorDialogComponent {
               "
               class="w-full"
             />
-          </p-iconfield>
+          </f-iconfield>
 
           @if (fileProvider.loadFolders) {
-            <p-select
+            <f-select
               [options]="folders()"
               [ngModel]="selectedFolderId()"
               (ngModelChange)="onFolderChange($event)"
@@ -3152,23 +2983,23 @@ class FileSelectorDialogComponent {
               class="w-full sm:w-40"
               (onShow)="loadFolders()"
             >
-              <ng-template pTemplate="selectedItem" let-folder>
+              <ng-template #selectedItem let-folder>
                 <div class="flex items-center gap-2">
-                  <i class="pi pi-folder text-color-secondary"></i>
+                  <ui-icon name="folder" class="text-color-secondary"></ui-icon>
                   <span>{{ folder?.name }}</span>
                 </div>
               </ng-template>
-              <ng-template pTemplate="item" let-folder>
+              <ng-template #item let-folder>
                 <div class="flex items-center gap-2">
-                  <i class="pi pi-folder text-color-secondary"></i>
+                  <ui-icon name="folder" class="text-color-secondary"></ui-icon>
                   <span>{{ folder.name }}</span>
                 </div>
               </ng-template>
-            </p-select>
+            </f-select>
           }
 
           @if (fileProvider.loadStorageConfigs) {
-            <p-select
+            <f-select
               [options]="storageConfigs()"
               [ngModel]="selectedStorageConfigId()"
               (ngModelChange)="onStorageConfigChange($event)"
@@ -3183,9 +3014,9 @@ class FileSelectorDialogComponent {
               class="w-full sm:w-40"
               (onShow)="loadStorageConfigs()"
             >
-              <ng-template pTemplate="selectedItem" let-config>
+              <ng-template #selectedItem let-config>
                 <div class="flex items-center gap-2">
-                  <i class="pi pi-database text-color-secondary"></i>
+                  <ui-icon name="database" class="text-color-secondary"></ui-icon>
                   <span>{{ config?.name }}</span>
                   @if (config?.isDefault) {
                     <span
@@ -3195,9 +3026,9 @@ class FileSelectorDialogComponent {
                   }
                 </div>
               </ng-template>
-              <ng-template pTemplate="item" let-config>
+              <ng-template #item let-config>
                 <div class="flex items-center gap-2">
-                  <i class="pi pi-database text-color-secondary"></i>
+                  <ui-icon name="database" class="text-color-secondary"></ui-icon>
                   <span>{{ config.name }}</span>
                   @if (config.isDefault) {
                     <span
@@ -3207,7 +3038,7 @@ class FileSelectorDialogComponent {
                   }
                 </div>
               </ng-template>
-            </p-select>
+            </f-select>
           }
 
           @if (multiple()) {
@@ -3225,13 +3056,11 @@ class FileSelectorDialogComponent {
         <div class="file-grid" #scrollContainer (scroll)="onScroll($event)">
           @if (isLoading() && files().length === 0) {
             <div class="col-span-full flex justify-center p-4">
-              <i
-                class="pi pi-spin pi-spinner text-4xl text-color-secondary"
-              ></i>
+              <ui-icon name="loader-circle" spin class="text-4xl text-color-secondary"></ui-icon>
             </div>
           } @else if (files().length === 0) {
             <div class="col-span-full text-center p-4 text-color-secondary">
-              <i class="pi pi-inbox text-4xl mb-2 block"></i>
+              <ui-icon name="inbox" class="text-4xl mb-2 block"></ui-icon>
               <p>{{ 'shared.file.selector.no.files' | translate }}</p>
             </div>
           } @else {
@@ -3254,14 +3083,14 @@ class FileSelectorDialogComponent {
                       class="w-full h-full object-cover"
                     />
                   } @else {
-                    <i
-                      [class]="fileIcon"
+                    <ui-icon
+                      [name]="fileIcon"
                       class="text-4xl sm:text-5xl text-color-secondary"
-                    ></i>
+                    ></ui-icon>
                   }
                   @if (fileSelected) {
                     <div class="selected-overlay">
-                      <i class="pi pi-check text-xl sm:text-2xl"></i>
+                      <ui-icon name="check" class="text-xl sm:text-2xl"></ui-icon>
                     </div>
                   }
                 </div>
@@ -3282,26 +3111,24 @@ class FileSelectorDialogComponent {
 
             @if (isLoading()) {
               <div class="col-span-full flex justify-center p-2">
-                <i class="pi pi-spin pi-spinner text-color-secondary"></i>
+                <ui-icon name="loader-circle" spin class="text-color-secondary"></ui-icon>
               </div>
             }
           }
         </div>
 
-        <ng-template pTemplate="footer">
+        <ng-template #footer>
           <div
             class="flex flex-col-reverse sm:flex-row gap-2 w-full sm:w-auto sm:justify-end"
           >
-            <button
-              pButton
-              type="button"
+            <f-button
               [label]="'shared.cancel' | translate"
-              class="p-button-text w-full sm:w-auto"
-              (click)="onCancel()"
-            ></button>
-            <button
-              pButton
-              type="button"
+              severity="secondary"
+              [text]="true"
+              class="w-full sm:w-auto"
+              (onClick)="onCancel()"
+            />
+            <f-button
               [label]="
                 multiple()
                   ? ('shared.file.selector.select.multiple'
@@ -3310,18 +3137,18 @@ class FileSelectorDialogComponent {
               "
               [disabled]="selectedFiles().length === 0"
               class="w-full sm:w-auto"
-              (click)="onConfirm()"
-            ></button>
+              (onClick)="onConfirm()"
+            />
           </div>
         </ng-template>
       }
-    </p-dialog>
-  `, isInline: true, styles: [".file-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;max-height:300px;overflow-y:auto;padding:.5rem}@media(min-width:480px){.file-grid{grid-template-columns:repeat(3,1fr);max-height:350px}}@media(min-width:640px){.file-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem;max-height:400px}}.file-card{border:2px solid var(--p-surface-300);border-radius:var(--p-border-radius);cursor:pointer;transition:all .2s ease;overflow:hidden;background:var(--p-surface-0)}:host-context(.p-dark) .file-card,.dark .file-card{border-color:var(--p-surface-600);background:var(--p-surface-800)}.file-card:hover:not(.disabled){border-color:var(--p-primary-color);transform:translateY(-2px);box-shadow:var(--p-overlay-shadow)}.file-card.selected{border-color:var(--p-primary-color);background:var(--p-primary-50)}:host-context(.p-dark) .file-card.selected,.dark .file-card.selected{background:var(--p-primary-900)}.file-card.disabled{opacity:.5;cursor:not-allowed}.file-preview{position:relative;height:80px;display:flex;align-items:center;justify-content:center;background:var(--p-surface-100)}@media(min-width:640px){.file-preview{height:100px}}:host-context(.p-dark) .file-preview,.dark .file-preview{background:var(--p-surface-700)}.selected-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--p-primary-500-rgb, 59, 130, 246),.3)}.selected-overlay i{color:var(--p-primary-color);background:var(--p-surface-0);border-radius:50%;padding:.5rem}:host-context(.p-dark) .selected-overlay i,.dark .selected-overlay i{background:var(--p-surface-900)}\n"], dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IsEmptyImageDirective, selector: "img", inputs: ["src"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i5$2.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: i5.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i6.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i8.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i11.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: FileUploaderComponent, selector: "lib-file-uploader", inputs: ["uploadFile", "uploadMultipleFiles", "acceptTypes", "multiple", "maxFiles", "maxSizeMb", "uploadOptions", "disabled", "showPreview", "autoUpload"], outputs: ["fileUploaded", "filesUploaded", "onError", "fileSelected"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    </f-dialog>
+  `, isInline: true, styles: [".file-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;max-height:300px;overflow-y:auto;padding:.5rem}@media(min-width:480px){.file-grid{grid-template-columns:repeat(3,1fr);max-height:350px}}@media(min-width:640px){.file-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem;max-height:400px}}.file-card{border:2px solid var(--f-surface-300);border-radius:var(--f-border-radius);cursor:pointer;transition:all .2s ease;overflow:hidden;background:var(--f-surface-0)}:host-context(.p-dark) .file-card,.dark .file-card{border-color:var(--f-surface-600);background:var(--f-surface-800)}.file-card:hover:not(.disabled){border-color:var(--f-primary-color);transform:translateY(-2px);box-shadow:var(--f-overlay-shadow)}.file-card.selected{border-color:var(--f-primary-color);background:var(--f-primary-50)}:host-context(.p-dark) .file-card.selected,.dark .file-card.selected{background:var(--f-primary-900)}.file-card.disabled{opacity:.5;cursor:not-allowed}.file-preview{position:relative;height:80px;display:flex;align-items:center;justify-content:center;background:var(--f-surface-100)}@media(min-width:640px){.file-preview{height:100px}}:host-context(.p-dark) .file-preview,.dark .file-preview{background:var(--f-surface-700)}.selected-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--f-primary-500-rgb, 59, 130, 246),.3)}.selected-overlay i{color:var(--f-primary-color);background:var(--f-surface-0);border-radius:50%;padding:.5rem}:host-context(.p-dark) .selected-overlay i,.dark .selected-overlay i{background:var(--f-surface-900)}\n"], dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IsEmptyImageDirective, selector: "img", inputs: ["src"] }, { kind: "ngmodule", type: UiModule }, { kind: "component", type: i3.ButtonComponent, selector: "f-button", inputs: ["label", "icon", "iconPos", "severity", "type", "disabled", "loading", "text", "link", "outlined", "raised", "rounded", "fluid", "size"], outputs: ["onClick"] }, { kind: "component", type: i3.IconFieldComponent, selector: "f-iconfield" }, { kind: "component", type: i3.InputIconComponent, selector: "f-inputicon", inputs: ["styleClass"] }, { kind: "directive", type: i3.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched"] }, { kind: "component", type: i3.SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "showClear", "loading", "inputId", "invalid", "touched", "styleClass", "editable"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur"] }, { kind: "component", type: i3.DialogComponent, selector: "f-dialog", inputs: ["header", "visible", "modal", "closable", "dismissableMask", "resizable", "style", "breakpoints"], outputs: ["visibleChange", "onShow", "onHide"] }, { kind: "component", type: i3.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }, { kind: "component", type: FileUploaderComponent, selector: "lib-file-uploader", inputs: ["uploadFile", "uploadMultipleFiles", "acceptTypes", "multiple", "maxFiles", "maxSizeMb", "uploadOptions", "disabled", "showPreview", "autoUpload"], outputs: ["fileUploaded", "filesUploaded", "onError", "fileSelected"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: FileSelectorDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FileSelectorDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-file-selector-dialog', imports: [AngularModule, PrimeModule, FileUploaderComponent, TranslatePipe], template: `
-    <p-dialog
+            args: [{ selector: 'lib-file-selector-dialog', imports: [AngularModule, UiModule, FileUploaderComponent, TranslatePipe], template: `
+    <f-dialog
       [header]="dialogHeader()"
       [(visible)]="visible"
       [modal]="true"
@@ -3335,9 +3162,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
     >
       @if (!fileProvider) {
         <div class="p-6 text-center">
-          <i
-            class="pi pi-exclamation-triangle text-4xl text-orange-500 mb-3"
-          ></i>
+          <ui-icon name="exclamation-triangle" class="text-4xl text-orange-500 mb-3"></ui-icon>
           <p class="text-lg font-medium text-color mb-2">
             {{ 'shared.file.selector.provider.not.configured' | translate }}
           </p>
@@ -3348,12 +3173,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
               >provideStorageProviders()</code
             >
           </p>
-          <button
-            pButton
+          <f-button
             [label]="'shared.close' | translate"
-            class="p-button-text"
-            (click)="onCancel()"
-          ></button>
+            severity="secondary"
+            [text]="true"
+            (onClick)="onCancel()"
+          />
         </div>
       } @else {
         @if (withUploader()) {
@@ -3375,10 +3200,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
         <div
           class="flex flex-col sm:flex-row gap-2 mb-3 items-stretch sm:items-center"
         >
-          <p-iconfield class="flex-1">
-            <p-inputicon class="pi pi-search" />
+          <f-iconfield class="flex-1">
+            <f-inputicon><ui-icon name="search" /></f-inputicon>
             <input
-              pInputText
+              fInputText
               type="text"
               [ngModel]="searchTerm()"
               (ngModelChange)="onSearchChange($event)"
@@ -3387,10 +3212,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
               "
               class="w-full"
             />
-          </p-iconfield>
+          </f-iconfield>
 
           @if (fileProvider.loadFolders) {
-            <p-select
+            <f-select
               [options]="folders()"
               [ngModel]="selectedFolderId()"
               (ngModelChange)="onFolderChange($event)"
@@ -3405,23 +3230,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
               class="w-full sm:w-40"
               (onShow)="loadFolders()"
             >
-              <ng-template pTemplate="selectedItem" let-folder>
+              <ng-template #selectedItem let-folder>
                 <div class="flex items-center gap-2">
-                  <i class="pi pi-folder text-color-secondary"></i>
+                  <ui-icon name="folder" class="text-color-secondary"></ui-icon>
                   <span>{{ folder?.name }}</span>
                 </div>
               </ng-template>
-              <ng-template pTemplate="item" let-folder>
+              <ng-template #item let-folder>
                 <div class="flex items-center gap-2">
-                  <i class="pi pi-folder text-color-secondary"></i>
+                  <ui-icon name="folder" class="text-color-secondary"></ui-icon>
                   <span>{{ folder.name }}</span>
                 </div>
               </ng-template>
-            </p-select>
+            </f-select>
           }
 
           @if (fileProvider.loadStorageConfigs) {
-            <p-select
+            <f-select
               [options]="storageConfigs()"
               [ngModel]="selectedStorageConfigId()"
               (ngModelChange)="onStorageConfigChange($event)"
@@ -3436,9 +3261,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
               class="w-full sm:w-40"
               (onShow)="loadStorageConfigs()"
             >
-              <ng-template pTemplate="selectedItem" let-config>
+              <ng-template #selectedItem let-config>
                 <div class="flex items-center gap-2">
-                  <i class="pi pi-database text-color-secondary"></i>
+                  <ui-icon name="database" class="text-color-secondary"></ui-icon>
                   <span>{{ config?.name }}</span>
                   @if (config?.isDefault) {
                     <span
@@ -3448,9 +3273,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                   }
                 </div>
               </ng-template>
-              <ng-template pTemplate="item" let-config>
+              <ng-template #item let-config>
                 <div class="flex items-center gap-2">
-                  <i class="pi pi-database text-color-secondary"></i>
+                  <ui-icon name="database" class="text-color-secondary"></ui-icon>
                   <span>{{ config.name }}</span>
                   @if (config.isDefault) {
                     <span
@@ -3460,7 +3285,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                   }
                 </div>
               </ng-template>
-            </p-select>
+            </f-select>
           }
 
           @if (multiple()) {
@@ -3478,13 +3303,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
         <div class="file-grid" #scrollContainer (scroll)="onScroll($event)">
           @if (isLoading() && files().length === 0) {
             <div class="col-span-full flex justify-center p-4">
-              <i
-                class="pi pi-spin pi-spinner text-4xl text-color-secondary"
-              ></i>
+              <ui-icon name="loader-circle" spin class="text-4xl text-color-secondary"></ui-icon>
             </div>
           } @else if (files().length === 0) {
             <div class="col-span-full text-center p-4 text-color-secondary">
-              <i class="pi pi-inbox text-4xl mb-2 block"></i>
+              <ui-icon name="inbox" class="text-4xl mb-2 block"></ui-icon>
               <p>{{ 'shared.file.selector.no.files' | translate }}</p>
             </div>
           } @else {
@@ -3507,14 +3330,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                       class="w-full h-full object-cover"
                     />
                   } @else {
-                    <i
-                      [class]="fileIcon"
+                    <ui-icon
+                      [name]="fileIcon"
                       class="text-4xl sm:text-5xl text-color-secondary"
-                    ></i>
+                    ></ui-icon>
                   }
                   @if (fileSelected) {
                     <div class="selected-overlay">
-                      <i class="pi pi-check text-xl sm:text-2xl"></i>
+                      <ui-icon name="check" class="text-xl sm:text-2xl"></ui-icon>
                     </div>
                   }
                 </div>
@@ -3535,26 +3358,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
 
             @if (isLoading()) {
               <div class="col-span-full flex justify-center p-2">
-                <i class="pi pi-spin pi-spinner text-color-secondary"></i>
+                <ui-icon name="loader-circle" spin class="text-color-secondary"></ui-icon>
               </div>
             }
           }
         </div>
 
-        <ng-template pTemplate="footer">
+        <ng-template #footer>
           <div
             class="flex flex-col-reverse sm:flex-row gap-2 w-full sm:w-auto sm:justify-end"
           >
-            <button
-              pButton
-              type="button"
+            <f-button
               [label]="'shared.cancel' | translate"
-              class="p-button-text w-full sm:w-auto"
-              (click)="onCancel()"
-            ></button>
-            <button
-              pButton
-              type="button"
+              severity="secondary"
+              [text]="true"
+              class="w-full sm:w-auto"
+              (onClick)="onCancel()"
+            />
+            <f-button
               [label]="
                 multiple()
                   ? ('shared.file.selector.select.multiple'
@@ -3563,51 +3384,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
               "
               [disabled]="selectedFiles().length === 0"
               class="w-full sm:w-auto"
-              (click)="onConfirm()"
-            ></button>
+              (onClick)="onConfirm()"
+            />
           </div>
         </ng-template>
       }
-    </p-dialog>
-  `, styles: [".file-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;max-height:300px;overflow-y:auto;padding:.5rem}@media(min-width:480px){.file-grid{grid-template-columns:repeat(3,1fr);max-height:350px}}@media(min-width:640px){.file-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem;max-height:400px}}.file-card{border:2px solid var(--p-surface-300);border-radius:var(--p-border-radius);cursor:pointer;transition:all .2s ease;overflow:hidden;background:var(--p-surface-0)}:host-context(.p-dark) .file-card,.dark .file-card{border-color:var(--p-surface-600);background:var(--p-surface-800)}.file-card:hover:not(.disabled){border-color:var(--p-primary-color);transform:translateY(-2px);box-shadow:var(--p-overlay-shadow)}.file-card.selected{border-color:var(--p-primary-color);background:var(--p-primary-50)}:host-context(.p-dark) .file-card.selected,.dark .file-card.selected{background:var(--p-primary-900)}.file-card.disabled{opacity:.5;cursor:not-allowed}.file-preview{position:relative;height:80px;display:flex;align-items:center;justify-content:center;background:var(--p-surface-100)}@media(min-width:640px){.file-preview{height:100px}}:host-context(.p-dark) .file-preview,.dark .file-preview{background:var(--p-surface-700)}.selected-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--p-primary-500-rgb, 59, 130, 246),.3)}.selected-overlay i{color:var(--p-primary-color);background:var(--p-surface-0);border-radius:50%;padding:.5rem}:host-context(.p-dark) .selected-overlay i,.dark .selected-overlay i{background:var(--p-surface-900)}\n"] }]
+    </f-dialog>
+  `, styles: [".file-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;max-height:300px;overflow-y:auto;padding:.5rem}@media(min-width:480px){.file-grid{grid-template-columns:repeat(3,1fr);max-height:350px}}@media(min-width:640px){.file-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem;max-height:400px}}.file-card{border:2px solid var(--f-surface-300);border-radius:var(--f-border-radius);cursor:pointer;transition:all .2s ease;overflow:hidden;background:var(--f-surface-0)}:host-context(.p-dark) .file-card,.dark .file-card{border-color:var(--f-surface-600);background:var(--f-surface-800)}.file-card:hover:not(.disabled){border-color:var(--f-primary-color);transform:translateY(-2px);box-shadow:var(--f-overlay-shadow)}.file-card.selected{border-color:var(--f-primary-color);background:var(--f-primary-50)}:host-context(.p-dark) .file-card.selected,.dark .file-card.selected{background:var(--f-primary-900)}.file-card.disabled{opacity:.5;cursor:not-allowed}.file-preview{position:relative;height:80px;display:flex;align-items:center;justify-content:center;background:var(--f-surface-100)}@media(min-width:640px){.file-preview{height:100px}}:host-context(.p-dark) .file-preview,.dark .file-preview{background:var(--f-surface-700)}.selected-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--f-primary-500-rgb, 59, 130, 246),.3)}.selected-overlay i{color:var(--f-primary-color);background:var(--f-surface-0);border-radius:50%;padding:.5rem}:host-context(.p-dark) .selected-overlay i,.dark .selected-overlay i{background:var(--f-surface-900)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], acceptTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptTypes", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelection", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], folderId: [{ type: i0.Input, args: [{ isSignal: true, alias: "folderId", required: false }] }], withUploader: [{ type: i0.Input, args: [{ isSignal: true, alias: "withUploader", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], fileSelected: [{ type: i0.Output, args: ["fileSelected"] }], filesSelected: [{ type: i0.Output, args: ["filesSelected"] }], closed: [{ type: i0.Output, args: ["closed"] }], onError: [{ type: i0.Output, args: ["onError"] }] } });
 
 class IconComponent {
-    icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : []));
-    iconType = input(IconTypeEnum.PRIMENG_ICON, ...(ngDevMode ? [{ debugName: "iconType" }] : []));
-    IconTypeEnum = IconTypeEnum; // Needed for template reference
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: IconComponent, isStandalone: true, selector: "lib-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, iconType: { classPropertyName: "iconType", publicName: "iconType", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    icon = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    iconType = input(IconTypeEnum.ICON_NAME, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconType" }] : /* istanbul ignore next */ []));
+    IconTypeEnum = IconTypeEnum;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: IconComponent, isStandalone: true, selector: "lib-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, iconType: { classPropertyName: "iconType", publicName: "iconType", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     @if (icon()) {
-      @if (iconType() === IconTypeEnum.PRIMENG_ICON) {
-        <i [class]="icon()"></i>
-      } @else if (iconType() === IconTypeEnum.IMAGE_FILE_LINK) {
+      @if (iconType() === IconTypeEnum.IMAGE_FILE_LINK) {
         <img [alt]="icon()" [src]="icon()" />
       } @else {
-        <i class="pi pi-question"></i>
+        <ui-icon [name]="icon()"></ui-icon>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: IsEmptyImageDirective, selector: "img", inputs: ["src"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: IconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-icon',
-                    imports: [AngularModule],
+                    imports: [UiIconComponent],
                     template: `
     @if (icon()) {
-      @if (iconType() === IconTypeEnum.PRIMENG_ICON) {
-        <i [class]="icon()"></i>
-      } @else if (iconType() === IconTypeEnum.IMAGE_FILE_LINK) {
+      @if (iconType() === IconTypeEnum.IMAGE_FILE_LINK) {
         <img [alt]="icon()" [src]="icon()" />
       } @else {
-        <i class="pi pi-question"></i>
+        <ui-icon [name]="icon()"></ui-icon>
       }
     }
   `,
                 }]
         }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], iconType: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconType", required: false }] }] } });
 
+class InlineSvgComponent {
+    src = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    http = inject(HttpClient);
+    sanitizer = inject(DomSanitizer);
+    svg = resource({ ...(ngDevMode ? { debugName: "svg" } : /* istanbul ignore next */ {}), params: this.src,
+        loader: ({ params: url }) => firstValueFrom(this.http.get(url, { responseType: 'text' })).then((text) => this.sanitizer.bypassSecurityTrustHtml(text)) });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: InlineSvgComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: InlineSvgComponent, isStandalone: true, selector: "inline-svg", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    @if (svg.hasValue()) {
+      <span [innerHTML]="svg.value()"></span>
+    }
+  `, isInline: true, styles: ["inline-svg{display:inline-flex;align-items:center}inline-svg span{display:inline-flex;align-items:center;height:100%;width:100%}inline-svg svg{height:100%;width:auto}\n"], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: InlineSvgComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'inline-svg', encapsulation: ViewEncapsulation.None, template: `
+    @if (svg.hasValue()) {
+      <span [innerHTML]="svg.value()"></span>
+    }
+  `, styles: ["inline-svg{display:inline-flex;align-items:center}inline-svg span{display:inline-flex;align-items:center;height:100%;width:100%}inline-svg svg{height:100%;width:auto}\n"] }]
+        }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: true }] }] } });
+
 /**
  * Lazy-loading multi-select component with search, pagination, and select-all.
  *
@@ -3624,33 +3466,46 @@ class LazyMultiSelectComponent extends BaseFormControl {
     });
     onDocumentClickBound = this.handleDocumentClick.bind(this);
     // View references
-    pSelectRef = viewChild.required('pSelect');
-    overlayTemplate = viewChild.required('overlayTpl');
+    pSelectRef = viewChild.required('pSelect', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pSelectRef" }] : /* istanbul ignore next */ []));
+    overlayTemplate = viewChild.required('overlayTpl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overlayTemplate" }] : /* istanbul ignore next */ []));
     // Portal state
     overlayViewRef = null;
     // Inputs
-    placeHolder = input('', ...(ngDevMode ? [{ debugName: "placeHolder" }] : []));
-    showClear = input(true, ...(ngDevMode ? [{ debugName: "showClear" }] : []));
+    placeHolder = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeHolder" }] : /* istanbul ignore next */ []));
+    showClear = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
     // Computed placeholder with translation fallback
     displayPlaceholder = computed(() => {
         const customPlaceholder = this.placeHolder();
         if (customPlaceholder)
             return customPlaceholder;
         return this.t('shared.multi.select.placeholder');
-    }, ...(ngDevMode ? [{ debugName: "displayPlaceholder" }] : []));
-    isEditMode = input.required(...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
-    isLoading = input.required(...(ngDevMode ? [{ debugName: "isLoading" }] : []));
-    total = input.required(...(ngDevMode ? [{ debugName: "total" }] : []));
-    pagination = input.required(...(ngDevMode ? [{ debugName: "pagination" }] : []));
-    selectDataList = input.required(...(ngDevMode ? [{ debugName: "selectDataList" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayPlaceholder" }] : /* istanbul ignore next */ []));
+    isEditMode = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isEditMode" }] : /* istanbul ignore next */ []));
+    isLoading = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    total = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
+    pagination = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pagination" }] : /* istanbul ignore next */ []));
+    selectDataList = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectDataList" }] : /* istanbul ignore next */ []));
     // Two-way bound value
-    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     // Outputs
     onSearch = output();
     onPagination = output();
     // UI state
-    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
-    openOptions = signal(false, ...(ngDevMode ? [{ debugName: "openOptions" }] : []));
+    searchTerm = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
+    openOptions = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "openOptions" }] : /* istanbul ignore next */ []));
     // Computed values
     selectedValueDisplay = computed(() => {
         const selectedValues = this.value() ?? [];
@@ -3665,18 +3520,21 @@ class LazyMultiSelectComponent extends BaseFormControl {
             .filter((item) => selectedValues.includes(item.value))
             .map((item) => item.label)
             .join(', ');
-    }, ...(ngDevMode ? [{ debugName: "selectedValueDisplay" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedValueDisplay" }] : /* istanbul ignore next */ []));
     hasSelectedValues = computed(() => {
         const selectedValues = this.value() ?? [];
         return selectedValues.length > 0;
-    }, ...(ngDevMode ? [{ debugName: "hasSelectedValues" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasSelectedValues" }] : /* istanbul ignore next */ []));
     isSelectAll = computed(() => {
         const selectedValues = this.value() ?? [];
         const allValues = this.selectDataList().map((item) => item.value);
         if (selectedValues.length === 0 || allValues.length === 0)
             return false;
         return allValues.every((val) => selectedValues.includes(val));
-    }, ...(ngDevMode ? [{ debugName: "isSelectAll" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isSelectAll" }] : /* istanbul ignore next */ []));
     constructor() {
         super();
         this.initializeFormControl();
@@ -3807,12 +3665,12 @@ class LazyMultiSelectComponent extends BaseFormControl {
         }
         return key;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LazyMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", type: LazyMultiSelectComponent, isStandalone: true, selector: "lib-lazy-multi-select", inputs: { placeHolder: { classPropertyName: "placeHolder", publicName: "placeHolder", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, isEditMode: { classPropertyName: "isEditMode", publicName: "isEditMode", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: true, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: true, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: true, transformFunction: null }, selectDataList: { classPropertyName: "selectDataList", publicName: "selectDataList", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onSearch: "onSearch", onPagination: "onPagination" }, providers: [provideValueAccessor(LazyMultiSelectComponent)], viewQueries: [{ propertyName: "pSelectRef", first: true, predicate: ["pSelect"], descendants: true, isSignal: true }, { propertyName: "overlayTemplate", first: true, predicate: ["overlayTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"p-select w-full\"\n  #pSelect\n  (click)=\"onSelectClick()\"\n  [class.p-disabled]=\"disabled()\"\n  [class.edit-mode-element-css]=\"!isEditMode()\"\n  [class.overflow-hidden]=\"!isEditMode()\"\n>\n  @if (selectedValueDisplay()) {\n    <span class=\"p-select-label\" [class.edit-mode-element-css]=\"!isEditMode()\">\n      {{ selectedValueDisplay() }}\n    </span>\n  } @else {\n    <span class=\"p-select-label p-placeholder\">{{ displayPlaceholder() }}</span>\n  }\n\n  @if (showClear() && hasSelectedValues()) {\n    <span class=\"p-select-clear-icon\" (click)=\"clear($event)\">\n      <i class=\"pi pi-times\"></i>\n    </span>\n  }\n\n  @if (isEditMode()) {\n    <div class=\"p-select-dropdown\">\n      <span class=\"p-select-dropdown-icon flex items-center\">\n        <svg\n          width=\"14\"\n          height=\"14\"\n          viewBox=\"0 0 14 14\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"p-multiselect-dropdown-icon p-icon\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M7.01744 10.398C6.91269 10.3985 6.8089 10.378 6.71215 10.3379C6.61541 10.2977 6.52766 10.2386 6.45405 10.1641L1.13907 4.84913C1.03306 4.69404 0.985221 4.5065 1.00399 4.31958C1.02276 4.13266 1.10693 3.95838 1.24166 3.82747C1.37639 3.69655 1.55301 3.61742 1.74039 3.60402C1.92777 3.59062 2.11386 3.64382 2.26584 3.75424L7.01744 8.47394L11.769 3.75424C11.9189 3.65709 12.097 3.61306 12.2748 3.62921C12.4527 3.64535 12.6199 3.72073 12.7498 3.84328C12.8797 3.96582 12.9647 4.12842 12.9912 4.30502C13.0177 4.48162 12.9841 4.662 12.8958 4.81724L7.58083 10.1322C7.50996 10.2125 7.42344 10.2775 7.32656 10.3232C7.22968 10.3689 7.12449 10.3944 7.01744 10.398Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </span>\n    </div>\n  }\n</div>\n\n<ng-template #overlayTpl>\n  <div class=\"p-select-overlay\" (click)=\"onOverlayClick($event)\">\n    <div class=\"p-select-header flex flex-row gap-2 items-center\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"isSelectAll()\"\n        [disabled]=\"disabled()\"\n        (onChange)=\"changeSelectAll($event)\"\n      />\n      <input\n        type=\"text\"\n        pInputText\n        class=\"w-full\"\n        [placeholder]=\"'shared.search' | translate\"\n        [ngModel]=\"searchTerm()\"\n        (ngModelChange)=\"searchTerm.set($event)\"\n      />\n    </div>\n    <div class=\"p-select-list-container\" (scroll)=\"onScroll($event)\">\n      <ul class=\"p-select-list\">\n        @for (data of selectDataList(); track data.value) {\n          @let isItemSelected = isSelected(data);\n          <li\n            class=\"p-select-option flex flex-row gap-2 items-center\"\n            [class.p-select-option-selected]=\"isItemSelected\"\n          >\n            <p-checkbox\n              [binary]=\"true\"\n              [ngModel]=\"isItemSelected\"\n              [disabled]=\"disabled()\"\n              (onChange)=\"selectValue($event, data)\"\n            />\n            <span>{{ data.label }}</span>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n</ng-template>\n", styles: [".p-select-overlay{display:flex;flex-direction:column;max-height:250px;overflow:hidden}.p-select-header{padding:.75rem;border-bottom:1px solid var(--p-surface-border);background:var(--p-content-hover-background);flex-shrink:0;width:100%;box-sizing:border-box}.p-select-header input{background:var(--p-form-field-background);border-color:var(--p-form-field-border-color);color:var(--p-text-color)}.p-select-header input::placeholder{color:var(--p-text-muted-color)}.p-select-list-container{flex:1;overflow-y:auto;min-height:0;width:100%}.p-select-list{margin:0;padding:.25rem 0;list-style:none;background:var(--p-surface-overlay);color:var(--p-text-color);width:100%}.p-select-option{padding:.5rem .75rem;cursor:pointer;transition:background-color .2s ease;color:var(--p-text-color)}.p-select-option:hover{background:var(--p-content-hover-background)}.p-select-option.p-select-option-selected{background:var(--p-highlight-background);color:var(--p-highlight-color)}.p-select-option.p-select-option-selected:hover{background:var(--p-highlight-focus-background);color:var(--p-highlight-focus-color)}.p-select-clear-icon{display:flex;align-items:center;padding:0 .5rem;color:var(--p-text-muted-color);cursor:pointer;transition:color .2s ease}.p-select-clear-icon:hover{color:var(--p-text-color)}\n"], dependencies: [{ kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i5$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: i8.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LazyMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: LazyMultiSelectComponent, isStandalone: true, selector: "lib-lazy-multi-select", inputs: { placeHolder: { classPropertyName: "placeHolder", publicName: "placeHolder", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, isEditMode: { classPropertyName: "isEditMode", publicName: "isEditMode", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: true, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: true, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: true, transformFunction: null }, selectDataList: { classPropertyName: "selectDataList", publicName: "selectDataList", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onSearch: "onSearch", onPagination: "onPagination" }, providers: [provideValueAccessor(LazyMultiSelectComponent)], viewQueries: [{ propertyName: "pSelectRef", first: true, predicate: ["pSelect"], descendants: true, isSignal: true }, { propertyName: "overlayTemplate", first: true, predicate: ["overlayTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"w-full flex items-center justify-between px-3 py-2 text-sm rounded-lg border border-(--f-form-field-border-color) bg-(--f-form-field-background) cursor-pointer min-h-[38px]\"\n  #pSelect\n  (click)=\"onSelectClick()\"\n  [class.opacity-50]=\"disabled()\"\n  [class.pointer-events-none]=\"disabled()\"\n  [class.edit-mode-element-css]=\"!isEditMode()\"\n  [class.overflow-hidden]=\"!isEditMode()\"\n>\n  @if (selectedValueDisplay()) {\n    <span class=\"flex-1 truncate text-(--f-form-field-color)\" [class.edit-mode-element-css]=\"!isEditMode()\">\n      {{ selectedValueDisplay() }}\n    </span>\n  } @else {\n    <span class=\"flex-1 truncate text-(--f-form-field-placeholder-color)\">{{ displayPlaceholder() }}</span>\n  }\n\n  @if (showClear() && hasSelectedValues()) {\n    <span class=\"inline-flex items-center px-1 text-(--f-text-muted-color) hover:text-(--f-text-hover-color) cursor-pointer\" (click)=\"clear($event)\">\n      <ui-icon name=\"times\" class=\"text-xs\"></ui-icon>\n    </span>\n  }\n\n  @if (isEditMode()) {\n    <span class=\"inline-flex items-center px-1 text-(--f-form-field-placeholder-color)\">\n      <ui-icon name=\"chevron-down\" class=\"text-xs\"></ui-icon>\n    </span>\n  }\n</div>\n\n<ng-template #overlayTpl>\n  <div class=\"flex flex-col max-h-[250px] overflow-hidden\" (click)=\"onOverlayClick($event)\">\n    <div class=\"p-3 border-b border-(--f-content-border-color) bg-(--f-content-hover-background) shrink-0 w-full flex flex-row gap-2 items-center\">\n      <f-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"isSelectAll()\"\n        [disabled]=\"disabled()\"\n        (onChange)=\"changeSelectAll($event)\"\n      />\n      <input\n        type=\"text\"\n        fInputText\n        class=\"w-full\"\n        [placeholder]=\"'shared.search' | translate\"\n        [ngModel]=\"searchTerm()\"\n        (ngModelChange)=\"searchTerm.set($event)\"\n      />\n    </div>\n    <div class=\"flex-1 overflow-y-auto min-h-0 w-full\" (scroll)=\"onScroll($event)\">\n      <ul class=\"m-0 py-1 list-none bg-(--f-overlay-popover-background) text-(--f-text-color) w-full\">\n        @for (data of selectDataList(); track data.value) {\n          @let isItemSelected = isSelected(data);\n          <li\n            class=\"px-3 py-2 cursor-pointer transition-colors flex flex-row gap-2 items-center text-sm\"\n            [class]=\"isItemSelected ? 'bg-primary/10 text-primary' : 'text-(--f-text-color) hover:bg-(--f-content-hover-background)'\"\n          >\n            <f-checkbox\n              [binary]=\"true\"\n              [ngModel]=\"isItemSelected\"\n              [disabled]=\"disabled()\"\n              (onChange)=\"selectValue($event, data)\"\n            />\n            <span>{{ data.label }}</span>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "component", type: i3.CheckboxComponent, selector: "f-checkbox", inputs: ["label", "binary", "disabled", "inputId", "invalid", "indeterminate", "touched", "styleClass", "checked"], outputs: ["onChange", "onBlur", "touch", "checkedChange"] }, { kind: "directive", type: i3.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched"] }, { kind: "component", type: i3.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }, { kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LazyMultiSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LazyMultiSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-lazy-multi-select', imports: [PrimeModule, AngularModule, TranslatePipe], encapsulation: ViewEncapsulation.None, providers: [provideValueAccessor(LazyMultiSelectComponent)], template: "<div\n  class=\"p-select w-full\"\n  #pSelect\n  (click)=\"onSelectClick()\"\n  [class.p-disabled]=\"disabled()\"\n  [class.edit-mode-element-css]=\"!isEditMode()\"\n  [class.overflow-hidden]=\"!isEditMode()\"\n>\n  @if (selectedValueDisplay()) {\n    <span class=\"p-select-label\" [class.edit-mode-element-css]=\"!isEditMode()\">\n      {{ selectedValueDisplay() }}\n    </span>\n  } @else {\n    <span class=\"p-select-label p-placeholder\">{{ displayPlaceholder() }}</span>\n  }\n\n  @if (showClear() && hasSelectedValues()) {\n    <span class=\"p-select-clear-icon\" (click)=\"clear($event)\">\n      <i class=\"pi pi-times\"></i>\n    </span>\n  }\n\n  @if (isEditMode()) {\n    <div class=\"p-select-dropdown\">\n      <span class=\"p-select-dropdown-icon flex items-center\">\n        <svg\n          width=\"14\"\n          height=\"14\"\n          viewBox=\"0 0 14 14\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"p-multiselect-dropdown-icon p-icon\"\n          aria-hidden=\"true\"\n        >\n          <path\n            d=\"M7.01744 10.398C6.91269 10.3985 6.8089 10.378 6.71215 10.3379C6.61541 10.2977 6.52766 10.2386 6.45405 10.1641L1.13907 4.84913C1.03306 4.69404 0.985221 4.5065 1.00399 4.31958C1.02276 4.13266 1.10693 3.95838 1.24166 3.82747C1.37639 3.69655 1.55301 3.61742 1.74039 3.60402C1.92777 3.59062 2.11386 3.64382 2.26584 3.75424L7.01744 8.47394L11.769 3.75424C11.9189 3.65709 12.097 3.61306 12.2748 3.62921C12.4527 3.64535 12.6199 3.72073 12.7498 3.84328C12.8797 3.96582 12.9647 4.12842 12.9912 4.30502C13.0177 4.48162 12.9841 4.662 12.8958 4.81724L7.58083 10.1322C7.50996 10.2125 7.42344 10.2775 7.32656 10.3232C7.22968 10.3689 7.12449 10.3944 7.01744 10.398Z\"\n            fill=\"currentColor\"\n          />\n        </svg>\n      </span>\n    </div>\n  }\n</div>\n\n<ng-template #overlayTpl>\n  <div class=\"p-select-overlay\" (click)=\"onOverlayClick($event)\">\n    <div class=\"p-select-header flex flex-row gap-2 items-center\">\n      <p-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"isSelectAll()\"\n        [disabled]=\"disabled()\"\n        (onChange)=\"changeSelectAll($event)\"\n      />\n      <input\n        type=\"text\"\n        pInputText\n        class=\"w-full\"\n        [placeholder]=\"'shared.search' | translate\"\n        [ngModel]=\"searchTerm()\"\n        (ngModelChange)=\"searchTerm.set($event)\"\n      />\n    </div>\n    <div class=\"p-select-list-container\" (scroll)=\"onScroll($event)\">\n      <ul class=\"p-select-list\">\n        @for (data of selectDataList(); track data.value) {\n          @let isItemSelected = isSelected(data);\n          <li\n            class=\"p-select-option flex flex-row gap-2 items-center\"\n            [class.p-select-option-selected]=\"isItemSelected\"\n          >\n            <p-checkbox\n              [binary]=\"true\"\n              [ngModel]=\"isItemSelected\"\n              [disabled]=\"disabled()\"\n              (onChange)=\"selectValue($event, data)\"\n            />\n            <span>{{ data.label }}</span>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n</ng-template>\n", styles: [".p-select-overlay{display:flex;flex-direction:column;max-height:250px;overflow:hidden}.p-select-header{padding:.75rem;border-bottom:1px solid var(--p-surface-border);background:var(--p-content-hover-background);flex-shrink:0;width:100%;box-sizing:border-box}.p-select-header input{background:var(--p-form-field-background);border-color:var(--p-form-field-border-color);color:var(--p-text-color)}.p-select-header input::placeholder{color:var(--p-text-muted-color)}.p-select-list-container{flex:1;overflow-y:auto;min-height:0;width:100%}.p-select-list{margin:0;padding:.25rem 0;list-style:none;background:var(--p-surface-overlay);color:var(--p-text-color);width:100%}.p-select-option{padding:.5rem .75rem;cursor:pointer;transition:background-color .2s ease;color:var(--p-text-color)}.p-select-option:hover{background:var(--p-content-hover-background)}.p-select-option.p-select-option-selected{background:var(--p-highlight-background);color:var(--p-highlight-color)}.p-select-option.p-select-option-selected:hover{background:var(--p-highlight-focus-background);color:var(--p-highlight-focus-color)}.p-select-clear-icon{display:flex;align-items:center;padding:0 .5rem;color:var(--p-text-muted-color);cursor:pointer;transition:color .2s ease}.p-select-clear-icon:hover{color:var(--p-text-color)}\n"] }]
+            args: [{ selector: 'lib-lazy-multi-select', imports: [UiModule, AngularModule, TranslatePipe], providers: [provideValueAccessor(LazyMultiSelectComponent)], template: "<div\n  class=\"w-full flex items-center justify-between px-3 py-2 text-sm rounded-lg border border-(--f-form-field-border-color) bg-(--f-form-field-background) cursor-pointer min-h-[38px]\"\n  #pSelect\n  (click)=\"onSelectClick()\"\n  [class.opacity-50]=\"disabled()\"\n  [class.pointer-events-none]=\"disabled()\"\n  [class.edit-mode-element-css]=\"!isEditMode()\"\n  [class.overflow-hidden]=\"!isEditMode()\"\n>\n  @if (selectedValueDisplay()) {\n    <span class=\"flex-1 truncate text-(--f-form-field-color)\" [class.edit-mode-element-css]=\"!isEditMode()\">\n      {{ selectedValueDisplay() }}\n    </span>\n  } @else {\n    <span class=\"flex-1 truncate text-(--f-form-field-placeholder-color)\">{{ displayPlaceholder() }}</span>\n  }\n\n  @if (showClear() && hasSelectedValues()) {\n    <span class=\"inline-flex items-center px-1 text-(--f-text-muted-color) hover:text-(--f-text-hover-color) cursor-pointer\" (click)=\"clear($event)\">\n      <ui-icon name=\"times\" class=\"text-xs\"></ui-icon>\n    </span>\n  }\n\n  @if (isEditMode()) {\n    <span class=\"inline-flex items-center px-1 text-(--f-form-field-placeholder-color)\">\n      <ui-icon name=\"chevron-down\" class=\"text-xs\"></ui-icon>\n    </span>\n  }\n</div>\n\n<ng-template #overlayTpl>\n  <div class=\"flex flex-col max-h-[250px] overflow-hidden\" (click)=\"onOverlayClick($event)\">\n    <div class=\"p-3 border-b border-(--f-content-border-color) bg-(--f-content-hover-background) shrink-0 w-full flex flex-row gap-2 items-center\">\n      <f-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"isSelectAll()\"\n        [disabled]=\"disabled()\"\n        (onChange)=\"changeSelectAll($event)\"\n      />\n      <input\n        type=\"text\"\n        fInputText\n        class=\"w-full\"\n        [placeholder]=\"'shared.search' | translate\"\n        [ngModel]=\"searchTerm()\"\n        (ngModelChange)=\"searchTerm.set($event)\"\n      />\n    </div>\n    <div class=\"flex-1 overflow-y-auto min-h-0 w-full\" (scroll)=\"onScroll($event)\">\n      <ul class=\"m-0 py-1 list-none bg-(--f-overlay-popover-background) text-(--f-text-color) w-full\">\n        @for (data of selectDataList(); track data.value) {\n          @let isItemSelected = isSelected(data);\n          <li\n            class=\"px-3 py-2 cursor-pointer transition-colors flex flex-row gap-2 items-center text-sm\"\n            [class]=\"isItemSelected ? 'bg-primary/10 text-primary' : 'text-(--f-text-color) hover:bg-(--f-content-hover-background)'\"\n          >\n            <f-checkbox\n              [binary]=\"true\"\n              [ngModel]=\"isItemSelected\"\n              [disabled]=\"disabled()\"\n              (onChange)=\"selectValue($event, data)\"\n            />\n            <span>{{ data.label }}</span>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { pSelectRef: [{ type: i0.ViewChild, args: ['pSelect', { isSignal: true }] }], overlayTemplate: [{ type: i0.ViewChild, args: ['overlayTpl', { isSignal: true }] }], placeHolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeHolder", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], isEditMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEditMode", required: true }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: true }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: true }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: true }] }], selectDataList: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectDataList", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], onSearch: [{ type: i0.Output, args: ["onSearch"] }], onPagination: [{ type: i0.Output, args: ["onPagination"] }] } });
 
 /**
@@ -3832,32 +3690,46 @@ class LazySelectComponent extends BaseFormControl {
     scrollTargetEl = null;
     isDestroyed = false;
     // View references
-    scrollContainer = viewChild.required('scrollContainer');
+    scrollContainer = viewChild.required('scrollContainer', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollContainer" }] : /* istanbul ignore next */ []));
     // Inputs
-    placeHolder = input('', ...(ngDevMode ? [{ debugName: "placeHolder" }] : []));
-    showClear = input(true, ...(ngDevMode ? [{ debugName: "showClear" }] : []));
+    placeHolder = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeHolder" }] : /* istanbul ignore next */ []));
+    showClear = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
     // Computed placeholder with translation fallback
     displayPlaceholder = computed(() => {
         const customPlaceholder = this.placeHolder();
         if (customPlaceholder)
             return customPlaceholder;
         return this.t('shared.select.placeholder');
-    }, ...(ngDevMode ? [{ debugName: "displayPlaceholder" }] : []));
-    optionLabel = input.required(...(ngDevMode ? [{ debugName: "optionLabel" }] : []));
-    optionValue = input.required(...(ngDevMode ? [{ debugName: "optionValue" }] : []));
-    isEditMode = input.required(...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
-    isLoading = input.required(...(ngDevMode ? [{ debugName: "isLoading" }] : []));
-    total = input.required(...(ngDevMode ? [{ debugName: "total" }] : []));
-    pagination = input.required(...(ngDevMode ? [{ debugName: "pagination" }] : []));
-    selectDataList = input.required(...(ngDevMode ? [{ debugName: "selectDataList" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayPlaceholder" }] : /* istanbul ignore next */ []));
+    optionLabel = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "optionLabel" }] : /* istanbul ignore next */ []));
+    optionValue = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "optionValue" }] : /* istanbul ignore next */ []));
+    isEditMode = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isEditMode" }] : /* istanbul ignore next */ []));
+    isLoading = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    total = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
+    pagination = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pagination" }] : /* istanbul ignore next */ []));
+    selectDataList = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectDataList" }] : /* istanbul ignore next */ []));
     // Two-way bound value
-    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     // Outputs
     onSearch = output();
     onPagination = output();
     // UI state
-    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
-    isPanelShow = signal(false, ...(ngDevMode ? [{ debugName: "isPanelShow" }] : []));
+    searchTerm = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
+    isPanelShow = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isPanelShow" }] : /* istanbul ignore next */ []));
     constructor() {
         super();
         this.initializeFormControl();
@@ -3910,7 +3782,7 @@ class LazySelectComponent extends BaseFormControl {
                 if (this.isDestroyed)
                     return;
                 const containerEl = this.scrollContainer().nativeElement;
-                const target = containerEl.querySelector('.p-select-list-container');
+                const target = containerEl.querySelector('[data-select-list]');
                 if (target) {
                     target.addEventListener('scroll', this.onScrollBound);
                     this.scrollTargetEl = target;
@@ -3931,14 +3803,57 @@ class LazySelectComponent extends BaseFormControl {
         }
         return key;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LazySelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.5", type: LazySelectComponent, isStandalone: true, selector: "lib-lazy-select", inputs: { placeHolder: { classPropertyName: "placeHolder", publicName: "placeHolder", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: true, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: true, transformFunction: null }, isEditMode: { classPropertyName: "isEditMode", publicName: "isEditMode", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: true, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: true, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: true, transformFunction: null }, selectDataList: { classPropertyName: "selectDataList", publicName: "selectDataList", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onSearch: "onSearch", onPagination: "onPagination" }, providers: [provideValueAccessor(LazySelectComponent)], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #scrollContainer class=\"lib-scroll-container\">\n  <p-select\n    class=\"w-full\"\n    [options]=\"selectDataList()\"\n    [optionLabel]=\"optionLabel()\"\n    [optionValue]=\"optionValue()\"\n    [filter]=\"true\"\n    [showClear]=\"showClear()\"\n    [placeholder]=\"displayPlaceholder()\"\n    [disabled]=\"disabled()\"\n    [(ngModel)]=\"value\"\n    appEditModeElementChanger\n    [isEditMode]=\"isEditMode()\"\n    (click)=\"showPanel()\"\n    (onBlur)=\"onBlur()\"\n  >\n    <ng-template #filter let-filter>\n      <input\n        pInputText\n        class=\"w-full\"\n        [ngModel]=\"searchTerm()\"\n        [ngModelOptions]=\"{ standalone: true }\"\n        (ngModelChange)=\"searchTerm.set($event)\"\n      />\n    </ng-template>\n    <ng-template #selectedItem let-selectedOption>\n      {{ selectedOption[optionLabel()] }}\n    </ng-template>\n    <ng-template #item let-item>\n      {{ item[optionLabel()] }}\n    </ng-template>\n  </p-select>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i8.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i11.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: EditModeElementChangerDirective, selector: "[appEditModeElementChanger]", inputs: ["isEditMode"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LazySelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: LazySelectComponent, isStandalone: true, selector: "lib-lazy-select", inputs: { placeHolder: { classPropertyName: "placeHolder", publicName: "placeHolder", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: true, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: true, transformFunction: null }, isEditMode: { classPropertyName: "isEditMode", publicName: "isEditMode", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: true, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: true, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: true, transformFunction: null }, selectDataList: { classPropertyName: "selectDataList", publicName: "selectDataList", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onSearch: "onSearch", onPagination: "onPagination" }, providers: [provideValueAccessor(LazySelectComponent)], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #scrollContainer class=\"lib-scroll-container\">\n  <f-select\n    class=\"w-full\"\n    [options]=\"selectDataList()\"\n    [optionLabel]=\"optionLabel()\"\n    [optionValue]=\"optionValue()\"\n    [filter]=\"true\"\n    [showClear]=\"showClear()\"\n    [placeholder]=\"displayPlaceholder()\"\n    [disabled]=\"disabled()\"\n    [(ngModel)]=\"value\"\n    appEditModeElementChanger\n    [isEditMode]=\"isEditMode()\"\n    (click)=\"showPanel()\"\n    (onBlur)=\"onBlur()\"\n  >\n    <ng-template #filter let-filter>\n      <input\n        fInputText\n        class=\"w-full\"\n        [ngModel]=\"searchTerm()\"\n        [ngModelOptions]=\"{ standalone: true }\"\n        (ngModelChange)=\"searchTerm.set($event)\"\n      />\n    </ng-template>\n    <ng-template #selectedItem let-selectedOption>\n      {{ selectedOption[optionLabel()] }}\n    </ng-template>\n    <ng-template #item let-item>\n      {{ item[optionLabel()] }}\n    </ng-template>\n  </f-select>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: UiModule }, { kind: "directive", type: i3.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched"] }, { kind: "component", type: i3.SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "showClear", "loading", "inputId", "invalid", "touched", "styleClass", "editable"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur"] }, { kind: "directive", type: EditModeElementChangerDirective, selector: "[appEditModeElementChanger]", inputs: ["isEditMode"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LazySelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LazySelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-lazy-select', imports: [AngularModule, PrimeModule, EditModeElementChangerDirective], providers: [provideValueAccessor(LazySelectComponent)], template: "<div #scrollContainer class=\"lib-scroll-container\">\n  <p-select\n    class=\"w-full\"\n    [options]=\"selectDataList()\"\n    [optionLabel]=\"optionLabel()\"\n    [optionValue]=\"optionValue()\"\n    [filter]=\"true\"\n    [showClear]=\"showClear()\"\n    [placeholder]=\"displayPlaceholder()\"\n    [disabled]=\"disabled()\"\n    [(ngModel)]=\"value\"\n    appEditModeElementChanger\n    [isEditMode]=\"isEditMode()\"\n    (click)=\"showPanel()\"\n    (onBlur)=\"onBlur()\"\n  >\n    <ng-template #filter let-filter>\n      <input\n        pInputText\n        class=\"w-full\"\n        [ngModel]=\"searchTerm()\"\n        [ngModelOptions]=\"{ standalone: true }\"\n        (ngModelChange)=\"searchTerm.set($event)\"\n      />\n    </ng-template>\n    <ng-template #selectedItem let-selectedOption>\n      {{ selectedOption[optionLabel()] }}\n    </ng-template>\n    <ng-template #item let-item>\n      {{ item[optionLabel()] }}\n    </ng-template>\n  </p-select>\n</div>\n" }]
+            args: [{ selector: 'lib-lazy-select', imports: [AngularModule, UiModule, EditModeElementChangerDirective], providers: [provideValueAccessor(LazySelectComponent)], template: "<div #scrollContainer class=\"lib-scroll-container\">\n  <f-select\n    class=\"w-full\"\n    [options]=\"selectDataList()\"\n    [optionLabel]=\"optionLabel()\"\n    [optionValue]=\"optionValue()\"\n    [filter]=\"true\"\n    [showClear]=\"showClear()\"\n    [placeholder]=\"displayPlaceholder()\"\n    [disabled]=\"disabled()\"\n    [(ngModel)]=\"value\"\n    appEditModeElementChanger\n    [isEditMode]=\"isEditMode()\"\n    (click)=\"showPanel()\"\n    (onBlur)=\"onBlur()\"\n  >\n    <ng-template #filter let-filter>\n      <input\n        fInputText\n        class=\"w-full\"\n        [ngModel]=\"searchTerm()\"\n        [ngModelOptions]=\"{ standalone: true }\"\n        (ngModelChange)=\"searchTerm.set($event)\"\n      />\n    </ng-template>\n    <ng-template #selectedItem let-selectedOption>\n      {{ selectedOption[optionLabel()] }}\n    </ng-template>\n    <ng-template #item let-item>\n      {{ item[optionLabel()] }}\n    </ng-template>\n  </f-select>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { scrollContainer: [{ type: i0.ViewChild, args: ['scrollContainer', { isSignal: true }] }], placeHolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeHolder", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: true }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: true }] }], isEditMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEditMode", required: true }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: true }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: true }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: true }] }], selectDataList: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectDataList", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], onSearch: [{ type: i0.Output, args: ["onSearch"] }], onPagination: [{ type: i0.Output, args: ["onPagination"] }] } });
 
+class RouterTabsComponent {
+    tabs = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RouterTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: RouterTabsComponent, isStandalone: true, selector: "lib-router-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    <div class="router-tabs-scroll flex gap-1 border-b border-(--f-content-border-color) overflow-x-auto flex-nowrap">
+      @for (tab of tabs(); track tab.id) {
+        <a
+          [routerLink]="tab.route"
+          routerLinkActive="router-tab-active"
+          [routerLinkActiveOptions]="{ exact: tab.routerLinkActiveExact ?? false }"
+          class="flex items-center gap-2 px-4 py-2 rounded-t-lg cursor-pointer transition-colors text-(--f-text-muted-color) no-underline border-b-2 border-transparent -mb-px hover:bg-(--f-content-hover-background) [&.router-tab-active]:text-primary [&.router-tab-active]:border-primary [&.router-tab-active]:bg-(--f-content-hover-background) whitespace-nowrap shrink-0"
+        >
+          @if (tab.icon) {
+            <ui-icon [name]="tab.icon"></ui-icon>
+          }
+          <span>{{ tab.label }}</span>
+        </a>
+      }
+    </div>
+  `, isInline: true, styles: [".router-tabs-scroll{-ms-overflow-style:none;scrollbar-width:none}.router-tabs-scroll::-webkit-scrollbar{display:none}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RouterTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-router-tabs', imports: [RouterLink, RouterLinkActive, UiIconComponent], host: { class: 'block' }, template: `
+    <div class="router-tabs-scroll flex gap-1 border-b border-(--f-content-border-color) overflow-x-auto flex-nowrap">
+      @for (tab of tabs(); track tab.id) {
+        <a
+          [routerLink]="tab.route"
+          routerLinkActive="router-tab-active"
+          [routerLinkActiveOptions]="{ exact: tab.routerLinkActiveExact ?? false }"
+          class="flex items-center gap-2 px-4 py-2 rounded-t-lg cursor-pointer transition-colors text-(--f-text-muted-color) no-underline border-b-2 border-transparent -mb-px hover:bg-(--f-content-hover-background) [&.router-tab-active]:text-primary [&.router-tab-active]:border-primary [&.router-tab-active]:bg-(--f-content-hover-background) whitespace-nowrap shrink-0"
+        >
+          @if (tab.icon) {
+            <ui-icon [name]="tab.icon"></ui-icon>
+          }
+          <span>{{ tab.label }}</span>
+        </a>
+      }
+    </div>
+  `, styles: [".router-tabs-scroll{-ms-overflow-style:none;scrollbar-width:none}.router-tabs-scroll::-webkit-scrollbar{display:none}\n"] }]
+        }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }] } });
+
 const DEFAULT_PAGE_SIZE = 20;
 /**
  * Base class for user selection components.
@@ -3954,35 +3869,48 @@ class BaseUserSelectComponent {
     translateAdapter = inject(TranslateService);
     abortController = null;
     // Inputs
-    loadUsers = input(...(ngDevMode ? [undefined, { debugName: "loadUsers" }] : []));
-    placeHolder = input('', ...(ngDevMode ? [{ debugName: "placeHolder" }] : []));
-    isEditMode = input.required(...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
-    filterActive = input(true, ...(ngDevMode ? [{ debugName: "filterActive" }] : []));
-    additionalFilters = input({}, ...(ngDevMode ? [{ debugName: "additionalFilters" }] : []));
-    pageSize = input(DEFAULT_PAGE_SIZE, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    loadUsers = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "loadUsers" }] : /* istanbul ignore next */ []));
+    placeHolder = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeHolder" }] : /* istanbul ignore next */ []));
+    isEditMode = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isEditMode" }] : /* istanbul ignore next */ []));
+    filterActive = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filterActive" }] : /* istanbul ignore next */ []));
+    additionalFilters = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "additionalFilters" }] : /* istanbul ignore next */ []));
+    pageSize = input(DEFAULT_PAGE_SIZE, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
     // Outputs
     onError = output();
     // Internal state
-    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
-    users = signal([], ...(ngDevMode ? [{ debugName: "users" }] : []));
-    total = signal(undefined, ...(ngDevMode ? [{ debugName: "total" }] : []));
+    isLoading = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+    users = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "users" }] : /* istanbul ignore next */ []));
+    total = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
     pagination = signal({
         pageSize: DEFAULT_PAGE_SIZE,
         currentPage: 0,
-    }, ...(ngDevMode ? [{ debugName: "pagination" }] : []));
-    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pagination" }] : /* istanbul ignore next */ []));
+    searchTerm = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
     // Computed dropdown data
     dropdownUsers = computed(() => this.users().map((user) => ({
         label: user.name || user.email,
         value: user.id,
-    })), ...(ngDevMode ? [{ debugName: "dropdownUsers" }] : []));
+    })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dropdownUsers" }] : /* istanbul ignore next */ []));
     // Computed placeholder with translation fallback
     displayPlaceholder = computed(() => {
         const customPlaceholder = this.placeHolder();
         if (customPlaceholder)
             return customPlaceholder;
         return this.t('shared.user.select.placeholder');
-    }, ...(ngDevMode ? [{ debugName: "displayPlaceholder" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayPlaceholder" }] : /* istanbul ignore next */ []));
     constructor() {
         // Cleanup on destroy
         this.destroyRef.onDestroy(() => {
@@ -4085,10 +4013,10 @@ class BaseUserSelectComponent {
         }
         return key;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BaseUserSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.5", type: BaseUserSelectComponent, isStandalone: true, inputs: { loadUsers: { classPropertyName: "loadUsers", publicName: "loadUsers", isSignal: true, isRequired: false, transformFunction: null }, placeHolder: { classPropertyName: "placeHolder", publicName: "placeHolder", isSignal: true, isRequired: false, transformFunction: null }, isEditMode: { classPropertyName: "isEditMode", publicName: "isEditMode", isSignal: true, isRequired: true, transformFunction: null }, filterActive: { classPropertyName: "filterActive", publicName: "filterActive", isSignal: true, isRequired: false, transformFunction: null }, additionalFilters: { classPropertyName: "additionalFilters", publicName: "additionalFilters", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onError: "onError" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BaseUserSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: BaseUserSelectComponent, isStandalone: true, inputs: { loadUsers: { classPropertyName: "loadUsers", publicName: "loadUsers", isSignal: true, isRequired: false, transformFunction: null }, placeHolder: { classPropertyName: "placeHolder", publicName: "placeHolder", isSignal: true, isRequired: false, transformFunction: null }, isEditMode: { classPropertyName: "isEditMode", publicName: "isEditMode", isSignal: true, isRequired: true, transformFunction: null }, filterActive: { classPropertyName: "filterActive", publicName: "filterActive", isSignal: true, isRequired: false, transformFunction: null }, additionalFilters: { classPropertyName: "additionalFilters", publicName: "additionalFilters", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onError: "onError" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: BaseUserSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BaseUserSelectComponent, decorators: [{
             type: Directive
         }], ctorParameters: () => [], propDecorators: { loadUsers: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadUsers", required: false }] }], placeHolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeHolder", required: false }] }], isEditMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEditMode", required: true }] }], filterActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterActive", required: false }] }], additionalFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "additionalFilters", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], onError: [{ type: i0.Output, args: ["onError"] }] } });
 
@@ -4122,9 +4050,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
  */
 class UserMultiSelectComponent extends BaseUserSelectComponent {
     // Inputs
-    showClear = input(true, ...(ngDevMode ? [{ debugName: "showClear" }] : []));
+    showClear = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
     // Two-way bound value
-    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     // Outputs
     usersSelected = output();
     setupValueEffect() {
@@ -4138,8 +4068,8 @@ class UserMultiSelectComponent extends BaseUserSelectComponent {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UserMultiSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: UserMultiSelectComponent, isStandalone: true, selector: "lib-user-multi-select", inputs: { showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", usersSelected: "usersSelected" }, usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: UserMultiSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: UserMultiSelectComponent, isStandalone: true, selector: "lib-user-multi-select", inputs: { showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", usersSelected: "usersSelected" }, usesInheritance: true, ngImport: i0, template: `
     <lib-lazy-multi-select
       [(value)]="value"
       [placeHolder]="displayPlaceholder()"
@@ -4152,13 +4082,13 @@ class UserMultiSelectComponent extends BaseUserSelectComponent {
       (onSearch)="handleSearch($event)"
       (onPagination)="handlePagination($event)"
     />
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: LazyMultiSelectComponent, selector: "lib-lazy-multi-select", inputs: ["placeHolder", "showClear", "isEditMode", "isLoading", "total", "pagination", "selectDataList", "value"], outputs: ["valueChange", "onSearch", "onPagination"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "ngmodule", type: UiModule }, { kind: "component", type: LazyMultiSelectComponent, selector: "lib-lazy-multi-select", inputs: ["placeHolder", "showClear", "isEditMode", "isLoading", "total", "pagination", "selectDataList", "value"], outputs: ["valueChange", "onSearch", "onPagination"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UserMultiSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: UserMultiSelectComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-user-multi-select',
-                    imports: [AngularModule, PrimeModule, LazyMultiSelectComponent],
+                    imports: [AngularModule, UiModule, LazyMultiSelectComponent],
                     template: `
     <lib-lazy-multi-select
       [(value)]="value"
@@ -4205,9 +4135,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
  */
 class UserSelectComponent extends BaseUserSelectComponent {
     // Inputs
-    showClear = input(true, ...(ngDevMode ? [{ debugName: "showClear" }] : []));
+    showClear = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
     // Two-way bound value
-    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     // Outputs
     userSelected = output();
     setupValueEffect() {
@@ -4226,8 +4158,8 @@ class UserSelectComponent extends BaseUserSelectComponent {
             });
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UserSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.5", type: UserSelectComponent, isStandalone: true, selector: "lib-user-select", inputs: { showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", userSelected: "userSelected" }, usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: UserSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: UserSelectComponent, isStandalone: true, selector: "lib-user-select", inputs: { showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", userSelected: "userSelected" }, usesInheritance: true, ngImport: i0, template: `
     <lib-lazy-select
       [(value)]="value"
       [placeHolder]="displayPlaceholder()"
@@ -4242,13 +4174,13 @@ class UserSelectComponent extends BaseUserSelectComponent {
       (onSearch)="handleSearch($event)"
       (onPagination)="handlePagination($event)"
     />
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: LazySelectComponent, selector: "lib-lazy-select", inputs: ["placeHolder", "showClear", "optionLabel", "optionValue", "isEditMode", "isLoading", "total", "pagination", "selectDataList", "value"], outputs: ["valueChange", "onSearch", "onPagination"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "ngmodule", type: UiModule }, { kind: "component", type: LazySelectComponent, selector: "lib-lazy-select", inputs: ["placeHolder", "showClear", "optionLabel", "optionValue", "isEditMode", "isLoading", "total", "pagination", "selectDataList", "value"], outputs: ["valueChange", "onSearch", "onPagination"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: UserSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: UserSelectComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-user-select',
-                    imports: [AngularModule, PrimeModule, LazySelectComponent],
+                    imports: [AngularModule, UiModule, LazySelectComponent],
                     template: `
     <lib-lazy-select
       [(value)]="value"
@@ -4406,5 +4338,5 @@ function getUserTimezone() {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_PERMISSIONS, AUTH_STATE_PROVIDER, AngularModule, ApiResourceService, ApiResourceService as ApiService, BRANCH_PERMISSIONS, BaseFormComponent, BaseFormControl, BaseFormTemplateDirective, BaseListComponent, BaseListTemplateDirective, BaseUserSelectComponent, COMPANY_ACTION_PERMISSIONS, COMPANY_API_PROVIDER, COMPANY_PERMISSIONS, CookieService, EMAIL_CONFIG_PERMISSIONS, EMAIL_TEMPLATE_PERMISSIONS, EVENT_PERMISSIONS, EditModeElementChangerDirective, FILE_PERMISSIONS, FILE_PROVIDER, FILE_TYPE_FILTERS, FOLDER_PERMISSIONS, FORM_PERMISSIONS, FORM_RESULT_PERMISSIONS, FaviconService, FileSelectorDialogComponent, FileUploaderComponent, FileUrlService, HasPermissionDirective, IconComponent, IconTypeEnum, InlineSvgComponent, IsEmptyImageDirective, LANGUAGE_PERMISSIONS, LazyMultiSelectComponent, LazySelectComponent, NOTIFICATION_PERMISSIONS, PERMISSIONS, PROFILE_PERMISSION_PROVIDER, PermissionValidatorService, PlatformService, PreventDefaultDirective, PrimeModule, ROLE_ACTION_PERMISSIONS, ROLE_PERMISSIONS, SHARED_MESSAGES, SKIP_ERROR_TOAST, STORAGE_CONFIG_PERMISSIONS, TRANSLATION_KEY_PERMISSIONS, TRANSLATION_PERMISSIONS, TranslatePipe, TranslateService, UPLOAD_CONFIG_PERMISSIONS, USER_ACTION_PERMISSIONS, USER_PERMISSIONS, USER_PERMISSION_PROVIDER, USER_PROVIDER, USER_ROLE_PERMISSIONS, UserMultiSelectComponent, UserSelectComponent, allPermissionsGuard, anyPermissionGuard, checkScrollPagination, errorCatchingInterceptor, evaluateLogicNode, evaluatePermission, formatFileSize, formatInTimezone, getAcceptString, getFileIconClass, getUserTimezone, hasAllPermissions, hasAnyPermission, hasPermission, isFileTypeAllowed, localToUtc, permissionGuard, provideValueAccessor, resolveTranslationModule, utcToLocal };
+export { ACTION_PERMISSIONS, AUTH_STATE_PROVIDER, AngularModule, ApiResourceService, ApiResourceService as ApiService, BRANCH_PERMISSIONS, BaseFormComponent, BaseFormControl, BaseFormTemplateDirective, BaseListComponent, BaseListTemplateDirective, BaseUserSelectComponent, COMPANY_ACTION_PERMISSIONS, COMPANY_API_PROVIDER, COMPANY_PERMISSIONS, CookieService, EMAIL_CONFIG_PERMISSIONS, EMAIL_TEMPLATE_PERMISSIONS, EVENT_PERMISSIONS, EditModeElementChangerDirective, FILE_PERMISSIONS, FILE_PROVIDER, FILE_TYPE_FILTERS, FOLDER_PERMISSIONS, FORM_PERMISSIONS, FORM_RESULT_PERMISSIONS, FaviconService, FileSelectorDialogComponent, FileUploaderComponent, FileUrlService, HasPermissionDirective, IconComponent, IconTypeEnum, InlineSvgComponent, IsEmptyImageDirective, LANGUAGE_PERMISSIONS, LazyMultiSelectComponent, LazySelectComponent, NOTIFICATION_PERMISSIONS, PERMISSIONS, PROFILE_PERMISSION_PROVIDER, PermissionValidatorService, PlatformService, PreventDefaultDirective, ROLE_ACTION_PERMISSIONS, ROLE_PERMISSIONS, RouterTabsComponent, SHARED_MESSAGES, SKIP_ERROR_TOAST, STORAGE_CONFIG_PERMISSIONS, TRANSLATION_KEY_PERMISSIONS, TRANSLATION_PERMISSIONS, TranslatePipe, TranslateService, UPLOAD_CONFIG_PERMISSIONS, USER_ACTION_PERMISSIONS, USER_PERMISSIONS, USER_PERMISSION_PROVIDER, USER_PROVIDER, USER_ROLE_PERMISSIONS, UserMultiSelectComponent, UserSelectComponent, allPermissionsGuard, anyPermissionGuard, checkScrollPagination, errorCatchingInterceptor, evaluateLogicNode, evaluatePermission, formatFileSize, formatInTimezone, getAcceptString, getFileIconClass, getUserTimezone, hasAllPermissions, hasAnyPermission, hasPermission, isFileTypeAllowed, localToUtc, permissionGuard, provideValueAccessor, resolveTranslationModule, utcToLocal };
 //# sourceMappingURL=flusys-ng-shared.mjs.map