@flusys/ng-shared 1.0.0-rc → 1.0.0

package/fesm2022/flusys-ng-shared.mjs

@@ -1,20 +1,20 @@
 import * as i0 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 * as i3 from '@angular/common';
 import { isPlatformServer, CommonModule, NgOptimizedImage, NgComponentOutlet, DatePipe } from '@angular/common';
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
-import { APP_CONFIG, getServiceUrl, ApiLoaderService } from '@flusys/ng-core';
+import { APP_CONFIG, getServiceUrl } from '@flusys/ng-core';
 import { of, firstValueFrom, map as map$1 } from 'rxjs';
 import { map, tap, catchError } from 'rxjs/operators';
-import * as i1$2 from '@angular/forms';
+import * as i1$1 from '@angular/forms';
 import { NgControl, FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 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 * as i1$2 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
 import { CardModule } from 'primeng/card';
-import * as i1$1 from 'primeng/checkbox';
+import * as i1 from 'primeng/checkbox';
 import { CheckboxModule } from 'primeng/checkbox';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
 import { DatePickerModule } from 'primeng/datepicker';
@@ -38,7 +38,7 @@ import * as i2$1 from 'primeng/progressbar';
 import { ProgressBarModule } from 'primeng/progressbar';
 import { RadioButtonModule } from 'primeng/radiobutton';
 import { RippleModule } from 'primeng/ripple';
-import * as i3 from 'primeng/select';
+import * as i3$1 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
 import { SelectButtonModule } from 'primeng/selectbutton';
 import { SkeletonModule } from 'primeng/skeleton';
@@ -293,96 +293,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
 
 /**
  * Service to fetch file URLs from the backend.
- * Uses POST /file-manager/get-files endpoint which:
- * - Handles presigned URLs for cloud storage (AWS S3, Azure)
- * - Auto-refreshes expired URLs
- * - Validates file access permissions
- * - Works with all storage providers (Local, S3, Azure, SFTP)
+ * Handles presigned URLs for cloud storage, auto-refresh, and caching.
  */
 class FileUrlService {
     http = inject(HttpClient);
     appConfig = inject(APP_CONFIG);
-    /** Cache of file URLs by file ID */
-    urlCache = signal(new Map(), ...(ngDevMode ? [{ debugName: "urlCache" }] : []));
-    /**
-     * Get file URL by ID from cache (reactive signal)
-     */
+    _cache = signal(new Map(), ...(ngDevMode ? [{ debugName: "_cache" }] : []));
+    cache = this._cache.asReadonly();
+    /** Get file URL by ID from cache (synchronous) */
     getFileUrl(fileId) {
         if (!fileId)
             return null;
-        return this.urlCache().get(fileId)?.url ?? null;
+        return this._cache().get(fileId)?.url ?? null;
     }
-    /**
-     * Get file URL signal (computed from cache)
-     */
+    /** Get file URL as computed signal */
     fileUrlSignal(fileId) {
         return computed(() => this.getFileUrl(fileId));
     }
-    /**
-     * Fetch file URLs from backend and update cache.
-     * Skips IDs already in cache to prevent duplicate calls.
-     * Returns Observable of fetched files (including cached ones).
-     */
+    /** Fetch file URLs from backend and update cache */
     fetchFileUrls(fileIds, forceRefresh = false) {
         if (!fileIds.length)
             return of([]);
-        const cache = this.urlCache();
-        // Filter out IDs already in cache (unless force refresh)
+        const cache = this._cache();
         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);
+        if (!missingIds.length) {
+            return of(this.getFromCache(fileIds));
         }
         const requestDto = missingIds.map((id) => ({ id }));
         return this.http
             .post(`${getServiceUrl(this.appConfig, 'storage')}/file-manager/get-files`, requestDto)
-            .pipe(map((response) => response.data ?? []), tap((files) => {
-            // 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([])));
+            .pipe(map((response) => response.data ?? []), tap((files) => this.addToCache(files)), map(() => this.getFromCache(fileIds)), 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.
-     */
+    /** Fetch single file URL (delegates to fetchFileUrls) */
     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.
-     * Useful on logout or when switching contexts.
-     */
+    /** Clear entire cache */
     clearCache() {
-        this.urlCache.set(new Map());
+        this._cache.set(new Map());
     }
-    /**
-     * Remove specific file from cache.
-     */
+    /** Remove specific file from cache */
     removeFromCache(fileId) {
-        const cache = new Map(this.urlCache());
-        cache.delete(fileId);
-        this.urlCache.set(cache);
+        this._cache.update((cache) => {
+            const next = new Map(cache);
+            next.delete(fileId);
+            return next;
+        });
+    }
+    addToCache(files) {
+        this._cache.update((cache) => {
+            const next = new Map(cache);
+            for (const file of files) {
+                next.set(file.id, file);
+            }
+            return next;
+        });
+    }
+    getFromCache(fileIds) {
+        const cache = this._cache();
+        return fileIds
+            .map((id) => cache.get(id))
+            .filter((f) => f !== undefined);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FileUrlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FileUrlService, providedIn: 'root' });
@@ -393,82 +366,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
         }] });
 
 /**
- * Permission Validator Service
- *
- * Centralized service for permission validation across all packages.
- * Provides signal-based state management and reactive permission checking.
- *
- * Features:
- * - Signal-based permission storage
- * - Individual permission checks
- * - Permission change detection
- * - Reactive permission state updates
- *
- * Usage:
- * ```typescript
- * // In component
- * readonly permissionValidator = inject(PermissionValidatorService);
- *
- * // Set permissions (typically from auth/IAM)
- * this.permissionValidator.setPermissions(['user.view', 'user.create']);
- *
- * // Or set wildcard for no-IAM mode
- * this.permissionValidator.setPermissions(['*']);
- *
- * // Check individual permission
- * if (this.permissionValidator.hasPermission('user.view')) {
- *   // Show UI element
- * }
- *
- * // Access current permissions reactively
- * const permissions = this.permissionValidator.permissions();
- * ```
- *
- * @packageDocumentation
+ * Check if user has a specific permission using wildcard matching.
+ * Supports:
+ * - Exact match: 'user.create' matches 'user.create'
+ * - Full wildcard: '*' matches everything
+ * - Module wildcard: 'user.*' matches 'user.create', 'user.read', etc.
+ */
+function hasPermission(requiredPermission, userPermissions) {
+    // Exact match
+    if (userPermissions.includes(requiredPermission))
+        return true;
+    // Wildcard matching
+    for (const permission of userPermissions) {
+        // Full wildcard - grants all permissions
+        if (permission === '*')
+            return true;
+        // Module wildcard (e.g., 'user.*' matches 'user.create')
+        if (permission.endsWith('.*') &&
+            requiredPermission.startsWith(permission.slice(0, -1))) {
+            return true;
+        }
+    }
+    return false;
+}
+/** Evaluate permission logic (string or ILogicNode) against user permissions */
+function evaluatePermission(logic, permissions) {
+    if (!logic)
+        return false;
+    if (typeof logic === 'string')
+        return hasPermission(logic, permissions);
+    return evaluateLogicNode(logic, permissions);
+}
+/** Recursively evaluate an ILogicNode tree */
+function evaluateLogicNode(node, permissions) {
+    switch (node.type) {
+        case 'action':
+            return node.actionId ? hasPermission(node.actionId, permissions) : false;
+        case 'group':
+            if (!node.children || node.children.length === 0)
+                return false;
+            return node.operator === 'AND'
+                ? node.children.every((child) => evaluateLogicNode(child, permissions))
+                : node.children.some((child) => evaluateLogicNode(child, permissions));
+        default:
+            return false;
+    }
+}
+/** Check if user has ANY of the specified permissions (OR logic) */
+function hasAnyPermission(permissionCodes, permissions) {
+    if (!permissionCodes?.length)
+        return false;
+    return permissionCodes.some((code) => hasPermission(code, permissions));
+}
+/** Check if user has ALL of the specified permissions (AND logic) */
+function hasAllPermissions(permissionCodes, permissions) {
+    if (!permissionCodes?.length)
+        return false;
+    return permissionCodes.every((code) => hasPermission(code, permissions));
+}
+
+/**
+ * Permission state management service.
+ * Provides signal-based storage and permission checking with wildcard support.
  */
 class PermissionValidatorService {
-    // ==================== SIGNALS ====================
-    /**
-     * Private writable signal for permissions
-     */
     _permissions = signal([], ...(ngDevMode ? [{ debugName: "_permissions" }] : []));
-    /**
-     * Readonly permission signal for external consumers
-     */
     permissions = this._permissions.asReadonly();
-    /**
-     * Private writable signal for loaded state
-     */
     _isLoaded = signal(false, ...(ngDevMode ? [{ debugName: "_isLoaded" }] : []));
-    /**
-     * Set permissions (replaces existing permissions)
-     * @param permissions - Array of permission codes
-     */
+    isLoaded = this._isLoaded.asReadonly();
+    /** Set permissions (replaces existing) */
     setPermissions(permissions) {
         this._permissions.set(permissions);
         this._isLoaded.set(true);
     }
-    /**
-     * Clear all permissions
-     */
+    /** Clear all permissions */
     clearPermissions() {
         this._permissions.set([]);
         this._isLoaded.set(false);
     }
-    // ==================== PERMISSION CHECKING ====================
-    /**
-     * Check if user has a specific permission
-     * @param permissionCode - Required permission code
-     * @returns True if user has permission
-     */
-    hasPermission(permissionCode) {
-        return this.permissions().includes(permissionCode);
+    /** Check if user has permission (supports wildcards: '*', 'module.*') */
+    hasPermission(code) {
+        return hasPermission(code, this._permissions());
     }
-    // ==================== UTILITY METHODS ====================
-    /**
-     * Check if permissions are loaded
-     * @returns True if permissions have been loaded
-     */
+    /** @deprecated Use `isLoaded()` signal instead */
     isPermissionsLoaded() {
         return this._isLoaded();
     }
@@ -477,9 +457,7 @@ class PermissionValidatorService {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: PermissionValidatorService, decorators: [{
             type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
+            args: [{ providedIn: 'root' }]
         }] });
 
 class EditModeElementChangerDirective {
@@ -542,70 +520,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             type: Directive,
             args: [{
                     selector: '[appEditModeElementChanger]',
-                    standalone: true,
                 }]
         }], ctorParameters: () => [], propDecorators: { isEditMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEditMode", required: true }] }] } });
 
-/**
- * Check if user has a specific permission using wildcard matching.
- * Supports:
- * - Exact match: 'user.create' matches 'user.create'
- * - Full wildcard: '*' matches everything
- * - Module wildcard: 'user.*' matches 'user.create', 'user.read', etc.
- */
-function hasPermission(requiredPermission, userPermissions) {
-    // Exact match
-    if (userPermissions.includes(requiredPermission))
-        return true;
-    // Wildcard matching
-    for (const permission of userPermissions) {
-        // Full wildcard - grants all permissions
-        if (permission === '*')
-            return true;
-        // Module wildcard (e.g., 'user.*' matches 'user.create')
-        if (permission.endsWith('.*') &&
-            requiredPermission.startsWith(permission.slice(0, -1))) {
-            return true;
-        }
-    }
-    return false;
-}
-/** Evaluate permission logic (string or ILogicNode) against user permissions */
-function evaluatePermission(logic, permissions) {
-    if (!logic)
-        return false;
-    if (typeof logic === 'string')
-        return hasPermission(logic, permissions);
-    return evaluateLogicNode(logic, permissions);
-}
-/** Recursively evaluate an ILogicNode tree */
-function evaluateLogicNode(node, permissions) {
-    switch (node.type) {
-        case 'action':
-            return node.actionId ? hasPermission(node.actionId, permissions) : false;
-        case 'group':
-            if (!node.children || node.children.length === 0)
-                return false;
-            return node.operator === 'AND'
-                ? node.children.every((child) => evaluateLogicNode(child, permissions))
-                : node.children.some((child) => evaluateLogicNode(child, permissions));
-        default:
-            return false;
-    }
-}
-/** Check if user has ANY of the specified permissions (OR logic) */
-function hasAnyPermission(permissionCodes, permissions) {
-    if (!permissionCodes?.length)
-        return false;
-    return permissionCodes.some((code) => hasPermission(code, permissions));
-}
-/** Check if user has ALL of the specified permissions (AND logic) */
-function hasAllPermissions(permissionCodes, permissions) {
-    if (!permissionCodes?.length)
-        return false;
-    return permissionCodes.every((code) => hasPermission(code, permissions));
-}
-
 /**
  * HasPermission Directive
  *
@@ -726,7 +643,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             type: Directive,
             args: [{
                     selector: '[hasPermission]',
-                    standalone: true,
                 }]
         }], ctorParameters: () => [], propDecorators: { hasPermission: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasPermission", required: false }] }] } });
 
@@ -755,7 +671,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         '[src]': 'imageSrc()',
                         '(error)': 'onError()',
                     },
-                    standalone: true,
                 }]
         }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }] } });
 
@@ -793,7 +708,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             type: Directive,
             args: [{
                     selector: '[appPreventDefault]',
-                    standalone: true,
                     host: {
                         '(click)': 'onClick($event)',
                         '(keydown)': 'onKeydown($event)',
@@ -1028,7 +942,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  */
 class ApiResourceService {
     baseUrl;
-    loaderService = inject(ApiLoaderService);
     injector = inject(Injector);
     http;
     moduleApiName;
@@ -1432,26 +1345,25 @@ class IconComponent {
     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>
+        <i [class]="icon()"></i>
       } @else if (iconType() === IconTypeEnum.IMAGE_FILE_LINK) {
         <img [alt]="icon()" [src]="icon()" />
       } @else {
         <i class="pi pi-question"></i>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IsEmptyImageDirective, selector: "img", inputs: ["src"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: IsEmptyImageDirective, selector: "img", inputs: ["src"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-icon',
-                    standalone: true,
                     imports: [AngularModule],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
     @if (icon()) {
       @if (iconType() === IconTypeEnum.PRIMENG_ICON) {
-        <i [ngClass]="icon()"></i>
+        <i [class]="icon()"></i>
       } @else if (iconType() === IconTypeEnum.IMAGE_FILE_LINK) {
         <img [alt]="icon()" [src]="icon()" />
       } @else {
@@ -1462,6 +1374,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                 }]
         }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], iconType: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconType", required: false }] }] } });
 
+/**
+ * Check if scroll has reached near bottom and calculate next page if available.
+ * Returns next pagination if should load more, null otherwise.
+ *
+ * @example
+ * ```typescript
+ * onScroll(event: Event): void {
+ *   const nextPagination = checkScrollPagination(event, {
+ *     pagination: this.pagination(),
+ *     total: this.total(),
+ *     isLoading: this.isLoading(),
+ *   });
+ *   if (nextPagination) {
+ *     this.onPagination.emit(nextPagination);
+ *   }
+ * }
+ * ```
+ */
+function checkScrollPagination(event, config) {
+    const el = event.target;
+    if (!(el instanceof HTMLElement))
+        return null;
+    const threshold = config.threshold ?? 50;
+    const nearBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - threshold;
+    if (!nearBottom || config.isLoading)
+        return null;
+    const { pagination, total } = config;
+    const nextPage = pagination.currentPage + 1;
+    const hasMore = nextPage * pagination.pageSize < (total ?? 0);
+    if (!hasMore)
+        return null;
+    return { ...pagination, currentPage: nextPage };
+}
+
 /**
  * Lazy-loading multi-select component with search, pagination, and select-all.
  *
@@ -1543,17 +1489,13 @@ class LazyMultiSelectComponent extends BaseFormControl {
         });
     }
     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 pag = this.pagination();
-            const nextPage = pag.currentPage + 1;
-            const hasMore = nextPage * pag.pageSize < (this.total() ?? 0);
-            if (hasMore) {
-                this.onPagination.emit({ ...pag, currentPage: nextPage });
-            }
+        const nextPagination = checkScrollPagination(event, {
+            pagination: this.pagination(),
+            total: this.total(),
+            isLoading: this.isLoading(),
+        });
+        if (nextPagination) {
+            this.onPagination.emit(nextPagination);
         }
     }
     onSelectClick(event) {
@@ -1603,11 +1545,11 @@ 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" }, 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: LazyMultiSelectComponent, isStandalone: true, selector: "lib-lazy-multi-select", inputs: { placeHolder: { classPropertyName: "placeHolder", publicName: "placeHolder", isSignal: true, isRequired: false, transformFunction: null }, isEditMode: { classPropertyName: "isEditMode", publicName: "isEditMode", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: true, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: true, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: true, transformFunction: null }, selectDataList: { classPropertyName: "selectDataList", publicName: "selectDataList", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onSearch: "onSearch", onPagination: "onPagination" }, providers: [provideValueAccessor(LazyMultiSelectComponent)], viewQueries: [{ propertyName: "pSelectRef", first: true, predicate: ["pSelect"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"p-select w-full\" #pSelect (click)=\"onSelectClick($event)\" [class.p-disabled]=\"disabled()\">\n  @if (selectedValueDisplay()) {\n    <span class=\"p-select-label\">{{ selectedValueDisplay() }}</span>\n  } @else {\n    <span class=\"p-select-label p-placeholder\">{{ placeHolder() }}</span>\n  }\n\n  <span class=\"p-select-clear-icon\" (click)=\"clear($event)\">\n    <i class=\"pi pi-times\"></i>\n  </span>\n\n  <div class=\"p-select-dropdown\">\n    <span class=\"p-select-dropdown-icon flex items-center\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n           class=\"p-multiselect-dropdown-icon p-icon\" aria-hidden=\"true\">\n        <path d=\"M7.01744 10.398C6.91269 10.3985 6.8089 10.378 6.71215 10.3379C6.61541 10.2977 6.52766 10.2386 6.45405 10.1641L1.13907 4.84913C1.03306 4.69404 0.985221 4.5065 1.00399 4.31958C1.02276 4.13266 1.10693 3.95838 1.24166 3.82747C1.37639 3.69655 1.55301 3.61742 1.74039 3.60402C1.92777 3.59062 2.11386 3.64382 2.26584 3.75424L7.01744 8.47394L11.769 3.75424C11.9189 3.65709 12.097 3.61306 12.2748 3.62921C12.4527 3.64535 12.6199 3.72073 12.7498 3.84328C12.8797 3.96582 12.9647 4.12842 12.9912 4.30502C13.0177 4.48162 12.9841 4.662 12.8958 4.81724L7.58083 10.1322C7.50996 10.2125 7.42344 10.2775 7.32656 10.3232C7.22968 10.3689 7.12449 10.3944 7.01744 10.398Z\" fill=\"currentColor\" />\n      </svg>\n    </span>\n  </div>\n\n  @if (openOptions()) {\n    <div class=\"p-select-overlay\" (click)=\"onOverlayClick($event)\">\n      <div class=\"p-select-header flex flex-row gap-2 items-center\">\n        <p-checkbox\n          binary=\"true\"\n          [ngModel]=\"isSelectAll()\"\n          [disabled]=\"disabled()\"\n          (onChange)=\"changeSelectAll($event)\"\n        />\n        <input\n          type=\"text\"\n          pInputText\n          class=\"w-full\"\n          placeholder=\"Search...\"\n          [ngModel]=\"searchTerm()\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          (ngModelChange)=\"searchTerm.set($event)\"\n        />\n      </div>\n      <div class=\"p-select-list-container\" (scroll)=\"onScroll($event)\">\n        <ul class=\"p-select-list\">\n          @for (data of selectDataList(); track key(data)) {\n            <li class=\"p-select-option flex flex-row gap-2 items-center\"\n                [ngClass]=\"{ 'p-select-option-selected': isSelected(data) }\">\n              <p-checkbox\n                binary=\"true\"\n                [ngModel]=\"isSelected(data)\"\n                [disabled]=\"disabled()\"\n                (onChange)=\"selectValue($event, data)\"\n              />\n              <span>{{ data.label }}</span>\n            </li>\n          }\n        </ul>\n      </div>\n    </div>\n  }\n</div>", styles: [".p-select-overlay{position:absolute;top:100%;left:0;right:0;z-index:var(--p-overlay-select-zindex, 1004);margin-top:var(--p-select-overlay-offset, 2px);background:var(--p-select-overlay-background, var(--p-surface-0));border:1px solid var(--p-select-overlay-border-color, var(--p-surface-200));border-radius:var(--p-select-overlay-border-radius, var(--p-border-radius));box-shadow:var(--p-select-overlay-shadow, var(--p-overlay-shadow))}.p-select-header{padding:.75rem;border-bottom:1px solid var(--p-surface-200);background:var(--p-surface-50)}:host-context(.p-dark) .p-select-header,.dark .p-select-header{border-color:var(--p-surface-700);background:var(--p-surface-800)}.p-select-list-container{max-height:10rem;overflow-y:auto}@media(min-width:640px){.p-select-list-container{max-height:12.5rem}}.p-select-list{margin:0;padding:.25rem 0;list-style:none}.p-select-option{padding:.5rem .75rem;cursor:pointer;transition:background-color .2s ease}.p-select-option:hover{background:var(--p-select-option-focus-background, var(--p-surface-100));color:var(--p-select-option-focus-color, var(--p-text-color))}:host-context(.p-dark) .p-select-option:hover,.dark .p-select-option:hover{background:var(--p-surface-700)}.p-select-option.p-select-option-selected{background:var(--p-select-option-selected-background, var(--p-primary-50));color:var(--p-select-option-selected-color, var(--p-primary-color))}:host-context(.p-dark) .p-select-option.p-select-option-selected,.dark .p-select-option.p-select-option-selected{background:var(--p-primary-900)}.p-select-option.p-select-option-selected:hover{background:var(--p-select-option-selected-focus-background, var(--p-primary-100));color:var(--p-select-option-selected-focus-color, var(--p-primary-color))}:host-context(.p-dark) .p-select-option.p-select-option-selected:hover,.dark .p-select-option.p-select-option-selected:hover{background:var(--p-primary-800)}.p-select-clear-icon{display:flex;align-items:center;padding:0 .5rem;color:var(--p-text-color-secondary);cursor:pointer;transition:color .2s ease}.p-select-clear-icon:hover{color:var(--p-text-color)}\n"], dependencies: [{ kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i1.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: LazyMultiSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-lazy-multi-select', 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"] }]
+            args: [{ selector: 'lib-lazy-multi-select', imports: [PrimeModule, AngularModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideValueAccessor(LazyMultiSelectComponent)], template: "<div class=\"p-select w-full\" #pSelect (click)=\"onSelectClick($event)\" [class.p-disabled]=\"disabled()\">\n  @if (selectedValueDisplay()) {\n    <span class=\"p-select-label\">{{ selectedValueDisplay() }}</span>\n  } @else {\n    <span class=\"p-select-label p-placeholder\">{{ placeHolder() }}</span>\n  }\n\n  <span class=\"p-select-clear-icon\" (click)=\"clear($event)\">\n    <i class=\"pi pi-times\"></i>\n  </span>\n\n  <div class=\"p-select-dropdown\">\n    <span class=\"p-select-dropdown-icon flex items-center\">\n      <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n           class=\"p-multiselect-dropdown-icon p-icon\" aria-hidden=\"true\">\n        <path d=\"M7.01744 10.398C6.91269 10.3985 6.8089 10.378 6.71215 10.3379C6.61541 10.2977 6.52766 10.2386 6.45405 10.1641L1.13907 4.84913C1.03306 4.69404 0.985221 4.5065 1.00399 4.31958C1.02276 4.13266 1.10693 3.95838 1.24166 3.82747C1.37639 3.69655 1.55301 3.61742 1.74039 3.60402C1.92777 3.59062 2.11386 3.64382 2.26584 3.75424L7.01744 8.47394L11.769 3.75424C11.9189 3.65709 12.097 3.61306 12.2748 3.62921C12.4527 3.64535 12.6199 3.72073 12.7498 3.84328C12.8797 3.96582 12.9647 4.12842 12.9912 4.30502C13.0177 4.48162 12.9841 4.662 12.8958 4.81724L7.58083 10.1322C7.50996 10.2125 7.42344 10.2775 7.32656 10.3232C7.22968 10.3689 7.12449 10.3944 7.01744 10.398Z\" fill=\"currentColor\" />\n      </svg>\n    </span>\n  </div>\n\n  @if (openOptions()) {\n    <div class=\"p-select-overlay\" (click)=\"onOverlayClick($event)\">\n      <div class=\"p-select-header flex flex-row gap-2 items-center\">\n        <p-checkbox\n          binary=\"true\"\n          [ngModel]=\"isSelectAll()\"\n          [disabled]=\"disabled()\"\n          (onChange)=\"changeSelectAll($event)\"\n        />\n        <input\n          type=\"text\"\n          pInputText\n          class=\"w-full\"\n          placeholder=\"Search...\"\n          [ngModel]=\"searchTerm()\"\n          [ngModelOptions]=\"{ standalone: true }\"\n          (ngModelChange)=\"searchTerm.set($event)\"\n        />\n      </div>\n      <div class=\"p-select-list-container\" (scroll)=\"onScroll($event)\">\n        <ul class=\"p-select-list\">\n          @for (data of selectDataList(); track key(data)) {\n            <li class=\"p-select-option flex flex-row gap-2 items-center\"\n                [ngClass]=\"{ 'p-select-option-selected': isSelected(data) }\">\n              <p-checkbox\n                binary=\"true\"\n                [ngModel]=\"isSelected(data)\"\n                [disabled]=\"disabled()\"\n                (onChange)=\"selectValue($event, data)\"\n              />\n              <span>{{ data.label }}</span>\n            </li>\n          }\n        </ul>\n      </div>\n    </div>\n  }\n</div>", styles: [".p-select-overlay{position:absolute;top:100%;left:0;right:0;z-index:var(--p-overlay-select-zindex, 1004);margin-top:var(--p-select-overlay-offset, 2px);background:var(--p-select-overlay-background, var(--p-surface-0));border:1px solid var(--p-select-overlay-border-color, var(--p-surface-200));border-radius:var(--p-select-overlay-border-radius, var(--p-border-radius));box-shadow:var(--p-select-overlay-shadow, var(--p-overlay-shadow))}.p-select-header{padding:.75rem;border-bottom:1px solid var(--p-surface-200);background:var(--p-surface-50)}:host-context(.p-dark) .p-select-header,.dark .p-select-header{border-color:var(--p-surface-700);background:var(--p-surface-800)}.p-select-list-container{max-height:10rem;overflow-y:auto}@media(min-width:640px){.p-select-list-container{max-height:12.5rem}}.p-select-list{margin:0;padding:.25rem 0;list-style:none}.p-select-option{padding:.5rem .75rem;cursor:pointer;transition:background-color .2s ease}.p-select-option:hover{background:var(--p-select-option-focus-background, var(--p-surface-100));color:var(--p-select-option-focus-color, var(--p-text-color))}:host-context(.p-dark) .p-select-option:hover,.dark .p-select-option:hover{background:var(--p-surface-700)}.p-select-option.p-select-option-selected{background:var(--p-select-option-selected-background, var(--p-primary-50));color:var(--p-select-option-selected-color, var(--p-primary-color))}:host-context(.p-dark) .p-select-option.p-select-option-selected,.dark .p-select-option.p-select-option-selected{background:var(--p-primary-900)}.p-select-option.p-select-option-selected:hover{background:var(--p-select-option-selected-focus-background, var(--p-primary-100));color:var(--p-select-option-selected-focus-color, var(--p-primary-color))}:host-context(.p-dark) .p-select-option.p-select-option-selected:hover,.dark .p-select-option.p-select-option-selected:hover{background:var(--p-primary-800)}.p-select-clear-icon{display:flex;align-items:center;padding:0 .5rem;color:var(--p-text-color-secondary);cursor:pointer;transition:color .2s ease}.p-select-clear-icon:hover{color:var(--p-text-color)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { pSelectRef: [{ type: i0.ViewChild, args: ['pSelect', { isSignal: true }] }], placeHolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeHolder", required: false }] }], isEditMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEditMode", required: true }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: true }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: true }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: true }] }], selectDataList: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectDataList", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], onSearch: [{ type: i0.Output, args: ["onSearch"] }], onPagination: [{ type: i0.Output, args: ["onPagination"] }] } });
 
 /**
@@ -1673,17 +1615,13 @@ class LazySelectComponent extends BaseFormControl {
         });
     }
     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 pag = this.pagination();
-            const nextPage = pag.currentPage + 1;
-            const hasMore = nextPage * pag.pageSize < (this.total() ?? 0);
-            if (hasMore) {
-                this.onPagination.emit({ ...pag, currentPage: nextPage });
-            }
+        const nextPagination = checkScrollPagination(event, {
+            pagination: this.pagination(),
+            total: this.total(),
+            isLoading: this.isLoading(),
+        });
+        if (nextPagination) {
+            this.onPagination.emit(nextPagination);
         }
     }
     showPanel() {
@@ -1710,11 +1648,11 @@ class LazySelectComponent extends BaseFormControl {
         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    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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.3", type: LazySelectComponent, isStandalone: true, selector: "lib-lazy-select", inputs: { placeHolder: { classPropertyName: "placeHolder", publicName: "placeHolder", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: true, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: true, transformFunction: null }, isEditMode: { classPropertyName: "isEditMode", publicName: "isEditMode", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: true, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: true, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: true, transformFunction: null }, selectDataList: { classPropertyName: "selectDataList", publicName: "selectDataList", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onSearch: "onSearch", onPagination: "onPagination" }, providers: [provideValueAccessor(LazySelectComponent)], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #scrollContainer class=\"lib-scroll-container\">\n  <p-select\n    class=\"w-full\"\n    [options]=\"selectDataList()\"\n    [optionLabel]=\"optionLabel()\"\n    [optionValue]=\"optionValue()\"\n    [filter]=\"true\"\n    [showClear]=\"true\"\n    [placeholder]=\"placeHolder()\"\n    [disabled]=\"disabled()\"\n    [(ngModel)]=\"value\"\n    appEditModeElementChanger\n    [isEditMode]=\"isEditMode()\"\n    (click)=\"showPanel()\"\n    (onBlur)=\"onBlur()\"\n  >\n    <ng-template #filter let-filter>\n      <input\n        pInputText\n        class=\"w-full\"\n        [ngModel]=\"searchTerm()\"\n        [ngModelOptions]=\"{ standalone: true }\"\n        (ngModelChange)=\"searchTerm.set($event)\"\n      />\n    </ng-template>\n    <ng-template #selectedItem let-selectedOption>\n      {{ selectedOption[optionLabel()] }}\n    </ng-template>\n    <ng-template #item let-item>\n      {{ item[optionLabel()] }}\n    </ng-template>\n  </p-select>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i3$1.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: EditModeElementChangerDirective, selector: "[appEditModeElementChanger]", inputs: ["isEditMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: LazySelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-lazy-select', 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" }]
+            args: [{ selector: 'lib-lazy-select', imports: [AngularModule, PrimeModule, EditModeElementChangerDirective], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideValueAccessor(LazySelectComponent)], template: "<div #scrollContainer class=\"lib-scroll-container\">\n  <p-select\n    class=\"w-full\"\n    [options]=\"selectDataList()\"\n    [optionLabel]=\"optionLabel()\"\n    [optionValue]=\"optionValue()\"\n    [filter]=\"true\"\n    [showClear]=\"true\"\n    [placeholder]=\"placeHolder()\"\n    [disabled]=\"disabled()\"\n    [(ngModel)]=\"value\"\n    appEditModeElementChanger\n    [isEditMode]=\"isEditMode()\"\n    (click)=\"showPanel()\"\n    (onBlur)=\"onBlur()\"\n  >\n    <ng-template #filter let-filter>\n      <input\n        pInputText\n        class=\"w-full\"\n        [ngModel]=\"searchTerm()\"\n        [ngModelOptions]=\"{ standalone: true }\"\n        (ngModelChange)=\"searchTerm.set($event)\"\n      />\n    </ng-template>\n    <ng-template #selectedItem let-selectedOption>\n      {{ selectedOption[optionLabel()] }}\n    </ng-template>\n    <ng-template #item let-item>\n      {{ item[optionLabel()] }}\n    </ng-template>\n  </p-select>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { scrollContainer: [{ type: i0.ViewChild, args: ['scrollContainer', { isSignal: true }] }], placeHolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeHolder", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: true }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: true }] }], isEditMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEditMode", required: true }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: true }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: true }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: true }] }], selectDataList: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectDataList", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], onSearch: [{ type: i0.Output, args: ["onSearch"] }], onPagination: [{ type: i0.Output, args: ["onPagination"] }] } });
 
 /**
@@ -1813,56 +1751,33 @@ const PROFILE_UPLOAD_PROVIDER = new InjectionToken('PROFILE_UPLOAD_PROVIDER');
  */
 const USER_LIST_PROVIDER = new InjectionToken('USER_LIST_PROVIDER');
 
-const DEFAULT_PAGE_SIZE$2 = 20;
+const DEFAULT_PAGE_SIZE$1 = 20;
 /**
- * User Select Component - Single user selection with lazy loading.
- *
- * Uses USER_PROVIDER internally by default, or accepts custom `loadUsers` function.
- *
- * Features:
- * - Search with debouncing (handled by lazy-select)
- * - Infinite scroll pagination
- * - Filter active users by default (configurable)
- * - Supports additional filters via `additionalFilters` input
- *
- * @example
- * ```html
- * <!-- Simple usage - uses USER_PROVIDER internally -->
- * <lib-user-select
- *   [(value)]="selectedUserId"
- *   [isEditMode]="true"
- * />
+ * Base class for user selection components.
+ * Provides shared user loading, pagination, and search functionality.
  *
- * <!-- With custom loadUsers function -->
- * <lib-user-select
- *   [(value)]="selectedUserId"
- *   [isEditMode]="true"
- *   [loadUsers]="customLoadUsers"
- * />
- * ```
+ * Subclasses must implement:
+ * - `setupValueEffect()` to track value changes and emit selection events
  */
-class UserSelectComponent {
+class BaseUserSelectComponent {
     destroyRef = inject(DestroyRef);
+    injector = inject(Injector);
     userProvider = inject(USER_PROVIDER);
     abortController = null;
-    // Optional: custom function to load users (uses USER_PROVIDER if not provided)
-    loadUsers = input(...(ngDevMode ? [undefined, { debugName: "loadUsers" }] : []));
     // Inputs
+    loadUsers = input(...(ngDevMode ? [undefined, { debugName: "loadUsers" }] : []));
     placeHolder = input('Select User', ...(ngDevMode ? [{ debugName: "placeHolder" }] : []));
     isEditMode = input.required(...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
     filterActive = input(true, ...(ngDevMode ? [{ debugName: "filterActive" }] : []));
     additionalFilters = input({}, ...(ngDevMode ? [{ debugName: "additionalFilters" }] : []));
-    pageSize = input(DEFAULT_PAGE_SIZE$2, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
-    // Two-way bound value
-    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    pageSize = input(DEFAULT_PAGE_SIZE$1, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
     // Outputs
-    userSelected = output();
     onError = output();
     // Internal state
     isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
     users = signal([], ...(ngDevMode ? [{ debugName: "users" }] : []));
     total = signal(undefined, ...(ngDevMode ? [{ debugName: "total" }] : []));
-    pagination = signal({ pageSize: DEFAULT_PAGE_SIZE$2, currentPage: 0 }, ...(ngDevMode ? [{ debugName: "pagination" }] : []));
+    pagination = signal({ pageSize: DEFAULT_PAGE_SIZE$1, currentPage: 0 }, ...(ngDevMode ? [{ debugName: "pagination" }] : []));
     searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
     // Computed dropdown data
     dropdownUsers = computed(() => this.users().map((user) => ({
@@ -1885,20 +1800,8 @@ class UserSelectComponent {
         afterNextRender(() => {
             this.fetchUsers();
         });
-        // Emit selected user when value changes
-        effect(() => {
-            const selectedId = this.value();
-            const users = this.users();
-            untracked(() => {
-                if (selectedId) {
-                    const user = users.find((u) => u.id === selectedId);
-                    this.userSelected.emit(user ?? null);
-                }
-                else {
-                    this.userSelected.emit(null);
-                }
-            });
-        });
+        // Setup value change tracking (implemented by subclass)
+        this.setupValueEffect();
     }
     handleSearch(search) {
         this.searchTerm.set(search);
@@ -1910,6 +1813,12 @@ class UserSelectComponent {
         this.pagination.set(pagination);
         this.fetchUsers(true);
     }
+    /** Reload users (useful when filters change externally) */
+    reload() {
+        this.pagination.update((p) => ({ ...p, currentPage: 0 }));
+        this.users.set([]);
+        this.fetchUsers();
+    }
     async fetchUsers(append = false) {
         if (this.isLoading())
             return;
@@ -1967,14 +1876,63 @@ class UserSelectComponent {
             })),
         })));
     }
-    /** Reload users (useful when filters change externally) */
-    reload() {
-        this.pagination.update((p) => ({ ...p, currentPage: 0 }));
-        this.users.set([]);
-        this.fetchUsers();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: BaseUserSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.3", type: BaseUserSelectComponent, isStandalone: true, inputs: { loadUsers: { classPropertyName: "loadUsers", publicName: "loadUsers", isSignal: true, isRequired: false, transformFunction: null }, placeHolder: { classPropertyName: "placeHolder", publicName: "placeHolder", isSignal: true, isRequired: false, transformFunction: null }, isEditMode: { classPropertyName: "isEditMode", publicName: "isEditMode", isSignal: true, isRequired: true, transformFunction: null }, filterActive: { classPropertyName: "filterActive", publicName: "filterActive", isSignal: true, isRequired: false, transformFunction: null }, additionalFilters: { classPropertyName: "additionalFilters", publicName: "additionalFilters", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onError: "onError" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: BaseUserSelectComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [], propDecorators: { loadUsers: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadUsers", required: false }] }], placeHolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeHolder", required: false }] }], isEditMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEditMode", required: true }] }], filterActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterActive", required: false }] }], additionalFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "additionalFilters", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], onError: [{ type: i0.Output, args: ["onError"] }] } });
+
+/**
+ * User Select Component - Single user selection with lazy loading.
+ *
+ * Uses USER_PROVIDER internally by default, or accepts custom `loadUsers` function.
+ *
+ * Features:
+ * - Search with debouncing (handled by lazy-select)
+ * - Infinite scroll pagination
+ * - Filter active users by default (configurable)
+ * - Supports additional filters via `additionalFilters` input
+ *
+ * @example
+ * ```html
+ * <!-- Simple usage - uses USER_PROVIDER internally -->
+ * <lib-user-select
+ *   [(value)]="selectedUserId"
+ *   [isEditMode]="true"
+ * />
+ *
+ * <!-- With custom loadUsers function -->
+ * <lib-user-select
+ *   [(value)]="selectedUserId"
+ *   [isEditMode]="true"
+ *   [loadUsers]="customLoadUsers"
+ * />
+ * ```
+ */
+class UserSelectComponent extends BaseUserSelectComponent {
+    // Two-way bound value
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    // Outputs
+    userSelected = output();
+    setupValueEffect() {
+        // Emit selected user when value changes
+        effect(() => {
+            const selectedId = this.value();
+            const users = this.users();
+            untracked(() => {
+                if (selectedId) {
+                    const user = users.find((u) => u.id === selectedId);
+                    this.userSelected.emit(user ?? null);
+                }
+                else {
+                    this.userSelected.emit(null);
+                }
+            });
+        });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UserSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.3", type: UserSelectComponent, isStandalone: true, selector: "lib-user-select", inputs: { loadUsers: { classPropertyName: "loadUsers", publicName: "loadUsers", isSignal: true, isRequired: false, transformFunction: null }, placeHolder: { classPropertyName: "placeHolder", publicName: "placeHolder", isSignal: true, isRequired: false, transformFunction: null }, isEditMode: { classPropertyName: "isEditMode", publicName: "isEditMode", isSignal: true, isRequired: true, transformFunction: null }, filterActive: { classPropertyName: "filterActive", publicName: "filterActive", isSignal: true, isRequired: false, transformFunction: null }, additionalFilters: { classPropertyName: "additionalFilters", publicName: "additionalFilters", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", userSelected: "userSelected", onError: "onError" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UserSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.3", type: UserSelectComponent, isStandalone: true, selector: "lib-user-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", userSelected: "userSelected" }, usesInheritance: true, ngImport: i0, template: `
     <lib-lazy-select
       [(value)]="value"
       [placeHolder]="placeHolder()"
@@ -1994,7 +1952,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             type: Component,
             args: [{
                     selector: 'lib-user-select',
-                    standalone: true,
                     imports: [AngularModule, PrimeModule, LazySelectComponent],
                     template: `
     <lib-lazy-select
@@ -2013,9 +1970,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: () => [], propDecorators: { loadUsers: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadUsers", required: false }] }], placeHolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeHolder", required: false }] }], isEditMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEditMode", required: true }] }], filterActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterActive", required: false }] }], additionalFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "additionalFilters", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], userSelected: [{ type: i0.Output, args: ["userSelected"] }], onError: [{ type: i0.Output, args: ["onError"] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], userSelected: [{ type: i0.Output, args: ["userSelected"] }] } });
 
-const DEFAULT_PAGE_SIZE$1 = 20;
 /**
  * User Multi-Select Component - Multiple user selection with lazy loading.
  *
@@ -2044,50 +2000,12 @@ const DEFAULT_PAGE_SIZE$1 = 20;
  * />
  * ```
  */
-class UserMultiSelectComponent {
-    destroyRef = inject(DestroyRef);
-    userProvider = inject(USER_PROVIDER);
-    abortController = null;
-    // Optional: custom function to load users (uses USER_PROVIDER if not provided)
-    loadUsers = input(...(ngDevMode ? [undefined, { debugName: "loadUsers" }] : []));
-    // Inputs
-    placeHolder = input('Select Users', ...(ngDevMode ? [{ debugName: "placeHolder" }] : []));
-    isEditMode = input.required(...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
-    filterActive = input(true, ...(ngDevMode ? [{ debugName: "filterActive" }] : []));
-    additionalFilters = input({}, ...(ngDevMode ? [{ debugName: "additionalFilters" }] : []));
-    pageSize = input(DEFAULT_PAGE_SIZE$1, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+class UserMultiSelectComponent extends BaseUserSelectComponent {
     // Two-way bound value
     value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
     // Outputs
     usersSelected = output();
-    onError = output();
-    // Internal state
-    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
-    users = signal([], ...(ngDevMode ? [{ debugName: "users" }] : []));
-    total = signal(undefined, ...(ngDevMode ? [{ debugName: "total" }] : []));
-    pagination = signal({ pageSize: DEFAULT_PAGE_SIZE$1, currentPage: 0 }, ...(ngDevMode ? [{ debugName: "pagination" }] : []));
-    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
-    // Computed dropdown data
-    dropdownUsers = computed(() => this.users().map((user) => ({
-        label: user.name || user.email,
-        value: user.id,
-    })), ...(ngDevMode ? [{ debugName: "dropdownUsers" }] : []));
-    constructor() {
-        // Cleanup on destroy
-        this.destroyRef.onDestroy(() => {
-            this.abortController?.abort();
-        });
-        // Update page size from input
-        effect(() => {
-            const size = this.pageSize();
-            untracked(() => {
-                this.pagination.update((p) => ({ ...p, pageSize: size }));
-            });
-        });
-        // Load initial users after render
-        afterNextRender(() => {
-            this.fetchUsers();
-        });
+    setupValueEffect() {
         // Emit selected users when value changes
         effect(() => {
             const selectedIds = this.value() ?? [];
@@ -2098,81 +2016,8 @@ class UserMultiSelectComponent {
             });
         });
     }
-    handleSearch(search) {
-        this.searchTerm.set(search);
-        this.pagination.update((p) => ({ ...p, currentPage: 0 }));
-        this.users.set([]);
-        this.fetchUsers();
-    }
-    handlePagination(pagination) {
-        this.pagination.set(pagination);
-        this.fetchUsers(true);
-    }
-    async fetchUsers(append = false) {
-        if (this.isLoading())
-            return;
-        // Cancel previous request
-        this.abortController?.abort();
-        this.abortController = new AbortController();
-        this.isLoading.set(true);
-        try {
-            const pag = this.pagination();
-            const filter = {
-                page: pag.currentPage,
-                pageSize: pag.pageSize,
-                search: this.searchTerm(),
-                ...this.additionalFilters(),
-            };
-            // Use custom loadUsers if provided, otherwise use USER_PROVIDER
-            const customLoadUsers = this.loadUsers();
-            const response = await firstValueFrom(customLoadUsers
-                ? customLoadUsers(filter)
-                : this.loadUsersFromProvider(filter));
-            if (response.success && response.data) {
-                if (append) {
-                    this.users.update((current) => [...current, ...response.data]);
-                }
-                else {
-                    this.users.set(response.data);
-                }
-                this.total.set(response.meta?.total);
-            }
-        }
-        catch (error) {
-            if (error.name !== 'AbortError') {
-                this.onError.emit(error);
-            }
-        }
-        finally {
-            this.isLoading.set(false);
-        }
-    }
-    /** Load users from USER_PROVIDER with active filter */
-    loadUsersFromProvider(filter) {
-        return this.userProvider
-            .getUsers({
-            page: filter.page,
-            pageSize: filter.pageSize,
-            search: filter.search,
-            isActive: this.filterActive() ? true : undefined,
-        })
-            .pipe(map$1((res) => ({
-            ...res,
-            data: res.data?.map((u) => ({
-                id: u.id,
-                name: u.name,
-                email: u.email,
-            })),
-        })));
-    }
-    /** Reload users (useful when filters change externally) */
-    reload() {
-        this.pagination.update((p) => ({ ...p, currentPage: 0 }));
-        this.users.set([]);
-        this.fetchUsers();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UserMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.3", type: UserMultiSelectComponent, isStandalone: true, selector: "lib-user-multi-select", inputs: { loadUsers: { classPropertyName: "loadUsers", publicName: "loadUsers", isSignal: true, isRequired: false, transformFunction: null }, placeHolder: { classPropertyName: "placeHolder", publicName: "placeHolder", isSignal: true, isRequired: false, transformFunction: null }, isEditMode: { classPropertyName: "isEditMode", publicName: "isEditMode", isSignal: true, isRequired: true, transformFunction: null }, filterActive: { classPropertyName: "filterActive", publicName: "filterActive", isSignal: true, isRequired: false, transformFunction: null }, additionalFilters: { classPropertyName: "additionalFilters", publicName: "additionalFilters", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", usersSelected: "usersSelected", onError: "onError" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: UserMultiSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.3", type: UserMultiSelectComponent, isStandalone: true, selector: "lib-user-multi-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", usersSelected: "usersSelected" }, usesInheritance: true, ngImport: i0, template: `
     <lib-lazy-multi-select
       [(value)]="value"
       [placeHolder]="placeHolder()"
@@ -2190,7 +2035,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
             type: Component,
             args: [{
                     selector: 'lib-user-multi-select',
-                    standalone: true,
                     imports: [AngularModule, PrimeModule, LazyMultiSelectComponent],
                     template: `
     <lib-lazy-multi-select
@@ -2207,7 +2051,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: () => [], propDecorators: { loadUsers: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadUsers", required: false }] }], placeHolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeHolder", required: false }] }], isEditMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEditMode", required: true }] }], filterActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterActive", required: false }] }], additionalFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "additionalFilters", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], usersSelected: [{ type: i0.Output, args: ["usersSelected"] }], onError: [{ type: i0.Output, args: ["onError"] }] } });
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], usersSelected: [{ type: i0.Output, args: ["usersSelected"] }] } });
 
 /**
  * File Uploader Component - Drag & drop file upload with type filtering.
@@ -2454,11 +2298,11 @@ class FileUploaderComponent {
         </div>
       }
     </div>
-  `, isInline: true, styles: [".upload-zone{border-color:var(--p-surface-300);background:var(--p-surface-50)}.upload-zone:hover:not(.cursor-not-allowed){border-color:var(--p-primary-color);background:var(--p-surface-100)}.upload-zone.drag-over{border-color:var(--p-primary-color);background:var(--p-primary-50)}:host-context(.p-dark) .upload-zone,.dark .upload-zone{border-color:var(--p-surface-600);background:var(--p-surface-800)}:host-context(.p-dark) .upload-zone:hover:not(.cursor-not-allowed),.dark .upload-zone:hover:not(.cursor-not-allowed){border-color:var(--p-primary-color);background:var(--p-surface-700)}:host-context(.p-dark) .upload-zone.drag-over,.dark .upload-zone.drag-over{border-color:var(--p-primary-color);background:var(--p-primary-900)}.file-preview-item{border:1px solid var(--p-surface-200);background:var(--p-surface-0)}:host-context(.p-dark) .file-preview-item,.dark .file-preview-item{border-color:var(--p-surface-600);background:var(--p-surface-800)}\n"], dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: 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 });
+  `, isInline: true, styles: [".upload-zone{border-color:var(--p-surface-300);background:var(--p-surface-50)}.upload-zone:hover:not(.cursor-not-allowed){border-color:var(--p-primary-color);background:var(--p-surface-100)}.upload-zone.drag-over{border-color:var(--p-primary-color);background:var(--p-primary-50)}:host-context(.p-dark) .upload-zone,.dark .upload-zone{border-color:var(--p-surface-600);background:var(--p-surface-800)}:host-context(.p-dark) .upload-zone:hover:not(.cursor-not-allowed),.dark .upload-zone:hover:not(.cursor-not-allowed){border-color:var(--p-primary-color);background:var(--p-surface-700)}:host-context(.p-dark) .upload-zone.drag-over,.dark .upload-zone.drag-over{border-color:var(--p-primary-color);background:var(--p-primary-900)}.file-preview-item{border:1px solid var(--p-surface-200);background:var(--p-surface-0)}:host-context(.p-dark) .file-preview-item,.dark .file-preview-item{border-color:var(--p-surface-600);background:var(--p-surface-800)}\n"], dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "ngmodule", type: PrimeModule }, { kind: "component", type: i1$2.Button, selector: "p-button", inputs: ["hostName", "type", "badge", "disabled", "raised", "rounded", "text", "plain", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "iconPos", "icon", "label", "loading", "loadingIcon", "severity", "buttonProps", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i2$1.ProgressBar, selector: "p-progressBar, p-progressbar, p-progress-bar", inputs: ["value", "showValue", "styleClass", "valueStyleClass", "unit", "mode", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FileUploaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-file-uploader', standalone: true, imports: [AngularModule, PrimeModule], template: `
+            args: [{ selector: 'lib-file-uploader', imports: [AngularModule, PrimeModule], template: `
     <div
       class="w-full"
       [class.opacity-60]="disabled()"
@@ -2649,16 +2493,14 @@ class FileSelectorDialogComponent {
         }, 500);
     }
     onScroll(event) {
-        const el = event.target;
-        const nearBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 50;
-        if (nearBottom && !this.isLoading()) {
-            const pag = this.pagination();
-            const nextPage = pag.currentPage + 1;
-            const hasMore = nextPage * pag.pageSize < (this.total() ?? 0);
-            if (hasMore) {
-                this.pagination.update((p) => ({ ...p, currentPage: nextPage }));
-                this.fetchFiles(true);
-            }
+        const nextPagination = checkScrollPagination(event, {
+            pagination: this.pagination(),
+            total: this.total(),
+            isLoading: this.isLoading(),
+        });
+        if (nextPagination) {
+            this.pagination.set(nextPagination);
+            this.fetchFiles(true);
         }
     }
     toggleSelection(file) {
@@ -2868,11 +2710,11 @@ class FileSelectorDialogComponent {
         </div>
       </ng-template>
     </p-dialog>
-  `, isInline: true, styles: [".file-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;max-height:300px;overflow-y:auto;padding:.5rem}@media(min-width:480px){.file-grid{grid-template-columns:repeat(3,1fr);max-height:350px}}@media(min-width:640px){.file-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem;max-height:400px}}.file-card{border:2px solid var(--p-surface-300);border-radius:var(--p-border-radius);cursor:pointer;transition:all .2s ease;overflow:hidden;background:var(--p-surface-0)}:host-context(.p-dark) .file-card,.dark .file-card{border-color:var(--p-surface-600);background:var(--p-surface-800)}.file-card:hover:not(.disabled){border-color:var(--p-primary-color);transform:translateY(-2px);box-shadow:var(--p-overlay-shadow)}.file-card.selected{border-color:var(--p-primary-color);background:var(--p-primary-50)}:host-context(.p-dark) .file-card.selected,.dark .file-card.selected{background:var(--p-primary-900)}.file-card.disabled{opacity:.5;cursor:not-allowed}.file-preview{position:relative;height:80px;display:flex;align-items:center;justify-content:center;background:var(--p-surface-100)}@media(min-width:640px){.file-preview{height:100px}}:host-context(.p-dark) .file-preview,.dark .file-preview{background:var(--p-surface-700)}.selected-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--p-primary-500-rgb, 59, 130, 246),.3)}.selected-overlay i{color:var(--p-primary-color);background:var(--p-surface-0);border-radius:50%;padding:.5rem}:host-context(.p-dark) .selected-overlay i,.dark .selected-overlay i{background:var(--p-surface-900)}\n"], dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: 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 });
+  `, isInline: true, styles: [".file-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;max-height:300px;overflow-y:auto;padding:.5rem}@media(min-width:480px){.file-grid{grid-template-columns:repeat(3,1fr);max-height:350px}}@media(min-width:640px){.file-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem;max-height:400px}}.file-card{border:2px solid var(--p-surface-300);border-radius:var(--p-border-radius);cursor:pointer;transition:all .2s ease;overflow:hidden;background:var(--p-surface-0)}:host-context(.p-dark) .file-card,.dark .file-card{border-color:var(--p-surface-600);background:var(--p-surface-800)}.file-card:hover:not(.disabled){border-color:var(--p-primary-color);transform:translateY(-2px);box-shadow:var(--p-overlay-shadow)}.file-card.selected{border-color:var(--p-primary-color);background:var(--p-primary-50)}:host-context(.p-dark) .file-card.selected,.dark .file-card.selected{background:var(--p-primary-900)}.file-card.disabled{opacity:.5;cursor:not-allowed}.file-preview{position:relative;height:80px;display:flex;align-items:center;justify-content:center;background:var(--p-surface-100)}@media(min-width:640px){.file-preview{height:100px}}:host-context(.p-dark) .file-preview,.dark .file-preview{background:var(--p-surface-700)}.selected-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--p-primary-500-rgb, 59, 130, 246),.3)}.selected-overlay i{color:var(--p-primary-color);background:var(--p-surface-0);border-radius:50%;padding:.5rem}:host-context(.p-dark) .selected-overlay i,.dark .selected-overlay i{background:var(--p-surface-900)}\n"], dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IsEmptyImageDirective, selector: "img", inputs: ["src"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i1$2.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: i4.Dialog, selector: "p-dialog", inputs: ["hostName", "header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "maskMotionOptions", "motionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: i2.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: FileSelectorDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-file-selector-dialog', standalone: true, imports: [AngularModule, PrimeModule], template: `
+            args: [{ selector: 'lib-file-selector-dialog', imports: [AngularModule, PrimeModule], template: `
     <p-dialog
       [header]="header()"
       [(visible)]="visible"
@@ -2982,129 +2824,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
   `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".file-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;max-height:300px;overflow-y:auto;padding:.5rem}@media(min-width:480px){.file-grid{grid-template-columns:repeat(3,1fr);max-height:350px}}@media(min-width:640px){.file-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem;max-height:400px}}.file-card{border:2px solid var(--p-surface-300);border-radius:var(--p-border-radius);cursor:pointer;transition:all .2s ease;overflow:hidden;background:var(--p-surface-0)}:host-context(.p-dark) .file-card,.dark .file-card{border-color:var(--p-surface-600);background:var(--p-surface-800)}.file-card:hover:not(.disabled){border-color:var(--p-primary-color);transform:translateY(-2px);box-shadow:var(--p-overlay-shadow)}.file-card.selected{border-color:var(--p-primary-color);background:var(--p-primary-50)}:host-context(.p-dark) .file-card.selected,.dark .file-card.selected{background:var(--p-primary-900)}.file-card.disabled{opacity:.5;cursor:not-allowed}.file-preview{position:relative;height:80px;display:flex;align-items:center;justify-content:center;background:var(--p-surface-100)}@media(min-width:640px){.file-preview{height:100px}}:host-context(.p-dark) .file-preview,.dark .file-preview{background:var(--p-surface-700)}.selected-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--p-primary-500-rgb, 59, 130, 246),.3)}.selected-overlay i{color:var(--p-primary-color);background:var(--p-surface-0);border-radius:50%;padding:.5rem}:host-context(.p-dark) .selected-overlay i,.dark .selected-overlay i{background:var(--p-surface-900)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { loadFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadFiles", required: true }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], acceptTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "acceptTypes", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], maxSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxSelection", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], fileSelected: [{ type: i0.Output, args: ["fileSelected"] }], filesSelected: [{ type: i0.Output, args: ["filesSelected"] }], closed: [{ type: i0.Output, args: ["closed"] }], onError: [{ type: i0.Output, args: ["onError"] }] } });
 
-/** Log only in dev mode */
-const devLog = (message) => {
-    if (isDevMode())
-        console.log(message);
-};
-/**
- * Permission Guard
- *
- * Route-level guard for permission-based access control.
- * Validates permissions before allowing navigation.
- *
- * Features:
- * - Single permission check
- * - Complex ILogicNode logic trees
- * - Configurable redirect URL
- * - Debug logging for denied access
- *
- * @example
- * ```typescript
- * // Simple permission check
- * { path: 'users', canActivate: [permissionGuard('user.view')] }
- *
- * // Complex logic
- * { path: 'admin', canActivate: [permissionGuard({
- *   id: 'root',
- *   type: 'group',
- *   operator: 'AND',
- *   children: [
- *     { id: '1', type: 'action', actionId: 'admin.view' },
- *     { id: '2', type: 'action', actionId: 'admin.manage' }
- *   ]
- * })] }
- *
- * // With custom redirect
- * { path: 'users', canActivate: [permissionGuard('user.view', '/access-denied')] }
- * ```
- */
-function permissionGuard(permission, redirectTo = '/') {
+function createGuard(guardName, redirectTo, evaluate, getDenialMessage) {
     return () => {
         const permissionValidator = inject(PermissionValidatorService);
         const router = inject(Router);
-        // Check if permissions are loaded
         if (!permissionValidator.isPermissionsLoaded()) {
-            devLog('[permissionGuard] Permissions not loaded, denying access to route');
+            if (isDevMode()) {
+                console.log(`[${guardName}] Permissions not loaded, denying access`);
+            }
             return router.createUrlTree([redirectTo]);
         }
-        const userPermissions = permissionValidator.permissions();
-        const hasPermission = evaluatePermission(permission, userPermissions);
-        if (!hasPermission) {
-            const permissionCode = typeof permission === 'string' ? permission : 'complex-logic';
-            devLog(`[permissionGuard] Access denied - missing permission: ${permissionCode}`);
+        if (!evaluate(permissionValidator.permissions())) {
+            if (isDevMode()) {
+                console.log(`[${guardName}] ${getDenialMessage()}`);
+            }
             return router.createUrlTree([redirectTo]);
         }
         return true;
     };
 }
 /**
- * Any Permission Guard (OR logic)
+ * Permission Guard - Single permission or ILogicNode check.
  *
- * Allows access if user has ANY of the specified permissions.
+ * @example
+ * ```typescript
+ * { path: 'users', canActivate: [permissionGuard('user.view')] }
+ * { path: 'admin', canActivate: [permissionGuard(logicNode, '/access-denied')] }
+ * ```
+ */
+function permissionGuard(permission, redirectTo = '/') {
+    const code = typeof permission === 'string' ? permission : 'complex-logic';
+    return createGuard('permissionGuard', redirectTo, (perms) => evaluatePermission(permission, perms), () => `Access denied - missing: ${code}`);
+}
+/**
+ * Any Permission Guard (OR logic) - Access if user has ANY permission.
  *
  * @example
  * ```typescript
- * // Allow if user has view OR create permission
  * { path: 'users', canActivate: [anyPermissionGuard(['user.view', 'user.create'])] }
  * ```
  */
 function anyPermissionGuard(permissions, redirectTo = '/') {
-    return () => {
-        const permissionValidator = inject(PermissionValidatorService);
-        const router = inject(Router);
-        // Validate permissions array
-        if (!permissions || permissions.length === 0) {
-            devLog('[anyPermissionGuard] Empty permissions array provided, denying access');
-            return router.createUrlTree([redirectTo]);
-        }
-        // Check if permissions are loaded
-        if (!permissionValidator.isPermissionsLoaded()) {
-            devLog('[anyPermissionGuard] Permissions not loaded, denying access to route');
-            return router.createUrlTree([redirectTo]);
-        }
-        const userPermissions = permissionValidator.permissions();
-        const hasPermission = hasAnyPermission(permissions, userPermissions);
-        if (!hasPermission) {
-            devLog(`[anyPermissionGuard] Access denied - missing any of: ${permissions.join(', ')}`);
-            return router.createUrlTree([redirectTo]);
-        }
-        return true;
-    };
+    if (!permissions?.length) {
+        return () => {
+            if (isDevMode()) {
+                console.log('[anyPermissionGuard] Empty permissions array, denying');
+            }
+            return inject(Router).createUrlTree([redirectTo]);
+        };
+    }
+    return createGuard('anyPermissionGuard', redirectTo, (perms) => hasAnyPermission(permissions, perms), () => `Access denied - missing any of: ${permissions.join(', ')}`);
 }
 /**
- * All Permissions Guard (AND logic)
- *
- * Allows access only if user has ALL of the specified permissions.
+ * All Permissions Guard (AND logic) - Access only if user has ALL permissions.
  *
  * @example
  * ```typescript
- * // Allow only if user has BOTH view AND create permissions
  * { path: 'admin', canActivate: [allPermissionsGuard(['admin.view', 'admin.manage'])] }
  * ```
  */
 function allPermissionsGuard(permissions, redirectTo = '/') {
-    return () => {
-        const permissionValidator = inject(PermissionValidatorService);
-        const router = inject(Router);
-        // Validate permissions array
-        if (!permissions || permissions.length === 0) {
-            devLog('[allPermissionsGuard] Empty permissions array provided, denying access');
-            return router.createUrlTree([redirectTo]);
-        }
-        // Check if permissions are loaded
-        if (!permissionValidator.isPermissionsLoaded()) {
-            devLog('[allPermissionsGuard] Permissions not loaded, denying access to route');
-            return router.createUrlTree([redirectTo]);
-        }
-        const userPermissions = permissionValidator.permissions();
-        const hasPermission = hasAllPermissions(permissions, userPermissions);
-        if (!hasPermission) {
-            devLog(`[allPermissionsGuard] Access denied - missing all of: ${permissions.join(', ')}`);
-            return router.createUrlTree([redirectTo]);
-        }
-        return true;
-    };
+    if (!permissions?.length) {
+        return () => {
+            if (isDevMode()) {
+                console.log('[allPermissionsGuard] Empty permissions array, denying');
+            }
+            return inject(Router).createUrlTree([redirectTo]);
+        };
+    }
+    return createGuard('allPermissionsGuard', redirectTo, (perms) => hasAllPermissions(permissions, perms), () => `Access denied - missing all of: ${permissions.join(', ')}`);
 }
 
 /**
@@ -3464,5 +3252,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-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 };
+export { ACTION_PERMISSIONS, AUTH_STATE_PROVIDER, AngularModule, ApiResourceService, ApiResourceService as ApiService, BRANCH_PERMISSIONS, BaseFormControl, BaseFormPage, BaseListPage, BaseUserSelectComponent, COMPANY_ACTION_PERMISSIONS, COMPANY_API_PROVIDER, COMPANY_PERMISSIONS, ContactTypeEnum, CookieService, EMAIL_CONFIG_PERMISSIONS, EMAIL_TEMPLATE_PERMISSIONS, EditModeElementChangerDirective, FILE_PERMISSIONS, FILE_TYPE_FILTERS, FOLDER_PERMISSIONS, FORM_PERMISSIONS, FileSelectorDialogComponent, FileUploaderComponent, FileUrlService, HasPermissionDirective, IconComponent, IconTypeEnum, IsEmptyImageDirective, LazyMultiSelectComponent, LazySelectComponent, PERMISSIONS, PROFILE_PERMISSION_PROVIDER, PROFILE_UPLOAD_PROVIDER, PermissionValidatorService, PlatformService, PreventDefaultDirective, PrimeModule, ROLE_ACTION_PERMISSIONS, ROLE_PERMISSIONS, STORAGE_CONFIG_PERMISSIONS, USER_ACTION_PERMISSIONS, USER_LIST_PROVIDER, USER_PERMISSIONS, USER_PERMISSION_PROVIDER, USER_PROVIDER, USER_ROLE_PERMISSIONS, UserMultiSelectComponent, UserSelectComponent, allPermissionsGuard, anyPermissionGuard, checkScrollPagination, evaluateLogicNode, evaluatePermission, formatFileSize, getAcceptString, getFileIconClass, hasAllPermissions, hasAnyPermission, hasPermission, isFileTypeAllowed, permissionGuard, provideValueAccessor };
 //# sourceMappingURL=flusys-ng-shared.mjs.map