@flusys/ng-shared 0.1.0-alpha.1

package/fesm2022/flusys-ng-shared.mjs

@@ -0,0 +1,1543 @@
+import * as i0 from '@angular/core';
+import { inject, PLATFORM_ID, Injectable, DOCUMENT, REQUEST, signal, computed, ElementRef, input, effect, Directive, TemplateRef, ViewContainerRef, output, HostListener, NgModule, resource, Component, Injector, model, runInInjectionContext, untracked, forwardRef, viewChild, ChangeDetectionStrategy, InjectionToken } from '@angular/core';
+import * as i1 from '@angular/common';
+import { isPlatformServer, CommonModule, NgOptimizedImage, NgComponentOutlet, DatePipe } from '@angular/common';
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { APP_CONFIG, getServiceUrl, ApiLoaderService } from '@flusys/ng-core';
+import { of, firstValueFrom, skip, debounceTime, distinctUntilChanged, tap as tap$1 } from 'rxjs';
+import { tap, catchError, map } from 'rxjs/operators';
+import * as i4 from '@angular/forms';
+import { NgControl, ReactiveFormsModule, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { RouterOutlet, RouterLink, Router } from '@angular/router';
+import { AutoCompleteModule } from 'primeng/autocomplete';
+import { ButtonModule } from 'primeng/button';
+import { CardModule } from 'primeng/card';
+import * as i2 from 'primeng/checkbox';
+import { CheckboxModule } from 'primeng/checkbox';
+import { DatePickerModule } from 'primeng/datepicker';
+import { DialogModule } from 'primeng/dialog';
+import { DividerModule } from 'primeng/divider';
+import { FileUploadModule } from 'primeng/fileupload';
+import { IconFieldModule } from 'primeng/iconfield';
+import { ImageModule } from 'primeng/image';
+import { InputIconModule } from 'primeng/inputicon';
+import { InputNumberModule } from 'primeng/inputnumber';
+import * as i1$1 from 'primeng/inputtext';
+import { InputTextModule } from 'primeng/inputtext';
+import { ListboxModule } from 'primeng/listbox';
+import { MultiSelectModule } from 'primeng/multiselect';
+import { PaginatorModule } from 'primeng/paginator';
+import { PanelModule } from 'primeng/panel';
+import { PasswordModule } from 'primeng/password';
+import { PopoverModule } from 'primeng/popover';
+import { ProgressBarModule } from 'primeng/progressbar';
+import { RadioButtonModule } from 'primeng/radiobutton';
+import { RippleModule } from 'primeng/ripple';
+import * as i3 from 'primeng/select';
+import { SelectModule } from 'primeng/select';
+import { SelectButtonModule } from 'primeng/selectbutton';
+import { SplitButtonModule } from 'primeng/splitbutton';
+import { StepsModule } from 'primeng/steps';
+import { TableModule } from 'primeng/table';
+import { TabsModule } from 'primeng/tabs';
+import { TagModule } from 'primeng/tag';
+import { TextareaModule } from 'primeng/textarea';
+import { ToggleSwitchModule } from 'primeng/toggleswitch';
+import { TooltipModule } from 'primeng/tooltip';
+import { TreeTableModule } from 'primeng/treetable';
+import { toSignal, toObservable } from '@angular/core/rxjs-interop';
+
+;
+;
+
+var ContactTypeEnum;
+(function (ContactTypeEnum) {
+    ContactTypeEnum[ContactTypeEnum["PHONE"] = 1] = "PHONE";
+    ContactTypeEnum[ContactTypeEnum["EMAIL"] = 2] = "EMAIL";
+})(ContactTypeEnum || (ContactTypeEnum = {}));
+
+var IconTypeEnum;
+(function (IconTypeEnum) {
+    IconTypeEnum[IconTypeEnum["PRIMENG_ICON"] = 1] = "PRIMENG_ICON";
+    IconTypeEnum[IconTypeEnum["IMAGE_FILE_LINK"] = 2] = "IMAGE_FILE_LINK";
+    IconTypeEnum[IconTypeEnum["DIRECT_TAG_SVG"] = 3] = "DIRECT_TAG_SVG";
+})(IconTypeEnum || (IconTypeEnum = {}));
+
+class PlatformService {
+    platformId = inject(PLATFORM_ID);
+    get isServer() {
+        return isPlatformServer(this.platformId);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PlatformService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PlatformService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PlatformService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class CookieService {
+    doc = inject(DOCUMENT, { optional: true });
+    platformService = inject(PlatformService);
+    request = inject(REQUEST, { optional: true });
+    get() {
+        return !this.platformService.isServer ? this.doc.cookie : this.request?.headers.get('cookie') ?? "";
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CookieService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CookieService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: CookieService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * 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)
+ */
+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)
+     */
+    getFileUrl(fileId) {
+        if (!fileId)
+            return null;
+        return this.urlCache().get(fileId)?.url ?? null;
+    }
+    /**
+     * Get file URL signal (computed from cache)
+     */
+    fileUrlSignal(fileId) {
+        return computed(() => this.getFileUrl(fileId));
+    }
+    /**
+     * Fetch file URLs from backend and update cache.
+     * Returns Observable of fetched files.
+     */
+    fetchFileUrls(fileIds) {
+        if (!fileIds.length)
+            return of([]);
+        const requestDto = fileIds.map((id) => ({ id }));
+        return this.http.post(`${getServiceUrl(this.appConfig, 'storage')}/file-manager/get-files`, requestDto).pipe(tap((files) => {
+            // Update cache
+            const cache = new Map(this.urlCache());
+            files.forEach((file) => cache.set(file.id, file));
+            this.urlCache.set(cache);
+        }), catchError((error) => {
+            console.error('Failed to fetch file URLs:', error);
+            return of([]);
+        }));
+    }
+    /**
+     * Fetch a single file URL.
+     * Returns Observable of file info or null if not found.
+     */
+    fetchSingleFileUrl(fileId) {
+        return this.fetchFileUrls([fileId]).pipe(map((files) => files[0] ?? null));
+    }
+    /**
+     * Clear the URL cache.
+     * Useful on logout or when switching contexts.
+     */
+    clearCache() {
+        this.urlCache.set(new Map());
+    }
+    /**
+     * Remove specific file from cache.
+     */
+    removeFromCache(fileId) {
+        const cache = new Map(this.urlCache());
+        cache.delete(fileId);
+        this.urlCache.set(cache);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FileUrlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FileUrlService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: FileUrlService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Permission Validator Service
+ *
+ * Centralized service for permission validation across all packages.
+ * Provides signal-based state management and reactive permission checking.
+ *
+ * Features:
+ * - Signal-based permission storage
+ * - Individual permission checks
+ * - Permission change detection
+ * - Reactive permission state updates
+ *
+ * Usage:
+ * ```typescript
+ * // In component
+ * readonly permissionValidator = inject(PermissionValidatorService);
+ *
+ * // Set permissions (typically from auth/IAM)
+ * this.permissionValidator.setPermissions(['user.view', 'user.create']);
+ *
+ * // Check individual permission
+ * if (this.permissionValidator.hasPermission('user.view')) {
+ *   // Show UI element
+ * }
+ *
+ * // Access current permissions reactively
+ * const permissions = this.permissionValidator.permissions();
+ * ```
+ *
+ * @packageDocumentation
+ */
+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
+     */
+    setPermissions(permissions) {
+        this._permissions.set(permissions);
+        this._isLoaded.set(true);
+    }
+    /**
+     * 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);
+    }
+    // ==================== UTILITY METHODS ====================
+    /**
+     * Check if permissions are loaded
+     * @returns True if permissions have been loaded
+     */
+    isPermissionsLoaded() {
+        return this._isLoaded();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PermissionValidatorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PermissionValidatorService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PermissionValidatorService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class EditModeElementChangerDirective {
+    el = inject(ElementRef);
+    ngControl = inject(NgControl, { optional: true });
+    isEditMode = input.required(...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
+    constructor() {
+        effect(() => {
+            const editMode = this.isEditMode();
+            this.updateElement(editMode);
+            this.updateControl(editMode);
+        });
+    }
+    ngAfterViewInit() {
+        const editMode = this.isEditMode();
+        this.updateElement(editMode);
+        this.updateControl(editMode);
+    }
+    updateControl(editMode) {
+        if (!editMode)
+            this.ngControl?.control?.disable();
+        else
+            this.ngControl?.control?.enable();
+    }
+    updateElement(editMode) {
+        const inputElement = this.el.nativeElement;
+        if (inputElement instanceof HTMLInputElement) {
+            if (!editMode) {
+                inputElement.setAttribute('readonly', 'true');
+                inputElement?.classList.add('edit-mode-element-css');
+            }
+            else {
+                inputElement.removeAttribute('readonly');
+                inputElement?.classList.remove('edit-mode-element-css');
+            }
+        }
+        if (inputElement.tagName == 'P-SELECT') {
+            if (!editMode) {
+                inputElement.classList.add('edit-mode-element-css');
+                inputElement.classList.add('overflow-hidden');
+                inputElement.querySelector('.p-select-dropdown').style.display = 'none';
+                inputElement.querySelector('.p-select-label').classList.add('edit-mode-element-css');
+            }
+            else {
+                inputElement.classList.remove("edit-mode-element-css");
+                inputElement.querySelector('.p-select-dropdown').style.display = 'flex';
+                inputElement.querySelector('.p-select-label').classList.remove("edit-mode-element-css");
+                inputElement.classList.remove('overflow-hidden');
+            }
+        }
+        if (inputElement.tagName == 'P-CALENDAR') {
+            if (!editMode) {
+                inputElement.firstElementChild.children[0]?.classList.add('edit-mode-element-css');
+                inputElement.firstElementChild.children[0]?.classList.add('cursor-auto');
+                inputElement.firstElementChild.children[1]?.classList.add('hidden');
+            }
+            else {
+                inputElement.firstElementChild.children[0]?.classList.remove('edit-mode-element-css');
+                inputElement.firstElementChild.children[0]?.classList.remove('cursor-auto');
+                inputElement.firstElementChild.children[1]?.classList.remove('hidden');
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EditModeElementChangerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: EditModeElementChangerDirective, isStandalone: true, selector: "[appEditModeElementChanger]", inputs: { isEditMode: { classPropertyName: "isEditMode", publicName: "isEditMode", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EditModeElementChangerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appEditModeElementChanger]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { isEditMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEditMode", required: true }] }] } });
+
+/** Evaluate permission logic (string or ILogicNode) against user permissions */
+function evaluatePermission(logic, permissions) {
+    if (!logic)
+        return false;
+    if (typeof logic === 'string')
+        return permissions.includes(logic);
+    return evaluateLogicNode(logic, permissions);
+}
+/** Recursively evaluate an ILogicNode tree */
+function evaluateLogicNode(node, permissions) {
+    switch (node.type) {
+        case 'action':
+            return node.actionId ? permissions.includes(node.actionId) : false;
+        case 'group':
+            if (!node.children || node.children.length === 0)
+                return false;
+            return node.operator === 'AND'
+                ? node.children.every((child) => evaluateLogicNode(child, permissions))
+                : node.children.some((child) => evaluateLogicNode(child, permissions));
+        default:
+            return false;
+    }
+}
+/** Check if user has ANY of the specified permissions (OR logic) */
+function hasAnyPermission(permissionCodes, permissions) {
+    if (!permissionCodes?.length)
+        return false;
+    return permissionCodes.some((code) => permissions.includes(code));
+}
+/** Check if user has ALL of the specified permissions (AND logic) */
+function hasAllPermissions(permissionCodes, permissions) {
+    if (!permissionCodes?.length)
+        return false;
+    return permissionCodes.every((code) => permissions.includes(code));
+}
+
+/**
+ * HasPermission Directive
+ *
+ * Structural directive for permission-based rendering.
+ * Shows/hides elements based on permission logic evaluation.
+ *
+ * Supports:
+ * - Simple permission check (string)
+ * - Complex permission logic (ILogicNode with AND/OR operators)
+ *
+ * Usage:
+ * ```html
+ * <!-- Simple permission check -->
+ * <button *hasPermission="'user.create'">Create User</button>
+ *
+ * <!-- Complex permission logic -->
+ * <button *hasPermission="userManageLogic">Manage Users</button>
+ *
+ * <!-- Where userManageLogic is: -->
+ * <!-- (user.view OR user.create) AND department.manage -->
+ * ```
+ *
+ * The directive automatically reacts to permission changes through signals.
+ *
+ * @example
+ * // In component
+ * readonly userManageLogic: ILogicNode = {
+ *   id: 'root',
+ *   type: 'group',
+ *   operator: 'AND',
+ *   children: [
+ *     {
+ *       id: '1',
+ *       type: 'group',
+ *       operator: 'OR',
+ *       children: [
+ *         { id: '2', type: 'action', actionId: 'user.view' },
+ *         { id: '3', type: 'action', actionId: 'user.create' }
+ *       ]
+ *     },
+ *     { id: '4', type: 'action', actionId: 'department.manage' }
+ *   ]
+ * };
+ *
+ * // In template
+ * <div *hasPermission="userManageLogic">
+ *   User management content
+ * </div>
+ */
+class HasPermissionDirective {
+    // ==================== DEPENDENCIES ====================
+    templateRef = inject((TemplateRef));
+    viewContainer = inject(ViewContainerRef);
+    permissionValidator = inject(PermissionValidatorService);
+    // ==================== SIGNALS ====================
+    /**
+     * Permission logic input signal
+     * Accepts either:
+     * - string: Single permission code to check
+     * - ILogicNode: Complex permission logic tree
+     */
+    hasPermission = input(null, ...(ngDevMode ? [{ debugName: "hasPermission" }] : []));
+    /**
+     * View created state
+     */
+    viewCreated = false;
+    // ==================== CONSTRUCTOR ====================
+    constructor() {
+        // Effect to reactively update view when permissions or logic changes
+        effect(() => {
+            // Track permission changes
+            this.permissionValidator.permissions();
+            // Track logic changes
+            const logic = this.hasPermission();
+            // Evaluate and update view
+            this.updateView(logic);
+        });
+    }
+    // ==================== VIEW MANAGEMENT ====================
+    /**
+     * Update view based on permission evaluation
+     */
+    updateView(logic) {
+        // Fail closed: No logic = no access
+        if (!logic) {
+            this.clearView();
+            return;
+        }
+        // Fail closed: No permissions loaded = no access (unauthenticated state)
+        if (!this.permissionValidator.isPermissionsLoaded()) {
+            this.clearView();
+            return;
+        }
+        // Use shared evaluatePermission utility
+        const hasPermission = evaluatePermission(logic, this.permissionValidator.permissions());
+        if (hasPermission && !this.viewCreated) {
+            // Create view if not exists
+            this.viewContainer.createEmbeddedView(this.templateRef);
+            this.viewCreated = true;
+        }
+        else if (!hasPermission && this.viewCreated) {
+            this.clearView();
+        }
+    }
+    /**
+     * Clear the view container
+     */
+    clearView() {
+        if (this.viewCreated) {
+            this.viewContainer.clear();
+            this.viewCreated = false;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: HasPermissionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: HasPermissionDirective, isStandalone: true, selector: "[hasPermission]", inputs: { hasPermission: { classPropertyName: "hasPermission", publicName: "hasPermission", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: HasPermissionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hasPermission]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { hasPermission: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasPermission", required: false }] }] } });
+
+class IsEmptyImageDirective {
+    src = input('', ...(ngDevMode ? [{ debugName: "src" }] : []));
+    hasError = signal(false, ...(ngDevMode ? [{ debugName: "hasError" }] : []));
+    defaultImg = 'lib/assets/images/default/default-image.jpg';
+    imageSrc = computed(() => {
+        if (this.hasError()) {
+            return this.defaultImg;
+        }
+        const srcValue = this.src();
+        return srcValue ? srcValue : this.defaultImg;
+    }, ...(ngDevMode ? [{ debugName: "imageSrc" }] : []));
+    onError() {
+        this.hasError.set(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IsEmptyImageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: IsEmptyImageDirective, isStandalone: true, selector: "img", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "error": "onError()" }, properties: { "src": "imageSrc()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IsEmptyImageDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'img',
+                    host: {
+                        '[src]': 'imageSrc()',
+                        '(error)': 'onError()',
+                    },
+                    standalone: true,
+                }]
+        }], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }] } });
+
+class PreventDefaultDirective {
+    eventType = input('click', ...(ngDevMode ? [{ debugName: "eventType" }] : []));
+    preventKey = input(undefined, ...(ngDevMode ? [{ debugName: "preventKey" }] : []));
+    action = output();
+    onClick(event) {
+        if (this.eventType() === 'click') {
+            this.processEvent(event);
+        }
+    }
+    onKeydown(event) {
+        if (this.eventType() === 'keydown') {
+            if (!this.preventKey() || event.key === this.preventKey()) {
+                this.processEvent(event);
+            }
+        }
+    }
+    onKeyup(event) {
+        if (this.eventType() === 'keyup') {
+            if (!this.preventKey() || event.key === this.preventKey()) {
+                this.processEvent(event);
+            }
+        }
+    }
+    processEvent(event) {
+        event.preventDefault();
+        if (this.action)
+            this.action.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PreventDefaultDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: PreventDefaultDirective, isStandalone: true, selector: "[appPreventDefault]", inputs: { eventType: { classPropertyName: "eventType", publicName: "eventType", isSignal: true, isRequired: false, transformFunction: null }, preventKey: { classPropertyName: "preventKey", publicName: "preventKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeydown($event)", "keyup": "onKeyup($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PreventDefaultDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appPreventDefault]',
+                    standalone: true,
+                }]
+        }], propDecorators: { eventType: [{ type: i0.Input, args: [{ isSignal: true, alias: "eventType", required: false }] }], preventKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventKey", required: false }] }], action: [{ type: i0.Output, args: ["action"] }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], onKeyup: [{
+                type: HostListener,
+                args: ['keyup', ['$event']]
+            }] } });
+
+class AngularModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AngularModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: AngularModule, imports: [CommonModule,
+            RouterOutlet,
+            RouterLink,
+            IsEmptyImageDirective,
+            NgOptimizedImage,
+            NgComponentOutlet,
+            PreventDefaultDirective], exports: [CommonModule,
+            ReactiveFormsModule,
+            FormsModule,
+            RouterOutlet,
+            RouterLink,
+            IsEmptyImageDirective,
+            NgOptimizedImage,
+            NgComponentOutlet,
+            PreventDefaultDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AngularModule, providers: [
+            DatePipe,
+        ], imports: [CommonModule, CommonModule,
+            ReactiveFormsModule,
+            FormsModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: AngularModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        RouterOutlet,
+                        RouterLink,
+                        IsEmptyImageDirective,
+                        NgOptimizedImage,
+                        NgComponentOutlet,
+                        PreventDefaultDirective
+                    ],
+                    providers: [
+                        DatePipe,
+                    ],
+                    exports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FormsModule,
+                        RouterOutlet,
+                        RouterLink,
+                        IsEmptyImageDirective,
+                        NgOptimizedImage,
+                        NgComponentOutlet,
+                        PreventDefaultDirective
+                    ],
+                }]
+        }] });
+
+class PrimeModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PrimeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: PrimeModule, exports: [InputTextModule,
+            TagModule,
+            SelectButtonModule,
+            PasswordModule,
+            ButtonModule,
+            TooltipModule,
+            CheckboxModule,
+            StepsModule,
+            RippleModule,
+            PanelModule,
+            PaginatorModule,
+            TableModule,
+            InputNumberModule,
+            TextareaModule,
+            ProgressBarModule,
+            FileUploadModule,
+            CardModule,
+            SelectModule,
+            InputIconModule,
+            IconFieldModule,
+            PopoverModule,
+            ListboxModule,
+            RadioButtonModule,
+            ToggleSwitchModule,
+            ImageModule,
+            DatePickerModule,
+            SplitButtonModule,
+            DividerModule,
+            MultiSelectModule,
+            AutoCompleteModule,
+            TabsModule,
+            DialogModule,
+            TreeTableModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PrimeModule, imports: [InputTextModule,
+            TagModule,
+            SelectButtonModule,
+            PasswordModule,
+            ButtonModule,
+            TooltipModule,
+            CheckboxModule,
+            StepsModule,
+            RippleModule,
+            PanelModule,
+            PaginatorModule,
+            TableModule,
+            InputNumberModule,
+            TextareaModule,
+            ProgressBarModule,
+            FileUploadModule,
+            CardModule,
+            SelectModule,
+            InputIconModule,
+            IconFieldModule,
+            PopoverModule,
+            ListboxModule,
+            RadioButtonModule,
+            ToggleSwitchModule,
+            ImageModule,
+            DatePickerModule,
+            SplitButtonModule,
+            DividerModule,
+            MultiSelectModule,
+            AutoCompleteModule,
+            TabsModule,
+            DialogModule,
+            TreeTableModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PrimeModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [
+                        InputTextModule,
+                        TagModule,
+                        SelectButtonModule,
+                        PasswordModule,
+                        ButtonModule,
+                        TooltipModule,
+                        CheckboxModule,
+                        StepsModule,
+                        RippleModule,
+                        PanelModule,
+                        PaginatorModule,
+                        TableModule,
+                        InputNumberModule,
+                        TextareaModule,
+                        ProgressBarModule,
+                        FileUploadModule,
+                        CardModule,
+                        SelectModule,
+                        InputIconModule,
+                        IconFieldModule,
+                        PopoverModule,
+                        ListboxModule,
+                        RadioButtonModule,
+                        ToggleSwitchModule,
+                        ImageModule,
+                        DatePickerModule,
+                        SplitButtonModule,
+                        DividerModule,
+                        MultiSelectModule,
+                        AutoCompleteModule,
+                        TabsModule,
+                        DialogModule,
+                        TreeTableModule,
+                    ],
+                }]
+        }] });
+
+// =============================================================================
+// API Resource Service - Signal-based CRUD with Angular Resource API
+// =============================================================================
+/**
+ * Abstract base class for API services using Angular 21 resource() API.
+ * Provides signal-based reactive data fetching with automatic loading states.
+ * Response types match FLUSYS_NEST backend DTOs.
+ *
+ * ## Endpoint Mapping
+ *
+ * All endpoints use POST method (RPC-style API):
+ * - `POST /{resource}/insert`       - Create single item
+ * - `POST /{resource}/insert-many`  - Create multiple items
+ * - `POST /{resource}/get/:id`      - Get single item by ID
+ * - `POST /{resource}/get-all?q=`   - List with pagination/filter
+ * - `POST /{resource}/update`       - Update single item
+ * - `POST /{resource}/update-many`  - Update multiple items
+ * - `POST /{resource}/delete`       - Delete/restore/permanent delete
+ *
+ * @example
+ * ```typescript
+ * // Define service
+ * @Injectable({ providedIn: 'root' })
+ * export class UserService extends ApiResourceService<UserDto, User> {
+ *   constructor(http: HttpClient) {
+ *     super('users', http);
+ *   }
+ * }
+ *
+ * // In component - use signals
+ * userService = inject(UserService);
+ * users = this.userService.data;              // Signal<User[]>
+ * isLoading = this.userService.isLoading;     // Signal<boolean>
+ * total = this.userService.total;             // Signal<number>
+ *
+ * // Trigger fetch
+ * this.userService.fetchList('search', { pagination: { currentPage: 0, pageSize: 10 } });
+ *
+ * // CRUD operations
+ * await this.userService.insertAsync({ name: 'John', email: 'john@example.com' });
+ * await this.userService.updateAsync({ id: '123', name: 'John Updated' });
+ * await this.userService.deleteAsync({ id: '123', type: 'delete' });
+ * ```
+ */
+class ApiResourceService {
+    baseUrl;
+    loaderService = inject(ApiLoaderService);
+    http;
+    moduleApiName;
+    // ==========================================================================
+    // State Signals for List Queries
+    // ==========================================================================
+    /** Current search term */
+    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
+    /** Current filter and pagination state */
+    filterData = signal({
+        pagination: { currentPage: 0, pageSize: 10 },
+        filter: {},
+        select: [],
+        sort: {},
+    }, ...(ngDevMode ? [{ debugName: "filterData" }] : []));
+    /** Resource for list data - uses IListResponse matching backend */
+    listResource;
+    // ==========================================================================
+    // Computed State Accessors
+    // ==========================================================================
+    /** Whether data is currently loading */
+    isLoading = computed(() => this.listResource.isLoading(), ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    /** List data array */
+    data = computed(() => this.listResource.value()?.data ?? [], ...(ngDevMode ? [{ debugName: "data" }] : []));
+    /** Total count of items */
+    total = computed(() => this.listResource.value()?.meta?.total ?? 0, ...(ngDevMode ? [{ debugName: "total" }] : []));
+    /** Pagination metadata */
+    pageInfo = computed(() => this.listResource.value()?.meta, ...(ngDevMode ? [{ debugName: "pageInfo" }] : []));
+    /** Whether there are more pages */
+    hasMore = computed(() => {
+        const meta = this.listResource.value()?.meta;
+        if (!meta)
+            return false;
+        return meta.hasMore ?? (meta.page + 1) * meta.pageSize < meta.total;
+    }, ...(ngDevMode ? [{ debugName: "hasMore" }] : []));
+    constructor(moduleApiName, http) {
+        this.moduleApiName = moduleApiName;
+        this.baseUrl = inject(APP_CONFIG).apiBaseUrl + '/' + moduleApiName;
+        this.http = http;
+        // Create resource that reacts to search and filter changes
+        this.listResource = resource({ ...(ngDevMode ? { debugName: "listResource" } : {}), params: () => ({
+                search: this.searchTerm(),
+                filter: this.filterData(),
+            }),
+            loader: async ({ params }) => {
+                const { search, filter } = params;
+                return this.fetchAllAsync(search, filter);
+            } });
+    }
+    getHttpOptions(endpoint, params) {
+        return {
+            headers: new HttpHeaders({
+                'x-loader-tag': `${this.moduleApiName}/${endpoint}`,
+            }),
+            ...(params ? { params } : {}),
+        };
+    }
+    // ==========================================================================
+    // List Management Methods
+    // ==========================================================================
+    /**
+     * Fetch list data (triggers resource reload)
+     */
+    fetchList(search = '', filter) {
+        this.searchTerm.set(search);
+        if (filter) {
+            this.filterData.update((prev) => ({ ...prev, ...filter }));
+        }
+    }
+    /**
+     * Update pagination
+     */
+    setPagination(pagination) {
+        this.filterData.update((prev) => ({ ...prev, pagination }));
+    }
+    /**
+     * Go to next page
+     */
+    nextPage() {
+        this.filterData.update((prev) => ({
+            ...prev,
+            pagination: {
+                ...prev.pagination,
+                currentPage: (prev.pagination?.currentPage ?? 0) + 1,
+            },
+        }));
+    }
+    /**
+     * Reset to first page
+     */
+    resetPagination() {
+        this.filterData.update((prev) => ({
+            ...prev,
+            pagination: { currentPage: 0, pageSize: prev.pagination?.pageSize ?? 10 },
+        }));
+    }
+    /**
+     * Reload current data
+     */
+    reload() {
+        this.listResource.reload();
+    }
+    // ==========================================================================
+    // Observable-based API Methods (IApiService interface)
+    // ==========================================================================
+    /**
+     * Insert single item (Observable)
+     * POST /{resource}/insert
+     */
+    insert(dto) {
+        return this.http.post(`${this.baseUrl}/insert`, dto, this.getHttpOptions('insert'));
+    }
+    /**
+     * Insert multiple items (Observable)
+     * POST /{resource}/insert-many
+     */
+    insertMany(dtos) {
+        return this.http.post(`${this.baseUrl}/insert-many`, dtos, this.getHttpOptions('insert-many'));
+    }
+    /**
+     * Find single item by ID (Observable)
+     * POST /{resource}/get/:id
+     */
+    findById(id, select) {
+        return this.http.post(`${this.baseUrl}/get/${id}`, { select }, this.getHttpOptions(`get/${id}`));
+    }
+    /**
+     * Get all items with pagination (Observable)
+     * POST /{resource}/get-all?q=search
+     */
+    getAll(search, filter) {
+        let params = new HttpParams();
+        if (search) {
+            params = params.append('q', search);
+        }
+        return this.http.post(`${this.baseUrl}/get-all`, filter, this.getHttpOptions('get-all', params));
+    }
+    /**
+     * Update single item (Observable)
+     * POST /{resource}/update
+     */
+    update(dto) {
+        return this.http.post(`${this.baseUrl}/update`, dto, this.getHttpOptions('update'));
+    }
+    /**
+     * Update multiple items (Observable)
+     * POST /{resource}/update-many
+     */
+    updateMany(dtos) {
+        return this.http.post(`${this.baseUrl}/update-many`, dtos, this.getHttpOptions('update-many'));
+    }
+    /**
+     * Delete items (Observable)
+     * POST /{resource}/delete
+     * @param deleteDto - { id: string | string[], type: 'delete' | 'restore' | 'permanent' }
+     */
+    delete(deleteDto) {
+        return this.http.post(`${this.baseUrl}/delete`, deleteDto, this.getHttpOptions('delete'));
+    }
+    // ==========================================================================
+    // Promise-based API Methods (Async)
+    // ==========================================================================
+    /**
+     * Fetch paginated list (async)
+     */
+    async fetchAllAsync(search, filter) {
+        return firstValueFrom(this.getAll(search, filter));
+    }
+    /**
+     * Find single item by ID (async)
+     */
+    async findByIdAsync(id, select) {
+        return firstValueFrom(this.findById(id, select));
+    }
+    /**
+     * Insert single item (async)
+     */
+    async insertAsync(dto) {
+        return firstValueFrom(this.insert(dto));
+    }
+    /**
+     * Insert multiple items (async)
+     */
+    async insertManyAsync(dtos) {
+        return firstValueFrom(this.insertMany(dtos));
+    }
+    /**
+     * Update single item (async)
+     */
+    async updateAsync(dto) {
+        return firstValueFrom(this.update(dto));
+    }
+    /**
+     * Update multiple items (async)
+     */
+    async updateManyAsync(dtos) {
+        return firstValueFrom(this.updateMany(dtos));
+    }
+    /**
+     * Delete items (async)
+     */
+    async deleteAsync(deleteDto) {
+        return firstValueFrom(this.delete(deleteDto));
+    }
+}
+
+class IconComponent {
+    icon = input.required(...(ngDevMode ? [{ debugName: "icon" }] : []));
+    iconType = input(IconTypeEnum.PRIMENG_ICON, ...(ngDevMode ? [{ debugName: "iconType" }] : []));
+    IconTypeEnum = IconTypeEnum; // Needed for template reference
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: IconComponent, isStandalone: true, selector: "lib-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, iconType: { classPropertyName: "iconType", publicName: "iconType", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if(icon()){ @if(iconType()==IconTypeEnum.PRIMENG_ICON){
+    <i [ngClass]="icon()"></i>
+    }@else if(iconType()==IconTypeEnum.IMAGE_FILE_LINK){
+    <img [alt]="icon()" [src]="icon()" />
+    }@else if(iconType()==IconTypeEnum.DIRECT_TAG_SVG){
+    {{ icon() }}
+    }@else{ I } }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: IsEmptyImageDirective, selector: "img", inputs: ["src"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: IconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-icon',
+                    imports: [AngularModule],
+                    template: `
+    @if(icon()){ @if(iconType()==IconTypeEnum.PRIMENG_ICON){
+    <i [ngClass]="icon()"></i>
+    }@else if(iconType()==IconTypeEnum.IMAGE_FILE_LINK){
+    <img [alt]="icon()" [src]="icon()" />
+    }@else if(iconType()==IconTypeEnum.DIRECT_TAG_SVG){
+    {{ icon() }}
+    }@else{ I } }
+  `,
+                }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: true }] }], iconType: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconType", required: false }] }] } });
+
+/**
+ * Base class for form controls that support ALL Angular form patterns:
+ *
+ * 1. **Template-driven forms:** `[(value)]="mySignal"` or `[(ngModel)]="myValue"`
+ * 2. **Reactive forms:** `[formControl]="ctrl"` or `formControlName="field"`
+ * 3. **Signal forms (Angular 21+):** `[formField]="formTree.field"`
+ *
+ * Implements both `ControlValueAccessor` (reactive forms) and `FormValueControl` (signal forms).
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   providers: [provideValueAccessor(MySelectComponent)]
+ * })
+ * export class MySelectComponent extends BaseFormControl<string | null> {
+ *   override readonly value = model<string | null>(null);
+ *
+ *   constructor() {
+ *     super();
+ *     this.initializeFormControl();
+ *   }
+ * }
+ *
+ * // Usage:
+ * // Template-driven: <my-select [(value)]="selectedId" />
+ * // Reactive forms:  <my-select [formControl]="myControl" />
+ * // Signal forms:    <my-select [formField]="formTree.myField" />
+ * ```
+ */
+class BaseFormControl {
+    injector = inject(Injector);
+    /**
+     * Disabled state model - bound to form control disabled state.
+     * Using model() to satisfy FormValueControl interface requirements.
+     */
+    disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /**
+     * Touched state model - for validation styling.
+     * Using model() to satisfy FormValueControl interface requirements.
+     */
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
+    onChange = () => { };
+    onTouched = () => { };
+    isWritingValue = false;
+    /**
+     * Initialize the form control synchronization for ControlValueAccessor.
+     * Must be called in the subclass constructor after super().
+     *
+     * Note: For signal forms ([formField]), this is not needed as
+     * the FormField directive binds directly to the value model.
+     */
+    initializeFormControl() {
+        runInInjectionContext(this.injector, () => {
+            effect(() => {
+                const currentValue = this.value();
+                if (!this.isWritingValue) {
+                    untracked(() => this.onChange(currentValue));
+                }
+            });
+        });
+    }
+    // ============================================
+    // ControlValueAccessor Implementation
+    // (For reactive forms: formControl, formControlName)
+    // ============================================
+    /** ControlValueAccessor: Write value from form control to signal */
+    writeValue(value) {
+        this.isWritingValue = true;
+        this.value.set(value);
+        this.isWritingValue = false;
+    }
+    /** ControlValueAccessor: Register change callback */
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    /** ControlValueAccessor: Register touched callback */
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /** ControlValueAccessor: Set disabled state from form control */
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    // ============================================
+    // FormValueControl Implementation
+    // (For signal forms: [formField])
+    // ============================================
+    // The FormValueControl interface only requires:
+    // - value: ModelSignal<T> (already declared as abstract above)
+    // The FormField directive automatically binds to the value model.
+    /** Mark the control as touched (call on blur or panel close) */
+    markAsTouched() {
+        if (!this.touched()) {
+            this.touched.set(true);
+            this.onTouched();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BaseFormControl, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.0", type: BaseFormControl, isStandalone: true, inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", touched: "touchedChange" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: BaseFormControl, decorators: [{
+            type: Directive
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }] } });
+/**
+ * Factory function to provide NG_VALUE_ACCESSOR for a component.
+ * Use in component providers array.
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   providers: [provideValueAccessor(LazySelectComponent)]
+ * })
+ * export class LazySelectComponent extends BaseFormControl<string | null> {}
+ * ```
+ */
+function provideValueAccessor(component) {
+    return {
+        provide: NG_VALUE_ACCESSOR,
+        useExisting: forwardRef(() => component),
+        multi: true
+    };
+}
+
+/**
+ * Lazy-loading multi-select component with search, pagination, and select-all.
+ *
+ * Supports ALL Angular form patterns:
+ * - Template-driven: `[(value)]="selectedIds"`
+ * - Reactive forms: `[formControl]="ctrl"` or `formControlName="field"`
+ * - Signal forms: `[formField]="formTree.field"`
+ */
+class LazyMultiSelectComponent extends BaseFormControl {
+    // Inputs
+    placeHolder = input('Select Options', ...(ngDevMode ? [{ debugName: "placeHolder" }] : []));
+    isEditMode = input.required(...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
+    isLoading = input.required(...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    total = input.required(...(ngDevMode ? [{ debugName: "total" }] : []));
+    pagination = input.required(...(ngDevMode ? [{ debugName: "pagination" }] : []));
+    selectDataList = input.required(...(ngDevMode ? [{ debugName: "selectDataList" }] : []));
+    /** Two-way bound value using model() for signal forms compatibility */
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    // Outputs
+    onSearch = output();
+    onPagination = output();
+    // UI signals
+    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
+    /** Computed: Display text for selected values (replaces getSelectedValue method) */
+    selectedValueDisplay = computed(() => {
+        const selectedValues = this.value() ?? [];
+        if (selectedValues.length === 0)
+            return '';
+        if (selectedValues.length > 3) {
+            return `${selectedValues.length} Items Selected`;
+        }
+        return this.selectDataList()
+            .filter(item => selectedValues.includes(item.value))
+            .map(item => item.label)
+            .join(', ');
+    }, ...(ngDevMode ? [{ debugName: "selectedValueDisplay" }] : []));
+    /** Computed: Whether all items are selected (replaces isSelectAll signal) */
+    isSelectAll = computed(() => {
+        const selectedValues = this.value() ?? [];
+        const allValues = this.selectDataList().map(item => item.value);
+        if (selectedValues.length === 0 || allValues.length === 0)
+            return false;
+        return allValues.every(val => selectedValues.includes(val));
+    }, ...(ngDevMode ? [{ debugName: "isSelectAll" }] : []));
+    constructor() {
+        super();
+        this.initializeFormControl();
+        // Search debounce effect
+        runInInjectionContext(this.injector, () => {
+            toSignal(toObservable(this.searchTerm).pipe(skip(1), debounceTime(500), distinctUntilChanged(), tap$1((value) => {
+                this.onSearch.emit(value);
+            })), { initialValue: this.searchTerm() });
+        });
+    }
+    // Signal to toggle panel
+    scrollTargetEl = null;
+    onScrollBound = this.onScroll.bind(this);
+    multiScrollContainer = viewChild.required('multiScrollContainer');
+    onScroll(event) {
+        const el = event.target;
+        const nearBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 50;
+        if (nearBottom && !this.isLoading()) {
+            const pagination = this.pagination();
+            const nextPage = pagination.currentPage + 1;
+            const hasMore = nextPage * pagination.pageSize < (this.total() ?? 0);
+            if (hasMore) {
+                this.onPagination.emit({ ...pagination, currentPage: nextPage });
+            }
+        }
+    }
+    pSelectRef = viewChild.required('pSelect');
+    openOptions = signal(false, ...(ngDevMode ? [{ debugName: "openOptions" }] : []));
+    onSelectClick(event) {
+        if (this.disabled())
+            return;
+        this.pSelectRef()?.nativeElement.classList.add('p-focus');
+        this.openOptions.update((isOpen) => !isOpen);
+    }
+    onOverlayClick(event) {
+        event.stopPropagation();
+    }
+    handleDocumentClick(event) {
+        const clickedInside = this.pSelectRef()?.nativeElement.contains(event.target);
+        if (!clickedInside) {
+            this.openOptions.set(false);
+            this.pSelectRef()?.nativeElement.classList.remove('p-focus');
+            this.markAsTouched();
+        }
+    }
+    isSelected(data) {
+        return this.value()?.includes(data.value);
+    }
+    key(option) {
+        return option.value;
+    }
+    selectValue(event, option) {
+        const previousValue = this.value() ?? [];
+        if (event.checked) {
+            if (!previousValue.includes(option.value)) {
+                this.value.set([...previousValue, option.value]);
+            }
+        }
+        else {
+            const updated = previousValue.filter((v) => v !== option.value);
+            this.value.set(updated);
+        }
+    }
+    changeSelectAll(event) {
+        if (event.checked) {
+            this.value.set(this.selectDataList().map((item) => item.value));
+        }
+        else {
+            this.value.set([]);
+        }
+    }
+    clear(event) {
+        event.stopPropagation();
+        this.value.set([]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LazyMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: LazyMultiSelectComponent, isStandalone: true, selector: "lib-lazy-multi-select", inputs: { placeHolder: { classPropertyName: "placeHolder", publicName: "placeHolder", isSignal: true, isRequired: false, transformFunction: null }, isEditMode: { classPropertyName: "isEditMode", publicName: "isEditMode", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: true, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: true, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: true, transformFunction: null }, selectDataList: { classPropertyName: "selectDataList", publicName: "selectDataList", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onSearch: "onSearch", onPagination: "onPagination" }, host: { listeners: { "document:click": "handleDocumentClick($event)" } }, providers: [provideValueAccessor(LazyMultiSelectComponent)], viewQueries: [{ propertyName: "multiScrollContainer", first: true, predicate: ["multiScrollContainer"], descendants: true, isSignal: true }, { propertyName: "pSelectRef", first: true, predicate: ["pSelect"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"p-select w-full\" #pSelect (click)=\"onSelectClick($event)\"\n     [class.p-disabled]=\"disabled()\">\n    @if(selectedValueDisplay()){\n    <span class=\"p-select-label\">{{selectedValueDisplay()}}</span>\n    }@else {\n    <span class=\"p-select-label p-placeholder\">{{placeHolder()}}</span>\n    }\n    <span class=\"p-select-clear-icon\" (click)=\"clear($event)\"><i class=\"pi pi-times\"></i></span>\n    <div class=\"p-select-dropdown\">\n        <span class=\"p-select-dropdown-icon flex items-center\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n                data-p-icon=\"chevron-down\" class=\"p-multiselect-dropdown-icon p-icon ng-star-inserted\"\n                data-pc-section=\"triggericon\" aria-hidden=\"true\" pc75=\"\">\n                <path\n                    d=\"M7.01744 10.398C6.91269 10.3985 6.8089 10.378 6.71215 10.3379C6.61541 10.2977 6.52766 10.2386 6.45405 10.1641L1.13907 4.84913C1.03306 4.69404 0.985221 4.5065 1.00399 4.31958C1.02276 4.13266 1.10693 3.95838 1.24166 3.82747C1.37639 3.69655 1.55301 3.61742 1.74039 3.60402C1.92777 3.59062 2.11386 3.64382 2.26584 3.75424L7.01744 8.47394L11.769 3.75424C11.9189 3.65709 12.097 3.61306 12.2748 3.62921C12.4527 3.64535 12.6199 3.72073 12.7498 3.84328C12.8797 3.96582 12.9647 4.12842 12.9912 4.30502C13.0177 4.48162 12.9841 4.662 12.8958 4.81724L7.58083 10.1322C7.50996 10.2125 7.42344 10.2775 7.32656 10.3232C7.22968 10.3689 7.12449 10.3944 7.01744 10.398Z\"\n                    fill=\"currentColor\"></path>\n            </svg>\n        </span>\n    </div>\n    @if(openOptions()){\n    <div class=\"p-select-overlay\" (click)=\"onOverlayClick($event)\">\n        <div class=\"p-select-header flex flex-row gap-2 items-center\">\n            <p-checkbox binary=\"true\" (onChange)=\"changeSelectAll($event)\" [ngModel]=\"isSelectAll()\" [disabled]=\"disabled()\"/>\n            <input type=\"text\" pInputText class=\"w-full\" [ngModel]=\"searchTerm()\"\n                (ngModelChange)=\"searchTerm.set($event)\" [ngModelOptions]=\"{ standalone: true }\"\n                placeholder=\"Search...\" />\n        </div>\n        <div class=\"p-select-list-container\" (scroll)=\"onScroll($event)\">\n            <ul class=\"p-select-list\">\n                @for (data of selectDataList(); track key(data); let i = $index) {\n                <li class=\"p-select-option flex flex-row gap-2 items-center\"\n                    [ngClass]=\"{ 'p-select-option-selected': isSelected(data) }\">\n                    <p-checkbox binary=\"true\" (onChange)=\"selectValue($event,data)\" [ngModel]=\"isSelected(data)\" [disabled]=\"disabled()\" />\n                    <span>{{data.label}}</span>\n                </li>\n                }\n            </ul>\n        </div>\n    </div>\n    }\n</div>", styles: [".p-select-overlay{top:33px;z-index:1004;transform-origin:center top;margin-top:2px}.p-select-option:hover{background:var(--p-select-option-focus-background);color:var(--p-select-option-focus-color)}.p-select-list-container{max-height:200px}.p-select-option.p-select-option-selected{background:var(--p-select-option-selected-background);color:var(--p-select-option-selected-color)}.p-select-option.p-select-option-selected:hover{background:var(--p-select-option-selected-focus-background);color:var(--p-select-option-selected-focus-color)}\n"], dependencies: [{ kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i1$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i2.Checkbox, selector: "p-checkbox, p-checkBox, p-check-box", inputs: ["hostName", "value", "binary", "ariaLabelledBy", "ariaLabel", "tabindex", "inputId", "inputStyle", "styleClass", "inputClass", "indeterminate", "formControl", "checkboxIcon", "readonly", "autofocus", "trueValue", "falseValue", "variant", "size"], outputs: ["onChange", "onFocus", "onBlur"] }, { kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LazyMultiSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-lazy-multi-select', imports: [PrimeModule, AngularModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideValueAccessor(LazyMultiSelectComponent)], template: "<div class=\"p-select w-full\" #pSelect (click)=\"onSelectClick($event)\"\n     [class.p-disabled]=\"disabled()\">\n    @if(selectedValueDisplay()){\n    <span class=\"p-select-label\">{{selectedValueDisplay()}}</span>\n    }@else {\n    <span class=\"p-select-label p-placeholder\">{{placeHolder()}}</span>\n    }\n    <span class=\"p-select-clear-icon\" (click)=\"clear($event)\"><i class=\"pi pi-times\"></i></span>\n    <div class=\"p-select-dropdown\">\n        <span class=\"p-select-dropdown-icon flex items-center\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n                data-p-icon=\"chevron-down\" class=\"p-multiselect-dropdown-icon p-icon ng-star-inserted\"\n                data-pc-section=\"triggericon\" aria-hidden=\"true\" pc75=\"\">\n                <path\n                    d=\"M7.01744 10.398C6.91269 10.3985 6.8089 10.378 6.71215 10.3379C6.61541 10.2977 6.52766 10.2386 6.45405 10.1641L1.13907 4.84913C1.03306 4.69404 0.985221 4.5065 1.00399 4.31958C1.02276 4.13266 1.10693 3.95838 1.24166 3.82747C1.37639 3.69655 1.55301 3.61742 1.74039 3.60402C1.92777 3.59062 2.11386 3.64382 2.26584 3.75424L7.01744 8.47394L11.769 3.75424C11.9189 3.65709 12.097 3.61306 12.2748 3.62921C12.4527 3.64535 12.6199 3.72073 12.7498 3.84328C12.8797 3.96582 12.9647 4.12842 12.9912 4.30502C13.0177 4.48162 12.9841 4.662 12.8958 4.81724L7.58083 10.1322C7.50996 10.2125 7.42344 10.2775 7.32656 10.3232C7.22968 10.3689 7.12449 10.3944 7.01744 10.398Z\"\n                    fill=\"currentColor\"></path>\n            </svg>\n        </span>\n    </div>\n    @if(openOptions()){\n    <div class=\"p-select-overlay\" (click)=\"onOverlayClick($event)\">\n        <div class=\"p-select-header flex flex-row gap-2 items-center\">\n            <p-checkbox binary=\"true\" (onChange)=\"changeSelectAll($event)\" [ngModel]=\"isSelectAll()\" [disabled]=\"disabled()\"/>\n            <input type=\"text\" pInputText class=\"w-full\" [ngModel]=\"searchTerm()\"\n                (ngModelChange)=\"searchTerm.set($event)\" [ngModelOptions]=\"{ standalone: true }\"\n                placeholder=\"Search...\" />\n        </div>\n        <div class=\"p-select-list-container\" (scroll)=\"onScroll($event)\">\n            <ul class=\"p-select-list\">\n                @for (data of selectDataList(); track key(data); let i = $index) {\n                <li class=\"p-select-option flex flex-row gap-2 items-center\"\n                    [ngClass]=\"{ 'p-select-option-selected': isSelected(data) }\">\n                    <p-checkbox binary=\"true\" (onChange)=\"selectValue($event,data)\" [ngModel]=\"isSelected(data)\" [disabled]=\"disabled()\" />\n                    <span>{{data.label}}</span>\n                </li>\n                }\n            </ul>\n        </div>\n    </div>\n    }\n</div>", styles: [".p-select-overlay{top:33px;z-index:1004;transform-origin:center top;margin-top:2px}.p-select-option:hover{background:var(--p-select-option-focus-background);color:var(--p-select-option-focus-color)}.p-select-list-container{max-height:200px}.p-select-option.p-select-option-selected{background:var(--p-select-option-selected-background);color:var(--p-select-option-selected-color)}.p-select-option.p-select-option-selected:hover{background:var(--p-select-option-selected-focus-background);color:var(--p-select-option-selected-focus-color)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { placeHolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeHolder", required: false }] }], isEditMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEditMode", required: true }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: true }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: true }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: true }] }], selectDataList: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectDataList", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], onSearch: [{ type: i0.Output, args: ["onSearch"] }], onPagination: [{ type: i0.Output, args: ["onPagination"] }], multiScrollContainer: [{ type: i0.ViewChild, args: ['multiScrollContainer', { isSignal: true }] }], pSelectRef: [{ type: i0.ViewChild, args: ['pSelect', { isSignal: true }] }], handleDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+/**
+ * Lazy-loading single select component with search and pagination.
+ *
+ * Supports ALL Angular form patterns:
+ * - Template-driven: `[(value)]="selectedId"`
+ * - Reactive forms: `[formControl]="ctrl"` or `formControlName="field"`
+ * - Signal forms: `[formField]="formTree.field"`
+ */
+class LazySelectComponent extends BaseFormControl {
+    // Inputs
+    placeHolder = input('Select Option', ...(ngDevMode ? [{ debugName: "placeHolder" }] : []));
+    optionLabel = input.required(...(ngDevMode ? [{ debugName: "optionLabel" }] : []));
+    optionValue = input.required(...(ngDevMode ? [{ debugName: "optionValue" }] : []));
+    isEditMode = input.required(...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
+    isLoading = input.required(...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    total = input.required(...(ngDevMode ? [{ debugName: "total" }] : []));
+    pagination = input.required(...(ngDevMode ? [{ debugName: "pagination" }] : []));
+    selectDataList = input.required(...(ngDevMode ? [{ debugName: "selectDataList" }] : []));
+    /** Two-way bound value using model() for signal forms compatibility */
+    value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    // Outputs
+    onSearch = output();
+    onPagination = output();
+    // UI signals
+    searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
+    // Effect hooks
+    constructor() {
+        super();
+        this.initializeFormControl();
+        runInInjectionContext(this.injector, () => {
+            toSignal(toObservable(this.searchTerm).pipe(skip(1), debounceTime(500), distinctUntilChanged(), tap$1(value => {
+                this.onSearch.emit(value);
+            })), { initialValue: this.searchTerm() });
+        });
+    }
+    // Signal to toggle panel
+    isPanelShow = signal(false, ...(ngDevMode ? [{ debugName: "isPanelShow" }] : []));
+    scrollTargetEl = null;
+    onScrollBound = this.onScroll.bind(this);
+    scrollContainer = viewChild.required('scrollContainer');
+    onScroll(event) {
+        const el = event.target;
+        const nearBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 50;
+        if (nearBottom && !this.isLoading()) {
+            const pagination = this.pagination();
+            const nextPage = pagination.currentPage + 1;
+            const hasMore = nextPage * pagination.pageSize < (this.total() ?? 0);
+            if (hasMore) {
+                this.onPagination.emit({ ...pagination, currentPage: nextPage });
+            }
+        }
+    }
+    // Toggle panel and manage scroll event
+    showPanel() {
+        if (this.disabled())
+            return;
+        this.isPanelShow.update(prev => !prev);
+        const isNowVisible = this.isPanelShow();
+        if (isNowVisible) {
+            setTimeout(() => {
+                const containerEl = this.scrollContainer().nativeElement;
+                const target = containerEl.querySelector('.p-select-list-container');
+                if (target) {
+                    target.addEventListener('scroll', this.onScrollBound);
+                    this.scrollTargetEl = target;
+                }
+                else {
+                    console.warn('.p-select-list-container not found after panel show');
+                }
+            }, 0);
+        }
+        else {
+            if (this.scrollTargetEl) {
+                this.scrollTargetEl.removeEventListener('scroll', this.onScrollBound);
+                this.scrollTargetEl = null;
+            }
+        }
+    }
+    onBlur() {
+        this.markAsTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LazySelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.0", type: LazySelectComponent, isStandalone: true, selector: "lib-lazy-select", inputs: { placeHolder: { classPropertyName: "placeHolder", publicName: "placeHolder", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: true, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: true, transformFunction: null }, isEditMode: { classPropertyName: "isEditMode", publicName: "isEditMode", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: true, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: true, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: true, transformFunction: null }, selectDataList: { classPropertyName: "selectDataList", publicName: "selectDataList", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", onSearch: "onSearch", onPagination: "onPagination" }, providers: [provideValueAccessor(LazySelectComponent)], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #scrollContainer class=\"lib-scroll-container\">\n  <p-select\n    [options]=\"selectDataList()\"\n    [(ngModel)]=\"value\"\n    [optionLabel]=\"optionLabel()\"\n    [optionValue]=\"optionValue()\"\n    [filter]=\"true\"\n    [showClear]=\"true\"\n    [placeholder]=\"placeHolder()\"\n    [disabled]=\"disabled()\"\n    class=\"w-full\"\n    appEditModeElementChanger\n    [isEditMode]=\"isEditMode()\"\n    (click)=\"showPanel()\"\n    (onBlur)=\"onBlur()\">\n    <ng-template let-filter #filter>\n      <input\n        pInputText\n        [ngModel]=\"searchTerm()\"\n        (ngModelChange)=\"searchTerm.set($event)\"\n        [ngModelOptions]=\"{standalone:true}\"\n        class=\"w-full\" />\n    </ng-template>\n    <ng-template #selectedItem let-selectedOption>\n      {{ selectedOption[optionLabel()] }}\n    </ng-template>\n    <ng-template let-item #item>\n      {{ item[optionLabel()] }}\n    </ng-template>\n  </p-select>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: PrimeModule }, { kind: "directive", type: i1$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i3.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: EditModeElementChangerDirective, selector: "[appEditModeElementChanger]", inputs: ["isEditMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: LazySelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-lazy-select', imports: [
+                        AngularModule,
+                        PrimeModule,
+                        EditModeElementChangerDirective
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [provideValueAccessor(LazySelectComponent)], template: "<div #scrollContainer class=\"lib-scroll-container\">\n  <p-select\n    [options]=\"selectDataList()\"\n    [(ngModel)]=\"value\"\n    [optionLabel]=\"optionLabel()\"\n    [optionValue]=\"optionValue()\"\n    [filter]=\"true\"\n    [showClear]=\"true\"\n    [placeholder]=\"placeHolder()\"\n    [disabled]=\"disabled()\"\n    class=\"w-full\"\n    appEditModeElementChanger\n    [isEditMode]=\"isEditMode()\"\n    (click)=\"showPanel()\"\n    (onBlur)=\"onBlur()\">\n    <ng-template let-filter #filter>\n      <input\n        pInputText\n        [ngModel]=\"searchTerm()\"\n        (ngModelChange)=\"searchTerm.set($event)\"\n        [ngModelOptions]=\"{standalone:true}\"\n        class=\"w-full\" />\n    </ng-template>\n    <ng-template #selectedItem let-selectedOption>\n      {{ selectedOption[optionLabel()] }}\n    </ng-template>\n    <ng-template let-item #item>\n      {{ item[optionLabel()] }}\n    </ng-template>\n  </p-select>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { placeHolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeHolder", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: true }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: true }] }], isEditMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEditMode", required: true }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: true }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: true }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: true }] }], selectDataList: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectDataList", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], onSearch: [{ type: i0.Output, args: ["onSearch"] }], onPagination: [{ type: i0.Output, args: ["onPagination"] }], scrollContainer: [{ type: i0.ViewChild, args: ['scrollContainer', { isSignal: true }] }] } });
+
+/**
+ * Injection Tokens for Provider Interfaces
+ *
+ * These tokens enable dependency injection of provider implementations
+ * without creating direct package dependencies.
+ *
+ * Pattern:
+ * 1. ng-shared defines interfaces and tokens (no implementation)
+ * 2. ng-auth provides implementations
+ * 3. ng-iam and ng-storage inject via tokens
+ * 4. app.config.ts wires everything together
+ *
+ * @example
+ * // In IAM component
+ * private readonly userProvider = inject(USER_PROVIDER);
+ *
+ * // In app.config.ts
+ * providers: [
+ *   { provide: USER_PROVIDER, useClass: AuthUserProvider },
+ * ]
+ */
+/**
+ * User Provider Token
+ *
+ * Provides user data access for IAM user selection.
+ */
+const USER_PROVIDER = new InjectionToken('USER_PROVIDER', {
+    providedIn: 'root',
+    factory: () => {
+        throw new Error('USER_PROVIDER not configured. Please provide an implementation in app.config.ts');
+    },
+});
+/**
+ * Company API Provider Token
+ *
+ * Provides company data access for IAM company selection.
+ */
+const COMPANY_API_PROVIDER = new InjectionToken('COMPANY_API_PROVIDER', {
+    providedIn: 'root',
+    factory: () => {
+        throw new Error('COMPANY_API_PROVIDER not configured. Please provide an implementation in app.config.ts');
+    },
+});
+/**
+ * User Permission Provider Token
+ *
+ * Provides user permission assignment operations for IAM.
+ */
+const USER_PERMISSION_PROVIDER = new InjectionToken('USER_PERMISSION_PROVIDER', {
+    providedIn: 'root',
+    factory: () => {
+        throw new Error('USER_PERMISSION_PROVIDER not configured. Please provide an implementation in app.config.ts');
+    },
+});
+
+/**
+ * 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 = '/') {
+    return () => {
+        const permissionValidator = inject(PermissionValidatorService);
+        const router = inject(Router);
+        // Check if permissions are loaded
+        if (!permissionValidator.isPermissionsLoaded()) {
+            console.warn('[permissionGuard] Permissions not loaded, denying access to route');
+            return router.createUrlTree([redirectTo]);
+        }
+        const userPermissions = permissionValidator.permissions();
+        const hasPermission = evaluatePermission(permission, userPermissions);
+        if (!hasPermission) {
+            const permissionCode = typeof permission === 'string' ? permission : 'complex-logic';
+            console.warn(`[permissionGuard] Access denied - missing permission: ${permissionCode}`);
+            return router.createUrlTree([redirectTo]);
+        }
+        return true;
+    };
+}
+/**
+ * Any Permission Guard (OR logic)
+ *
+ * Allows access if user has ANY of the specified permissions.
+ *
+ * @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) {
+            console.warn('[anyPermissionGuard] Empty permissions array provided, denying access');
+            return router.createUrlTree([redirectTo]);
+        }
+        // Check if permissions are loaded
+        if (!permissionValidator.isPermissionsLoaded()) {
+            console.warn('[anyPermissionGuard] Permissions not loaded, denying access to route');
+            return router.createUrlTree([redirectTo]);
+        }
+        const userPermissions = permissionValidator.permissions();
+        const hasPermission = hasAnyPermission(permissions, userPermissions);
+        if (!hasPermission) {
+            console.warn(`[anyPermissionGuard] Access denied - missing any of: ${permissions.join(', ')}`);
+            return router.createUrlTree([redirectTo]);
+        }
+        return true;
+    };
+}
+/**
+ * All Permissions Guard (AND logic)
+ *
+ * Allows access only if user has ALL of the specified 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) {
+            console.warn('[allPermissionsGuard] Empty permissions array provided, denying access');
+            return router.createUrlTree([redirectTo]);
+        }
+        // Check if permissions are loaded
+        if (!permissionValidator.isPermissionsLoaded()) {
+            console.warn('[allPermissionsGuard] Permissions not loaded, denying access to route');
+            return router.createUrlTree([redirectTo]);
+        }
+        const userPermissions = permissionValidator.permissions();
+        const hasPermission = hasAllPermissions(permissions, userPermissions);
+        if (!hasPermission) {
+            console.warn(`[allPermissionsGuard] Access denied - missing all of: ${permissions.join(', ')}`);
+            return router.createUrlTree([redirectTo]);
+        }
+        return true;
+    };
+}
+
+// Interfaces
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AngularModule, ApiResourceService, ApiResourceService as ApiService, COMPANY_API_PROVIDER, ContactTypeEnum, CookieService, EditModeElementChangerDirective, FileUrlService, HasPermissionDirective, IconComponent, IconTypeEnum, IsEmptyImageDirective, LazyMultiSelectComponent, LazySelectComponent, PermissionValidatorService, PlatformService, PreventDefaultDirective, PrimeModule, USER_PERMISSION_PROVIDER, USER_PROVIDER, allPermissionsGuard, anyPermissionGuard, evaluateLogicNode, evaluatePermission, hasAllPermissions, hasAnyPermission, permissionGuard };
+//# sourceMappingURL=flusys-ng-shared.mjs.map