@flusys/ng-shared 8.0.0-beta.1 → 8.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -7,7 +7,7 @@ import { of, catchError as catchError$1, throwError, firstValueFrom, map as map$
7
7
  import { map, tap, catchError } from 'rxjs/operators';
8
8
  import * as i1 from '@angular/forms';
9
9
  import { NgControl, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
10
- import { MessageService, CardComponent, IconFieldComponent, InputTextDirective, InputPasswordDirective, InputIconComponent, UiIconComponent, InputNumberComponent, TextareaDirective, SelectComponent, MultiSelectComponent, DatePickerComponent, CheckboxComponent, ToggleSwitchComponent, FButtonDirective, ConfirmationService, TableComponent, TagComponent, TooltipDirective, ProgressbarComponent, DialogComponent, ButtonComponent } from '@flusys/ng-ui';
10
+ import { MessageService, CardComponent, InputTextDirective, PasswordComponent, UiIconComponent, InputNumberComponent, TextareaDirective, SelectComponent, MultiSelectComponent, DatePickerComponent, CheckboxComponent, ToggleSwitchComponent, FButtonDirective, ConfirmationService, IconFieldComponent, InputIconComponent, TableComponent, TagComponent, TooltipDirective, ProgressbarComponent, DialogComponent, ButtonComponent } from '@flusys/ng-ui';
11
11
  import { Router, RouterLink, RouterLinkActive } from '@angular/router';
12
12
  import { DomSanitizer } from '@angular/platform-browser';
13
13
 
@@ -1492,8 +1492,6 @@ class BaseFormComponent {
1492
1492
  ...(ngDevMode ? [{ debugName: "_isLoadingInternal" }] : /* istanbul ignore next */ []));
1493
1493
  _touchedFields = signal(new Set(), /* @ts-ignore */
1494
1494
  ...(ngDevMode ? [{ debugName: "_touchedFields" }] : /* istanbul ignore next */ []));
1495
- _visiblePasswordFields = signal(new Set(), /* @ts-ignore */
1496
- ...(ngDevMode ? [{ debugName: "_visiblePasswordFields" }] : /* istanbul ignore next */ []));
1497
1495
  formData = this._formData.asReadonly();
1498
1496
  submitted = this._submitted.asReadonly();
1499
1497
  effectiveIsEditMode = computed(() => this.isEditMode() || !!this.editId(), /* @ts-ignore */
@@ -1562,19 +1560,6 @@ class BaseFormComponent {
1562
1560
  markFieldTouched(key) {
1563
1561
  this._touchedFields.update((set) => new Set([...set, key]));
1564
1562
  }
1565
- isPasswordVisible(key) {
1566
- return this._visiblePasswordFields().has(key);
1567
- }
1568
- togglePasswordVisibility(key) {
1569
- this._visiblePasswordFields.update((set) => {
1570
- const next = new Set(set);
1571
- if (next.has(key))
1572
- next.delete(key);
1573
- else
1574
- next.add(key);
1575
- return next;
1576
- });
1577
- }
1578
1563
  isFieldInvalid(field) {
1579
1564
  const isActive = this._submitted() || this._touchedFields().has(field.key);
1580
1565
  if (!isActive || !field.required)
@@ -1667,7 +1652,7 @@ class BaseFormComponent {
1667
1652
  }
1668
1653
  }
1669
1654
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: BaseFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1670
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: BaseFormComponent, isStandalone: true, selector: "lib-base-form", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, createTitle: { classPropertyName: "createTitle", publicName: "createTitle", isSignal: true, isRequired: false, transformFunction: null }, editTitle: { classPropertyName: "editTitle", publicName: "editTitle", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, submitLabel: { classPropertyName: "submitLabel", publicName: "submitLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isEditMode: { classPropertyName: "isEditMode", publicName: "isEditMode", isSignal: true, isRequired: false, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: false, transformFunction: null }, editId: { classPropertyName: "editId", publicName: "editId", isSignal: true, isRequired: false, transformFunction: null }, cancelRoute: { classPropertyName: "cancelRoute", publicName: "cancelRoute", isSignal: true, isRequired: false, transformFunction: null }, navigateOnSuccess: { classPropertyName: "navigateOnSuccess", publicName: "navigateOnSuccess", isSignal: true, isRequired: false, transformFunction: null }, mapToRequest: { classPropertyName: "mapToRequest", publicName: "mapToRequest", isSignal: true, isRequired: false, transformFunction: null }, mapFromEntity: { classPropertyName: "mapFromEntity", publicName: "mapFromEntity", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSubmit: "onSubmit", onCancel: "onCancel", onValueChange: "onValueChange" }, queries: [{ propertyName: "fieldTemplates", predicate: BaseFormTemplateDirective, isSignal: true }], ngImport: i0, template: "<f-card>\n <ng-template #header>\n @if (resolvedTitle()) {\n <div class=\"flex justify-between items-center p-4\">\n <h2 class=\"text-xl font-semibold m-0\">{{ resolvedTitle() }}</h2>\n </div>\n }\n </ng-template>\n\n <form (ngSubmit)=\"handleSubmit()\" novalidate>\n <div class=\"grid gap-4\" [class]=\"gridClass()\">\n @for (field of fields(); track field.key) {\n <div class=\"flex flex-col gap-2\" [class.col-span-full]=\"field.fullWidth\">\n @if (field.type !== 'checkbox' && field.type !== 'toggle') {\n <label [for]=\"field.key\" class=\"font-medium\">\n {{ field.label }}\n @if (field.required) {\n <span class=\"text-red-500 ml-1\">*</span>\n }\n </label>\n }\n\n @switch (field.type) {\n @case ('text') {\n <input\n fInputText\n [id]=\"field.key\"\n [name]=\"field.key\"\n [ngModel]=\"getFieldValue(field.key)\"\n (ngModelChange)=\"setFieldValue(field.key, $event)\"\n (blur)=\"markFieldTouched(field.key)\"\n [placeholder]=\"field.placeholder ?? ''\"\n [disabled]=\"field.disabled ?? false\"\n [class.ng-invalid]=\"isFieldInvalid(field)\"\n [class.ng-dirty]=\"isFieldInvalid(field)\"\n class=\"w-full\"\n />\n }\n\n @case ('email') {\n <input\n fInputText\n type=\"email\"\n [id]=\"field.key\"\n [name]=\"field.key\"\n [ngModel]=\"getFieldValue(field.key)\"\n (ngModelChange)=\"setFieldValue(field.key, $event)\"\n (blur)=\"markFieldTouched(field.key)\"\n [placeholder]=\"field.placeholder ?? ''\"\n [disabled]=\"field.disabled ?? false\"\n [class.ng-invalid]=\"isFieldInvalid(field)\"\n [class.ng-dirty]=\"isFieldInvalid(field)\"\n class=\"w-full\"\n />\n }\n\n @case ('password') {\n <f-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)\"\n [ngTemplateOutletContext]=\"{ $implicit: getFieldValue(field.key), field: field }\"\n />\n }\n }\n\n @if (isFieldInvalid(field)) {\n <small class=\"text-red-500\">{{ field.label }} {{ t('shared.required') }}</small>\n }\n\n @if (field.hint && !isFieldInvalid(field)) {\n <small class=\"text-surface-400\">{{ field.hint }}</small>\n }\n </div>\n }\n\n <div class=\"col-span-full flex justify-end gap-4 pt-4\">\n <button\n fButton\n type=\"button\"\n severity=\"secondary\"\n [outlined]=\"true\"\n [disabled]=\"effectiveIsLoading()\"\n (click)=\"handleCancel()\"\n >\n <span pButtonLabel>{{ cancelLabel() || t('shared.cancel') }}</span>\n </button>\n <button\n fButton\n type=\"submit\"\n [disabled]=\"!isFormValid() || effectiveIsLoading()\"\n >\n @if (effectiveIsLoading()) {\n <ui-icon pButtonIcon name=\"spinner\" [spin]=\"true\"></ui-icon>\n }\n <span pButtonLabel>{{ submitLabel() || (effectiveIsEditMode() ? t('shared.update') : t('shared.save')) }}</span>\n </button>\n </div>\n </div>\n </form>\n</f-card>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CardComponent, selector: "f-card", inputs: ["header", "subheader", "styleClass", "style"] }, { kind: "component", type: IconFieldComponent, selector: "f-iconfield", inputs: ["iconPosition", "styleClass"] }, { kind: "directive", type: InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched", "variant", "size", "fluid"] }, { kind: "directive", type: InputPasswordDirective, selector: "[fInputPassword]", inputs: ["mask", "toggleMask"], exportAs: ["fInputPassword"] }, { kind: "component", type: InputIconComponent, selector: "f-inputicon", inputs: ["icon", "position", "styleClass", "style"] }, { kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "component", type: InputNumberComponent, selector: "f-inputnumber", inputs: ["mode", "currency", "currencyDisplay", "locale", "min", "max", "step", "showButtons", "buttonLayout", "disabled", "readonly", "inputId", "invalid", "touched", "placeholder", "prefix", "suffix", "useGrouping", "minFractionDigits", "maxFractionDigits", "size", "ariaLabel", "ariaDescribedBy", "inputStyleClass", "styleClass", "style"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown"] }, { kind: "directive", type: TextareaDirective, selector: "[fTextarea]", inputs: ["invalid", "touched", "variant", "fluid", "autoResize"], outputs: ["onResize"] }, { kind: "component", type: SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "filterBy", "filterMatchMode", "filterLocale", "filterPlaceholder", "resetFilterOnHide", "autofocusFilter", "emptyMessage", "emptyFilterMessage", "showClear", "loading", "loadingIcon", "dropdownIcon", "clearIcon", "inputId", "invalid", "touched", "styleClass", "style", "appendTo", "editable", "readonly", "autofocus", "checkmark", "group", "optionGroupLabel", "optionGroupChildren", "virtualScroll", "virtualScrollItemSize", "lazy"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur", "onFocus", "onClear", "onLazyLoad"] }, { kind: "component", type: MultiSelectComponent, selector: "f-multiselect", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "filterBy", "filterMatchMode", "filterLocale", "filterPlaceholder", "resetFilterOnHide", "autofocusFilter", "emptyMessage", "emptyFilterMessage", "inputId", "invalid", "touched", "showClear", "optionDisabled", "display", "maxSelectedLabels", "selectionLimit", "showToggleAll", "styleClass", "style", "appendTo", "readonly", "autofocus", "loading", "loadingIcon", "dropdownIcon", "clearIcon", "group", "optionGroupLabel", "optionGroupChildren", "virtualScroll", "virtualScrollItemSize", "lazy"], outputs: ["onBlur", "onFocus", "onChange", "onFilter", "onShow", "onHide", "onClear", "onLazyLoad", "onSelectAllChange"] }, { kind: "component", type: DatePickerComponent, selector: "f-datepicker", inputs: ["placeholder", "dateFormat", "disabled", "readonly", "readonlyInput", "showTime", "timeOnly", "hourFormat", "showSeconds", "selectionMode", "minDate", "maxDate", "disabledDates", "disabledDays", "inputId", "invalid", "touched", "showClear", "inputStyleClass", "showIcon", "iconDisplay", "showButtonBar", "inline", "numberOfMonths", "view", "showOtherMonths", "selectOtherMonths", "firstDayOfWeek", "appendTo", "styleClass", "style"], outputs: ["onBlur", "onSelect", "onShow", "onHide", "onClearClick", "onTodayClick", "onMonthChange", "onYearChange"] }, { kind: "component", type: CheckboxComponent, selector: "f-checkbox", inputs: ["label", "binary", "disabled", "readonly", "inputId", "invalid", "indeterminate", "variant", "size", "touched", "styleClass", "style", "checked"], outputs: ["onChange", "onBlur", "touch", "checkedChange"] }, { kind: "component", type: ToggleSwitchComponent, selector: "f-toggleswitch", inputs: ["disabled", "readonly", "invalid", "ariaLabel", "trueValue", "falseValue", "inputId", "size", "tabindex", "styleClass", "style"] }, { kind: "directive", type: FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }] });
1655
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.5", type: BaseFormComponent, isStandalone: true, selector: "lib-base-form", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, createTitle: { classPropertyName: "createTitle", publicName: "createTitle", isSignal: true, isRequired: false, transformFunction: null }, editTitle: { classPropertyName: "editTitle", publicName: "editTitle", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, submitLabel: { classPropertyName: "submitLabel", publicName: "submitLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isEditMode: { classPropertyName: "isEditMode", publicName: "isEditMode", isSignal: true, isRequired: false, transformFunction: null }, initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: false, transformFunction: null }, editId: { classPropertyName: "editId", publicName: "editId", isSignal: true, isRequired: false, transformFunction: null }, cancelRoute: { classPropertyName: "cancelRoute", publicName: "cancelRoute", isSignal: true, isRequired: false, transformFunction: null }, navigateOnSuccess: { classPropertyName: "navigateOnSuccess", publicName: "navigateOnSuccess", isSignal: true, isRequired: false, transformFunction: null }, mapToRequest: { classPropertyName: "mapToRequest", publicName: "mapToRequest", isSignal: true, isRequired: false, transformFunction: null }, mapFromEntity: { classPropertyName: "mapFromEntity", publicName: "mapFromEntity", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSubmit: "onSubmit", onCancel: "onCancel", onValueChange: "onValueChange" }, queries: [{ propertyName: "fieldTemplates", predicate: BaseFormTemplateDirective, isSignal: true }], ngImport: i0, template: "<f-card>\n <ng-template #header>\n @if (resolvedTitle()) {\n <div class=\"flex justify-between items-center p-4\">\n <h2 class=\"text-xl font-semibold m-0\">{{ resolvedTitle() }}</h2>\n </div>\n }\n </ng-template>\n\n <form (ngSubmit)=\"handleSubmit()\" novalidate>\n <div class=\"grid gap-4\" [class]=\"gridClass()\">\n @for (field of fields(); track field.key) {\n <div class=\"flex flex-col gap-2\" [class.col-span-full]=\"field.fullWidth\">\n @if (field.type !== 'checkbox' && field.type !== 'toggle') {\n <label [for]=\"field.key\" class=\"font-medium\">\n {{ field.label }}\n @if (field.required) {\n <span class=\"text-red-500 ml-1\">*</span>\n }\n </label>\n }\n\n @switch (field.type) {\n @case ('text') {\n <input\n fInputText\n [id]=\"field.key\"\n [name]=\"field.key\"\n [ngModel]=\"getFieldValue(field.key)\"\n (ngModelChange)=\"setFieldValue(field.key, $event)\"\n (blur)=\"markFieldTouched(field.key)\"\n [placeholder]=\"field.placeholder ?? ''\"\n [disabled]=\"field.disabled ?? false\"\n [class.ng-invalid]=\"isFieldInvalid(field)\"\n [class.ng-dirty]=\"isFieldInvalid(field)\"\n class=\"w-full\"\n />\n }\n\n @case ('email') {\n <input\n fInputText\n type=\"email\"\n [id]=\"field.key\"\n [name]=\"field.key\"\n [ngModel]=\"getFieldValue(field.key)\"\n (ngModelChange)=\"setFieldValue(field.key, $event)\"\n (blur)=\"markFieldTouched(field.key)\"\n [placeholder]=\"field.placeholder ?? ''\"\n [disabled]=\"field.disabled ?? false\"\n [class.ng-invalid]=\"isFieldInvalid(field)\"\n [class.ng-dirty]=\"isFieldInvalid(field)\"\n class=\"w-full\"\n />\n }\n\n @case ('password') {\n <f-password\n [inputId]=\"field.key\"\n [name]=\"field.key\"\n [ngModel]=\"getFieldValue(field.key)\"\n (ngModelChange)=\"setFieldValue(field.key, $event)\"\n (onBlur)=\"markFieldTouched(field.key)\"\n [placeholder]=\"field.placeholder ?? ''\"\n [disabled]=\"field.disabled ?? false\"\n [invalid]=\"isFieldInvalid(field)\"\n />\n }\n\n @case ('number') {\n <f-inputnumber\n [inputId]=\"field.key\"\n [name]=\"field.key\"\n [ngModel]=\"getFieldValue(field.key)\"\n (ngModelChange)=\"setFieldValue(field.key, $event)\"\n (onBlur)=\"markFieldTouched(field.key)\"\n [placeholder]=\"field.placeholder ?? ''\"\n [disabled]=\"field.disabled ?? false\"\n [min]=\"field.min ?? null\"\n [max]=\"field.max ?? null\"\n [invalid]=\"isFieldInvalid(field)\"\n class=\"w-full\"\n inputStyleClass=\"w-full\"\n />\n }\n\n @case ('textarea') {\n <textarea\n fTextarea\n [id]=\"field.key\"\n [name]=\"field.key\"\n [ngModel]=\"getFieldValue(field.key)\"\n (ngModelChange)=\"setFieldValue(field.key, $event)\"\n (blur)=\"markFieldTouched(field.key)\"\n [placeholder]=\"field.placeholder ?? ''\"\n [disabled]=\"field.disabled ?? false\"\n [rows]=\"field.rows ?? 3\"\n [class.ng-invalid]=\"isFieldInvalid(field)\"\n [class.ng-dirty]=\"isFieldInvalid(field)\"\n class=\"w-full\"\n ></textarea>\n }\n\n @case ('select') {\n <f-select\n [inputId]=\"field.key\"\n [name]=\"field.key\"\n [ngModel]=\"getFieldValue(field.key)\"\n (ngModelChange)=\"setFieldValue(field.key, $event)\"\n [options]=\"field.options ?? []\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [placeholder]=\"field.placeholder ?? t('shared.select.placeholder')\"\n [disabled]=\"field.disabled ?? false\"\n [invalid]=\"isFieldInvalid(field)\"\n class=\"w-full\"\n />\n }\n\n @case ('multiselect') {\n <f-multiselect\n [inputId]=\"field.key\"\n [name]=\"field.key\"\n [ngModel]=\"getFieldValue(field.key)\"\n (ngModelChange)=\"setFieldValue(field.key, $event)\"\n [options]=\"field.options ?? []\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [placeholder]=\"field.placeholder ?? t('shared.select.placeholder')\"\n [disabled]=\"field.disabled ?? false\"\n [invalid]=\"isFieldInvalid(field)\"\n class=\"w-full\"\n />\n }\n\n @case ('date') {\n <f-datepicker\n [inputId]=\"field.key\"\n [name]=\"field.key\"\n [ngModel]=\"getFieldValue(field.key)\"\n (ngModelChange)=\"setFieldValue(field.key, $event)\"\n (onBlur)=\"markFieldTouched(field.key)\"\n [placeholder]=\"field.placeholder ?? ''\"\n [disabled]=\"field.disabled ?? false\"\n [minDate]=\"field.minDate ?? null\"\n [maxDate]=\"field.maxDate ?? null\"\n [invalid]=\"isFieldInvalid(field)\"\n class=\"w-full\"\n inputStyleClass=\"w-full\"\n />\n }\n\n @case ('checkbox') {\n <div class=\"flex items-center gap-2 h-9\">\n <f-checkbox\n [inputId]=\"field.key\"\n [name]=\"field.key\"\n [ngModel]=\"getFieldValue(field.key)\"\n (ngModelChange)=\"setFieldValue(field.key, $event)\"\n [disabled]=\"field.disabled ?? false\"\n [binary]=\"true\"\n [invalid]=\"isFieldInvalid(field)\"\n />\n <label [for]=\"field.key\" class=\"font-medium cursor-pointer select-none\">\n {{ field.label }}\n @if (field.required) {\n <span class=\"text-red-500 ml-1\">*</span>\n }\n </label>\n </div>\n }\n\n @case ('toggle') {\n <div class=\"flex items-center gap-3 h-9\">\n <f-toggleswitch\n [inputId]=\"field.key\"\n [name]=\"field.key\"\n [ngModel]=\"getFieldValue(field.key)\"\n (ngModelChange)=\"setFieldValue(field.key, $event)\"\n [disabled]=\"field.disabled ?? false\"\n />\n <label [for]=\"field.key\" class=\"font-medium cursor-pointer select-none\">\n {{ field.label }}\n @if (field.required) {\n <span class=\"text-red-500 ml-1\">*</span>\n }\n </label>\n </div>\n }\n\n @case ('custom') {\n <ng-container\n [ngTemplateOutlet]=\"getFieldTemplate(field.key)\"\n [ngTemplateOutletContext]=\"{ $implicit: getFieldValue(field.key), field: field }\"\n />\n }\n }\n\n @if (isFieldInvalid(field)) {\n <small class=\"text-red-500\">{{ field.label }} {{ t('shared.required') }}</small>\n }\n\n @if (field.hint && !isFieldInvalid(field)) {\n <small class=\"text-surface-400\">{{ field.hint }}</small>\n }\n </div>\n }\n\n <div class=\"col-span-full flex justify-end gap-4 pt-4\">\n <button\n fButton\n type=\"button\"\n severity=\"secondary\"\n [outlined]=\"true\"\n [disabled]=\"effectiveIsLoading()\"\n (click)=\"handleCancel()\"\n >\n <span pButtonLabel>{{ cancelLabel() || t('shared.cancel') }}</span>\n </button>\n <button\n fButton\n type=\"submit\"\n [disabled]=\"!isFormValid() || effectiveIsLoading()\"\n >\n @if (effectiveIsLoading()) {\n <ui-icon pButtonIcon name=\"spinner\" [spin]=\"true\"></ui-icon>\n }\n <span pButtonLabel>{{ submitLabel() || (effectiveIsEditMode() ? t('shared.update') : t('shared.save')) }}</span>\n </button>\n </div>\n </div>\n </form>\n</f-card>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CardComponent, selector: "f-card", inputs: ["header", "subheader", "styleClass", "style"] }, { kind: "directive", type: InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched", "variant", "size", "fluid"] }, { kind: "component", type: PasswordComponent, selector: "f-password", inputs: ["toggleMask", "feedback", "disabled", "placeholder", "inputId", "invalid", "touched", "inputStyleClass", "styleClass", "style", "ariaDescribedby", "autocomplete", "variant", "size", "fluid", "appendTo", "promptLabel", "weakLabel", "mediumLabel", "strongLabel", "mediumRegex", "strongRegex"], outputs: ["onBlur", "onFocus"] }, { kind: "component", type: UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "component", type: InputNumberComponent, selector: "f-inputnumber", inputs: ["mode", "currency", "currencyDisplay", "locale", "min", "max", "step", "showButtons", "buttonLayout", "disabled", "readonly", "inputId", "invalid", "touched", "placeholder", "prefix", "suffix", "useGrouping", "minFractionDigits", "maxFractionDigits", "size", "ariaLabel", "ariaDescribedBy", "inputStyleClass", "styleClass", "style"], outputs: ["onInput", "onFocus", "onBlur", "onKeyDown"] }, { kind: "directive", type: TextareaDirective, selector: "[fTextarea]", inputs: ["invalid", "touched", "variant", "fluid", "autoResize"], outputs: ["onResize"] }, { kind: "component", type: SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "filterBy", "filterMatchMode", "filterLocale", "filterPlaceholder", "resetFilterOnHide", "autofocusFilter", "emptyMessage", "emptyFilterMessage", "showClear", "loading", "loadingIcon", "dropdownIcon", "clearIcon", "inputId", "invalid", "touched", "styleClass", "style", "appendTo", "editable", "readonly", "autofocus", "checkmark", "group", "optionGroupLabel", "optionGroupChildren", "virtualScroll", "virtualScrollItemSize", "lazy"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur", "onFocus", "onClear", "onLazyLoad"] }, { kind: "component", type: MultiSelectComponent, selector: "f-multiselect", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "filterBy", "filterMatchMode", "filterLocale", "filterPlaceholder", "resetFilterOnHide", "autofocusFilter", "emptyMessage", "emptyFilterMessage", "inputId", "invalid", "touched", "showClear", "optionDisabled", "display", "maxSelectedLabels", "selectionLimit", "showToggleAll", "styleClass", "style", "appendTo", "readonly", "autofocus", "loading", "loadingIcon", "dropdownIcon", "clearIcon", "group", "optionGroupLabel", "optionGroupChildren", "virtualScroll", "virtualScrollItemSize", "lazy"], outputs: ["onBlur", "onFocus", "onChange", "onFilter", "onShow", "onHide", "onClear", "onLazyLoad", "onSelectAllChange"] }, { kind: "component", type: DatePickerComponent, selector: "f-datepicker", inputs: ["placeholder", "dateFormat", "disabled", "readonly", "readonlyInput", "showTime", "timeOnly", "hourFormat", "showSeconds", "selectionMode", "minDate", "maxDate", "disabledDates", "disabledDays", "inputId", "invalid", "touched", "showClear", "inputStyleClass", "showIcon", "iconDisplay", "showButtonBar", "inline", "numberOfMonths", "view", "showOtherMonths", "selectOtherMonths", "firstDayOfWeek", "appendTo", "styleClass", "style"], outputs: ["onBlur", "onSelect", "onShow", "onHide", "onClearClick", "onTodayClick", "onMonthChange", "onYearChange"] }, { kind: "component", type: CheckboxComponent, selector: "f-checkbox", inputs: ["label", "binary", "disabled", "readonly", "inputId", "invalid", "indeterminate", "variant", "size", "touched", "styleClass", "style", "checked"], outputs: ["onChange", "onBlur", "touch", "checkedChange"] }, { kind: "component", type: ToggleSwitchComponent, selector: "f-toggleswitch", inputs: ["disabled", "readonly", "invalid", "ariaLabel", "trueValue", "falseValue", "inputId", "size", "tabindex", "styleClass", "style"] }, { kind: "directive", type: FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }] });
1671
1656
  }
1672
1657
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImport: i0, type: BaseFormComponent, decorators: [{
1673
1658
  type: Component,
@@ -1675,10 +1660,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
1675
1660
  FormsModule,
1676
1661
  NgTemplateOutlet,
1677
1662
  CardComponent,
1678
- IconFieldComponent,
1679
1663
  InputTextDirective,
1680
- InputPasswordDirective,
1681
- InputIconComponent,
1664
+ PasswordComponent,
1682
1665
  UiIconComponent,
1683
1666
  InputNumberComponent,
1684
1667
  TextareaDirective,
@@ -1688,7 +1671,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.5", ngImpor
1688
1671
  CheckboxComponent,
1689
1672
  ToggleSwitchComponent,
1690
1673
  FButtonDirective,
1691
- ], 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)\"\n [ngTemplateOutletContext]=\"{ $implicit: getFieldValue(field.key), field: field }\"\n />\n }\n }\n\n @if (isFieldInvalid(field)) {\n <small class=\"text-red-500\">{{ field.label }} {{ t('shared.required') }}</small>\n }\n\n @if (field.hint && !isFieldInvalid(field)) {\n <small class=\"text-surface-400\">{{ field.hint }}</small>\n }\n </div>\n }\n\n <div class=\"col-span-full flex justify-end gap-4 pt-4\">\n <button\n fButton\n type=\"button\"\n severity=\"secondary\"\n [outlined]=\"true\"\n [disabled]=\"effectiveIsLoading()\"\n (click)=\"handleCancel()\"\n >\n <span pButtonLabel>{{ cancelLabel() || t('shared.cancel') }}</span>\n </button>\n <button\n fButton\n type=\"submit\"\n [disabled]=\"!isFormValid() || effectiveIsLoading()\"\n >\n @if (effectiveIsLoading()) {\n <ui-icon pButtonIcon name=\"spinner\" [spin]=\"true\"></ui-icon>\n }\n <span pButtonLabel>{{ submitLabel() || (effectiveIsEditMode() ? t('shared.update') : t('shared.save')) }}</span>\n </button>\n </div>\n </div>\n </form>\n</f-card>\n" }]
1674
+ ], template: "<f-card>\n <ng-template #header>\n @if (resolvedTitle()) {\n <div class=\"flex justify-between items-center p-4\">\n <h2 class=\"text-xl font-semibold m-0\">{{ resolvedTitle() }}</h2>\n </div>\n }\n </ng-template>\n\n <form (ngSubmit)=\"handleSubmit()\" novalidate>\n <div class=\"grid gap-4\" [class]=\"gridClass()\">\n @for (field of fields(); track field.key) {\n <div class=\"flex flex-col gap-2\" [class.col-span-full]=\"field.fullWidth\">\n @if (field.type !== 'checkbox' && field.type !== 'toggle') {\n <label [for]=\"field.key\" class=\"font-medium\">\n {{ field.label }}\n @if (field.required) {\n <span class=\"text-red-500 ml-1\">*</span>\n }\n </label>\n }\n\n @switch (field.type) {\n @case ('text') {\n <input\n fInputText\n [id]=\"field.key\"\n [name]=\"field.key\"\n [ngModel]=\"getFieldValue(field.key)\"\n (ngModelChange)=\"setFieldValue(field.key, $event)\"\n (blur)=\"markFieldTouched(field.key)\"\n [placeholder]=\"field.placeholder ?? ''\"\n [disabled]=\"field.disabled ?? false\"\n [class.ng-invalid]=\"isFieldInvalid(field)\"\n [class.ng-dirty]=\"isFieldInvalid(field)\"\n class=\"w-full\"\n />\n }\n\n @case ('email') {\n <input\n fInputText\n type=\"email\"\n [id]=\"field.key\"\n [name]=\"field.key\"\n [ngModel]=\"getFieldValue(field.key)\"\n (ngModelChange)=\"setFieldValue(field.key, $event)\"\n (blur)=\"markFieldTouched(field.key)\"\n [placeholder]=\"field.placeholder ?? ''\"\n [disabled]=\"field.disabled ?? false\"\n [class.ng-invalid]=\"isFieldInvalid(field)\"\n [class.ng-dirty]=\"isFieldInvalid(field)\"\n class=\"w-full\"\n />\n }\n\n @case ('password') {\n <f-password\n [inputId]=\"field.key\"\n [name]=\"field.key\"\n [ngModel]=\"getFieldValue(field.key)\"\n (ngModelChange)=\"setFieldValue(field.key, $event)\"\n (onBlur)=\"markFieldTouched(field.key)\"\n [placeholder]=\"field.placeholder ?? ''\"\n [disabled]=\"field.disabled ?? false\"\n [invalid]=\"isFieldInvalid(field)\"\n />\n }\n\n @case ('number') {\n <f-inputnumber\n [inputId]=\"field.key\"\n [name]=\"field.key\"\n [ngModel]=\"getFieldValue(field.key)\"\n (ngModelChange)=\"setFieldValue(field.key, $event)\"\n (onBlur)=\"markFieldTouched(field.key)\"\n [placeholder]=\"field.placeholder ?? ''\"\n [disabled]=\"field.disabled ?? false\"\n [min]=\"field.min ?? null\"\n [max]=\"field.max ?? null\"\n [invalid]=\"isFieldInvalid(field)\"\n class=\"w-full\"\n inputStyleClass=\"w-full\"\n />\n }\n\n @case ('textarea') {\n <textarea\n fTextarea\n [id]=\"field.key\"\n [name]=\"field.key\"\n [ngModel]=\"getFieldValue(field.key)\"\n (ngModelChange)=\"setFieldValue(field.key, $event)\"\n (blur)=\"markFieldTouched(field.key)\"\n [placeholder]=\"field.placeholder ?? ''\"\n [disabled]=\"field.disabled ?? false\"\n [rows]=\"field.rows ?? 3\"\n [class.ng-invalid]=\"isFieldInvalid(field)\"\n [class.ng-dirty]=\"isFieldInvalid(field)\"\n class=\"w-full\"\n ></textarea>\n }\n\n @case ('select') {\n <f-select\n [inputId]=\"field.key\"\n [name]=\"field.key\"\n [ngModel]=\"getFieldValue(field.key)\"\n (ngModelChange)=\"setFieldValue(field.key, $event)\"\n [options]=\"field.options ?? []\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [placeholder]=\"field.placeholder ?? t('shared.select.placeholder')\"\n [disabled]=\"field.disabled ?? false\"\n [invalid]=\"isFieldInvalid(field)\"\n class=\"w-full\"\n />\n }\n\n @case ('multiselect') {\n <f-multiselect\n [inputId]=\"field.key\"\n [name]=\"field.key\"\n [ngModel]=\"getFieldValue(field.key)\"\n (ngModelChange)=\"setFieldValue(field.key, $event)\"\n [options]=\"field.options ?? []\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [placeholder]=\"field.placeholder ?? t('shared.select.placeholder')\"\n [disabled]=\"field.disabled ?? false\"\n [invalid]=\"isFieldInvalid(field)\"\n class=\"w-full\"\n />\n }\n\n @case ('date') {\n <f-datepicker\n [inputId]=\"field.key\"\n [name]=\"field.key\"\n [ngModel]=\"getFieldValue(field.key)\"\n (ngModelChange)=\"setFieldValue(field.key, $event)\"\n (onBlur)=\"markFieldTouched(field.key)\"\n [placeholder]=\"field.placeholder ?? ''\"\n [disabled]=\"field.disabled ?? false\"\n [minDate]=\"field.minDate ?? null\"\n [maxDate]=\"field.maxDate ?? null\"\n [invalid]=\"isFieldInvalid(field)\"\n class=\"w-full\"\n inputStyleClass=\"w-full\"\n />\n }\n\n @case ('checkbox') {\n <div class=\"flex items-center gap-2 h-9\">\n <f-checkbox\n [inputId]=\"field.key\"\n [name]=\"field.key\"\n [ngModel]=\"getFieldValue(field.key)\"\n (ngModelChange)=\"setFieldValue(field.key, $event)\"\n [disabled]=\"field.disabled ?? false\"\n [binary]=\"true\"\n [invalid]=\"isFieldInvalid(field)\"\n />\n <label [for]=\"field.key\" class=\"font-medium cursor-pointer select-none\">\n {{ field.label }}\n @if (field.required) {\n <span class=\"text-red-500 ml-1\">*</span>\n }\n </label>\n </div>\n }\n\n @case ('toggle') {\n <div class=\"flex items-center gap-3 h-9\">\n <f-toggleswitch\n [inputId]=\"field.key\"\n [name]=\"field.key\"\n [ngModel]=\"getFieldValue(field.key)\"\n (ngModelChange)=\"setFieldValue(field.key, $event)\"\n [disabled]=\"field.disabled ?? false\"\n />\n <label [for]=\"field.key\" class=\"font-medium cursor-pointer select-none\">\n {{ field.label }}\n @if (field.required) {\n <span class=\"text-red-500 ml-1\">*</span>\n }\n </label>\n </div>\n }\n\n @case ('custom') {\n <ng-container\n [ngTemplateOutlet]=\"getFieldTemplate(field.key)\"\n [ngTemplateOutletContext]=\"{ $implicit: getFieldValue(field.key), field: field }\"\n />\n }\n }\n\n @if (isFieldInvalid(field)) {\n <small class=\"text-red-500\">{{ field.label }} {{ t('shared.required') }}</small>\n }\n\n @if (field.hint && !isFieldInvalid(field)) {\n <small class=\"text-surface-400\">{{ field.hint }}</small>\n }\n </div>\n }\n\n <div class=\"col-span-full flex justify-end gap-4 pt-4\">\n <button\n fButton\n type=\"button\"\n severity=\"secondary\"\n [outlined]=\"true\"\n [disabled]=\"effectiveIsLoading()\"\n (click)=\"handleCancel()\"\n >\n <span pButtonLabel>{{ cancelLabel() || t('shared.cancel') }}</span>\n </button>\n <button\n fButton\n type=\"submit\"\n [disabled]=\"!isFormValid() || effectiveIsLoading()\"\n >\n @if (effectiveIsLoading()) {\n <ui-icon pButtonIcon name=\"spinner\" [spin]=\"true\"></ui-icon>\n }\n <span pButtonLabel>{{ submitLabel() || (effectiveIsEditMode() ? t('shared.update') : t('shared.save')) }}</span>\n </button>\n </div>\n </div>\n </form>\n</f-card>\n" }]
1692
1675
  }], ctorParameters: () => [], propDecorators: { fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], createTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "createTitle", required: false }] }], editTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "editTitle", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], submitLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], isEditMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isEditMode", required: false }] }], initialValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialValue", required: false }] }], service: [{ type: i0.Input, args: [{ isSignal: true, alias: "service", required: false }] }], editId: [{ type: i0.Input, args: [{ isSignal: true, alias: "editId", required: false }] }], cancelRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelRoute", required: false }] }], navigateOnSuccess: [{ type: i0.Input, args: [{ isSignal: true, alias: "navigateOnSuccess", required: false }] }], mapToRequest: [{ type: i0.Input, args: [{ isSignal: true, alias: "mapToRequest", required: false }] }], mapFromEntity: [{ type: i0.Input, args: [{ isSignal: true, alias: "mapFromEntity", required: false }] }], onSubmit: [{ type: i0.Output, args: ["onSubmit"] }], onCancel: [{ type: i0.Output, args: ["onCancel"] }], onValueChange: [{ type: i0.Output, args: ["onValueChange"] }], fieldTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => BaseFormTemplateDirective), { isSignal: true }] }] } });
1693
1676
 
1694
1677
  class BaseListTemplateDirective {