@sumaris-net/ngx-components 18.23.4 → 18.23.6

package/fesm2022/sumaris-net.ngx-components.mjs

@@ -24206,6 +24206,9 @@ class AccountService extends BaseGraphqlService {
             console.debug(`[account] Found additional account's field {key: ${field.key}}`);
         this._$additionalFields.next(values.concat(field));
     }
+    registerAdditionalFields(...fields) {
+        fields?.forEach(field => this.registerAdditionalField(field));
+    }
     get optionDefs() {
         return this._optionDefs;
     }
@@ -32753,14 +32756,18 @@ class PersonValidatorService extends AppValidatorService {
         });
         return formConfig;
     }
-    getValidators(field) {
+    getValidators(field, required) {
         const validatorFns = [];
-        if (field.extra && field.extra.account && field.extra.account.required) {
+        required = required ?? field.extra?.account?.required ?? false;
+        if (required) {
             validatorFns.push(Validators.required);
         }
         if (field.type === 'entity') {
             validatorFns.push(SharedValidators.entity);
         }
+        if (field.type === 'entities') {
+            validatorFns.push(SharedValidators.entities);
+        }
         return validatorFns.length ? Validators.compose(validatorFns) : validatorFns.length === 1 ? validatorFns[0] : undefined;
     }
     /* -- protected methods -- */
@@ -32888,11 +32895,11 @@ class RegisterForm {
         // Add additional fields to details form
         this.additionalFields = this.accountService.additionalFields
             // Keep only required fields
-            .filter((field) => field.extra && field.extra.registration && field.extra.registration.required);
+            .filter((field) => field.extra?.registration?.disabled !== false);
         this.additionalFields.forEach((field) => {
             //if (this.debug) console.debug("[register-form] Add additional field {" + field.name + "} to form", field);
-            formDetailDef[field.key] = new UntypedFormControl(null, this.accountValidatorService.getValidators(field));
-            if (field.type === 'entity') {
+            formDetailDef[field.key] = new UntypedFormControl(null, this.accountValidatorService.getValidators(field, field.extra?.registration?.required));
+            if (field.autocomplete && (field.type === 'entity' || field.type === 'entities' || field.type === 'enums')) {
                 field.autocomplete = this.autocompleteHelper.add(field.key, field.autocomplete);
             }
         });
@@ -32919,6 +32926,7 @@ class RegisterForm {
                     lastName: 'Lavenier 2',
                     firstName: 'Benoit',
                     department: null,
+                    programs: null
                 },
             });
         }
@@ -32993,11 +33001,11 @@ class RegisterForm {
         this.form.enable();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RegisterForm, deps: [{ token: AccountService }, { token: AccountValidatorService }, { token: i1$3.UntypedFormBuilder }, { token: ENVIRONMENT }, { token: LocalSettingsService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RegisterForm, selector: "app-register-form", outputs: { onCancel: "onCancel", onSubmit: "onSubmit" }, viewQueries: [{ propertyName: "stepper", first: true, predicate: ["stepper"], descendants: true, static: true }], ngImport: i0, template: "<mat-horizontal-stepper linear #stepper=\"matHorizontalStepper\">\n  <!-- Step 1: Username -->\n  <mat-step [stepControl]=\"forms[0]\" *ngIf=\"forms[0].controls; let controls\">\n    <form [formGroup]=\"forms[0]\" class=\"form-container ion-padding\" (keyup.enter)=\"slideNext($event)\">\n      <ng-template matStepLabel>{{ 'REGISTER.STEP_EMAIL' | translate }}</ng-template>\n\n      <!-- Email -->\n      <mat-form-field>\n        <mat-label>{{ 'USER.EMAIL' | translate }}</mat-label>\n        <input\n          matInput\n          [appAutofocus]=\"true\"\n          [autofocusDelay]=\"500\"\n          formControlName=\"email\"\n          autocomplete=\"off\"\n          required\n        />\n        <mat-error *ngIf=\"controls.email.hasError('required') && controls.email.touched\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error\n          *ngIf=\"controls.email.hasError('email') && !controls.email.hasError('required') && controls.email.touched\"\n        >\n          <span>{{ 'ERROR.FIELD_NOT_VALID_EMAIL' | translate }}</span>\n        </mat-error>\n        <mat-error *ngIf=\"controls.email.hasError('availability') && controls.email.touched\" translate>\n          REGISTER.ERROR.EMAIL_ALREADY_REGISTERED\n        </mat-error>\n      </mat-form-field>\n\n      <!-- Confirm Email -->\n      <mat-form-field>\n        <mat-label>{{ 'REGISTER.CONFIRM_EMAIL' | translate }}</mat-label>\n        <input matInput autocomplete=\"off\" matFormFieldControl formControlName=\"confirmEmail\" />\n        <mat-error *ngIf=\"controls.confirmEmail.hasError('required') && controls.confirmEmail.touched\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error *ngIf=\"controls.confirmEmail.hasError('equals') && controls.confirmEmail.touched\">\n          <span>{{ 'REGISTER.ERROR.NOT_SAME_EMAIL' | translate }}</span>\n        </mat-error>\n      </mat-form-field>\n    </form>\n  </mat-step>\n\n  <!-- Step 2: Password -->\n  <mat-step [stepControl]=\"forms[1]\" *ngIf=\"forms[1].controls; let controls\">\n    <form [formGroup]=\"forms[1]\" class=\"form-container ion-padding\" (keyup.enter)=\"slideNext($event)\">\n      <ng-template matStepLabel>{{ 'REGISTER.STEP_PASSWORD' | translate }}</ng-template>\n\n      <!-- Password -->\n      <mat-form-field>\n        <mat-label>{{ 'USER.PASSWORD' | translate }}</mat-label>\n        <input\n          matInput\n          formControlName=\"password\"\n          autocomplete=\"section-red new-password\"\n          [type]=\"showPwd ? 'text' : 'password'\"\n          required\n        />\n        <button matSuffix mat-icon-button type=\"button\" (click)=\"showPwd = !showPwd\" tabindex=\"-1\">\n          <mat-icon>{{ showPwd ? 'visibility_off' : 'visibility' }}</mat-icon>\n        </button>\n        <mat-error *ngIf=\"controls.password.hasError('required') && controls.password.touched\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error *ngIf=\"controls.password.hasError('minlength') && controls.password.touched\">\n          <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: { requiredLength: 8 } }}</span>\n        </mat-error>\n      </mat-form-field>\n\n      <!-- Confirm password -->\n      <mat-form-field>\n        <mat-label>{{ 'REGISTER.CONFIRM_PASSWORD' | translate }}</mat-label>\n        <input\n          matInput\n          formControlName=\"confirmPassword\"\n          autocomplete=\"section-red new-password\"\n          [type]=\"showConfirmPwd ? 'text' : 'password'\"\n          required\n        />\n        <button mat-icon-button matSuffix (click)=\"showConfirmPwd = !showConfirmPwd\" tabindex=\"-1\">\n          <mat-icon>{{ showConfirmPwd ? 'visibility_off' : 'visibility' }}</mat-icon>\n        </button>\n        <mat-error *ngIf=\"controls.confirmPassword.hasError('required') && controls.confirmPassword.touched\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error *ngIf=\"controls.confirmPassword.hasError('equals') && controls.confirmPassword.touched\">\n          <span>{{ 'REGISTER.ERROR.NOT_SAME_PASSWORD' | translate }}</span>\n        </mat-error>\n      </mat-form-field>\n    </form>\n  </mat-step>\n\n  <!-- Step 3: user details -->\n  <mat-step [stepControl]=\"forms[2]\" *ngIf=\"forms[2].controls; let controls\">\n    <form\n      [formGroup]=\"forms[2]\"\n      (ngSubmit)=\"doSubmit($event)\"\n      class=\"form-container ion-padding\"\n      (keyup.enter)=\"doSubmit()\"\n    >\n      <ng-template matStepLabel>{{ 'REGISTER.STEP_USER_DETAILS' | translate }}</ng-template>\n\n      <!-- error -->\n      <ion-item *ngIf=\"error && !sending\" lines=\"none\">\n        <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n        <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n      </ion-item>\n\n      <!-- Last name -->\n      <mat-form-field>\n        <mat-label>{{ 'USER.LAST_NAME' | translate }}</mat-label>\n        <input matInput formControlName=\"lastName\" autocomplete=\"section-blue family-name\" required />\n        <mat-error *ngIf=\"controls.lastName.hasError('required') && controls.lastName.dirty\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error *ngIf=\"controls.lastName.hasError('minlength') && controls.lastName.dirty\">\n          <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: { requiredLength: 2 } }}</span>\n        </mat-error>\n      </mat-form-field>\n\n      <!-- First name -->\n      <mat-form-field>\n        <mat-label>{{ 'USER.FIRST_NAME' | translate }}</mat-label>\n        <input matInput formControlName=\"firstName\" autocomplete=\"section-blue given-name\" required />\n        <mat-error *ngIf=\"controls.firstName.hasError('required') && controls.firstName.dirty\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error *ngIf=\"controls.firstName.hasError('minlength') && controls.firstName.dirty\">\n          <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: { requiredLength: 2 } }}</span>\n        </mat-error>\n      </mat-form-field>\n\n      <!-- Additional fields -->\n      <app-form-field\n        *ngFor=\"let field of additionalFields\"\n        [definition]=\"field\"\n        [formControlName]=\"field.key\"\n        [required]=\"true\"\n      ></app-form-field>\n    </form>\n  </mat-step>\n</mat-horizontal-stepper>\n", styles: ["form ion-toolbar.toolbar-buttons .toolbar-content{text-align:right}form ion-toolbar.toolbar-buttons .toolbar-background{border:0;background:inherit!important}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i12$2.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i12$2.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i12$2.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: AppFormField, selector: "app-form-field", inputs: ["definition", "readonly", "disabled", "formControl", "formControlName", "placeholder", "compact", "required", "hideRequiredMarker", "floatLabel", "label", "appearance", "subscriptSizing", "tabindex", "autofocus", "clearable", "chipColor", "class", "debug", "panelClass", "panelWidth"], outputs: ["keyup.enter"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RegisterForm, selector: "app-register-form", outputs: { onCancel: "onCancel", onSubmit: "onSubmit" }, viewQueries: [{ propertyName: "stepper", first: true, predicate: ["stepper"], descendants: true, static: true }], ngImport: i0, template: "<mat-horizontal-stepper linear #stepper=\"matHorizontalStepper\">\n  <!-- Step 1: Username -->\n  <mat-step [stepControl]=\"forms[0]\" *ngIf=\"forms[0].controls; let controls\">\n    <form [formGroup]=\"forms[0]\" class=\"form-container ion-padding\" (keyup.enter)=\"slideNext($event)\">\n      <ng-template matStepLabel>{{ 'REGISTER.STEP_EMAIL' | translate }}</ng-template>\n\n      <!-- Email -->\n      <mat-form-field>\n        <mat-label>{{ 'USER.EMAIL' | translate }}</mat-label>\n        <input\n          matInput\n          [appAutofocus]=\"true\"\n          [autofocusDelay]=\"500\"\n          formControlName=\"email\"\n          autocomplete=\"off\"\n          required\n        />\n        <mat-error *ngIf=\"controls.email.hasError('required') && controls.email.touched\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error\n          *ngIf=\"controls.email.hasError('email') && !controls.email.hasError('required') && controls.email.touched\"\n        >\n          <span>{{ 'ERROR.FIELD_NOT_VALID_EMAIL' | translate }}</span>\n        </mat-error>\n        <mat-error *ngIf=\"controls.email.hasError('availability') && controls.email.touched\" translate>\n          REGISTER.ERROR.EMAIL_ALREADY_REGISTERED\n        </mat-error>\n      </mat-form-field>\n\n      <!-- Confirm Email -->\n      <mat-form-field>\n        <mat-label>{{ 'REGISTER.CONFIRM_EMAIL' | translate }}</mat-label>\n        <input matInput autocomplete=\"off\" matFormFieldControl formControlName=\"confirmEmail\" />\n        <mat-error *ngIf=\"controls.confirmEmail.hasError('required') && controls.confirmEmail.touched\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error *ngIf=\"controls.confirmEmail.hasError('equals') && controls.confirmEmail.touched\">\n          <span>{{ 'REGISTER.ERROR.NOT_SAME_EMAIL' | translate }}</span>\n        </mat-error>\n      </mat-form-field>\n    </form>\n  </mat-step>\n\n  <!-- Step 2: Password -->\n  <mat-step [stepControl]=\"forms[1]\" *ngIf=\"forms[1].controls; let controls\">\n    <form [formGroup]=\"forms[1]\" class=\"form-container ion-padding\" (keyup.enter)=\"slideNext($event)\">\n      <ng-template matStepLabel>{{ 'REGISTER.STEP_PASSWORD' | translate }}</ng-template>\n\n      <!-- Password -->\n      <mat-form-field>\n        <mat-label>{{ 'USER.PASSWORD' | translate }}</mat-label>\n        <input\n          matInput\n          formControlName=\"password\"\n          autocomplete=\"section-red new-password\"\n          [type]=\"showPwd ? 'text' : 'password'\"\n          required\n        />\n        <button matSuffix mat-icon-button type=\"button\" (click)=\"showPwd = !showPwd\" tabindex=\"-1\">\n          <mat-icon>{{ showPwd ? 'visibility_off' : 'visibility' }}</mat-icon>\n        </button>\n        <mat-error *ngIf=\"controls.password.hasError('required') && controls.password.touched\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error *ngIf=\"controls.password.hasError('minlength') && controls.password.touched\">\n          <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: { requiredLength: 8 } }}</span>\n        </mat-error>\n      </mat-form-field>\n\n      <!-- Confirm password -->\n      <mat-form-field>\n        <mat-label>{{ 'REGISTER.CONFIRM_PASSWORD' | translate }}</mat-label>\n        <input\n          matInput\n          formControlName=\"confirmPassword\"\n          autocomplete=\"section-red new-password\"\n          [type]=\"showConfirmPwd ? 'text' : 'password'\"\n          required\n        />\n        <button mat-icon-button matSuffix (click)=\"showConfirmPwd = !showConfirmPwd\" tabindex=\"-1\">\n          <mat-icon>{{ showConfirmPwd ? 'visibility_off' : 'visibility' }}</mat-icon>\n        </button>\n        <mat-error *ngIf=\"controls.confirmPassword.hasError('required') && controls.confirmPassword.touched\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error *ngIf=\"controls.confirmPassword.hasError('equals') && controls.confirmPassword.touched\">\n          <span>{{ 'REGISTER.ERROR.NOT_SAME_PASSWORD' | translate }}</span>\n        </mat-error>\n      </mat-form-field>\n    </form>\n  </mat-step>\n\n  <!-- Step 3: user details -->\n  <mat-step [stepControl]=\"forms[2]\" *ngIf=\"forms[2].controls; let controls\">\n    <form\n      [formGroup]=\"forms[2]\"\n      (ngSubmit)=\"doSubmit($event)\"\n      class=\"form-container ion-padding\"\n      (keyup.enter)=\"doSubmit()\"\n    >\n      <ng-template matStepLabel>{{ 'REGISTER.STEP_USER_DETAILS' | translate }}</ng-template>\n\n      <!-- error -->\n      <ion-item *ngIf=\"error && !sending\" lines=\"none\">\n        <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n        <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n      </ion-item>\n\n      <!-- Last name -->\n      <mat-form-field>\n        <mat-label>{{ 'USER.LAST_NAME' | translate }}</mat-label>\n        <input matInput formControlName=\"lastName\" autocomplete=\"section-blue family-name\" required />\n        <mat-error *ngIf=\"controls.lastName.hasError('required') && controls.lastName.dirty\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error *ngIf=\"controls.lastName.hasError('minlength') && controls.lastName.dirty\">\n          <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: { requiredLength: 2 } }}</span>\n        </mat-error>\n      </mat-form-field>\n\n      <!-- First name -->\n      <mat-form-field>\n        <mat-label>{{ 'USER.FIRST_NAME' | translate }}</mat-label>\n        <input matInput formControlName=\"firstName\" autocomplete=\"section-blue given-name\" required />\n        <mat-error *ngIf=\"controls.firstName.hasError('required') && controls.firstName.dirty\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error *ngIf=\"controls.firstName.hasError('minlength') && controls.firstName.dirty\">\n          <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: { requiredLength: 2 } }}</span>\n        </mat-error>\n      </mat-form-field>\n\n      <!-- Additional fields -->\n      <app-form-field\n        *ngFor=\"let field of additionalFields\"\n        [definition]=\"field\"\n        [formControlName]=\"field.key\"\n        [required]=\"field.extra?.registration.required ?? field.extra?.account.required ?? false\"\n      ></app-form-field>\n    </form>\n  </mat-step>\n</mat-horizontal-stepper>\n", styles: ["form ion-toolbar.toolbar-buttons .toolbar-content{text-align:right}form ion-toolbar.toolbar-buttons .toolbar-background{border:0;background:inherit!important}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i12$2.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i12$2.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i12$2.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "component", type: AppFormField, selector: "app-form-field", inputs: ["definition", "readonly", "disabled", "formControl", "formControlName", "placeholder", "compact", "required", "hideRequiredMarker", "floatLabel", "label", "appearance", "subscriptSizing", "tabindex", "autofocus", "clearable", "chipColor", "class", "debug", "panelClass", "panelWidth"], outputs: ["keyup.enter"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RegisterForm, decorators: [{
             type: Component,
-            args: [{ selector: 'app-register-form', template: "<mat-horizontal-stepper linear #stepper=\"matHorizontalStepper\">\n  <!-- Step 1: Username -->\n  <mat-step [stepControl]=\"forms[0]\" *ngIf=\"forms[0].controls; let controls\">\n    <form [formGroup]=\"forms[0]\" class=\"form-container ion-padding\" (keyup.enter)=\"slideNext($event)\">\n      <ng-template matStepLabel>{{ 'REGISTER.STEP_EMAIL' | translate }}</ng-template>\n\n      <!-- Email -->\n      <mat-form-field>\n        <mat-label>{{ 'USER.EMAIL' | translate }}</mat-label>\n        <input\n          matInput\n          [appAutofocus]=\"true\"\n          [autofocusDelay]=\"500\"\n          formControlName=\"email\"\n          autocomplete=\"off\"\n          required\n        />\n        <mat-error *ngIf=\"controls.email.hasError('required') && controls.email.touched\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error\n          *ngIf=\"controls.email.hasError('email') && !controls.email.hasError('required') && controls.email.touched\"\n        >\n          <span>{{ 'ERROR.FIELD_NOT_VALID_EMAIL' | translate }}</span>\n        </mat-error>\n        <mat-error *ngIf=\"controls.email.hasError('availability') && controls.email.touched\" translate>\n          REGISTER.ERROR.EMAIL_ALREADY_REGISTERED\n        </mat-error>\n      </mat-form-field>\n\n      <!-- Confirm Email -->\n      <mat-form-field>\n        <mat-label>{{ 'REGISTER.CONFIRM_EMAIL' | translate }}</mat-label>\n        <input matInput autocomplete=\"off\" matFormFieldControl formControlName=\"confirmEmail\" />\n        <mat-error *ngIf=\"controls.confirmEmail.hasError('required') && controls.confirmEmail.touched\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error *ngIf=\"controls.confirmEmail.hasError('equals') && controls.confirmEmail.touched\">\n          <span>{{ 'REGISTER.ERROR.NOT_SAME_EMAIL' | translate }}</span>\n        </mat-error>\n      </mat-form-field>\n    </form>\n  </mat-step>\n\n  <!-- Step 2: Password -->\n  <mat-step [stepControl]=\"forms[1]\" *ngIf=\"forms[1].controls; let controls\">\n    <form [formGroup]=\"forms[1]\" class=\"form-container ion-padding\" (keyup.enter)=\"slideNext($event)\">\n      <ng-template matStepLabel>{{ 'REGISTER.STEP_PASSWORD' | translate }}</ng-template>\n\n      <!-- Password -->\n      <mat-form-field>\n        <mat-label>{{ 'USER.PASSWORD' | translate }}</mat-label>\n        <input\n          matInput\n          formControlName=\"password\"\n          autocomplete=\"section-red new-password\"\n          [type]=\"showPwd ? 'text' : 'password'\"\n          required\n        />\n        <button matSuffix mat-icon-button type=\"button\" (click)=\"showPwd = !showPwd\" tabindex=\"-1\">\n          <mat-icon>{{ showPwd ? 'visibility_off' : 'visibility' }}</mat-icon>\n        </button>\n        <mat-error *ngIf=\"controls.password.hasError('required') && controls.password.touched\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error *ngIf=\"controls.password.hasError('minlength') && controls.password.touched\">\n          <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: { requiredLength: 8 } }}</span>\n        </mat-error>\n      </mat-form-field>\n\n      <!-- Confirm password -->\n      <mat-form-field>\n        <mat-label>{{ 'REGISTER.CONFIRM_PASSWORD' | translate }}</mat-label>\n        <input\n          matInput\n          formControlName=\"confirmPassword\"\n          autocomplete=\"section-red new-password\"\n          [type]=\"showConfirmPwd ? 'text' : 'password'\"\n          required\n        />\n        <button mat-icon-button matSuffix (click)=\"showConfirmPwd = !showConfirmPwd\" tabindex=\"-1\">\n          <mat-icon>{{ showConfirmPwd ? 'visibility_off' : 'visibility' }}</mat-icon>\n        </button>\n        <mat-error *ngIf=\"controls.confirmPassword.hasError('required') && controls.confirmPassword.touched\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error *ngIf=\"controls.confirmPassword.hasError('equals') && controls.confirmPassword.touched\">\n          <span>{{ 'REGISTER.ERROR.NOT_SAME_PASSWORD' | translate }}</span>\n        </mat-error>\n      </mat-form-field>\n    </form>\n  </mat-step>\n\n  <!-- Step 3: user details -->\n  <mat-step [stepControl]=\"forms[2]\" *ngIf=\"forms[2].controls; let controls\">\n    <form\n      [formGroup]=\"forms[2]\"\n      (ngSubmit)=\"doSubmit($event)\"\n      class=\"form-container ion-padding\"\n      (keyup.enter)=\"doSubmit()\"\n    >\n      <ng-template matStepLabel>{{ 'REGISTER.STEP_USER_DETAILS' | translate }}</ng-template>\n\n      <!-- error -->\n      <ion-item *ngIf=\"error && !sending\" lines=\"none\">\n        <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n        <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n      </ion-item>\n\n      <!-- Last name -->\n      <mat-form-field>\n        <mat-label>{{ 'USER.LAST_NAME' | translate }}</mat-label>\n        <input matInput formControlName=\"lastName\" autocomplete=\"section-blue family-name\" required />\n        <mat-error *ngIf=\"controls.lastName.hasError('required') && controls.lastName.dirty\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error *ngIf=\"controls.lastName.hasError('minlength') && controls.lastName.dirty\">\n          <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: { requiredLength: 2 } }}</span>\n        </mat-error>\n      </mat-form-field>\n\n      <!-- First name -->\n      <mat-form-field>\n        <mat-label>{{ 'USER.FIRST_NAME' | translate }}</mat-label>\n        <input matInput formControlName=\"firstName\" autocomplete=\"section-blue given-name\" required />\n        <mat-error *ngIf=\"controls.firstName.hasError('required') && controls.firstName.dirty\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error *ngIf=\"controls.firstName.hasError('minlength') && controls.firstName.dirty\">\n          <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: { requiredLength: 2 } }}</span>\n        </mat-error>\n      </mat-form-field>\n\n      <!-- Additional fields -->\n      <app-form-field\n        *ngFor=\"let field of additionalFields\"\n        [definition]=\"field\"\n        [formControlName]=\"field.key\"\n        [required]=\"true\"\n      ></app-form-field>\n    </form>\n  </mat-step>\n</mat-horizontal-stepper>\n", styles: ["form ion-toolbar.toolbar-buttons .toolbar-content{text-align:right}form ion-toolbar.toolbar-buttons .toolbar-background{border:0;background:inherit!important}\n"] }]
+            args: [{ selector: 'app-register-form', template: "<mat-horizontal-stepper linear #stepper=\"matHorizontalStepper\">\n  <!-- Step 1: Username -->\n  <mat-step [stepControl]=\"forms[0]\" *ngIf=\"forms[0].controls; let controls\">\n    <form [formGroup]=\"forms[0]\" class=\"form-container ion-padding\" (keyup.enter)=\"slideNext($event)\">\n      <ng-template matStepLabel>{{ 'REGISTER.STEP_EMAIL' | translate }}</ng-template>\n\n      <!-- Email -->\n      <mat-form-field>\n        <mat-label>{{ 'USER.EMAIL' | translate }}</mat-label>\n        <input\n          matInput\n          [appAutofocus]=\"true\"\n          [autofocusDelay]=\"500\"\n          formControlName=\"email\"\n          autocomplete=\"off\"\n          required\n        />\n        <mat-error *ngIf=\"controls.email.hasError('required') && controls.email.touched\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error\n          *ngIf=\"controls.email.hasError('email') && !controls.email.hasError('required') && controls.email.touched\"\n        >\n          <span>{{ 'ERROR.FIELD_NOT_VALID_EMAIL' | translate }}</span>\n        </mat-error>\n        <mat-error *ngIf=\"controls.email.hasError('availability') && controls.email.touched\" translate>\n          REGISTER.ERROR.EMAIL_ALREADY_REGISTERED\n        </mat-error>\n      </mat-form-field>\n\n      <!-- Confirm Email -->\n      <mat-form-field>\n        <mat-label>{{ 'REGISTER.CONFIRM_EMAIL' | translate }}</mat-label>\n        <input matInput autocomplete=\"off\" matFormFieldControl formControlName=\"confirmEmail\" />\n        <mat-error *ngIf=\"controls.confirmEmail.hasError('required') && controls.confirmEmail.touched\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error *ngIf=\"controls.confirmEmail.hasError('equals') && controls.confirmEmail.touched\">\n          <span>{{ 'REGISTER.ERROR.NOT_SAME_EMAIL' | translate }}</span>\n        </mat-error>\n      </mat-form-field>\n    </form>\n  </mat-step>\n\n  <!-- Step 2: Password -->\n  <mat-step [stepControl]=\"forms[1]\" *ngIf=\"forms[1].controls; let controls\">\n    <form [formGroup]=\"forms[1]\" class=\"form-container ion-padding\" (keyup.enter)=\"slideNext($event)\">\n      <ng-template matStepLabel>{{ 'REGISTER.STEP_PASSWORD' | translate }}</ng-template>\n\n      <!-- Password -->\n      <mat-form-field>\n        <mat-label>{{ 'USER.PASSWORD' | translate }}</mat-label>\n        <input\n          matInput\n          formControlName=\"password\"\n          autocomplete=\"section-red new-password\"\n          [type]=\"showPwd ? 'text' : 'password'\"\n          required\n        />\n        <button matSuffix mat-icon-button type=\"button\" (click)=\"showPwd = !showPwd\" tabindex=\"-1\">\n          <mat-icon>{{ showPwd ? 'visibility_off' : 'visibility' }}</mat-icon>\n        </button>\n        <mat-error *ngIf=\"controls.password.hasError('required') && controls.password.touched\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error *ngIf=\"controls.password.hasError('minlength') && controls.password.touched\">\n          <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: { requiredLength: 8 } }}</span>\n        </mat-error>\n      </mat-form-field>\n\n      <!-- Confirm password -->\n      <mat-form-field>\n        <mat-label>{{ 'REGISTER.CONFIRM_PASSWORD' | translate }}</mat-label>\n        <input\n          matInput\n          formControlName=\"confirmPassword\"\n          autocomplete=\"section-red new-password\"\n          [type]=\"showConfirmPwd ? 'text' : 'password'\"\n          required\n        />\n        <button mat-icon-button matSuffix (click)=\"showConfirmPwd = !showConfirmPwd\" tabindex=\"-1\">\n          <mat-icon>{{ showConfirmPwd ? 'visibility_off' : 'visibility' }}</mat-icon>\n        </button>\n        <mat-error *ngIf=\"controls.confirmPassword.hasError('required') && controls.confirmPassword.touched\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error *ngIf=\"controls.confirmPassword.hasError('equals') && controls.confirmPassword.touched\">\n          <span>{{ 'REGISTER.ERROR.NOT_SAME_PASSWORD' | translate }}</span>\n        </mat-error>\n      </mat-form-field>\n    </form>\n  </mat-step>\n\n  <!-- Step 3: user details -->\n  <mat-step [stepControl]=\"forms[2]\" *ngIf=\"forms[2].controls; let controls\">\n    <form\n      [formGroup]=\"forms[2]\"\n      (ngSubmit)=\"doSubmit($event)\"\n      class=\"form-container ion-padding\"\n      (keyup.enter)=\"doSubmit()\"\n    >\n      <ng-template matStepLabel>{{ 'REGISTER.STEP_USER_DETAILS' | translate }}</ng-template>\n\n      <!-- error -->\n      <ion-item *ngIf=\"error && !sending\" lines=\"none\">\n        <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n        <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error | translate\"></ion-label>\n      </ion-item>\n\n      <!-- Last name -->\n      <mat-form-field>\n        <mat-label>{{ 'USER.LAST_NAME' | translate }}</mat-label>\n        <input matInput formControlName=\"lastName\" autocomplete=\"section-blue family-name\" required />\n        <mat-error *ngIf=\"controls.lastName.hasError('required') && controls.lastName.dirty\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error *ngIf=\"controls.lastName.hasError('minlength') && controls.lastName.dirty\">\n          <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: { requiredLength: 2 } }}</span>\n        </mat-error>\n      </mat-form-field>\n\n      <!-- First name -->\n      <mat-form-field>\n        <mat-label>{{ 'USER.FIRST_NAME' | translate }}</mat-label>\n        <input matInput formControlName=\"firstName\" autocomplete=\"section-blue given-name\" required />\n        <mat-error *ngIf=\"controls.firstName.hasError('required') && controls.firstName.dirty\" translate>\n          ERROR.FIELD_REQUIRED\n        </mat-error>\n        <mat-error *ngIf=\"controls.firstName.hasError('minlength') && controls.firstName.dirty\">\n          <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: { requiredLength: 2 } }}</span>\n        </mat-error>\n      </mat-form-field>\n\n      <!-- Additional fields -->\n      <app-form-field\n        *ngFor=\"let field of additionalFields\"\n        [definition]=\"field\"\n        [formControlName]=\"field.key\"\n        [required]=\"field.extra?.registration.required ?? field.extra?.account.required ?? false\"\n      ></app-form-field>\n    </form>\n  </mat-step>\n</mat-horizontal-stepper>\n", styles: ["form ion-toolbar.toolbar-buttons .toolbar-content{text-align:right}form ion-toolbar.toolbar-buttons .toolbar-background{border:0;background:inherit!important}\n"] }]
         }], ctorParameters: () => [{ type: AccountService }, { type: AccountValidatorService }, { type: i1$3.UntypedFormBuilder }, { type: Environment, decorators: [{
                     type: Inject,
                     args: [ENVIRONMENT]