@flusys/ng-shared 0.1.0-beta.3 → 1.1.0-beta

package/fesm2022/flusys-ng-shared.mjs

@@ -1,20 +1,24 @@
 import * as i0 from '@angular/core';
-import { inject, PLATFORM_ID, Injectable, DOCUMENT, REQUEST, signal, computed, ElementRef, input, effect, Directive, TemplateRef, ViewContainerRef, output, HostListener, NgModule, resource, Component, Injector, model, runInInjectionContext, untracked, forwardRef, viewChild, ChangeDetectionStrategy, InjectionToken } from '@angular/core';
+import { inject, PLATFORM_ID, Injectable, DOCUMENT, REQUEST, signal, computed, ElementRef, input, effect, Directive, TemplateRef, ViewContainerRef, output, HostListener, NgModule, Injector, runInInjectionContext, resource, Component, model, untracked, forwardRef, viewChild, ChangeDetectionStrategy, InjectionToken, DestroyRef, afterNextRender, isDevMode } from '@angular/core';
 import * as i1 from '@angular/common';
 import { isPlatformServer, CommonModule, NgOptimizedImage, NgComponentOutlet, DatePipe } from '@angular/common';
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 import { APP_CONFIG, getServiceUrl, ApiLoaderService } from '@flusys/ng-core';
-import { of, firstValueFrom, skip, debounceTime, distinctUntilChanged, tap as tap$1 } from 'rxjs';
-import { tap, catchError, map } from 'rxjs/operators';
-import * as i4 from '@angular/forms';
-import { NgControl, ReactiveFormsModule, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { of, firstValueFrom, skip, debounceTime, distinctUntilChanged, tap as tap$1, map as map$1 } from 'rxjs';
+import { map, tap, catchError } from 'rxjs/operators';
+import * as i1$2 from '@angular/forms';
+import { NgControl, FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { RouterOutlet, RouterLink, Router } from '@angular/router';
 import { AutoCompleteModule } from 'primeng/autocomplete';
+import { AvatarModule } from 'primeng/avatar';
+import * as i1$3 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import { CardModule } from 'primeng/card';
-import * as i2 from 'primeng/checkbox';
+import * as i1$1 from 'primeng/checkbox';
 import { CheckboxModule } from 'primeng/checkbox';
+import { ConfirmDialogModule } from 'primeng/confirmdialog';
 import { DatePickerModule } from 'primeng/datepicker';
+import * as i5 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
 import { DividerModule } from 'primeng/divider';
 import { FileUploadModule } from 'primeng/fileupload';
@@ -22,7 +26,7 @@ import { IconFieldModule } from 'primeng/iconfield';
 import { ImageModule } from 'primeng/image';
 import { InputIconModule } from 'primeng/inputicon';
 import { InputNumberModule } from 'primeng/inputnumber';
-import * as i1$1 from 'primeng/inputtext';
+import * as i2 from 'primeng/inputtext';
 import { InputTextModule } from 'primeng/inputtext';
 import { ListboxModule } from 'primeng/listbox';
 import { MultiSelectModule } from 'primeng/multiselect';
@@ -30,26 +34,100 @@ import { PaginatorModule } from 'primeng/paginator';
 import { PanelModule } from 'primeng/panel';
 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 i3 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 { TableModule } from 'primeng/table';
 import { TabsModule } from 'primeng/tabs';
 import { TagModule } from 'primeng/tag';
 import { TextareaModule } from 'primeng/textarea';
+import { ToastModule } from 'primeng/toast';
 import { ToggleSwitchModule } from 'primeng/toggleswitch';
 import { TooltipModule } from 'primeng/tooltip';
 import { TreeTableModule } from 'primeng/treetable';
 import { toSignal, toObservable } from '@angular/core/rxjs-interop';
+import * as i3$1 from 'primeng/api';
+import { MessageService } from 'primeng/api';
 
 ;
 ;
 
+/**
+ * Common file type filters
+ */
+const FILE_TYPE_FILTERS = {
+    IMAGES: ['image/jpeg', 'image/png', 'image/gif', 'image/webp', 'image/svg+xml'],
+    DOCUMENTS: [
+        'application/pdf',
+        'application/msword',
+        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+        'application/vnd.ms-excel',
+        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    ],
+    VIDEOS: ['video/mp4', 'video/webm', 'video/ogg', 'video/quicktime'],
+    AUDIO: ['audio/mpeg', 'audio/wav', 'audio/ogg', 'audio/webm'],
+    ALL: [],
+};
+/**
+ * Get accept string for file input from content types
+ */
+function getAcceptString(contentTypes) {
+    if (!contentTypes.length)
+        return '*/*';
+    return contentTypes.join(',');
+}
+/**
+ * Check if file matches allowed content types
+ */
+function isFileTypeAllowed(file, allowedTypes) {
+    if (!allowedTypes.length)
+        return true;
+    return allowedTypes.some((type) => {
+        if (type.endsWith('/*')) {
+            return file.type.startsWith(type.replace('/*', '/'));
+        }
+        return file.type === type;
+    });
+}
+/**
+ * Get file icon class based on content type
+ */
+function getFileIconClass(contentType) {
+    if (contentType.startsWith('image/'))
+        return 'pi pi-image';
+    if (contentType.startsWith('video/'))
+        return 'pi pi-video';
+    if (contentType.startsWith('audio/'))
+        return 'pi pi-volume-up';
+    if (contentType.includes('pdf'))
+        return 'pi pi-file-pdf';
+    if (contentType.includes('word') || contentType.includes('document'))
+        return 'pi pi-file-word';
+    if (contentType.includes('excel') || contentType.includes('spreadsheet'))
+        return 'pi pi-file-excel';
+    return 'pi pi-file';
+}
+/**
+ * Format file size for display
+ */
+function formatFileSize(sizeInKb) {
+    const kb = typeof sizeInKb === 'string' ? parseFloat(sizeInKb) : sizeInKb;
+    if (kb < 1024)
+        return `${kb.toFixed(1)} KB`;
+    const mb = kb / 1024;
+    if (mb < 1024)
+        return `${mb.toFixed(1)} MB`;
+    const gb = mb / 1024;
+    return `${gb.toFixed(2)} GB`;
+}
+
 var ContactTypeEnum;
 (function (ContactTypeEnum) {
     ContactTypeEnum[ContactTypeEnum["PHONE"] = 1] = "PHONE";
@@ -68,10 +146,10 @@ class PlatformService {
     get isServer() {
         return isPlatformServer(this.platformId);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PlatformService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PlatformService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: PlatformService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: PlatformService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PlatformService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: PlatformService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -85,10 +163,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.0", ngImport: i0, type: CookieService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CookieService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CookieService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CookieService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CookieService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: CookieService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -124,28 +202,54 @@ class FileUrlService {
     }
     /**
      * Fetch file URLs from backend and update cache.
-     * Returns Observable of fetched files.
+     * Skips IDs already in cache to prevent duplicate calls.
+     * Returns Observable of fetched files (including cached ones).
      */
-    fetchFileUrls(fileIds) {
+    fetchFileUrls(fileIds, forceRefresh = false) {
         if (!fileIds.length)
             return of([]);
-        const requestDto = fileIds.map((id) => ({ id }));
-        return this.http.post(`${getServiceUrl(this.appConfig, 'storage')}/file-manager/get-files`, requestDto).pipe(tap((files) => {
-            // Update cache
-            const cache = new Map(this.urlCache());
-            files.forEach((file) => cache.set(file.id, file));
-            this.urlCache.set(cache);
-        }), catchError((error) => {
-            console.error('Failed to fetch file URLs:', error);
-            return of([]);
-        }));
+        const cache = this.urlCache();
+        // Filter out IDs already in cache (unless force refresh)
+        const missingIds = forceRefresh
+            ? fileIds
+            : fileIds.filter((id) => !cache.has(id));
+        // If all files are cached, return from cache
+        if (missingIds.length === 0) {
+            const cachedFiles = fileIds
+                .map((id) => cache.get(id))
+                .filter((f) => !!f);
+            return of(cachedFiles);
+        }
+        const requestDto = missingIds.map((id) => ({ id }));
+        return this.http
+            .post(`${getServiceUrl(this.appConfig, 'storage')}/file-manager/get-files`, requestDto)
+            .pipe(map((response) => response.data ?? []), tap((files) => {
+            // Update cache with new files
+            const newCache = new Map(this.urlCache());
+            files.forEach((file) => newCache.set(file.id, file));
+            this.urlCache.set(newCache);
+        }), map(() => {
+            // Return all requested files (cached + newly fetched)
+            const allCache = this.urlCache();
+            return fileIds
+                .map((id) => allCache.get(id))
+                .filter((f) => !!f);
+        }), catchError(() => of([])));
     }
     /**
      * Fetch a single file URL.
+     * Uses cache if available to prevent duplicate calls.
      * Returns Observable of file info or null if not found.
      */
-    fetchSingleFileUrl(fileId) {
-        return this.fetchFileUrls([fileId]).pipe(map((files) => files[0] ?? null));
+    fetchSingleFileUrl(fileId, forceRefresh = false) {
+        // Return from cache immediately if available
+        if (!forceRefresh) {
+            const cached = this.urlCache().get(fileId);
+            if (cached) {
+                return of(cached);
+            }
+        }
+        return this.fetchFileUrls([fileId], forceRefresh).pipe(map((files) => files[0] ?? null));
     }
     /**
      * Clear the URL cache.
@@ -162,10 +266,10 @@ class FileUrlService {
         cache.delete(fileId);
         this.urlCache.set(cache);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FileUrlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FileUrlService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FileUrlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FileUrlService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FileUrlService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FileUrlService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -247,10 +351,10 @@ class PermissionValidatorService {
     isPermissionsLoaded() {
         return this._isLoaded();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PermissionValidatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PermissionValidatorService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: PermissionValidatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: PermissionValidatorService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PermissionValidatorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: PermissionValidatorService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -268,11 +372,6 @@ class EditModeElementChangerDirective {
             this.updateControl(editMode);
         });
     }
-    ngAfterViewInit() {
-        const editMode = this.isEditMode();
-        this.updateElement(editMode);
-        this.updateControl(editMode);
-    }
     updateControl(editMode) {
         if (!editMode)
             this.ngControl?.control?.disable();
@@ -284,44 +383,41 @@ class EditModeElementChangerDirective {
         if (inputElement instanceof HTMLInputElement) {
             if (!editMode) {
                 inputElement.setAttribute('readonly', 'true');
-                inputElement?.classList.add('edit-mode-element-css');
+                inputElement.classList.add('edit-mode-element-css');
             }
             else {
                 inputElement.removeAttribute('readonly');
-                inputElement?.classList.remove('edit-mode-element-css');
+                inputElement.classList.remove('edit-mode-element-css');
             }
         }
-        if (inputElement.tagName == 'P-SELECT') {
+        if (inputElement.tagName === 'P-SELECT') {
             if (!editMode) {
-                inputElement.classList.add('edit-mode-element-css');
-                inputElement.classList.add('overflow-hidden');
+                inputElement.classList.add('edit-mode-element-css', 'overflow-hidden');
                 inputElement.querySelector('.p-select-dropdown').style.display = 'none';
                 inputElement.querySelector('.p-select-label').classList.add('edit-mode-element-css');
             }
             else {
-                inputElement.classList.remove("edit-mode-element-css");
+                inputElement.classList.remove('edit-mode-element-css', 'overflow-hidden');
                 inputElement.querySelector('.p-select-dropdown').style.display = 'flex';
-                inputElement.querySelector('.p-select-label').classList.remove("edit-mode-element-css");
-                inputElement.classList.remove('overflow-hidden');
+                inputElement.querySelector('.p-select-label').classList.remove('edit-mode-element-css');
             }
         }
-        if (inputElement.tagName == 'P-CALENDAR') {
+        if (inputElement.tagName === 'P-CALENDAR') {
+            const firstChild = inputElement.firstElementChild;
             if (!editMode) {
-                inputElement.firstElementChild.children[0]?.classList.add('edit-mode-element-css');
-                inputElement.firstElementChild.children[0]?.classList.add('cursor-auto');
-                inputElement.firstElementChild.children[1]?.classList.add('hidden');
+                firstChild?.children[0]?.classList.add('edit-mode-element-css', 'cursor-auto');
+                firstChild?.children[1]?.classList.add('hidden');
             }
             else {
-                inputElement.firstElementChild.children[0]?.classList.remove('edit-mode-element-css');
-                inputElement.firstElementChild.children[0]?.classList.remove('cursor-auto');
-                inputElement.firstElementChild.children[1]?.classList.remove('hidden');
+                firstChild?.children[0]?.classList.remove('edit-mode-element-css', 'cursor-auto');
+                firstChild?.children[1]?.classList.remove('hidden');
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EditModeElementChangerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", 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: "21.1.3", ngImport: i0, type: EditModeElementChangerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.3", 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.0", ngImport: i0, type: EditModeElementChangerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: EditModeElementChangerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appEditModeElementChanger]',
@@ -478,10 +574,10 @@ class HasPermissionDirective {
             this.viewCreated = false;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: HasPermissionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", 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: "21.1.3", ngImport: i0, type: HasPermissionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.3", 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.0", ngImport: i0, type: HasPermissionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: HasPermissionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[hasPermission]',
@@ -503,10 +599,10 @@ class IsEmptyImageDirective {
     onError() {
         this.hasError.set(true);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IsEmptyImageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", 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: "21.1.3", ngImport: i0, type: IsEmptyImageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.3", 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.0", ngImport: i0, type: IsEmptyImageDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: IsEmptyImageDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'img',
@@ -543,13 +639,12 @@ class PreventDefaultDirective {
     }
     processEvent(event) {
         event.preventDefault();
-        if (this.action)
-            this.action.emit(event);
+        this.action.emit(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PreventDefaultDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", 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: "21.1.3", ngImport: i0, type: PreventDefaultDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.3", 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.0", ngImport: i0, type: PreventDefaultDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: PreventDefaultDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[appPreventDefault]',
@@ -567,162 +662,176 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
             }] } });
 
 class AngularModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AngularModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: AngularModule, imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AngularModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: AngularModule, imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
             RouterOutlet,
             RouterLink,
             IsEmptyImageDirective,
             NgOptimizedImage,
             NgComponentOutlet,
             PreventDefaultDirective], exports: [CommonModule,
-            ReactiveFormsModule,
             FormsModule,
+            ReactiveFormsModule,
             RouterOutlet,
             RouterLink,
             IsEmptyImageDirective,
             NgOptimizedImage,
             NgComponentOutlet,
             PreventDefaultDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AngularModule, providers: [
-            DatePipe,
-        ], imports: [CommonModule, CommonModule,
-            ReactiveFormsModule,
-            FormsModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AngularModule, providers: [DatePipe], imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule, CommonModule,
+            FormsModule,
+            ReactiveFormsModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AngularModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AngularModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
                         CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
                         RouterOutlet,
                         RouterLink,
                         IsEmptyImageDirective,
                         NgOptimizedImage,
                         NgComponentOutlet,
-                        PreventDefaultDirective
-                    ],
-                    providers: [
-                        DatePipe,
+                        PreventDefaultDirective,
                     ],
+                    providers: [DatePipe],
                     exports: [
                         CommonModule,
-                        ReactiveFormsModule,
                         FormsModule,
+                        ReactiveFormsModule,
                         RouterOutlet,
                         RouterLink,
                         IsEmptyImageDirective,
                         NgOptimizedImage,
                         NgComponentOutlet,
-                        PreventDefaultDirective
+                        PreventDefaultDirective,
                     ],
                 }]
         }] });
 
 class PrimeModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PrimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: PrimeModule, exports: [InputTextModule,
-            TagModule,
-            SelectButtonModule,
-            PasswordModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: PrimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.3", ngImport: i0, type: PrimeModule, exports: [AutoCompleteModule,
+            AvatarModule,
             ButtonModule,
-            TooltipModule,
+            CardModule,
             CheckboxModule,
-            StepsModule,
-            RippleModule,
-            PanelModule,
-            PaginatorModule,
-            TableModule,
-            InputNumberModule,
-            TextareaModule,
-            ProgressBarModule,
+            ConfirmDialogModule,
+            DatePickerModule,
+            DialogModule,
+            DividerModule,
             FileUploadModule,
-            CardModule,
-            SelectModule,
-            InputIconModule,
             IconFieldModule,
-            PopoverModule,
+            ImageModule,
+            InputIconModule,
+            InputNumberModule,
+            InputTextModule,
             ListboxModule,
+            MultiSelectModule,
+            PaginatorModule,
+            PanelModule,
+            PasswordModule,
+            PopoverModule,
+            ProgressBarModule,
             RadioButtonModule,
-            ToggleSwitchModule,
-            ImageModule,
-            DatePickerModule,
+            RippleModule,
+            SelectButtonModule,
+            SelectModule,
+            SkeletonModule,
             SplitButtonModule,
-            DividerModule,
-            MultiSelectModule,
-            AutoCompleteModule,
+            StepsModule,
+            TableModule,
             TabsModule,
-            DialogModule,
-            TreeTableModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PrimeModule, imports: [InputTextModule,
             TagModule,
-            SelectButtonModule,
-            PasswordModule,
-            ButtonModule,
+            TextareaModule,
+            ToastModule,
+            ToggleSwitchModule,
             TooltipModule,
+            TreeTableModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: PrimeModule, imports: [AutoCompleteModule,
+            AvatarModule,
+            ButtonModule,
+            CardModule,
             CheckboxModule,
-            StepsModule,
-            RippleModule,
-            PanelModule,
-            PaginatorModule,
-            TableModule,
-            InputNumberModule,
-            TextareaModule,
-            ProgressBarModule,
+            ConfirmDialogModule,
+            DatePickerModule,
+            DialogModule,
+            DividerModule,
             FileUploadModule,
-            CardModule,
-            SelectModule,
-            InputIconModule,
             IconFieldModule,
-            PopoverModule,
+            ImageModule,
+            InputIconModule,
+            InputNumberModule,
+            InputTextModule,
             ListboxModule,
+            MultiSelectModule,
+            PaginatorModule,
+            PanelModule,
+            PasswordModule,
+            PopoverModule,
+            ProgressBarModule,
             RadioButtonModule,
-            ToggleSwitchModule,
-            ImageModule,
-            DatePickerModule,
+            RippleModule,
+            SelectButtonModule,
+            SelectModule,
+            SkeletonModule,
             SplitButtonModule,
-            DividerModule,
-            MultiSelectModule,
-            AutoCompleteModule,
+            StepsModule,
+            TableModule,
             TabsModule,
-            DialogModule,
+            TagModule,
+            TextareaModule,
+            ToastModule,
+            ToggleSwitchModule,
+            TooltipModule,
             TreeTableModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PrimeModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: PrimeModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [
-                        InputTextModule,
-                        TagModule,
-                        SelectButtonModule,
-                        PasswordModule,
+                        AutoCompleteModule,
+                        AvatarModule,
                         ButtonModule,
-                        TooltipModule,
+                        CardModule,
                         CheckboxModule,
-                        StepsModule,
-                        RippleModule,
-                        PanelModule,
-                        PaginatorModule,
-                        TableModule,
-                        InputNumberModule,
-                        TextareaModule,
-                        ProgressBarModule,
+                        ConfirmDialogModule,
+                        DatePickerModule,
+                        DialogModule,
+                        DividerModule,
                         FileUploadModule,
-                        CardModule,
-                        SelectModule,
-                        InputIconModule,
                         IconFieldModule,
-                        PopoverModule,
+                        ImageModule,
+                        InputIconModule,
+                        InputNumberModule,
+                        InputTextModule,
                         ListboxModule,
+                        MultiSelectModule,
+                        PaginatorModule,
+                        PanelModule,
+                        PasswordModule,
+                        PopoverModule,
+                        ProgressBarModule,
                         RadioButtonModule,
-                        ToggleSwitchModule,
-                        ImageModule,
-                        DatePickerModule,
+                        RippleModule,
+                        SelectButtonModule,
+                        SelectModule,
+                        SkeletonModule,
                         SplitButtonModule,
-                        DividerModule,
-                        MultiSelectModule,
-                        AutoCompleteModule,
+                        StepsModule,
+                        TableModule,
                         TabsModule,
-                        DialogModule,
+                        TagModule,
+                        TextareaModule,
+                        ToastModule,
+                        ToggleSwitchModule,
+                        TooltipModule,
                         TreeTableModule,
                     ],
                 }]
@@ -775,6 +884,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
 class ApiResourceService {
     baseUrl;
     loaderService = inject(ApiLoaderService);
+    injector = inject(Injector);
     http;
     moduleApiName;
     // ==========================================================================
@@ -789,22 +899,54 @@ class ApiResourceService {
         select: [],
         sort: {},
     }, ...(ngDevMode ? [{ debugName: "filterData" }] : []));
-    /** Resource for list data - uses IListResponse matching backend */
-    listResource;
+    /**
+     * Resource for list data - lazy initialized to prevent auto-fetch on service injection.
+     * Call initListResource() or any list method (fetchList, reload, etc.) to initialize.
+     */
+    _listResource = null;
+    /** Whether the list resource has been initialized */
+    _resourceInitialized = false;
+    /** Get or create the list resource (lazy initialization) */
+    get listResource() {
+        if (!this._listResource) {
+            this.initListResource();
+        }
+        return this._listResource;
+    }
+    /**
+     * Initialize the list resource. Called automatically when accessing listResource
+     * or any list-related computed signals/methods.
+     * Uses runInInjectionContext to support lazy initialization outside constructor.
+     */
+    initListResource() {
+        if (this._resourceInitialized)
+            return;
+        this._resourceInitialized = true;
+        runInInjectionContext(this.injector, () => {
+            this._listResource = resource({ ...(ngDevMode ? { debugName: "_listResource" } : {}), params: () => ({
+                    search: this.searchTerm(),
+                    filter: this.filterData(),
+                }),
+                loader: async ({ params }) => {
+                    const { search, filter } = params;
+                    return this.fetchAllAsync(search, filter);
+                } });
+        });
+    }
     // ==========================================================================
     // Computed State Accessors
     // ==========================================================================
     /** Whether data is currently loading */
-    isLoading = computed(() => this.listResource.isLoading(), ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    isLoading = computed(() => this._listResource?.isLoading() ?? false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
     /** List data array */
-    data = computed(() => this.listResource.value()?.data ?? [], ...(ngDevMode ? [{ debugName: "data" }] : []));
+    data = computed(() => this._listResource?.value()?.data ?? [], ...(ngDevMode ? [{ debugName: "data" }] : []));
     /** Total count of items */
-    total = computed(() => this.listResource.value()?.meta?.total ?? 0, ...(ngDevMode ? [{ debugName: "total" }] : []));
+    total = computed(() => this._listResource?.value()?.meta?.total ?? 0, ...(ngDevMode ? [{ debugName: "total" }] : []));
     /** Pagination metadata */
-    pageInfo = computed(() => this.listResource.value()?.meta, ...(ngDevMode ? [{ debugName: "pageInfo" }] : []));
+    pageInfo = computed(() => this._listResource?.value()?.meta, ...(ngDevMode ? [{ debugName: "pageInfo" }] : []));
     /** Whether there are more pages */
     hasMore = computed(() => {
-        const meta = this.listResource.value()?.meta;
+        const meta = this._listResource?.value()?.meta;
         if (!meta)
             return false;
         return meta.hasMore ?? (meta.page + 1) * meta.pageSize < meta.total;
@@ -813,15 +955,7 @@ class ApiResourceService {
         this.moduleApiName = moduleApiName;
         this.baseUrl = inject(APP_CONFIG).apiBaseUrl + '/' + moduleApiName;
         this.http = http;
-        // Create resource that reacts to search and filter changes
-        this.listResource = resource({ ...(ngDevMode ? { debugName: "listResource" } : {}), params: () => ({
-                search: this.searchTerm(),
-                filter: this.filterData(),
-            }),
-            loader: async ({ params }) => {
-                const { search, filter } = params;
-                return this.fetchAllAsync(search, filter);
-            } });
+        // Resource is now lazy-initialized, not created in constructor
     }
     getHttpOptions(endpoint, params) {
         return {
@@ -835,9 +969,10 @@ class ApiResourceService {
     // List Management Methods
     // ==========================================================================
     /**
-     * Fetch list data (triggers resource reload)
+     * Fetch list data (triggers resource initialization and reload)
      */
     fetchList(search = '', filter) {
+        this.initListResource();
         this.searchTerm.set(search);
         if (filter) {
             this.filterData.update((prev) => ({ ...prev, ...filter }));
@@ -847,12 +982,14 @@ class ApiResourceService {
      * Update pagination
      */
     setPagination(pagination) {
+        this.initListResource();
         this.filterData.update((prev) => ({ ...prev, pagination }));
     }
     /**
      * Go to next page
      */
     nextPage() {
+        this.initListResource();
         this.filterData.update((prev) => ({
             ...prev,
             pagination: {
@@ -865,6 +1002,7 @@ class ApiResourceService {
      * Reset to first page
      */
     resetPagination() {
+        this.initListResource();
         this.filterData.update((prev) => ({
             ...prev,
             pagination: { currentPage: 0, pageSize: prev.pagination?.pageSize ?? 10 },
@@ -874,7 +1012,9 @@ class ApiResourceService {
      * Reload current data
      */
     reload() {
-        this.listResource.reload();
+        if (this._listResource) {
+            this._listResource.reload();
+        }
     }
     // ==========================================================================
     // Observable-based API Methods (IApiService interface)
@@ -984,8 +1124,8 @@ 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.0", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", 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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", 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 [ngClass]="icon()"></i>
     }@else if(iconType()==IconTypeEnum.IMAGE_FILE_LINK){
@@ -995,7 +1135,7 @@ class IconComponent {
     }@else{ I } }
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IsEmptyImageDirective, selector: "img", inputs: ["src"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-icon',
@@ -1109,10 +1249,10 @@ class BaseFormControl {
             this.onTouched();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BaseFormControl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", 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: "21.1.3", ngImport: i0, type: BaseFormControl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.3", 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.0", ngImport: i0, type: BaseFormControl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", 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"] }] } });
 /**
@@ -1189,8 +1329,6 @@ class LazyMultiSelectComponent extends BaseFormControl {
             })), { initialValue: this.searchTerm() });
         });
     }
-    // Signal to toggle panel
-    scrollTargetEl = null;
     onScrollBound = this.onScroll.bind(this);
     multiScrollContainer = viewChild.required('multiScrollContainer');
     onScroll(event) {
@@ -1254,10 +1392,10 @@ class LazyMultiSelectComponent extends BaseFormControl {
         event.stopPropagation();
         this.value.set([]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LazyMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: LazyMultiSelectComponent, isStandalone: true, selector: "lib-lazy-multi-select", inputs: { placeHolder: { classPropertyName: "placeHolder", publicName: "placeHolder", 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" }, host: { listeners: { "document:click": "handleDocumentClick($event)" } }, providers: [provideValueAccessor(LazyMultiSelectComponent)], viewQueries: [{ propertyName: "multiScrollContainer", first: true, predicate: ["multiScrollContainer"], descendants: true, isSignal: true }, { propertyName: "pSelectRef", first: true, predicate: ["pSelect"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"p-select w-full\" #pSelect (click)=\"onSelectClick($event)\"\n     [class.p-disabled]=\"disabled()\">\n    @if(selectedValueDisplay()){\n    <span class=\"p-select-label\">{{selectedValueDisplay()}}</span>\n    }@else {\n    <span class=\"p-select-label p-placeholder\">{{placeHolder()}}</span>\n    }\n    <span class=\"p-select-clear-icon\" (click)=\"clear($event)\"><i class=\"pi pi-times\"></i></span>\n    <div class=\"p-select-dropdown\">\n        <span class=\"p-select-dropdown-icon flex items-center\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n                data-p-icon=\"chevron-down\" class=\"p-multiselect-dropdown-icon p-icon ng-star-inserted\"\n                data-pc-section=\"triggericon\" aria-hidden=\"true\" pc75=\"\">\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\"></path>\n            </svg>\n        </span>\n    </div>\n    @if(openOptions()){\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 binary=\"true\" (onChange)=\"changeSelectAll($event)\" [ngModel]=\"isSelectAll()\" [disabled]=\"disabled()\"/>\n            <input type=\"text\" pInputText class=\"w-full\" [ngModel]=\"searchTerm()\"\n                (ngModelChange)=\"searchTerm.set($event)\" [ngModelOptions]=\"{ standalone: true }\"\n                placeholder=\"Search...\" />\n        </div>\n        <div class=\"p-select-list-container\" (scroll)=\"onScroll($event)\">\n            <ul class=\"p-select-list\">\n                @for (data of selectDataList(); track key(data); let i = $index) {\n                <li class=\"p-select-option flex flex-row gap-2 items-center\"\n                    [ngClass]=\"{ 'p-select-option-selected': isSelected(data) }\">\n                    <p-checkbox binary=\"true\" (onChange)=\"selectValue($event,data)\" [ngModel]=\"isSelected(data)\" [disabled]=\"disabled()\" />\n                    <span>{{data.label}}</span>\n                </li>\n                }\n            </ul>\n        </div>\n    </div>\n    }\n</div>", styles: [".p-select-overlay{top:33px;z-index:1004;transform-origin:center top;margin-top:2px}.p-select-option:hover{background:var(--p-select-option-focus-background);color:var(--p-select-option-focus-color)}.p-select-list-container{max-height:200px}.p-select-option.p-select-option-selected{background:var(--p-select-option-selected-background);color:var(--p-select-option-selected-color)}.p-select-option.p-select-option-selected:hover{background:var(--p-select-option-selected-focus-background);color:var(--p-select-option-selected-focus-color)}\n"], dependencies: [{ kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i1$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i2.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: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: LazyMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: LazyMultiSelectComponent, isStandalone: true, selector: "lib-lazy-multi-select", inputs: { placeHolder: { classPropertyName: "placeHolder", publicName: "placeHolder", 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" }, host: { listeners: { "document:click": "handleDocumentClick($event)" } }, providers: [provideValueAccessor(LazyMultiSelectComponent)], viewQueries: [{ propertyName: "multiScrollContainer", first: true, predicate: ["multiScrollContainer"], descendants: true, isSignal: true }, { propertyName: "pSelectRef", first: true, predicate: ["pSelect"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"p-select w-full\" #pSelect (click)=\"onSelectClick($event)\"\n     [class.p-disabled]=\"disabled()\">\n    @if(selectedValueDisplay()){\n    <span class=\"p-select-label\">{{selectedValueDisplay()}}</span>\n    }@else {\n    <span class=\"p-select-label p-placeholder\">{{placeHolder()}}</span>\n    }\n    <span class=\"p-select-clear-icon\" (click)=\"clear($event)\"><i class=\"pi pi-times\"></i></span>\n    <div class=\"p-select-dropdown\">\n        <span class=\"p-select-dropdown-icon flex items-center\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n                data-p-icon=\"chevron-down\" class=\"p-multiselect-dropdown-icon p-icon ng-star-inserted\"\n                data-pc-section=\"triggericon\" aria-hidden=\"true\" pc75=\"\">\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\"></path>\n            </svg>\n        </span>\n    </div>\n    @if(openOptions()){\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 binary=\"true\" (onChange)=\"changeSelectAll($event)\" [ngModel]=\"isSelectAll()\" [disabled]=\"disabled()\"/>\n            <input type=\"text\" pInputText class=\"w-full\" [ngModel]=\"searchTerm()\"\n                (ngModelChange)=\"searchTerm.set($event)\" [ngModelOptions]=\"{ standalone: true }\"\n                placeholder=\"Search...\" />\n        </div>\n        <div class=\"p-select-list-container\" (scroll)=\"onScroll($event)\">\n            <ul class=\"p-select-list\">\n                @for (data of selectDataList(); track key(data); let i = $index) {\n                <li class=\"p-select-option flex flex-row gap-2 items-center\"\n                    [ngClass]=\"{ 'p-select-option-selected': isSelected(data) }\">\n                    <p-checkbox binary=\"true\" (onChange)=\"selectValue($event,data)\" [ngModel]=\"isSelected(data)\" [disabled]=\"disabled()\" />\n                    <span>{{data.label}}</span>\n                </li>\n                }\n            </ul>\n        </div>\n    </div>\n    }\n</div>", styles: [".p-select-overlay{top:33px;z-index:1004;transform-origin:center top;margin-top:2px}.p-select-option:hover{background:var(--p-select-option-focus-background);color:var(--p-select-option-focus-color)}.p-select-list-container{max-height:200px}.p-select-option.p-select-option-selected{background:var(--p-select-option-selected-background);color:var(--p-select-option-selected-color)}.p-select-option.p-select-option-selected:hover{background:var(--p-select-option-selected-focus-background);color:var(--p-select-option-selected-focus-color)}\n"], dependencies: [{ kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i1$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: i2.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LazyMultiSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: LazyMultiSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-lazy-multi-select', imports: [PrimeModule, AngularModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideValueAccessor(LazyMultiSelectComponent)], template: "<div class=\"p-select w-full\" #pSelect (click)=\"onSelectClick($event)\"\n     [class.p-disabled]=\"disabled()\">\n    @if(selectedValueDisplay()){\n    <span class=\"p-select-label\">{{selectedValueDisplay()}}</span>\n    }@else {\n    <span class=\"p-select-label p-placeholder\">{{placeHolder()}}</span>\n    }\n    <span class=\"p-select-clear-icon\" (click)=\"clear($event)\"><i class=\"pi pi-times\"></i></span>\n    <div class=\"p-select-dropdown\">\n        <span class=\"p-select-dropdown-icon flex items-center\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n                data-p-icon=\"chevron-down\" class=\"p-multiselect-dropdown-icon p-icon ng-star-inserted\"\n                data-pc-section=\"triggericon\" aria-hidden=\"true\" pc75=\"\">\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\"></path>\n            </svg>\n        </span>\n    </div>\n    @if(openOptions()){\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 binary=\"true\" (onChange)=\"changeSelectAll($event)\" [ngModel]=\"isSelectAll()\" [disabled]=\"disabled()\"/>\n            <input type=\"text\" pInputText class=\"w-full\" [ngModel]=\"searchTerm()\"\n                (ngModelChange)=\"searchTerm.set($event)\" [ngModelOptions]=\"{ standalone: true }\"\n                placeholder=\"Search...\" />\n        </div>\n        <div class=\"p-select-list-container\" (scroll)=\"onScroll($event)\">\n            <ul class=\"p-select-list\">\n                @for (data of selectDataList(); track key(data); let i = $index) {\n                <li class=\"p-select-option flex flex-row gap-2 items-center\"\n                    [ngClass]=\"{ 'p-select-option-selected': isSelected(data) }\">\n                    <p-checkbox binary=\"true\" (onChange)=\"selectValue($event,data)\" [ngModel]=\"isSelected(data)\" [disabled]=\"disabled()\" />\n                    <span>{{data.label}}</span>\n                </li>\n                }\n            </ul>\n        </div>\n    </div>\n    }\n</div>", styles: [".p-select-overlay{top:33px;z-index:1004;transform-origin:center top;margin-top:2px}.p-select-option:hover{background:var(--p-select-option-focus-background);color:var(--p-select-option-focus-color)}.p-select-list-container{max-height:200px}.p-select-option.p-select-option-selected{background:var(--p-select-option-selected-background);color:var(--p-select-option-selected-color)}.p-select-option.p-select-option-selected:hover{background:var(--p-select-option-selected-focus-background);color:var(--p-select-option-selected-focus-color)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { placeHolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeHolder", 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"] }], multiScrollContainer: [{ type: i0.ViewChild, args: ['multiScrollContainer', { isSignal: true }] }], pSelectRef: [{ type: i0.ViewChild, args: ['pSelect', { isSignal: true }] }], handleDocumentClick: [{
@@ -1331,9 +1469,6 @@ class LazySelectComponent extends BaseFormControl {
                     target.addEventListener('scroll', this.onScrollBound);
                     this.scrollTargetEl = target;
                 }
-                else {
-                    console.warn('.p-select-list-container not found after panel show');
-                }
             }, 0);
         }
         else {
@@ -1346,10 +1481,10 @@ class LazySelectComponent extends BaseFormControl {
     onBlur() {
         this.markAsTouched();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LazySelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.0", type: LazySelectComponent, isStandalone: true, selector: "lib-lazy-select", inputs: { placeHolder: { classPropertyName: "placeHolder", publicName: "placeHolder", 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    [options]=\"selectDataList()\"\n    [(ngModel)]=\"value\"\n    [optionLabel]=\"optionLabel()\"\n    [optionValue]=\"optionValue()\"\n    [filter]=\"true\"\n    [showClear]=\"true\"\n    [placeholder]=\"placeHolder()\"\n    [disabled]=\"disabled()\"\n    class=\"w-full\"\n    appEditModeElementChanger\n    [isEditMode]=\"isEditMode()\"\n    (click)=\"showPanel()\"\n    (onBlur)=\"onBlur()\">\n    <ng-template let-filter #filter>\n      <input\n        pInputText\n        [ngModel]=\"searchTerm()\"\n        (ngModelChange)=\"searchTerm.set($event)\"\n        [ngModelOptions]=\"{standalone:true}\"\n        class=\"w-full\" />\n    </ng-template>\n    <ng-template #selectedItem let-selectedOption>\n      {{ selectedOption[optionLabel()] }}\n    </ng-template>\n    <ng-template let-item #item>\n      {{ item[optionLabel()] }}\n    </ng-template>\n  </p-select>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i1$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i3.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: LazySelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.3", type: LazySelectComponent, isStandalone: true, selector: "lib-lazy-select", inputs: { placeHolder: { classPropertyName: "placeHolder", publicName: "placeHolder", 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    [options]=\"selectDataList()\"\n    [(ngModel)]=\"value\"\n    [optionLabel]=\"optionLabel()\"\n    [optionValue]=\"optionValue()\"\n    [filter]=\"true\"\n    [showClear]=\"true\"\n    [placeholder]=\"placeHolder()\"\n    [disabled]=\"disabled()\"\n    class=\"w-full\"\n    appEditModeElementChanger\n    [isEditMode]=\"isEditMode()\"\n    (click)=\"showPanel()\"\n    (onBlur)=\"onBlur()\">\n    <ng-template let-filter #filter>\n      <input\n        pInputText\n        [ngModel]=\"searchTerm()\"\n        (ngModelChange)=\"searchTerm.set($event)\"\n        [ngModelOptions]=\"{standalone:true}\"\n        class=\"w-full\" />\n    </ng-template>\n    <ng-template #selectedItem let-selectedOption>\n      {{ selectedOption[optionLabel()] }}\n    </ng-template>\n    <ng-template let-item #item>\n      {{ item[optionLabel()] }}\n    </ng-template>\n  </p-select>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i3.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LazySelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: LazySelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-lazy-select', imports: [
                         AngularModule,
@@ -1412,7 +1547,1237 @@ const USER_PERMISSION_PROVIDER = new InjectionToken('USER_PERMISSION_PROVIDER',
         throw new Error('USER_PERMISSION_PROVIDER not configured. Please provide an implementation in app.config.ts');
     },
 });
+/**
+ * Auth State Provider Token
+ *
+ * Provides auth state access for feature packages (form-builder, etc.)
+ */
+const AUTH_STATE_PROVIDER = new InjectionToken('AUTH_STATE_PROVIDER', {
+    providedIn: 'root',
+    factory: () => {
+        throw new Error('AUTH_STATE_PROVIDER not configured. Please provide an implementation in app.config.ts');
+    },
+});
+/**
+ * Profile Permission Provider Token
+ *
+ * Provides user permission data for profile display.
+ * Optional - if not configured, profile permissions section is hidden.
+ * Use with `inject(PROFILE_PERMISSION_PROVIDER, { optional: true })`.
+ */
+const PROFILE_PERMISSION_PROVIDER = new InjectionToken('PROFILE_PERMISSION_PROVIDER');
+/**
+ * Profile Upload Provider Token
+ *
+ * Provides file upload functionality for profile pictures.
+ * Optional - if not configured or storage not enabled, upload section is hidden.
+ * Use with `inject(PROFILE_UPLOAD_PROVIDER, { optional: true })`.
+ */
+const PROFILE_UPLOAD_PROVIDER = new InjectionToken('PROFILE_UPLOAD_PROVIDER');
+/**
+ * User List Provider Token
+ *
+ * Provides extra actions, columns, and data enrichment for user list.
+ * Optional - if not configured, default user list behavior is used.
+ * Use with `inject(USER_LIST_PROVIDER, { optional: true })`.
+ *
+ * @example
+ * // In app.config.ts
+ * providers: [
+ *   { provide: USER_LIST_PROVIDER, useClass: MyUserListProvider },
+ * ]
+ */
+const USER_LIST_PROVIDER = new InjectionToken('USER_LIST_PROVIDER');
+
+const DEFAULT_PAGE_SIZE$2 = 20;
+/**
+ * User Select Component - Single user selection with lazy loading.
+ *
+ * Uses USER_PROVIDER internally by default, or accepts custom `loadUsers` function.
+ *
+ * Features:
+ * - Search with debouncing (handled by lazy-select)
+ * - Infinite scroll pagination
+ * - Filter active users by default (configurable)
+ * - Supports additional filters via `additionalFilters` input
+ *
+ * @example
+ * ```html
+ * <!-- Simple usage - uses USER_PROVIDER internally -->
+ * <lib-user-select
+ *   [(value)]="selectedUserId"
+ *   [isEditMode]="true"
+ * />
+ *
+ * <!-- With custom loadUsers function -->
+ * <lib-user-select
+ *   [(value)]="selectedUserId"
+ *   [isEditMode]="true"
+ *   [loadUsers]="customLoadUsers"
+ * />
+ * ```
+ */
+class UserSelectComponent {
+    destroyRef = inject(DestroyRef);
+    userProvider = inject(USER_PROVIDER);
+    abortController = null;
+    // Optional: custom function to load users (uses USER_PROVIDER if not provided)
+    loadUsers = input(...(ngDevMode ? [undefined, { debugName: "loadUsers" }] : []));
+    // Inputs
+    placeHolder = input('Select User', ...(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$2, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    // Two-way bound value
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    // Outputs
+    userSelected = output();
+    onError = output();
+    // Internal state
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    users = signal([], ...(ngDevMode ? [{ debugName: "users" }] : []));
+    total = signal(undefined, ...(ngDevMode ? [{ debugName: "total" }] : []));
+    pagination = signal({ pageSize: DEFAULT_PAGE_SIZE$2, currentPage: 0 }, ...(ngDevMode ? [{ debugName: "pagination" }] : []));
+    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
+    // Computed dropdown data
+    dropdownUsers = computed(() => this.users().map((user) => ({
+        label: user.name || user.email,
+        value: user.id,
+    })), ...(ngDevMode ? [{ debugName: "dropdownUsers" }] : []));
+    constructor() {
+        // Cleanup on destroy
+        this.destroyRef.onDestroy(() => {
+            this.abortController?.abort();
+        });
+        // Update page size from input
+        effect(() => {
+            const size = this.pageSize();
+            untracked(() => {
+                this.pagination.update((p) => ({ ...p, pageSize: size }));
+            });
+        });
+        // Load initial users after render
+        afterNextRender(() => {
+            this.fetchUsers();
+        });
+        // Emit selected user when value changes
+        effect(() => {
+            const selectedId = this.value();
+            const users = this.users();
+            untracked(() => {
+                if (selectedId) {
+                    const user = users.find((u) => u.id === selectedId);
+                    this.userSelected.emit(user ?? null);
+                }
+                else {
+                    this.userSelected.emit(null);
+                }
+            });
+        });
+    }
+    handleSearch(search) {
+        this.searchTerm.set(search);
+        this.pagination.update((p) => ({ ...p, currentPage: 0 }));
+        this.users.set([]);
+        this.fetchUsers();
+    }
+    handlePagination(pagination) {
+        this.pagination.set(pagination);
+        this.fetchUsers(true);
+    }
+    async fetchUsers(append = false) {
+        if (this.isLoading())
+            return;
+        // Cancel previous request
+        this.abortController?.abort();
+        this.abortController = new AbortController();
+        this.isLoading.set(true);
+        try {
+            const pag = this.pagination();
+            const filter = {
+                page: pag.currentPage,
+                pageSize: pag.pageSize,
+                search: this.searchTerm(),
+                ...this.additionalFilters(),
+            };
+            // Use custom loadUsers if provided, otherwise use USER_PROVIDER
+            const customLoadUsers = this.loadUsers();
+            const response = await firstValueFrom(customLoadUsers
+                ? customLoadUsers(filter)
+                : this.loadUsersFromProvider(filter));
+            if (response.success && response.data) {
+                if (append) {
+                    this.users.update((current) => [...current, ...response.data]);
+                }
+                else {
+                    this.users.set(response.data);
+                }
+                this.total.set(response.meta?.total);
+            }
+        }
+        catch (error) {
+            if (error.name !== 'AbortError') {
+                this.onError.emit(error);
+            }
+        }
+        finally {
+            this.isLoading.set(false);
+        }
+    }
+    /** Load users from USER_PROVIDER with active filter */
+    loadUsersFromProvider(filter) {
+        return this.userProvider
+            .getUsers({
+            page: filter.page,
+            pageSize: filter.pageSize,
+            search: filter.search,
+            isActive: this.filterActive() ? true : undefined,
+        })
+            .pipe(map$1((res) => ({
+            ...res,
+            data: res.data?.map((u) => ({
+                id: u.id,
+                name: u.name,
+                email: u.email,
+            })),
+        })));
+    }
+    /** Reload users (useful when filters change externally) */
+    reload() {
+        this.pagination.update((p) => ({ ...p, currentPage: 0 }));
+        this.users.set([]);
+        this.fetchUsers();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UserSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.3", type: UserSelectComponent, isStandalone: true, selector: "lib-user-select", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", userSelected: "userSelected", onError: "onError" }, ngImport: i0, template: `
+    <lib-lazy-select
+      [(value)]="value"
+      [placeHolder]="placeHolder()"
+      [optionLabel]="'label'"
+      [optionValue]="'value'"
+      [isEditMode]="isEditMode()"
+      [isLoading]="isLoading()"
+      [total]="total()"
+      [pagination]="pagination()"
+      [selectDataList]="dropdownUsers()"
+      (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", "optionLabel", "optionValue", "isEditMode", "isLoading", "total", "pagination", "selectDataList", "value"], outputs: ["valueChange", "onSearch", "onPagination"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UserSelectComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-user-select',
+                    standalone: true,
+                    imports: [AngularModule, PrimeModule, LazySelectComponent],
+                    template: `
+    <lib-lazy-select
+      [(value)]="value"
+      [placeHolder]="placeHolder()"
+      [optionLabel]="'label'"
+      [optionValue]="'value'"
+      [isEditMode]="isEditMode()"
+      [isLoading]="isLoading()"
+      [total]="total()"
+      [pagination]="pagination()"
+      [selectDataList]="dropdownUsers()"
+      (onSearch)="handleSearch($event)"
+      (onPagination)="handlePagination($event)"
+    />
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], 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 }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], userSelected: [{ type: i0.Output, args: ["userSelected"] }], onError: [{ type: i0.Output, args: ["onError"] }] } });
+
+const DEFAULT_PAGE_SIZE$1 = 20;
+/**
+ * User Multi-Select Component - Multiple user selection with lazy loading.
+ *
+ * Uses USER_PROVIDER internally by default, or accepts custom `loadUsers` function.
+ *
+ * Features:
+ * - Search with debouncing (handled by lazy-multi-select)
+ * - Infinite scroll pagination
+ * - Select all / deselect all
+ * - Filter active users by default (configurable)
+ * - Supports additional filters via `additionalFilters` input
+ *
+ * @example
+ * ```html
+ * <!-- Simple usage - uses USER_PROVIDER internally -->
+ * <lib-user-multi-select
+ *   [(value)]="selectedUserIds"
+ *   [isEditMode]="true"
+ * />
+ *
+ * <!-- With custom loadUsers function -->
+ * <lib-user-multi-select
+ *   [(value)]="selectedUserIds"
+ *   [isEditMode]="true"
+ *   [loadUsers]="customLoadUsers"
+ * />
+ * ```
+ */
+class UserMultiSelectComponent {
+    destroyRef = inject(DestroyRef);
+    userProvider = inject(USER_PROVIDER);
+    abortController = null;
+    // Optional: custom function to load users (uses USER_PROVIDER if not provided)
+    loadUsers = input(...(ngDevMode ? [undefined, { debugName: "loadUsers" }] : []));
+    // Inputs
+    placeHolder = input('Select Users', ...(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$1, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    // Two-way bound value
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    // Outputs
+    usersSelected = output();
+    onError = output();
+    // Internal state
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    users = signal([], ...(ngDevMode ? [{ debugName: "users" }] : []));
+    total = signal(undefined, ...(ngDevMode ? [{ debugName: "total" }] : []));
+    pagination = signal({ pageSize: DEFAULT_PAGE_SIZE$1, currentPage: 0 }, ...(ngDevMode ? [{ debugName: "pagination" }] : []));
+    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
+    // Computed dropdown data
+    dropdownUsers = computed(() => this.users().map((user) => ({
+        label: user.name || user.email,
+        value: user.id,
+    })), ...(ngDevMode ? [{ debugName: "dropdownUsers" }] : []));
+    constructor() {
+        // Cleanup on destroy
+        this.destroyRef.onDestroy(() => {
+            this.abortController?.abort();
+        });
+        // Update page size from input
+        effect(() => {
+            const size = this.pageSize();
+            untracked(() => {
+                this.pagination.update((p) => ({ ...p, pageSize: size }));
+            });
+        });
+        // Load initial users after render
+        afterNextRender(() => {
+            this.fetchUsers();
+        });
+        // Emit selected users when value changes
+        effect(() => {
+            const selectedIds = this.value() ?? [];
+            const users = this.users();
+            untracked(() => {
+                const selectedUsers = users.filter((u) => selectedIds.includes(u.id));
+                this.usersSelected.emit(selectedUsers);
+            });
+        });
+    }
+    handleSearch(search) {
+        this.searchTerm.set(search);
+        this.pagination.update((p) => ({ ...p, currentPage: 0 }));
+        this.users.set([]);
+        this.fetchUsers();
+    }
+    handlePagination(pagination) {
+        this.pagination.set(pagination);
+        this.fetchUsers(true);
+    }
+    async fetchUsers(append = false) {
+        if (this.isLoading())
+            return;
+        // Cancel previous request
+        this.abortController?.abort();
+        this.abortController = new AbortController();
+        this.isLoading.set(true);
+        try {
+            const pag = this.pagination();
+            const filter = {
+                page: pag.currentPage,
+                pageSize: pag.pageSize,
+                search: this.searchTerm(),
+                ...this.additionalFilters(),
+            };
+            // Use custom loadUsers if provided, otherwise use USER_PROVIDER
+            const customLoadUsers = this.loadUsers();
+            const response = await firstValueFrom(customLoadUsers
+                ? customLoadUsers(filter)
+                : this.loadUsersFromProvider(filter));
+            if (response.success && response.data) {
+                if (append) {
+                    this.users.update((current) => [...current, ...response.data]);
+                }
+                else {
+                    this.users.set(response.data);
+                }
+                this.total.set(response.meta?.total);
+            }
+        }
+        catch (error) {
+            if (error.name !== 'AbortError') {
+                this.onError.emit(error);
+            }
+        }
+        finally {
+            this.isLoading.set(false);
+        }
+    }
+    /** Load users from USER_PROVIDER with active filter */
+    loadUsersFromProvider(filter) {
+        return this.userProvider
+            .getUsers({
+            page: filter.page,
+            pageSize: filter.pageSize,
+            search: filter.search,
+            isActive: this.filterActive() ? true : undefined,
+        })
+            .pipe(map$1((res) => ({
+            ...res,
+            data: res.data?.map((u) => ({
+                id: u.id,
+                name: u.name,
+                email: u.email,
+            })),
+        })));
+    }
+    /** Reload users (useful when filters change externally) */
+    reload() {
+        this.pagination.update((p) => ({ ...p, currentPage: 0 }));
+        this.users.set([]);
+        this.fetchUsers();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UserMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.3", type: UserMultiSelectComponent, isStandalone: true, selector: "lib-user-multi-select", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", usersSelected: "usersSelected", onError: "onError" }, ngImport: i0, template: `
+    <lib-lazy-multi-select
+      [(value)]="value"
+      [placeHolder]="placeHolder()"
+      [isEditMode]="isEditMode()"
+      [isLoading]="isLoading()"
+      [total]="total()"
+      [pagination]="pagination()"
+      [selectDataList]="dropdownUsers()"
+      (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", "isEditMode", "isLoading", "total", "pagination", "selectDataList", "value"], outputs: ["valueChange", "onSearch", "onPagination"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UserMultiSelectComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-user-multi-select',
+                    standalone: true,
+                    imports: [AngularModule, PrimeModule, LazyMultiSelectComponent],
+                    template: `
+    <lib-lazy-multi-select
+      [(value)]="value"
+      [placeHolder]="placeHolder()"
+      [isEditMode]="isEditMode()"
+      [isLoading]="isLoading()"
+      [total]="total()"
+      [pagination]="pagination()"
+      [selectDataList]="dropdownUsers()"
+      (onSearch)="handleSearch($event)"
+      (onPagination)="handlePagination($event)"
+    />
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], 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 }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], usersSelected: [{ type: i0.Output, args: ["usersSelected"] }], onError: [{ type: i0.Output, args: ["onError"] }] } });
+
+/**
+ * File Uploader Component - Drag & drop file upload with type filtering.
+ *
+ * Pass your own `uploadFile` function - works with any storage API.
+ *
+ * Features:
+ * - Drag & drop support
+ * - File type filtering (images, documents, etc.)
+ * - Upload progress indication
+ * - Multiple file support (optional)
+ * - Image compression options
+ *
+ * @example
+ * ```typescript
+ * // In component
+ * readonly uploadService = inject(UploadService);
+ *
+ * readonly uploadFile: UploadFileFn = (file, options) =>
+ *   this.uploadService.uploadSingleFile(file, options);
+ * ```
+ *
+ * ```html
+ * <!-- Single image upload -->
+ * <lib-file-uploader
+ *   [uploadFile]="uploadFile"
+ *   [acceptTypes]="['image/*']"
+ *   [multiple]="false"
+ *   (fileUploaded)="onFileUploaded($event)"
+ * />
+ *
+ * <!-- Multiple document upload -->
+ * <lib-file-uploader
+ *   [uploadFile]="uploadFile"
+ *   [acceptTypes]="FILE_TYPE_FILTERS.DOCUMENTS"
+ *   [multiple]="true"
+ *   [maxFiles]="5"
+ *   (filesUploaded)="onFilesUploaded($event)"
+ * />
+ * ```
+ */
+class FileUploaderComponent {
+    messageService = inject(MessageService);
+    // Required: function to upload file
+    uploadFile = input.required(...(ngDevMode ? [{ debugName: "uploadFile" }] : []));
+    // Inputs
+    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" }] : []));
+    // Outputs
+    fileUploaded = output();
+    filesUploaded = output();
+    onError = output();
+    fileSelected = output();
+    // Internal state
+    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" }] : []));
+    // Computed
+    acceptString = computed(() => getAcceptString(this.acceptTypes()), ...(ngDevMode ? [{ debugName: "acceptString" }] : []));
+    acceptTypesDisplay = computed(() => {
+        const types = this.acceptTypes();
+        if (!types.length)
+            return '';
+        // Check if types match predefined filters
+        const typesStr = JSON.stringify(types);
+        if (typesStr === JSON.stringify(FILE_TYPE_FILTERS.IMAGES))
+            return 'Images';
+        if (typesStr === JSON.stringify(FILE_TYPE_FILTERS.DOCUMENTS))
+            return 'Documents';
+        if (typesStr === JSON.stringify(FILE_TYPE_FILTERS.VIDEOS))
+            return 'Videos';
+        if (typesStr === JSON.stringify(FILE_TYPE_FILTERS.AUDIO))
+            return 'Audio';
+        return types.map(t => t.split('/')[1] || t).join(', ');
+    }, ...(ngDevMode ? [{ debugName: "acceptTypesDisplay" }] : []));
+    onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!this.disabled() && !this.isUploading()) {
+            this.isDragOver.set(true);
+        }
+    }
+    onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver.set(false);
+    }
+    onDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver.set(false);
+        if (this.disabled() || this.isUploading())
+            return;
+        const files = event.dataTransfer?.files;
+        if (files?.length) {
+            this.handleFiles(Array.from(files));
+        }
+    }
+    onFileSelected(event) {
+        const input = event.target;
+        const files = input.files;
+        if (files?.length) {
+            this.handleFiles(Array.from(files));
+        }
+        // Reset input to allow selecting same file again
+        input.value = '';
+    }
+    handleFiles(files) {
+        // Filter by type
+        const allowedTypes = this.acceptTypes();
+        const validFiles = files.filter(file => {
+            if (!isFileTypeAllowed(file, allowedTypes)) {
+                this.messageService.add({
+                    severity: 'warn',
+                    summary: 'Invalid File Type',
+                    detail: `File type not allowed: ${file.name}`,
+                });
+                return false;
+            }
+            return true;
+        });
+        // Filter by size
+        const maxSize = this.maxSizeMb() * 1024 * 1024;
+        const sizeValidFiles = validFiles.filter(file => {
+            if (file.size > maxSize) {
+                this.messageService.add({
+                    severity: 'warn',
+                    summary: 'File Too Large',
+                    detail: `${file.name} exceeds ${this.maxSizeMb()}MB limit`,
+                });
+                return false;
+            }
+            return true;
+        });
+        // Limit number of files
+        const limitedFiles = this.multiple()
+            ? sizeValidFiles.slice(0, this.maxFiles())
+            : sizeValidFiles.slice(0, 1);
+        if (!limitedFiles.length)
+            return;
+        this.selectedFiles.set(limitedFiles);
+        this.fileSelected.emit(limitedFiles);
+        if (this.autoUpload()) {
+            this.uploadFiles(limitedFiles);
+        }
+    }
+    removeFile(file) {
+        this.selectedFiles.update(files => files.filter(f => f !== file));
+    }
+    async uploadFiles(files) {
+        const filesToUpload = files ?? this.selectedFiles();
+        if (!filesToUpload.length || this.isUploading())
+            return;
+        this.isUploading.set(true);
+        const uploadedFiles = [];
+        try {
+            for (const file of filesToUpload) {
+                this.uploadingFileName.set(file.name);
+                this.uploadProgress.set(0);
+                const response = await firstValueFrom(this.uploadFile()(file, this.uploadOptions()));
+                if (response.success && response.data) {
+                    uploadedFiles.push(response.data);
+                    this.fileUploaded.emit(response.data);
+                }
+                else {
+                    throw new Error(response.message || 'Upload failed');
+                }
+            }
+            this.filesUploaded.emit(uploadedFiles);
+            this.selectedFiles.set([]);
+            this.messageService.add({
+                severity: 'success',
+                summary: 'Upload Complete',
+                detail: `${uploadedFiles.length} file(s) uploaded successfully`,
+            });
+        }
+        catch (error) {
+            this.messageService.add({
+                severity: 'error',
+                summary: 'Upload Failed',
+                detail: error.message || 'Failed to upload file',
+            });
+            this.onError.emit(error);
+        }
+        finally {
+            this.isUploading.set(false);
+            this.uploadingFileName.set('');
+            this.uploadProgress.set(0);
+        }
+    }
+    getFileIcon(file) {
+        return getFileIconClass(file.type);
+    }
+    formatSize(bytes) {
+        const kb = bytes / 1024;
+        if (kb < 1024)
+            return `${kb.toFixed(1)} KB`;
+        const mb = kb / 1024;
+        return `${mb.toFixed(1)} MB`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FileUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: FileUploaderComponent, isStandalone: true, selector: "lib-file-uploader", inputs: { uploadFile: { classPropertyName: "uploadFile", publicName: "uploadFile", isSignal: true, isRequired: true, 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: `
+    <div
+      class="file-uploader"
+      [class.drag-over]="isDragOver()"
+      [class.disabled]="disabled()"
+      (dragover)="onDragOver($event)"
+      (dragleave)="onDragLeave($event)"
+      (drop)="onDrop($event)"
+    >
+      <!-- Upload Area -->
+      <div class="upload-area" (click)="fileInput.click()">
+        @if (isUploading()) {
+          <div class="uploading-state">
+            <i class="pi pi-spin pi-spinner text-4xl text-primary"></i>
+            <p class="mt-2">Uploading {{ uploadingFileName() }}...</p>
+            @if (uploadProgress() > 0) {
+              <p-progressBar [value]="uploadProgress()" [showValue]="true" />
+            }
+          </div>
+        } @else {
+          <div class="idle-state text-center">
+            <i class="pi pi-cloud-upload text-4xl text-primary"></i>
+            <p class="mt-2 mb-1 font-semibold">
+              {{ multiple() ? 'Drop files here or click to upload' : 'Drop file here or click to upload' }}
+            </p>
+            <p class="text-sm text-color-secondary">
+              @if (acceptTypesDisplay()) {
+                Allowed: {{ acceptTypesDisplay() }}
+              } @else {
+                All file types allowed
+              }
+              @if (maxSizeMb()) {
+                (Max {{ maxSizeMb() }}MB)
+              }
+            </p>
+          </div>
+        }
+      </div>
+
+      <!-- Hidden File Input -->
+      <input
+        #fileInput
+        type="file"
+        [accept]="acceptString()"
+        [multiple]="multiple()"
+        [disabled]="disabled() || isUploading()"
+        (change)="onFileSelected($event)"
+        class="hidden"
+      />
+
+      <!-- Selected Files Preview -->
+      @if (selectedFiles().length > 0 && showPreview()) {
+        <div class="selected-files mt-3">
+          @for (file of selectedFiles(); track file.name) {
+            <div class="file-item flex align-items-center gap-2 p-2 border-round surface-border border-1 mb-2">
+              <i [class]="getFileIcon(file)"></i>
+              <span class="flex-1 text-overflow-ellipsis overflow-hidden">{{ file.name }}</span>
+              <span class="text-sm text-color-secondary">{{ formatSize(file.size) }}</span>
+              <button
+                pButton
+                type="button"
+                icon="pi pi-times"
+                class="p-button-text p-button-rounded p-button-sm"
+                (click)="removeFile(file)"
+                [disabled]="isUploading()"
+              ></button>
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [".file-uploader{width:100%}.upload-area{border:2px dashed var(--surface-border);border-radius:var(--border-radius);padding:2rem;cursor:pointer;transition:all .2s;background:var(--surface-ground)}.upload-area:hover{border-color:var(--primary-color);background:var(--surface-hover)}.drag-over .upload-area{border-color:var(--primary-color);background:var(--primary-100)}.disabled .upload-area{opacity:.6;cursor:not-allowed}.hidden{display:none}\n"], dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i1$3.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: i2$1.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "unit", "mode", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FileUploaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-file-uploader', standalone: true, imports: [AngularModule, PrimeModule], template: `
+    <div
+      class="file-uploader"
+      [class.drag-over]="isDragOver()"
+      [class.disabled]="disabled()"
+      (dragover)="onDragOver($event)"
+      (dragleave)="onDragLeave($event)"
+      (drop)="onDrop($event)"
+    >
+      <!-- Upload Area -->
+      <div class="upload-area" (click)="fileInput.click()">
+        @if (isUploading()) {
+          <div class="uploading-state">
+            <i class="pi pi-spin pi-spinner text-4xl text-primary"></i>
+            <p class="mt-2">Uploading {{ uploadingFileName() }}...</p>
+            @if (uploadProgress() > 0) {
+              <p-progressBar [value]="uploadProgress()" [showValue]="true" />
+            }
+          </div>
+        } @else {
+          <div class="idle-state text-center">
+            <i class="pi pi-cloud-upload text-4xl text-primary"></i>
+            <p class="mt-2 mb-1 font-semibold">
+              {{ multiple() ? 'Drop files here or click to upload' : 'Drop file here or click to upload' }}
+            </p>
+            <p class="text-sm text-color-secondary">
+              @if (acceptTypesDisplay()) {
+                Allowed: {{ acceptTypesDisplay() }}
+              } @else {
+                All file types allowed
+              }
+              @if (maxSizeMb()) {
+                (Max {{ maxSizeMb() }}MB)
+              }
+            </p>
+          </div>
+        }
+      </div>
+
+      <!-- Hidden File Input -->
+      <input
+        #fileInput
+        type="file"
+        [accept]="acceptString()"
+        [multiple]="multiple()"
+        [disabled]="disabled() || isUploading()"
+        (change)="onFileSelected($event)"
+        class="hidden"
+      />
+
+      <!-- Selected Files Preview -->
+      @if (selectedFiles().length > 0 && showPreview()) {
+        <div class="selected-files mt-3">
+          @for (file of selectedFiles(); track file.name) {
+            <div class="file-item flex align-items-center gap-2 p-2 border-round surface-border border-1 mb-2">
+              <i [class]="getFileIcon(file)"></i>
+              <span class="flex-1 text-overflow-ellipsis overflow-hidden">{{ file.name }}</span>
+              <span class="text-sm text-color-secondary">{{ formatSize(file.size) }}</span>
+              <button
+                pButton
+                type="button"
+                icon="pi pi-times"
+                class="p-button-text p-button-rounded p-button-sm"
+                (click)="removeFile(file)"
+                [disabled]="isUploading()"
+              ></button>
+            </div>
+          }
+        </div>
+      }
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".file-uploader{width:100%}.upload-area{border:2px dashed var(--surface-border);border-radius:var(--border-radius);padding:2rem;cursor:pointer;transition:all .2s;background:var(--surface-ground)}.upload-area:hover{border-color:var(--primary-color);background:var(--surface-hover)}.drag-over .upload-area{border-color:var(--primary-color);background:var(--primary-100)}.disabled .upload-area{opacity:.6;cursor:not-allowed}.hidden{display:none}\n"] }]
+        }], propDecorators: { uploadFile: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadFile", required: true }] }], 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 = 20;
+/**
+ * File Selector Dialog - Browse and select existing files with filtering.
+ *
+ * Pass your own `loadFiles` function - works with any storage API.
+ *
+ * Features:
+ * - Search with debouncing
+ * - File type filtering
+ * - Infinite scroll pagination
+ * - Single or multiple selection
+ * - File preview with icons
+ *
+ * @example
+ * ```typescript
+ * // In component
+ * readonly fileService = inject(FileManagerApiService);
+ *
+ * readonly loadFiles: LoadFilesFn = (filter) =>
+ *   this.fileService.getAll(filter.search, {
+ *     pagination: { currentPage: filter.page, pageSize: filter.pageSize },
+ *     filter: { contentTypes: filter.contentTypes },
+ *   }).pipe(
+ *     map(res => ({
+ *       ...res,
+ *       data: res.data?.map(f => ({
+ *         id: f.id,
+ *         name: f.name,
+ *         contentType: f.contentType,
+ *         size: f.size,
+ *         url: f.url
+ *       }))
+ *     }))
+ *   );
+ * ```
+ *
+ * ```html
+ * <lib-file-selector-dialog
+ *   [(visible)]="showFileSelector"
+ *   [loadFiles]="loadFiles"
+ *   [acceptTypes]="['image/*']"
+ *   [multiple]="false"
+ *   (fileSelected)="onFileSelected($event)"
+ * />
+ * ```
+ */
+class FileSelectorDialogComponent {
+    destroyRef = inject(DestroyRef);
+    abortController = null;
+    searchDebounceTimer = null;
+    // Required: function to load files
+    loadFiles = input.required(...(ngDevMode ? [{ debugName: "loadFiles" }] : []));
+    // Inputs
+    header = input('Select File', ...(ngDevMode ? [{ debugName: "header" }] : []));
+    acceptTypes = input([], ...(ngDevMode ? [{ debugName: "acceptTypes" }] : []));
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+    maxSelection = input(10, ...(ngDevMode ? [{ debugName: "maxSelection" }] : []));
+    pageSize = input(DEFAULT_PAGE_SIZE, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    // Two-way visibility binding
+    visible = model(false, ...(ngDevMode ? [{ debugName: "visible" }] : []));
+    // Outputs
+    fileSelected = output();
+    filesSelected = output();
+    closed = output();
+    onError = output();
+    // Internal state
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    files = signal([], ...(ngDevMode ? [{ debugName: "files" }] : []));
+    selectedFiles = signal([], ...(ngDevMode ? [{ debugName: "selectedFiles" }] : []));
+    total = signal(undefined, ...(ngDevMode ? [{ debugName: "total" }] : []));
+    pagination = signal({ pageSize: DEFAULT_PAGE_SIZE, currentPage: 0 }, ...(ngDevMode ? [{ debugName: "pagination" }] : []));
+    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
+    // Computed
+    acceptString = computed(() => getAcceptString(this.acceptTypes()), ...(ngDevMode ? [{ debugName: "acceptString" }] : []));
+    constructor() {
+        this.destroyRef.onDestroy(() => {
+            this.abortController?.abort();
+            if (this.searchDebounceTimer) {
+                clearTimeout(this.searchDebounceTimer);
+            }
+        });
+        // Load files when dialog becomes visible
+        effect(() => {
+            const isVisible = this.visible();
+            if (isVisible) {
+                untracked(() => {
+                    this.resetState();
+                    this.fetchFiles();
+                });
+            }
+        });
+        // Update page size from input
+        effect(() => {
+            const size = this.pageSize();
+            untracked(() => {
+                this.pagination.update((p) => ({ ...p, pageSize: size }));
+            });
+        });
+    }
+    onSearchChange(value) {
+        // Debounce search
+        if (this.searchDebounceTimer) {
+            clearTimeout(this.searchDebounceTimer);
+        }
+        this.searchDebounceTimer = setTimeout(() => {
+            this.searchTerm.set(value);
+            this.pagination.update((p) => ({ ...p, currentPage: 0 }));
+            this.files.set([]);
+            this.fetchFiles();
+        }, 500);
+    }
+    onScroll(event) {
+        const el = event.target;
+        const nearBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 50;
+        if (nearBottom && !this.isLoading()) {
+            const pag = this.pagination();
+            const nextPage = pag.currentPage + 1;
+            const hasMore = nextPage * pag.pageSize < (this.total() ?? 0);
+            if (hasMore) {
+                this.pagination.update((p) => ({ ...p, currentPage: nextPage }));
+                this.fetchFiles(true);
+            }
+        }
+    }
+    toggleSelection(file) {
+        if (!this.isFileAllowed(file))
+            return;
+        if (this.multiple()) {
+            const selected = this.selectedFiles();
+            const isSelected = selected.some((f) => f.id === file.id);
+            if (isSelected) {
+                this.selectedFiles.update((files) => files.filter((f) => f.id !== file.id));
+            }
+            else if (selected.length < this.maxSelection()) {
+                this.selectedFiles.update((files) => [...files, file]);
+            }
+        }
+        else {
+            this.selectedFiles.set([file]);
+        }
+    }
+    isSelected(file) {
+        return this.selectedFiles().some((f) => f.id === file.id);
+    }
+    isFileAllowed(file) {
+        const allowedTypes = this.acceptTypes();
+        if (!allowedTypes.length)
+            return true;
+        return allowedTypes.some((type) => {
+            if (type.endsWith('/*')) {
+                return file.contentType.startsWith(type.replace('/*', '/'));
+            }
+            return file.contentType === type;
+        });
+    }
+    isImage(file) {
+        return file.contentType.startsWith('image/') && !!file.url;
+    }
+    getFileIcon(file) {
+        return getFileIconClass(file.contentType);
+    }
+    formatSize(size) {
+        return formatFileSize(size);
+    }
+    onCancel() {
+        this.visible.set(false);
+    }
+    onConfirm() {
+        const selected = this.selectedFiles();
+        if (selected.length === 0)
+            return;
+        if (this.multiple()) {
+            this.filesSelected.emit(selected);
+        }
+        else {
+            this.fileSelected.emit(selected[0]);
+        }
+        this.visible.set(false);
+    }
+    onDialogHide() {
+        this.closed.emit();
+    }
+    resetState() {
+        this.files.set([]);
+        this.selectedFiles.set([]);
+        this.searchTerm.set('');
+        this.pagination.set({ pageSize: this.pageSize(), currentPage: 0 });
+        this.total.set(undefined);
+    }
+    async fetchFiles(append = false) {
+        if (this.isLoading())
+            return;
+        this.abortController?.abort();
+        this.abortController = new AbortController();
+        this.isLoading.set(true);
+        try {
+            const pag = this.pagination();
+            const filter = {
+                page: pag.currentPage,
+                pageSize: pag.pageSize,
+                search: this.searchTerm(),
+                contentTypes: this.acceptTypes().length ? this.acceptTypes() : undefined,
+            };
+            const response = await firstValueFrom(this.loadFiles()(filter));
+            if (response.success && response.data) {
+                if (append) {
+                    this.files.update((current) => [...current, ...response.data]);
+                }
+                else {
+                    this.files.set(response.data);
+                }
+                this.total.set(response.meta?.total);
+            }
+        }
+        catch (error) {
+            if (error.name !== 'AbortError') {
+                this.onError.emit(error);
+            }
+        }
+        finally {
+            this.isLoading.set(false);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FileSelectorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: FileSelectorDialogComponent, isStandalone: true, selector: "lib-file-selector-dialog", inputs: { loadFiles: { classPropertyName: "loadFiles", publicName: "loadFiles", isSignal: true, isRequired: true, transformFunction: null }, 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 }, 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
+      [header]="header()"
+      [(visible)]="visible"
+      [modal]="true"
+      [closable]="true"
+      [draggable]="false"
+      [resizable]="false"
+      [style]="{ width: '800px', maxHeight: '90vh' }"
+      (onHide)="onDialogHide()"
+    >
+      <!-- Search Bar -->
+      <div class="flex gap-2 mb-3">
+        <span class="p-input-icon-left flex-1">
+          <i class="pi pi-search"></i>
+          <input
+            pInputText
+            type="text"
+            [ngModel]="searchTerm()"
+            (ngModelChange)="onSearchChange($event)"
+            placeholder="Search files..."
+            class="w-full"
+          />
+        </span>
+        @if (multiple()) {
+          <span class="text-sm text-color-secondary align-self-center">
+            {{ selectedFiles().length }} selected
+          </span>
+        }
+      </div>
+
+      <!-- File Grid -->
+      <div
+        class="file-grid"
+        #scrollContainer
+        (scroll)="onScroll($event)"
+      >
+        @if (isLoading() && files().length === 0) {
+          <div class="flex justify-content-center p-4">
+            <i class="pi pi-spin pi-spinner text-4xl"></i>
+          </div>
+        } @else if (files().length === 0) {
+          <div class="text-center p-4 text-color-secondary">
+            <i class="pi pi-inbox text-4xl mb-2"></i>
+            <p>No files found</p>
+          </div>
+        } @else {
+          @for (file of files(); track file.id) {
+            <div
+              class="file-card"
+              [class.selected]="isSelected(file)"
+              [class.disabled]="!isFileAllowed(file)"
+              (click)="toggleSelection(file)"
+            >
+              <!-- File Preview -->
+              <div class="file-preview">
+                @if (isImage(file) && file.url) {
+                  <img [src]="file.url" [alt]="file.name" class="preview-image" />
+                } @else {
+                  <i [class]="getFileIcon(file)" class="preview-icon"></i>
+                }
+                @if (isSelected(file)) {
+                  <div class="selected-overlay">
+                    <i class="pi pi-check"></i>
+                  </div>
+                }
+              </div>
+
+              <!-- File Info -->
+              <div class="file-info">
+                <span class="file-name" [title]="file.name">{{ file.name }}</span>
+                <span class="file-size">{{ formatSize(file.size) }}</span>
+              </div>
+            </div>
+          }
+
+          @if (isLoading()) {
+            <div class="flex justify-content-center p-2 w-full">
+              <i class="pi pi-spin pi-spinner"></i>
+            </div>
+          }
+        }
+      </div>
+
+      <!-- Footer -->
+      <ng-template pTemplate="footer">
+        <button
+          pButton
+          label="Cancel"
+          class="p-button-text"
+          (click)="onCancel()"
+        ></button>
+        <button
+          pButton
+          [label]="multiple() ? 'Select (' + selectedFiles().length + ')' : 'Select'"
+          [disabled]="selectedFiles().length === 0"
+          (click)="onConfirm()"
+        ></button>
+      </ng-template>
+    </p-dialog>
+  `, isInline: true, styles: [".file-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem;max-height:400px;overflow-y:auto;padding:.5rem}.file-card{border:2px solid var(--surface-border);border-radius:var(--border-radius);cursor:pointer;transition:all .2s;overflow:hidden}.file-card:hover:not(.disabled){border-color:var(--primary-color)}.file-card.selected{border-color:var(--primary-color);background:var(--primary-50)}.file-card.disabled{opacity:.5;cursor:not-allowed}.file-preview{position:relative;height:100px;display:flex;align-items:center;justify-content:center;background:var(--surface-ground)}.preview-image{width:100%;height:100%;object-fit:cover}.preview-icon{font-size:3rem;color:var(--text-color-secondary)}.selected-overlay{position:absolute;inset:0;background:rgba(var(--primary-color-rgb),.3);display:flex;align-items:center;justify-content:center}.selected-overlay i{font-size:2rem;color:var(--primary-color);background:#fff;border-radius:50%;padding:.5rem}.file-info{padding:.5rem;text-align:center}.file-name{display:block;font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-size{display:block;font-size:.75rem;color:var(--text-color-secondary)}\n"], dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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: i1$3.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.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: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FileSelectorDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-file-selector-dialog', standalone: true, imports: [AngularModule, PrimeModule], template: `
+    <p-dialog
+      [header]="header()"
+      [(visible)]="visible"
+      [modal]="true"
+      [closable]="true"
+      [draggable]="false"
+      [resizable]="false"
+      [style]="{ width: '800px', maxHeight: '90vh' }"
+      (onHide)="onDialogHide()"
+    >
+      <!-- Search Bar -->
+      <div class="flex gap-2 mb-3">
+        <span class="p-input-icon-left flex-1">
+          <i class="pi pi-search"></i>
+          <input
+            pInputText
+            type="text"
+            [ngModel]="searchTerm()"
+            (ngModelChange)="onSearchChange($event)"
+            placeholder="Search files..."
+            class="w-full"
+          />
+        </span>
+        @if (multiple()) {
+          <span class="text-sm text-color-secondary align-self-center">
+            {{ selectedFiles().length }} selected
+          </span>
+        }
+      </div>
+
+      <!-- File Grid -->
+      <div
+        class="file-grid"
+        #scrollContainer
+        (scroll)="onScroll($event)"
+      >
+        @if (isLoading() && files().length === 0) {
+          <div class="flex justify-content-center p-4">
+            <i class="pi pi-spin pi-spinner text-4xl"></i>
+          </div>
+        } @else if (files().length === 0) {
+          <div class="text-center p-4 text-color-secondary">
+            <i class="pi pi-inbox text-4xl mb-2"></i>
+            <p>No files found</p>
+          </div>
+        } @else {
+          @for (file of files(); track file.id) {
+            <div
+              class="file-card"
+              [class.selected]="isSelected(file)"
+              [class.disabled]="!isFileAllowed(file)"
+              (click)="toggleSelection(file)"
+            >
+              <!-- File Preview -->
+              <div class="file-preview">
+                @if (isImage(file) && file.url) {
+                  <img [src]="file.url" [alt]="file.name" class="preview-image" />
+                } @else {
+                  <i [class]="getFileIcon(file)" class="preview-icon"></i>
+                }
+                @if (isSelected(file)) {
+                  <div class="selected-overlay">
+                    <i class="pi pi-check"></i>
+                  </div>
+                }
+              </div>
+
+              <!-- File Info -->
+              <div class="file-info">
+                <span class="file-name" [title]="file.name">{{ file.name }}</span>
+                <span class="file-size">{{ formatSize(file.size) }}</span>
+              </div>
+            </div>
+          }
+
+          @if (isLoading()) {
+            <div class="flex justify-content-center p-2 w-full">
+              <i class="pi pi-spin pi-spinner"></i>
+            </div>
+          }
+        }
+      </div>
+
+      <!-- Footer -->
+      <ng-template pTemplate="footer">
+        <button
+          pButton
+          label="Cancel"
+          class="p-button-text"
+          (click)="onCancel()"
+        ></button>
+        <button
+          pButton
+          [label]="multiple() ? 'Select (' + selectedFiles().length + ')' : 'Select'"
+          [disabled]="selectedFiles().length === 0"
+          (click)="onConfirm()"
+        ></button>
+      </ng-template>
+    </p-dialog>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".file-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem;max-height:400px;overflow-y:auto;padding:.5rem}.file-card{border:2px solid var(--surface-border);border-radius:var(--border-radius);cursor:pointer;transition:all .2s;overflow:hidden}.file-card:hover:not(.disabled){border-color:var(--primary-color)}.file-card.selected{border-color:var(--primary-color);background:var(--primary-50)}.file-card.disabled{opacity:.5;cursor:not-allowed}.file-preview{position:relative;height:100px;display:flex;align-items:center;justify-content:center;background:var(--surface-ground)}.preview-image{width:100%;height:100%;object-fit:cover}.preview-icon{font-size:3rem;color:var(--text-color-secondary)}.selected-overlay{position:absolute;inset:0;background:rgba(var(--primary-color-rgb),.3);display:flex;align-items:center;justify-content:center}.selected-overlay i{font-size:2rem;color:var(--primary-color);background:#fff;border-radius:50%;padding:.5rem}.file-info{padding:.5rem;text-align:center}.file-name{display:block;font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-size{display:block;font-size:.75rem;color:var(--text-color-secondary)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { loadFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadFiles", required: true }] }], 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 }] }], 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"] }] } });
 
+/** Log only in dev mode */
+const devLog = (message) => {
+    if (isDevMode())
+        console.log(message);
+};
 /**
  * Permission Guard
  *
@@ -1451,14 +2816,14 @@ function permissionGuard(permission, redirectTo = '/') {
         const router = inject(Router);
         // Check if permissions are loaded
         if (!permissionValidator.isPermissionsLoaded()) {
-            console.warn('[permissionGuard] Permissions not loaded, denying access to route');
+            devLog('[permissionGuard] Permissions not loaded, denying access to route');
             return router.createUrlTree([redirectTo]);
         }
         const userPermissions = permissionValidator.permissions();
         const hasPermission = evaluatePermission(permission, userPermissions);
         if (!hasPermission) {
             const permissionCode = typeof permission === 'string' ? permission : 'complex-logic';
-            console.warn(`[permissionGuard] Access denied - missing permission: ${permissionCode}`);
+            devLog(`[permissionGuard] Access denied - missing permission: ${permissionCode}`);
             return router.createUrlTree([redirectTo]);
         }
         return true;
@@ -1481,18 +2846,18 @@ function anyPermissionGuard(permissions, redirectTo = '/') {
         const router = inject(Router);
         // Validate permissions array
         if (!permissions || permissions.length === 0) {
-            console.warn('[anyPermissionGuard] Empty permissions array provided, denying access');
+            devLog('[anyPermissionGuard] Empty permissions array provided, denying access');
             return router.createUrlTree([redirectTo]);
         }
         // Check if permissions are loaded
         if (!permissionValidator.isPermissionsLoaded()) {
-            console.warn('[anyPermissionGuard] Permissions not loaded, denying access to route');
+            devLog('[anyPermissionGuard] Permissions not loaded, denying access to route');
             return router.createUrlTree([redirectTo]);
         }
         const userPermissions = permissionValidator.permissions();
         const hasPermission = hasAnyPermission(permissions, userPermissions);
         if (!hasPermission) {
-            console.warn(`[anyPermissionGuard] Access denied - missing any of: ${permissions.join(', ')}`);
+            devLog(`[anyPermissionGuard] Access denied - missing any of: ${permissions.join(', ')}`);
             return router.createUrlTree([redirectTo]);
         }
         return true;
@@ -1515,18 +2880,18 @@ function allPermissionsGuard(permissions, redirectTo = '/') {
         const router = inject(Router);
         // Validate permissions array
         if (!permissions || permissions.length === 0) {
-            console.warn('[allPermissionsGuard] Empty permissions array provided, denying access');
+            devLog('[allPermissionsGuard] Empty permissions array provided, denying access');
             return router.createUrlTree([redirectTo]);
         }
         // Check if permissions are loaded
         if (!permissionValidator.isPermissionsLoaded()) {
-            console.warn('[allPermissionsGuard] Permissions not loaded, denying access to route');
+            devLog('[allPermissionsGuard] Permissions not loaded, denying access to route');
             return router.createUrlTree([redirectTo]);
         }
         const userPermissions = permissionValidator.permissions();
         const hasPermission = hasAllPermissions(permissions, userPermissions);
         if (!hasPermission) {
-            console.warn(`[allPermissionsGuard] Access denied - missing all of: ${permissions.join(', ')}`);
+            devLog(`[allPermissionsGuard] Access denied - missing all of: ${permissions.join(', ')}`);
             return router.createUrlTree([redirectTo]);
         }
         return true;
@@ -1539,5 +2904,5 @@ function allPermissionsGuard(permissions, redirectTo = '/') {
  * Generated bundle index. Do not edit.
  */
 
-export { AngularModule, ApiResourceService, ApiResourceService as ApiService, COMPANY_API_PROVIDER, ContactTypeEnum, CookieService, EditModeElementChangerDirective, FileUrlService, HasPermissionDirective, IconComponent, IconTypeEnum, IsEmptyImageDirective, LazyMultiSelectComponent, LazySelectComponent, PermissionValidatorService, PlatformService, PreventDefaultDirective, PrimeModule, USER_PERMISSION_PROVIDER, USER_PROVIDER, allPermissionsGuard, anyPermissionGuard, evaluateLogicNode, evaluatePermission, hasAllPermissions, hasAnyPermission, permissionGuard };
+export { AUTH_STATE_PROVIDER, AngularModule, ApiResourceService, ApiResourceService as ApiService, COMPANY_API_PROVIDER, ContactTypeEnum, CookieService, EditModeElementChangerDirective, FILE_TYPE_FILTERS, FileSelectorDialogComponent, FileUploaderComponent, FileUrlService, HasPermissionDirective, IconComponent, IconTypeEnum, IsEmptyImageDirective, LazyMultiSelectComponent, LazySelectComponent, PROFILE_PERMISSION_PROVIDER, PROFILE_UPLOAD_PROVIDER, PermissionValidatorService, PlatformService, PreventDefaultDirective, PrimeModule, USER_LIST_PROVIDER, USER_PERMISSION_PROVIDER, USER_PROVIDER, UserMultiSelectComponent, UserSelectComponent, allPermissionsGuard, anyPermissionGuard, evaluateLogicNode, evaluatePermission, formatFileSize, getAcceptString, getFileIconClass, hasAllPermissions, hasAnyPermission, isFileTypeAllowed, permissionGuard };
 //# sourceMappingURL=flusys-ng-shared.mjs.map