@flusys/ng-shared 3.0.0 → 3.0.1

package/fesm2022/flusys-ng-shared.mjs

@@ -1,7 +1,6 @@
 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 i3 from '@angular/common';
-import { isPlatformServer, CommonModule, NgOptimizedImage, NgComponentOutlet, DatePipe } from '@angular/common';
+import { inject, PLATFORM_ID, Injectable, DOCUMENT, REQUEST, signal, computed, ElementRef, input, effect, Directive, TemplateRef, ViewContainerRef, output, NgModule, Injector, runInInjectionContext, resource, model, untracked, forwardRef, ChangeDetectionStrategy, Component, ApplicationRef, viewChild, afterNextRender, ViewEncapsulation, DestroyRef, InjectionToken, isDevMode } from '@angular/core';
+import { isPlatformServer, CommonModule, NgOptimizedImage, NgComponentOutlet, DatePipe, DOCUMENT as DOCUMENT$1 } from '@angular/common';
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 import { APP_CONFIG, getServiceUrl } from '@flusys/ng-core';
 import { of, firstValueFrom, map as map$1 } from 'rxjs';
@@ -38,7 +37,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$1 from 'primeng/select';
+import * as i3 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
 import { SelectButtonModule } from 'primeng/selectbutton';
 import { SkeletonModule } from 'primeng/skeleton';
@@ -49,23 +48,15 @@ import { TabsModule } from 'primeng/tabs';
 import { TagModule } from 'primeng/tag';
 import { TextareaModule } from 'primeng/textarea';
 import { ToastModule } from 'primeng/toast';
+import { ToggleButtonModule } from 'primeng/togglebutton';
 import { ToggleSwitchModule } from 'primeng/toggleswitch';
 import { TooltipModule } from 'primeng/tooltip';
 import { TreeTableModule } from 'primeng/treetable';
+import { ProgressSpinnerModule } from 'primeng/progressspinner';
+import { ColorPickerModule } from 'primeng/colorpicker';
 import { MessageService, ConfirmationService } from 'primeng/api';
 import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
-/**
- * Centralized Permission Codes
- *
- * Single source of truth for all permission codes used across the application.
- * Use these constants instead of hardcoded strings to prevent typos and enable easy refactoring.
- *
- * Naming Convention: <entity>.<action>
- * - entity: The resource being accessed (e.g., user, role, company)
- * - action: The operation being performed (create, read, update, delete, assign)
- */
-// ==================== AUTH MODULE ====================
 const USER_PERMISSIONS = {
     CREATE: 'user.create',
     READ: 'user.read',
@@ -84,7 +75,6 @@ const BRANCH_PERMISSIONS = {
     UPDATE: 'branch.update',
     DELETE: 'branch.delete',
 };
-// ==================== IAM MODULE ====================
 const ACTION_PERMISSIONS = {
     CREATE: 'action.create',
     READ: 'action.read',
@@ -113,7 +103,6 @@ const COMPANY_ACTION_PERMISSIONS = {
     READ: 'company-action.read',
     ASSIGN: 'company-action.assign',
 };
-// ==================== STORAGE MODULE ====================
 const FILE_PERMISSIONS = {
     CREATE: 'file.create',
     READ: 'file.read',
@@ -132,7 +121,6 @@ const STORAGE_CONFIG_PERMISSIONS = {
     UPDATE: 'storage-config.update',
     DELETE: 'storage-config.delete',
 };
-// ==================== EMAIL MODULE ====================
 const EMAIL_CONFIG_PERMISSIONS = {
     CREATE: 'email-config.create',
     READ: 'email-config.read',
@@ -145,38 +133,49 @@ const EMAIL_TEMPLATE_PERMISSIONS = {
     UPDATE: 'email-template.update',
     DELETE: 'email-template.delete',
 };
-// ==================== FORM BUILDER MODULE ====================
 const FORM_PERMISSIONS = {
     CREATE: 'form.create',
     READ: 'form.read',
     UPDATE: 'form.update',
     DELETE: 'form.delete',
 };
-// ==================== AGGREGATED EXPORTS ====================
-/**
- * All permission codes grouped by module
- */
+const EVENT_PERMISSIONS = {
+    CREATE: 'event.create',
+    READ: 'event.read',
+    UPDATE: 'event.update',
+    DELETE: 'event.delete',
+};
+const EVENT_PARTICIPANT_PERMISSIONS = {
+    CREATE: 'event-participant.create',
+    READ: 'event-participant.read',
+    UPDATE: 'event-participant.update',
+    DELETE: 'event-participant.delete',
+};
+const NOTIFICATION_PERMISSIONS = {
+    CREATE: 'notification.create',
+    READ: 'notification.read',
+    UPDATE: 'notification.update',
+    DELETE: 'notification.delete',
+};
 const PERMISSIONS = {
-    // Auth
     USER: USER_PERMISSIONS,
     COMPANY: COMPANY_PERMISSIONS,
     BRANCH: BRANCH_PERMISSIONS,
-    // IAM
     ACTION: ACTION_PERMISSIONS,
     ROLE: ROLE_PERMISSIONS,
     ROLE_ACTION: ROLE_ACTION_PERMISSIONS,
     USER_ROLE: USER_ROLE_PERMISSIONS,
     USER_ACTION: USER_ACTION_PERMISSIONS,
     COMPANY_ACTION: COMPANY_ACTION_PERMISSIONS,
-    // Storage
     FILE: FILE_PERMISSIONS,
     FOLDER: FOLDER_PERMISSIONS,
     STORAGE_CONFIG: STORAGE_CONFIG_PERMISSIONS,
-    // Email
     EMAIL_CONFIG: EMAIL_CONFIG_PERMISSIONS,
     EMAIL_TEMPLATE: EMAIL_TEMPLATE_PERMISSIONS,
-    // Form Builder
     FORM: FORM_PERMISSIONS,
+    EVENT: EVENT_PERMISSIONS,
+    EVENT_PARTICIPANT: EVENT_PARTICIPANT_PERMISSIONS,
+    NOTIFICATION: NOTIFICATION_PERMISSIONS,
 };
 
 /**
@@ -814,9 +813,12 @@ class PrimeModule {
             TagModule,
             TextareaModule,
             ToastModule,
+            ToggleButtonModule,
             ToggleSwitchModule,
             TooltipModule,
-            TreeTableModule] });
+            TreeTableModule,
+            ProgressSpinnerModule,
+            ColorPickerModule] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PrimeModule, imports: [AutoCompleteModule,
             AvatarModule,
             ButtonModule,
@@ -851,9 +853,12 @@ class PrimeModule {
             TagModule,
             TextareaModule,
             ToastModule,
+            ToggleButtonModule,
             ToggleSwitchModule,
             TooltipModule,
-            TreeTableModule] });
+            TreeTableModule,
+            ProgressSpinnerModule,
+            ColorPickerModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: PrimeModule, decorators: [{
             type: NgModule,
@@ -893,64 +898,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
                         TagModule,
                         TextareaModule,
                         ToastModule,
+                        ToggleButtonModule,
                         ToggleSwitchModule,
                         TooltipModule,
                         TreeTableModule,
+                        ProgressSpinnerModule,
+                        ColorPickerModule,
                     ],
                 }]
         }] });
 
-// =============================================================================
-// 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 with global apiBaseUrl
  * @Injectable({ providedIn: 'root' })
  * export class UserService extends ApiResourceService<UserDto, User> {
  *   constructor() {
  *     super('auth/users', inject(HttpClient));
  *   }
  * }
- *
- * // Define service with feature-specific baseUrl
- * @Injectable({ providedIn: 'root' })
- * export class FormService extends ApiResourceService<FormDto, Form> {
- *   constructor() {
- *     super('form', inject(HttpClient), 'formBuilder');
- *     // URL: services.formBuilder.baseUrl + '/form'
- *   }
- * }
- *
- * // 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 {
@@ -958,43 +927,22 @@ class ApiResourceService {
     injector = inject(Injector);
     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 - lazy initialized to prevent auto-fetch on service injection.
-     * Call initListResource() or any list method (fetchList, reload, etc.) to initialize.
-     */
     _listResource = null;
-    /** Whether the list resource has been initialized */
     _resourceInitialized = false;
-    /**
-     * Signal to track resource initialization for computed signals.
-     * This allows computed signals to re-evaluate when the resource is created.
-     * Without this, computed signals would not detect when _listResource changes from null.
-     */
     _resourceInitSignal = signal(false, ...(ngDevMode ? [{ debugName: "_resourceInitSignal" }] : []));
-    /** Get or create the list resource (lazy initialization) */
     get listResource() {
         if (!this._listResource) {
             this.initListResource();
         }
         return this._listResource;
     }
-    /**
-     * Initialize the list resource. Called automatically when accessing listResource
-     * or any list-related computed signals/methods.
-     * Uses runInInjectionContext to support lazy initialization outside constructor.
-     */
     initListResource() {
         if (this._resourceInitialized)
             return;
@@ -1004,88 +952,49 @@ class ApiResourceService {
                     search: this.searchTerm(),
                     filter: this.filterData(),
                 }),
-                loader: async ({ params }) => {
-                    const { search, filter } = params;
-                    return this.fetchAllAsync(search, filter);
-                } });
+                loader: async ({ params }) => this.getAllAsync(params.filter, params.search) });
         });
-        // Signal that resource is now initialized - triggers computed re-evaluation
         this._resourceInitSignal.set(true);
     }
-    // ==========================================================================
-    // Computed State Accessors
-    // ==========================================================================
-    /**
-     * Whether data is currently loading.
-     * Tracks _resourceInitSignal to re-evaluate when resource is created.
-     */
     isLoading = computed(() => {
-        this._resourceInitSignal(); // Track initialization
+        this._resourceInitSignal();
         return this._listResource?.isLoading() ?? false;
     }, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
-    /**
-     * List data array.
-     * Tracks _resourceInitSignal to re-evaluate when resource is created.
-     */
     data = computed(() => {
-        this._resourceInitSignal(); // Track initialization
+        this._resourceInitSignal();
         return this._listResource?.value()?.data ?? [];
     }, ...(ngDevMode ? [{ debugName: "data" }] : []));
-    /**
-     * Total count of items.
-     * Tracks _resourceInitSignal to re-evaluate when resource is created.
-     */
     total = computed(() => {
-        this._resourceInitSignal(); // Track initialization
+        this._resourceInitSignal();
         return this._listResource?.value()?.meta?.total ?? 0;
     }, ...(ngDevMode ? [{ debugName: "total" }] : []));
-    /**
-     * Pagination metadata.
-     * Tracks _resourceInitSignal to re-evaluate when resource is created.
-     */
     pageInfo = computed(() => {
-        this._resourceInitSignal(); // Track initialization
+        this._resourceInitSignal();
         return this._listResource?.value()?.meta;
     }, ...(ngDevMode ? [{ debugName: "pageInfo" }] : []));
-    /**
-     * Whether there are more pages.
-     * Tracks _resourceInitSignal to re-evaluate when resource is created.
-     */
     hasMore = computed(() => {
-        this._resourceInitSignal(); // Track initialization
+        this._resourceInitSignal();
         const meta = this._listResource?.value()?.meta;
         if (!meta)
             return false;
         return meta.hasMore ?? (meta.page + 1) * meta.pageSize < meta.total;
     }, ...(ngDevMode ? [{ debugName: "hasMore" }] : []));
-    /**
-     * @param moduleApiName - The API resource path (e.g., 'form' for /form-builder/form)
-     * @param http - HttpClient instance
-     * @param serviceName - Optional service name for feature-specific base URL (e.g., 'formBuilder')
-     */
     constructor(moduleApiName, http, serviceName) {
-        this.moduleApiName = moduleApiName;
+        this.moduleApiName = moduleApiName || serviceName || 'api';
         const config = inject(APP_CONFIG);
-        // Use service-specific URL if provided, otherwise fallback to global apiBaseUrl
         const serviceBaseUrl = serviceName ? getServiceUrl(config, serviceName) : config.apiBaseUrl;
-        this.baseUrl = `${serviceBaseUrl}/${moduleApiName}`;
+        this.baseUrl = moduleApiName ? `${serviceBaseUrl}/${moduleApiName}` : serviceBaseUrl;
         this.http = http;
-        // Resource is now lazy-initialized, not created in constructor
     }
     getHttpOptions(endpoint, params) {
         return {
-            headers: new HttpHeaders({
-                'x-loader-tag': `${this.moduleApiName}/${endpoint}`,
-            }),
+            headers: new HttpHeaders({ 'x-loader-tag': `${this.moduleApiName}/${endpoint}` }),
             ...(params ? { params } : {}),
         };
     }
     // ==========================================================================
-    // List Management Methods
+    // List Management
     // ==========================================================================
-    /**
-     * Fetch list data (triggers resource initialization and reload)
-     */
     fetchList(search = '', filter) {
         this.initListResource();
         this.searchTerm.set(search);
@@ -1093,16 +1002,10 @@ class ApiResourceService {
             this.filterData.update((prev) => ({ ...prev, ...filter }));
         }
     }
-    /**
-     * Update pagination
-     */
     setPagination(pagination) {
         this.initListResource();
         this.filterData.update((prev) => ({ ...prev, pagination }));
     }
-    /**
-     * Go to next page
-     */
     nextPage() {
         this.initListResource();
         this.filterData.update((prev) => ({
@@ -1113,9 +1016,6 @@ class ApiResourceService {
             },
         }));
     }
-    /**
-     * Reset to first page
-     */
     resetPagination() {
         this.initListResource();
         this.filterData.update((prev) => ({
@@ -1123,42 +1023,21 @@ class ApiResourceService {
             pagination: { currentPage: 0, pageSize: prev.pagination?.pageSize ?? 10 },
         }));
     }
-    /**
-     * Reload current data
-     */
     reload() {
-        if (this._listResource) {
-            this._listResource.reload();
-        }
+        this._listResource?.reload();
     }
     // ==========================================================================
-    // Observable-based API Methods (IApiService interface)
+    // Observable API (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) {
@@ -1166,70 +1045,36 @@ class ApiResourceService {
         }
         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)
+    // Async API
     // ==========================================================================
-    /**
-     * Fetch paginated list (async)
-     */
-    async fetchAllAsync(search, filter) {
+    async getAllAsync(filter, search = '') {
         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));
     }
@@ -1438,11 +1283,14 @@ function checkScrollPagination(event, config) {
  * - Signal forms: `[formField]="formTree.field"`
  */
 class LazyMultiSelectComponent extends BaseFormControl {
-    destroyRef = inject(DestroyRef);
+    document = inject(DOCUMENT$1);
+    appRef = inject(ApplicationRef);
     onDocumentClickBound = this.handleDocumentClick.bind(this);
-    isDestroyed = false;
     // View references
     pSelectRef = viewChild.required('pSelect');
+    overlayTemplate = viewChild.required('overlayTpl');
+    // Portal state
+    overlayViewRef = null;
     // Inputs
     placeHolder = input('Select Options', ...(ngDevMode ? [{ debugName: "placeHolder" }] : []));
     isEditMode = input.required(...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
@@ -1503,16 +1351,16 @@ class LazyMultiSelectComponent extends BaseFormControl {
             });
         });
         // Document click listener for closing dropdown
-        this.destroyRef.onDestroy(() => {
-            this.isDestroyed = true;
-            document.removeEventListener('click', this.onDocumentClickBound);
-        });
-        afterNextRender(() => {
-            if (!this.isDestroyed) {
-                document.addEventListener('click', this.onDocumentClickBound);
-            }
+        afterNextRender({
+            write: () => {
+                this.document.addEventListener('click', this.onDocumentClickBound);
+            },
         });
     }
+    ngOnDestroy() {
+        this.document.removeEventListener('click', this.onDocumentClickBound);
+        this.closeOverlay();
+    }
     onScroll(event) {
         const nextPagination = checkScrollPagination(event, {
             pagination: this.pagination(),
@@ -1523,29 +1371,62 @@ class LazyMultiSelectComponent extends BaseFormControl {
             this.onPagination.emit(nextPagination);
         }
     }
-    onSelectClick(event) {
-        if (this.disabled())
+    onSelectClick() {
+        if (this.disabled() || !this.isEditMode())
             return;
+        if (this.openOptions()) {
+            this.closeOverlay();
+        }
+        else {
+            this.openOverlay();
+        }
+    }
+    openOverlay() {
         this.pSelectRef()?.nativeElement.classList.add('p-focus');
-        this.openOptions.update((isOpen) => !isOpen);
+        this.openOptions.set(true);
+        // Create embedded view and append to body (portal pattern)
+        this.overlayViewRef = this.overlayTemplate().createEmbeddedView({});
+        this.appRef.attachView(this.overlayViewRef);
+        const overlayEl = this.overlayViewRef.rootNodes[0];
+        this.document.body.appendChild(overlayEl);
+        // Override positioning for portal (CSS class handles visual styles)
+        const rect = this.pSelectRef()?.nativeElement.getBoundingClientRect();
+        if (rect) {
+            overlayEl.style.cssText = `
+        position: fixed !important;
+        top: ${rect.bottom + 2}px !important;
+        left: ${rect.left}px !important;
+        width: ${rect.width}px !important;
+        max-width: ${rect.width}px !important;
+        min-width: ${rect.width}px !important;
+        z-index: 999999999999 !important;
+      `;
+        }
+    }
+    closeOverlay() {
+        this.openOptions.set(false);
+        this.pSelectRef()?.nativeElement.classList.remove('p-focus');
+        if (this.overlayViewRef) {
+            this.appRef.detachView(this.overlayViewRef);
+            this.overlayViewRef.destroy();
+            this.overlayViewRef = null;
+        }
     }
     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');
+        const target = event.target;
+        const clickedInSelect = this.pSelectRef()?.nativeElement.contains(target);
+        const clickedInOverlay = this.overlayViewRef?.rootNodes[0]?.contains(target);
+        if (!clickedInSelect && !clickedInOverlay) {
+            this.closeOverlay();
             this.markAsTouched();
         }
     }
     isSelected(data) {
         return this.value()?.includes(data.value) ?? false;
     }
-    key(option) {
-        return option.value;
-    }
     selectValue(event, option) {
         const previousValue = this.value() ?? [];
         if (event.checked) {
@@ -1570,12 +1451,12 @@ class LazyMultiSelectComponent extends BaseFormControl {
         this.value.set([]);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LazyMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.5", 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 }, { propertyName: "overlayTemplate", first: true, predicate: ["overlayTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  class=\"p-select w-full\"\n  #pSelect\n  (click)=\"onSelectClick()\"\n  [class.p-disabled]=\"disabled()\"\n  [class.edit-mode-element-css]=\"!isEditMode()\"\n  [class.overflow-hidden]=\"!isEditMode()\"\n>\n  @if (selectedValueDisplay()) {\n    <span class=\"p-select-label\" [class.edit-mode-element-css]=\"!isEditMode()\">\n      {{ selectedValueDisplay() }}\n    </span>\n  } @else {\n    <span class=\"p-select-label p-placeholder\">{{ placeHolder() }}</span>\n  }\n\n  @if (isEditMode()) {\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\n          width=\"14\"\n          height=\"14\"\n          viewBox=\"0 0 14 14\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"p-multiselect-dropdown-icon p-icon\"\n          aria-hidden=\"true\"\n        >\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\"\n          />\n        </svg>\n      </span>\n    </div>\n  }\n</div>\n\n<ng-template #overlayTpl>\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        (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 data.value) {\n          <li\n            class=\"p-select-option flex flex-row gap-2 items-center\"\n            [class.p-select-option-selected]=\"isSelected(data)\"\n          >\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</ng-template>\n", styles: [".p-select-overlay{display:flex;flex-direction:column;max-height:250px;overflow:hidden}.p-select-header{padding:.75rem;border-bottom:1px solid var(--p-surface-border);background:var(--p-content-hover-background);flex-shrink:0;width:100%;box-sizing:border-box}.p-select-header input{background:var(--p-form-field-background);border-color:var(--p-form-field-border-color);color:var(--p-text-color)}.p-select-header input::placeholder{color:var(--p-text-muted-color)}.p-select-list-container{flex:1;overflow-y:auto;min-height:0;width:100%}.p-select-list{margin:0;padding:.25rem 0;list-style:none;background:var(--p-surface-overlay);color:var(--p-text-color);width:100%}.p-select-option{padding:.5rem .75rem;cursor:pointer;transition:background-color .2s ease;color:var(--p-text-color)}.p-select-option:hover{background:var(--p-content-hover-background)}.p-select-option.p-select-option-selected{background:var(--p-highlight-background);color:var(--p-highlight-color)}.p-select-option.p-select-option-selected:hover{background:var(--p-highlight-focus-background);color:var(--p-highlight-focus-color)}.p-select-clear-icon{display:flex;align-items:center;padding:0 .5rem;color:var(--p-text-muted-color);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: 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, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", 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)\" [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"] }] } });
+            args: [{ selector: 'lib-lazy-multi-select', imports: [PrimeModule, AngularModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [provideValueAccessor(LazyMultiSelectComponent)], template: "<div\n  class=\"p-select w-full\"\n  #pSelect\n  (click)=\"onSelectClick()\"\n  [class.p-disabled]=\"disabled()\"\n  [class.edit-mode-element-css]=\"!isEditMode()\"\n  [class.overflow-hidden]=\"!isEditMode()\"\n>\n  @if (selectedValueDisplay()) {\n    <span class=\"p-select-label\" [class.edit-mode-element-css]=\"!isEditMode()\">\n      {{ selectedValueDisplay() }}\n    </span>\n  } @else {\n    <span class=\"p-select-label p-placeholder\">{{ placeHolder() }}</span>\n  }\n\n  @if (isEditMode()) {\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\n          width=\"14\"\n          height=\"14\"\n          viewBox=\"0 0 14 14\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          class=\"p-multiselect-dropdown-icon p-icon\"\n          aria-hidden=\"true\"\n        >\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\"\n          />\n        </svg>\n      </span>\n    </div>\n  }\n</div>\n\n<ng-template #overlayTpl>\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        (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 data.value) {\n          <li\n            class=\"p-select-option flex flex-row gap-2 items-center\"\n            [class.p-select-option-selected]=\"isSelected(data)\"\n          >\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</ng-template>\n", styles: [".p-select-overlay{display:flex;flex-direction:column;max-height:250px;overflow:hidden}.p-select-header{padding:.75rem;border-bottom:1px solid var(--p-surface-border);background:var(--p-content-hover-background);flex-shrink:0;width:100%;box-sizing:border-box}.p-select-header input{background:var(--p-form-field-background);border-color:var(--p-form-field-border-color);color:var(--p-text-color)}.p-select-header input::placeholder{color:var(--p-text-muted-color)}.p-select-list-container{flex:1;overflow-y:auto;min-height:0;width:100%}.p-select-list{margin:0;padding:.25rem 0;list-style:none;background:var(--p-surface-overlay);color:var(--p-text-color);width:100%}.p-select-option{padding:.5rem .75rem;cursor:pointer;transition:background-color .2s ease;color:var(--p-text-color)}.p-select-option:hover{background:var(--p-content-hover-background)}.p-select-option.p-select-option-selected{background:var(--p-highlight-background);color:var(--p-highlight-color)}.p-select-option.p-select-option-selected:hover{background:var(--p-highlight-focus-background);color:var(--p-highlight-focus-color)}.p-select-clear-icon{display:flex;align-items:center;padding:0 .5rem;color:var(--p-text-muted-color);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 }] }], overlayTemplate: [{ type: i0.ViewChild, args: ['overlayTpl', { isSignal: true }] }], placeHolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeHolder", required: false }] }], isEditMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEditMode", required: true }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: true }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: true }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: true }] }], selectDataList: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectDataList", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], onSearch: [{ type: i0.Output, args: ["onSearch"] }], onPagination: [{ type: i0.Output, args: ["onPagination"] }] } });
 
 /**
  * Lazy-loading single select component with search and pagination.
@@ -1677,7 +1558,7 @@ class LazySelectComponent extends BaseFormControl {
         this.markAsTouched();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.5", ngImport: i0, type: LazySelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.5", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.5", 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.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.5", ngImport: i0, type: LazySelectComponent, decorators: [{
             type: Component,
@@ -3281,5 +3162,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-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 };
+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, EVENT_PARTICIPANT_PERMISSIONS, EVENT_PERMISSIONS, EditModeElementChangerDirective, FILE_PERMISSIONS, FILE_TYPE_FILTERS, FOLDER_PERMISSIONS, FORM_PERMISSIONS, FileSelectorDialogComponent, FileUploaderComponent, FileUrlService, HasPermissionDirective, IconComponent, IconTypeEnum, IsEmptyImageDirective, LazyMultiSelectComponent, LazySelectComponent, NOTIFICATION_PERMISSIONS, 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