@flusys/ng-auth 6.1.3 → 6.2.1

package/fesm2022/flusys-ng-auth.mjs

@@ -3400,10 +3400,8 @@ class LoginPageComponent {
                   {{ 'auth.password.label' | translate }}
                 </label>
                 <div class="mb-4">
-                  <input
-                    fInputText
-                    id="password"
-                    type="password"
+                  <f-password
+                    [inputId]="'password'"
                     [placeholder]="'auth.password.placeholder' | translate"
                     class="w-full"
                     [formField]="loginForm.password"
@@ -3574,7 +3572,7 @@ class LoginPageComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "directive", type: i1$1.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i1$1.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: i1$1.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched", "variant", "size", "fluid"] }, { kind: "component", type: i1$1.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: i1$1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { 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: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "component", type: AppFloatingConfigurator, selector: "app-floating-configurator" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "directive", type: i1$1.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i1$1.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: i1$1.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched", "variant", "size", "fluid"] }, { kind: "component", type: i1$1.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: i1$1.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: i1$1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { 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: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "component", type: AppFloatingConfigurator, selector: "app-floating-configurator" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: LoginPageComponent, decorators: [{
             type: Component,
@@ -3674,10 +3672,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                   {{ 'auth.password.label' | translate }}
                 </label>
                 <div class="mb-4">
-                  <input
-                    fInputText
-                    id="password"
-                    type="password"
+                  <f-password
+                    [inputId]="'password'"
                     [placeholder]="'auth.password.placeholder' | translate"
                     class="w-full"
                     [formField]="loginForm.password"
@@ -4022,16 +4018,33 @@ class ProfilePageComponent {
         };
     }
     parentInjector = inject(Injector);
+    fieldInjectors = new Map();
     getFieldInjector(field) {
-        return Injector.create({
-            providers: [
-                {
-                    provide: PROFILE_FIELD_CONTEXT,
-                    useValue: this.getFieldTemplateContext(field),
-                },
-            ],
+        const cached = this.fieldInjectors.get(field.key);
+        if (cached) {
+            cached.setField(field);
+            return cached.injector;
+        }
+        let currentField = field;
+        const extraFieldsModel = this.extraFieldsModel;
+        const context = {
+            get field() {
+                return currentField;
+            },
+            get value() {
+                return extraFieldsModel()[currentField.key];
+            },
+            updateValue: (value) => this.updateExtraField(currentField.key, value),
+        };
+        const injector = Injector.create({
+            providers: [{ provide: PROFILE_FIELD_CONTEXT, useValue: context }],
             parent: field.injector ?? this.parentInjector,
         });
+        this.fieldInjectors.set(field.key, {
+            injector,
+            setField: (next) => (currentField = next),
+        });
+        return injector;
     }
     passwordModel = signal({
         currentPassword: '',
@@ -4039,12 +4052,6 @@ class ProfilePageComponent {
         confirmPassword: '',
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "passwordModel" }] : /* istanbul ignore next */ []));
-    visiblePasswords = signal({
-        currentPassword: false,
-        newPassword: false,
-        confirmPassword: false,
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "visiblePasswords" }] : /* istanbul ignore next */ []));
     isPasswordLoading = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isPasswordLoading" }] : /* istanbul ignore next */ []));
     isPasswordFormValid = computed(() => {
@@ -4245,9 +4252,6 @@ class ProfilePageComponent {
             error: () => { },
         });
     }
-    togglePasswordVisibility(field) {
-        this.visiblePasswords.update((v) => ({ ...v, [field]: !v[field] }));
-    }
     updatePasswordField(field, value) {
         this.passwordModel.update((model) => ({ ...model, [field]: value }));
     }
@@ -4610,91 +4614,45 @@ class ProfilePageComponent {
             <label for="currentPassword" class="font-medium text-color"
               >{{ 'profile.current.password' | translate }} *</label
             >
-            <f-iconfield iconPosition="right" class="w-full">
-              <input
-                fInputText
-                fInputPassword
-                id="currentPassword"
-                name="currentPassword"
-                [mask]="!visiblePasswords().currentPassword"
-                [ngModel]="passwordModel().currentPassword"
-                (ngModelChange)="updatePasswordField('currentPassword', $event)"
-                [placeholder]="
-                  'profile.current.password.placeholder' | translate
-                "
-                class="w-full"
-              />
-              <f-inputicon
-                class="cursor-pointer"
-                (click)="togglePasswordVisibility('currentPassword')"
-              >
-                <ui-icon
-                  [name]="
-                    visiblePasswords().currentPassword ? 'eye-slash' : 'eye'
-                  "
-                ></ui-icon>
-              </f-inputicon>
-            </f-iconfield>
+            <f-password
+              [inputId]="'currentPassword'"
+              name="currentPassword"
+              [ngModel]="passwordModel().currentPassword"
+              (ngModelChange)="updatePasswordField('currentPassword', $event)"
+              [placeholder]="'profile.current.password.placeholder' | translate"
+              class="w-full"
+              autocomplete="current-password"
+            />
           </div>
 
           <div class="flex flex-col gap-2">
             <label for="newPassword" class="font-medium text-color"
               >{{ 'profile.new.password' | translate }} *</label
             >
-            <f-iconfield iconPosition="right" class="w-full">
-              <input
-                fInputText
-                fInputPassword
-                id="newPassword"
-                name="newPassword"
-                [mask]="!visiblePasswords().newPassword"
-                [ngModel]="passwordModel().newPassword"
-                (ngModelChange)="updatePasswordField('newPassword', $event)"
-                [placeholder]="
-                  'shared.min.characters' | translate: { count: 6 }
-                "
-                class="w-full"
-              />
-              <f-inputicon
-                class="cursor-pointer"
-                (click)="togglePasswordVisibility('newPassword')"
-              >
-                <ui-icon
-                  [name]="visiblePasswords().newPassword ? 'eye-slash' : 'eye'"
-                ></ui-icon>
-              </f-inputicon>
-            </f-iconfield>
+            <f-password
+              [inputId]="'newPassword'"
+              name="newPassword"
+              [ngModel]="passwordModel().newPassword"
+              (ngModelChange)="updatePasswordField('newPassword', $event)"
+              [placeholder]="'shared.min.characters' | translate: { count: 6 }"
+              class="w-full"
+              autocomplete="new-password"
+            />
           </div>
 
           <div class="flex flex-col gap-2">
             <label for="confirmPassword" class="font-medium text-color"
               >{{ 'profile.confirm.password' | translate }} *</label
             >
-            <f-iconfield iconPosition="right" class="w-full">
-              <input
-                fInputText
-                fInputPassword
-                id="confirmPassword"
-                name="confirmPassword"
-                [mask]="!visiblePasswords().confirmPassword"
-                [ngModel]="passwordModel().confirmPassword"
-                (ngModelChange)="updatePasswordField('confirmPassword', $event)"
-                [placeholder]="
-                  'profile.confirm.password.placeholder' | translate
-                "
-                class="w-full"
-              />
-              <f-inputicon
-                class="cursor-pointer"
-                (click)="togglePasswordVisibility('confirmPassword')"
-              >
-                <ui-icon
-                  [name]="
-                    visiblePasswords().confirmPassword ? 'eye-slash' : 'eye'
-                  "
-                ></ui-icon>
-              </f-inputicon>
-            </f-iconfield>
+            <f-password
+              [inputId]="'confirmPassword'"
+              name="confirmPassword"
+              [ngModel]="passwordModel().confirmPassword"
+              (ngModelChange)="updatePasswordField('confirmPassword', $event)"
+              [placeholder]="'profile.confirm.password.placeholder' | translate"
+              class="w-full"
+              autocomplete="new-password"
+            />
             @if (!passwordsMatch()) {
               <small class="text-danger">{{
                 'auth.register.passwords.do.not.match' | translate
@@ -4870,7 +4828,7 @@ class ProfilePageComponent {
         }
       </div>
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "component", type: i1$1.AvatarComponent, selector: "f-avatar", inputs: ["label", "icon", "image", "shape", "size", "color", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "directive", type: i1$1.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i1$1.SkeletonComponent, selector: "f-skeleton", inputs: ["width", "height", "size", "borderRadius", "shape", "animation", "styleClass"] }, { kind: "component", type: i1$1.TagComponent, selector: "f-tag", inputs: ["value", "severity", "icon", "rounded", "color", "styleClass", "style"] }, { kind: "component", type: i1$1.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: i1$1.IconFieldComponent, selector: "f-iconfield", inputs: ["iconPosition", "styleClass"] }, { kind: "component", type: i1$1.InputIconComponent, selector: "f-inputicon", inputs: ["icon", "position", "styleClass", "style"] }, { kind: "directive", type: i1$1.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched", "variant", "size", "fluid"] }, { kind: "directive", type: i1$1.InputPasswordDirective, selector: "[fInputPassword]", inputs: ["mask", "toggleMask"], exportAs: ["fInputPassword"] }, { kind: "component", type: i1$1.SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "filterBy", "filterMatchMode", "filterLocale", "filterPlaceholder", "resetFilterOnHide", "autofocusFilter", "emptyMessage", "emptyFilterMessage", "showClear", "loading", "loadingIcon", "dropdownIcon", "clearIcon", "inputId", "invalid", "touched", "styleClass", "style", "appendTo", "editable", "readonly", "autofocus", "checkmark", "group", "optionGroupLabel", "optionGroupChildren", "virtualScroll", "virtualScrollItemSize", "lazy"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur", "onFocus", "onClear", "onLazyLoad"] }, { kind: "directive", type: i1$1.TextareaDirective, selector: "[fTextarea]", inputs: ["invalid", "touched", "variant", "fluid", "autoResize"], outputs: ["onResize"] }, { kind: "component", type: i1$1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i2$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { 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: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "component", type: i1$1.AvatarComponent, selector: "f-avatar", inputs: ["label", "icon", "image", "shape", "size", "color", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "directive", type: i1$1.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i1$1.SkeletonComponent, selector: "f-skeleton", inputs: ["width", "height", "size", "borderRadius", "shape", "animation", "styleClass"] }, { kind: "component", type: i1$1.TagComponent, selector: "f-tag", inputs: ["value", "severity", "icon", "rounded", "color", "styleClass", "style"] }, { kind: "component", type: i1$1.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: i1$1.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched", "variant", "size", "fluid"] }, { kind: "component", type: i1$1.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: i1$1.SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "filterBy", "filterMatchMode", "filterLocale", "filterPlaceholder", "resetFilterOnHide", "autofocusFilter", "emptyMessage", "emptyFilterMessage", "showClear", "loading", "loadingIcon", "dropdownIcon", "clearIcon", "inputId", "invalid", "touched", "styleClass", "style", "appendTo", "editable", "readonly", "autofocus", "checkmark", "group", "optionGroupLabel", "optionGroupChildren", "virtualScroll", "virtualScrollItemSize", "lazy"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur", "onFocus", "onClear", "onLazyLoad"] }, { kind: "directive", type: i1$1.TextareaDirective, selector: "[fTextarea]", inputs: ["invalid", "touched", "variant", "fluid", "autoResize"], outputs: ["onResize"] }, { kind: "component", type: i1$1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i2$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { 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: "directive", type: HasPermissionDirective, selector: "[hasPermission]", inputs: ["hasPermission"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ProfilePageComponent, decorators: [{
             type: Component,
@@ -5213,91 +5171,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             <label for="currentPassword" class="font-medium text-color"
               >{{ 'profile.current.password' | translate }} *</label
             >
-            <f-iconfield iconPosition="right" class="w-full">
-              <input
-                fInputText
-                fInputPassword
-                id="currentPassword"
-                name="currentPassword"
-                [mask]="!visiblePasswords().currentPassword"
-                [ngModel]="passwordModel().currentPassword"
-                (ngModelChange)="updatePasswordField('currentPassword', $event)"
-                [placeholder]="
-                  'profile.current.password.placeholder' | translate
-                "
-                class="w-full"
-              />
-              <f-inputicon
-                class="cursor-pointer"
-                (click)="togglePasswordVisibility('currentPassword')"
-              >
-                <ui-icon
-                  [name]="
-                    visiblePasswords().currentPassword ? 'eye-slash' : 'eye'
-                  "
-                ></ui-icon>
-              </f-inputicon>
-            </f-iconfield>
+            <f-password
+              [inputId]="'currentPassword'"
+              name="currentPassword"
+              [ngModel]="passwordModel().currentPassword"
+              (ngModelChange)="updatePasswordField('currentPassword', $event)"
+              [placeholder]="'profile.current.password.placeholder' | translate"
+              class="w-full"
+              autocomplete="current-password"
+            />
           </div>
 
           <div class="flex flex-col gap-2">
             <label for="newPassword" class="font-medium text-color"
               >{{ 'profile.new.password' | translate }} *</label
             >
-            <f-iconfield iconPosition="right" class="w-full">
-              <input
-                fInputText
-                fInputPassword
-                id="newPassword"
-                name="newPassword"
-                [mask]="!visiblePasswords().newPassword"
-                [ngModel]="passwordModel().newPassword"
-                (ngModelChange)="updatePasswordField('newPassword', $event)"
-                [placeholder]="
-                  'shared.min.characters' | translate: { count: 6 }
-                "
-                class="w-full"
-              />
-              <f-inputicon
-                class="cursor-pointer"
-                (click)="togglePasswordVisibility('newPassword')"
-              >
-                <ui-icon
-                  [name]="visiblePasswords().newPassword ? 'eye-slash' : 'eye'"
-                ></ui-icon>
-              </f-inputicon>
-            </f-iconfield>
+            <f-password
+              [inputId]="'newPassword'"
+              name="newPassword"
+              [ngModel]="passwordModel().newPassword"
+              (ngModelChange)="updatePasswordField('newPassword', $event)"
+              [placeholder]="'shared.min.characters' | translate: { count: 6 }"
+              class="w-full"
+              autocomplete="new-password"
+            />
           </div>
 
           <div class="flex flex-col gap-2">
             <label for="confirmPassword" class="font-medium text-color"
               >{{ 'profile.confirm.password' | translate }} *</label
             >
-            <f-iconfield iconPosition="right" class="w-full">
-              <input
-                fInputText
-                fInputPassword
-                id="confirmPassword"
-                name="confirmPassword"
-                [mask]="!visiblePasswords().confirmPassword"
-                [ngModel]="passwordModel().confirmPassword"
-                (ngModelChange)="updatePasswordField('confirmPassword', $event)"
-                [placeholder]="
-                  'profile.confirm.password.placeholder' | translate
-                "
-                class="w-full"
-              />
-              <f-inputicon
-                class="cursor-pointer"
-                (click)="togglePasswordVisibility('confirmPassword')"
-              >
-                <ui-icon
-                  [name]="
-                    visiblePasswords().confirmPassword ? 'eye-slash' : 'eye'
-                  "
-                ></ui-icon>
-              </f-inputicon>
-            </f-iconfield>
+            <f-password
+              [inputId]="'confirmPassword'"
+              name="confirmPassword"
+              [ngModel]="passwordModel().confirmPassword"
+              (ngModelChange)="updatePasswordField('confirmPassword', $event)"
+              [placeholder]="'profile.confirm.password.placeholder' | translate"
+              class="w-full"
+              autocomplete="new-password"
+            />
             @if (!passwordsMatch()) {
               <small class="text-danger">{{
                 'auth.register.passwords.do.not.match' | translate
@@ -5525,7 +5437,12 @@ class RegisterPageComponent {
         return fields.sort((a, b) => (a.order ?? 100) - (b.order ?? 100));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "extraFields" }] : /* istanbul ignore next */ []));
-    extraFieldsModel = signal({}, /* @ts-ignore */
+    extraFieldsModel = signal(this.extraFields().reduce((acc, field) => {
+        if (field.defaultValue !== undefined) {
+            acc[field.key] = field.defaultValue;
+        }
+        return acc;
+    }, {}), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "extraFieldsModel" }] : /* istanbul ignore next */ []));
     emailErrorMessage = computed(() => this.validationConfig?.email?.message ??
         this.translate('shared.invalid.email'), /* @ts-ignore */
@@ -5652,16 +5569,33 @@ class RegisterPageComponent {
         };
     }
     parentInjector = inject(Injector);
+    fieldInjectors = new Map();
     getFieldInjector(field) {
-        return Injector.create({
-            providers: [
-                {
-                    provide: REGISTRATION_FIELD_CONTEXT,
-                    useValue: this.getFieldTemplateContext(field),
-                },
-            ],
+        const cached = this.fieldInjectors.get(field.key);
+        if (cached) {
+            cached.setField(field);
+            return cached.injector;
+        }
+        let currentField = field;
+        const extraFieldsModel = this.extraFieldsModel;
+        const context = {
+            get field() {
+                return currentField;
+            },
+            get value() {
+                return extraFieldsModel()[currentField.key] ?? currentField.defaultValue;
+            },
+            updateValue: (value) => this.updateExtraField(currentField.key, value),
+        };
+        const injector = Injector.create({
+            providers: [{ provide: REGISTRATION_FIELD_CONTEXT, useValue: context }],
             parent: field.injector ?? this.parentInjector,
         });
+        this.fieldInjectors.set(field.key, {
+            injector,
+            setField: (next) => (currentField = next),
+        });
+        return injector;
     }
     constructor() {
         effect(() => {
@@ -5865,10 +5799,8 @@ class RegisterPageComponent {
                   <label for="password" class="block font-medium mb-2"
                     >{{ 'auth.password.label' | translate }} *</label
                   >
-                  <input
-                    fInputText
-                    id="password"
-                    type="password"
+                  <f-password
+                    [inputId]="'password'"
                     [formField]="userForm.password"
                     [placeholder]="
                       'shared.min.characters'
@@ -5888,10 +5820,8 @@ class RegisterPageComponent {
                   <label for="confirmPassword" class="block font-medium mb-2"
                     >{{ 'auth.register.confirm.password' | translate }} *</label
                   >
-                  <input
-                    fInputText
-                    id="confirmPassword"
-                    type="password"
+                  <f-password
+                    [inputId]="'confirmPassword'"
                     [formField]="userForm.confirmPassword"
                     [placeholder]="
                       'auth.register.confirm.password.placeholder' | translate
@@ -6006,13 +5936,29 @@ class RegisterPageComponent {
                                 class="w-full"
                                 [options]="field.options ?? []"
                                 optionValue="value"
-                                [ngModel]="extraFieldsModel()[field.key] ?? field.defaultValue ?? ''"
+                                [ngModel]="
+                                  extraFieldsModel()[field.key] ??
+                                  field.defaultValue ??
+                                  ''
+                                "
                                 [ngModelOptions]="{ standalone: true }"
-                                (ngModelChange)="updateExtraField(field.key, $event)"
-                                [placeholder]="field.placeholderKey | translate: null : field.placeholder ?? ('shared.select' | translate)"
+                                (ngModelChange)="
+                                  updateExtraField(field.key, $event)
+                                "
+                                [placeholder]="
+                                  field.placeholderKey
+                                    | translate
+                                      : null
+                                      : field.placeholder ??
+                                          ('shared.select' | translate)
+                                "
                               >
-                                <ng-template #item let-opt>{{ opt.labelKey | translate: null : opt.label }}</ng-template>
-                                <ng-template #selectedItem let-opt>{{ opt.labelKey | translate: null : opt.label }}</ng-template>
+                                <ng-template #item let-opt>{{
+                                  opt.labelKey | translate: null : opt.label
+                                }}</ng-template>
+                                <ng-template #selectedItem let-opt>{{
+                                  opt.labelKey | translate: null : opt.label
+                                }}</ng-template>
                               </f-select>
                             }
                             @case ('checkbox') {
@@ -6222,7 +6168,9 @@ class RegisterPageComponent {
                 @if (isLoading()) {
                   <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
                 }
-                <span pButtonLabel>{{ 'auth.register.create.account' | translate }}</span>
+                <span pButtonLabel>{{
+                  'auth.register.create.account' | translate
+                }}</span>
               </button>
 
               <div class="flex items-center justify-center mt-4 gap-2">
@@ -6241,16 +6189,19 @@ class RegisterPageComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "directive", type: i1$1.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i1$1.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: i1$1.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched", "variant", "size", "fluid"] }, { kind: "component", type: i1$1.SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "filterBy", "filterMatchMode", "filterLocale", "filterPlaceholder", "resetFilterOnHide", "autofocusFilter", "emptyMessage", "emptyFilterMessage", "showClear", "loading", "loadingIcon", "dropdownIcon", "clearIcon", "inputId", "invalid", "touched", "styleClass", "style", "appendTo", "editable", "readonly", "autofocus", "checkmark", "group", "optionGroupLabel", "optionGroupChildren", "virtualScroll", "virtualScrollItemSize", "lazy"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur", "onFocus", "onClear", "onLazyLoad"] }, { kind: "directive", type: i1$1.TextareaDirective, selector: "[fTextarea]", inputs: ["invalid", "touched", "variant", "fluid", "autoResize"], outputs: ["onResize"] }, { kind: "component", type: i1$1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i2$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "component", type: AppFloatingConfigurator, selector: "app-floating-configurator" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "directive", type: i1$1.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i1$1.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: i1$1.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched", "variant", "size", "fluid"] }, { kind: "component", type: i1$1.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: i1$1.SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "filterBy", "filterMatchMode", "filterLocale", "filterPlaceholder", "resetFilterOnHide", "autofocusFilter", "emptyMessage", "emptyFilterMessage", "showClear", "loading", "loadingIcon", "dropdownIcon", "clearIcon", "inputId", "invalid", "touched", "styleClass", "style", "appendTo", "editable", "readonly", "autofocus", "checkmark", "group", "optionGroupLabel", "optionGroupChildren", "virtualScroll", "virtualScrollItemSize", "lazy"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur", "onFocus", "onClear", "onLazyLoad"] }, { kind: "directive", type: i1$1.TextareaDirective, selector: "[fTextarea]", inputs: ["invalid", "touched", "variant", "fluid", "autoResize"], outputs: ["onResize"] }, { kind: "component", type: i1$1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i2$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "component", type: AppFloatingConfigurator, selector: "app-floating-configurator" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: RegisterPageComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'lib-register-page',
-                    imports: [UiModule, AngularModule,
+                    imports: [
+                        UiModule,
+                        AngularModule,
                         FormField,
                         AppFloatingConfigurator,
-                        TranslatePipe,],
+                        TranslatePipe,
+                    ],
                     template: `
     <app-floating-configurator />
     <div
@@ -6329,10 +6280,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                   <label for="password" class="block font-medium mb-2"
                     >{{ 'auth.password.label' | translate }} *</label
                   >
-                  <input
-                    fInputText
-                    id="password"
-                    type="password"
+                  <f-password
+                    [inputId]="'password'"
                     [formField]="userForm.password"
                     [placeholder]="
                       'shared.min.characters'
@@ -6352,10 +6301,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                   <label for="confirmPassword" class="block font-medium mb-2"
                     >{{ 'auth.register.confirm.password' | translate }} *</label
                   >
-                  <input
-                    fInputText
-                    id="confirmPassword"
-                    type="password"
+                  <f-password
+                    [inputId]="'confirmPassword'"
                     [formField]="userForm.confirmPassword"
                     [placeholder]="
                       'auth.register.confirm.password.placeholder' | translate
@@ -6470,13 +6417,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                                 class="w-full"
                                 [options]="field.options ?? []"
                                 optionValue="value"
-                                [ngModel]="extraFieldsModel()[field.key] ?? field.defaultValue ?? ''"
+                                [ngModel]="
+                                  extraFieldsModel()[field.key] ??
+                                  field.defaultValue ??
+                                  ''
+                                "
                                 [ngModelOptions]="{ standalone: true }"
-                                (ngModelChange)="updateExtraField(field.key, $event)"
-                                [placeholder]="field.placeholderKey | translate: null : field.placeholder ?? ('shared.select' | translate)"
+                                (ngModelChange)="
+                                  updateExtraField(field.key, $event)
+                                "
+                                [placeholder]="
+                                  field.placeholderKey
+                                    | translate
+                                      : null
+                                      : field.placeholder ??
+                                          ('shared.select' | translate)
+                                "
                               >
-                                <ng-template #item let-opt>{{ opt.labelKey | translate: null : opt.label }}</ng-template>
-                                <ng-template #selectedItem let-opt>{{ opt.labelKey | translate: null : opt.label }}</ng-template>
+                                <ng-template #item let-opt>{{
+                                  opt.labelKey | translate: null : opt.label
+                                }}</ng-template>
+                                <ng-template #selectedItem let-opt>{{
+                                  opt.labelKey | translate: null : opt.label
+                                }}</ng-template>
                               </f-select>
                             }
                             @case ('checkbox') {
@@ -6686,7 +6649,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 @if (isLoading()) {
                   <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
                 }
-                <span pButtonLabel>{{ 'auth.register.create.account' | translate }}</span>
+                <span pButtonLabel>{{
+                  'auth.register.create.account' | translate
+                }}</span>
               </button>
 
               <div class="flex items-center justify-center mt-4 gap-2">
@@ -6845,10 +6810,8 @@ class ResetPasswordPageComponent {
                   >
                     {{ 'auth.reset.password.new.password' | translate }}
                   </label>
-                  <input
-                    fInputText
-                    id="newPassword"
-                    type="password"
+                  <f-password
+                    [inputId]="'newPassword'"
                     [placeholder]="
                       'auth.reset.password.new.password.placeholder' | translate
                     "
@@ -6863,10 +6826,8 @@ class ResetPasswordPageComponent {
                   >
                     {{ 'auth.reset.password.confirm.password' | translate }}
                   </label>
-                  <input
-                    fInputText
-                    id="confirmPassword"
-                    type="password"
+                  <f-password
+                    [inputId]="'confirmPassword'"
                     [placeholder]="
                       'auth.reset.password.confirm.password.placeholder'
                         | translate
@@ -6963,7 +6924,7 @@ class ResetPasswordPageComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { 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: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "ngmodule", type: UiModule }, { kind: "directive", type: i1$1.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "directive", type: i1$1.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched", "variant", "size", "fluid"] }, { kind: "component", type: i1$1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "component", type: AppFloatingConfigurator, selector: "app-floating-configurator" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { 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: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "ngmodule", type: UiModule }, { kind: "directive", type: i1$1.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i1$1.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: i1$1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "component", type: AppFloatingConfigurator, selector: "app-floating-configurator" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ResetPasswordPageComponent, decorators: [{
             type: Component,
@@ -7010,10 +6971,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                   >
                     {{ 'auth.reset.password.new.password' | translate }}
                   </label>
-                  <input
-                    fInputText
-                    id="newPassword"
-                    type="password"
+                  <f-password
+                    [inputId]="'newPassword'"
                     [placeholder]="
                       'auth.reset.password.new.password.placeholder' | translate
                     "
@@ -7028,10 +6987,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                   >
                     {{ 'auth.reset.password.confirm.password' | translate }}
                   </label>
-                  <input
-                    fInputText
-                    id="confirmPassword"
-                    type="password"
+                  <f-password
+                    [inputId]="'confirmPassword'"
                     [placeholder]="
                       'auth.reset.password.confirm.password.placeholder'
                         | translate
@@ -7231,16 +7188,33 @@ class UserFormComponent {
             updateValue: (value) => this.updateExtraField(field.key, value),
         };
     }
+    fieldInjectors = new Map();
     getFieldInjector(field) {
-        return Injector.create({
-            providers: [
-                {
-                    provide: USER_FORM_FIELD_CONTEXT,
-                    useValue: this.getFieldTemplateContext(field),
-                },
-            ],
+        const cached = this.fieldInjectors.get(field.key);
+        if (cached) {
+            cached.setField(field);
+            return cached.injector;
+        }
+        let currentField = field;
+        const extraFieldsModel = this.extraFieldsModel;
+        const context = {
+            get field() {
+                return currentField;
+            },
+            get value() {
+                return extraFieldsModel()[currentField.key];
+            },
+            updateValue: (value) => this.updateExtraField(currentField.key, value),
+        };
+        const injector = Injector.create({
+            providers: [{ provide: USER_FORM_FIELD_CONTEXT, useValue: context }],
             parent: field.injector ?? this.parentInjector,
         });
+        this.fieldInjectors.set(field.key, {
+            injector,
+            setField: (next) => (currentField = next),
+        });
+        return injector;
     }
     isFormValid = computed(() => {
         const model = this.formModel();
@@ -7482,14 +7456,13 @@ class UserFormComponent {
                 : '*'
             }}
           </label>
-          <input
-            fInputText
-            id="password"
-            type="password"
+          <f-password
+            [inputId]="'password'"
             [formField]="formTree.password"
             [placeholder]="
               'administrative.user.password.placeholder' | translate
             "
+            autocomplete="new-password"
           />
         </div>
 
@@ -7508,7 +7481,8 @@ class UserFormComponent {
         @if (hasExtraFields()) {
           <div class="md:col-span-2 border-t border-surface pt-4 mt-2">
             <div class="text-sm font-medium text-muted-color mb-4">
-              <ui-icon name="sliders-h" class="mr-2"></ui-icon>{{ 'profile.additional.info' | translate }}
+              <ui-icon name="sliders-h" class="mr-2"></ui-icon
+              >{{ 'profile.additional.info' | translate }}
             </div>
             @if (isLoadingExtraFields()) {
               <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -7603,18 +7577,34 @@ class UserFormComponent {
                             optionValue="value"
                             [ngModel]="getExtraFieldValue(field.key) ?? ''"
                             [ngModelOptions]="{ standalone: true }"
-                            (ngModelChange)="updateExtraField(field.key, $event)"
-                            [placeholder]="field.placeholderKey | translate: null : field.placeholder ?? ('shared.select' | translate)"
+                            (ngModelChange)="
+                              updateExtraField(field.key, $event)
+                            "
+                            [placeholder]="
+                              field.placeholderKey
+                                | translate
+                                  : null
+                                  : field.placeholder ??
+                                      ('shared.select' | translate)
+                            "
                           >
-                            <ng-template #item let-opt>{{ opt.labelKey | translate: null : opt.label }}</ng-template>
-                            <ng-template #selectedItem let-opt>{{ opt.labelKey | translate: null : opt.label }}</ng-template>
+                            <ng-template #item let-opt>{{
+                              opt.labelKey | translate: null : opt.label
+                            }}</ng-template>
+                            <ng-template #selectedItem let-opt>{{
+                              opt.labelKey | translate: null : opt.label
+                            }}</ng-template>
                           </f-select>
                         }
                         @case ('checkbox') {
                           <f-checkbox
                             [inputId]="field.key"
-                            [checked]="$any(getExtraFieldValue(field.key) ?? false)"
-                            (onChange)="updateExtraField(field.key, $event.checked)"
+                            [checked]="
+                              $any(getExtraFieldValue(field.key) ?? false)
+                            "
+                            (onChange)="
+                              updateExtraField(field.key, $event.checked)
+                            "
                             [label]="
                               field.placeholderKey
                                 | translate
@@ -7655,8 +7645,14 @@ class UserFormComponent {
         }
 
         <div class="flex items-center gap-6 md:col-span-2 pt-4">
-          <f-checkbox [formField]="formTree.isActive" [label]="'shared.active' | translate" />
-          <f-checkbox [formField]="formTree.emailVerified" [label]="'administrative.user.email.verified' | translate" />
+          <f-checkbox
+            [formField]="formTree.isActive"
+            [label]="'shared.active' | translate"
+          />
+          <f-checkbox
+            [formField]="formTree.emailVerified"
+            [label]="'administrative.user.email.verified' | translate"
+          />
         </div>
 
         @if (companyFeatureEnabled() && !isEditMode()) {
@@ -7693,16 +7689,16 @@ class UserFormComponent {
             @if (isLoading()) {
               <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
             }
-            <span pButtonLabel>{{ 
+            <span pButtonLabel>{{
               isEditMode()
                 ? ('shared.update' | translate)
                 : ('shared.create' | translate)
-             }}</span>
+            }}</span>
           </button>
         </div>
       </form>
     </f-card>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "directive", type: i1$1.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i1$1.SkeletonComponent, selector: "f-skeleton", inputs: ["width", "height", "size", "borderRadius", "shape", "animation", "styleClass"] }, { kind: "component", type: i1$1.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: i1$1.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched", "variant", "size", "fluid"] }, { kind: "component", type: i1$1.SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "filterBy", "filterMatchMode", "filterLocale", "filterPlaceholder", "resetFilterOnHide", "autofocusFilter", "emptyMessage", "emptyFilterMessage", "showClear", "loading", "loadingIcon", "dropdownIcon", "clearIcon", "inputId", "invalid", "touched", "styleClass", "style", "appendTo", "editable", "readonly", "autofocus", "checkmark", "group", "optionGroupLabel", "optionGroupChildren", "virtualScroll", "virtualScrollItemSize", "lazy"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur", "onFocus", "onClear", "onLazyLoad"] }, { kind: "directive", type: i1$1.TextareaDirective, selector: "[fTextarea]", inputs: ["invalid", "touched", "variant", "fluid", "autoResize"], outputs: ["onResize"] }, { kind: "component", type: i1$1.CardComponent, selector: "f-card", inputs: ["header", "subheader", "styleClass", "style"] }, { kind: "component", type: i1$1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i2$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: UiModule }, { kind: "directive", type: i1$1.FButtonDirective, selector: "[fButton]", inputs: ["severity", "text", "outlined", "link", "variant", "rounded", "raised", "fluid", "disabled", "loading", "loadingIcon", "size", "label", "icon", "iconPos", "ariaLabel", "plain"] }, { kind: "component", type: i1$1.SkeletonComponent, selector: "f-skeleton", inputs: ["width", "height", "size", "borderRadius", "shape", "animation", "styleClass"] }, { kind: "component", type: i1$1.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: i1$1.InputTextDirective, selector: "[fInputText]", inputs: ["invalid", "touched", "variant", "size", "fluid"] }, { kind: "component", type: i1$1.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: i1$1.SelectComponent, selector: "f-select", inputs: ["options", "optionLabel", "optionValue", "placeholder", "disabled", "filter", "filterBy", "filterMatchMode", "filterLocale", "filterPlaceholder", "resetFilterOnHide", "autofocusFilter", "emptyMessage", "emptyFilterMessage", "showClear", "loading", "loadingIcon", "dropdownIcon", "clearIcon", "inputId", "invalid", "touched", "styleClass", "style", "appendTo", "editable", "readonly", "autofocus", "checkmark", "group", "optionGroupLabel", "optionGroupChildren", "virtualScroll", "virtualScrollItemSize", "lazy"], outputs: ["onFilter", "onChange", "onShow", "onHide", "onBlur", "onFocus", "onClear", "onLazyLoad"] }, { kind: "directive", type: i1$1.TextareaDirective, selector: "[fTextarea]", inputs: ["invalid", "touched", "variant", "fluid", "autoResize"], outputs: ["onResize"] }, { kind: "component", type: i1$1.CardComponent, selector: "f-card", inputs: ["header", "subheader", "styleClass", "style"] }, { kind: "component", type: i1$1.UiIconComponent, selector: "ui-icon", inputs: ["name", "size", "spin", "fill", "severity"] }, { kind: "ngmodule", type: AngularModule }, { kind: "directive", type: i2$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i2$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: UserFormComponent, decorators: [{
             type: Component,
@@ -7761,14 +7757,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                 : '*'
             }}
           </label>
-          <input
-            fInputText
-            id="password"
-            type="password"
+          <f-password
+            [inputId]="'password'"
             [formField]="formTree.password"
             [placeholder]="
               'administrative.user.password.placeholder' | translate
             "
+            autocomplete="new-password"
           />
         </div>
 
@@ -7787,7 +7782,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         @if (hasExtraFields()) {
           <div class="md:col-span-2 border-t border-surface pt-4 mt-2">
             <div class="text-sm font-medium text-muted-color mb-4">
-              <ui-icon name="sliders-h" class="mr-2"></ui-icon>{{ 'profile.additional.info' | translate }}
+              <ui-icon name="sliders-h" class="mr-2"></ui-icon
+              >{{ 'profile.additional.info' | translate }}
             </div>
             @if (isLoadingExtraFields()) {
               <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -7882,18 +7878,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
                             optionValue="value"
                             [ngModel]="getExtraFieldValue(field.key) ?? ''"
                             [ngModelOptions]="{ standalone: true }"
-                            (ngModelChange)="updateExtraField(field.key, $event)"
-                            [placeholder]="field.placeholderKey | translate: null : field.placeholder ?? ('shared.select' | translate)"
+                            (ngModelChange)="
+                              updateExtraField(field.key, $event)
+                            "
+                            [placeholder]="
+                              field.placeholderKey
+                                | translate
+                                  : null
+                                  : field.placeholder ??
+                                      ('shared.select' | translate)
+                            "
                           >
-                            <ng-template #item let-opt>{{ opt.labelKey | translate: null : opt.label }}</ng-template>
-                            <ng-template #selectedItem let-opt>{{ opt.labelKey | translate: null : opt.label }}</ng-template>
+                            <ng-template #item let-opt>{{
+                              opt.labelKey | translate: null : opt.label
+                            }}</ng-template>
+                            <ng-template #selectedItem let-opt>{{
+                              opt.labelKey | translate: null : opt.label
+                            }}</ng-template>
                           </f-select>
                         }
                         @case ('checkbox') {
                           <f-checkbox
                             [inputId]="field.key"
-                            [checked]="$any(getExtraFieldValue(field.key) ?? false)"
-                            (onChange)="updateExtraField(field.key, $event.checked)"
+                            [checked]="
+                              $any(getExtraFieldValue(field.key) ?? false)
+                            "
+                            (onChange)="
+                              updateExtraField(field.key, $event.checked)
+                            "
                             [label]="
                               field.placeholderKey
                                 | translate
@@ -7934,8 +7946,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
         }
 
         <div class="flex items-center gap-6 md:col-span-2 pt-4">
-          <f-checkbox [formField]="formTree.isActive" [label]="'shared.active' | translate" />
-          <f-checkbox [formField]="formTree.emailVerified" [label]="'administrative.user.email.verified' | translate" />
+          <f-checkbox
+            [formField]="formTree.isActive"
+            [label]="'shared.active' | translate"
+          />
+          <f-checkbox
+            [formField]="formTree.emailVerified"
+            [label]="'administrative.user.email.verified' | translate"
+          />
         </div>
 
         @if (companyFeatureEnabled() && !isEditMode()) {
@@ -7972,11 +7990,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImpor
             @if (isLoading()) {
               <ui-icon pButtonIcon name="spinner" [spin]="true"></ui-icon>
             }
-            <span pButtonLabel>{{ 
+            <span pButtonLabel>{{
               isEditMode()
                 ? ('shared.update' | translate)
                 : ('shared.create' | translate)
-             }}</span>
+            }}</span>
           </button>
         </div>
       </form>