@flusys/ng-shared 1.0.0-beta → 1.0.0-rc

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 { 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 i1 from '@angular/common';
 import { isPlatformServer, CommonModule, NgOptimizedImage, NgComponentOutlet, DatePipe } from '@angular/common';
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 import { APP_CONFIG, getServiceUrl, ApiLoaderService } from '@flusys/ng-core';
-import { of, firstValueFrom, skip, debounceTime, distinctUntilChanged, tap as tap$1, map as map$1 } from 'rxjs';
-import { tap, catchError, map } from 'rxjs/operators';
+import { of, firstValueFrom, map as map$1 } from 'rxjs';
+import { map, tap, catchError } from 'rxjs/operators';
 import * as i1$2 from '@angular/forms';
 import { NgControl, FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { RouterOutlet, RouterLink, Router } from '@angular/router';
+import { RouterOutlet, RouterLink, RouterLinkActive, Router, ActivatedRoute } from '@angular/router';
 import { AutoCompleteModule } from 'primeng/autocomplete';
+import { AvatarModule } from 'primeng/avatar';
 import * as i1$3 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import { CardModule } from 'primeng/card';
-import * as i2 from 'primeng/checkbox';
+import * as i1$1 from 'primeng/checkbox';
 import { CheckboxModule } from 'primeng/checkbox';
+import { ConfirmDialogModule } from 'primeng/confirmdialog';
 import { DatePickerModule } from 'primeng/datepicker';
-import * as 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';
@@ -39,21 +41,143 @@ import { RippleModule } from 'primeng/ripple';
 import * as i3 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
 import { SelectButtonModule } from 'primeng/selectbutton';
+import { SkeletonModule } from 'primeng/skeleton';
 import { SplitButtonModule } from 'primeng/splitbutton';
 import { StepsModule } from 'primeng/steps';
 import { TableModule } from 'primeng/table';
 import { TabsModule } from 'primeng/tabs';
 import { TagModule } from 'primeng/tag';
 import { TextareaModule } from 'primeng/textarea';
+import { ToastModule } from 'primeng/toast';
 import { ToggleSwitchModule } from 'primeng/toggleswitch';
 import { TooltipModule } from 'primeng/tooltip';
 import { TreeTableModule } from 'primeng/treetable';
-import { toSignal, toObservable } from '@angular/core/rxjs-interop';
-import * as 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 {
@@ -198,25 +320,54 @@ class FileUrlService {
     }
     /**
      * Fetch file URLs from backend and update cache.
-     * Returns Observable of fetched files.
+     * Skips IDs already in cache to prevent duplicate calls.
+     * Returns Observable of fetched files (including cached ones).
      */
-    fetchFileUrls(fileIds) {
+    fetchFileUrls(fileIds, forceRefresh = false) {
         if (!fileIds.length)
             return of([]);
-        const requestDto = fileIds.map((id) => ({ id }));
-        return this.http.post(`${getServiceUrl(this.appConfig, 'storage')}/file-manager/get-files`, requestDto).pipe(tap((files) => {
-            // Update cache
-            const cache = new Map(this.urlCache());
-            files.forEach((file) => cache.set(file.id, file));
-            this.urlCache.set(cache);
+        const cache = this.urlCache();
+        // Filter out IDs already in cache (unless force refresh)
+        const missingIds = forceRefresh
+            ? fileIds
+            : fileIds.filter((id) => !cache.has(id));
+        // If all files are cached, return from cache
+        if (missingIds.length === 0) {
+            const cachedFiles = fileIds
+                .map((id) => cache.get(id))
+                .filter((f) => !!f);
+            return of(cachedFiles);
+        }
+        const requestDto = missingIds.map((id) => ({ id }));
+        return this.http
+            .post(`${getServiceUrl(this.appConfig, 'storage')}/file-manager/get-files`, requestDto)
+            .pipe(map((response) => response.data ?? []), tap((files) => {
+            // Update cache with new files
+            const newCache = new Map(this.urlCache());
+            files.forEach((file) => newCache.set(file.id, file));
+            this.urlCache.set(newCache);
+        }), map(() => {
+            // Return all requested files (cached + newly fetched)
+            const allCache = this.urlCache();
+            return fileIds
+                .map((id) => allCache.get(id))
+                .filter((f) => !!f);
         }), catchError(() => of([])));
     }
     /**
      * Fetch a single file URL.
+     * Uses cache if available to prevent duplicate calls.
      * Returns Observable of file info or null if not found.
      */
-    fetchSingleFileUrl(fileId) {
-        return this.fetchFileUrls([fileId]).pipe(map((files) => files[0] ?? null));
+    fetchSingleFileUrl(fileId, forceRefresh = false) {
+        // Return from cache immediately if available
+        if (!forceRefresh) {
+            const cached = this.urlCache().get(fileId);
+            if (cached) {
+                return of(cached);
+            }
+        }
+        return this.fetchFileUrls([fileId], forceRefresh).pipe(map((files) => files[0] ?? null));
     }
     /**
      * Clear the URL cache.
@@ -261,6 +412,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * // Set permissions (typically from auth/IAM)
  * this.permissionValidator.setPermissions(['user.view', 'user.create']);
  *
+ * // Or set wildcard for no-IAM mode
+ * this.permissionValidator.setPermissions(['*']);
+ *
  * // Check individual permission
  * if (this.permissionValidator.hasPermission('user.view')) {
  *   // Show UI element
@@ -392,19 +546,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { isEditMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEditMode", required: true }] }] } });
 
+/**
+ * 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 permissions.includes(logic);
+        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 ? permissions.includes(node.actionId) : false;
+            return node.actionId ? hasPermission(node.actionId, permissions) : false;
         case 'group':
             if (!node.children || node.children.length === 0)
                 return false;
@@ -419,13 +597,13 @@ function evaluateLogicNode(node, permissions) {
 function hasAnyPermission(permissionCodes, permissions) {
     if (!permissionCodes?.length)
         return false;
-    return permissionCodes.some((code) => permissions.includes(code));
+    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) => permissions.includes(code));
+    return permissionCodes.every((code) => hasPermission(code, permissions));
 }
 
 /**
@@ -616,17 +794,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             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 +809,7 @@ class AngularModule {
             ReactiveFormsModule,
             RouterOutlet,
             RouterLink,
+            RouterLinkActive,
             IsEmptyImageDirective,
             NgOptimizedImage,
             NgComponentOutlet,
@@ -643,6 +818,7 @@ class AngularModule {
             ReactiveFormsModule,
             RouterOutlet,
             RouterLink,
+            RouterLinkActive,
             IsEmptyImageDirective,
             NgOptimizedImage,
             NgComponentOutlet,
@@ -662,6 +838,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         ReactiveFormsModule,
                         RouterOutlet,
                         RouterLink,
+                        RouterLinkActive,
                         IsEmptyImageDirective,
                         NgOptimizedImage,
                         NgComponentOutlet,
@@ -674,6 +851,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         ReactiveFormsModule,
                         RouterOutlet,
                         RouterLink,
+                        RouterLinkActive,
                         IsEmptyImageDirective,
                         NgOptimizedImage,
                         NgComponentOutlet,
@@ -684,109 +862,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,
+                        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,
                     ],
                 }]
@@ -861,6 +1051,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 +1083,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 +1301,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 +1424,44 @@ 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 [ngClass]="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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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',
+                    standalone: true,
+                    imports: [AngularModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    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 {
+        <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 }] }] } });
+
 /**
  * Lazy-loading multi-select component with search, pagination, and select-all.
  *
@@ -1239,6 +1471,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 +1482,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 +1499,63 @@ 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;
+        if (!(el instanceof HTMLElement))
+            return;
         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);
+            const pag = this.pagination();
+            const nextPage = pag.currentPage + 1;
+            const hasMore = nextPage * pag.pageSize < (this.total() ?? 0);
             if (hasMore) {
-                this.onPagination.emit({ ...pagination, currentPage: nextPage });
+                this.onPagination.emit({ ...pag, currentPage: nextPage });
             }
         }
     }
-    pSelectRef = viewChild.required('pSelect');
-    openOptions = signal(false, ...(ngDevMode ? [{ debugName: "openOptions" }] : []));
     onSelectClick(event) {
         if (this.disabled())
             return;
@@ -1318,7 +1574,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 +1587,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 +1603,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$1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.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', standalone: true, 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 +1619,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 +1633,89 @@ 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;
+        if (!(el instanceof HTMLElement))
+            return;
         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);
+            const pag = this.pagination();
+            const nextPage = pag.currentPage + 1;
+            const hasMore = nextPage * pag.pageSize < (this.total() ?? 0);
             if (hasMore) {
-                this.onPagination.emit({ ...pagination, currentPage: nextPage });
+                this.onPagination.emit({ ...pag, currentPage: nextPage });
             }
         }
     }
-    // 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$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i3.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: EditModeElementChangerDirective, selector: "[appEditModeElementChanger]", inputs: ["isEditMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.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', standalone: true, 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,6 +1782,36 @@ 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');
     },
 });
+/**
+ * Profile Permission Provider Token
+ *
+ * Provides user permission data for profile display.
+ * Optional - if not configured, profile permissions section is hidden.
+ * Use with `inject(PROFILE_PERMISSION_PROVIDER, { optional: true })`.
+ */
+const PROFILE_PERMISSION_PROVIDER = new InjectionToken('PROFILE_PERMISSION_PROVIDER');
+/**
+ * Profile Upload Provider Token
+ *
+ * Provides file upload functionality for profile pictures.
+ * Optional - if not configured or storage not enabled, upload section is hidden.
+ * Use with `inject(PROFILE_UPLOAD_PROVIDER, { optional: true })`.
+ */
+const PROFILE_UPLOAD_PROVIDER = new InjectionToken('PROFILE_UPLOAD_PROVIDER');
+/**
+ * User List Provider Token
+ *
+ * Provides extra actions, columns, and data enrichment for user list.
+ * Optional - if not configured, default user list behavior is used.
+ * Use with `inject(USER_LIST_PROVIDER, { optional: true })`.
+ *
+ * @example
+ * // In app.config.ts
+ * providers: [
+ *   { provide: USER_LIST_PROVIDER, useClass: MyUserListProvider },
+ * ]
+ */
+const USER_LIST_PROVIDER = new InjectionToken('USER_LIST_PROVIDER');
 
 const DEFAULT_PAGE_SIZE$2 = 20;
 /**
@@ -1914,41 +2213,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * 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 +2358,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 +2380,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 +2425,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$3.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: `
     <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 +2505,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;
@@ -2499,11 +2769,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 +2788,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,50 +2820,55 @@ 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$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$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: 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,
@@ -2603,11 +2880,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 +2899,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,50 +2931,55 @@ 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 */
@@ -2823,11 +3107,362 @@ function allPermissionsGuard(permissions, redirectTo = '/') {
     };
 }
 
-// Interfaces
+/**
+ * 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;
+        }
+        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
+        }] });
+
+// 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, 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, evaluateLogicNode, evaluatePermission, formatFileSize, getAcceptString, getFileIconClass, hasAllPermissions, hasAnyPermission, hasPermission, isFileTypeAllowed, permissionGuard, provideValueAccessor };
 //# sourceMappingURL=flusys-ng-shared.mjs.map