@flusys/ng-shared 1.0.0-beta → 1.0.0

package/fesm2022/flusys-ng-shared.mjs

@@ -1,22 +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, Injector, runInInjectionContext, resource, Component, model, untracked, forwardRef, viewChild, ChangeDetectionStrategy, InjectionToken, DestroyRef, afterNextRender, isDevMode } from '@angular/core';
-import * as i1 from '@angular/common';
+import { inject, PLATFORM_ID, Injectable, DOCUMENT, REQUEST, signal, computed, ElementRef, input, effect, Directive, TemplateRef, ViewContainerRef, output, NgModule, Injector, runInInjectionContext, resource, model, untracked, forwardRef, ChangeDetectionStrategy, Component, DestroyRef, viewChild, afterNextRender, InjectionToken, isDevMode } from '@angular/core';
+import * as i3 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, map as map$1 } from 'rxjs';
-import { tap, catchError, map } from 'rxjs/operators';
-import * as i1$2 from '@angular/forms';
+import { APP_CONFIG, getServiceUrl } from '@flusys/ng-core';
+import { of, firstValueFrom, map as map$1 } from 'rxjs';
+import { map, tap, catchError } from 'rxjs/operators';
+import * as i1$1 from '@angular/forms';
 import { NgControl, FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { RouterOutlet, RouterLink, Router } from '@angular/router';
+import { RouterOutlet, RouterLink, RouterLinkActive, Router, ActivatedRoute } from '@angular/router';
 import { AutoCompleteModule } from 'primeng/autocomplete';
-import * as i1$3 from 'primeng/button';
+import { AvatarModule } from 'primeng/avatar';
+import * as i1$2 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import { CardModule } from 'primeng/card';
-import * as i2 from 'primeng/checkbox';
+import * as i1 from 'primeng/checkbox';
 import { CheckboxModule } from 'primeng/checkbox';
+import { ConfirmDialogModule } from 'primeng/confirmdialog';
 import { DatePickerModule } from 'primeng/datepicker';
-import * as i6 from 'primeng/dialog';
+import * as i4 from 'primeng/dialog';
 import { DialogModule } from 'primeng/dialog';
 import { DividerModule } from 'primeng/divider';
 import { FileUploadModule } from 'primeng/fileupload';
@@ -24,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';
@@ -36,24 +38,146 @@ 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 * as i3$1 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 i4 from 'primeng/api';
-import { MessageService } from 'primeng/api';
+import { MessageService, ConfirmationService } from 'primeng/api';
+import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
-;
-;
+/**
+ * Centralized Permission Codes
+ *
+ * Single source of truth for all permission codes used across the application.
+ * Use these constants instead of hardcoded strings to prevent typos and enable easy refactoring.
+ *
+ * Naming Convention: <entity>.<action>
+ * - entity: The resource being accessed (e.g., user, role, company)
+ * - action: The operation being performed (create, read, update, delete, assign)
+ */
+// ==================== AUTH MODULE ====================
+const USER_PERMISSIONS = {
+    CREATE: 'user.create',
+    READ: 'user.read',
+    UPDATE: 'user.update',
+    DELETE: 'user.delete',
+};
+const COMPANY_PERMISSIONS = {
+    CREATE: 'company.create',
+    READ: 'company.read',
+    UPDATE: 'company.update',
+    DELETE: 'company.delete',
+};
+const BRANCH_PERMISSIONS = {
+    CREATE: 'branch.create',
+    READ: 'branch.read',
+    UPDATE: 'branch.update',
+    DELETE: 'branch.delete',
+};
+// ==================== IAM MODULE ====================
+const ACTION_PERMISSIONS = {
+    CREATE: 'action.create',
+    READ: 'action.read',
+    UPDATE: 'action.update',
+    DELETE: 'action.delete',
+};
+const ROLE_PERMISSIONS = {
+    CREATE: 'role.create',
+    READ: 'role.read',
+    UPDATE: 'role.update',
+    DELETE: 'role.delete',
+};
+const ROLE_ACTION_PERMISSIONS = {
+    READ: 'role-action.read',
+    ASSIGN: 'role-action.assign',
+};
+const USER_ROLE_PERMISSIONS = {
+    READ: 'user-role.read',
+    ASSIGN: 'user-role.assign',
+};
+const USER_ACTION_PERMISSIONS = {
+    READ: 'user-action.read',
+    ASSIGN: 'user-action.assign',
+};
+const COMPANY_ACTION_PERMISSIONS = {
+    READ: 'company-action.read',
+    ASSIGN: 'company-action.assign',
+};
+// ==================== STORAGE MODULE ====================
+const FILE_PERMISSIONS = {
+    CREATE: 'file.create',
+    READ: 'file.read',
+    UPDATE: 'file.update',
+    DELETE: 'file.delete',
+};
+const FOLDER_PERMISSIONS = {
+    CREATE: 'folder.create',
+    READ: 'folder.read',
+    UPDATE: 'folder.update',
+    DELETE: 'folder.delete',
+};
+const STORAGE_CONFIG_PERMISSIONS = {
+    CREATE: 'storage-config.create',
+    READ: 'storage-config.read',
+    UPDATE: 'storage-config.update',
+    DELETE: 'storage-config.delete',
+};
+// ==================== EMAIL MODULE ====================
+const EMAIL_CONFIG_PERMISSIONS = {
+    CREATE: 'email-config.create',
+    READ: 'email-config.read',
+    UPDATE: 'email-config.update',
+    DELETE: 'email-config.delete',
+};
+const EMAIL_TEMPLATE_PERMISSIONS = {
+    CREATE: 'email-template.create',
+    READ: 'email-template.read',
+    UPDATE: 'email-template.update',
+    DELETE: 'email-template.delete',
+};
+// ==================== FORM BUILDER MODULE ====================
+const FORM_PERMISSIONS = {
+    CREATE: 'form.create',
+    READ: 'form.read',
+    UPDATE: 'form.update',
+    DELETE: 'form.delete',
+};
+// ==================== AGGREGATED EXPORTS ====================
+/**
+ * All permission codes grouped by module
+ */
+const PERMISSIONS = {
+    // Auth
+    USER: USER_PERMISSIONS,
+    COMPANY: COMPANY_PERMISSIONS,
+    BRANCH: BRANCH_PERMISSIONS,
+    // IAM
+    ACTION: ACTION_PERMISSIONS,
+    ROLE: ROLE_PERMISSIONS,
+    ROLE_ACTION: ROLE_ACTION_PERMISSIONS,
+    USER_ROLE: USER_ROLE_PERMISSIONS,
+    USER_ACTION: USER_ACTION_PERMISSIONS,
+    COMPANY_ACTION: COMPANY_ACTION_PERMISSIONS,
+    // Storage
+    FILE: FILE_PERMISSIONS,
+    FOLDER: FOLDER_PERMISSIONS,
+    STORAGE_CONFIG: STORAGE_CONFIG_PERMISSIONS,
+    // Email
+    EMAIL_CONFIG: EMAIL_CONFIG_PERMISSIONS,
+    EMAIL_TEMPLATE: EMAIL_TEMPLATE_PERMISSIONS,
+    // Form Builder
+    FORM: FORM_PERMISSIONS,
+};
 
 /**
  * Common file type filters
@@ -147,9 +271,7 @@ class PlatformService {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: PlatformService, decorators: [{
             type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
+            args: [{ providedIn: 'root' }]
         }] });
 
 class CookieService {
@@ -171,67 +293,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 
 /**
  * Service to fetch file URLs from the backend.
- * Uses POST /file-manager/get-files endpoint which:
- * - Handles presigned URLs for cloud storage (AWS S3, Azure)
- * - Auto-refreshes expired URLs
- * - Validates file access permissions
- * - Works with all storage providers (Local, S3, Azure, SFTP)
+ * Handles presigned URLs for cloud storage, auto-refresh, and caching.
  */
 class FileUrlService {
     http = inject(HttpClient);
     appConfig = inject(APP_CONFIG);
-    /** Cache of file URLs by file ID */
-    urlCache = signal(new Map(), ...(ngDevMode ? [{ debugName: "urlCache" }] : []));
-    /**
-     * Get file URL by ID from cache (reactive signal)
-     */
+    _cache = signal(new Map(), ...(ngDevMode ? [{ debugName: "_cache" }] : []));
+    cache = this._cache.asReadonly();
+    /** Get file URL by ID from cache (synchronous) */
     getFileUrl(fileId) {
         if (!fileId)
             return null;
-        return this.urlCache().get(fileId)?.url ?? null;
+        return this._cache().get(fileId)?.url ?? null;
     }
-    /**
-     * Get file URL signal (computed from cache)
-     */
+    /** Get file URL as computed signal */
     fileUrlSignal(fileId) {
         return computed(() => this.getFileUrl(fileId));
     }
-    /**
-     * Fetch file URLs from backend and update cache.
-     * Returns Observable of fetched files.
-     */
-    fetchFileUrls(fileIds) {
+    /** Fetch file URLs from backend and update cache */
+    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(() => of([])));
-    }
-    /**
-     * Fetch a single file URL.
-     * Returns Observable of file info or null if not found.
-     */
-    fetchSingleFileUrl(fileId) {
-        return this.fetchFileUrls([fileId]).pipe(map((files) => files[0] ?? null));
-    }
-    /**
-     * Clear the URL cache.
-     * Useful on logout or when switching contexts.
-     */
+        const cache = this._cache();
+        const missingIds = forceRefresh
+            ? fileIds
+            : fileIds.filter((id) => !cache.has(id));
+        if (!missingIds.length) {
+            return of(this.getFromCache(fileIds));
+        }
+        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) => this.addToCache(files)), map(() => this.getFromCache(fileIds)), catchError(() => of([])));
+    }
+    /** Fetch single file URL (delegates to fetchFileUrls) */
+    fetchSingleFileUrl(fileId, forceRefresh = false) {
+        return this.fetchFileUrls([fileId], forceRefresh).pipe(map((files) => files[0] ?? null));
+    }
+    /** Clear entire cache */
     clearCache() {
-        this.urlCache.set(new Map());
+        this._cache.set(new Map());
     }
-    /**
-     * Remove specific file from cache.
-     */
+    /** Remove specific file from cache */
     removeFromCache(fileId) {
-        const cache = new Map(this.urlCache());
-        cache.delete(fileId);
-        this.urlCache.set(cache);
+        this._cache.update((cache) => {
+            const next = new Map(cache);
+            next.delete(fileId);
+            return next;
+        });
+    }
+    addToCache(files) {
+        this._cache.update((cache) => {
+            const next = new Map(cache);
+            for (const file of files) {
+                next.set(file.id, file);
+            }
+            return next;
+        });
+    }
+    getFromCache(fileIds) {
+        const cache = this._cache();
+        return fileIds
+            .map((id) => cache.get(id))
+            .filter((f) => f !== undefined);
     }
     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' });
@@ -242,79 +366,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
         }] });
 
 /**
- * Permission Validator Service
- *
- * Centralized service for permission validation across all packages.
- * Provides signal-based state management and reactive permission checking.
- *
- * Features:
- * - Signal-based permission storage
- * - Individual permission checks
- * - Permission change detection
- * - Reactive permission state updates
- *
- * Usage:
- * ```typescript
- * // In component
- * readonly permissionValidator = inject(PermissionValidatorService);
- *
- * // Set permissions (typically from auth/IAM)
- * this.permissionValidator.setPermissions(['user.view', 'user.create']);
- *
- * // Check individual permission
- * if (this.permissionValidator.hasPermission('user.view')) {
- *   // Show UI element
- * }
- *
- * // Access current permissions reactively
- * const permissions = this.permissionValidator.permissions();
- * ```
- *
- * @packageDocumentation
+ * Check if user has a specific permission using wildcard matching.
+ * Supports:
+ * - Exact match: 'user.create' matches 'user.create'
+ * - Full wildcard: '*' matches everything
+ * - Module wildcard: 'user.*' matches 'user.create', 'user.read', etc.
+ */
+function hasPermission(requiredPermission, userPermissions) {
+    // Exact match
+    if (userPermissions.includes(requiredPermission))
+        return true;
+    // Wildcard matching
+    for (const permission of userPermissions) {
+        // Full wildcard - grants all permissions
+        if (permission === '*')
+            return true;
+        // Module wildcard (e.g., 'user.*' matches 'user.create')
+        if (permission.endsWith('.*') &&
+            requiredPermission.startsWith(permission.slice(0, -1))) {
+            return true;
+        }
+    }
+    return false;
+}
+/** Evaluate permission logic (string or ILogicNode) against user permissions */
+function evaluatePermission(logic, permissions) {
+    if (!logic)
+        return false;
+    if (typeof logic === 'string')
+        return hasPermission(logic, permissions);
+    return evaluateLogicNode(logic, permissions);
+}
+/** Recursively evaluate an ILogicNode tree */
+function evaluateLogicNode(node, permissions) {
+    switch (node.type) {
+        case 'action':
+            return node.actionId ? hasPermission(node.actionId, permissions) : false;
+        case 'group':
+            if (!node.children || node.children.length === 0)
+                return false;
+            return node.operator === 'AND'
+                ? node.children.every((child) => evaluateLogicNode(child, permissions))
+                : node.children.some((child) => evaluateLogicNode(child, permissions));
+        default:
+            return false;
+    }
+}
+/** Check if user has ANY of the specified permissions (OR logic) */
+function hasAnyPermission(permissionCodes, permissions) {
+    if (!permissionCodes?.length)
+        return false;
+    return permissionCodes.some((code) => hasPermission(code, permissions));
+}
+/** Check if user has ALL of the specified permissions (AND logic) */
+function hasAllPermissions(permissionCodes, permissions) {
+    if (!permissionCodes?.length)
+        return false;
+    return permissionCodes.every((code) => hasPermission(code, permissions));
+}
+
+/**
+ * Permission state management service.
+ * Provides signal-based storage and permission checking with wildcard support.
  */
 class PermissionValidatorService {
-    // ==================== SIGNALS ====================
-    /**
-     * Private writable signal for permissions
-     */
     _permissions = signal([], ...(ngDevMode ? [{ debugName: "_permissions" }] : []));
-    /**
-     * Readonly permission signal for external consumers
-     */
     permissions = this._permissions.asReadonly();
-    /**
-     * Private writable signal for loaded state
-     */
     _isLoaded = signal(false, ...(ngDevMode ? [{ debugName: "_isLoaded" }] : []));
-    /**
-     * Set permissions (replaces existing permissions)
-     * @param permissions - Array of permission codes
-     */
+    isLoaded = this._isLoaded.asReadonly();
+    /** Set permissions (replaces existing) */
     setPermissions(permissions) {
         this._permissions.set(permissions);
         this._isLoaded.set(true);
     }
-    /**
-     * Clear all permissions
-     */
+    /** Clear all permissions */
     clearPermissions() {
         this._permissions.set([]);
         this._isLoaded.set(false);
     }
-    // ==================== PERMISSION CHECKING ====================
-    /**
-     * Check if user has a specific permission
-     * @param permissionCode - Required permission code
-     * @returns True if user has permission
-     */
-    hasPermission(permissionCode) {
-        return this.permissions().includes(permissionCode);
+    /** Check if user has permission (supports wildcards: '*', 'module.*') */
+    hasPermission(code) {
+        return hasPermission(code, this._permissions());
     }
-    // ==================== UTILITY METHODS ====================
-    /**
-     * Check if permissions are loaded
-     * @returns True if permissions have been loaded
-     */
+    /** @deprecated Use `isLoaded()` signal instead */
     isPermissionsLoaded() {
         return this._isLoaded();
     }
@@ -323,9 +457,7 @@ class PermissionValidatorService {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: PermissionValidatorService, decorators: [{
             type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
+            args: [{ providedIn: 'root' }]
         }] });
 
 class EditModeElementChangerDirective {
@@ -388,46 +520,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             type: Directive,
             args: [{
                     selector: '[appEditModeElementChanger]',
-                    standalone: true,
                 }]
         }], ctorParameters: () => [], propDecorators: { isEditMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEditMode", required: true }] }] } });
 
-/** Evaluate permission logic (string or ILogicNode) against user permissions */
-function evaluatePermission(logic, permissions) {
-    if (!logic)
-        return false;
-    if (typeof logic === 'string')
-        return permissions.includes(logic);
-    return evaluateLogicNode(logic, permissions);
-}
-/** Recursively evaluate an ILogicNode tree */
-function evaluateLogicNode(node, permissions) {
-    switch (node.type) {
-        case 'action':
-            return node.actionId ? permissions.includes(node.actionId) : false;
-        case 'group':
-            if (!node.children || node.children.length === 0)
-                return false;
-            return node.operator === 'AND'
-                ? node.children.every((child) => evaluateLogicNode(child, permissions))
-                : node.children.some((child) => evaluateLogicNode(child, permissions));
-        default:
-            return false;
-    }
-}
-/** Check if user has ANY of the specified permissions (OR logic) */
-function hasAnyPermission(permissionCodes, permissions) {
-    if (!permissionCodes?.length)
-        return false;
-    return permissionCodes.some((code) => permissions.includes(code));
-}
-/** Check if user has ALL of the specified permissions (AND logic) */
-function hasAllPermissions(permissionCodes, permissions) {
-    if (!permissionCodes?.length)
-        return false;
-    return permissionCodes.every((code) => permissions.includes(code));
-}
-
 /**
  * HasPermission Directive
  *
@@ -548,7 +643,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             type: Directive,
             args: [{
                     selector: '[hasPermission]',
-                    standalone: true,
                 }]
         }], ctorParameters: () => [], propDecorators: { hasPermission: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasPermission", required: false }] }] } });
 
@@ -577,7 +671,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         '[src]': 'imageSrc()',
                         '(error)': 'onError()',
                     },
-                    standalone: true,
                 }]
         }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }] } });
 
@@ -615,18 +708,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             type: Directive,
             args: [{
                     selector: '[appPreventDefault]',
-                    standalone: true,
+                    host: {
+                        '(click)': 'onClick($event)',
+                        '(keydown)': 'onKeydown($event)',
+                        '(keyup)': 'onKeyup($event)',
+                    },
                 }]
-        }], propDecorators: { eventType: [{ type: i0.Input, args: [{ isSignal: true, alias: "eventType", required: false }] }], preventKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventKey", required: false }] }], action: [{ type: i0.Output, args: ["action"] }], onClick: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }], onKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }], onKeyup: [{
-                type: HostListener,
-                args: ['keyup', ['$event']]
-            }] } });
+        }], propDecorators: { eventType: [{ type: i0.Input, args: [{ isSignal: true, alias: "eventType", required: false }] }], preventKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventKey", required: false }] }], action: [{ type: i0.Output, args: ["action"] }] } });
 
 class AngularModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AngularModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -635,6 +723,7 @@ class AngularModule {
             ReactiveFormsModule,
             RouterOutlet,
             RouterLink,
+            RouterLinkActive,
             IsEmptyImageDirective,
             NgOptimizedImage,
             NgComponentOutlet,
@@ -643,6 +732,7 @@ class AngularModule {
             ReactiveFormsModule,
             RouterOutlet,
             RouterLink,
+            RouterLinkActive,
             IsEmptyImageDirective,
             NgOptimizedImage,
             NgComponentOutlet,
@@ -662,6 +752,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         ReactiveFormsModule,
                         RouterOutlet,
                         RouterLink,
+                        RouterLinkActive,
                         IsEmptyImageDirective,
                         NgOptimizedImage,
                         NgComponentOutlet,
@@ -674,6 +765,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         ReactiveFormsModule,
                         RouterOutlet,
                         RouterLink,
+                        RouterLinkActive,
                         IsEmptyImageDirective,
                         NgOptimizedImage,
                         NgComponentOutlet,
@@ -684,109 +776,121 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 
 class PrimeModule {
     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: [InputTextModule,
-            TagModule,
-            SelectButtonModule,
-            PasswordModule,
+    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.3", 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.3", ngImport: i0, type: PrimeModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [
-                        InputTextModule,
-                        TagModule,
-                        SelectButtonModule,
-                        PasswordModule,
+                        AutoCompleteModule,
+                        AvatarModule,
                         ButtonModule,
-                        TooltipModule,
-                        CheckboxModule,
-                        StepsModule,
-                        RippleModule,
-                        PanelModule,
-                        PaginatorModule,
-                        TableModule,
-                        InputNumberModule,
-                        TextareaModule,
-                        ProgressBarModule,
-                        FileUploadModule,
                         CardModule,
-                        SelectModule,
-                        InputIconModule,
+                        CheckboxModule,
+                        ConfirmDialogModule,
+                        DatePickerModule,
+                        DialogModule,
+                        DividerModule,
+                        FileUploadModule,
                         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,
                     ],
                 }]
@@ -838,7 +942,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  */
 class ApiResourceService {
     baseUrl;
-    loaderService = inject(ApiLoaderService);
     injector = inject(Injector);
     http;
     moduleApiName;
@@ -861,6 +964,12 @@ class ApiResourceService {
     _listResource = null;
     /** Whether the list resource has been initialized */
     _resourceInitialized = false;
+    /**
+     * Signal to track resource initialization for computed signals.
+     * This allows computed signals to re-evaluate when the resource is created.
+     * Without this, computed signals would not detect when _listResource changes from null.
+     */
+    _resourceInitSignal = signal(false, ...(ngDevMode ? [{ debugName: "_resourceInitSignal" }] : []));
     /** Get or create the list resource (lazy initialization) */
     get listResource() {
         if (!this._listResource) {
@@ -887,20 +996,50 @@ class ApiResourceService {
                     return this.fetchAllAsync(search, filter);
                 } });
         });
+        // Signal that resource is now initialized - triggers computed re-evaluation
+        this._resourceInitSignal.set(true);
     }
     // ==========================================================================
     // Computed State Accessors
     // ==========================================================================
-    /** Whether data is currently loading */
-    isLoading = computed(() => this._listResource?.isLoading() ?? false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
-    /** List data array */
-    data = computed(() => this._listResource?.value()?.data ?? [], ...(ngDevMode ? [{ debugName: "data" }] : []));
-    /** Total count of items */
-    total = computed(() => this._listResource?.value()?.meta?.total ?? 0, ...(ngDevMode ? [{ debugName: "total" }] : []));
-    /** Pagination metadata */
-    pageInfo = computed(() => this._listResource?.value()?.meta, ...(ngDevMode ? [{ debugName: "pageInfo" }] : []));
-    /** Whether there are more pages */
+    /**
+     * Whether data is currently loading.
+     * Tracks _resourceInitSignal to re-evaluate when resource is created.
+     */
+    isLoading = computed(() => {
+        this._resourceInitSignal(); // Track initialization
+        return this._listResource?.isLoading() ?? false;
+    }, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    /**
+     * List data array.
+     * Tracks _resourceInitSignal to re-evaluate when resource is created.
+     */
+    data = computed(() => {
+        this._resourceInitSignal(); // Track initialization
+        return this._listResource?.value()?.data ?? [];
+    }, ...(ngDevMode ? [{ debugName: "data" }] : []));
+    /**
+     * Total count of items.
+     * Tracks _resourceInitSignal to re-evaluate when resource is created.
+     */
+    total = computed(() => {
+        this._resourceInitSignal(); // Track initialization
+        return this._listResource?.value()?.meta?.total ?? 0;
+    }, ...(ngDevMode ? [{ debugName: "total" }] : []));
+    /**
+     * Pagination metadata.
+     * Tracks _resourceInitSignal to re-evaluate when resource is created.
+     */
+    pageInfo = computed(() => {
+        this._resourceInitSignal(); // Track initialization
+        return this._listResource?.value()?.meta;
+    }, ...(ngDevMode ? [{ debugName: "pageInfo" }] : []));
+    /**
+     * Whether there are more pages.
+     * Tracks _resourceInitSignal to re-evaluate when resource is created.
+     */
     hasMore = computed(() => {
+        this._resourceInitSignal(); // Track initialization
         const meta = this._listResource?.value()?.meta;
         if (!meta)
             return false;
@@ -1075,38 +1214,6 @@ class ApiResourceService {
     }
 }
 
-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.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){
-    <img [alt]="icon()" [src]="icon()" />
-    }@else if(iconType()==IconTypeEnum.DIRECT_TAG_SVG){
-    {{ icon() }}
-    }@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.3", ngImport: i0, type: IconComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'lib-icon',
-                    imports: [AngularModule],
-                    template: `
-    @if(icon()){ @if(iconType()==IconTypeEnum.PRIMENG_ICON){
-    <i [ngClass]="icon()"></i>
-    }@else if(iconType()==IconTypeEnum.IMAGE_FILE_LINK){
-    <img [alt]="icon()" [src]="icon()" />
-    }@else if(iconType()==IconTypeEnum.DIRECT_TAG_SVG){
-    {{ icon() }}
-    }@else{ I } }
-  `,
-                }]
-        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], iconType: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconType", required: false }] }] } });
-
 /**
  * Base class for form controls that support ALL Angular form patterns:
  *
@@ -1230,6 +1337,77 @@ function provideValueAccessor(component) {
     };
 }
 
+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.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 [class]="icon()"></i>
+      } @else if (iconType() === IconTypeEnum.IMAGE_FILE_LINK) {
+        <img [alt]="icon()" [src]="icon()" />
+      } @else {
+        <i class="pi pi-question"></i>
+      }
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: IsEmptyImageDirective, selector: "img", inputs: ["src"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: IconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-icon',
+                    imports: [AngularModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    @if (icon()) {
+      @if (iconType() === IconTypeEnum.PRIMENG_ICON) {
+        <i [class]="icon()"></i>
+      } @else if (iconType() === IconTypeEnum.IMAGE_FILE_LINK) {
+        <img [alt]="icon()" [src]="icon()" />
+      } @else {
+        <i class="pi pi-question"></i>
+      }
+    }
+  `,
+                }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], iconType: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconType", required: false }] }] } });
+
+/**
+ * Check if scroll has reached near bottom and calculate next page if available.
+ * Returns next pagination if should load more, null otherwise.
+ *
+ * @example
+ * ```typescript
+ * onScroll(event: Event): void {
+ *   const nextPagination = checkScrollPagination(event, {
+ *     pagination: this.pagination(),
+ *     total: this.total(),
+ *     isLoading: this.isLoading(),
+ *   });
+ *   if (nextPagination) {
+ *     this.onPagination.emit(nextPagination);
+ *   }
+ * }
+ * ```
+ */
+function checkScrollPagination(event, config) {
+    const el = event.target;
+    if (!(el instanceof HTMLElement))
+        return null;
+    const threshold = config.threshold ?? 50;
+    const nearBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - threshold;
+    if (!nearBottom || config.isLoading)
+        return null;
+    const { pagination, total } = config;
+    const nextPage = pagination.currentPage + 1;
+    const hasMore = nextPage * pagination.pageSize < (total ?? 0);
+    if (!hasMore)
+        return null;
+    return { ...pagination, currentPage: nextPage };
+}
+
 /**
  * Lazy-loading multi-select component with search, pagination, and select-all.
  *
@@ -1239,6 +1417,10 @@ function provideValueAccessor(component) {
  * - Signal forms: `[formField]="formTree.field"`
  */
 class LazyMultiSelectComponent extends BaseFormControl {
+    destroyRef = inject(DestroyRef);
+    onDocumentClickBound = this.handleDocumentClick.bind(this);
+    // View references
+    pSelectRef = viewChild.required('pSelect');
     // Inputs
     placeHolder = input('Select Options', ...(ngDevMode ? [{ debugName: "placeHolder" }] : []));
     isEditMode = input.required(...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
@@ -1246,14 +1428,15 @@ class LazyMultiSelectComponent extends BaseFormControl {
     total = input.required(...(ngDevMode ? [{ debugName: "total" }] : []));
     pagination = input.required(...(ngDevMode ? [{ debugName: "pagination" }] : []));
     selectDataList = input.required(...(ngDevMode ? [{ debugName: "selectDataList" }] : []));
-    /** Two-way bound value using model() for signal forms compatibility */
+    // Two-way bound value
     value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
     // Outputs
     onSearch = output();
     onPagination = output();
-    // UI signals
+    // UI state
     searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
-    /** Computed: Display text for selected values (replaces getSelectedValue method) */
+    openOptions = signal(false, ...(ngDevMode ? [{ debugName: "openOptions" }] : []));
+    // Computed values
     selectedValueDisplay = computed(() => {
         const selectedValues = this.value() ?? [];
         if (selectedValues.length === 0)
@@ -1262,44 +1445,59 @@ class LazyMultiSelectComponent extends BaseFormControl {
             return `${selectedValues.length} Items Selected`;
         }
         return this.selectDataList()
-            .filter(item => selectedValues.includes(item.value))
-            .map(item => item.label)
+            .filter((item) => selectedValues.includes(item.value))
+            .map((item) => item.label)
             .join(', ');
     }, ...(ngDevMode ? [{ debugName: "selectedValueDisplay" }] : []));
-    /** Computed: Whether all items are selected (replaces isSelectAll signal) */
     isSelectAll = computed(() => {
         const selectedValues = this.value() ?? [];
-        const allValues = this.selectDataList().map(item => item.value);
+        const allValues = this.selectDataList().map((item) => item.value);
         if (selectedValues.length === 0 || allValues.length === 0)
             return false;
-        return allValues.every(val => selectedValues.includes(val));
+        return allValues.every((val) => selectedValues.includes(val));
     }, ...(ngDevMode ? [{ debugName: "isSelectAll" }] : []));
     constructor() {
         super();
         this.initializeFormControl();
-        // Search debounce effect
-        runInInjectionContext(this.injector, () => {
-            toSignal(toObservable(this.searchTerm).pipe(skip(1), debounceTime(500), distinctUntilChanged(), tap$1((value) => {
-                this.onSearch.emit(value);
-            })), { initialValue: this.searchTerm() });
+        // Search debounce using effect
+        let debounceTimeout = null;
+        let previousValue = this.searchTerm();
+        effect((onCleanup) => {
+            const currentValue = this.searchTerm();
+            // Skip unchanged values
+            if (currentValue === previousValue)
+                return;
+            previousValue = currentValue;
+            // Clear existing timeout
+            if (debounceTimeout)
+                clearTimeout(debounceTimeout);
+            // Debounced emit
+            debounceTimeout = setTimeout(() => {
+                this.onSearch.emit(currentValue);
+            }, 500);
+            onCleanup(() => {
+                if (debounceTimeout)
+                    clearTimeout(debounceTimeout);
+            });
+        });
+        // Document click listener for closing dropdown
+        afterNextRender(() => {
+            document.addEventListener('click', this.onDocumentClickBound);
+        });
+        this.destroyRef.onDestroy(() => {
+            document.removeEventListener('click', this.onDocumentClickBound);
         });
     }
-    onScrollBound = this.onScroll.bind(this);
-    multiScrollContainer = viewChild.required('multiScrollContainer');
     onScroll(event) {
-        const el = event.target;
-        const nearBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 50;
-        if (nearBottom && !this.isLoading()) {
-            const pagination = this.pagination();
-            const nextPage = pagination.currentPage + 1;
-            const hasMore = nextPage * pagination.pageSize < (this.total() ?? 0);
-            if (hasMore) {
-                this.onPagination.emit({ ...pagination, currentPage: nextPage });
-            }
+        const nextPagination = checkScrollPagination(event, {
+            pagination: this.pagination(),
+            total: this.total(),
+            isLoading: this.isLoading(),
+        });
+        if (nextPagination) {
+            this.onPagination.emit(nextPagination);
         }
     }
-    pSelectRef = viewChild.required('pSelect');
-    openOptions = signal(false, ...(ngDevMode ? [{ debugName: "openOptions" }] : []));
     onSelectClick(event) {
         if (this.disabled())
             return;
@@ -1318,7 +1516,7 @@ class LazyMultiSelectComponent extends BaseFormControl {
         }
     }
     isSelected(data) {
-        return this.value()?.includes(data.value);
+        return this.value()?.includes(data.value) ?? false;
     }
     key(option) {
         return option.value;
@@ -1331,8 +1529,7 @@ class LazyMultiSelectComponent extends BaseFormControl {
             }
         }
         else {
-            const updated = previousValue.filter((v) => v !== option.value);
-            this.value.set(updated);
+            this.value.set(previousValue.filter((v) => v !== option.value));
         }
     }
     changeSelectAll(event) {
@@ -1348,15 +1545,12 @@ class LazyMultiSelectComponent extends BaseFormControl {
         this.value.set([]);
     }
     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: "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: 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 });
+    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" }, providers: [provideValueAccessor(LazyMultiSelectComponent)], viewQueries: [{ 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)\" [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\n  <span class=\"p-select-clear-icon\" (click)=\"clear($event)\">\n    <i class=\"pi pi-times\"></i>\n  </span>\n\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           class=\"p-multiselect-dropdown-icon p-icon\" aria-hidden=\"true\">\n        <path 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\" fill=\"currentColor\" />\n      </svg>\n    </span>\n  </div>\n\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\n          binary=\"true\"\n          [ngModel]=\"isSelectAll()\"\n          [disabled]=\"disabled()\"\n          (onChange)=\"changeSelectAll($event)\"\n        />\n        <input\n          type=\"text\"\n          pInputText\n          class=\"w-full\"\n          placeholder=\"Search...\"\n          [ngModel]=\"searchTerm()\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          (ngModelChange)=\"searchTerm.set($event)\"\n        />\n      </div>\n      <div class=\"p-select-list-container\" (scroll)=\"onScroll($event)\">\n        <ul class=\"p-select-list\">\n          @for (data of selectDataList(); track key(data)) {\n            <li class=\"p-select-option flex flex-row gap-2 items-center\"\n                [ngClass]=\"{ 'p-select-option-selected': isSelected(data) }\">\n              <p-checkbox\n                binary=\"true\"\n                [ngModel]=\"isSelected(data)\"\n                [disabled]=\"disabled()\"\n                (onChange)=\"selectValue($event, data)\"\n              />\n              <span>{{ data.label }}</span>\n            </li>\n          }\n        </ul>\n      </div>\n    </div>\n  }\n</div>", styles: [".p-select-overlay{position:absolute;top:100%;left:0;right:0;z-index:var(--p-overlay-select-zindex, 1004);margin-top:var(--p-select-overlay-offset, 2px);background:var(--p-select-overlay-background, var(--p-surface-0));border:1px solid var(--p-select-overlay-border-color, var(--p-surface-200));border-radius:var(--p-select-overlay-border-radius, var(--p-border-radius));box-shadow:var(--p-select-overlay-shadow, var(--p-overlay-shadow))}.p-select-header{padding:.75rem;border-bottom:1px solid var(--p-surface-200);background:var(--p-surface-50)}:host-context(.p-dark) .p-select-header,.dark .p-select-header{border-color:var(--p-surface-700);background:var(--p-surface-800)}.p-select-list-container{max-height:10rem;overflow-y:auto}@media(min-width:640px){.p-select-list-container{max-height:12.5rem}}.p-select-list{margin:0;padding:.25rem 0;list-style:none}.p-select-option{padding:.5rem .75rem;cursor:pointer;transition:background-color .2s ease}.p-select-option:hover{background:var(--p-select-option-focus-background, var(--p-surface-100));color:var(--p-select-option-focus-color, var(--p-text-color))}:host-context(.p-dark) .p-select-option:hover,.dark .p-select-option:hover{background:var(--p-surface-700)}.p-select-option.p-select-option-selected{background:var(--p-select-option-selected-background, var(--p-primary-50));color:var(--p-select-option-selected-color, var(--p-primary-color))}:host-context(.p-dark) .p-select-option.p-select-option-selected,.dark .p-select-option.p-select-option-selected{background:var(--p-primary-900)}.p-select-option.p-select-option-selected:hover{background:var(--p-select-option-selected-focus-background, var(--p-primary-100));color:var(--p-select-option-selected-focus-color, var(--p-primary-color))}:host-context(.p-dark) .p-select-option.p-select-option-selected:hover,.dark .p-select-option.p-select-option-selected:hover{background:var(--p-primary-800)}.p-select-clear-icon{display:flex;align-items:center;padding:0 .5rem;color:var(--p-text-color-secondary);cursor:pointer;transition:color .2s ease}.p-select-clear-icon:hover{color:var(--p-text-color)}\n"], dependencies: [{ kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i1.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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.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: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
-            }] } });
+            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)\" [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\n  <span class=\"p-select-clear-icon\" (click)=\"clear($event)\">\n    <i class=\"pi pi-times\"></i>\n  </span>\n\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           class=\"p-multiselect-dropdown-icon p-icon\" aria-hidden=\"true\">\n        <path 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\" fill=\"currentColor\" />\n      </svg>\n    </span>\n  </div>\n\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\n          binary=\"true\"\n          [ngModel]=\"isSelectAll()\"\n          [disabled]=\"disabled()\"\n          (onChange)=\"changeSelectAll($event)\"\n        />\n        <input\n          type=\"text\"\n          pInputText\n          class=\"w-full\"\n          placeholder=\"Search...\"\n          [ngModel]=\"searchTerm()\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          (ngModelChange)=\"searchTerm.set($event)\"\n        />\n      </div>\n      <div class=\"p-select-list-container\" (scroll)=\"onScroll($event)\">\n        <ul class=\"p-select-list\">\n          @for (data of selectDataList(); track key(data)) {\n            <li class=\"p-select-option flex flex-row gap-2 items-center\"\n                [ngClass]=\"{ 'p-select-option-selected': isSelected(data) }\">\n              <p-checkbox\n                binary=\"true\"\n                [ngModel]=\"isSelected(data)\"\n                [disabled]=\"disabled()\"\n                (onChange)=\"selectValue($event, data)\"\n              />\n              <span>{{ data.label }}</span>\n            </li>\n          }\n        </ul>\n      </div>\n    </div>\n  }\n</div>", styles: [".p-select-overlay{position:absolute;top:100%;left:0;right:0;z-index:var(--p-overlay-select-zindex, 1004);margin-top:var(--p-select-overlay-offset, 2px);background:var(--p-select-overlay-background, var(--p-surface-0));border:1px solid var(--p-select-overlay-border-color, var(--p-surface-200));border-radius:var(--p-select-overlay-border-radius, var(--p-border-radius));box-shadow:var(--p-select-overlay-shadow, var(--p-overlay-shadow))}.p-select-header{padding:.75rem;border-bottom:1px solid var(--p-surface-200);background:var(--p-surface-50)}:host-context(.p-dark) .p-select-header,.dark .p-select-header{border-color:var(--p-surface-700);background:var(--p-surface-800)}.p-select-list-container{max-height:10rem;overflow-y:auto}@media(min-width:640px){.p-select-list-container{max-height:12.5rem}}.p-select-list{margin:0;padding:.25rem 0;list-style:none}.p-select-option{padding:.5rem .75rem;cursor:pointer;transition:background-color .2s ease}.p-select-option:hover{background:var(--p-select-option-focus-background, var(--p-surface-100));color:var(--p-select-option-focus-color, var(--p-text-color))}:host-context(.p-dark) .p-select-option:hover,.dark .p-select-option:hover{background:var(--p-surface-700)}.p-select-option.p-select-option-selected{background:var(--p-select-option-selected-background, var(--p-primary-50));color:var(--p-select-option-selected-color, var(--p-primary-color))}:host-context(.p-dark) .p-select-option.p-select-option-selected,.dark .p-select-option.p-select-option-selected{background:var(--p-primary-900)}.p-select-option.p-select-option-selected:hover{background:var(--p-select-option-selected-focus-background, var(--p-primary-100));color:var(--p-select-option-selected-focus-color, var(--p-primary-color))}:host-context(.p-dark) .p-select-option.p-select-option-selected:hover,.dark .p-select-option.p-select-option-selected:hover{background:var(--p-primary-800)}.p-select-clear-icon{display:flex;align-items:center;padding:0 .5rem;color:var(--p-text-color-secondary);cursor:pointer;transition:color .2s ease}.p-select-clear-icon:hover{color:var(--p-text-color)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { pSelectRef: [{ type: i0.ViewChild, args: ['pSelect', { isSignal: true }] }], 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"] }] } });
 
 /**
  * Lazy-loading single select component with search and pagination.
@@ -1367,6 +1561,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * - Signal forms: `[formField]="formTree.field"`
  */
 class LazySelectComponent extends BaseFormControl {
+    destroyRef = inject(DestroyRef);
+    onScrollBound = this.onScroll.bind(this);
+    scrollTargetEl = null;
+    // View references
+    scrollContainer = viewChild.required('scrollContainer');
     // Inputs
     placeHolder = input('Select Option', ...(ngDevMode ? [{ debugName: "placeHolder" }] : []));
     optionLabel = input.required(...(ngDevMode ? [{ debugName: "optionLabel" }] : []));
@@ -1376,77 +1575,85 @@ class LazySelectComponent extends BaseFormControl {
     total = input.required(...(ngDevMode ? [{ debugName: "total" }] : []));
     pagination = input.required(...(ngDevMode ? [{ debugName: "pagination" }] : []));
     selectDataList = input.required(...(ngDevMode ? [{ debugName: "selectDataList" }] : []));
-    /** Two-way bound value using model() for signal forms compatibility */
+    // Two-way bound value
     value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
     // Outputs
     onSearch = output();
     onPagination = output();
-    // UI signals
+    // UI state
     searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
-    // Effect hooks
+    isPanelShow = signal(false, ...(ngDevMode ? [{ debugName: "isPanelShow" }] : []));
     constructor() {
         super();
         this.initializeFormControl();
-        runInInjectionContext(this.injector, () => {
-            toSignal(toObservable(this.searchTerm).pipe(skip(1), debounceTime(500), distinctUntilChanged(), tap$1(value => {
-                this.onSearch.emit(value);
-            })), { initialValue: this.searchTerm() });
+        // Search debounce using effect
+        let debounceTimeout = null;
+        let previousValue = this.searchTerm();
+        effect((onCleanup) => {
+            const currentValue = this.searchTerm();
+            // Skip unchanged values
+            if (currentValue === previousValue)
+                return;
+            previousValue = currentValue;
+            // Clear existing timeout
+            if (debounceTimeout)
+                clearTimeout(debounceTimeout);
+            // Debounced emit
+            debounceTimeout = setTimeout(() => {
+                this.onSearch.emit(currentValue);
+            }, 500);
+            onCleanup(() => {
+                if (debounceTimeout)
+                    clearTimeout(debounceTimeout);
+            });
+        });
+        // Cleanup scroll listener on destroy
+        this.destroyRef.onDestroy(() => {
+            if (this.scrollTargetEl) {
+                this.scrollTargetEl.removeEventListener('scroll', this.onScrollBound);
+            }
         });
     }
-    // Signal to toggle panel
-    isPanelShow = signal(false, ...(ngDevMode ? [{ debugName: "isPanelShow" }] : []));
-    scrollTargetEl = null;
-    onScrollBound = this.onScroll.bind(this);
-    scrollContainer = viewChild.required('scrollContainer');
     onScroll(event) {
-        const el = event.target;
-        const nearBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 50;
-        if (nearBottom && !this.isLoading()) {
-            const pagination = this.pagination();
-            const nextPage = pagination.currentPage + 1;
-            const hasMore = nextPage * pagination.pageSize < (this.total() ?? 0);
-            if (hasMore) {
-                this.onPagination.emit({ ...pagination, currentPage: nextPage });
-            }
+        const nextPagination = checkScrollPagination(event, {
+            pagination: this.pagination(),
+            total: this.total(),
+            isLoading: this.isLoading(),
+        });
+        if (nextPagination) {
+            this.onPagination.emit(nextPagination);
         }
     }
-    // Toggle panel and manage scroll event
     showPanel() {
         if (this.disabled())
             return;
-        this.isPanelShow.update(prev => !prev);
+        this.isPanelShow.update((prev) => !prev);
         const isNowVisible = this.isPanelShow();
         if (isNowVisible) {
-            setTimeout(() => {
+            afterNextRender(() => {
                 const containerEl = this.scrollContainer().nativeElement;
                 const target = containerEl.querySelector('.p-select-list-container');
                 if (target) {
                     target.addEventListener('scroll', this.onScrollBound);
                     this.scrollTargetEl = target;
                 }
-            }, 0);
+            }, { injector: this.injector });
         }
-        else {
-            if (this.scrollTargetEl) {
-                this.scrollTargetEl.removeEventListener('scroll', this.onScrollBound);
-                this.scrollTargetEl = null;
-            }
+        else if (this.scrollTargetEl) {
+            this.scrollTargetEl.removeEventListener('scroll', this.onScrollBound);
+            this.scrollTargetEl = null;
         }
     }
     onBlur() {
         this.markAsTouched();
     }
     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: 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 ɵ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    class=\"w-full\"\n    [options]=\"selectDataList()\"\n    [optionLabel]=\"optionLabel()\"\n    [optionValue]=\"optionValue()\"\n    [filter]=\"true\"\n    [showClear]=\"true\"\n    [placeholder]=\"placeHolder()\"\n    [disabled]=\"disabled()\"\n    [(ngModel)]=\"value\"\n    appEditModeElementChanger\n    [isEditMode]=\"isEditMode()\"\n    (click)=\"showPanel()\"\n    (onBlur)=\"onBlur()\"\n  >\n    <ng-template #filter let-filter>\n      <input\n        pInputText\n        class=\"w-full\"\n        [ngModel]=\"searchTerm()\"\n        [ngModelOptions]=\"{ standalone: true }\"\n        (ngModelChange)=\"searchTerm.set($event)\"\n      />\n    </ng-template>\n    <ng-template #selectedItem let-selectedOption>\n      {{ selectedOption[optionLabel()] }}\n    </ng-template>\n    <ng-template #item let-item>\n      {{ item[optionLabel()] }}\n    </ng-template>\n  </p-select>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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$1.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.3", ngImport: i0, type: LazySelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-lazy-select', imports: [
-                        AngularModule,
-                        PrimeModule,
-                        EditModeElementChangerDirective
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideValueAccessor(LazySelectComponent)], 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" }]
-        }], ctorParameters: () => [], propDecorators: { placeHolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeHolder", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: true }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: true }] }], isEditMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEditMode", required: true }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: true }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: true }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: true }] }], selectDataList: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectDataList", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], onSearch: [{ type: i0.Output, args: ["onSearch"] }], onPagination: [{ type: i0.Output, args: ["onPagination"] }], scrollContainer: [{ type: i0.ViewChild, args: ['scrollContainer', { isSignal: true }] }] } });
+            args: [{ selector: 'lib-lazy-select', imports: [AngularModule, PrimeModule, EditModeElementChangerDirective], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideValueAccessor(LazySelectComponent)], template: "<div #scrollContainer class=\"lib-scroll-container\">\n  <p-select\n    class=\"w-full\"\n    [options]=\"selectDataList()\"\n    [optionLabel]=\"optionLabel()\"\n    [optionValue]=\"optionValue()\"\n    [filter]=\"true\"\n    [showClear]=\"true\"\n    [placeholder]=\"placeHolder()\"\n    [disabled]=\"disabled()\"\n    [(ngModel)]=\"value\"\n    appEditModeElementChanger\n    [isEditMode]=\"isEditMode()\"\n    (click)=\"showPanel()\"\n    (onBlur)=\"onBlur()\"\n  >\n    <ng-template #filter let-filter>\n      <input\n        pInputText\n        class=\"w-full\"\n        [ngModel]=\"searchTerm()\"\n        [ngModelOptions]=\"{ standalone: true }\"\n        (ngModelChange)=\"searchTerm.set($event)\"\n      />\n    </ng-template>\n    <ng-template #selectedItem let-selectedOption>\n      {{ selectedOption[optionLabel()] }}\n    </ng-template>\n    <ng-template #item let-item>\n      {{ item[optionLabel()] }}\n    </ng-template>\n  </p-select>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { scrollContainer: [{ type: i0.ViewChild, args: ['scrollContainer', { isSignal: true }] }], placeHolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeHolder", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: true }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: true }] }], isEditMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEditMode", required: true }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: true }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: true }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: true }] }], selectDataList: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectDataList", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], onSearch: [{ type: i0.Output, args: ["onSearch"] }], onPagination: [{ type: i0.Output, args: ["onPagination"] }] } });
 
 /**
  * Injection Tokens for Provider Interfaces
@@ -1513,57 +1720,64 @@ const AUTH_STATE_PROVIDER = new InjectionToken('AUTH_STATE_PROVIDER', {
         throw new Error('AUTH_STATE_PROVIDER not configured. Please provide an implementation in app.config.ts');
     },
 });
-
-const DEFAULT_PAGE_SIZE$2 = 20;
 /**
- * User Select Component - Single user selection with lazy loading.
+ * Profile Permission Provider Token
  *
- * Uses USER_PROVIDER internally by default, or accepts custom `loadUsers` function.
+ * 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
  *
- * Features:
- * - Search with debouncing (handled by lazy-select)
- * - Infinite scroll pagination
- * - Filter active users by default (configurable)
- * - Supports additional filters via `additionalFilters` input
+ * 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
- * ```html
- * <!-- Simple usage - uses USER_PROVIDER internally -->
- * <lib-user-select
- *   [(value)]="selectedUserId"
- *   [isEditMode]="true"
- * />
+ * // In app.config.ts
+ * providers: [
+ *   { provide: USER_LIST_PROVIDER, useClass: MyUserListProvider },
+ * ]
+ */
+const USER_LIST_PROVIDER = new InjectionToken('USER_LIST_PROVIDER');
+
+const DEFAULT_PAGE_SIZE$1 = 20;
+/**
+ * Base class for user selection components.
+ * Provides shared user loading, pagination, and search functionality.
  *
- * <!-- With custom loadUsers function -->
- * <lib-user-select
- *   [(value)]="selectedUserId"
- *   [isEditMode]="true"
- *   [loadUsers]="customLoadUsers"
- * />
- * ```
+ * Subclasses must implement:
+ * - `setupValueEffect()` to track value changes and emit selection events
  */
-class UserSelectComponent {
+class BaseUserSelectComponent {
     destroyRef = inject(DestroyRef);
+    injector = inject(Injector);
     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
+    loadUsers = input(...(ngDevMode ? [undefined, { debugName: "loadUsers" }] : []));
     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" }] : []));
+    pageSize = input(DEFAULT_PAGE_SIZE$1, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
     // 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" }] : []));
+    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) => ({
@@ -1586,20 +1800,8 @@ class UserSelectComponent {
         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);
-                }
-            });
-        });
+        // Setup value change tracking (implemented by subclass)
+        this.setupValueEffect();
     }
     handleSearch(search) {
         this.searchTerm.set(search);
@@ -1611,6 +1813,12 @@ class UserSelectComponent {
         this.pagination.set(pagination);
         this.fetchUsers(true);
     }
+    /** Reload users (useful when filters change externally) */
+    reload() {
+        this.pagination.update((p) => ({ ...p, currentPage: 0 }));
+        this.users.set([]);
+        this.fetchUsers();
+    }
     async fetchUsers(append = false) {
         if (this.isLoading())
             return;
@@ -1668,14 +1876,63 @@ class UserSelectComponent {
             })),
         })));
     }
-    /** 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: BaseUserSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.3", type: BaseUserSelectComponent, isStandalone: true, inputs: { loadUsers: { classPropertyName: "loadUsers", publicName: "loadUsers", isSignal: true, isRequired: false, transformFunction: null }, placeHolder: { classPropertyName: "placeHolder", publicName: "placeHolder", isSignal: true, isRequired: false, transformFunction: null }, isEditMode: { classPropertyName: "isEditMode", publicName: "isEditMode", isSignal: true, isRequired: true, transformFunction: null }, filterActive: { classPropertyName: "filterActive", publicName: "filterActive", isSignal: true, isRequired: false, transformFunction: null }, additionalFilters: { classPropertyName: "additionalFilters", publicName: "additionalFilters", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onError: "onError" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: BaseUserSelectComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [], propDecorators: { loadUsers: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadUsers", required: false }] }], placeHolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeHolder", required: false }] }], isEditMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEditMode", required: true }] }], filterActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterActive", required: false }] }], additionalFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "additionalFilters", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], onError: [{ type: i0.Output, args: ["onError"] }] } });
+
+/**
+ * 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 extends BaseUserSelectComponent {
+    // Two-way bound value
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    // Outputs
+    userSelected = output();
+    setupValueEffect() {
+        // 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);
+                }
+            });
+        });
     }
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UserSelectComponent, deps: null, 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: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", userSelected: "userSelected" }, usesInheritance: true, ngImport: i0, template: `
     <lib-lazy-select
       [(value)]="value"
       [placeHolder]="placeHolder()"
@@ -1695,7 +1952,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             type: Component,
             args: [{
                     selector: 'lib-user-select',
-                    standalone: true,
                     imports: [AngularModule, PrimeModule, LazySelectComponent],
                     template: `
     <lib-lazy-select
@@ -1714,166 +1970,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
   `,
                     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"] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], userSelected: [{ type: i0.Output, args: ["userSelected"] }] } });
 
-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();
+/**
+ * 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 extends BaseUserSelectComponent {
+    // Two-way bound value
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    // Outputs
+    usersSelected = output();
+    setupValueEffect() {
+        // 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);
+            });
+        });
     }
-    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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UserMultiSelectComponent, deps: null, 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: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", usersSelected: "usersSelected" }, usesInheritance: true, ngImport: i0, template: `
     <lib-lazy-multi-select
       [(value)]="value"
       [placeHolder]="placeHolder()"
@@ -1891,7 +2035,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             type: Component,
             args: [{
                     selector: 'lib-user-multi-select',
-                    standalone: true,
                     imports: [AngularModule, PrimeModule, LazyMultiSelectComponent],
                     template: `
     <lib-lazy-multi-select
@@ -1908,47 +2051,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
   `,
                     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"] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], usersSelected: [{ type: i0.Output, args: ["usersSelected"] }] } });
 
 /**
  * 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);
@@ -2094,11 +2202,7 @@ class FileUploaderComponent {
             });
         }
         catch (error) {
-            this.messageService.add({
-                severity: 'error',
-                summary: 'Upload Failed',
-                detail: error.message || 'Failed to upload file',
-            });
+            // Error toast handled by global interceptor
             this.onError.emit(error);
         }
         finally {
@@ -2120,37 +2224,41 @@ class FileUploaderComponent {
     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()"
+      class="w-full"
+      [class.opacity-60]="disabled()"
       (dragover)="onDragOver($event)"
       (dragleave)="onDragLeave($event)"
       (drop)="onDrop($event)"
     >
-      <!-- Upload Area -->
-      <div class="upload-area" (click)="fileInput.click()">
+      <!-- Upload Area - Responsive padding -->
+      <div
+        class="upload-zone border-2 border-dashed rounded-lg p-4 sm:p-6 md:p-8 cursor-pointer transition-all duration-200 text-center"
+        [class.drag-over]="isDragOver()"
+        [class.cursor-not-allowed]="disabled()"
+        (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>
+          <div class="flex flex-col items-center">
+            <i class="pi pi-spin pi-spinner text-3xl sm:text-4xl text-primary"></i>
+            <p class="mt-2 text-sm sm:text-base break-all px-2">Uploading {{ uploadingFileName() }}...</p>
             @if (uploadProgress() > 0) {
-              <p-progressBar [value]="uploadProgress()" [showValue]="true" />
+              <p-progressBar [value]="uploadProgress()" [showValue]="true" class="w-full mt-2 max-w-xs" />
             }
           </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">
+          <div class="flex flex-col items-center">
+            <i class="pi pi-cloud-upload text-3xl sm:text-4xl text-primary"></i>
+            <p class="mt-2 mb-1 font-semibold text-sm sm:text-base">
               {{ multiple() ? 'Drop files here or click to upload' : 'Drop file here or click to upload' }}
             </p>
-            <p class="text-sm text-color-secondary">
+            <p class="text-xs sm:text-sm text-color-secondary px-2">
               @if (acceptTypesDisplay()) {
                 Allowed: {{ acceptTypesDisplay() }}
               } @else {
                 All file types allowed
               }
               @if (maxSizeMb()) {
-                (Max {{ maxSizeMb() }}MB)
+                <span class="whitespace-nowrap">(Max {{ maxSizeMb() }}MB)</span>
               }
             </p>
           </div>
@@ -2161,71 +2269,76 @@ class FileUploaderComponent {
       <input
         #fileInput
         type="file"
+        class="hidden"
         [accept]="acceptString()"
         [multiple]="multiple()"
         [disabled]="disabled() || isUploading()"
         (change)="onFileSelected($event)"
-        class="hidden"
       />
 
-      <!-- Selected Files Preview -->
+      <!-- Selected Files Preview - Responsive layout -->
       @if (selectedFiles().length > 0 && showPreview()) {
-        <div class="selected-files mt-3">
+        <div class="mt-3 space-y-2">
           @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"
+            <div class="file-preview-item flex items-center gap-2 p-2 sm:p-3 rounded-lg">
+              <i [class]="getFileIcon(file)" class="text-lg sm:text-xl flex-shrink-0"></i>
+              <span class="flex-1 truncate text-sm sm:text-base min-w-0">{{ file.name }}</span>
+              <span class="text-xs sm:text-sm text-color-secondary whitespace-nowrap">{{ formatSize(file.size) }}</span>
+              <p-button
                 icon="pi pi-times"
-                class="p-button-text p-button-rounded p-button-sm"
-                (click)="removeFile(file)"
+                [text]="true"
+                [rounded]="true"
+                size="small"
+                severity="secondary"
                 [disabled]="isUploading()"
-              ></button>
+                (onClick)="removeFile(file)"
+              />
             </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 });
+  `, isInline: true, styles: [".upload-zone{border-color:var(--p-surface-300);background:var(--p-surface-50)}.upload-zone:hover:not(.cursor-not-allowed){border-color:var(--p-primary-color);background:var(--p-surface-100)}.upload-zone.drag-over{border-color:var(--p-primary-color);background:var(--p-primary-50)}:host-context(.p-dark) .upload-zone,.dark .upload-zone{border-color:var(--p-surface-600);background:var(--p-surface-800)}:host-context(.p-dark) .upload-zone:hover:not(.cursor-not-allowed),.dark .upload-zone:hover:not(.cursor-not-allowed){border-color:var(--p-primary-color);background:var(--p-surface-700)}:host-context(.p-dark) .upload-zone.drag-over,.dark .upload-zone.drag-over{border-color:var(--p-primary-color);background:var(--p-primary-900)}.file-preview-item{border:1px solid var(--p-surface-200);background:var(--p-surface-0)}:host-context(.p-dark) .file-preview-item,.dark .file-preview-item{border-color:var(--p-surface-600);background:var(--p-surface-800)}\n"], dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i1$2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i2$1.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "unit", "mode", "color"] }], 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: `
+            args: [{ selector: 'lib-file-uploader', imports: [AngularModule, PrimeModule], template: `
     <div
-      class="file-uploader"
-      [class.drag-over]="isDragOver()"
-      [class.disabled]="disabled()"
+      class="w-full"
+      [class.opacity-60]="disabled()"
       (dragover)="onDragOver($event)"
       (dragleave)="onDragLeave($event)"
       (drop)="onDrop($event)"
     >
-      <!-- Upload Area -->
-      <div class="upload-area" (click)="fileInput.click()">
+      <!-- Upload Area - Responsive padding -->
+      <div
+        class="upload-zone border-2 border-dashed rounded-lg p-4 sm:p-6 md:p-8 cursor-pointer transition-all duration-200 text-center"
+        [class.drag-over]="isDragOver()"
+        [class.cursor-not-allowed]="disabled()"
+        (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>
+          <div class="flex flex-col items-center">
+            <i class="pi pi-spin pi-spinner text-3xl sm:text-4xl text-primary"></i>
+            <p class="mt-2 text-sm sm:text-base break-all px-2">Uploading {{ uploadingFileName() }}...</p>
             @if (uploadProgress() > 0) {
-              <p-progressBar [value]="uploadProgress()" [showValue]="true" />
+              <p-progressBar [value]="uploadProgress()" [showValue]="true" class="w-full mt-2 max-w-xs" />
             }
           </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">
+          <div class="flex flex-col items-center">
+            <i class="pi pi-cloud-upload text-3xl sm:text-4xl text-primary"></i>
+            <p class="mt-2 mb-1 font-semibold text-sm sm:text-base">
               {{ multiple() ? 'Drop files here or click to upload' : 'Drop file here or click to upload' }}
             </p>
-            <p class="text-sm text-color-secondary">
+            <p class="text-xs sm:text-sm text-color-secondary px-2">
               @if (acceptTypesDisplay()) {
                 Allowed: {{ acceptTypesDisplay() }}
               } @else {
                 All file types allowed
               }
               @if (maxSizeMb()) {
-                (Max {{ maxSizeMb() }}MB)
+                <span class="whitespace-nowrap">(Max {{ maxSizeMb() }}MB)</span>
               }
             </p>
           </div>
@@ -2236,35 +2349,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
       <input
         #fileInput
         type="file"
+        class="hidden"
         [accept]="acceptString()"
         [multiple]="multiple()"
         [disabled]="disabled() || isUploading()"
         (change)="onFileSelected($event)"
-        class="hidden"
       />
 
-      <!-- Selected Files Preview -->
+      <!-- Selected Files Preview - Responsive layout -->
       @if (selectedFiles().length > 0 && showPreview()) {
-        <div class="selected-files mt-3">
+        <div class="mt-3 space-y-2">
           @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"
+            <div class="file-preview-item flex items-center gap-2 p-2 sm:p-3 rounded-lg">
+              <i [class]="getFileIcon(file)" class="text-lg sm:text-xl flex-shrink-0"></i>
+              <span class="flex-1 truncate text-sm sm:text-base min-w-0">{{ file.name }}</span>
+              <span class="text-xs sm:text-sm text-color-secondary whitespace-nowrap">{{ formatSize(file.size) }}</span>
+              <p-button
                 icon="pi pi-times"
-                class="p-button-text p-button-rounded p-button-sm"
-                (click)="removeFile(file)"
+                [text]="true"
+                [rounded]="true"
+                size="small"
+                severity="secondary"
                 [disabled]="isUploading()"
-              ></button>
+                (onClick)="removeFile(file)"
+              />
             </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"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".upload-zone{border-color:var(--p-surface-300);background:var(--p-surface-50)}.upload-zone:hover:not(.cursor-not-allowed){border-color:var(--p-primary-color);background:var(--p-surface-100)}.upload-zone.drag-over{border-color:var(--p-primary-color);background:var(--p-primary-50)}:host-context(.p-dark) .upload-zone,.dark .upload-zone{border-color:var(--p-surface-600);background:var(--p-surface-800)}:host-context(.p-dark) .upload-zone:hover:not(.cursor-not-allowed),.dark .upload-zone:hover:not(.cursor-not-allowed){border-color:var(--p-primary-color);background:var(--p-surface-700)}:host-context(.p-dark) .upload-zone.drag-over,.dark .upload-zone.drag-over{border-color:var(--p-primary-color);background:var(--p-primary-900)}.file-preview-item{border:1px solid var(--p-surface-200);background:var(--p-surface-0)}:host-context(.p-dark) .file-preview-item,.dark .file-preview-item{border-color:var(--p-surface-600);background:var(--p-surface-800)}\n"] }]
         }], 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;
@@ -2379,16 +2493,14 @@ class FileSelectorDialogComponent {
         }, 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);
-            }
+        const nextPagination = checkScrollPagination(event, {
+            pagination: this.pagination(),
+            total: this.total(),
+            isLoading: this.isLoading(),
+        });
+        if (nextPagination) {
+            this.pagination.set(nextPagination);
+            this.fetchFiles(true);
         }
     }
     toggleSelection(file) {
@@ -2499,11 +2611,13 @@ class FileSelectorDialogComponent {
       [closable]="true"
       [draggable]="false"
       [resizable]="false"
-      [style]="{ width: '800px', maxHeight: '90vh' }"
+      [breakpoints]="{ '960px': '90vw', '640px': '95vw' }"
+      [style]="{ width: '800px', maxWidth: '95vw', maxHeight: '90vh' }"
+      styleClass="file-selector-dialog"
       (onHide)="onDialogHide()"
     >
       <!-- Search Bar -->
-      <div class="flex gap-2 mb-3">
+      <div class="flex flex-col sm:flex-row gap-2 mb-3">
         <span class="p-input-icon-left flex-1">
           <i class="pi pi-search"></i>
           <input
@@ -2516,25 +2630,25 @@ class FileSelectorDialogComponent {
           />
         </span>
         @if (multiple()) {
-          <span class="text-sm text-color-secondary align-self-center">
+          <span class="text-sm text-color-secondary self-center whitespace-nowrap">
             {{ selectedFiles().length }} selected
           </span>
         }
       </div>
 
-      <!-- File Grid -->
+      <!-- File Grid - Responsive columns -->
       <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 class="col-span-full flex justify-center p-4">
+            <i class="pi pi-spin pi-spinner text-4xl text-color-secondary"></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>
+          <div class="col-span-full text-center p-4 text-color-secondary">
+            <i class="pi pi-inbox text-4xl mb-2 block"></i>
             <p>No files found</p>
           </div>
         } @else {
@@ -2548,54 +2662,59 @@ class FileSelectorDialogComponent {
               <!-- File Preview -->
               <div class="file-preview">
                 @if (isImage(file) && file.url) {
-                  <img [src]="file.url" [alt]="file.name" class="preview-image" />
+                  <img [src]="file.url" [alt]="file.name" class="w-full h-full object-cover" />
                 } @else {
-                  <i [class]="getFileIcon(file)" class="preview-icon"></i>
+                  <i [class]="getFileIcon(file)" class="text-4xl sm:text-5xl text-color-secondary"></i>
                 }
                 @if (isSelected(file)) {
                   <div class="selected-overlay">
-                    <i class="pi pi-check"></i>
+                    <i class="pi pi-check text-xl sm:text-2xl"></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 class="p-2 text-center bg-surface-0 dark:bg-surface-900">
+                <span class="block text-xs sm:text-sm whitespace-nowrap overflow-hidden text-ellipsis" [title]="file.name">
+                  {{ file.name }}
+                </span>
+                <span class="block text-xs text-color-secondary">{{ 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 class="col-span-full flex justify-center p-2">
+              <i class="pi pi-spin pi-spinner text-color-secondary"></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 #footer>
+        <div class="flex flex-col-reverse sm:flex-row gap-2 w-full sm:w-auto sm:justify-end">
+          <button
+            pButton
+            label="Cancel"
+            class="p-button-text w-full sm:w-auto"
+            (click)="onCancel()"
+          ></button>
+          <button
+            pButton
+            [label]="multiple() ? 'Select (' + selectedFiles().length + ')' : 'Select'"
+            [disabled]="selectedFiles().length === 0"
+            class="w-full sm:w-auto"
+            (click)="onConfirm()"
+          ></button>
+        </div>
       </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: i1$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "directive", type: i4.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: i6.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".file-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;max-height:300px;overflow-y:auto;padding:.5rem}@media(min-width:480px){.file-grid{grid-template-columns:repeat(3,1fr);max-height:350px}}@media(min-width:640px){.file-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem;max-height:400px}}.file-card{border:2px solid var(--p-surface-300);border-radius:var(--p-border-radius);cursor:pointer;transition:all .2s ease;overflow:hidden;background:var(--p-surface-0)}:host-context(.p-dark) .file-card,.dark .file-card{border-color:var(--p-surface-600);background:var(--p-surface-800)}.file-card:hover:not(.disabled){border-color:var(--p-primary-color);transform:translateY(-2px);box-shadow:var(--p-overlay-shadow)}.file-card.selected{border-color:var(--p-primary-color);background:var(--p-primary-50)}:host-context(.p-dark) .file-card.selected,.dark .file-card.selected{background:var(--p-primary-900)}.file-card.disabled{opacity:.5;cursor:not-allowed}.file-preview{position:relative;height:80px;display:flex;align-items:center;justify-content:center;background:var(--p-surface-100)}@media(min-width:640px){.file-preview{height:100px}}:host-context(.p-dark) .file-preview,.dark .file-preview{background:var(--p-surface-700)}.selected-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--p-primary-500-rgb, 59, 130, 246),.3)}.selected-overlay i{color:var(--p-primary-color);background:var(--p-surface-0);border-radius:50%;padding:.5rem}:host-context(.p-dark) .selected-overlay i,.dark .selected-overlay i{background:var(--p-surface-900)}\n"], dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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: i1$2.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: i4.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: `
+            args: [{ selector: 'lib-file-selector-dialog', imports: [AngularModule, PrimeModule], template: `
     <p-dialog
       [header]="header()"
       [(visible)]="visible"
@@ -2603,11 +2722,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
       [closable]="true"
       [draggable]="false"
       [resizable]="false"
-      [style]="{ width: '800px', maxHeight: '90vh' }"
+      [breakpoints]="{ '960px': '90vw', '640px': '95vw' }"
+      [style]="{ width: '800px', maxWidth: '95vw', maxHeight: '90vh' }"
+      styleClass="file-selector-dialog"
       (onHide)="onDialogHide()"
     >
       <!-- Search Bar -->
-      <div class="flex gap-2 mb-3">
+      <div class="flex flex-col sm:flex-row gap-2 mb-3">
         <span class="p-input-icon-left flex-1">
           <i class="pi pi-search"></i>
           <input
@@ -2620,25 +2741,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
           />
         </span>
         @if (multiple()) {
-          <span class="text-sm text-color-secondary align-self-center">
+          <span class="text-sm text-color-secondary self-center whitespace-nowrap">
             {{ selectedFiles().length }} selected
           </span>
         }
       </div>
 
-      <!-- File Grid -->
+      <!-- File Grid - Responsive columns -->
       <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 class="col-span-full flex justify-center p-4">
+            <i class="pi pi-spin pi-spinner text-4xl text-color-secondary"></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>
+          <div class="col-span-full text-center p-4 text-color-secondary">
+            <i class="pi pi-inbox text-4xl mb-2 block"></i>
             <p>No files found</p>
           </div>
         } @else {
@@ -2652,182 +2773,484 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
               <!-- File Preview -->
               <div class="file-preview">
                 @if (isImage(file) && file.url) {
-                  <img [src]="file.url" [alt]="file.name" class="preview-image" />
+                  <img [src]="file.url" [alt]="file.name" class="w-full h-full object-cover" />
                 } @else {
-                  <i [class]="getFileIcon(file)" class="preview-icon"></i>
+                  <i [class]="getFileIcon(file)" class="text-4xl sm:text-5xl text-color-secondary"></i>
                 }
                 @if (isSelected(file)) {
                   <div class="selected-overlay">
-                    <i class="pi pi-check"></i>
+                    <i class="pi pi-check text-xl sm:text-2xl"></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 class="p-2 text-center bg-surface-0 dark:bg-surface-900">
+                <span class="block text-xs sm:text-sm whitespace-nowrap overflow-hidden text-ellipsis" [title]="file.name">
+                  {{ file.name }}
+                </span>
+                <span class="block text-xs text-color-secondary">{{ 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 class="col-span-full flex justify-center p-2">
+              <i class="pi pi-spin pi-spinner text-color-secondary"></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 #footer>
+        <div class="flex flex-col-reverse sm:flex-row gap-2 w-full sm:w-auto sm:justify-end">
+          <button
+            pButton
+            label="Cancel"
+            class="p-button-text w-full sm:w-auto"
+            (click)="onCancel()"
+          ></button>
+          <button
+            pButton
+            [label]="multiple() ? 'Select (' + selectedFiles().length + ')' : 'Select'"
+            [disabled]="selectedFiles().length === 0"
+            class="w-full sm:w-auto"
+            (click)="onConfirm()"
+          ></button>
+        </div>
       </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"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".file-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;max-height:300px;overflow-y:auto;padding:.5rem}@media(min-width:480px){.file-grid{grid-template-columns:repeat(3,1fr);max-height:350px}}@media(min-width:640px){.file-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem;max-height:400px}}.file-card{border:2px solid var(--p-surface-300);border-radius:var(--p-border-radius);cursor:pointer;transition:all .2s ease;overflow:hidden;background:var(--p-surface-0)}:host-context(.p-dark) .file-card,.dark .file-card{border-color:var(--p-surface-600);background:var(--p-surface-800)}.file-card:hover:not(.disabled){border-color:var(--p-primary-color);transform:translateY(-2px);box-shadow:var(--p-overlay-shadow)}.file-card.selected{border-color:var(--p-primary-color);background:var(--p-primary-50)}:host-context(.p-dark) .file-card.selected,.dark .file-card.selected{background:var(--p-primary-900)}.file-card.disabled{opacity:.5;cursor:not-allowed}.file-preview{position:relative;height:80px;display:flex;align-items:center;justify-content:center;background:var(--p-surface-100)}@media(min-width:640px){.file-preview{height:100px}}:host-context(.p-dark) .file-preview,.dark .file-preview{background:var(--p-surface-700)}.selected-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--p-primary-500-rgb, 59, 130, 246),.3)}.selected-overlay i{color:var(--p-primary-color);background:var(--p-surface-0);border-radius:50%;padding:.5rem}:host-context(.p-dark) .selected-overlay i,.dark .selected-overlay i{background:var(--p-surface-900)}\n"] }]
         }], 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
- *
- * Route-level guard for permission-based access control.
- * Validates permissions before allowing navigation.
- *
- * Features:
- * - Single permission check
- * - Complex ILogicNode logic trees
- * - Configurable redirect URL
- * - Debug logging for denied access
- *
- * @example
- * ```typescript
- * // Simple permission check
- * { path: 'users', canActivate: [permissionGuard('user.view')] }
- *
- * // Complex logic
- * { path: 'admin', canActivate: [permissionGuard({
- *   id: 'root',
- *   type: 'group',
- *   operator: 'AND',
- *   children: [
- *     { id: '1', type: 'action', actionId: 'admin.view' },
- *     { id: '2', type: 'action', actionId: 'admin.manage' }
- *   ]
- * })] }
- *
- * // With custom redirect
- * { path: 'users', canActivate: [permissionGuard('user.view', '/access-denied')] }
- * ```
- */
-function permissionGuard(permission, redirectTo = '/') {
+function createGuard(guardName, redirectTo, evaluate, getDenialMessage) {
     return () => {
         const permissionValidator = inject(PermissionValidatorService);
         const router = inject(Router);
-        // Check if permissions are loaded
         if (!permissionValidator.isPermissionsLoaded()) {
-            devLog('[permissionGuard] Permissions not loaded, denying access to route');
+            if (isDevMode()) {
+                console.log(`[${guardName}] Permissions not loaded, denying access`);
+            }
             return router.createUrlTree([redirectTo]);
         }
-        const userPermissions = permissionValidator.permissions();
-        const hasPermission = evaluatePermission(permission, userPermissions);
-        if (!hasPermission) {
-            const permissionCode = typeof permission === 'string' ? permission : 'complex-logic';
-            devLog(`[permissionGuard] Access denied - missing permission: ${permissionCode}`);
+        if (!evaluate(permissionValidator.permissions())) {
+            if (isDevMode()) {
+                console.log(`[${guardName}] ${getDenialMessage()}`);
+            }
             return router.createUrlTree([redirectTo]);
         }
         return true;
     };
 }
 /**
- * Any Permission Guard (OR logic)
+ * Permission Guard - Single permission or ILogicNode check.
  *
- * Allows access if user has ANY of the specified permissions.
+ * @example
+ * ```typescript
+ * { path: 'users', canActivate: [permissionGuard('user.view')] }
+ * { path: 'admin', canActivate: [permissionGuard(logicNode, '/access-denied')] }
+ * ```
+ */
+function permissionGuard(permission, redirectTo = '/') {
+    const code = typeof permission === 'string' ? permission : 'complex-logic';
+    return createGuard('permissionGuard', redirectTo, (perms) => evaluatePermission(permission, perms), () => `Access denied - missing: ${code}`);
+}
+/**
+ * Any Permission Guard (OR logic) - Access if user has ANY permission.
  *
  * @example
  * ```typescript
- * // Allow if user has view OR create permission
  * { path: 'users', canActivate: [anyPermissionGuard(['user.view', 'user.create'])] }
  * ```
  */
 function anyPermissionGuard(permissions, redirectTo = '/') {
-    return () => {
-        const permissionValidator = inject(PermissionValidatorService);
-        const router = inject(Router);
-        // Validate permissions array
-        if (!permissions || permissions.length === 0) {
-            devLog('[anyPermissionGuard] Empty permissions array provided, denying access');
-            return router.createUrlTree([redirectTo]);
-        }
-        // Check if permissions are loaded
-        if (!permissionValidator.isPermissionsLoaded()) {
-            devLog('[anyPermissionGuard] Permissions not loaded, denying access to route');
-            return router.createUrlTree([redirectTo]);
-        }
-        const userPermissions = permissionValidator.permissions();
-        const hasPermission = hasAnyPermission(permissions, userPermissions);
-        if (!hasPermission) {
-            devLog(`[anyPermissionGuard] Access denied - missing any of: ${permissions.join(', ')}`);
-            return router.createUrlTree([redirectTo]);
-        }
-        return true;
-    };
+    if (!permissions?.length) {
+        return () => {
+            if (isDevMode()) {
+                console.log('[anyPermissionGuard] Empty permissions array, denying');
+            }
+            return inject(Router).createUrlTree([redirectTo]);
+        };
+    }
+    return createGuard('anyPermissionGuard', redirectTo, (perms) => hasAnyPermission(permissions, perms), () => `Access denied - missing any of: ${permissions.join(', ')}`);
 }
 /**
- * All Permissions Guard (AND logic)
- *
- * Allows access only if user has ALL of the specified permissions.
+ * All Permissions Guard (AND logic) - Access only if user has ALL permissions.
  *
  * @example
  * ```typescript
- * // Allow only if user has BOTH view AND create permissions
  * { path: 'admin', canActivate: [allPermissionsGuard(['admin.view', 'admin.manage'])] }
  * ```
  */
 function allPermissionsGuard(permissions, redirectTo = '/') {
-    return () => {
-        const permissionValidator = inject(PermissionValidatorService);
-        const router = inject(Router);
-        // Validate permissions array
-        if (!permissions || permissions.length === 0) {
-            devLog('[allPermissionsGuard] Empty permissions array provided, denying access');
-            return router.createUrlTree([redirectTo]);
-        }
-        // Check if permissions are loaded
-        if (!permissionValidator.isPermissionsLoaded()) {
-            devLog('[allPermissionsGuard] Permissions not loaded, denying access to route');
-            return router.createUrlTree([redirectTo]);
-        }
-        const userPermissions = permissionValidator.permissions();
-        const hasPermission = hasAllPermissions(permissions, userPermissions);
-        if (!hasPermission) {
-            devLog(`[allPermissionsGuard] Access denied - missing all of: ${permissions.join(', ')}`);
-            return router.createUrlTree([redirectTo]);
+    if (!permissions?.length) {
+        return () => {
+            if (isDevMode()) {
+                console.log('[allPermissionsGuard] Empty permissions array, denying');
+            }
+            return inject(Router).createUrlTree([redirectTo]);
+        };
+    }
+    return createGuard('allPermissionsGuard', redirectTo, (perms) => hasAllPermissions(permissions, perms), () => `Access denied - missing all of: ${permissions.join(', ')}`);
+}
+
+/**
+ * Base class for form page components that handle create/edit operations.
+ * Provides common functionality for loading existing items, form submission,
+ * navigation, and toast notifications.
+ *
+ * ## Features
+ * - Automatic route parameter handling (loads item when ID is present)
+ * - Edit mode detection based on existing item
+ * - Unified submit handler for create/update operations
+ * - Cancel navigation
+ * - Toast messages for success/validation errors
+ *
+ * ## Usage
+ *
+ * ```typescript
+ * interface IProductFormModel {
+ *   name: string;
+ *   price: number;
+ * }
+ *
+ * @Component({
+ *   selector: 'app-product-form',
+ *   standalone: true,
+ *   changeDetection: ChangeDetectionStrategy.OnPush,
+ *   template: `...`
+ * })
+ * export class ProductFormComponent extends BaseFormPage<IProduct, IProductFormModel> {
+ *   private readonly productService = inject(ProductApiService);
+ *
+ *   // Form model signal (private writable, public readonly)
+ *   private readonly _formModel = signal<IProductFormModel>({ name: '', price: 0 });
+ *   readonly formModel = this._formModel.asReadonly();
+ *
+ *   // Required abstract implementations
+ *   getFormModel(): Signal<IProductFormModel> {
+ *     return this.formModel;
+ *   }
+ *
+ *   getResourceRoute(): string {
+ *     return '/products';
+ *   }
+ *
+ *   getResourceName(): string {
+ *     return 'Product';
+ *   }
+ *
+ *   isFormValid(): boolean {
+ *     const model = this.formModel();
+ *     return model.name.trim().length > 0 && model.price > 0;
+ *   }
+ *
+ *   loadItem(id: string): void {
+ *     this.isLoading.set(true);
+ *     this.productService.findById(id)
+ *       .pipe(takeUntilDestroyed(this.destroyRef))
+ *       .subscribe({
+ *         next: (response) => {
+ *           if (response.success && response.data) {
+ *             this.existingItem.set(response.data);
+ *             this._formModel.set({
+ *               name: response.data.name,
+ *               price: response.data.price,
+ *             });
+ *           }
+ *           this.isLoading.set(false);
+ *         },
+ *         error: () => {
+ *           this.router.navigate([this.getResourceRoute()]);
+ *           this.isLoading.set(false);
+ *         },
+ *       });
+ *   }
+ *
+ *   createItem(model: IProductFormModel): Observable<ISingleResponse<IProduct>> {
+ *     return this.productService.insert(model);
+ *   }
+ *
+ *   updateItem(model: IProductFormModel): Observable<ISingleResponse<IProduct>> {
+ *     return this.productService.update({ id: this.existingItem()!.id, ...model });
+ *   }
+ * }
+ * ```
+ *
+ * @template T The entity/interface type being edited
+ * @template TFormModel The form model interface
+ */
+class BaseFormPage {
+    router = inject(Router);
+    route = inject(ActivatedRoute);
+    messageService = inject(MessageService);
+    destroyRef = inject(DestroyRef);
+    routeParams = toSignal(this.route.paramMap);
+    initialized = false;
+    /** Loading state for async operations */
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    /** The existing item when in edit mode, null when creating */
+    existingItem = signal(null, ...(ngDevMode ? [{ debugName: "existingItem" }] : []));
+    /** Whether the form is in edit mode (has existing item) */
+    isEditMode = computed(() => !!this.existingItem(), ...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
+    constructor() {
+        effect(() => {
+            const params = this.routeParams();
+            if (!params || this.initialized)
+                return;
+            this.initialized = true;
+            const id = params.get('id');
+            if (id && id !== 'new') {
+                this.loadItem(id);
+            }
+        });
+    }
+    /**
+     * Handle form submission.
+     * Validates the form, then calls createItem or updateItem based on mode.
+     * Shows appropriate toast messages and navigates back on success.
+     */
+    onSubmit() {
+        if (!this.isFormValid()) {
+            this.showValidationError();
+            return;
         }
-        return true;
-    };
+        this.isLoading.set(true);
+        const model = this.getFormModel()();
+        const operation$ = this.isEditMode()
+            ? this.updateItem(model)
+            : this.createItem(model);
+        operation$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe({
+            next: () => {
+                const action = this.isEditMode() ? 'updated' : 'created';
+                this.showSuccess(`${this.getResourceName()} ${action} successfully.`);
+                this.router.navigate([this.getResourceRoute()]);
+            },
+            error: () => {
+                this.isLoading.set(false);
+            },
+            complete: () => {
+                this.isLoading.set(false);
+            },
+        });
+    }
+    /**
+     * Handle cancel action.
+     * Navigates back to the resource list.
+     */
+    onCancel() {
+        this.router.navigate([this.getResourceRoute()]);
+    }
+    /**
+     * Show validation error toast.
+     * Override to customize the validation error message.
+     */
+    showValidationError() {
+        this.messageService.add({
+            severity: 'error',
+            summary: 'Validation Error',
+            detail: 'Please fill in all required fields.',
+        });
+    }
+    /**
+     * Show success toast.
+     * @param detail The success message to display
+     */
+    showSuccess(detail) {
+        this.messageService.add({
+            severity: 'success',
+            summary: 'Success',
+            detail,
+        });
+    }
+    /**
+     * Show error toast.
+     * @param detail The error message to display
+     */
+    showError(detail) {
+        this.messageService.add({
+            severity: 'error',
+            summary: 'Error',
+            detail,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: BaseFormPage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: BaseFormPage, isStandalone: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: BaseFormPage, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [] });
+
+/**
+ * Base List Page
+ * Abstract directive providing common signals, computed values, and utilities
+ * for list page components across all feature packages.
+ *
+ * Features:
+ * - Pagination state management (pageSize, currentPage, total)
+ * - Loading state
+ * - CRUD navigation helpers
+ * - Message display utilities
+ * - Delete confirmation with API integration
+ * - Company feature flag support
+ *
+ * Usage:
+ * ```typescript
+ * @Component({ ... })
+ * export class UserListComponent extends BaseListPage<IUser> {
+ *   getResourceRoute(): string { return '/users'; }
+ *   getDeleteConfirmMessage(user: IUser): string { return `Delete "${user.name}"?`; }
+ *   async loadData(): Promise<void> { ... }
+ * }
+ * ```
+ */
+class BaseListPage {
+    router = inject(Router);
+    messageService = inject(MessageService);
+    appConfig = inject(APP_CONFIG);
+    confirmationService = inject(ConfirmationService);
+    destroyRef = inject(DestroyRef);
+    /** Items list */
+    items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    /** Loading state */
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    /** Total records for pagination */
+    total = signal(0, ...(ngDevMode ? [{ debugName: "total" }] : []));
+    /** Page size */
+    pageSize = signal(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    /** First record index (for p-table lazy load) */
+    first = signal(0, ...(ngDevMode ? [{ debugName: "first" }] : []));
+    /** Current page (0-based for API, derived from first/pageSize) */
+    currentPage = computed(() => Math.floor(this.first() / this.pageSize()), ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
+    /** Show company info if company feature enabled */
+    showCompanyInfo = computed(() => this.appConfig.enableCompanyFeature, ...(ngDevMode ? [{ debugName: "showCompanyInfo" }] : []));
+    /**
+     * Navigate to create page
+     */
+    onCreate() {
+        this.router.navigate([this.getResourceRoute(), 'new']);
+    }
+    /**
+     * Navigate to edit page
+     * @param id The ID of the item to edit
+     */
+    onEdit(id) {
+        this.router.navigate([this.getResourceRoute(), id]);
+    }
+    /**
+     * Handle page change from p-table lazy load
+     */
+    onPageChange(event) {
+        this.first.set(event.first ?? 0);
+        this.pageSize.set(event.rows ?? 10);
+        this.loadData();
+    }
+    /**
+     * Get pagination params for API call
+     * Returns 0-based page for backend API
+     */
+    getPaginationParams() {
+        return {
+            currentPage: this.currentPage(),
+            pageSize: this.pageSize(),
+        };
+    }
+    /**
+     * Show success toast message
+     */
+    showSuccess(detail, summary = 'Success') {
+        this.messageService.add({ severity: 'success', summary, detail });
+    }
+    /**
+     * Show error toast message
+     */
+    showError(detail, summary = 'Error') {
+        this.messageService.add({ severity: 'error', summary, detail });
+    }
+    /**
+     * Show info toast message
+     */
+    showInfo(detail, summary = 'Info') {
+        this.messageService.add({ severity: 'info', summary, detail });
+    }
+    /**
+     * Show warning toast message
+     */
+    showWarn(detail, summary = 'Warning') {
+        this.messageService.add({ severity: 'warn', summary, detail });
+    }
+    /**
+     * Delete an item with confirmation dialog
+     * @param item The item to delete
+     * @param idGetter Function to extract ID from item
+     * @param deleteApiCall Function that returns Observable for delete API call
+     * @param options Optional configuration
+     */
+    onDelete(item, idGetter, deleteApiCall, options) {
+        this.confirmationService.confirm({
+            message: this.getDeleteConfirmMessage(item),
+            header: options?.header ?? 'Confirm Delete',
+            icon: 'pi pi-exclamation-triangle',
+            acceptButtonStyleClass: 'p-button-danger',
+            accept: () => {
+                deleteApiCall(idGetter(item))
+                    .pipe(takeUntilDestroyed(this.destroyRef))
+                    .subscribe({
+                    next: () => {
+                        this.showSuccess(options?.successMessage ?? 'Item deleted successfully.');
+                        this.loadData();
+                    },
+                    error: () => {
+                        this.showError(options?.errorMessage ?? 'Failed to delete item.');
+                    },
+                });
+            },
+        });
+    }
+    /**
+     * Delete an item with confirmation dialog using async/await
+     * @param item The item to delete
+     * @param idGetter Function to extract ID from item
+     * @param deleteApiCall Async function for delete API call
+     * @param options Optional configuration
+     */
+    async onDeleteAsync(item, idGetter, deleteApiCall, options) {
+        this.confirmationService.confirm({
+            message: this.getDeleteConfirmMessage(item),
+            header: options?.header ?? 'Confirm Delete',
+            icon: 'pi pi-exclamation-triangle',
+            acceptButtonStyleClass: 'p-button-danger',
+            accept: async () => {
+                try {
+                    await deleteApiCall(idGetter(item));
+                    this.showSuccess(options?.successMessage ?? 'Item deleted successfully.');
+                    await this.loadData();
+                }
+                catch {
+                    this.showError(options?.errorMessage ?? 'Failed to delete item.');
+                }
+            },
+        });
+    }
+    /**
+     * Navigate to a route
+     */
+    navigateTo(path) {
+        this.router.navigate(path);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: BaseListPage, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.3", type: BaseListPage, isStandalone: true, ngImport: i0 });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: BaseListPage, decorators: [{
+            type: Directive
+        }] });
 
-// Interfaces
+// Constants
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-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, PermissionValidatorService, PlatformService, PreventDefaultDirective, PrimeModule, USER_PERMISSION_PROVIDER, USER_PROVIDER, UserMultiSelectComponent, UserSelectComponent, allPermissionsGuard, anyPermissionGuard, evaluateLogicNode, evaluatePermission, formatFileSize, getAcceptString, getFileIconClass, hasAllPermissions, hasAnyPermission, isFileTypeAllowed, permissionGuard };
+export { ACTION_PERMISSIONS, AUTH_STATE_PROVIDER, AngularModule, ApiResourceService, ApiResourceService as ApiService, BRANCH_PERMISSIONS, BaseFormControl, BaseFormPage, BaseListPage, BaseUserSelectComponent, COMPANY_ACTION_PERMISSIONS, COMPANY_API_PROVIDER, COMPANY_PERMISSIONS, ContactTypeEnum, CookieService, EMAIL_CONFIG_PERMISSIONS, EMAIL_TEMPLATE_PERMISSIONS, EditModeElementChangerDirective, FILE_PERMISSIONS, FILE_TYPE_FILTERS, FOLDER_PERMISSIONS, FORM_PERMISSIONS, FileSelectorDialogComponent, FileUploaderComponent, FileUrlService, HasPermissionDirective, IconComponent, IconTypeEnum, IsEmptyImageDirective, LazyMultiSelectComponent, LazySelectComponent, PERMISSIONS, PROFILE_PERMISSION_PROVIDER, PROFILE_UPLOAD_PROVIDER, PermissionValidatorService, PlatformService, PreventDefaultDirective, PrimeModule, ROLE_ACTION_PERMISSIONS, ROLE_PERMISSIONS, STORAGE_CONFIG_PERMISSIONS, USER_ACTION_PERMISSIONS, USER_LIST_PROVIDER, USER_PERMISSIONS, USER_PERMISSION_PROVIDER, USER_PROVIDER, USER_ROLE_PERMISSIONS, UserMultiSelectComponent, UserSelectComponent, allPermissionsGuard, anyPermissionGuard, checkScrollPagination, evaluateLogicNode, evaluatePermission, formatFileSize, getAcceptString, getFileIconClass, hasAllPermissions, hasAnyPermission, hasPermission, isFileTypeAllowed, permissionGuard, provideValueAccessor };
 //# sourceMappingURL=flusys-ng-shared.mjs.map