@flusys/ng-shared 8.1.3 → 8.1.5

package/fesm2022/flusys-ng-shared.mjs

@@ -7,7 +7,7 @@ import { of, catchError as catchError$1, throwError, firstValueFrom, map as map$
 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 } from '@flusys/ng-ui';
+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 { Router, RouterLink, RouterLinkActive } from '@angular/router';
 import { DomSanitizer } from '@angular/platform-browser';
 
@@ -1652,7 +1652,7 @@ class BaseFormComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: BaseFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: BaseFormComponent, isStandalone: true, selector: "lib-base-form", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, createTitle: { classPropertyName: "createTitle", publicName: "createTitle", isSignal: true, isRequired: false, transformFunction: null }, editTitle: { classPropertyName: "editTitle", publicName: "editTitle", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, submitLabel: { classPropertyName: "submitLabel", publicName: "submitLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isEditMode: { classPropertyName: "isEditMode", publicName: "isEditMode", isSignal: true, isRequired: false, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: false, transformFunction: null }, editId: { classPropertyName: "editId", publicName: "editId", isSignal: true, isRequired: false, transformFunction: null }, cancelRoute: { classPropertyName: "cancelRoute", publicName: "cancelRoute", isSignal: true, isRequired: false, transformFunction: null }, navigateOnSuccess: { classPropertyName: "navigateOnSuccess", publicName: "navigateOnSuccess", isSignal: true, isRequired: false, transformFunction: null }, mapToRequest: { classPropertyName: "mapToRequest", publicName: "mapToRequest", isSignal: true, isRequired: false, transformFunction: null }, mapFromEntity: { classPropertyName: "mapFromEntity", publicName: "mapFromEntity", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSubmit: "onSubmit", onCancel: "onCancel", onValueChange: "onValueChange" }, queries: [{ propertyName: "fieldTemplates", predicate: BaseFormTemplateDirective, isSignal: true }], ngImport: i0, template: "<f-card>\n  <ng-template #header>\n    @if (resolvedTitle()) {\n      <div class=\"flex justify-between items-center p-4\">\n        <h2 class=\"text-xl font-semibold m-0\">{{ resolvedTitle() }}</h2>\n      </div>\n    }\n  </ng-template>\n\n  <form (ngSubmit)=\"handleSubmit()\" novalidate>\n    <div class=\"grid gap-4\" [class]=\"gridClass()\">\n      @for (field of fields(); track field.key) {\n        <div class=\"flex flex-col gap-2\" [class.col-span-full]=\"field.fullWidth\">\n          @if (field.type !== 'checkbox' && field.type !== 'toggle') {\n            <label [for]=\"field.key\" class=\"font-medium\">\n              {{ field.label }}\n              @if (field.required) {\n                <span class=\"text-red-500 ml-1\">*</span>\n              }\n            </label>\n          }\n\n          @switch (field.type) {\n            @case ('text') {\n              <input\n                fInputText\n                [id]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                (blur)=\"markFieldTouched(field.key)\"\n                [placeholder]=\"field.placeholder ?? ''\"\n                [disabled]=\"field.disabled ?? false\"\n                [class.ng-invalid]=\"isFieldInvalid(field)\"\n                [class.ng-dirty]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n              />\n            }\n\n            @case ('email') {\n              <input\n                fInputText\n                type=\"email\"\n                [id]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                (blur)=\"markFieldTouched(field.key)\"\n                [placeholder]=\"field.placeholder ?? ''\"\n                [disabled]=\"field.disabled ?? false\"\n                [class.ng-invalid]=\"isFieldInvalid(field)\"\n                [class.ng-dirty]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n              />\n            }\n\n            @case ('password') {\n              <f-password\n                [inputId]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                (onBlur)=\"markFieldTouched(field.key)\"\n                [placeholder]=\"field.placeholder ?? ''\"\n                [disabled]=\"field.disabled ?? false\"\n                [invalid]=\"isFieldInvalid(field)\"\n              />\n            }\n\n            @case ('number') {\n              <f-inputnumber\n                [inputId]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                (onBlur)=\"markFieldTouched(field.key)\"\n                [placeholder]=\"field.placeholder ?? ''\"\n                [disabled]=\"field.disabled ?? false\"\n                [min]=\"field.min ?? null\"\n                [max]=\"field.max ?? null\"\n                [invalid]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n                inputStyleClass=\"w-full\"\n              />\n            }\n\n            @case ('textarea') {\n              <textarea\n                fTextarea\n                [id]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                (blur)=\"markFieldTouched(field.key)\"\n                [placeholder]=\"field.placeholder ?? ''\"\n                [disabled]=\"field.disabled ?? false\"\n                [rows]=\"field.rows ?? 3\"\n                [class.ng-invalid]=\"isFieldInvalid(field)\"\n                [class.ng-dirty]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n              ></textarea>\n            }\n\n            @case ('select') {\n              <f-select\n                [inputId]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                [options]=\"field.options ?? []\"\n                optionLabel=\"label\"\n                optionValue=\"value\"\n                [placeholder]=\"field.placeholder ?? t('shared.select.placeholder')\"\n                [disabled]=\"field.disabled ?? false\"\n                [invalid]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n              />\n            }\n\n            @case ('multiselect') {\n              <f-multiselect\n                [inputId]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                [options]=\"field.options ?? []\"\n                optionLabel=\"label\"\n                optionValue=\"value\"\n                [placeholder]=\"field.placeholder ?? t('shared.select.placeholder')\"\n                [disabled]=\"field.disabled ?? false\"\n                [invalid]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n              />\n            }\n\n            @case ('date') {\n              <f-datepicker\n                [inputId]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                (onBlur)=\"markFieldTouched(field.key)\"\n                [placeholder]=\"field.placeholder ?? ''\"\n                [disabled]=\"field.disabled ?? false\"\n                [minDate]=\"field.minDate ?? null\"\n                [maxDate]=\"field.maxDate ?? null\"\n                [invalid]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n                inputStyleClass=\"w-full\"\n              />\n            }\n\n            @case ('checkbox') {\n              <div class=\"flex items-center gap-2 h-9\">\n                <f-checkbox\n                  [inputId]=\"field.key\"\n                  [name]=\"field.key\"\n                  [ngModel]=\"getFieldValue(field.key)\"\n                  (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                  [disabled]=\"field.disabled ?? false\"\n                  [binary]=\"true\"\n                  [invalid]=\"isFieldInvalid(field)\"\n                />\n                <label [for]=\"field.key\" class=\"font-medium cursor-pointer select-none\">\n                  {{ field.label }}\n                  @if (field.required) {\n                    <span class=\"text-red-500 ml-1\">*</span>\n                  }\n                </label>\n              </div>\n            }\n\n            @case ('toggle') {\n              <div class=\"flex items-center gap-3 h-9\">\n                <f-toggleswitch\n                  [inputId]=\"field.key\"\n                  [name]=\"field.key\"\n                  [ngModel]=\"getFieldValue(field.key)\"\n                  (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                  [disabled]=\"field.disabled ?? false\"\n                />\n                <label [for]=\"field.key\" class=\"font-medium cursor-pointer select-none\">\n                  {{ field.label }}\n                  @if (field.required) {\n                    <span class=\"text-red-500 ml-1\">*</span>\n                  }\n                </label>\n              </div>\n            }\n\n            @case ('custom') {\n              <ng-container\n                [ngTemplateOutlet]=\"getFieldTemplate(field.key)\"\n                [ngTemplateOutletContext]=\"{ $implicit: getFieldValue(field.key), field: field }\"\n              />\n            }\n          }\n\n          @if (isFieldInvalid(field)) {\n            <small class=\"text-red-500\">{{ field.label }} {{ t('shared.required') }}</small>\n          }\n\n          @if (field.hint && !isFieldInvalid(field)) {\n            <small class=\"text-surface-400\">{{ field.hint }}</small>\n          }\n        </div>\n      }\n\n      <div class=\"col-span-full flex justify-end gap-4 pt-4\">\n        <button\n          fButton\n          type=\"button\"\n          severity=\"secondary\"\n          [outlined]=\"true\"\n          [disabled]=\"effectiveIsLoading()\"\n          (click)=\"handleCancel()\"\n        >\n          <span pButtonLabel>{{ cancelLabel() || t('shared.cancel') }}</span>\n        </button>\n        <button\n          fButton\n          type=\"submit\"\n          [disabled]=\"!isFormValid() || effectiveIsLoading()\"\n        >\n          @if (effectiveIsLoading()) {\n            <ui-icon pButtonIcon name=\"spinner\" [spin]=\"true\"></ui-icon>\n          }\n          <span pButtonLabel>{{ submitLabel() || (effectiveIsEditMode() ? t('shared.update') : t('shared.save')) }}</span>\n        </button>\n      </div>\n    </div>\n  </form>\n</f-card>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CardComponent, selector: "f-card", inputs: ["header", "subheader", "styleClass", "style"] }, { kind: "directive", type: InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched", "variant", "size", "fluid"] }, { kind: "component", type: PasswordComponent, selector: "f-password", inputs: ["toggleMask", "feedback", "disabled", "placeholder", "inputId", "invalid", "touched", "inputStyleClass", "styleClass", "style", "ariaDescribedby", "autocomplete", "variant", "size", "fluid", "appendTo", "promptLabel", "weakLabel", "mediumLabel", "strongLabel", "mediumRegex", "strongRegex"], outputs: ["onBlur", "onFocus"] }, { kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "component", type: InputNumberComponent, selector: "f-inputnumber", inputs: ["mode", "currency", "currencyDisplay", "locale", "min", "max", "step", "showButtons", "buttonLayout", "disabled", "readonly", "inputId", "invalid", "touched", "placeholder", "prefix", "suffix", "useGrouping", "minFractionDigits", "maxFractionDigits", "size", "ariaLabel", "ariaDescribedBy", "inputStyleClass", "styleClass", "style"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown"] }, { kind: "directive", type: TextareaDirective, selector: "[fTextarea]", inputs: ["invalid", "touched", "variant", "fluid", "autoResize"], outputs: ["onResize"] }, { 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"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur", "onFocus", "onClear", "onLazyLoad"] }, { kind: "component", type: MultiSelectComponent, selector: "f-multiselect", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "filterBy", "filterMatchMode", "filterLocale", "filterPlaceholder", "resetFilterOnHide", "autofocusFilter", "emptyMessage", "emptyFilterMessage", "inputId", "invalid", "touched", "showClear", "optionDisabled", "display", "maxSelectedLabels", "selectionLimit", "showToggleAll", "styleClass", "style", "appendTo", "readonly", "autofocus", "loading", "loadingIcon", "dropdownIcon", "clearIcon", "group", "optionGroupLabel", "optionGroupChildren", "virtualScroll", "virtualScrollItemSize", "lazy"], outputs: ["onBlur", "onFocus", "onChange", "onFilter", "onShow", "onHide", "onClear", "onLazyLoad", "onSelectAllChange"] }, { kind: "component", type: DatePickerComponent, selector: "f-datepicker", inputs: ["placeholder", "dateFormat", "disabled", "readonly", "readonlyInput", "showTime", "timeOnly", "hourFormat", "showSeconds", "selectionMode", "minDate", "maxDate", "disabledDates", "disabledDays", "inputId", "invalid", "touched", "showClear", "inputStyleClass", "showIcon", "iconDisplay", "showButtonBar", "inline", "numberOfMonths", "view", "showOtherMonths", "selectOtherMonths", "firstDayOfWeek", "appendTo", "styleClass", "style"], outputs: ["onBlur", "onSelect", "onShow", "onHide", "onClearClick", "onTodayClick", "onMonthChange", "onYearChange"] }, { 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: "component", type: ToggleSwitchComponent, selector: "f-toggleswitch", inputs: ["disabled", "readonly", "invalid", "ariaLabel", "trueValue", "falseValue", "inputId", "size", "tabindex", "styleClass", "style"] }, { kind: "directive", type: FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: BaseFormComponent, isStandalone: true, selector: "lib-base-form", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, createTitle: { classPropertyName: "createTitle", publicName: "createTitle", isSignal: true, isRequired: false, transformFunction: null }, editTitle: { classPropertyName: "editTitle", publicName: "editTitle", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, submitLabel: { classPropertyName: "submitLabel", publicName: "submitLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isEditMode: { classPropertyName: "isEditMode", publicName: "isEditMode", isSignal: true, isRequired: false, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: false, transformFunction: null }, editId: { classPropertyName: "editId", publicName: "editId", isSignal: true, isRequired: false, transformFunction: null }, cancelRoute: { classPropertyName: "cancelRoute", publicName: "cancelRoute", isSignal: true, isRequired: false, transformFunction: null }, navigateOnSuccess: { classPropertyName: "navigateOnSuccess", publicName: "navigateOnSuccess", isSignal: true, isRequired: false, transformFunction: null }, mapToRequest: { classPropertyName: "mapToRequest", publicName: "mapToRequest", isSignal: true, isRequired: false, transformFunction: null }, mapFromEntity: { classPropertyName: "mapFromEntity", publicName: "mapFromEntity", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSubmit: "onSubmit", onCancel: "onCancel", onValueChange: "onValueChange" }, queries: [{ propertyName: "fieldTemplates", predicate: BaseFormTemplateDirective, isSignal: true }], ngImport: i0, template: "<f-card>\n  <ng-template #header>\n    @if (resolvedTitle()) {\n      <div class=\"flex justify-between items-center p-4\">\n        <h2 class=\"text-xl font-semibold m-0\">{{ resolvedTitle() }}</h2>\n      </div>\n    }\n  </ng-template>\n\n  <form (ngSubmit)=\"handleSubmit()\" novalidate>\n    <div class=\"grid gap-4\" [class]=\"gridClass()\">\n      @for (field of fields(); track field.key) {\n        <div class=\"flex flex-col gap-2\" [class.col-span-full]=\"field.fullWidth\">\n          @if (field.type !== 'checkbox' && field.type !== 'toggle') {\n            <label [for]=\"field.key\" class=\"font-medium\">\n              {{ field.label }}\n              @if (field.required) {\n                <span class=\"text-red-500 ml-1\">*</span>\n              }\n            </label>\n          }\n\n          @switch (field.type) {\n            @case ('text') {\n              <input\n                fInputText\n                [id]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                (blur)=\"markFieldTouched(field.key)\"\n                [placeholder]=\"field.placeholder ?? ''\"\n                [disabled]=\"field.disabled ?? false\"\n                [class.ng-invalid]=\"isFieldInvalid(field)\"\n                [class.ng-dirty]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n              />\n            }\n\n            @case ('email') {\n              <input\n                fInputText\n                type=\"email\"\n                [id]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                (blur)=\"markFieldTouched(field.key)\"\n                [placeholder]=\"field.placeholder ?? ''\"\n                [disabled]=\"field.disabled ?? false\"\n                [class.ng-invalid]=\"isFieldInvalid(field)\"\n                [class.ng-dirty]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n              />\n            }\n\n            @case ('password') {\n              <f-password\n                [inputId]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                (onBlur)=\"markFieldTouched(field.key)\"\n                [placeholder]=\"field.placeholder ?? ''\"\n                [disabled]=\"field.disabled ?? false\"\n                [invalid]=\"isFieldInvalid(field)\"\n              />\n            }\n\n            @case ('number') {\n              <f-inputnumber\n                [inputId]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                (onBlur)=\"markFieldTouched(field.key)\"\n                [placeholder]=\"field.placeholder ?? ''\"\n                [disabled]=\"field.disabled ?? false\"\n                [min]=\"field.min ?? null\"\n                [max]=\"field.max ?? null\"\n                [invalid]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n                inputStyleClass=\"w-full\"\n              />\n            }\n\n            @case ('textarea') {\n              <textarea\n                fTextarea\n                [id]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                (blur)=\"markFieldTouched(field.key)\"\n                [placeholder]=\"field.placeholder ?? ''\"\n                [disabled]=\"field.disabled ?? false\"\n                [rows]=\"field.rows ?? 3\"\n                [class.ng-invalid]=\"isFieldInvalid(field)\"\n                [class.ng-dirty]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n              ></textarea>\n            }\n\n            @case ('select') {\n              <f-select\n                [inputId]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                [options]=\"field.options ?? []\"\n                optionLabel=\"label\"\n                optionValue=\"value\"\n                [placeholder]=\"field.placeholder ?? t('shared.select.placeholder')\"\n                [disabled]=\"field.disabled ?? false\"\n                [invalid]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n              />\n            }\n\n            @case ('multiselect') {\n              <f-multiselect\n                [inputId]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                [options]=\"field.options ?? []\"\n                optionLabel=\"label\"\n                optionValue=\"value\"\n                [placeholder]=\"field.placeholder ?? t('shared.select.placeholder')\"\n                [disabled]=\"field.disabled ?? false\"\n                [invalid]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n              />\n            }\n\n            @case ('date') {\n              <f-datepicker\n                [inputId]=\"field.key\"\n                [name]=\"field.key\"\n                [ngModel]=\"getFieldValue(field.key)\"\n                (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                (onBlur)=\"markFieldTouched(field.key)\"\n                [placeholder]=\"field.placeholder ?? ''\"\n                [disabled]=\"field.disabled ?? false\"\n                [minDate]=\"field.minDate ?? null\"\n                [maxDate]=\"field.maxDate ?? null\"\n                [invalid]=\"isFieldInvalid(field)\"\n                class=\"w-full\"\n                inputStyleClass=\"w-full\"\n              />\n            }\n\n            @case ('checkbox') {\n              <div class=\"flex items-center gap-2 h-9\">\n                <f-checkbox\n                  [inputId]=\"field.key\"\n                  [name]=\"field.key\"\n                  [ngModel]=\"getFieldValue(field.key)\"\n                  (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                  [disabled]=\"field.disabled ?? false\"\n                  [binary]=\"true\"\n                  [invalid]=\"isFieldInvalid(field)\"\n                />\n                <label [for]=\"field.key\" class=\"font-medium cursor-pointer select-none\">\n                  {{ field.label }}\n                  @if (field.required) {\n                    <span class=\"text-red-500 ml-1\">*</span>\n                  }\n                </label>\n              </div>\n            }\n\n            @case ('toggle') {\n              <div class=\"flex items-center gap-3 h-9\">\n                <f-toggleswitch\n                  [inputId]=\"field.key\"\n                  [name]=\"field.key\"\n                  [ngModel]=\"getFieldValue(field.key)\"\n                  (ngModelChange)=\"setFieldValue(field.key, $event)\"\n                  [disabled]=\"field.disabled ?? false\"\n                />\n                <label [for]=\"field.key\" class=\"font-medium cursor-pointer select-none\">\n                  {{ field.label }}\n                  @if (field.required) {\n                    <span class=\"text-red-500 ml-1\">*</span>\n                  }\n                </label>\n              </div>\n            }\n\n            @case ('custom') {\n              <ng-container\n                [ngTemplateOutlet]=\"getFieldTemplate(field.key)\"\n                [ngTemplateOutletContext]=\"{ $implicit: getFieldValue(field.key), field: field }\"\n              />\n            }\n          }\n\n          @if (isFieldInvalid(field)) {\n            <small class=\"text-red-500\">{{ field.label }} {{ t('shared.required') }}</small>\n          }\n\n          @if (field.hint && !isFieldInvalid(field)) {\n            <small class=\"text-surface-400\">{{ field.hint }}</small>\n          }\n        </div>\n      }\n\n      <div class=\"col-span-full flex justify-end gap-4 pt-4\">\n        <button\n          fButton\n          type=\"button\"\n          severity=\"secondary\"\n          [outlined]=\"true\"\n          [disabled]=\"effectiveIsLoading()\"\n          (click)=\"handleCancel()\"\n        >\n          <span pButtonLabel>{{ cancelLabel() || t('shared.cancel') }}</span>\n        </button>\n        <button\n          fButton\n          type=\"submit\"\n          [disabled]=\"!isFormValid() || effectiveIsLoading()\"\n        >\n          @if (effectiveIsLoading()) {\n            <ui-icon pButtonIcon name=\"spinner\" [spin]=\"true\"></ui-icon>\n          }\n          <span pButtonLabel>{{ submitLabel() || (effectiveIsEditMode() ? t('shared.update') : t('shared.save')) }}</span>\n        </button>\n      </div>\n    </div>\n  </form>\n</f-card>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CardComponent, selector: "f-card", inputs: ["header", "subheader", "styleClass", "style"] }, { kind: "directive", type: InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched", "variant", "size", "fluid"] }, { kind: "component", type: PasswordComponent, selector: "f-password", inputs: ["toggleMask", "feedback", "disabled", "placeholder", "inputId", "invalid", "touched", "inputStyleClass", "styleClass", "style", "ariaDescribedby", "autocomplete", "variant", "size", "fluid", "appendTo", "promptLabel", "weakLabel", "mediumLabel", "strongLabel", "mediumRegex", "strongRegex"], outputs: ["onBlur", "onFocus"] }, { kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "component", type: InputNumberComponent, selector: "f-inputnumber", inputs: ["mode", "currency", "currencyDisplay", "locale", "min", "max", "step", "showButtons", "buttonLayout", "disabled", "readonly", "inputId", "invalid", "touched", "placeholder", "prefix", "suffix", "useGrouping", "minFractionDigits", "maxFractionDigits", "size", "ariaLabel", "ariaDescribedBy", "inputStyleClass", "styleClass", "style"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown"] }, { kind: "directive", type: TextareaDirective, selector: "[fTextarea]", inputs: ["invalid", "touched", "variant", "fluid", "autoResize"], outputs: ["onResize"] }, { 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: "component", type: MultiSelectComponent, selector: "f-multiselect", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "filterBy", "filterMatchMode", "filterLocale", "filterPlaceholder", "resetFilterOnHide", "autofocusFilter", "emptyMessage", "emptyFilterMessage", "inputId", "invalid", "touched", "showClear", "optionDisabled", "display", "maxSelectedLabels", "selectionLimit", "showToggleAll", "styleClass", "style", "appendTo", "readonly", "autofocus", "loading", "loadingIcon", "dropdownIcon", "clearIcon", "group", "optionGroupLabel", "optionGroupChildren", "virtualScroll", "virtualScrollItemSize", "lazy", "selectedObjects"], outputs: ["onBlur", "onFocus", "onChange", "onFilter", "onShow", "onHide", "onClear", "onLazyLoad", "onSelectAllChange"] }, { kind: "component", type: DatePickerComponent, selector: "f-datepicker", inputs: ["placeholder", "dateFormat", "disabled", "readonly", "readonlyInput", "showTime", "timeOnly", "hourFormat", "showSeconds", "selectionMode", "minDate", "maxDate", "disabledDates", "disabledDays", "inputId", "invalid", "touched", "showClear", "inputStyleClass", "showIcon", "iconDisplay", "showButtonBar", "inline", "numberOfMonths", "view", "showOtherMonths", "selectOtherMonths", "firstDayOfWeek", "appendTo", "styleClass", "style"], outputs: ["onBlur", "onSelect", "onShow", "onHide", "onClearClick", "onTodayClick", "onMonthChange", "onYearChange"] }, { 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: "component", type: ToggleSwitchComponent, selector: "f-toggleswitch", inputs: ["disabled", "readonly", "invalid", "ariaLabel", "trueValue", "falseValue", "inputId", "size", "tabindex", "styleClass", "style"] }, { kind: "directive", type: FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: BaseFormComponent, decorators: [{
             type: Component,
@@ -1892,7 +1892,7 @@ class BaseListComponent {
         return this.translateAdapter?.translate(key, vars) ?? key;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: BaseListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: BaseListComponent, isStandalone: true, selector: "lib-base-list", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showCreateButton: { classPropertyName: "showCreateButton", publicName: "showCreateButton", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, createButtonLabel: { classPropertyName: "createButtonLabel", publicName: "createButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, createButtonIcon: { classPropertyName: "createButtonIcon", publicName: "createButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, createRoute: { classPropertyName: "createRoute", publicName: "createRoute", isSignal: true, isRequired: false, transformFunction: null }, editRoute: { classPropertyName: "editRoute", publicName: "editRoute", isSignal: true, isRequired: false, transformFunction: null }, deleteConfirmField: { classPropertyName: "deleteConfirmField", publicName: "deleteConfirmField", isSignal: true, isRequired: false, transformFunction: null }, deleteType: { classPropertyName: "deleteType", publicName: "deleteType", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: false, transformFunction: null }, canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null }, canDelete: { classPropertyName: "canDelete", publicName: "canDelete", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCreate: "onCreate", onLazyLoad: "onLazyLoad", onSearch: "onSearch" }, queries: [{ propertyName: "columnTemplates", predicate: BaseListTemplateDirective, isSignal: true }], ngImport: i0, 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\n                ><ui-icon name=\"search\" class=\"text-sm\"></ui-icon\n              ></f-inputicon>\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", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: CardComponent, selector: "f-card", inputs: ["header", "subheader", "styleClass", "style"] }, { kind: "component", type: IconFieldComponent, selector: "f-iconfield", inputs: ["iconPosition", "styleClass"] }, { kind: "component", type: InputIconComponent, selector: "f-inputicon", inputs: ["icon", "position", "styleClass", "style"] }, { kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "directive", type: InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched", "variant", "size", "fluid"] }, { kind: "directive", type: FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: TableComponent, selector: "f-table", inputs: ["value", "lazy", "loading", "rows", "totalRecords", "rowHover", "dataKey", "scrollable", "scrollHeight", "paginator", "first", "rowsPerPageOptions", "showCurrentPageReport", "currentPageReportTemplate", "tableStyle", "styleClass", "globalFilterFields", "filterDelay", "responsiveLayout", "selectionMode", "sortMode", "rowExpandMode", "resizableColumns", "rowStyleClass", "virtualScroll", "virtualScrollItemSize", "sortField", "sortOrder", "multiSortMeta", "filters", "selection", "expandedRowKeys", "contextMenuSelection"], outputs: ["sortFieldChange", "sortOrderChange", "multiSortMetaChange", "filtersChange", "selectionChange", "expandedRowKeysChange", "contextMenuSelectionChange", "onLazyLoad", "onSort", "onFilter", "onRowSelect", "onRowUnselect", "onSelectAllChange", "onRowExpand", "onRowCollapse", "onColResize", "onRowContextMenu"] }, { kind: "component", type: TagComponent, selector: "f-tag", inputs: ["value", "severity", "icon", "rounded", "color", "styleClass", "style"] }, { kind: "directive", type: TooltipDirective, selector: "[fTooltip]", inputs: ["fTooltip", "tooltipPosition", "positionStyle", "tooltipStyleClass", "disabled", "tooltipEvent", "showDelay", "hideDelay", "life", "autoHide", "positionTop", "positionLeft", "escape"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: BaseListComponent, isStandalone: true, selector: "lib-base-list", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showCreateButton: { classPropertyName: "showCreateButton", publicName: "showCreateButton", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, scrollHeight: { classPropertyName: "scrollHeight", publicName: "scrollHeight", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, createButtonLabel: { classPropertyName: "createButtonLabel", publicName: "createButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, createButtonIcon: { classPropertyName: "createButtonIcon", publicName: "createButtonIcon", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, createRoute: { classPropertyName: "createRoute", publicName: "createRoute", isSignal: true, isRequired: false, transformFunction: null }, editRoute: { classPropertyName: "editRoute", publicName: "editRoute", isSignal: true, isRequired: false, transformFunction: null }, deleteConfirmField: { classPropertyName: "deleteConfirmField", publicName: "deleteConfirmField", isSignal: true, isRequired: false, transformFunction: null }, deleteType: { classPropertyName: "deleteType", publicName: "deleteType", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: true, isRequired: false, transformFunction: null }, canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null }, canDelete: { classPropertyName: "canDelete", publicName: "canDelete", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCreate: "onCreate", onLazyLoad: "onLazyLoad", onSearch: "onSearch" }, queries: [{ propertyName: "columnTemplates", predicate: BaseListTemplateDirective, isSignal: true }], ngImport: i0, 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", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: CardComponent, selector: "f-card", inputs: ["header", "subheader", "styleClass", "style"] }, { kind: "component", type: IconFieldComponent, selector: "f-iconfield", inputs: ["iconPosition", "styleClass"] }, { kind: "component", type: InputIconComponent, selector: "f-inputicon", inputs: ["icon", "position", "styleClass", "style"] }, { kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "directive", type: InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched", "variant", "size", "fluid"] }, { kind: "directive", type: FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: TableComponent, selector: "f-table", inputs: ["value", "lazy", "loading", "rows", "totalRecords", "rowHover", "dataKey", "scrollable", "scrollHeight", "paginator", "first", "rowsPerPageOptions", "showCurrentPageReport", "currentPageReportTemplate", "tableStyle", "styleClass", "globalFilterFields", "filterDelay", "responsiveLayout", "selectionMode", "sortMode", "rowExpandMode", "resizableColumns", "rowStyleClass", "virtualScroll", "virtualScrollItemSize", "sortField", "sortOrder", "multiSortMeta", "filters", "selection", "expandedRowKeys", "contextMenuSelection"], outputs: ["sortFieldChange", "sortOrderChange", "multiSortMetaChange", "filtersChange", "selectionChange", "expandedRowKeysChange", "contextMenuSelectionChange", "onLazyLoad", "onSort", "onFilter", "onRowSelect", "onRowUnselect", "onSelectAllChange", "onRowExpand", "onRowCollapse", "onColResize", "onRowContextMenu"] }, { kind: "component", type: TagComponent, selector: "f-tag", inputs: ["value", "severity", "icon", "rounded", "color", "styleClass", "style"] }, { kind: "directive", type: TooltipDirective, selector: "[fTooltip]", inputs: ["fTooltip", "tooltipPosition", "positionStyle", "tooltipStyleClass", "disabled", "tooltipEvent", "showDelay", "hideDelay", "life", "autoHide", "positionTop", "positionLeft", "escape"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: DecimalPipe, name: "number" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: BaseListComponent, decorators: [{
             type: Component,
@@ -1910,7 +1910,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
                         TableComponent,
                         TagComponent,
                         TooltipDirective,
-                    ], 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\n                ><ui-icon name=\"search\" class=\"text-sm\"></ui-icon\n              ></f-inputicon>\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" }]
+                    ], 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 }] }] } });
 
 /**
@@ -2572,6 +2572,11 @@ class FileSelectorDialogComponent {
     ...(ngDevMode ? [{ debugName: "folders" }] : /* istanbul ignore next */ []));
     selectedFolderId = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectedFolderId" }] : /* istanbul ignore next */ []));
+    // Captured at selection time so the trigger label survives a later
+    // (onFilter) search replacing `folders()` with results that no longer
+    // include the already-selected folder.
+    selectedFolderObject = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedFolderObject" }] : /* istanbul ignore next */ []));
     foldersLoading = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "foldersLoading" }] : /* istanbul ignore next */ []));
     foldersPagination = signal({
@@ -2585,6 +2590,9 @@ class FileSelectorDialogComponent {
     ...(ngDevMode ? [{ debugName: "storageConfigs" }] : /* istanbul ignore next */ []));
     selectedStorageConfigId = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectedStorageConfigId" }] : /* istanbul ignore next */ []));
+    // Same reasoning as selectedFolderObject above.
+    selectedStorageConfigObject = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedStorageConfigObject" }] : /* istanbul ignore next */ []));
     storageConfigsLoading = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "storageConfigsLoading" }] : /* istanbul ignore next */ []));
     storageConfigsPagination = signal({
@@ -2719,6 +2727,7 @@ class FileSelectorDialogComponent {
     }
     onFolderChange(folderId) {
         this.selectedFolderId.set(folderId);
+        this.selectedFolderObject.set(folderId ? (this.folders().find((f) => f.id === folderId) ?? null) : null);
         this.pagination.update((p) => ({ ...p, currentPage: 0 }));
         this.files.set([]);
         this.fetchFiles();
@@ -2753,6 +2762,9 @@ class FileSelectorDialogComponent {
     }
     onStorageConfigChange(configId) {
         this.selectedStorageConfigId.set(configId);
+        this.selectedStorageConfigObject.set(configId
+            ? (this.storageConfigs().find((c) => c.id === configId) ?? null)
+            : null);
         this.pagination.update((p) => ({ ...p, currentPage: 0 }));
         this.files.set([]);
         this.fetchFiles();
@@ -2817,6 +2829,7 @@ class FileSelectorDialogComponent {
         this.pagination.set({ pageSize: this.pageSize(), currentPage: 0 });
         this.total.set(undefined);
         this.selectedFolderId.set(null);
+        this.selectedFolderObject.set(null);
         this.folders.set([]);
         this.foldersPagination.set({
             pageSize: DEFAULT_SELECTOR_PAGE_SIZE,
@@ -2824,6 +2837,7 @@ class FileSelectorDialogComponent {
         });
         this.foldersTotal.set(undefined);
         this.selectedStorageConfigId.set(null);
+        this.selectedStorageConfigObject.set(null);
         this.storageConfigs.set([]);
         this.storageConfigsPagination.set({
             pageSize: DEFAULT_SELECTOR_PAGE_SIZE,
@@ -2942,7 +2956,7 @@ class FileSelectorDialogComponent {
           class="flex flex-col sm:flex-row gap-2 mb-3 items-stretch sm:items-center"
         >
           <f-iconfield class="flex-1">
-            <f-inputicon><ui-icon name="search" /></f-inputicon>
+            <f-inputicon icon="search" />
             <input
               fInputText
               type="text"
@@ -2967,6 +2981,7 @@ class FileSelectorDialogComponent {
               [filter]="true"
               filterBy="name"
               (onFilter)="onFolderSearch($event)"
+              [selectedObject]="selectedFolderObject()"
               [loading]="foldersLoading()"
               class="w-full sm:w-40"
               (onShow)="loadFolders()"
@@ -2998,6 +3013,7 @@ class FileSelectorDialogComponent {
               [filter]="true"
               filterBy="name"
               (onFilter)="onStorageConfigSearch($event)"
+              [selectedObject]="selectedStorageConfigObject()"
               [loading]="storageConfigsLoading()"
               class="w-full sm:w-40"
               (onShow)="loadStorageConfigs()"
@@ -3131,7 +3147,7 @@ class FileSelectorDialogComponent {
         </ng-template>
       }
     </f-dialog>
-  `, isInline: true, styles: [".file-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;max-height:300px;overflow-y:auto;padding:.5rem}@media(min-width:480px){.file-grid{grid-template-columns:repeat(3,1fr);max-height:350px}}@media(min-width:640px){.file-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem;max-height:400px}}.file-card{border:2px solid var(--f-surface-300);border-radius:var(--f-border-radius);cursor:pointer;transition:all .2s ease;overflow:hidden;background:var(--f-surface-0)}:host-context(.app-dark) .file-card,.app-dark .file-card{border-color:var(--f-surface-600);background:var(--f-surface-800)}.file-card:hover:not(.disabled){border-color:var(--f-primary-color);transform:translateY(-2px);box-shadow:var(--f-overlay-shadow)}.file-card.selected{border-color:var(--f-primary-color);background:var(--f-primary-50)}:host-context(.app-dark) .file-card.selected,.app-dark .file-card.selected{background:var(--f-primary-900)}.file-card.disabled{opacity:.5;cursor:not-allowed}.file-preview{position:relative;height:80px;display:flex;align-items:center;justify-content:center;background:var(--f-surface-100)}@media(min-width:640px){.file-preview{height:100px}}:host-context(.app-dark) .file-preview,.app-dark .file-preview{background:var(--f-surface-700)}.selected-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--f-primary-500-rgb, 59, 130, 246),.3)}.selected-overlay i{color:var(--f-primary-color);background:var(--f-surface-0);border-radius:50%;padding:.5rem}:host-context(.app-dark) .selected-overlay i,.app-dark .selected-overlay i{background:var(--f-surface-900)}\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: "directive", type: IsEmptyImageDirective, selector: "img", inputs: ["src"] }, { kind: "component", type: DialogComponent, selector: "f-dialog", inputs: ["header", "visible", "modal", "closable", "closeOnEscape", "dismissableMask", "resizable", "draggable", "maximizable", "blockScroll", "returnFocusOnClose", "position", "style", "styleClass", "breakpoints"], outputs: ["visibleChange", "onShow", "onHide", "onMaximize"] }, { kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "component", type: ButtonComponent, selector: "f-button", inputs: ["label", "icon", "iconPos", "severity", "type", "disabled", "loading", "loadingIcon", "text", "link", "outlined", "plain", "variant", "raised", "rounded", "fluid", "size", "ariaLabel", "autofocus", "tabindex", "styleClass", "style", "badge", "badgeSeverity", "badgeClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: IconFieldComponent, selector: "f-iconfield", inputs: ["iconPosition", "styleClass"] }, { kind: "component", type: InputIconComponent, selector: "f-inputicon", inputs: ["icon", "position", "styleClass", "style"] }, { kind: "directive", type: InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched", "variant", "size", "fluid"] }, { 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"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur", "onFocus", "onClear", "onLazyLoad"] }, { kind: "component", type: FileUploaderComponent, selector: "lib-file-uploader", inputs: ["uploadFile", "uploadMultipleFiles", "acceptTypes", "multiple", "maxFiles", "maxSizeMb", "uploadOptions", "disabled", "showPreview", "autoUpload"], outputs: ["fileUploaded", "filesUploaded", "onError", "fileSelected"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+  `, isInline: true, styles: [".file-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;max-height:300px;overflow-y:auto;padding:.5rem}@media(min-width:480px){.file-grid{grid-template-columns:repeat(3,1fr);max-height:350px}}@media(min-width:640px){.file-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem;max-height:400px}}.file-card{border:2px solid var(--f-surface-300);border-radius:var(--f-border-radius);cursor:pointer;transition:all .2s ease;overflow:hidden;background:var(--f-surface-0)}:host-context(.app-dark) .file-card,.app-dark .file-card{border-color:var(--f-surface-600);background:var(--f-surface-800)}.file-card:hover:not(.disabled){border-color:var(--f-primary-color);transform:translateY(-2px);box-shadow:var(--f-overlay-shadow)}.file-card.selected{border-color:var(--f-primary-color);background:var(--f-primary-50)}:host-context(.app-dark) .file-card.selected,.app-dark .file-card.selected{background:var(--f-primary-900)}.file-card.disabled{opacity:.5;cursor:not-allowed}.file-preview{position:relative;height:80px;display:flex;align-items:center;justify-content:center;background:var(--f-surface-100)}@media(min-width:640px){.file-preview{height:100px}}:host-context(.app-dark) .file-preview,.app-dark .file-preview{background:var(--f-surface-700)}.selected-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(var(--f-primary-500-rgb, 59, 130, 246),.3)}.selected-overlay i{color:var(--f-primary-color);background:var(--f-surface-0);border-radius:50%;padding:.5rem}:host-context(.app-dark) .selected-overlay i,.app-dark .selected-overlay i{background:var(--f-surface-900)}\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: "directive", type: IsEmptyImageDirective, selector: "img", inputs: ["src"] }, { kind: "component", type: DialogComponent, selector: "f-dialog", inputs: ["header", "visible", "modal", "closable", "closeOnEscape", "dismissableMask", "resizable", "draggable", "maximizable", "blockScroll", "returnFocusOnClose", "position", "style", "styleClass", "breakpoints"], outputs: ["visibleChange", "onShow", "onHide", "onMaximize"] }, { kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "component", type: ButtonComponent, selector: "f-button", inputs: ["label", "icon", "iconPos", "severity", "type", "disabled", "loading", "loadingIcon", "text", "link", "outlined", "plain", "variant", "raised", "rounded", "fluid", "size", "ariaLabel", "autofocus", "tabindex", "styleClass", "style", "badge", "badgeSeverity", "badgeClass"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: IconFieldComponent, selector: "f-iconfield", inputs: ["iconPosition", "styleClass"] }, { kind: "component", type: InputIconComponent, selector: "f-inputicon", inputs: ["icon", "position", "styleClass", "style"] }, { kind: "directive", type: InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched", "variant", "size", "fluid"] }, { 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: "component", type: FileUploaderComponent, selector: "lib-file-uploader", inputs: ["uploadFile", "uploadMultipleFiles", "acceptTypes", "multiple", "maxFiles", "maxSizeMb", "uploadOptions", "disabled", "showPreview", "autoUpload"], outputs: ["fileUploaded", "filesUploaded", "onError", "fileSelected"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: FileSelectorDialogComponent, decorators: [{
             type: Component,
@@ -3201,7 +3217,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
           class="flex flex-col sm:flex-row gap-2 mb-3 items-stretch sm:items-center"
         >
           <f-iconfield class="flex-1">
-            <f-inputicon><ui-icon name="search" /></f-inputicon>
+            <f-inputicon icon="search" />
             <input
               fInputText
               type="text"
@@ -3226,6 +3242,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
               [filter]="true"
               filterBy="name"
               (onFilter)="onFolderSearch($event)"
+              [selectedObject]="selectedFolderObject()"
               [loading]="foldersLoading()"
               class="w-full sm:w-40"
               (onShow)="loadFolders()"
@@ -3257,6 +3274,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
               [filter]="true"
               filterBy="name"
               (onFilter)="onStorageConfigSearch($event)"
+              [selectedObject]="selectedStorageConfigObject()"
               [loading]="storageConfigsLoading()"
               class="w-full sm:w-40"
               (onShow)="loadStorageConfigs()"
@@ -3405,7 +3423,7 @@ class IconComponent {
       @if (iconType() === IconTypeEnum.IMAGE_FILE_LINK) {
         <img [alt]="icon()" [src]="icon()" />
       } @else {
-        <ui-icon [name]="icon()"></ui-icon>
+        <ui-icon [name]="icon()" [size]="17"></ui-icon>
       }
     }
   `, isInline: true, dependencies: [{ kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }] });
@@ -3420,7 +3438,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
       @if (iconType() === IconTypeEnum.IMAGE_FILE_LINK) {
         <img [alt]="icon()" [src]="icon()" />
       } @else {
-        <ui-icon [name]="icon()"></ui-icon>
+        <ui-icon [name]="icon()" [size]="17"></ui-icon>
       }
     }
   `,
@@ -3495,6 +3513,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
 class LazyMultiSelectComponent extends BaseFormControl {
     document = inject(DOCUMENT$1);
     appRef = inject(ApplicationRef);
+    overlayStack = inject(OverlayStackService);
     translateAdapter = inject(TranslateService, {
         optional: true,
     });
@@ -3506,6 +3525,7 @@ class LazyMultiSelectComponent extends BaseFormControl {
     ...(ngDevMode ? [{ debugName: "overlayTemplate" }] : /* istanbul ignore next */ []));
     // Portal state
     overlayViewRef = null;
+    detachOverlayPosition = null;
     // Inputs
     placeHolder = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "placeHolder" }] : /* istanbul ignore next */ []));
@@ -3529,9 +3549,30 @@ class LazyMultiSelectComponent extends BaseFormControl {
     ...(ngDevMode ? [{ debugName: "pagination" }] : /* istanbul ignore next */ []));
     selectDataList = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectDataList" }] : /* istanbul ignore next */ []));
+    /**
+     * Full option objects for the currently selected values, supplied by the
+     * caller (or a subclass like UserMultiSelectComponent). Pinned into
+     * `mergedDataList` (deduped by `value`) so chips/labels/checkboxes survive
+     * a later search/page reload that replaces `selectDataList()` without the
+     * selection having changed. This component renders its own overlay list
+     * (it does not build on f-multiselect), so the merge has to happen here.
+     */
+    selectedObjects = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedObjects" }] : /* istanbul ignore next */ []));
     // Two-way bound value
     value = model(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    selectedObjectEntries = computed(() => {
+        const vals = this.value() ?? [];
+        return this.selectedObjects().filter((o) => vals.includes(o.value));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedObjectEntries" }] : /* istanbul ignore next */ []));
+    mergedDataList = computed(() => {
+        const base = this.selectDataList();
+        const extras = this.selectedObjectEntries().filter((sel) => !base.some((o) => o.value === sel.value));
+        return extras.length ? [...extras, ...base] : base;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mergedDataList" }] : /* istanbul ignore next */ []));
     // Outputs
     onSearch = output();
     onPagination = output();
@@ -3550,7 +3591,7 @@ class LazyMultiSelectComponent extends BaseFormControl {
                 count: selectedValues.length,
             });
         }
-        return this.selectDataList()
+        return this.mergedDataList()
             .filter((item) => selectedValues.includes(item.value))
             .map((item) => item.label)
             .join(', ');
@@ -3563,7 +3604,7 @@ class LazyMultiSelectComponent extends BaseFormControl {
     ...(ngDevMode ? [{ debugName: "hasSelectedValues" }] : /* istanbul ignore next */ []));
     isSelectAll = computed(() => {
         const selectedValues = this.value() ?? [];
-        const allValues = this.selectDataList().map((item) => item.value);
+        const allValues = this.mergedDataList().map((item) => item.value);
         if (selectedValues.length === 0 || allValues.length === 0)
             return false;
         return allValues.every((val) => selectedValues.includes(val));
@@ -3630,25 +3671,33 @@ class LazyMultiSelectComponent extends BaseFormControl {
         // Create embedded view and append to body (portal pattern)
         this.overlayViewRef = this.overlayTemplate().createEmbeddedView({});
         this.appRef.attachView(this.overlayViewRef);
+        // Zoneless CD only flushes this view on the next scheduler tick, so
+        // without a synchronous detectChanges() here the panel is still just its
+        // empty shell (no search box, no @for rows) at the moment we measure it
+        // below. attachOverlayPosition() would place it for that near-zero
+        // height, then the ResizeObserver correction a frame later — once the
+        // real content has rendered — snaps it to its true (often much taller)
+        // size, which is the visible "blip down and up" the panel does on open.
+        this.overlayViewRef.detectChanges();
         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;
-      `;
-        }
+        const anchorEl = this.pSelectRef()?.nativeElement;
+        if (!anchorEl)
+            return;
+        overlayEl.style.position = 'fixed';
+        overlayEl.style.zIndex = `${this.overlayStack.open()}`;
+        // Flips above the field and caps its height against the viewport, so a list
+        // that grows after its lazy page arrives is never cut off by the screen edge.
+        this.detachOverlayPosition = attachOverlayPosition(anchorEl, overlayEl, {
+            gap: 2,
+            matchAnchorWidth: true,
+        });
     }
     closeOverlay() {
         this.openOptions.set(false);
         this.pSelectRef()?.nativeElement.classList.remove('p-focus');
+        this.detachOverlayPosition?.();
+        this.detachOverlayPosition = null;
         if (this.overlayViewRef) {
             this.appRef.detachView(this.overlayViewRef);
             this.overlayViewRef.destroy();
@@ -3683,7 +3732,7 @@ class LazyMultiSelectComponent extends BaseFormControl {
     }
     changeSelectAll(event) {
         if (event.checked) {
-            this.value.set(this.selectDataList().map((item) => item.value));
+            this.value.set(this.mergedDataList().map((item) => item.value));
         }
         else {
             this.value.set([]);
@@ -3700,7 +3749,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 }, 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 selectDataList(); 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,
@@ -3710,8 +3759,8 @@ 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 selectDataList(); 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" }]
-        }], 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 }] }], 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"] }] } });
+                    ], 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"] }] } });
 
 /**
  * Lazy-loading single select component with search and pagination.
@@ -3759,6 +3808,14 @@ class LazySelectComponent extends BaseFormControl {
     ...(ngDevMode ? [{ debugName: "pagination" }] : /* istanbul ignore next */ []));
     selectDataList = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "selectDataList" }] : /* istanbul ignore next */ []));
+    /**
+     * Full option object for the current value, supplied by the caller (or a
+     * subclass like UserSelectComponent). Forwarded to f-select's own
+     * `selectedObject` input so the label survives a later search/page reload
+     * that replaces `selectDataList()` without the value having changed.
+     */
+    selectedObject = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedObject" }] : /* istanbul ignore next */ []));
     // Two-way bound value
     value = model(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
@@ -3841,7 +3898,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 }, 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    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"], 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,
@@ -3850,8 +3907,8 @@ 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    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" }]
-        }], 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 }] }], 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"] }] } });
+                    ], 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 {
     tabs = input([], /* @ts-ignore */
@@ -3940,11 +3997,64 @@ class BaseUserSelectComponent {
     searchTerm = signal('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
     // Computed dropdown data
-    dropdownUsers = computed(() => this.users().map((user) => ({
-        label: user.name || user.email,
-        value: user.id,
-    })), /* @ts-ignore */
+    dropdownUsers = computed(() => this.users().map((user) => this.toDropDown(user)), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dropdownUsers" }] : /* istanbul ignore next */ []));
+    // Every user this component has ever seen, keyed by id. Search/pagination
+    // replace `users()` wholesale, so without this a user selected before a
+    // later search would silently disappear from `dropdownUsers()` even though
+    // the selection itself hasn't changed.
+    _knownUsers = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_knownUsers" }] : /* istanbul ignore next */ []));
+    toDropDown(user) {
+        // 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) {
+        const user = this.resolveKnownUserRaw(id);
+        return user ? this.toDropDown(user) : null;
+    }
+    /** Resolves multiple previously-seen user ids, even if no longer in `users()`. */
+    resolveKnownUsers(ids) {
+        return this.resolveKnownUsersRaw(ids).map((u) => this.toDropDown(u));
+    }
+    /** Same as resolveKnownUser, but returns the raw IUserBasicInfo (for outputs like userSelected). */
+    resolveKnownUserRaw(id) {
+        if (!id)
+            return null;
+        return this._knownUsers().get(id) ?? null;
+    }
+    /** Same as resolveKnownUsers, but returns the raw IUserBasicInfo[] (for outputs like usersSelected). */
+    resolveKnownUsersRaw(ids) {
+        const known = this._knownUsers();
+        return ids
+            .map((id) => known.get(id))
+            .filter((u) => !!u);
+    }
+    // Called synchronously wherever `users()` gains new entries (fetchUsers),
+    // rather than via an effect watching `users()`: fetchUsers is invoked from
+    // afterNextRender's callback, whose async continuation runs outside the
+    // normal change-detection flush cycle, so an effect there is not
+    // guaranteed to re-run promptly when the fetch resolves.
+    rememberUsers(list) {
+        if (!list.length)
+            return;
+        this._knownUsers.update((map) => {
+            let changed = false;
+            const next = new Map(map);
+            for (const u of list) {
+                if (next.get(u.id) !== u) {
+                    next.set(u.id, u);
+                    changed = true;
+                }
+            }
+            return changed ? next : map;
+        });
+    }
     // Computed placeholder with translation fallback
     displayPlaceholder = computed(() => {
         const customPlaceholder = this.placeHolder();
@@ -4016,6 +4126,7 @@ class BaseUserSelectComponent {
                     this.users.set(response.data);
                 }
                 this.total.set(response.meta?.total);
+                this.rememberUsers(response.data);
             }
         }
         catch (error) {
@@ -4099,13 +4210,16 @@ class UserMultiSelectComponent extends BaseUserSelectComponent {
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     // Outputs
     usersSelected = output();
+    selectedObjects = computed(() => this.resolveKnownUsers(this.value() ?? []), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedObjects" }] : /* istanbul ignore next */ []));
     setupValueEffect() {
-        // Emit selected users when value changes
+        // Emit selected users when value changes. Resolves via the sticky known-
+        // users cache (not the transient users() page) so this stays correct
+        // across searches, matching selectedObjects()'s behavior above.
         effect(() => {
             const selectedIds = this.value() ?? [];
-            const users = this.users();
+            const selectedUsers = this.resolveKnownUsersRaw(selectedIds);
             untracked(() => {
-                const selectedUsers = users.filter((u) => selectedIds.includes(u.id));
                 this.usersSelected.emit(selectedUsers);
             });
         });
@@ -4121,10 +4235,11 @@ class UserMultiSelectComponent extends BaseUserSelectComponent {
       [total]="total()"
       [pagination]="pagination()"
       [selectDataList]="dropdownUsers()"
+      [selectedObjects]="selectedObjects()"
       (onSearch)="handleSearch($event)"
       (onPagination)="handlePagination($event)"
     />
-  `, isInline: true, dependencies: [{ kind: "component", type: LazyMultiSelectComponent, selector: "lib-lazy-multi-select", inputs: ["placeHolder", "showClear", "isEditMode", "isLoading", "total", "pagination", "selectDataList", "value"], outputs: ["valueChange", "onSearch", "onPagination"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: LazyMultiSelectComponent, selector: "lib-lazy-multi-select", inputs: ["placeHolder", "showClear", "isEditMode", "isLoading", "total", "pagination", "selectDataList", "selectedObjects", "value"], outputs: ["valueChange", "onSearch", "onPagination"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: UserMultiSelectComponent, decorators: [{
             type: Component,
@@ -4141,6 +4256,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
       [total]="total()"
       [pagination]="pagination()"
       [selectDataList]="dropdownUsers()"
+      [selectedObjects]="selectedObjects()"
       (onSearch)="handleSearch($event)"
       (onPagination)="handlePagination($event)"
     />
@@ -4184,19 +4300,17 @@ class UserSelectComponent extends BaseUserSelectComponent {
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     // Outputs
     userSelected = output();
+    selectedObject = computed(() => this.resolveKnownUser(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedObject" }] : /* istanbul ignore next */ []));
     setupValueEffect() {
-        // Emit selected user when value changes
+        // Emit selected user when value changes. Resolves via the sticky known-
+        // users cache (not the transient users() page) so this stays correct
+        // across searches, matching selectedObject()'s behavior above.
         effect(() => {
             const selectedId = this.value();
-            const users = this.users();
+            const user = this.resolveKnownUserRaw(selectedId);
             untracked(() => {
-                if (selectedId) {
-                    const user = users.find((u) => u.id === selectedId);
-                    this.userSelected.emit(user ?? null);
-                }
-                else {
-                    this.userSelected.emit(null);
-                }
+                this.userSelected.emit(user);
             });
         });
     }
@@ -4213,10 +4327,11 @@ class UserSelectComponent extends BaseUserSelectComponent {
       [total]="total()"
       [pagination]="pagination()"
       [selectDataList]="dropdownUsers()"
+      [selectedObject]="selectedObject()"
       (onSearch)="handleSearch($event)"
       (onPagination)="handlePagination($event)"
     />
-  `, isInline: true, dependencies: [{ kind: "component", type: LazySelectComponent, selector: "lib-lazy-select", inputs: ["placeHolder", "showClear", "optionLabel", "optionValue", "isEditMode", "isLoading", "total", "pagination", "selectDataList", "value"], outputs: ["valueChange", "onSearch", "onPagination"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: LazySelectComponent, selector: "lib-lazy-select", inputs: ["placeHolder", "showClear", "optionLabel", "optionValue", "isEditMode", "isLoading", "total", "pagination", "selectDataList", "selectedObject", "value"], outputs: ["valueChange", "onSearch", "onPagination"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: UserSelectComponent, decorators: [{
             type: Component,
@@ -4235,6 +4350,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
       [total]="total()"
       [pagination]="pagination()"
       [selectDataList]="dropdownUsers()"
+      [selectedObject]="selectedObject()"
       (onSearch)="handleSearch($event)"
       (onPagination)="handlePagination($event)"
     />