@flusys/ng-shared 6.0.0-beta.2 → 6.0.0-rc.1

package/fesm2022/flusys-ng-shared.mjs

@@ -1728,7 +1728,7 @@ class BaseFormComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BaseFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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-iconfield iconPosition=\"right\" class=\"w-full\">\n                <input\n                  fInputText\n                  fInputPassword\n                  [id]=\"field.key\"\n                  [name]=\"field.key\"\n                  [mask]=\"!isPasswordVisible(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                  [invalid]=\"isFieldInvalid(field)\"\n                  class=\"w-full\"\n                />\n                <f-inputicon\n                  class=\"cursor-pointer\"\n                  (click)=\"togglePasswordVisibility(field.key)\"\n                >\n                  <ui-icon [name]=\"isPasswordVisible(field.key) ? 'eye-slash' : 'eye'\"></ui-icon>\n                </f-inputicon>\n              </f-iconfield>\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); context: { $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: AngularModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: UiModule }, { kind: "directive", type: i3.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "rounded", "raised", "fluid", "disabled", "loading", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i3.CheckboxComponent, selector: "f-checkbox", inputs: ["label", "binary", "disabled", "inputId", "invalid", "indeterminate", "touched", "styleClass", "checked"], outputs: ["onChange", "onBlur", "touch", "checkedChange"] }, { kind: "component", type: i3.DatePickerComponent, selector: "f-datepicker", inputs: ["placeholder", "dateFormat", "disabled", "showTime", "selectionMode", "minDate", "maxDate", "inputId", "invalid", "touched", "showClear", "inputStyleClass", "showIcon", "showButtonBar", "appendTo", "styleClass"], outputs: ["onBlur"] }, { kind: "component", type: i3.IconFieldComponent, selector: "f-iconfield" }, { kind: "component", type: i3.InputIconComponent, selector: "f-inputicon", inputs: ["styleClass"] }, { kind: "component", type: i3.InputNumberComponent, selector: "f-inputnumber", inputs: ["min", "max", "step", "showButtons", "disabled", "inputId", "invalid", "touched", "placeholder", "prefix", "suffix", "useGrouping", "buttonLayout", "inputStyleClass"], outputs: ["onBlur"] }, { kind: "directive", type: i3.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched"] }, { kind: "directive", type: i3.InputPasswordDirective, selector: "[fInputPassword]", inputs: ["mask"] }, { kind: "component", type: i3.MultiSelectComponent, selector: "f-multiselect", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "inputId", "invalid", "touched", "showClear", "optionDisabled", "display", "maxSelectedLabels", "selectionLimit", "showToggleAll", "styleClass"], outputs: ["onBlur"] }, { kind: "component", type: i3.SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "showClear", "loading", "inputId", "invalid", "touched", "styleClass", "editable"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur"] }, { kind: "directive", type: i3.TextareaDirective, selector: "[fTextarea]", inputs: ["invalid", "touched"] }, { kind: "component", type: i3.ToggleSwitchComponent, selector: "f-toggleswitch", inputs: ["disabled", "readonly", "invalid", "ariaLabel", "trueValue", "falseValue", "inputId"] }, { kind: "component", type: i3.CardComponent, selector: "f-card", inputs: ["header", "subheader", "styleClass"] }, { kind: "component", type: i3.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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-iconfield iconPosition=\"right\" class=\"w-full\">\n                <input\n                  fInputText\n                  fInputPassword\n                  [id]=\"field.key\"\n                  [name]=\"field.key\"\n                  [mask]=\"!isPasswordVisible(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                  [invalid]=\"isFieldInvalid(field)\"\n                  class=\"w-full\"\n                />\n                <f-inputicon\n                  class=\"cursor-pointer\"\n                  (click)=\"togglePasswordVisibility(field.key)\"\n                >\n                  <ui-icon [name]=\"isPasswordVisible(field.key) ? 'eye-slash' : 'eye'\"></ui-icon>\n                </f-inputicon>\n              </f-iconfield>\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); context: { $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: AngularModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: UiModule }, { kind: "directive", type: i3.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i3.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: i3.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: i3.IconFieldComponent, selector: "f-iconfield", inputs: ["iconPosition", "styleClass"] }, { kind: "component", type: i3.InputIconComponent, selector: "f-inputicon", inputs: ["icon", "position", "styleClass", "style"] }, { kind: "component", type: i3.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: i3.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched", "variant", "size", "fluid"] }, { kind: "directive", type: i3.InputPasswordDirective, selector: "[fInputPassword]", inputs: ["mask", "toggleMask"], exportAs: ["fInputPassword"] }, { kind: "component", type: i3.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", "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: i3.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", "editable", "readonly", "autofocus", "checkmark", "group", "optionGroupLabel", "optionGroupChildren", "virtualScroll", "virtualScrollItemSize", "lazy"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur", "onFocus", "onClear", "onLazyLoad"] }, { kind: "directive", type: i3.TextareaDirective, selector: "[fTextarea]", inputs: ["invalid", "touched", "variant", "fluid", "autoResize"], outputs: ["onResize"] }, { kind: "component", type: i3.ToggleSwitchComponent, selector: "f-toggleswitch", inputs: ["disabled", "readonly", "invalid", "ariaLabel", "trueValue", "falseValue", "inputId", "size", "tabindex", "styleClass", "style"] }, { kind: "component", type: i3.CardComponent, selector: "f-card", inputs: ["header", "subheader", "styleClass", "style"] }, { kind: "component", type: i3.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BaseFormComponent, decorators: [{
             type: Component,
@@ -1923,7 +1923,7 @@ class BaseListComponent {
         return this.translateAdapter?.translate(key, vars) ?? key;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BaseListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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 }, 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 }, 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 class=\"flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 p-4\">\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><ui-icon name=\"search\" class=\"text-sm\"></ui-icon></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\n              fButton\n              (click)=\"handleCreate()\"\n            >\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      [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 [style.width]=\"col.width\" [style.min-width]=\"col.minWidth\" [class]=\"getCellClass(col)\">\n              {{ col.header }}\n            </th>\n          }\n          @if (effectiveActions().length > 0) {\n            <th style=\"width: 120px; text-align: center;\">{{ t('shared.actions') }}</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 (getTagConfig(col, getFieldValue(item, col.field)); as tagCfg) {\n                    <f-tag [severity]=\"tagCfg.severity\" [value]=\"tagCfg.label ?? getFieldValueAsString(item, col.field)\" />\n                  } @else {\n                    {{ getFieldValueAsString(item, col.field) }}\n                  }\n                }\n                @case ('boolean') {\n                  <f-tag\n                    [severity]=\"getFieldValue(item, col.field) ? 'success' : 'danger'\"\n                    [value]=\"getFieldValue(item, col.field) ? t('shared.yes') : t('shared.no')\"\n                  />\n                }\n                @case ('date') {\n                  {{ getFieldValueAsString(item, col.field) | date: (col.dateFormat ?? 'dd/MM/yyyy') }}\n                }\n                @case ('number') {\n                  {{ getFieldValueAsString(item, col.field) | number }}\n                }\n                @case ('custom') {\n                  <ng-container\n                    *ngTemplateOutlet=\"getColumnTemplate(col.field); context: { $implicit: item, field: col.field }\"\n                  />\n                }\n                @default {\n                  {{ truncateText(getFieldValue(item, col.field), col.truncate) }}\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]=\"action.disabled ? action.disabled(item) : false\"\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 class=\"flex flex-col items-center justify-center py-12 text-surface-400\">\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: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: UiModule }, { kind: "directive", type: i3.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "rounded", "raised", "fluid", "disabled", "loading", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i3.TagComponent, selector: "f-tag", inputs: ["value", "severity", "icon", "rounded", "color"] }, { kind: "component", type: i3.IconFieldComponent, selector: "f-iconfield" }, { kind: "component", type: i3.InputIconComponent, selector: "f-inputicon", inputs: ["styleClass"] }, { kind: "directive", type: i3.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched"] }, { kind: "component", type: i3.CardComponent, selector: "f-card", inputs: ["header", "subheader", "styleClass"] }, { kind: "component", type: i3.TableComponent, selector: "f-table", inputs: ["value", "lazy", "loading", "rows", "totalRecords", "rowHover", "dataKey", "scrollable", "paginator", "first", "rowsPerPageOptions", "showCurrentPageReport", "currentPageReportTemplate", "tableStyle", "styleClass", "globalFilterFields", "sortField", "sortOrder"], outputs: ["sortFieldChange", "sortOrderChange", "onLazyLoad", "onSort"] }, { kind: "directive", type: i3.TooltipDirective, selector: "[fTooltip]", inputs: ["fTooltip", "tooltipPosition", "tooltipStyleClass", "disabled", "tooltipEvent", "showDelay", "hideDelay"] }, { kind: "component", type: i3.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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 }, 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 }, 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 class=\"flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 p-4\">\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><ui-icon name=\"search\" class=\"text-sm\"></ui-icon></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\n              fButton\n              (click)=\"handleCreate()\"\n            >\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      [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 [style.width]=\"col.width\" [style.min-width]=\"col.minWidth\" [class]=\"getCellClass(col)\">\n              {{ col.header }}\n            </th>\n          }\n          @if (effectiveActions().length > 0) {\n            <th style=\"width: 120px; text-align: center;\">{{ t('shared.actions') }}</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 (getTagConfig(col, getFieldValue(item, col.field)); as tagCfg) {\n                    <f-tag [severity]=\"tagCfg.severity\" [value]=\"tagCfg.label ?? getFieldValueAsString(item, col.field)\" />\n                  } @else {\n                    {{ getFieldValueAsString(item, col.field) }}\n                  }\n                }\n                @case ('boolean') {\n                  <f-tag\n                    [severity]=\"getFieldValue(item, col.field) ? 'success' : 'danger'\"\n                    [value]=\"getFieldValue(item, col.field) ? t('shared.yes') : t('shared.no')\"\n                  />\n                }\n                @case ('date') {\n                  {{ getFieldValueAsString(item, col.field) | date: (col.dateFormat ?? 'dd/MM/yyyy') }}\n                }\n                @case ('number') {\n                  {{ getFieldValueAsString(item, col.field) | number }}\n                }\n                @case ('custom') {\n                  <ng-container\n                    *ngTemplateOutlet=\"getColumnTemplate(col.field); context: { $implicit: item, field: col.field }\"\n                  />\n                }\n                @default {\n                  {{ truncateText(getFieldValue(item, col.field), col.truncate) }}\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]=\"action.disabled ? action.disabled(item) : false\"\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 class=\"flex flex-col items-center justify-center py-12 text-surface-400\">\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: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: UiModule }, { kind: "directive", type: i3.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i3.TagComponent, selector: "f-tag", inputs: ["value", "severity", "icon", "rounded", "color", "styleClass", "style"] }, { kind: "component", type: i3.IconFieldComponent, selector: "f-iconfield", inputs: ["iconPosition", "styleClass"] }, { kind: "component", type: i3.InputIconComponent, selector: "f-inputicon", inputs: ["icon", "position", "styleClass", "style"] }, { kind: "directive", type: i3.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched", "variant", "size", "fluid"] }, { kind: "component", type: i3.CardComponent, selector: "f-card", inputs: ["header", "subheader", "styleClass", "style"] }, { kind: "component", type: i3.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: "directive", type: i3.TooltipDirective, selector: "[fTooltip]", inputs: ["fTooltip", "tooltipPosition", "positionStyle", "tooltipStyleClass", "disabled", "tooltipEvent", "showDelay", "hideDelay", "life", "autoHide", "positionTop", "positionLeft", "escape"] }, { kind: "component", type: i3.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: BaseListComponent, decorators: [{
             type: Component,
@@ -2402,7 +2402,7 @@ class FileUploaderComponent {
         }
       </div>
     }
-  `, isInline: true, styles: [".upload-zone{border-color:var(--f-surface-300);background:var(--f-surface-50)}.upload-zone:hover:not(.cursor-not-allowed){border-color:var(--f-primary-color);background:var(--f-surface-100)}.upload-zone.drag-over{border-color:var(--f-primary-color);background:var(--f-primary-50)}:host-context(.p-dark) .upload-zone,.dark .upload-zone{border-color:var(--f-surface-600);background:var(--f-surface-800)}:host-context(.p-dark) .upload-zone:hover:not(.cursor-not-allowed),.dark .upload-zone:hover:not(.cursor-not-allowed){border-color:var(--f-primary-color);background:var(--f-surface-700)}:host-context(.p-dark) .upload-zone.drag-over,.dark .upload-zone.drag-over{border-color:var(--f-primary-color);background:var(--f-primary-900)}.file-preview-item{border:1px solid var(--f-surface-200);background:var(--f-surface-0)}:host-context(.p-dark) .file-preview-item,.dark .file-preview-item{border-color:var(--f-surface-600);background:var(--f-surface-800)}\n"], dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "ngmodule", type: UiModule }, { kind: "directive", type: i3.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "rounded", "raised", "fluid", "disabled", "loading", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i3.ProgressbarComponent, selector: "f-progressbar", inputs: ["value", "mode", "showValue"] }, { kind: "component", type: i3.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+  `, isInline: true, styles: [".upload-zone{border-color:var(--f-surface-300);background:var(--f-surface-50)}.upload-zone:hover:not(.cursor-not-allowed){border-color:var(--f-primary-color);background:var(--f-surface-100)}.upload-zone.drag-over{border-color:var(--f-primary-color);background:var(--f-primary-50)}:host-context(.p-dark) .upload-zone,.dark .upload-zone{border-color:var(--f-surface-600);background:var(--f-surface-800)}:host-context(.p-dark) .upload-zone:hover:not(.cursor-not-allowed),.dark .upload-zone:hover:not(.cursor-not-allowed){border-color:var(--f-primary-color);background:var(--f-surface-700)}:host-context(.p-dark) .upload-zone.drag-over,.dark .upload-zone.drag-over{border-color:var(--f-primary-color);background:var(--f-primary-900)}.file-preview-item{border:1px solid var(--f-surface-200);background:var(--f-surface-0)}:host-context(.p-dark) .file-preview-item,.dark .file-preview-item{border-color:var(--f-surface-600);background:var(--f-surface-800)}\n"], dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "ngmodule", type: UiModule }, { kind: "directive", type: i3.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i3.ProgressbarComponent, selector: "f-progressbar", inputs: ["value", "mode", "showValue", "unit", "severity", "color", "styleClass"] }, { kind: "component", type: i3.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: FileUploaderComponent, decorators: [{
             type: Component,
@@ -3143,7 +3143,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(.p-dark) .file-card,.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(.p-dark) .file-card.selected,.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(.p-dark) .file-preview,.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(.p-dark) .selected-overlay i,.dark .selected-overlay i{background:var(--f-surface-900)}\n"], dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IsEmptyImageDirective, selector: "img", inputs: ["src"] }, { kind: "ngmodule", type: UiModule }, { kind: "component", type: i3.ButtonComponent, selector: "f-button", inputs: ["label", "icon", "iconPos", "severity", "type", "disabled", "loading", "text", "link", "outlined", "raised", "rounded", "fluid", "size"], outputs: ["onClick"] }, { kind: "component", type: i3.IconFieldComponent, selector: "f-iconfield" }, { kind: "component", type: i3.InputIconComponent, selector: "f-inputicon", inputs: ["styleClass"] }, { kind: "directive", type: i3.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched"] }, { kind: "component", type: i3.SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "showClear", "loading", "inputId", "invalid", "touched", "styleClass", "editable"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur"] }, { kind: "component", type: i3.DialogComponent, selector: "f-dialog", inputs: ["header", "visible", "modal", "closable", "dismissableMask", "resizable", "style", "breakpoints"], outputs: ["visibleChange", "onShow", "onHide"] }, { kind: "component", type: i3.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }, { 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(.p-dark) .file-card,.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(.p-dark) .file-card.selected,.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(.p-dark) .file-preview,.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(.p-dark) .selected-overlay i,.dark .selected-overlay i{background:var(--f-surface-900)}\n"], dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: IsEmptyImageDirective, selector: "img", inputs: ["src"] }, { kind: "ngmodule", type: UiModule }, { kind: "component", type: i3.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: i3.IconFieldComponent, selector: "f-iconfield", inputs: ["iconPosition", "styleClass"] }, { kind: "component", type: i3.InputIconComponent, selector: "f-inputicon", inputs: ["icon", "position", "styleClass", "style"] }, { kind: "directive", type: i3.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched", "variant", "size", "fluid"] }, { kind: "component", type: i3.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", "editable", "readonly", "autofocus", "checkmark", "group", "optionGroupLabel", "optionGroupChildren", "virtualScroll", "virtualScrollItemSize", "lazy"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur", "onFocus", "onClear", "onLazyLoad"] }, { kind: "component", type: i3.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: i3.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { 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.0.6", ngImport: i0, type: FileSelectorDialogComponent, decorators: [{
             type: Component,
@@ -3408,7 +3408,7 @@ class IconComponent {
         <ui-icon [name]="icon()"></ui-icon>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
@@ -3666,7 +3666,7 @@ class LazyMultiSelectComponent extends BaseFormControl {
         return key;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LazyMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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-[38px]\"\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 class=\"flex-1 truncate text-(--f-form-field-color)\" [class.edit-mode-element-css]=\"!isEditMode()\">\n      {{ selectedValueDisplay() }}\n    </span>\n  } @else {\n    <span class=\"flex-1 truncate text-(--f-form-field-placeholder-color)\">{{ displayPlaceholder() }}</span>\n  }\n\n  @if (showClear() && hasSelectedValues()) {\n    <span class=\"inline-flex items-center px-1 text-(--f-text-muted-color) hover:text-(--f-text-hover-color) cursor-pointer\" (click)=\"clear($event)\">\n      <ui-icon name=\"times\" class=\"text-xs\"></ui-icon>\n    </span>\n  }\n\n  @if (isEditMode()) {\n    <span class=\"inline-flex items-center px-1 text-(--f-form-field-placeholder-color)\">\n      <ui-icon name=\"chevron-down\" class=\"text-xs\"></ui-icon>\n    </span>\n  }\n</div>\n\n<ng-template #overlayTpl>\n  <div class=\"flex flex-col max-h-[250px] overflow-hidden\" (click)=\"onOverlayClick($event)\">\n    <div 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      <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 class=\"flex-1 overflow-y-auto min-h-0 w-full\" (scroll)=\"onScroll($event)\">\n      <ul class=\"m-0 py-1 list-none bg-(--f-overlay-popover-background) text-(--f-text-color) w-full\">\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]=\"isItemSelected ? 'bg-primary/10 text-primary' : 'text-(--f-text-color) hover:bg-(--f-content-hover-background)'\"\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: UiModule }, { kind: "component", type: i3.CheckboxComponent, selector: "f-checkbox", inputs: ["label", "binary", "disabled", "inputId", "invalid", "indeterminate", "touched", "styleClass", "checked"], outputs: ["onChange", "onBlur", "touch", "checkedChange"] }, { kind: "directive", type: i3.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched"] }, { kind: "component", type: i3.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }, { kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", 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-[38px]\"\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 class=\"flex-1 truncate text-(--f-form-field-color)\" [class.edit-mode-element-css]=\"!isEditMode()\">\n      {{ selectedValueDisplay() }}\n    </span>\n  } @else {\n    <span class=\"flex-1 truncate text-(--f-form-field-placeholder-color)\">{{ displayPlaceholder() }}</span>\n  }\n\n  @if (showClear() && hasSelectedValues()) {\n    <span class=\"inline-flex items-center px-1 text-(--f-text-muted-color) hover:text-(--f-text-hover-color) cursor-pointer\" (click)=\"clear($event)\">\n      <ui-icon name=\"times\" class=\"text-xs\"></ui-icon>\n    </span>\n  }\n\n  @if (isEditMode()) {\n    <span class=\"inline-flex items-center px-1 text-(--f-form-field-placeholder-color)\">\n      <ui-icon name=\"chevron-down\" class=\"text-xs\"></ui-icon>\n    </span>\n  }\n</div>\n\n<ng-template #overlayTpl>\n  <div class=\"flex flex-col max-h-[250px] overflow-hidden\" (click)=\"onOverlayClick($event)\">\n    <div 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      <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 class=\"flex-1 overflow-y-auto min-h-0 w-full\" (scroll)=\"onScroll($event)\">\n      <ul class=\"m-0 py-1 list-none bg-(--f-overlay-popover-background) text-(--f-text-color) w-full\">\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]=\"isItemSelected ? 'bg-primary/10 text-primary' : 'text-(--f-text-color) hover:bg-(--f-content-hover-background)'\"\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: UiModule }, { kind: "component", type: i3.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: i3.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched", "variant", "size", "fluid"] }, { kind: "component", type: i3.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LazyMultiSelectComponent, decorators: [{
             type: Component,
@@ -3804,7 +3804,7 @@ class LazySelectComponent extends BaseFormControl {
         return key;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LazySelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", 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)=\"onBlur()\"\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: AngularModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: UiModule }, { kind: "directive", type: i3.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched"] }, { kind: "component", type: i3.SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "showClear", "loading", "inputId", "invalid", "touched", "styleClass", "editable"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur"] }, { kind: "directive", type: EditModeElementChangerDirective, selector: "[appEditModeElementChanger]", inputs: ["isEditMode"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", 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)=\"onBlur()\"\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: AngularModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: UiModule }, { kind: "directive", type: i3.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched", "variant", "size", "fluid"] }, { kind: "component", type: i3.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", "editable", "readonly", "autofocus", "checkmark", "group", "optionGroupLabel", "optionGroupChildren", "virtualScroll", "virtualScrollItemSize", "lazy"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur", "onFocus", "onClear", "onLazyLoad"] }, { kind: "directive", type: EditModeElementChangerDirective, selector: "[appEditModeElementChanger]", inputs: ["isEditMode"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LazySelectComponent, decorators: [{
             type: Component,
@@ -3831,7 +3831,7 @@ class RouterTabsComponent {
         </a>
       }
     </div>
-  `, isInline: true, styles: [".router-tabs-scroll{-ms-overflow-style:none;scrollbar-width:none}.router-tabs-scroll::-webkit-scrollbar{display:none}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill"] }] });
+  `, isInline: true, styles: [".router-tabs-scroll{-ms-overflow-style:none;scrollbar-width:none}.router-tabs-scroll::-webkit-scrollbar{display:none}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RouterTabsComponent, decorators: [{
             type: Component,