@flusys/ng-shared 8.1.4 → 9.1.0-rc.1

package/fesm2022/flusys-ng-shared.mjs

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
-import { inject, PLATFORM_ID, Service, DOCUMENT, REQUEST, signal, computed, ElementRef, input, effect, Directive, TemplateRef, ViewContainerRef, output, Pipe, Injector, isDevMode, resource, model, runInInjectionContext, untracked, forwardRef, contentChildren, Component, InjectionToken, DestroyRef, ViewEncapsulation, ApplicationRef, viewChild, afterNextRender } from '@angular/core';
+import { inject, PLATFORM_ID, Service, DOCUMENT, REQUEST, signal, computed, ElementRef, input, effect, Directive, TemplateRef, ViewContainerRef, output, Pipe, Injector, isDevMode, resource, model, runInInjectionContext, untracked, forwardRef, InjectionToken, Component, contentChildren, DestroyRef, ViewEncapsulation, ApplicationRef, viewChild, afterNextRender } from '@angular/core';
 import { isPlatformServer, DOCUMENT as DOCUMENT$1, isPlatformBrowser, NgTemplateOutlet, DatePipe, DecimalPipe } from '@angular/common';
-import { HttpClient, HttpContextToken, HttpHeaders, HttpParams } from '@angular/common/http';
+import { HttpClient, HttpContextToken, HttpErrorResponse, HttpHeaders, HttpParams } from '@angular/common/http';
 import { APP_CONFIG, getServiceUrl, LOCALIZATION_STATE_SERVICE, FALLBACK_MESSAGES_REGISTRY, LOCALIZATION_API_SERVICE, isServiceEnabled } from '@flusys/ng-core';
 import { of, catchError as catchError$1, throwError, firstValueFrom, map as map$1 } from 'rxjs';
 import { map, tap, catchError } from 'rxjs/operators';
 import * as i1 from '@angular/forms';
 import { NgControl, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import { MessageService, CardComponent, InputTextDirective, PasswordComponent, UiIconComponent, InputNumberComponent, TextareaDirective, SelectComponent, MultiSelectComponent, DatePickerComponent, CheckboxComponent, ToggleSwitchComponent, FButtonDirective, ConfirmationService, IconFieldComponent, InputIconComponent, TableComponent, TagComponent, TooltipDirective, ProgressbarComponent, DialogComponent, ButtonComponent, OverlayStackService, attachOverlayPosition } from '@flusys/ng-ui';
+import { MessageService, InputTextDirective, TagComponent, TreeSelectComponent, UiIconComponent, CardComponent, PasswordComponent, InputNumberComponent, TextareaDirective, SelectComponent, MultiSelectComponent, DatePickerComponent, CheckboxComponent, ToggleSwitchComponent, FButtonDirective, ConfirmationService, IconFieldComponent, InputIconComponent, TableComponent, TooltipDirective, ProgressbarComponent, DialogComponent, ButtonComponent, OverlayStackService, attachOverlayPosition } from '@flusys/ng-ui';
 import { Router, RouterLink, RouterLinkActive } from '@angular/router';
 import { DomSanitizer } from '@angular/platform-browser';
 
@@ -113,6 +113,11 @@ const SHARED_MESSAGES = {
     'shared.multi.select.items.selected': '{{count}} Items Selected',
     // components/user-select/base-user-select.class.ts
     'shared.user.select.placeholder': 'Select User',
+    // components/action-select/action-select.component.ts
+    'shared.action.select.placeholder': 'Select a permission',
+    'shared.action.select.placeholder.multiple': 'Select permissions',
+    'shared.action.select.type.code': 'Type a permission code and press Enter',
+    'shared.action.select.empty': 'No permissions found',
     // cross-package shared keys (shared.* — used across feature packages)
     'shared.actions': 'Actions',
     'shared.active': 'Active',
@@ -283,6 +288,32 @@ const FORM_RESULT_PERMISSIONS = {
     UPDATE: 'form-result.update',
     DELETE: 'form-result.delete',
 };
+// ==================== ENTITY BUILDER MODULE ====================
+// Static metadata permissions only - matches nestjs-entity-builder's
+// ENTITY_DEFINITION_PERMISSIONS/FIELD_DEFINITION_PERMISSIONS exactly. Per-dynamic-entity
+// record permissions (`entity_builder.entity.<entityCode>.<action>`) are runtime-computed and
+// have no static constant - flows running as the caller check them per entity step.
+const ENTITY_DEFINITION_PERMISSIONS = {
+    CREATE: 'entity_builder.entity_definition.create',
+    READ: 'entity_builder.entity_definition.read',
+    UPDATE: 'entity_builder.entity_definition.update',
+    DELETE: 'entity_builder.entity_definition.delete',
+};
+const FIELD_DEFINITION_PERMISSIONS = {
+    READ: 'entity_builder.field_definition.read',
+    UPDATE: 'entity_builder.field_definition.update',
+};
+const FLOW_DEFINITION_PERMISSIONS = {
+    CREATE: 'entity_builder.flow_definition.create',
+    READ: 'entity_builder.flow_definition.read',
+    UPDATE: 'entity_builder.flow_definition.update',
+    DELETE: 'entity_builder.flow_definition.delete',
+    TEST: 'entity_builder.flow_definition.test',
+    /** Needed to save a flow that runs as the system (bypassing per-entity permissions). */
+    SYSTEM: 'entity_builder.flow_definition.system',
+    /** Needed to save a flow containing a code node (sandboxed JavaScript). */
+    CODE: 'entity_builder.flow_definition.code',
+};
 // ==================== EVENT MANAGER MODULE ====================
 const EVENT_PERMISSIONS = {
     CREATE: 'event.create',
@@ -606,11 +637,21 @@ class TranslateService {
         }
         return this.interpolate(value, params);
     }
+    translateRef(ref) {
+        const params = {};
+        for (const [name, value] of Object.entries(ref.messageVariables ?? {})) {
+            params[name] = this.isMessageRef(value) ? this.translateRef(value) : value;
+        }
+        return this.translate(ref.messageKey, params);
+    }
     translateSignal(key, params) {
         return computed(() => {
             return this.translate(key, params);
         });
     }
+    isMessageRef(value) {
+        return typeof value === 'object' && value !== null && typeof value.messageKey === 'string';
+    }
     interpolate(template, params) {
         if (!params || !template)
             return template;
@@ -933,6 +974,8 @@ class TranslatePipe {
     transform(key, params, fallback) {
         if (!key)
             return fallback ?? '';
+        if (typeof key === 'object')
+            return this.translateAdapter.translateRef(key);
         const result = this.translateAdapter.translate(key, params ?? undefined);
         return fallback !== undefined && result === key ? fallback : result;
     }
@@ -959,6 +1002,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
  * ```
  */
 const SKIP_ERROR_TOAST = new HttpContextToken(() => false);
+/** 401 is handled by tokenRefreshInterceptor, 403 by the permission-denied UI. */
+const SILENT_STATUSES = new Set([401, 403]);
+const isCheckLoginUrl = (url) => !!url?.includes('/check-login');
+/**
+ * Whether errorCatchingInterceptor already showed this failure as a toast, so a caller's own
+ * catch block adds one only for failures the user has not been told about yet.
+ */
+function isErrorToastShown(error) {
+    return error instanceof HttpErrorResponse && !SILENT_STATUSES.has(error.status) && !isCheckLoginUrl(error.url);
+}
 /**
  * Error Catching Interceptor
  * Displays error messages for failed HTTP requests using backend response.
@@ -991,7 +1044,7 @@ function errorCatchingInterceptor(req, next) {
     const translateAdapter = inject(TranslateService, { optional: true });
     const isBrowser = isPlatformBrowser(platformId);
     // Skip error display for check-login (expected to fail when not logged in)
-    const isCheckLogin = req.url.includes('/check-login');
+    const isCheckLogin = isCheckLoginUrl(req.url);
     // Skip if component handles error locally
     const skipErrorToast = req.context.get(SKIP_ERROR_TOAST);
     return next(req).pipe(catchError$1((error) => {
@@ -999,10 +1052,7 @@ function errorCatchingInterceptor(req, next) {
         // Skip 403 errors - handled by permission denied UI in components
         // Skip check-login errors - expected behavior
         // Skip if component handles error locally
-        if (error.status === 401 ||
-            error.status === 403 ||
-            isCheckLogin ||
-            skipErrorToast) {
+        if (SILENT_STATUSES.has(error.status) || isCheckLogin || skipErrorToast) {
             return throwError(() => error);
         }
         // Display error message for other errors
@@ -1028,8 +1078,8 @@ function extractErrorInfo(error, translateAdapter) {
     const messageVariables = error.error?.messageVariables;
     let detail;
     if (messageKey && translateAdapter) {
-        // Use translated message if available
-        detail = translateAdapter.translate(messageKey, messageVariables);
+        // translateRef also translates variables that are message refs themselves (a nested reason)
+        detail = translateAdapter.translateRef({ messageKey, messageVariables });
     }
     else if (typeof error.error?.message === 'string') {
         detail = error.error.message;
@@ -1299,39 +1349,39 @@ class ApiResourceService {
     // ==========================================================================
     // Promise API  (IApiService implementation)
     // ==========================================================================
-    // ── DRY helper: all promise methods are one-liners via this ───────────────
-    _post(endpoint, body, params) {
+    // ── DRY helper: all promise methods are one-liners via this; subclasses use it for their own endpoints ──
+    post(endpoint, body, params) {
         return firstValueFrom(this.http.post(`${this.baseUrl}/${endpoint}`, body, this.getHttpOptions(endpoint, params)));
     }
     insert(dto) {
-        return this._post('insert', dto);
+        return this.post('insert', dto);
     }
     insertMany(dtos) {
-        return this._post('insert-many', dtos);
+        return this.post('insert-many', dtos);
     }
     findById(id, select) {
-        return this._post(`get/${id}`, { select });
+        return this.post(`get/${id}`, { select });
     }
     getAll(filter, search = '') {
         return firstValueFrom(this._getAllObs(filter, search));
     }
     update(dto) {
-        return this._post('update', dto);
+        return this.post('update', dto);
     }
     updateMany(dtos) {
-        return this._post('update-many', dtos);
+        return this.post('update-many', dtos);
     }
     delete(deleteDto) {
-        return this._post('delete', deleteDto);
+        return this.post('delete', deleteDto);
     }
     findByIds(ids, select) {
-        return this._post('get-by-ids', { ids, select });
+        return this.post('get-by-ids', { ids, select });
     }
     getByFilter(filter) {
-        return this._post('get-by-filter', filter);
+        return this.post('get-by-filter', filter);
     }
     async bulkUpsert(toInsert, toUpdate) {
-        const res = await this._post('bulk-upsert', [
+        const res = await this.post('bulk-upsert', [
             ...toInsert,
             ...toUpdate,
         ]);
@@ -1432,6 +1482,370 @@ function provideValueAccessor(component) {
     };
 }
 
+/**
+ * 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');
+    },
+});
+/**
+ * Auth State Provider Token
+ *
+ * Provides auth state access for feature packages (form-builder, etc.)
+ */
+const AUTH_STATE_PROVIDER = new InjectionToken('AUTH_STATE_PROVIDER', {
+    providedIn: 'root',
+    factory: () => {
+        throw new Error('AUTH_STATE_PROVIDER not configured. Please provide an implementation in app.config.ts');
+    },
+});
+/**
+ * Profile Permission Provider Token
+ *
+ * Provides user permission data for profile display.
+ * Optional - if not configured, profile permissions section is hidden.
+ * Use with `inject(PROFILE_PERMISSION_PROVIDER, { optional: true })`.
+ */
+const PROFILE_PERMISSION_PROVIDER = new InjectionToken('PROFILE_PERMISSION_PROVIDER');
+/**
+ * File Provider Token
+ *
+ * Provides file loading and upload functionality for file selectors.
+ * Optional - if not configured, file selector requires loadFiles/uploadFile inputs.
+ * Use with `inject(FILE_PROVIDER, { optional: true })`.
+ *
+ * @example
+ * // In app.config.ts
+ * providers: [
+ *   { provide: FILE_PROVIDER, useClass: StorageFileProvider },
+ * ]
+ */
+const FILE_PROVIDER = new InjectionToken('FILE_PROVIDER');
+/**
+ * Action Provider Token
+ *
+ * Lists permission actions for pickers such as `lib-action-select`.
+ * Optional - if not configured, permission pickers fall back to a free-text code input.
+ * Use with `inject(ACTION_PROVIDER, { optional: true })`.
+ */
+const ACTION_PROVIDER = new InjectionToken('ACTION_PROVIDER');
+
+function byOrder(a, b) {
+    return (a.serial ?? Number.MAX_SAFE_INTEGER) - (b.serial ?? Number.MAX_SAFE_INTEGER) || a.name.localeCompare(b.name);
+}
+/** Nests actions by parentId; code-less groups can only be expanded, and groups with nothing pickable are dropped. */
+function buildActionTree(actions) {
+    const ids = new Set(actions.map((a) => a.id));
+    const byParent = new Map();
+    for (const action of actions) {
+        const parentId = action.parentId && ids.has(action.parentId) ? action.parentId : null;
+        byParent.set(parentId, [...(byParent.get(parentId) ?? []), action]);
+    }
+    const build = (parentId) => [...(byParent.get(parentId) ?? [])].sort(byOrder).flatMap((action) => {
+        const children = build(action.id);
+        if (!action.code && !children.length)
+            return [];
+        return [{
+                key: action.code ?? `group:${action.id}`,
+                label: action.name,
+                code: action.code ?? '',
+                selectable: !!action.code,
+                leaf: !children.length,
+                children: children.length ? children : undefined,
+            }];
+    });
+    return build(null);
+}
+/** Shared action loading for the single and multi permission pickers. */
+class BaseActionSelectComponent {
+    provider = inject(ACTION_PROVIDER, { optional: true });
+    placeholder = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    inputId = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    hasProvider = !!this.provider && this.provider.isAvailable?.() !== false;
+    actions = resource({ ...(ngDevMode ? { debugName: "actions" } : /* istanbul ignore next */ {}), loader: async () => {
+            const provider = this.hasProvider ? this.provider : null;
+            if (!provider)
+                return [];
+            const response = await firstValueFrom(provider.getActions());
+            return response.data ?? [];
+        } });
+    /** Picker mode; typing codes is the fallback when there is no provider or the actions could not be loaded. */
+    useSelect = computed(() => this.hasProvider && !this.actions.error(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "useSelect" }] : /* istanbul ignore next */ []));
+    actionTree = computed(() => buildActionTree(this.actions.hasValue() ? this.actions.value() : []), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "actionTree" }] : /* istanbul ignore next */ []));
+    knownCodes = computed(() => new Set((this.actions.hasValue() ? this.actions.value() : []).flatMap((a) => (a.code ? [a.code] : []))), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "knownCodes" }] : /* istanbul ignore next */ []));
+    /** The action tree plus any saved code that is not (or no longer) an action, so the selection still shows. */
+    treeWith(saved) {
+        const known = this.knownCodes();
+        const unknown = saved.filter((code) => !known.has(code)).map((code) => ({ key: code, label: code, code, leaf: true }));
+        return [...unknown, ...this.actionTree()];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: BaseActionSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.5", type: BaseActionSelectComponent, isStandalone: true, inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: BaseActionSelectComponent, decorators: [{
+            type: Directive
+        }], propDecorators: { placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+/**
+ * Picks several permission action codes from the action tree of ACTION_PROVIDER (wired by ng-iam);
+ * without an available provider, or when loading fails, it falls back to typing codes as chips (Enter adds one).
+ *
+ * @example
+ * <lib-action-multi-select [(value)]="actionGroups" inputId="actionGroups" />
+ */
+class ActionMultiSelectComponent extends BaseActionSelectComponent {
+    value = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    draft = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
+    options = computed(() => this.treeWith(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    add(event) {
+        event.preventDefault();
+        const code = this.draft().trim();
+        if (code && !this.value().includes(code))
+            this.value.set([...this.value(), code]);
+        this.draft.set('');
+    }
+    remove(code) {
+        this.value.set(this.value().filter((c) => c !== code));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ActionMultiSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: ActionMultiSelectComponent, isStandalone: true, selector: "lib-action-multi-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "block w-full min-w-0" }, usesInheritance: true, ngImport: i0, template: `
+    @if (useSelect()) {
+      <f-treeselect
+        [inputId]="inputId()"
+        [options]="options()"
+        selectionMode="checkbox"
+        [propagateSelectionDown]="false"
+        [propagateSelectionUp]="false"
+        display="chip"
+        filterBy="label,code"
+        [filter]="true"
+        [showClear]="true"
+        [disabled]="disabled()"
+        [placeholder]="placeholder() || ('shared.action.select.placeholder.multiple' | translate)"
+        [emptyMessage]="'shared.action.select.empty' | translate"
+        [ngModel]="value()"
+        (ngModelChange)="value.set($event ?? [])"
+      />
+    } @else {
+      <div class="flex flex-wrap items-center gap-1">
+        @for (code of value(); track code) {
+          <f-tag [rounded]="true" severity="secondary">
+            <span class="flex items-center gap-1 font-mono text-xs">
+              {{ code }}
+              @if (!disabled()) {
+                <button type="button" class="cursor-pointer hover:text-danger" [attr.aria-label]="'shared.remove' | translate" (click)="remove(code)">
+                  <ui-icon name="x" [size]="12" />
+                </button>
+              }
+            </span>
+          </f-tag>
+        }
+        <input
+          fInputText
+          class="flex-1 min-w-40"
+          [id]="inputId()"
+          [disabled]="disabled()"
+          [placeholder]="placeholder() || ('shared.action.select.type.code' | translate)"
+          [ngModel]="draft()"
+          (ngModelChange)="draft.set($event)"
+          (keydown.enter)="add($event)"
+        />
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched", "variant", "size", "fluid"] }, { kind: "component", type: TagComponent, selector: "f-tag", inputs: ["value", "severity", "icon", "rounded", "color", "styleClass", "style"] }, { kind: "component", type: TreeSelectComponent, selector: "f-treeselect", inputs: ["options", "placeholder", "inputId", "disabled", "filter", "filterBy", "selectionMode", "display", "propagateSelectionDown", "propagateSelectionUp", "showClear", "virtualScroll", "virtualScrollItemSize", "emptyMessage", "invalid", "touched", "styleClass", "style", "appendTo"] }, { kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ActionMultiSelectComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-action-multi-select',
+                    imports: [FormsModule, InputTextDirective, TagComponent, TreeSelectComponent, UiIconComponent, TranslatePipe],
+                    host: { class: 'block w-full min-w-0' },
+                    template: `
+    @if (useSelect()) {
+      <f-treeselect
+        [inputId]="inputId()"
+        [options]="options()"
+        selectionMode="checkbox"
+        [propagateSelectionDown]="false"
+        [propagateSelectionUp]="false"
+        display="chip"
+        filterBy="label,code"
+        [filter]="true"
+        [showClear]="true"
+        [disabled]="disabled()"
+        [placeholder]="placeholder() || ('shared.action.select.placeholder.multiple' | translate)"
+        [emptyMessage]="'shared.action.select.empty' | translate"
+        [ngModel]="value()"
+        (ngModelChange)="value.set($event ?? [])"
+      />
+    } @else {
+      <div class="flex flex-wrap items-center gap-1">
+        @for (code of value(); track code) {
+          <f-tag [rounded]="true" severity="secondary">
+            <span class="flex items-center gap-1 font-mono text-xs">
+              {{ code }}
+              @if (!disabled()) {
+                <button type="button" class="cursor-pointer hover:text-danger" [attr.aria-label]="'shared.remove' | translate" (click)="remove(code)">
+                  <ui-icon name="x" [size]="12" />
+                </button>
+              }
+            </span>
+          </f-tag>
+        }
+        <input
+          fInputText
+          class="flex-1 min-w-40"
+          [id]="inputId()"
+          [disabled]="disabled()"
+          [placeholder]="placeholder() || ('shared.action.select.type.code' | translate)"
+          [ngModel]="draft()"
+          (ngModelChange)="draft.set($event)"
+          (keydown.enter)="add($event)"
+        />
+      </div>
+    }
+  `,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+
+/**
+ * Picks a permission action code from the action tree of ACTION_PROVIDER (wired by ng-iam);
+ * without an available provider, or when loading fails, it falls back to a free-text code input.
+ *
+ * @example
+ * <lib-action-select [(value)]="permissionCode" inputId="permission" [placeholder]="defaultCode" />
+ */
+class ActionSelectComponent extends BaseActionSelectComponent {
+    value = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    showClear = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showClear" }] : /* istanbul ignore next */ []));
+    options = computed(() => {
+        const current = this.value();
+        return this.treeWith(current ? [current] : []);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ActionSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: ActionSelectComponent, isStandalone: true, selector: "lib-action-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "block w-full min-w-0" }, usesInheritance: true, ngImport: i0, template: `
+    @if (useSelect()) {
+      <f-treeselect
+        [inputId]="inputId()"
+        [options]="options()"
+        filterBy="label,code"
+        [filter]="true"
+        [showClear]="showClear()"
+        [disabled]="disabled()"
+        [placeholder]="placeholder() || ('shared.action.select.placeholder' | translate)"
+        [emptyMessage]="'shared.action.select.empty' | translate"
+        [ngModel]="value()"
+        (ngModelChange)="value.set($event ?? null)"
+      />
+    } @else {
+      <input
+        fInputText
+        class="w-full"
+        [id]="inputId()"
+        [disabled]="disabled()"
+        [placeholder]="placeholder()"
+        [ngModel]="value() ?? ''"
+        (ngModelChange)="value.set($event || null)"
+      />
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched", "variant", "size", "fluid"] }, { kind: "component", type: TreeSelectComponent, selector: "f-treeselect", inputs: ["options", "placeholder", "inputId", "disabled", "filter", "filterBy", "selectionMode", "display", "propagateSelectionDown", "propagateSelectionUp", "showClear", "virtualScroll", "virtualScrollItemSize", "emptyMessage", "invalid", "touched", "styleClass", "style", "appendTo"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: ActionSelectComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lib-action-select',
+                    imports: [FormsModule, InputTextDirective, TreeSelectComponent, TranslatePipe],
+                    host: { class: 'block w-full min-w-0' },
+                    template: `
+    @if (useSelect()) {
+      <f-treeselect
+        [inputId]="inputId()"
+        [options]="options()"
+        filterBy="label,code"
+        [filter]="true"
+        [showClear]="showClear()"
+        [disabled]="disabled()"
+        [placeholder]="placeholder() || ('shared.action.select.placeholder' | translate)"
+        [emptyMessage]="'shared.action.select.empty' | translate"
+        [ngModel]="value()"
+        (ngModelChange)="value.set($event ?? null)"
+      />
+    } @else {
+      <input
+        fInputText
+        class="w-full"
+        [id]="inputId()"
+        [disabled]="disabled()"
+        [placeholder]="placeholder()"
+        [ngModel]="value() ?? ''"
+        (ngModelChange)="value.set($event || null)"
+      />
+    }
+  `,
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", required: false }] }] } });
+
 class BaseFormTemplateDirective {
     key = input.required({ ...(ngDevMode ? { debugName: "key" } : /* istanbul ignore next */ {}), alias: 'baseFormTemplate' });
     templateRef = inject((TemplateRef));
@@ -1913,94 +2327,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                     ], template: "<f-card>\n  <ng-template #header>\n    @if (title() || searchable() || showCreateButton()) {\n      <div\n        class=\"flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 p-4\"\n      >\n        @if (title()) {\n          <h2 class=\"text-xl font-semibold m-0\">{{ title() }}</h2>\n        }\n        <div class=\"flex items-center gap-2\" [class.ml-auto]=\"!!title()\">\n          @if (searchable()) {\n            <f-iconfield>\n              <f-inputicon icon=\"search\" />\n              <input\n                fInputText\n                type=\"text\"\n                [ngModel]=\"searchTerm()\"\n                (ngModelChange)=\"onSearchChange($event)\"\n                [placeholder]=\"t('shared.search')\"\n              />\n            </f-iconfield>\n          }\n          @if (showCreateButton()) {\n            <button fButton (click)=\"handleCreate()\">\n              <ui-icon pButtonIcon [name]=\"createButtonIcon()\"></ui-icon>\n              <span pButtonLabel>{{ resolvedCreateLabel() }}</span>\n            </button>\n          }\n        </div>\n      </div>\n    }\n  </ng-template>\n\n  <div class=\"overflow-x-auto\">\n    <f-table\n      [value]=\"effectiveData()\"\n      [loading]=\"effectiveIsLoading()\"\n      [lazy]=\"true\"\n      [scrollable]=\"true\"\n      [scrollHeight]=\"scrollHeight()\"\n      [paginator]=\"effectiveTotal() > pageSize()\"\n      [rows]=\"pageSize()\"\n      [totalRecords]=\"effectiveTotal()\"\n      [first]=\"first()\"\n      (onLazyLoad)=\"handleLazyLoad($event)\"\n      [showCurrentPageReport]=\"true\"\n      [currentPageReportTemplate]=\"t('shared.pagination.report')\"\n      class=\"p-datatable-striped\"\n    >\n      <ng-template #header>\n        <tr>\n          @for (col of visibleColumns(); track col.field) {\n            <th\n              [style.width]=\"col.width\"\n              [style.min-width]=\"col.minWidth\"\n              [class]=\"getCellClass(col)\"\n            >\n              {{ col.header }}\n            </th>\n          }\n          @if (effectiveActions().length > 0) {\n            <th style=\"width: 120px; text-align: center\">\n              {{ t(\"shared.actions\") }}\n            </th>\n          }\n        </tr>\n      </ng-template>\n\n      <ng-template #body let-item>\n        <tr>\n          @for (col of visibleColumns(); track col.field) {\n            <td [class]=\"getCellClass(col)\">\n              @switch (col.type ?? \"text\") {\n                @case (\"tag\") {\n                  @if (\n                    getTagConfig(col, getFieldValue(item, col.field));\n                    as tagCfg\n                  ) {\n                    <f-tag\n                      [severity]=\"tagCfg.severity\"\n                      [value]=\"\n                        tagCfg.label ?? getFieldValueAsString(item, col.field)\n                      \"\n                    />\n                  } @else {\n                    {{ getFieldValueAsString(item, col.field) }}\n                  }\n                }\n                @case (\"boolean\") {\n                  <f-tag\n                    [severity]=\"\n                      getFieldValue(item, col.field) ? 'success' : 'danger'\n                    \"\n                    [value]=\"\n                      getFieldValue(item, col.field)\n                        ? t('shared.yes')\n                        : t('shared.no')\n                    \"\n                  />\n                }\n                @case (\"date\") {\n                  {{\n                    getFieldValueAsString(item, col.field)\n                      | date: col.dateFormat ?? \"dd/MM/yyyy\"\n                  }}\n                }\n                @case (\"number\") {\n                  {{ getFieldValueAsString(item, col.field) | number }}\n                }\n                @case (\"custom\") {\n                  <ng-container\n                    [ngTemplateOutlet]=\"getColumnTemplate(col.field)\"\n                    [ngTemplateOutletContext]=\"{ $implicit: item, field: col.field }\"\n                  />\n                }\n                @default {\n                  {{\n                    truncateText(getFieldValue(item, col.field), col.truncate)\n                  }}\n                }\n              }\n            </td>\n          }\n          @if (effectiveActions().length > 0) {\n            <td>\n              <div class=\"flex items-center justify-center gap-2\">\n                @for (action of effectiveActions(); track $index) {\n                  @if (!action.show || action.show(item)) {\n                    <button\n                      fButton\n                      [severity]=\"action.severity ?? 'secondary'\"\n                      [fTooltip]=\"action.tooltip ? t(action.tooltip) : ''\"\n                      [disabled]=\"\n                        action.disabled ? action.disabled(item) : false\n                      \"\n                      (click)=\"action.handler(item)\"\n                      [rounded]=\"true\"\n                      [text]=\"true\"\n                    >\n                      <ui-icon pButtonIcon [name]=\"action.icon\"></ui-icon>\n                    </button>\n                  }\n                }\n              </div>\n            </td>\n          }\n        </tr>\n      </ng-template>\n\n      <ng-template #emptymessage>\n        <tr>\n          <td [attr.colspan]=\"columnCount()\">\n            <div\n              class=\"flex flex-col items-center justify-center py-12 text-surface-400\"\n            >\n              <ui-icon name=\"inbox\" class=\"text-5xl mb-3\"></ui-icon>\n              <span>{{ resolvedEmptyMessage() }}</span>\n            </div>\n          </td>\n        </tr>\n      </ng-template>\n    </f-table>\n  </div>\n</f-card>\n" }]
         }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], showCreateButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCreateButton", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], scrollHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollHeight", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], createButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "createButtonLabel", required: false }] }], createButtonIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "createButtonIcon", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], service: [{ type: i0.Input, args: [{ isSignal: true, alias: "service", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], createRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "createRoute", required: false }] }], editRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "editRoute", required: false }] }], deleteConfirmField: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteConfirmField", required: false }] }], deleteType: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteType", required: false }] }], idField: [{ type: i0.Input, args: [{ isSignal: true, alias: "idField", required: false }] }], canEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "canEdit", required: false }] }], canDelete: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDelete", required: false }] }], onCreate: [{ type: i0.Output, args: ["onCreate"] }], onLazyLoad: [{ type: i0.Output, args: ["onLazyLoad"] }], onSearch: [{ type: i0.Output, args: ["onSearch"] }], columnTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => BaseListTemplateDirective), { 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');
-    },
-});
-/**
- * Auth State Provider Token
- *
- * Provides auth state access for feature packages (form-builder, etc.)
- */
-const AUTH_STATE_PROVIDER = new InjectionToken('AUTH_STATE_PROVIDER', {
-    providedIn: 'root',
-    factory: () => {
-        throw new Error('AUTH_STATE_PROVIDER not configured. Please provide an implementation in app.config.ts');
-    },
-});
-/**
- * Profile Permission Provider Token
- *
- * Provides user permission data for profile display.
- * Optional - if not configured, profile permissions section is hidden.
- * Use with `inject(PROFILE_PERMISSION_PROVIDER, { optional: true })`.
- */
-const PROFILE_PERMISSION_PROVIDER = new InjectionToken('PROFILE_PERMISSION_PROVIDER');
-/**
- * File Provider Token
- *
- * Provides file loading and upload functionality for file selectors.
- * Optional - if not configured, file selector requires loadFiles/uploadFile inputs.
- * Use with `inject(FILE_PROVIDER, { optional: true })`.
- *
- * @example
- * // In app.config.ts
- * providers: [
- *   { provide: FILE_PROVIDER, useClass: StorageFileProvider },
- * ]
- */
-const FILE_PROVIDER = new InjectionToken('FILE_PROVIDER');
-
 /**
  * Check if scroll has reached near bottom and calculate next page if available.
  * Returns next pagination if should load more, null otherwise.
@@ -3749,7 +4075,7 @@ class LazyMultiSelectComponent extends BaseFormControl {
         return key;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: LazyMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: LazyMultiSelectComponent, isStandalone: true, selector: "lib-lazy-multi-select", inputs: { placeHolder: { classPropertyName: "placeHolder", publicName: "placeHolder", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", 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 }, selectedObjects: { classPropertyName: "selectedObjects", publicName: "selectedObjects", isSignal: true, isRequired: false, 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=\"w-full flex items-center justify-between px-3 py-2 text-sm rounded-lg border border-(--f-form-field-border-color) bg-(--f-form-field-background) cursor-pointer min-h-[34px]\"\n  #pSelect\n  (click)=\"onSelectClick()\"\n  [class.opacity-50]=\"disabled()\"\n  [class.pointer-events-none]=\"disabled()\"\n  [class.edit-mode-element-css]=\"!isEditMode()\"\n  [class.overflow-hidden]=\"!isEditMode()\"\n>\n  @if (selectedValueDisplay()) {\n    <span\n      class=\"flex-1 truncate text-(--f-form-field-color)\"\n      [class.edit-mode-element-css]=\"!isEditMode()\"\n    >\n      {{ selectedValueDisplay() }}\n    </span>\n  } @else {\n    <span class=\"flex-1 truncate text-(--f-form-field-placeholder-color)\">{{\n      displayPlaceholder()\n    }}</span>\n  }\n\n  @if (showClear() && hasSelectedValues()) {\n    <span\n      class=\"inline-flex items-center px-1 text-(--f-text-muted-color) hover:text-(--f-text-hover-color) cursor-pointer\"\n      (click)=\"clear($event)\"\n    >\n      <ui-icon name=\"times\" class=\"text-xs\"></ui-icon>\n    </span>\n  }\n\n  @if (isEditMode()) {\n    <span\n      class=\"inline-flex items-center px-1 text-(--f-form-field-placeholder-color)\"\n    >\n      <ui-icon name=\"chevron-down\" class=\"text-xs\"></ui-icon>\n    </span>\n  }\n</div>\n\n<ng-template #overlayTpl>\n  <div\n    class=\"flex flex-col max-h-[250px] overflow-hidden\"\n    (click)=\"onOverlayClick($event)\"\n  >\n    <div\n      class=\"p-3 border-b border-(--f-content-border-color) bg-(--f-content-hover-background) shrink-0 w-full flex flex-row gap-2 items-center\"\n    >\n      <f-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"isSelectAll()\"\n        [disabled]=\"disabled()\"\n        (onChange)=\"changeSelectAll($event)\"\n      />\n      <input\n        type=\"text\"\n        fInputText\n        class=\"w-full\"\n        [placeholder]=\"'shared.search' | translate\"\n        [ngModel]=\"searchTerm()\"\n        (ngModelChange)=\"searchTerm.set($event)\"\n      />\n    </div>\n    <div\n      class=\"flex-1 overflow-y-auto min-h-0 w-full\"\n      (scroll)=\"onScroll($event)\"\n    >\n      <ul\n        class=\"m-0 py-1 list-none bg-(--f-overlay-popover-background) text-(--f-text-color) w-full\"\n      >\n        @for (data of mergedDataList(); track data.value) {\n          @let isItemSelected = isSelected(data);\n          <li\n            class=\"px-3 py-2 cursor-pointer transition-colors flex flex-row gap-2 items-center text-sm\"\n            [class]=\"\n              isItemSelected\n                ? 'bg-primary/10 text-primary'\n                : 'text-(--f-text-color) hover:bg-(--f-content-hover-background)'\n            \"\n          >\n            <f-checkbox\n              [binary]=\"true\"\n              [ngModel]=\"isItemSelected\"\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", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "component", type: CheckboxComponent, selector: "f-checkbox", inputs: ["label", "binary", "disabled", "readonly", "inputId", "invalid", "indeterminate", "variant", "size", "touched", "styleClass", "style", "checked"], outputs: ["onChange", "onBlur", "touch", "checkedChange"] }, { kind: "directive", type: InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched", "variant", "size", "fluid"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: LazyMultiSelectComponent, isStandalone: true, selector: "lib-lazy-multi-select", inputs: { placeHolder: { classPropertyName: "placeHolder", publicName: "placeHolder", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", 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 }, selectedObjects: { classPropertyName: "selectedObjects", publicName: "selectedObjects", isSignal: true, isRequired: false, 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=\"w-full flex items-center justify-between px-3 py-2 text-sm rounded-lg border border-(--f-form-field-border-color) bg-(--f-form-field-background) cursor-pointer min-h-[34px]\"\n  #pSelect\n  (click)=\"onSelectClick()\"\n  [class.opacity-50]=\"disabled()\"\n  [class.pointer-events-none]=\"disabled()\"\n  [class.edit-mode-element-css]=\"!isEditMode()\"\n  [class.overflow-hidden]=\"!isEditMode()\"\n>\n  @if (selectedValueDisplay()) {\n    <span\n      class=\"flex-1 truncate text-(--f-form-field-color)\"\n      [class.edit-mode-element-css]=\"!isEditMode()\"\n    >\n      {{ selectedValueDisplay() }}\n    </span>\n  } @else {\n    <span class=\"flex-1 truncate text-(--f-form-field-placeholder-color)\">{{\n      displayPlaceholder()\n    }}</span>\n  }\n\n  @if (showClear() && hasSelectedValues()) {\n    <span\n      class=\"inline-flex items-center px-1 text-(--f-text-muted-color) hover:text-(--f-text-hover-color) cursor-pointer\"\n      (click)=\"clear($event)\"\n    >\n      <ui-icon name=\"times\" class=\"text-xs\"></ui-icon>\n    </span>\n  }\n\n  @if (isEditMode()) {\n    <span\n      class=\"inline-flex items-center px-1 text-(--f-form-field-placeholder-color)\"\n    >\n      <ui-icon name=\"chevron-down\" class=\"text-xs\"></ui-icon>\n    </span>\n  }\n</div>\n\n<ng-template #overlayTpl>\n  <div\n    class=\"flex flex-col max-h-[250px] overflow-hidden\"\n    (click)=\"onOverlayClick($event)\"\n  >\n    <div\n      class=\"p-3 border-b border-(--f-content-border-color) bg-(--f-content-hover-background) shrink-0 w-full flex flex-row gap-2 items-center\"\n    >\n      <f-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"isSelectAll()\"\n        [disabled]=\"disabled()\"\n        (onChange)=\"changeSelectAll($event)\"\n      />\n      <input\n        type=\"text\"\n        fInputText\n        class=\"w-full\"\n        [placeholder]=\"'shared.search' | translate\"\n        [ngModel]=\"searchTerm()\"\n        (ngModelChange)=\"searchTerm.set($event)\"\n      />\n    </div>\n    <div\n      class=\"flex-1 overflow-y-auto min-h-0 w-full\"\n      (scroll)=\"onScroll($event)\"\n    >\n      <ul\n        class=\"m-0 py-1 list-none bg-(--f-overlay-popover-background) text-(--f-text-color) w-full\"\n      >\n        @for (data of mergedDataList(); track data.value) {\n          @let isItemSelected = isSelected(data);\n          <li\n            class=\"px-3 py-2 cursor-pointer transition-colors flex flex-row gap-2 items-center text-sm\"\n            [class]=\"\n              isItemSelected\n                ? 'bg-primary/10 text-primary'\n                : 'text-(--f-text-color) hover:bg-(--f-content-hover-background)'\n            \"\n          >\n            <f-checkbox\n              [binary]=\"true\"\n              [ngModel]=\"isItemSelected\"\n              [disabled]=\"disabled()\"\n              (onChange)=\"selectValue($event, data)\"\n            />\n            <span class=\"flex flex-col min-w-0 flex-1\">\n              <span class=\"truncate\">{{ data.label }}</span>\n              @if (data.subLabel) {\n                <span class=\"truncate text-xs text-(--f-text-muted-color)\">{{\n                  data.subLabel\n                }}</span>\n              }\n            </span>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "component", type: CheckboxComponent, selector: "f-checkbox", inputs: ["label", "binary", "disabled", "readonly", "inputId", "invalid", "indeterminate", "variant", "size", "touched", "styleClass", "style", "checked"], outputs: ["onChange", "onBlur", "touch", "checkedChange"] }, { kind: "directive", type: InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched", "variant", "size", "fluid"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: LazyMultiSelectComponent, decorators: [{
             type: Component,
@@ -3759,7 +4085,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                         CheckboxComponent,
                         InputTextDirective,
                         TranslatePipe,
-                    ], providers: [provideValueAccessor(LazyMultiSelectComponent)], template: "<div\n  class=\"w-full flex items-center justify-between px-3 py-2 text-sm rounded-lg border border-(--f-form-field-border-color) bg-(--f-form-field-background) cursor-pointer min-h-[34px]\"\n  #pSelect\n  (click)=\"onSelectClick()\"\n  [class.opacity-50]=\"disabled()\"\n  [class.pointer-events-none]=\"disabled()\"\n  [class.edit-mode-element-css]=\"!isEditMode()\"\n  [class.overflow-hidden]=\"!isEditMode()\"\n>\n  @if (selectedValueDisplay()) {\n    <span\n      class=\"flex-1 truncate text-(--f-form-field-color)\"\n      [class.edit-mode-element-css]=\"!isEditMode()\"\n    >\n      {{ selectedValueDisplay() }}\n    </span>\n  } @else {\n    <span class=\"flex-1 truncate text-(--f-form-field-placeholder-color)\">{{\n      displayPlaceholder()\n    }}</span>\n  }\n\n  @if (showClear() && hasSelectedValues()) {\n    <span\n      class=\"inline-flex items-center px-1 text-(--f-text-muted-color) hover:text-(--f-text-hover-color) cursor-pointer\"\n      (click)=\"clear($event)\"\n    >\n      <ui-icon name=\"times\" class=\"text-xs\"></ui-icon>\n    </span>\n  }\n\n  @if (isEditMode()) {\n    <span\n      class=\"inline-flex items-center px-1 text-(--f-form-field-placeholder-color)\"\n    >\n      <ui-icon name=\"chevron-down\" class=\"text-xs\"></ui-icon>\n    </span>\n  }\n</div>\n\n<ng-template #overlayTpl>\n  <div\n    class=\"flex flex-col max-h-[250px] overflow-hidden\"\n    (click)=\"onOverlayClick($event)\"\n  >\n    <div\n      class=\"p-3 border-b border-(--f-content-border-color) bg-(--f-content-hover-background) shrink-0 w-full flex flex-row gap-2 items-center\"\n    >\n      <f-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"isSelectAll()\"\n        [disabled]=\"disabled()\"\n        (onChange)=\"changeSelectAll($event)\"\n      />\n      <input\n        type=\"text\"\n        fInputText\n        class=\"w-full\"\n        [placeholder]=\"'shared.search' | translate\"\n        [ngModel]=\"searchTerm()\"\n        (ngModelChange)=\"searchTerm.set($event)\"\n      />\n    </div>\n    <div\n      class=\"flex-1 overflow-y-auto min-h-0 w-full\"\n      (scroll)=\"onScroll($event)\"\n    >\n      <ul\n        class=\"m-0 py-1 list-none bg-(--f-overlay-popover-background) text-(--f-text-color) w-full\"\n      >\n        @for (data of mergedDataList(); track data.value) {\n          @let isItemSelected = isSelected(data);\n          <li\n            class=\"px-3 py-2 cursor-pointer transition-colors flex flex-row gap-2 items-center text-sm\"\n            [class]=\"\n              isItemSelected\n                ? 'bg-primary/10 text-primary'\n                : 'text-(--f-text-color) hover:bg-(--f-content-hover-background)'\n            \"\n          >\n            <f-checkbox\n              [binary]=\"true\"\n              [ngModel]=\"isItemSelected\"\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" }]
+                    ], providers: [provideValueAccessor(LazyMultiSelectComponent)], template: "<div\n  class=\"w-full flex items-center justify-between px-3 py-2 text-sm rounded-lg border border-(--f-form-field-border-color) bg-(--f-form-field-background) cursor-pointer min-h-[34px]\"\n  #pSelect\n  (click)=\"onSelectClick()\"\n  [class.opacity-50]=\"disabled()\"\n  [class.pointer-events-none]=\"disabled()\"\n  [class.edit-mode-element-css]=\"!isEditMode()\"\n  [class.overflow-hidden]=\"!isEditMode()\"\n>\n  @if (selectedValueDisplay()) {\n    <span\n      class=\"flex-1 truncate text-(--f-form-field-color)\"\n      [class.edit-mode-element-css]=\"!isEditMode()\"\n    >\n      {{ selectedValueDisplay() }}\n    </span>\n  } @else {\n    <span class=\"flex-1 truncate text-(--f-form-field-placeholder-color)\">{{\n      displayPlaceholder()\n    }}</span>\n  }\n\n  @if (showClear() && hasSelectedValues()) {\n    <span\n      class=\"inline-flex items-center px-1 text-(--f-text-muted-color) hover:text-(--f-text-hover-color) cursor-pointer\"\n      (click)=\"clear($event)\"\n    >\n      <ui-icon name=\"times\" class=\"text-xs\"></ui-icon>\n    </span>\n  }\n\n  @if (isEditMode()) {\n    <span\n      class=\"inline-flex items-center px-1 text-(--f-form-field-placeholder-color)\"\n    >\n      <ui-icon name=\"chevron-down\" class=\"text-xs\"></ui-icon>\n    </span>\n  }\n</div>\n\n<ng-template #overlayTpl>\n  <div\n    class=\"flex flex-col max-h-[250px] overflow-hidden\"\n    (click)=\"onOverlayClick($event)\"\n  >\n    <div\n      class=\"p-3 border-b border-(--f-content-border-color) bg-(--f-content-hover-background) shrink-0 w-full flex flex-row gap-2 items-center\"\n    >\n      <f-checkbox\n        [binary]=\"true\"\n        [ngModel]=\"isSelectAll()\"\n        [disabled]=\"disabled()\"\n        (onChange)=\"changeSelectAll($event)\"\n      />\n      <input\n        type=\"text\"\n        fInputText\n        class=\"w-full\"\n        [placeholder]=\"'shared.search' | translate\"\n        [ngModel]=\"searchTerm()\"\n        (ngModelChange)=\"searchTerm.set($event)\"\n      />\n    </div>\n    <div\n      class=\"flex-1 overflow-y-auto min-h-0 w-full\"\n      (scroll)=\"onScroll($event)\"\n    >\n      <ul\n        class=\"m-0 py-1 list-none bg-(--f-overlay-popover-background) text-(--f-text-color) w-full\"\n      >\n        @for (data of mergedDataList(); track data.value) {\n          @let isItemSelected = isSelected(data);\n          <li\n            class=\"px-3 py-2 cursor-pointer transition-colors flex flex-row gap-2 items-center text-sm\"\n            [class]=\"\n              isItemSelected\n                ? 'bg-primary/10 text-primary'\n                : 'text-(--f-text-color) hover:bg-(--f-content-hover-background)'\n            \"\n          >\n            <f-checkbox\n              [binary]=\"true\"\n              [ngModel]=\"isItemSelected\"\n              [disabled]=\"disabled()\"\n              (onChange)=\"selectValue($event, data)\"\n            />\n            <span class=\"flex flex-col min-w-0 flex-1\">\n              <span class=\"truncate\">{{ data.label }}</span>\n              @if (data.subLabel) {\n                <span class=\"truncate text-xs text-(--f-text-muted-color)\">{{\n                  data.subLabel\n                }}</span>\n              }\n            </span>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n</ng-template>\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 }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", 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 }] }], selectedObjects: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedObjects", required: false }] }], 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"] }] } });
 
 /**
@@ -3898,7 +4224,7 @@ class LazySelectComponent extends BaseFormControl {
         return key;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: LazySelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.5", type: LazySelectComponent, isStandalone: true, selector: "lib-lazy-select", inputs: { placeHolder: { classPropertyName: "placeHolder", publicName: "placeHolder", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", 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 }, selectedObject: { classPropertyName: "selectedObject", publicName: "selectedObject", isSignal: true, isRequired: false, 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  <f-select\n    class=\"w-full\"\n    [options]=\"selectDataList()\"\n    [optionLabel]=\"optionLabel()\"\n    [optionValue]=\"optionValue()\"\n    [filter]=\"true\"\n    [showClear]=\"showClear()\"\n    [placeholder]=\"displayPlaceholder()\"\n    [disabled]=\"disabled()\"\n    [(ngModel)]=\"value\"\n    [selectedObject]=\"selectedObject()\"\n    appEditModeElementChanger\n    [isEditMode]=\"isEditMode()\"\n    (click)=\"showPanel()\"\n    (onBlur)=\"markAsTouched()\"\n  >\n    <ng-template #filter let-filter>\n      <input\n        fInputText\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  </f-select>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "filterBy", "filterMatchMode", "filterLocale", "filterPlaceholder", "resetFilterOnHide", "autofocusFilter", "emptyMessage", "emptyFilterMessage", "showClear", "loading", "loadingIcon", "dropdownIcon", "clearIcon", "inputId", "invalid", "touched", "styleClass", "style", "appendTo", "editable", "readonly", "autofocus", "checkmark", "group", "optionGroupLabel", "optionGroupChildren", "virtualScroll", "virtualScrollItemSize", "lazy", "selectedObject"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur", "onFocus", "onClear", "onLazyLoad"] }, { kind: "directive", type: InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched", "variant", "size", "fluid"] }, { kind: "directive", type: EditModeElementChangerDirective, selector: "[appEditModeElementChanger]", inputs: ["isEditMode"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: LazySelectComponent, isStandalone: true, selector: "lib-lazy-select", inputs: { placeHolder: { classPropertyName: "placeHolder", publicName: "placeHolder", isSignal: true, isRequired: false, transformFunction: null }, showClear: { classPropertyName: "showClear", publicName: "showClear", 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 }, selectedObject: { classPropertyName: "selectedObject", publicName: "selectedObject", isSignal: true, isRequired: false, 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  <f-select\n    class=\"w-full\"\n    [options]=\"selectDataList()\"\n    [optionLabel]=\"optionLabel()\"\n    [optionValue]=\"optionValue()\"\n    [filter]=\"true\"\n    [showClear]=\"showClear()\"\n    [placeholder]=\"displayPlaceholder()\"\n    [disabled]=\"disabled()\"\n    [(ngModel)]=\"value\"\n    [selectedObject]=\"selectedObject()\"\n    appEditModeElementChanger\n    [isEditMode]=\"isEditMode()\"\n    (click)=\"showPanel()\"\n    (onBlur)=\"markAsTouched()\"\n  >\n    <ng-template #filter let-filter>\n      <input\n        fInputText\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      <div class=\"flex flex-col min-w-0\">\n        <span class=\"truncate\">{{ item[optionLabel()] }}</span>\n        @if (item.subLabel) {\n          <span class=\"truncate text-xs text-(--f-text-muted-color)\">{{\n            item.subLabel\n          }}</span>\n        }\n      </div>\n    </ng-template>\n  </f-select>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "filterBy", "filterMatchMode", "filterLocale", "filterPlaceholder", "resetFilterOnHide", "autofocusFilter", "emptyMessage", "emptyFilterMessage", "showClear", "loading", "loadingIcon", "dropdownIcon", "clearIcon", "inputId", "invalid", "touched", "styleClass", "style", "appendTo", "editable", "readonly", "autofocus", "checkmark", "group", "optionGroupLabel", "optionGroupChildren", "virtualScroll", "virtualScrollItemSize", "lazy", "selectedObject"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur", "onFocus", "onClear", "onLazyLoad"] }, { kind: "directive", type: InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched", "variant", "size", "fluid"] }, { kind: "directive", type: EditModeElementChangerDirective, selector: "[appEditModeElementChanger]", inputs: ["isEditMode"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: LazySelectComponent, decorators: [{
             type: Component,
@@ -3907,7 +4233,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                         SelectComponent,
                         InputTextDirective,
                         EditModeElementChangerDirective,
-                    ], providers: [provideValueAccessor(LazySelectComponent)], template: "<div #scrollContainer class=\"lib-scroll-container\">\n  <f-select\n    class=\"w-full\"\n    [options]=\"selectDataList()\"\n    [optionLabel]=\"optionLabel()\"\n    [optionValue]=\"optionValue()\"\n    [filter]=\"true\"\n    [showClear]=\"showClear()\"\n    [placeholder]=\"displayPlaceholder()\"\n    [disabled]=\"disabled()\"\n    [(ngModel)]=\"value\"\n    [selectedObject]=\"selectedObject()\"\n    appEditModeElementChanger\n    [isEditMode]=\"isEditMode()\"\n    (click)=\"showPanel()\"\n    (onBlur)=\"markAsTouched()\"\n  >\n    <ng-template #filter let-filter>\n      <input\n        fInputText\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  </f-select>\n</div>\n" }]
+                    ], providers: [provideValueAccessor(LazySelectComponent)], template: "<div #scrollContainer class=\"lib-scroll-container\">\n  <f-select\n    class=\"w-full\"\n    [options]=\"selectDataList()\"\n    [optionLabel]=\"optionLabel()\"\n    [optionValue]=\"optionValue()\"\n    [filter]=\"true\"\n    [showClear]=\"showClear()\"\n    [placeholder]=\"displayPlaceholder()\"\n    [disabled]=\"disabled()\"\n    [(ngModel)]=\"value\"\n    [selectedObject]=\"selectedObject()\"\n    appEditModeElementChanger\n    [isEditMode]=\"isEditMode()\"\n    (click)=\"showPanel()\"\n    (onBlur)=\"markAsTouched()\"\n  >\n    <ng-template #filter let-filter>\n      <input\n        fInputText\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      <div class=\"flex flex-col min-w-0\">\n        <span class=\"truncate\">{{ item[optionLabel()] }}</span>\n        @if (item.subLabel) {\n          <span class=\"truncate text-xs text-(--f-text-muted-color)\">{{\n            item.subLabel\n          }}</span>\n        }\n      </div>\n    </ng-template>\n  </f-select>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { scrollContainer: [{ type: i0.ViewChild, args: ['scrollContainer', { isSignal: true }] }], placeHolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeHolder", required: false }] }], showClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClear", 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 }] }], selectedObject: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedObject", required: false }] }], 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"] }] } });
 
 class RouterTabsComponent {
@@ -4006,7 +4332,12 @@ class BaseUserSelectComponent {
     _knownUsers = signal(new Map(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_knownUsers" }] : /* istanbul ignore next */ []));
     toDropDown(user) {
-        return { label: user.name || user.email, value: user.id };
+        // Names collide across users; showing the email as a subLabel keeps entries distinguishable.
+        return {
+            label: user.name || user.email,
+            value: user.id,
+            subLabel: user.name ? user.email : undefined,
+        };
     }
     /** Resolves a single previously-seen user id, even if it's no longer in `users()`. */
     resolveKnownUser(id) {
@@ -4509,11 +4840,26 @@ function getUserTimezone() {
     return Intl.DateTimeFormat().resolvedOptions().timeZone;
 }
 
+/** The translatable reason in a failed HTTP call: the backend's `messageKey`/`messageVariables`, or `fallbackKey` when the response carries none. */
+function errorToMessageRef(error, fallbackKey = 'shared.unexpected.error') {
+    const body = error?.error;
+    if (typeof body?.messageKey === 'string') {
+        return body.messageVariables ? { messageKey: body.messageKey, messageVariables: body.messageVariables } : { messageKey: body.messageKey };
+    }
+    return { messageKey: fallbackKey };
+}
+
+const HTML_ESCAPES = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
+/** Escapes user-authored text interpolated into markup rendered via [innerHTML] (e.g. confirm dialog messages). */
+function escapeHtml(value) {
+    return value.replace(/[&<>"']/g, (ch) => HTML_ESCAPES[ch]);
+}
+
 // Constants
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_PERMISSIONS, AUTH_STATE_PROVIDER, ApiResourceService, ApiResourceService as ApiService, BRANCH_PERMISSIONS, BaseFormComponent, BaseFormControl, BaseFormTemplateDirective, BaseListComponent, BaseListTemplateDirective, BaseUserSelectComponent, COMPANY_ACTION_PERMISSIONS, COMPANY_API_PROVIDER, COMPANY_PERMISSIONS, CookieService, EMAIL_CONFIG_PERMISSIONS, EMAIL_TEMPLATE_PERMISSIONS, EVENT_PERMISSIONS, EditModeElementChangerDirective, FILE_PERMISSIONS, FILE_PROVIDER, FILE_TYPE_FILTERS, FOLDER_PERMISSIONS, FORM_PERMISSIONS, FORM_RESULT_PERMISSIONS, FaviconService, FileSelectorDialogComponent, FileUploaderComponent, FileUrlService, HasPermissionDirective, IconComponent, IconTypeEnum, InlineSvgComponent, IsEmptyImageDirective, LANGUAGE_PERMISSIONS, LazyMultiSelectComponent, LazySelectComponent, NOTIFICATION_PERMISSIONS, PERMISSIONS, PROFILE_PERMISSION_PROVIDER, PermissionValidatorService, PlatformService, PreventDefaultDirective, ROLE_ACTION_PERMISSIONS, ROLE_PERMISSIONS, RouterTabsComponent, SHARED_MESSAGES, SKIP_ERROR_TOAST, SOCIAL_AUTH_CONFIG_PERMISSIONS, STORAGE_CONFIG_PERMISSIONS, TRANSLATION_KEY_PERMISSIONS, TRANSLATION_PERMISSIONS, TranslatePipe, TranslateService, UPLOAD_CONFIG_PERMISSIONS, USER_ACTION_PERMISSIONS, USER_PERMISSIONS, USER_PERMISSION_PROVIDER, USER_PROVIDER, USER_ROLE_PERMISSIONS, UserMultiSelectComponent, UserSelectComponent, allPermissionsGuard, anyPermissionGuard, authenticatedGuard, checkScrollPagination, errorCatchingInterceptor, evaluateLogicNode, evaluatePermission, formatFileSize, formatInTimezone, getAcceptString, getFileIconClass, getUserTimezone, hasAllPermissions, hasAnyPermission, hasPermission, isFileTypeAllowed, localToUtc, permissionGuard, provideValueAccessor, resolveTranslationModule, utcToLocal };
+export { ACTION_PERMISSIONS, ACTION_PROVIDER, AUTH_STATE_PROVIDER, ActionMultiSelectComponent, ActionSelectComponent, ApiResourceService, ApiResourceService as ApiService, BRANCH_PERMISSIONS, BaseActionSelectComponent, BaseFormComponent, BaseFormControl, BaseFormTemplateDirective, BaseListComponent, BaseListTemplateDirective, BaseUserSelectComponent, COMPANY_ACTION_PERMISSIONS, COMPANY_API_PROVIDER, COMPANY_PERMISSIONS, CookieService, EMAIL_CONFIG_PERMISSIONS, EMAIL_TEMPLATE_PERMISSIONS, ENTITY_DEFINITION_PERMISSIONS, EVENT_PERMISSIONS, EditModeElementChangerDirective, FIELD_DEFINITION_PERMISSIONS, FILE_PERMISSIONS, FILE_PROVIDER, FILE_TYPE_FILTERS, FLOW_DEFINITION_PERMISSIONS, FOLDER_PERMISSIONS, FORM_PERMISSIONS, FORM_RESULT_PERMISSIONS, FaviconService, FileSelectorDialogComponent, FileUploaderComponent, FileUrlService, HasPermissionDirective, IconComponent, IconTypeEnum, InlineSvgComponent, IsEmptyImageDirective, LANGUAGE_PERMISSIONS, LazyMultiSelectComponent, LazySelectComponent, NOTIFICATION_PERMISSIONS, PERMISSIONS, PROFILE_PERMISSION_PROVIDER, PermissionValidatorService, PlatformService, PreventDefaultDirective, ROLE_ACTION_PERMISSIONS, ROLE_PERMISSIONS, RouterTabsComponent, SHARED_MESSAGES, SKIP_ERROR_TOAST, SOCIAL_AUTH_CONFIG_PERMISSIONS, STORAGE_CONFIG_PERMISSIONS, TRANSLATION_KEY_PERMISSIONS, TRANSLATION_PERMISSIONS, TranslatePipe, TranslateService, UPLOAD_CONFIG_PERMISSIONS, USER_ACTION_PERMISSIONS, USER_PERMISSIONS, USER_PERMISSION_PROVIDER, USER_PROVIDER, USER_ROLE_PERMISSIONS, UserMultiSelectComponent, UserSelectComponent, allPermissionsGuard, anyPermissionGuard, authenticatedGuard, checkScrollPagination, errorCatchingInterceptor, errorToMessageRef, escapeHtml, evaluateLogicNode, evaluatePermission, formatFileSize, formatInTimezone, getAcceptString, getFileIconClass, getUserTimezone, hasAllPermissions, hasAnyPermission, hasPermission, isErrorToastShown, isFileTypeAllowed, localToUtc, permissionGuard, provideValueAccessor, resolveTranslationModule, utcToLocal };
 //# sourceMappingURL=flusys-ng-shared.mjs.map