@arsedizioni/ars-utils 22.5.16 → 22.5.18

package/fesm2022/arsedizioni-ars-utils-ui.dialogs.auth.mjs

@@ -1,24 +1,24 @@
 import * as i0 from '@angular/core';
-import { viewChildren, computed, signal, forwardRef, ChangeDetectionStrategy, Component, input, output, inject, viewChild } from '@angular/core';
-import * as i1$1 from '@angular/forms';
-import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import { viewChildren, computed, signal, forwardRef, ChangeDetectionStrategy, Component, input, output, inject } from '@angular/core';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import * as i1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { SystemUtils, SafeHtmlPipe } from '@arsedizioni/ars-utils/core';
 import { MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose, MatDialogRef } from '@angular/material/dialog';
-import * as i2$1 from '@arsedizioni/ars-utils/ui';
+import * as i1$2 from '@arsedizioni/ars-utils/ui';
 import { FlexLayoutModule, PromptDialogType } from '@arsedizioni/ars-utils/ui';
-import * as i7 from '@angular/material/button';
+import * as i6 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i5 from '@angular/material/checkbox';
+import * as i4 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i3 from '@angular/material/input';
+import * as i2 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i2 from '@angular/material/form-field';
+import * as i1$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i4 from '@angular/material/icon';
+import { form, required, email, FormField, maxLength, minLength } from '@angular/forms/signals';
+import { otpValidator, passwordValidator, equalsValidator } from '@arsedizioni/ars-utils/core.validators';
+import * as i3 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import { PasswordValidatorDirective, EqualsValidatorDirective } from '@arsedizioni/ars-utils/core.validators';
 import { DialogService } from '@arsedizioni/ars-utils/ui.dialogs';
 
 class OtpInputComponent {
@@ -191,11 +191,11 @@ class OtpInputComponent {
                 useExisting: forwardRef(() => OtpInputComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "otpFields", predicate: ["otpField"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"otp-container\">\n  @for (digit of otpArray(); track $index) {\n    <input\n      #otpField\n      type=\"text\"\n      maxlength=\"1\"\n      inputmode=\"numeric\"\n      pattern=\"[0-9]*\"\n      autocomplete=\"one-time-code\"\n      class=\"otp-box\"\n      [value]=\"digit\"\n      (beforeinput)=\"onBeforeInput($event)\"\n      (input)=\"onInput($event, $index)\"\n      (keydown)=\"onKeyDown($event, $index)\"\n      (blur)=\"onBlur()\"\n      (paste)=\"onPaste($event)\"\n      [disabled]=\"disabled()\"\n      required\n    />\n  }\n</div>\n\n", styles: [".otp-container{display:flex;align-self:center;gap:.5rem;align-content:center;justify-content:center;padding:30px 0}.otp-box{width:2.3rem;height:2.8rem;font-size:1.5rem;text-align:center;border:2px solid var(--ars-color-ok, #388E3C);background-color:var(--app-color-background, #f7faf8);border-radius:8px;color:var(--ars-color-ok, #388E3C)}.otp-box:focus{border-color:#007bff!important;outline:none;box-shadow:0 0 3px #007bff!important}.otp-box:-webkit-autofill,.otp-box:-webkit-autofill:hover{-webkit-box-shadow:0 0 0 1000px var(--app-color-background, #f7faf8) inset!important;-webkit-text-fill-color:var(--ars-color-ok, #388E3C);caret-color:var(--ars-color-ok, #388E3C)}.otp-box:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--app-color-background, #f7faf8) inset,0 0 3px #007bff!important;-webkit-text-fill-color:var(--ars-color-ok, #388E3C);caret-color:var(--ars-color-ok, #388E3C)}.error{margin-top:.5rem;color:red;font-size:.9rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "otpFields", predicate: ["otpField"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"otp-container\">\n  @for (digit of otpArray(); track $index) {\n    <input\n      #otpField\n      type=\"text\"\n      maxlength=\"1\"\n      inputmode=\"numeric\"\n      pattern=\"[0-9]*\"\n      autocomplete=\"one-time-code\"\n      class=\"otp-box\"\n      [value]=\"digit\"\n      (beforeinput)=\"onBeforeInput($event)\"\n      (input)=\"onInput($event, $index)\"\n      (keydown)=\"onKeyDown($event, $index)\"\n      (blur)=\"onBlur()\"\n      (paste)=\"onPaste($event)\"\n      [disabled]=\"disabled()\"\n      required\n    />\n  }\n</div>\n\n", styles: [".otp-container{display:flex;align-self:center;gap:.5rem;align-content:center;justify-content:center;padding:30px 0}.otp-box{width:2.3rem;height:2.8rem;font-size:1.5rem;text-align:center;border:2px solid var(--ars-color-ok, #388E3C);background-color:var(--app-color-background, #f7faf8);border-radius:8px;color:var(--ars-color-ok, #388E3C)}.otp-box:focus{border-color:#007bff!important;outline:none;box-shadow:0 0 3px #007bff!important}.otp-box:-webkit-autofill,.otp-box:-webkit-autofill:hover{-webkit-box-shadow:0 0 0 1000px var(--app-color-background, #f7faf8) inset!important;-webkit-text-fill-color:var(--ars-color-ok, #388E3C);caret-color:var(--ars-color-ok, #388E3C)}.otp-box:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px var(--app-color-background, #f7faf8) inset,0 0 3px #007bff!important;-webkit-text-fill-color:var(--ars-color-ok, #388E3C);caret-color:var(--ars-color-ok, #388E3C)}.error{margin-top:.5rem;color:red;font-size:.9rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: OtpInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'otp-input', standalone: true, imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'otp-input', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => OtpInputComponent),
@@ -280,10 +280,27 @@ class CredentialsDialogComponent {
             return data;
         })(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dialogData" }] : /* istanbul ignore next */ []));
-        /** Current form model, pre-filled with the user name from dialog data when provided. */
-        this.item = {
-            user: inject(MAT_DIALOG_DATA)?.user,
-        };
+        /** Model backing the signal form, pre-filled with the user name from dialog data when provided. */
+        this.model = signal({
+            user: inject(MAT_DIALOG_DATA)?.user ?? '',
+            password: '',
+            rememberMe: false,
+            code: '',
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
+        /**
+         * Signal form for the credentials. Validators follow the active mode: the user
+         * field is a required email in `email` mode and plain required in `user` mode,
+         * the password is required outside `otp` mode, and the OTP code is a required
+         * complete 6-digit code in `otp` mode.
+         */
+        this.form = form(this.model, p => {
+            required(p.user, { when: () => this.dialogData().mode !== 'otp' });
+            email(p.user, { when: () => this.dialogData().mode === 'email' });
+            required(p.password, { when: () => this.dialogData().mode !== 'otp' });
+            required(p.code, { when: () => this.dialogData().mode === 'otp' });
+            otpValidator(p.code);
+        });
         /** Whether the password field is currently shown as plain text. */
         this.showPassword = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "showPassword" }] : /* istanbul ignore next */ []));
@@ -305,28 +322,28 @@ class CredentialsDialogComponent {
      * Emits the current form result and closes the dialog.
      */
     ok() {
-        this.done.emit(this.item);
+        this.done.emit(this.model());
     }
     /**
      * Emits the current form result for the password-recovery flow and optionally
      * opens the recovery URL in a new tab.
      */
     recoverPassword() {
-        this.recoveringPassword.emit(this.item);
+        this.recoveringPassword.emit(this.model());
         const url = this.dialogData().recoverPasswordUrl;
         if (url) {
             window.open(url, '_blank');
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: CredentialsDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: CredentialsDialogComponent, isStandalone: true, selector: "ng-component", outputs: { done: "done", recoveringPassword: "recoveringPassword" }, ngImport: i0, template: "<div class=\"dialog-info\">\n  @if (f.form.invalid) {\n  <span class=\"dialog-info-error\">Ci sono ancora dei campi obbligatori (*) non compilati.</span>\n  } @else {\n  <span class=\"dialog-info-ok\">Tutti i campi obbligatori (*) sono compilati.</span>\n  }\n</div>\n<div mat-dialog-title [innerHTML]=\"dialogData().title | safeHtml\"></div>\n<mat-dialog-content class=\"dialog-content\">\n  @if (dialogData().message) {\n  <div [innerHtml]=\"dialogData().message | safeHtml\" style=\"padding-bottom: 20px;\"></div>\n  }\n  <form name=\"form\" #f=\"ngForm\" (keyup.Enter)=\"!f.form.invalid ? ok() : null\" novalidate>\n    @if(dialogData().mode !== 'otp') {\n    @if (dialogData().mode === 'email') {\n    <mat-form-field style=\"width: 100%;\" [appearance]=\"dialogData().appearance\">\n      <mat-label>Email</mat-label>\n      <input type=\"email\" matInput [(ngModel)]=\"item.user\" name=\"email\" #email=\"ngModel\" email required\n        [attr.aria-label]=\"'Email'\">\n      @if (email.invalid) {\n      <mat-error>Email non valida.</mat-error>\n      }\n    </mat-form-field>\n    } @else if (dialogData().mode === 'user') {\n    <mat-form-field style=\"width: 100%;\" [appearance]=\"dialogData().appearance\">\n      <mat-label>Utente</mat-label>\n      <input matInput [(ngModel)]=\"item.user\" name=\"user\" #user=\"ngModel\" required [attr.aria-label]=\"'user'\">\n      @if (user.invalid) {\n      <mat-error>Obbligatorio.</mat-error>\n      }\n    </mat-form-field>\n    }\n    <mat-form-field style=\"width: 100%;\" [appearance]=\"dialogData().appearance\">\n      <mat-label>La tua password abilitata</mat-label>\n      <input matInput name=\"password\" #password=\"ngModel\" [type]=\"!showPassword() ? 'password' : 'text'\"\n        [(ngModel)]=\"item.password\" required [attr.aria-label]=\"'La tua password abilitata'\" autocomplete=\"on\">\n      @if(item.password) {\n      <password-strength [password]=\"item.password\"></password-strength>\n      }\n      <button type=\"button\" mat-icon-button class=\"toolbar-suffix\" matSuffix (click)=\"showPassword.set(!showPassword())\">\n        <mat-icon>{{showPassword() ? 'visibility' : 'visibility_off'}}</mat-icon>\n      </button>\n      <mat-hint>Attento a maiuscole e minuscole</mat-hint>\n      @if (password.invalid) {\n      <mat-error>Password non valida.</mat-error>\n      }\n    </mat-form-field>\n    @if (dialogData().remember || dialogData().recoverPassword) {\n    <div fxLayout=\"row\" fxLayoutGap=\"20px\" fxFill style=\"margin-top: 20px;\">\n      <div>\n        @if (dialogData().remember) {\n        <mat-checkbox fxFlexAlign=\"center\" [(ngModel)]=\"item.rememberMe\" name=\"rememberMe\"> Ricordami</mat-checkbox>\n        }\n      </div>\n      <div fxLayoutAlign=\"end\">\n        @if (dialogData().recoverPassword) {\n        <button fxFlexAlign=\"center\" mat-button (click)=\"recoverPassword()\" title=\"Recupero password\"\n          >Non riesco ad accedere</button>\n        }\n      </div>\n    </div>\n    }\n    } @else {\n    <otp-input name=\"otp\" [(ngModel)]=\"item.code\" required></otp-input>\n    }\n  </form>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <div fxLayout=\"row\" fxLayoutAlign=\"end\" fxFill>\n    <button mat-flat-button [disabled]=\"f.form.invalid\" (click)=\"ok()\">{{dialogData().okCaption}}</button>\n    <button mat-stroked-button [mat-dialog-close]=\"true\">Annulla</button>\n  </div>\n</mat-dialog-actions>", styles: [".fill,.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.fill{min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important;line-height:1.2!important}.smaller{font-size:smaller!important;line-height:1.2!important}.small{font-size:small!important;line-height:1.2!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:1.2!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer .title-container-with-loader,.drawer-small .title-container,.drawer-small .title-container-with-loader{padding-right:5px;padding-bottom:20px;padding-left:0}.drawer .title-container,.drawer-small .title-container{padding-top:20px}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding-top:14px}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}input[type=password]::-ms-reveal{display:none}input[type=password]::-webkit-credentials-auto-fill-button{visibility:hidden;display:none!important}.dialog-content{padding:0 24px 24px!important}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i2$1.FxLayoutDirective, selector: "    [fxLayout],    [fxLayout.xs],    [fxLayout.sm],    [fxLayout.md],    [fxLayout.lg],    [fxLayout.xl],    [fxLayout.lt-sm],    [fxLayout.lt-md],    [fxLayout.lt-lg],    [fxLayout.lt-xl],    [fxLayout.gt-xs],    [fxLayout.gt-sm],    [fxLayout.gt-md],    [fxLayout.gt-lg]  ", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$1.FxLayoutAlignDirective, selector: "    [fxLayoutAlign],    [fxLayoutAlign.xs],    [fxLayoutAlign.sm],    [fxLayoutAlign.md],    [fxLayoutAlign.lg],    [fxLayoutAlign.xl],    [fxLayoutAlign.lt-sm],    [fxLayoutAlign.lt-md],    [fxLayoutAlign.lt-lg],    [fxLayoutAlign.lt-xl],    [fxLayoutAlign.gt-xs],    [fxLayoutAlign.gt-sm],    [fxLayoutAlign.gt-md],    [fxLayoutAlign.gt-lg]  ", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$1.FxLayoutGapDirective, selector: "    [fxLayoutGap],    [fxLayoutGap.xs],    [fxLayoutGap.sm],    [fxLayoutGap.md],    [fxLayoutGap.lg],    [fxLayoutGap.xl],    [fxLayoutGap.lt-sm],    [fxLayoutGap.lt-md],    [fxLayoutGap.lt-lg],    [fxLayoutGap.lt-xl],    [fxLayoutGap.gt-xs],    [fxLayoutGap.gt-sm],    [fxLayoutGap.gt-md],    [fxLayoutGap.gt-lg]  ", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$1.FxFlexAlignDirective, selector: "    [fxFlexAlign],    [fxFlexAlign.xs],    [fxFlexAlign.sm],    [fxFlexAlign.md],    [fxFlexAlign.lg],    [fxFlexAlign.xl],    [fxFlexAlign.lt-sm],    [fxFlexAlign.lt-md],    [fxFlexAlign.lt-lg],    [fxFlexAlign.lt-xl],    [fxFlexAlign.gt-xs],    [fxFlexAlign.gt-sm],    [fxFlexAlign.gt-md],    [fxFlexAlign.gt-lg]  ", inputs: ["fxFlexAlign", "fxFlexAlign.xs", "fxFlexAlign.sm", "fxFlexAlign.md", "fxFlexAlign.lg", "fxFlexAlign.xl", "fxFlexAlign.lt-sm", "fxFlexAlign.lt-md", "fxFlexAlign.lt-lg", "fxFlexAlign.lt-xl", "fxFlexAlign.gt-xs", "fxFlexAlign.gt-sm", "fxFlexAlign.gt-md", "fxFlexAlign.gt-lg"] }, { kind: "directive", type: i2$1.FxFlexFillDirective, selector: "    [fxFlexFill],    [fxFill],    [fxFlexFill.xs],    [fxFlexFill.sm],    [fxFlexFill.md],    [fxFlexFill.lg],    [fxFlexFill.xl],    [fxFlexFill.lt-sm],    [fxFlexFill.lt-md],    [fxFlexFill.lt-lg],    [fxFlexFill.lt-xl],    [fxFlexFill.gt-xs],    [fxFlexFill.gt-sm],    [fxFlexFill.gt-md],    [fxFlexFill.gt-lg]  ", inputs: ["fxFlexFill", "fxFill", "fxFlexFill.xs", "fxFlexFill.sm", "fxFlexFill.md", "fxFlexFill.lg", "fxFlexFill.xl", "fxFlexFill.lt-sm", "fxFlexFill.lt-md", "fxFlexFill.lt-lg", "fxFlexFill.lt-xl", "fxFlexFill.gt-xs", "fxFlexFill.gt-sm", "fxFlexFill.gt-md", "fxFlexFill.gt-lg"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: PasswordStrengthComponent, selector: "password-strength", inputs: ["password"] }, { kind: "component", type: OtpInputComponent, selector: "otp-input" }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: CredentialsDialogComponent, isStandalone: true, selector: "ng-component", outputs: { done: "done", recoveringPassword: "recoveringPassword" }, ngImport: i0, template: "<div class=\"dialog-info\">\n  @if (form().invalid()) {\n  <span class=\"dialog-info-error\">Ci sono ancora dei campi obbligatori (*) non compilati.</span>\n  } @else {\n  <span class=\"dialog-info-ok\">Tutti i campi obbligatori (*) sono compilati.</span>\n  }\n</div>\n<div mat-dialog-title [innerHTML]=\"dialogData().title | safeHtml\"></div>\n<mat-dialog-content class=\"dialog-content\">\n  @if (dialogData().message) {\n  <div [innerHtml]=\"dialogData().message | safeHtml\" style=\"padding-bottom: 20px;\"></div>\n  }\n  <form (keyup.enter)=\"!form().invalid() ? ok() : undefined\" novalidate>\n    @if(dialogData().mode !== 'otp') {\n    @if (dialogData().mode === 'email') {\n    <mat-form-field style=\"width: 100%;\" [appearance]=\"dialogData().appearance\">\n      <mat-label>Email</mat-label>\n      <input type=\"email\" matInput [formField]=\"form.user\" [attr.aria-label]=\"'Email'\">\n      @if (form.user().invalid()) {\n      <mat-error>Email non valida.</mat-error>\n      }\n    </mat-form-field>\n    } @else if (dialogData().mode === 'user') {\n    <mat-form-field style=\"width: 100%;\" [appearance]=\"dialogData().appearance\">\n      <mat-label>Utente</mat-label>\n      <input matInput [formField]=\"form.user\" [attr.aria-label]=\"'user'\">\n      @if (form.user().invalid()) {\n      <mat-error>Obbligatorio.</mat-error>\n      }\n    </mat-form-field>\n    }\n    <mat-form-field style=\"width: 100%;\" [appearance]=\"dialogData().appearance\">\n      <mat-label>La tua password abilitata</mat-label>\n      <input matInput [type]=\"!showPassword() ? 'password' : 'text'\"\n        [formField]=\"form.password\" [attr.aria-label]=\"'La tua password abilitata'\" autocomplete=\"on\">\n      @if(form.password().value()) {\n      <password-strength [password]=\"form.password().value()\"></password-strength>\n      }\n      <button type=\"button\" mat-icon-button class=\"toolbar-suffix\" matSuffix (click)=\"showPassword.set(!showPassword())\">\n        <mat-icon>{{showPassword() ? 'visibility' : 'visibility_off'}}</mat-icon>\n      </button>\n      <mat-hint>Attento a maiuscole e minuscole</mat-hint>\n      @if (form.password().invalid()) {\n      <mat-error>Password non valida.</mat-error>\n      }\n    </mat-form-field>\n    @if (dialogData().remember || dialogData().recoverPassword) {\n    <div fxLayout=\"row\" fxLayoutGap=\"20px\" fxFill style=\"margin-top: 20px;\">\n      <div>\n        @if (dialogData().remember) {\n        <mat-checkbox fxFlexAlign=\"center\" [formField]=\"form.rememberMe\"> Ricordami</mat-checkbox>\n        }\n      </div>\n      <div fxLayoutAlign=\"end\">\n        @if (dialogData().recoverPassword) {\n        <button fxFlexAlign=\"center\" mat-button (click)=\"recoverPassword()\" title=\"Recupero password\"\n          >Non riesco ad accedere</button>\n        }\n      </div>\n    </div>\n    }\n    } @else {\n    <otp-input [formField]=\"form.code\"></otp-input>\n    }\n  </form>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <div fxLayout=\"row\" fxLayoutAlign=\"end\" fxFill>\n    <button mat-flat-button [disabled]=\"form().invalid()\" (click)=\"ok()\">{{dialogData().okCaption}}</button>\n    <button mat-stroked-button [mat-dialog-close]=\"true\">Annulla</button>\n  </div>\n</mat-dialog-actions>\n", styles: [".fill,.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.fill{min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important;line-height:1.2!important}.smaller{font-size:smaller!important;line-height:1.2!important}.small{font-size:small!important;line-height:1.2!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:1.2!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer .title-container-with-loader,.drawer-small .title-container,.drawer-small .title-container-with-loader{padding-right:5px;padding-bottom:20px;padding-left:0}.drawer .title-container,.drawer-small .title-container{padding-top:20px}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding-top:14px}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}input[type=password]::-ms-reveal{display:none}input[type=password]::-webkit-credentials-auto-fill-button{visibility:hidden;display:none!important}.dialog-content{padding:0 24px 24px!important}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i1$2.FxLayoutDirective, selector: "    [fxLayout],    [fxLayout.xs],    [fxLayout.sm],    [fxLayout.md],    [fxLayout.lg],    [fxLayout.xl],    [fxLayout.lt-sm],    [fxLayout.lt-md],    [fxLayout.lt-lg],    [fxLayout.lt-xl],    [fxLayout.gt-xs],    [fxLayout.gt-sm],    [fxLayout.gt-md],    [fxLayout.gt-lg]  ", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i1$2.FxLayoutAlignDirective, selector: "    [fxLayoutAlign],    [fxLayoutAlign.xs],    [fxLayoutAlign.sm],    [fxLayoutAlign.md],    [fxLayoutAlign.lg],    [fxLayoutAlign.xl],    [fxLayoutAlign.lt-sm],    [fxLayoutAlign.lt-md],    [fxLayoutAlign.lt-lg],    [fxLayoutAlign.lt-xl],    [fxLayoutAlign.gt-xs],    [fxLayoutAlign.gt-sm],    [fxLayoutAlign.gt-md],    [fxLayoutAlign.gt-lg]  ", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i1$2.FxLayoutGapDirective, selector: "    [fxLayoutGap],    [fxLayoutGap.xs],    [fxLayoutGap.sm],    [fxLayoutGap.md],    [fxLayoutGap.lg],    [fxLayoutGap.xl],    [fxLayoutGap.lt-sm],    [fxLayoutGap.lt-md],    [fxLayoutGap.lt-lg],    [fxLayoutGap.lt-xl],    [fxLayoutGap.gt-xs],    [fxLayoutGap.gt-sm],    [fxLayoutGap.gt-md],    [fxLayoutGap.gt-lg]  ", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i1$2.FxFlexAlignDirective, selector: "    [fxFlexAlign],    [fxFlexAlign.xs],    [fxFlexAlign.sm],    [fxFlexAlign.md],    [fxFlexAlign.lg],    [fxFlexAlign.xl],    [fxFlexAlign.lt-sm],    [fxFlexAlign.lt-md],    [fxFlexAlign.lt-lg],    [fxFlexAlign.lt-xl],    [fxFlexAlign.gt-xs],    [fxFlexAlign.gt-sm],    [fxFlexAlign.gt-md],    [fxFlexAlign.gt-lg]  ", inputs: ["fxFlexAlign", "fxFlexAlign.xs", "fxFlexAlign.sm", "fxFlexAlign.md", "fxFlexAlign.lg", "fxFlexAlign.xl", "fxFlexAlign.lt-sm", "fxFlexAlign.lt-md", "fxFlexAlign.lt-lg", "fxFlexAlign.lt-xl", "fxFlexAlign.gt-xs", "fxFlexAlign.gt-sm", "fxFlexAlign.gt-md", "fxFlexAlign.gt-lg"] }, { kind: "directive", type: i1$2.FxFlexFillDirective, selector: "    [fxFlexFill],    [fxFill],    [fxFlexFill.xs],    [fxFlexFill.sm],    [fxFlexFill.md],    [fxFlexFill.lg],    [fxFlexFill.xl],    [fxFlexFill.lt-sm],    [fxFlexFill.lt-md],    [fxFlexFill.lt-lg],    [fxFlexFill.lt-xl],    [fxFlexFill.gt-xs],    [fxFlexFill.gt-sm],    [fxFlexFill.gt-md],    [fxFlexFill.gt-lg]  ", inputs: ["fxFlexFill", "fxFill", "fxFlexFill.xs", "fxFlexFill.sm", "fxFlexFill.md", "fxFlexFill.lg", "fxFlexFill.xl", "fxFlexFill.lt-sm", "fxFlexFill.lt-md", "fxFlexFill.lt-lg", "fxFlexFill.lt-xl", "fxFlexFill.gt-xs", "fxFlexFill.gt-sm", "fxFlexFill.gt-md", "fxFlexFill.gt-lg"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: PasswordStrengthComponent, selector: "password-strength", inputs: ["password"] }, { kind: "component", type: OtpInputComponent, selector: "otp-input" }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: CredentialsDialogComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatDialogTitle,
                         MatDialogContent,
-                        FormsModule,
+                        FormField,
                         MatFormFieldModule,
                         MatInputModule,
                         MatIconModule,
@@ -338,7 +355,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                         PasswordStrengthComponent,
                         OtpInputComponent,
                         SafeHtmlPipe,
-                    ], template: "<div class=\"dialog-info\">\n  @if (f.form.invalid) {\n  <span class=\"dialog-info-error\">Ci sono ancora dei campi obbligatori (*) non compilati.</span>\n  } @else {\n  <span class=\"dialog-info-ok\">Tutti i campi obbligatori (*) sono compilati.</span>\n  }\n</div>\n<div mat-dialog-title [innerHTML]=\"dialogData().title | safeHtml\"></div>\n<mat-dialog-content class=\"dialog-content\">\n  @if (dialogData().message) {\n  <div [innerHtml]=\"dialogData().message | safeHtml\" style=\"padding-bottom: 20px;\"></div>\n  }\n  <form name=\"form\" #f=\"ngForm\" (keyup.Enter)=\"!f.form.invalid ? ok() : null\" novalidate>\n    @if(dialogData().mode !== 'otp') {\n    @if (dialogData().mode === 'email') {\n    <mat-form-field style=\"width: 100%;\" [appearance]=\"dialogData().appearance\">\n      <mat-label>Email</mat-label>\n      <input type=\"email\" matInput [(ngModel)]=\"item.user\" name=\"email\" #email=\"ngModel\" email required\n        [attr.aria-label]=\"'Email'\">\n      @if (email.invalid) {\n      <mat-error>Email non valida.</mat-error>\n      }\n    </mat-form-field>\n    } @else if (dialogData().mode === 'user') {\n    <mat-form-field style=\"width: 100%;\" [appearance]=\"dialogData().appearance\">\n      <mat-label>Utente</mat-label>\n      <input matInput [(ngModel)]=\"item.user\" name=\"user\" #user=\"ngModel\" required [attr.aria-label]=\"'user'\">\n      @if (user.invalid) {\n      <mat-error>Obbligatorio.</mat-error>\n      }\n    </mat-form-field>\n    }\n    <mat-form-field style=\"width: 100%;\" [appearance]=\"dialogData().appearance\">\n      <mat-label>La tua password abilitata</mat-label>\n      <input matInput name=\"password\" #password=\"ngModel\" [type]=\"!showPassword() ? 'password' : 'text'\"\n        [(ngModel)]=\"item.password\" required [attr.aria-label]=\"'La tua password abilitata'\" autocomplete=\"on\">\n      @if(item.password) {\n      <password-strength [password]=\"item.password\"></password-strength>\n      }\n      <button type=\"button\" mat-icon-button class=\"toolbar-suffix\" matSuffix (click)=\"showPassword.set(!showPassword())\">\n        <mat-icon>{{showPassword() ? 'visibility' : 'visibility_off'}}</mat-icon>\n      </button>\n      <mat-hint>Attento a maiuscole e minuscole</mat-hint>\n      @if (password.invalid) {\n      <mat-error>Password non valida.</mat-error>\n      }\n    </mat-form-field>\n    @if (dialogData().remember || dialogData().recoverPassword) {\n    <div fxLayout=\"row\" fxLayoutGap=\"20px\" fxFill style=\"margin-top: 20px;\">\n      <div>\n        @if (dialogData().remember) {\n        <mat-checkbox fxFlexAlign=\"center\" [(ngModel)]=\"item.rememberMe\" name=\"rememberMe\"> Ricordami</mat-checkbox>\n        }\n      </div>\n      <div fxLayoutAlign=\"end\">\n        @if (dialogData().recoverPassword) {\n        <button fxFlexAlign=\"center\" mat-button (click)=\"recoverPassword()\" title=\"Recupero password\"\n          >Non riesco ad accedere</button>\n        }\n      </div>\n    </div>\n    }\n    } @else {\n    <otp-input name=\"otp\" [(ngModel)]=\"item.code\" required></otp-input>\n    }\n  </form>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <div fxLayout=\"row\" fxLayoutAlign=\"end\" fxFill>\n    <button mat-flat-button [disabled]=\"f.form.invalid\" (click)=\"ok()\">{{dialogData().okCaption}}</button>\n    <button mat-stroked-button [mat-dialog-close]=\"true\">Annulla</button>\n  </div>\n</mat-dialog-actions>", styles: [".fill,.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.fill{min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important;line-height:1.2!important}.smaller{font-size:smaller!important;line-height:1.2!important}.small{font-size:small!important;line-height:1.2!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:1.2!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer .title-container-with-loader,.drawer-small .title-container,.drawer-small .title-container-with-loader{padding-right:5px;padding-bottom:20px;padding-left:0}.drawer .title-container,.drawer-small .title-container{padding-top:20px}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding-top:14px}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}input[type=password]::-ms-reveal{display:none}input[type=password]::-webkit-credentials-auto-fill-button{visibility:hidden;display:none!important}.dialog-content{padding:0 24px 24px!important}\n"] }]
+                    ], template: "<div class=\"dialog-info\">\n  @if (form().invalid()) {\n  <span class=\"dialog-info-error\">Ci sono ancora dei campi obbligatori (*) non compilati.</span>\n  } @else {\n  <span class=\"dialog-info-ok\">Tutti i campi obbligatori (*) sono compilati.</span>\n  }\n</div>\n<div mat-dialog-title [innerHTML]=\"dialogData().title | safeHtml\"></div>\n<mat-dialog-content class=\"dialog-content\">\n  @if (dialogData().message) {\n  <div [innerHtml]=\"dialogData().message | safeHtml\" style=\"padding-bottom: 20px;\"></div>\n  }\n  <form (keyup.enter)=\"!form().invalid() ? ok() : undefined\" novalidate>\n    @if(dialogData().mode !== 'otp') {\n    @if (dialogData().mode === 'email') {\n    <mat-form-field style=\"width: 100%;\" [appearance]=\"dialogData().appearance\">\n      <mat-label>Email</mat-label>\n      <input type=\"email\" matInput [formField]=\"form.user\" [attr.aria-label]=\"'Email'\">\n      @if (form.user().invalid()) {\n      <mat-error>Email non valida.</mat-error>\n      }\n    </mat-form-field>\n    } @else if (dialogData().mode === 'user') {\n    <mat-form-field style=\"width: 100%;\" [appearance]=\"dialogData().appearance\">\n      <mat-label>Utente</mat-label>\n      <input matInput [formField]=\"form.user\" [attr.aria-label]=\"'user'\">\n      @if (form.user().invalid()) {\n      <mat-error>Obbligatorio.</mat-error>\n      }\n    </mat-form-field>\n    }\n    <mat-form-field style=\"width: 100%;\" [appearance]=\"dialogData().appearance\">\n      <mat-label>La tua password abilitata</mat-label>\n      <input matInput [type]=\"!showPassword() ? 'password' : 'text'\"\n        [formField]=\"form.password\" [attr.aria-label]=\"'La tua password abilitata'\" autocomplete=\"on\">\n      @if(form.password().value()) {\n      <password-strength [password]=\"form.password().value()\"></password-strength>\n      }\n      <button type=\"button\" mat-icon-button class=\"toolbar-suffix\" matSuffix (click)=\"showPassword.set(!showPassword())\">\n        <mat-icon>{{showPassword() ? 'visibility' : 'visibility_off'}}</mat-icon>\n      </button>\n      <mat-hint>Attento a maiuscole e minuscole</mat-hint>\n      @if (form.password().invalid()) {\n      <mat-error>Password non valida.</mat-error>\n      }\n    </mat-form-field>\n    @if (dialogData().remember || dialogData().recoverPassword) {\n    <div fxLayout=\"row\" fxLayoutGap=\"20px\" fxFill style=\"margin-top: 20px;\">\n      <div>\n        @if (dialogData().remember) {\n        <mat-checkbox fxFlexAlign=\"center\" [formField]=\"form.rememberMe\"> Ricordami</mat-checkbox>\n        }\n      </div>\n      <div fxLayoutAlign=\"end\">\n        @if (dialogData().recoverPassword) {\n        <button fxFlexAlign=\"center\" mat-button (click)=\"recoverPassword()\" title=\"Recupero password\"\n          >Non riesco ad accedere</button>\n        }\n      </div>\n    </div>\n    }\n    } @else {\n    <otp-input [formField]=\"form.code\"></otp-input>\n    }\n  </form>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <div fxLayout=\"row\" fxLayoutAlign=\"end\" fxFill>\n    <button mat-flat-button [disabled]=\"form().invalid()\" (click)=\"ok()\">{{dialogData().okCaption}}</button>\n    <button mat-stroked-button [mat-dialog-close]=\"true\">Annulla</button>\n  </div>\n</mat-dialog-actions>\n", styles: [".fill,.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.fill{min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important;line-height:1.2!important}.smaller{font-size:smaller!important;line-height:1.2!important}.small{font-size:small!important;line-height:1.2!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:1.2!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer .title-container-with-loader,.drawer-small .title-container,.drawer-small .title-container-with-loader{padding-right:5px;padding-bottom:20px;padding-left:0}.drawer .title-container,.drawer-small .title-container{padding-top:20px}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding-top:14px}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}input[type=password]::-ms-reveal{display:none}input[type=password]::-webkit-credentials-auto-fill-button{visibility:hidden;display:none!important}.dialog-content{padding:0 24px 24px!important}\n"] }]
         }], propDecorators: { done: [{ type: i0.Output, args: ["done"] }], recoveringPassword: [{ type: i0.Output, args: ["recoveringPassword"] }] } });
 
 class ResetPasswordDialogComponent {
@@ -353,8 +370,39 @@ class ResetPasswordDialogComponent {
             return { mode: 'admin', appearance: 'fill', ...raw };
         })(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dialogData" }] : /* istanbul ignore next */ []));
-        /** Current form model bound to the template inputs. */
-        this.item = {};
+        /** Model backing the signal form. */
+        this.model = signal({
+            userEmail: '',
+            oldPassword: '',
+            password: '',
+            password2: '',
+            code: '',
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
+        /**
+         * Signal form for the password reset. Validators follow the active mode:
+         * the email is required in `forgot` mode, the old password in `old` mode,
+         * a complete 6-digit OTP code in `otp` mode; the new password is always
+         * required, at least 10 characters and strong enough, and its confirmation
+         * (required outside `admin` mode) must match it.
+         */
+        this.form = form(this.model, p => {
+            required(p.userEmail, { when: () => this.dialogData().mode === 'forgot' });
+            email(p.userEmail, { when: () => this.dialogData().mode === 'forgot' });
+            required(p.oldPassword, { when: () => this.dialogData().mode === 'old' });
+            maxLength(p.oldPassword, 30);
+            required(p.code, { when: () => this.dialogData().mode === 'otp' });
+            otpValidator(p.code);
+            required(p.password);
+            minLength(p.password, 10);
+            maxLength(p.password, 30);
+            passwordValidator(p.password);
+            required(p.password2, { when: () => this.dialogData().mode !== 'admin' });
+            minLength(p.password2, 10);
+            maxLength(p.password2, 30);
+            passwordValidator(p.password2);
+            equalsValidator(p.password2, p.password);
+        });
         /** Whether the old-password field is currently shown as plain text. */
         this.showOldPassword = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "showOldPassword" }] : /* istanbul ignore next */ []));
@@ -376,45 +424,45 @@ class ResetPasswordDialogComponent {
             this.dialogService.error('Email utente non specificata.');
             return;
         }
-        this.item.userEmail = data.userEmail;
-        this.item.userId = data.userId;
-        this.item.code = '';
+        this.model.update(m => ({
+            ...m,
+            userEmail: data.userEmail ?? '',
+            userId: data.userId,
+            code: '',
+        }));
     }
     /**
      * Emits the current form result to trigger the password-reset flow.
      */
     ok() {
-        this.done.emit(this.item);
+        this.done.emit(this.model());
     }
     /**
      * Generates a random password and populates both password fields with it.
      */
     generatePassword() {
         const password = SystemUtils.generatePassword();
-        this.item.password = password;
-        this.item.password2 = password;
+        this.model.update(m => ({ ...m, password, password2: password }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ResetPasswordDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: ResetPasswordDialogComponent, isStandalone: true, selector: "ng-component", outputs: { done: "done" }, ngImport: i0, template: "<div class=\"dialog-info\">\r\n  @if (f.form.invalid) {\r\n  <span class=\"dialog-info-error\">Ci sono ancora dei campi obbligatori (*) non compilati.</span>\r\n  } @else {\r\n  <span class=\"dialog-info-ok\">Tutti i campi obbligatori (*) sono compilati.</span>\r\n  }\r\n</div>\r\n<div mat-dialog-title>Reimposta password</div>\r\n<mat-dialog-content class=\"dialog-content\">\r\n  <form name=\"form\" #f=\"ngForm\" novalidate >\r\n    @if (dialogData().mode === 'forgot') {\r\n    <mat-form-field style=\"width: 100%;\" [appearance]=\"dialogData().appearance\">\r\n      <mat-label>Email che hai scelto quando ti sei registrato</mat-label>\r\n      <input type=\"email\" matInput [(ngModel)]=\"item.userEmail\" name=\"userEmail\" #userEmail=\"ngModel\" email required\r\n        [attr.aria-label]=\"'Email con cui ti sei registrato'\">\r\n      @if (userEmail.invalid) {\r\n      <mat-error>Email non valida.</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    } @else if (dialogData().mode === 'old') {\r\n    <mat-form-field style=\"width: 100%;\" [appearance]=\"dialogData().appearance\">\r\n      <mat-label>Vecchia password</mat-label>\r\n      <input [type]=\"!showOldPassword() ? 'password' : 'text'\" matInput name=\"oldPwd\" autocomplete=\"on\"\r\n        [(ngModel)]=\"item.oldPassword\" required maxlength=\"30\" #oldPwd=\"ngModel\">\r\n      <button type=\"button\" mat-icon-button class=\"toolbar-suffix\" matSuffix\r\n        (click)=\"showOldPassword.set(!showOldPassword())\">\r\n        <mat-icon>{{showOldPassword() ? 'visibility' : 'visibility_off'}}</mat-icon>\r\n      </button>\r\n      @if(item.oldPassword) {\r\n      <password-strength [password]=\"item.oldPassword\"></password-strength>\r\n      }\r\n      @if (oldPwd.invalid) {\r\n      <mat-error>Non valido.</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    } @else if (dialogData().mode === 'otp') {\r\n    <div style=\"font-size: small;\">Inserisci il codice di verifica di 6 cifre che ti abbiamo inviato ora per\r\n      email<br><span style=\"font-size:x-small\">(controlla anche la posta indesiderata)</span>.</div>\r\n    <otp-input name=\"otp\" [(ngModel)]=\"item.code\" required></otp-input>\r\n    }\r\n    <mat-form-field style=\"width: 100%;\" hintLabel=\"Minimo 10 car. con 1 simbolo e 1 maiuscola\"\r\n      [appearance]=\"dialogData().appearance\">\r\n      <mat-label>Nuova password</mat-label>\r\n      <input [type]=\"!showPassword() ? 'password' : 'text'\" matInput name=\"newPwd\" [(ngModel)]=\"item.password\" required\r\n        password minlength=\"10\" maxlength=\"30\" #newPwd=\"ngModel\">\r\n      @if(item.password) {\r\n      <password-strength [password]=\"item.password\"></password-strength>\r\n      }\r\n      <button type=\"button\" mat-icon-button class=\"toolbar-suffix\" matSuffix\r\n        (click)=\"showPassword.set(!showPassword())\">\r\n        <mat-icon>{{showPassword() ? 'visibility' : 'visibility_off'}}</mat-icon>\r\n      </button>\r\n      <mat-hint align=\"end\">{{newPwd.value?.length || 0}}/30</mat-hint>\r\n      @if (newPwd.invalid) {\r\n      <mat-error>Non valido.</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    <mat-form-field style=\"width: 100%;\" hintLabel=\"Minimo 10 car. con 1 simbolo e 1 maiuscola\"\r\n      [appearance]=\"dialogData().appearance\">\r\n      <mat-label>Conferma nuova password</mat-label>\r\n      <input [type]=\"!showPassword2() ? 'password' : 'text'\" matInput name=\"newPwd2\" [(ngModel)]=\"item.password2\"\r\n        [required]=\"dialogData().mode !== 'admin'\" password minlength=\"10\" maxlength=\"30\" [equals]=\"newPwd.control\"\r\n        #newPwd2=\"ngModel\">\r\n      <button type=\"button\" mat-icon-button class=\"toolbar-suffix\" matSuffix\r\n        (click)=\"showPassword2.set(!showPassword2())\">\r\n        <mat-icon>{{showPassword2() ? 'visibility' : 'visibility_off'}}</mat-icon>\r\n      </button>\r\n      @if(item.password2) {\r\n      <password-strength [password]=\"item.password2\"></password-strength>\r\n      }\r\n      <mat-hint align=\"end\">{{newPwd2.value?.length || 0}}/30</mat-hint>\r\n      @if (newPwd2.invalid) {\r\n      <mat-error>Non valido.</mat-error>\r\n      }\r\n    </mat-form-field>\r\n  </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n    <div fxFlex=\"30\">\r\n      @if (dialogData().mode === 'admin') {\r\n      <button mat-stroked-button (click)=\"generatePassword()\">Genera</button>\r\n      }\r\n    </div>\r\n    <div fxFlex=\"70\" fxLayoutAlign=\"end\">\r\n      <button mat-flat-button [disabled]=\"f.form.invalid\" (click)=\"ok()\">Salva</button>\r\n      @if (dialogData().mode !== 'forgot') {\r\n      <button mat-stroked-button [mat-dialog-close]=\"true\">Annulla</button>\r\n      }\r\n    </div>\r\n  </div>\r\n</mat-dialog-actions>", styles: [".fill,.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.fill{min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important;line-height:1.2!important}.smaller{font-size:smaller!important;line-height:1.2!important}.small{font-size:small!important;line-height:1.2!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:1.2!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer .title-container-with-loader,.drawer-small .title-container,.drawer-small .title-container-with-loader{padding-right:5px;padding-bottom:20px;padding-left:0}.drawer .title-container,.drawer-small .title-container{padding-top:20px}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding-top:14px}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}input[type=password]::-ms-reveal{display:none}input[type=password]::-webkit-credentials-auto-fill-button{visibility:hidden;display:none!important}.dialog-content{padding:0 24px 24px!important}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i2$1.FxLayoutDirective, selector: "    [fxLayout],    [fxLayout.xs],    [fxLayout.sm],    [fxLayout.md],    [fxLayout.lg],    [fxLayout.xl],    [fxLayout.lt-sm],    [fxLayout.lt-md],    [fxLayout.lt-lg],    [fxLayout.lt-xl],    [fxLayout.gt-xs],    [fxLayout.gt-sm],    [fxLayout.gt-md],    [fxLayout.gt-lg]  ", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$1.FxFlexDirective, selector: "    [fxFlex],    [fxFlex.xs],    [fxFlex.sm],    [fxFlex.md],    [fxFlex.lg],    [fxFlex.xl],    [fxFlex.lt-sm],    [fxFlex.lt-md],    [fxFlex.lt-lg],    [fxFlex.lt-xl],    [fxFlex.gt-xs],    [fxFlex.gt-sm],    [fxFlex.gt-md],    [fxFlex.gt-lg]  ", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i2$1.FxLayoutAlignDirective, selector: "    [fxLayoutAlign],    [fxLayoutAlign.xs],    [fxLayoutAlign.sm],    [fxLayoutAlign.md],    [fxLayoutAlign.lg],    [fxLayoutAlign.xl],    [fxLayoutAlign.lt-sm],    [fxLayoutAlign.lt-md],    [fxLayoutAlign.lt-lg],    [fxLayoutAlign.lt-xl],    [fxLayoutAlign.gt-xs],    [fxLayoutAlign.gt-sm],    [fxLayoutAlign.gt-md],    [fxLayoutAlign.gt-lg]  ", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$1.FxLayoutGapDirective, selector: "    [fxLayoutGap],    [fxLayoutGap.xs],    [fxLayoutGap.sm],    [fxLayoutGap.md],    [fxLayoutGap.lg],    [fxLayoutGap.xl],    [fxLayoutGap.lt-sm],    [fxLayoutGap.lt-md],    [fxLayoutGap.lt-lg],    [fxLayoutGap.lt-xl],    [fxLayoutGap.gt-xs],    [fxLayoutGap.gt-sm],    [fxLayoutGap.gt-md],    [fxLayoutGap.gt-lg]  ", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$1.FxFlexFillDirective, selector: "    [fxFlexFill],    [fxFill],    [fxFlexFill.xs],    [fxFlexFill.sm],    [fxFlexFill.md],    [fxFlexFill.lg],    [fxFlexFill.xl],    [fxFlexFill.lt-sm],    [fxFlexFill.lt-md],    [fxFlexFill.lt-lg],    [fxFlexFill.lt-xl],    [fxFlexFill.gt-xs],    [fxFlexFill.gt-sm],    [fxFlexFill.gt-md],    [fxFlexFill.gt-lg]  ", inputs: ["fxFlexFill", "fxFill", "fxFlexFill.xs", "fxFlexFill.sm", "fxFlexFill.md", "fxFlexFill.lg", "fxFlexFill.xl", "fxFlexFill.lt-sm", "fxFlexFill.lt-md", "fxFlexFill.lt-lg", "fxFlexFill.lt-xl", "fxFlexFill.gt-xs", "fxFlexFill.gt-sm", "fxFlexFill.gt-md", "fxFlexFill.gt-lg"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: PasswordValidatorDirective, selector: "[password]" }, { kind: "component", type: PasswordStrengthComponent, selector: "password-strength", inputs: ["password"] }, { kind: "directive", type: EqualsValidatorDirective, selector: "[equals]", inputs: ["equals"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: OtpInputComponent, selector: "otp-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: ResetPasswordDialogComponent, isStandalone: true, selector: "ng-component", outputs: { done: "done" }, ngImport: i0, template: "<div class=\"dialog-info\">\r\n  @if (form().invalid()) {\r\n  <span class=\"dialog-info-error\">Ci sono ancora dei campi obbligatori (*) non compilati.</span>\r\n  } @else {\r\n  <span class=\"dialog-info-ok\">Tutti i campi obbligatori (*) sono compilati.</span>\r\n  }\r\n</div>\r\n<div mat-dialog-title>Reimposta password</div>\r\n<mat-dialog-content class=\"dialog-content\">\r\n  <form novalidate >\r\n    @if (dialogData().mode === 'forgot') {\r\n    <mat-form-field style=\"width: 100%;\" [appearance]=\"dialogData().appearance\">\r\n      <mat-label>Email che hai scelto quando ti sei registrato</mat-label>\r\n      <input type=\"email\" matInput [formField]=\"form.userEmail\"\r\n        [attr.aria-label]=\"'Email con cui ti sei registrato'\">\r\n      @if (form.userEmail().invalid()) {\r\n      <mat-error>Email non valida.</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    } @else if (dialogData().mode === 'old') {\r\n    <mat-form-field style=\"width: 100%;\" [appearance]=\"dialogData().appearance\">\r\n      <mat-label>Vecchia password</mat-label>\r\n      <input [type]=\"!showOldPassword() ? 'password' : 'text'\" matInput autocomplete=\"on\"\r\n        [formField]=\"form.oldPassword\">\r\n      <button type=\"button\" mat-icon-button class=\"toolbar-suffix\" matSuffix\r\n        (click)=\"showOldPassword.set(!showOldPassword())\">\r\n        <mat-icon>{{showOldPassword() ? 'visibility' : 'visibility_off'}}</mat-icon>\r\n      </button>\r\n      @if(form.oldPassword().value()) {\r\n      <password-strength [password]=\"form.oldPassword().value()\"></password-strength>\r\n      }\r\n      @if (form.oldPassword().invalid()) {\r\n      <mat-error>Non valido.</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    } @else if (dialogData().mode === 'otp') {\r\n    <div style=\"font-size: small;\">Inserisci il codice di verifica di 6 cifre che ti abbiamo inviato ora per\r\n      email<br><span style=\"font-size:x-small\">(controlla anche la posta indesiderata)</span>.</div>\r\n    <otp-input [formField]=\"form.code\"></otp-input>\r\n    }\r\n    <mat-form-field style=\"width: 100%;\" hintLabel=\"Minimo 10 car. con 1 simbolo e 1 maiuscola\"\r\n      [appearance]=\"dialogData().appearance\">\r\n      <mat-label>Nuova password</mat-label>\r\n      <input [type]=\"!showPassword() ? 'password' : 'text'\" matInput [formField]=\"form.password\">\r\n      @if(form.password().value()) {\r\n      <password-strength [password]=\"form.password().value()\"></password-strength>\r\n      }\r\n      <button type=\"button\" mat-icon-button class=\"toolbar-suffix\" matSuffix\r\n        (click)=\"showPassword.set(!showPassword())\">\r\n        <mat-icon>{{showPassword() ? 'visibility' : 'visibility_off'}}</mat-icon>\r\n      </button>\r\n      <mat-hint align=\"end\">{{form.password().value()?.length || 0}}/30</mat-hint>\r\n      @if (form.password().invalid()) {\r\n      <mat-error>Non valido.</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    <mat-form-field style=\"width: 100%;\" hintLabel=\"Minimo 10 car. con 1 simbolo e 1 maiuscola\"\r\n      [appearance]=\"dialogData().appearance\">\r\n      <mat-label>Conferma nuova password</mat-label>\r\n      <input [type]=\"!showPassword2() ? 'password' : 'text'\" matInput [formField]=\"form.password2\">\r\n      <button type=\"button\" mat-icon-button class=\"toolbar-suffix\" matSuffix\r\n        (click)=\"showPassword2.set(!showPassword2())\">\r\n        <mat-icon>{{showPassword2() ? 'visibility' : 'visibility_off'}}</mat-icon>\r\n      </button>\r\n      @if(form.password2().value()) {\r\n      <password-strength [password]=\"form.password2().value()\"></password-strength>\r\n      }\r\n      <mat-hint align=\"end\">{{form.password2().value()?.length || 0}}/30</mat-hint>\r\n      @if (form.password2().invalid()) {\r\n      <mat-error>Non valido.</mat-error>\r\n      }\r\n    </mat-form-field>\r\n  </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n    <div fxFlex=\"30\">\r\n      @if (dialogData().mode === 'admin') {\r\n      <button mat-stroked-button (click)=\"generatePassword()\">Genera</button>\r\n      }\r\n    </div>\r\n    <div fxFlex=\"70\" fxLayoutAlign=\"end\">\r\n      <button mat-flat-button [disabled]=\"form().invalid()\" (click)=\"ok()\">Salva</button>\r\n      @if (dialogData().mode !== 'forgot') {\r\n      <button mat-stroked-button [mat-dialog-close]=\"true\">Annulla</button>\r\n      }\r\n    </div>\r\n  </div>\r\n</mat-dialog-actions>\r\n", styles: [".fill,.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.fill{min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important;line-height:1.2!important}.smaller{font-size:smaller!important;line-height:1.2!important}.small{font-size:small!important;line-height:1.2!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:1.2!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer .title-container-with-loader,.drawer-small .title-container,.drawer-small .title-container-with-loader{padding-right:5px;padding-bottom:20px;padding-left:0}.drawer .title-container,.drawer-small .title-container{padding-top:20px}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding-top:14px}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}input[type=password]::-ms-reveal{display:none}input[type=password]::-webkit-credentials-auto-fill-button{visibility:hidden;display:none!important}.dialog-content{padding:0 24px 24px!important}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i1$2.FxLayoutDirective, selector: "    [fxLayout],    [fxLayout.xs],    [fxLayout.sm],    [fxLayout.md],    [fxLayout.lg],    [fxLayout.xl],    [fxLayout.lt-sm],    [fxLayout.lt-md],    [fxLayout.lt-lg],    [fxLayout.lt-xl],    [fxLayout.gt-xs],    [fxLayout.gt-sm],    [fxLayout.gt-md],    [fxLayout.gt-lg]  ", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i1$2.FxFlexDirective, selector: "    [fxFlex],    [fxFlex.xs],    [fxFlex.sm],    [fxFlex.md],    [fxFlex.lg],    [fxFlex.xl],    [fxFlex.lt-sm],    [fxFlex.lt-md],    [fxFlex.lt-lg],    [fxFlex.lt-xl],    [fxFlex.gt-xs],    [fxFlex.gt-sm],    [fxFlex.gt-md],    [fxFlex.gt-lg]  ", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i1$2.FxLayoutAlignDirective, selector: "    [fxLayoutAlign],    [fxLayoutAlign.xs],    [fxLayoutAlign.sm],    [fxLayoutAlign.md],    [fxLayoutAlign.lg],    [fxLayoutAlign.xl],    [fxLayoutAlign.lt-sm],    [fxLayoutAlign.lt-md],    [fxLayoutAlign.lt-lg],    [fxLayoutAlign.lt-xl],    [fxLayoutAlign.gt-xs],    [fxLayoutAlign.gt-sm],    [fxLayoutAlign.gt-md],    [fxLayoutAlign.gt-lg]  ", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i1$2.FxLayoutGapDirective, selector: "    [fxLayoutGap],    [fxLayoutGap.xs],    [fxLayoutGap.sm],    [fxLayoutGap.md],    [fxLayoutGap.lg],    [fxLayoutGap.xl],    [fxLayoutGap.lt-sm],    [fxLayoutGap.lt-md],    [fxLayoutGap.lt-lg],    [fxLayoutGap.lt-xl],    [fxLayoutGap.gt-xs],    [fxLayoutGap.gt-sm],    [fxLayoutGap.gt-md],    [fxLayoutGap.gt-lg]  ", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i1$2.FxFlexFillDirective, selector: "    [fxFlexFill],    [fxFill],    [fxFlexFill.xs],    [fxFlexFill.sm],    [fxFlexFill.md],    [fxFlexFill.lg],    [fxFlexFill.xl],    [fxFlexFill.lt-sm],    [fxFlexFill.lt-md],    [fxFlexFill.lt-lg],    [fxFlexFill.lt-xl],    [fxFlexFill.gt-xs],    [fxFlexFill.gt-sm],    [fxFlexFill.gt-md],    [fxFlexFill.gt-lg]  ", inputs: ["fxFlexFill", "fxFill", "fxFlexFill.xs", "fxFlexFill.sm", "fxFlexFill.md", "fxFlexFill.lg", "fxFlexFill.xl", "fxFlexFill.lt-sm", "fxFlexFill.lt-md", "fxFlexFill.lt-lg", "fxFlexFill.lt-xl", "fxFlexFill.gt-xs", "fxFlexFill.gt-sm", "fxFlexFill.gt-md", "fxFlexFill.gt-lg"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: PasswordStrengthComponent, selector: "password-strength", inputs: ["password"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: OtpInputComponent, selector: "otp-input" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: ResetPasswordDialogComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         MatDialogTitle,
                         MatDialogContent,
-                        FormsModule,
+                        FormField,
                         FlexLayoutModule,
                         MatFormFieldModule,
                         MatInputModule,
-                        PasswordValidatorDirective,
                         PasswordStrengthComponent,
-                        EqualsValidatorDirective,
                         MatIconModule,
                         MatDialogActions,
                         MatButtonModule,
                         MatDialogClose,
                         OtpInputComponent
-                    ], template: "<div class=\"dialog-info\">\r\n  @if (f.form.invalid) {\r\n  <span class=\"dialog-info-error\">Ci sono ancora dei campi obbligatori (*) non compilati.</span>\r\n  } @else {\r\n  <span class=\"dialog-info-ok\">Tutti i campi obbligatori (*) sono compilati.</span>\r\n  }\r\n</div>\r\n<div mat-dialog-title>Reimposta password</div>\r\n<mat-dialog-content class=\"dialog-content\">\r\n  <form name=\"form\" #f=\"ngForm\" novalidate >\r\n    @if (dialogData().mode === 'forgot') {\r\n    <mat-form-field style=\"width: 100%;\" [appearance]=\"dialogData().appearance\">\r\n      <mat-label>Email che hai scelto quando ti sei registrato</mat-label>\r\n      <input type=\"email\" matInput [(ngModel)]=\"item.userEmail\" name=\"userEmail\" #userEmail=\"ngModel\" email required\r\n        [attr.aria-label]=\"'Email con cui ti sei registrato'\">\r\n      @if (userEmail.invalid) {\r\n      <mat-error>Email non valida.</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    } @else if (dialogData().mode === 'old') {\r\n    <mat-form-field style=\"width: 100%;\" [appearance]=\"dialogData().appearance\">\r\n      <mat-label>Vecchia password</mat-label>\r\n      <input [type]=\"!showOldPassword() ? 'password' : 'text'\" matInput name=\"oldPwd\" autocomplete=\"on\"\r\n        [(ngModel)]=\"item.oldPassword\" required maxlength=\"30\" #oldPwd=\"ngModel\">\r\n      <button type=\"button\" mat-icon-button class=\"toolbar-suffix\" matSuffix\r\n        (click)=\"showOldPassword.set(!showOldPassword())\">\r\n        <mat-icon>{{showOldPassword() ? 'visibility' : 'visibility_off'}}</mat-icon>\r\n      </button>\r\n      @if(item.oldPassword) {\r\n      <password-strength [password]=\"item.oldPassword\"></password-strength>\r\n      }\r\n      @if (oldPwd.invalid) {\r\n      <mat-error>Non valido.</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    } @else if (dialogData().mode === 'otp') {\r\n    <div style=\"font-size: small;\">Inserisci il codice di verifica di 6 cifre che ti abbiamo inviato ora per\r\n      email<br><span style=\"font-size:x-small\">(controlla anche la posta indesiderata)</span>.</div>\r\n    <otp-input name=\"otp\" [(ngModel)]=\"item.code\" required></otp-input>\r\n    }\r\n    <mat-form-field style=\"width: 100%;\" hintLabel=\"Minimo 10 car. con 1 simbolo e 1 maiuscola\"\r\n      [appearance]=\"dialogData().appearance\">\r\n      <mat-label>Nuova password</mat-label>\r\n      <input [type]=\"!showPassword() ? 'password' : 'text'\" matInput name=\"newPwd\" [(ngModel)]=\"item.password\" required\r\n        password minlength=\"10\" maxlength=\"30\" #newPwd=\"ngModel\">\r\n      @if(item.password) {\r\n      <password-strength [password]=\"item.password\"></password-strength>\r\n      }\r\n      <button type=\"button\" mat-icon-button class=\"toolbar-suffix\" matSuffix\r\n        (click)=\"showPassword.set(!showPassword())\">\r\n        <mat-icon>{{showPassword() ? 'visibility' : 'visibility_off'}}</mat-icon>\r\n      </button>\r\n      <mat-hint align=\"end\">{{newPwd.value?.length || 0}}/30</mat-hint>\r\n      @if (newPwd.invalid) {\r\n      <mat-error>Non valido.</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    <mat-form-field style=\"width: 100%;\" hintLabel=\"Minimo 10 car. con 1 simbolo e 1 maiuscola\"\r\n      [appearance]=\"dialogData().appearance\">\r\n      <mat-label>Conferma nuova password</mat-label>\r\n      <input [type]=\"!showPassword2() ? 'password' : 'text'\" matInput name=\"newPwd2\" [(ngModel)]=\"item.password2\"\r\n        [required]=\"dialogData().mode !== 'admin'\" password minlength=\"10\" maxlength=\"30\" [equals]=\"newPwd.control\"\r\n        #newPwd2=\"ngModel\">\r\n      <button type=\"button\" mat-icon-button class=\"toolbar-suffix\" matSuffix\r\n        (click)=\"showPassword2.set(!showPassword2())\">\r\n        <mat-icon>{{showPassword2() ? 'visibility' : 'visibility_off'}}</mat-icon>\r\n      </button>\r\n      @if(item.password2) {\r\n      <password-strength [password]=\"item.password2\"></password-strength>\r\n      }\r\n      <mat-hint align=\"end\">{{newPwd2.value?.length || 0}}/30</mat-hint>\r\n      @if (newPwd2.invalid) {\r\n      <mat-error>Non valido.</mat-error>\r\n      }\r\n    </mat-form-field>\r\n  </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n    <div fxFlex=\"30\">\r\n      @if (dialogData().mode === 'admin') {\r\n      <button mat-stroked-button (click)=\"generatePassword()\">Genera</button>\r\n      }\r\n    </div>\r\n    <div fxFlex=\"70\" fxLayoutAlign=\"end\">\r\n      <button mat-flat-button [disabled]=\"f.form.invalid\" (click)=\"ok()\">Salva</button>\r\n      @if (dialogData().mode !== 'forgot') {\r\n      <button mat-stroked-button [mat-dialog-close]=\"true\">Annulla</button>\r\n      }\r\n    </div>\r\n  </div>\r\n</mat-dialog-actions>", styles: [".fill,.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.fill{min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important;line-height:1.2!important}.smaller{font-size:smaller!important;line-height:1.2!important}.small{font-size:small!important;line-height:1.2!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:1.2!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer .title-container-with-loader,.drawer-small .title-container,.drawer-small .title-container-with-loader{padding-right:5px;padding-bottom:20px;padding-left:0}.drawer .title-container,.drawer-small .title-container{padding-top:20px}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding-top:14px}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}input[type=password]::-ms-reveal{display:none}input[type=password]::-webkit-credentials-auto-fill-button{visibility:hidden;display:none!important}.dialog-content{padding:0 24px 24px!important}\n"] }]
+                    ], template: "<div class=\"dialog-info\">\r\n  @if (form().invalid()) {\r\n  <span class=\"dialog-info-error\">Ci sono ancora dei campi obbligatori (*) non compilati.</span>\r\n  } @else {\r\n  <span class=\"dialog-info-ok\">Tutti i campi obbligatori (*) sono compilati.</span>\r\n  }\r\n</div>\r\n<div mat-dialog-title>Reimposta password</div>\r\n<mat-dialog-content class=\"dialog-content\">\r\n  <form novalidate >\r\n    @if (dialogData().mode === 'forgot') {\r\n    <mat-form-field style=\"width: 100%;\" [appearance]=\"dialogData().appearance\">\r\n      <mat-label>Email che hai scelto quando ti sei registrato</mat-label>\r\n      <input type=\"email\" matInput [formField]=\"form.userEmail\"\r\n        [attr.aria-label]=\"'Email con cui ti sei registrato'\">\r\n      @if (form.userEmail().invalid()) {\r\n      <mat-error>Email non valida.</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    } @else if (dialogData().mode === 'old') {\r\n    <mat-form-field style=\"width: 100%;\" [appearance]=\"dialogData().appearance\">\r\n      <mat-label>Vecchia password</mat-label>\r\n      <input [type]=\"!showOldPassword() ? 'password' : 'text'\" matInput autocomplete=\"on\"\r\n        [formField]=\"form.oldPassword\">\r\n      <button type=\"button\" mat-icon-button class=\"toolbar-suffix\" matSuffix\r\n        (click)=\"showOldPassword.set(!showOldPassword())\">\r\n        <mat-icon>{{showOldPassword() ? 'visibility' : 'visibility_off'}}</mat-icon>\r\n      </button>\r\n      @if(form.oldPassword().value()) {\r\n      <password-strength [password]=\"form.oldPassword().value()\"></password-strength>\r\n      }\r\n      @if (form.oldPassword().invalid()) {\r\n      <mat-error>Non valido.</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    } @else if (dialogData().mode === 'otp') {\r\n    <div style=\"font-size: small;\">Inserisci il codice di verifica di 6 cifre che ti abbiamo inviato ora per\r\n      email<br><span style=\"font-size:x-small\">(controlla anche la posta indesiderata)</span>.</div>\r\n    <otp-input [formField]=\"form.code\"></otp-input>\r\n    }\r\n    <mat-form-field style=\"width: 100%;\" hintLabel=\"Minimo 10 car. con 1 simbolo e 1 maiuscola\"\r\n      [appearance]=\"dialogData().appearance\">\r\n      <mat-label>Nuova password</mat-label>\r\n      <input [type]=\"!showPassword() ? 'password' : 'text'\" matInput [formField]=\"form.password\">\r\n      @if(form.password().value()) {\r\n      <password-strength [password]=\"form.password().value()\"></password-strength>\r\n      }\r\n      <button type=\"button\" mat-icon-button class=\"toolbar-suffix\" matSuffix\r\n        (click)=\"showPassword.set(!showPassword())\">\r\n        <mat-icon>{{showPassword() ? 'visibility' : 'visibility_off'}}</mat-icon>\r\n      </button>\r\n      <mat-hint align=\"end\">{{form.password().value()?.length || 0}}/30</mat-hint>\r\n      @if (form.password().invalid()) {\r\n      <mat-error>Non valido.</mat-error>\r\n      }\r\n    </mat-form-field>\r\n    <mat-form-field style=\"width: 100%;\" hintLabel=\"Minimo 10 car. con 1 simbolo e 1 maiuscola\"\r\n      [appearance]=\"dialogData().appearance\">\r\n      <mat-label>Conferma nuova password</mat-label>\r\n      <input [type]=\"!showPassword2() ? 'password' : 'text'\" matInput [formField]=\"form.password2\">\r\n      <button type=\"button\" mat-icon-button class=\"toolbar-suffix\" matSuffix\r\n        (click)=\"showPassword2.set(!showPassword2())\">\r\n        <mat-icon>{{showPassword2() ? 'visibility' : 'visibility_off'}}</mat-icon>\r\n      </button>\r\n      @if(form.password2().value()) {\r\n      <password-strength [password]=\"form.password2().value()\"></password-strength>\r\n      }\r\n      <mat-hint align=\"end\">{{form.password2().value()?.length || 0}}/30</mat-hint>\r\n      @if (form.password2().invalid()) {\r\n      <mat-error>Non valido.</mat-error>\r\n      }\r\n    </mat-form-field>\r\n  </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <div fxLayout=\"row\" fxLayoutGap=\"10px\" fxFill>\r\n    <div fxFlex=\"30\">\r\n      @if (dialogData().mode === 'admin') {\r\n      <button mat-stroked-button (click)=\"generatePassword()\">Genera</button>\r\n      }\r\n    </div>\r\n    <div fxFlex=\"70\" fxLayoutAlign=\"end\">\r\n      <button mat-flat-button [disabled]=\"form().invalid()\" (click)=\"ok()\">Salva</button>\r\n      @if (dialogData().mode !== 'forgot') {\r\n      <button mat-stroked-button [mat-dialog-close]=\"true\">Annulla</button>\r\n      }\r\n    </div>\r\n  </div>\r\n</mat-dialog-actions>\r\n", styles: [".fill,.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.fill{min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important;line-height:1.2!important}.smaller{font-size:smaller!important;line-height:1.2!important}.small{font-size:small!important;line-height:1.2!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:1.2!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer .title-container-with-loader,.drawer-small .title-container,.drawer-small .title-container-with-loader{padding-right:5px;padding-bottom:20px;padding-left:0}.drawer .title-container,.drawer-small .title-container{padding-top:20px}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding-top:14px}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}input[type=password]::-ms-reveal{display:none}input[type=password]::-webkit-credentials-auto-fill-button{visibility:hidden;display:none!important}.dialog-content{padding:0 24px 24px!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { done: [{ type: i0.Output, args: ["done"] }] } });
 
 class RecoverPasswordDialogComponent {
@@ -427,40 +475,47 @@ class RecoverPasswordDialogComponent {
             ...(inject(MAT_DIALOG_DATA) ?? {}),
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dialogData" }] : /* istanbul ignore next */ []));
-        /** Current form model bound to the template inputs. */
-        this.item = {
+        /** Model backing the signal form. */
+        this.model = signal({
             email: '',
             recaptcha: false,
-        };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
+        /**
+         * Signal form for the recovery request: the email is required and must be valid.
+         */
+        this.form = form(this.model, p => {
+            required(p.email);
+            email(p.email);
+            maxLength(p.email, 200);
+        });
     }
     /**
      * Emits the current form result to trigger the password-recovery flow.
      */
     ok() {
-        this.done.emit(this.item);
+        this.done.emit(this.model());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: RecoverPasswordDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: RecoverPasswordDialogComponent, isStandalone: true, selector: "ng-component", outputs: { done: "done" }, ngImport: i0, template: "<div class=\"dialog-info\">\r\n  @if (f.form.invalid) {\r\n  <span class=\"dialog-info-error\">Ci sono ancora dei campi obbligatori (*) non compilati.</span>\r\n  } @else {\r\n  <span class=\"dialog-info-ok\">Tutti i campi obbligatori (*) sono compilati.</span>\r\n  }\r\n</div>\r\n<div mat-dialog-title>Per quale ragione non sei in grado di effettuare l'accesso?</div>\r\n<mat-dialog-content class=\"dialog-content\">\r\n\r\n  <b>1. Ho dimenticato la password</b>\r\n  <p>\r\n    Puoi recuperarla facilmente inserendo l'email a cui la password \u00E8 collegata. Non \u00E8 possibile recuperare password\r\n    aziendali (non collegate ad un email).</p>\r\n  <form name=\"form\" #f=\"ngForm\" (keyup.Enter)=\"!f.form.invalid ? ok() : null\" novalidate>\r\n\r\n    <mat-form-field style=\"width:100%\" [appearance]=\"dialogData().appearance\">\r\n      <mat-label>Email con cui ti sei registrato</mat-label>\r\n      <input type=\"email\" matInput name=\"email\" #email=\"ngModel\" [(ngModel)]=\"item.email\" required email\r\n        maxlength=\"200\" />\r\n      @if (email.invalid) {\r\n      <mat-error>Email non valida.</mat-error>\r\n      }\r\n    </mat-form-field>\r\n\r\n    <div style=\"margin-top:20px; margin-bottom:20px;\">\r\n      <button type=\"button\" mat-flat-button (click)=\"ok()\"  [disabled]=\"f.form.invalid\"\r\n        aria-label=\"Recupera password\">Recupera password</button>\r\n    </div>\r\n  </form>\r\n  <p></p>\r\n  <b>2. Il sistema mi dice che la password non \u00E8 corretta.</b>\r\n  <p>\r\n    E' molto probabile che ci sia stato un difetto di digitazione. Per favore controlla bene che non vi siano spazi non\r\n    richiesti e che la password rispetti perfettamente le maiuscole e minuscole. Nel caso in cui la digitazione fosse\r\n    corretta, verifica che la data del tuo abbonamento non sia scaduta.\r\n  </p>\r\n  <p></p>\r\n  <b>3. Il sistema mi dice che non pu\u00F2 accettare connessioni dal mio indirizzo IP</b>\r\n  <p>\r\n    Il tuo abbonamento \u00E8 stato vincolato ad un indirizzo IP (indirizzo dal quale ti colleghi). Capita sovente che\r\n    questi indirizzi siano cambiati da parte del reparto IT per questioni di sicurezza informatica.\r\n    Per risolvere il problema, contattate il reparto IT e fatevi dire qual'\u00E8 il nuovo indirizzo IP e comunicatelo ad\r\n    ARS Edizioni Informatiche.\r\n  </p>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <div fxLayout=\"row\" fxLayoutAlign=\"end\" fxFill>\r\n    <button mat-stroked-button [mat-dialog-close]=\"true\" >Chiudi</button>\r\n  </div>\r\n</mat-dialog-actions>", styles: [".fill,.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.fill{min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important;line-height:1.2!important}.smaller{font-size:smaller!important;line-height:1.2!important}.small{font-size:small!important;line-height:1.2!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:1.2!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer .title-container-with-loader,.drawer-small .title-container,.drawer-small .title-container-with-loader{padding-right:5px;padding-bottom:20px;padding-left:0}.drawer .title-container,.drawer-small .title-container{padding-top:20px}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding-top:14px}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}.dialog-content{padding:0 24px 24px!important}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i2$1.FxLayoutDirective, selector: "    [fxLayout],    [fxLayout.xs],    [fxLayout.sm],    [fxLayout.md],    [fxLayout.lg],    [fxLayout.xl],    [fxLayout.lt-sm],    [fxLayout.lt-md],    [fxLayout.lt-lg],    [fxLayout.lt-xl],    [fxLayout.gt-xs],    [fxLayout.gt-sm],    [fxLayout.gt-md],    [fxLayout.gt-lg]  ", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$1.FxLayoutAlignDirective, selector: "    [fxLayoutAlign],    [fxLayoutAlign.xs],    [fxLayoutAlign.sm],    [fxLayoutAlign.md],    [fxLayoutAlign.lg],    [fxLayoutAlign.xl],    [fxLayoutAlign.lt-sm],    [fxLayoutAlign.lt-md],    [fxLayoutAlign.lt-lg],    [fxLayoutAlign.lt-xl],    [fxLayoutAlign.gt-xs],    [fxLayoutAlign.gt-sm],    [fxLayoutAlign.gt-md],    [fxLayoutAlign.gt-lg]  ", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$1.FxFlexFillDirective, selector: "    [fxFlexFill],    [fxFill],    [fxFlexFill.xs],    [fxFlexFill.sm],    [fxFlexFill.md],    [fxFlexFill.lg],    [fxFlexFill.xl],    [fxFlexFill.lt-sm],    [fxFlexFill.lt-md],    [fxFlexFill.lt-lg],    [fxFlexFill.lt-xl],    [fxFlexFill.gt-xs],    [fxFlexFill.gt-sm],    [fxFlexFill.gt-md],    [fxFlexFill.gt-lg]  ", inputs: ["fxFlexFill", "fxFill", "fxFlexFill.xs", "fxFlexFill.sm", "fxFlexFill.md", "fxFlexFill.lg", "fxFlexFill.xl", "fxFlexFill.lt-sm", "fxFlexFill.lt-md", "fxFlexFill.lt-lg", "fxFlexFill.lt-xl", "fxFlexFill.gt-xs", "fxFlexFill.gt-sm", "fxFlexFill.gt-md", "fxFlexFill.gt-lg"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: RecoverPasswordDialogComponent, isStandalone: true, selector: "ng-component", outputs: { done: "done" }, ngImport: i0, template: "<div class=\"dialog-info\">\n  @if (form().invalid()) {\n  <span class=\"dialog-info-error\">Ci sono ancora dei campi obbligatori (*) non compilati.</span>\n  } @else {\n  <span class=\"dialog-info-ok\">Tutti i campi obbligatori (*) sono compilati.</span>\n  }\n</div>\n<div mat-dialog-title>Per quale ragione non sei in grado di effettuare l'accesso?</div>\n<mat-dialog-content class=\"dialog-content\">\n\n  <b>1. Ho dimenticato la password</b>\n  <p>\n    Puoi recuperarla facilmente inserendo l'email a cui la password \u00E8 collegata. Non \u00E8 possibile recuperare password\n    aziendali (non collegate ad un email).</p>\n  <form (keyup.enter)=\"!form().invalid() ? ok() : undefined\" novalidate>\n\n    <mat-form-field style=\"width:100%\" [appearance]=\"dialogData().appearance\">\n      <mat-label>Email con cui ti sei registrato</mat-label>\n      <input type=\"email\" matInput [formField]=\"form.email\" />\n      @if (form.email().invalid()) {\n      <mat-error>Email non valida.</mat-error>\n      }\n    </mat-form-field>\n\n    <div style=\"margin-top:20px; margin-bottom:20px;\">\n      <button type=\"button\" mat-flat-button (click)=\"ok()\"  [disabled]=\"form().invalid()\"\n        aria-label=\"Recupera password\">Recupera password</button>\n    </div>\n  </form>\n  <p></p>\n  <b>2. Il sistema mi dice che la password non \u00E8 corretta.</b>\n  <p>\n    E' molto probabile che ci sia stato un difetto di digitazione. Per favore controlla bene che non vi siano spazi non\n    richiesti e che la password rispetti perfettamente le maiuscole e minuscole. Nel caso in cui la digitazione fosse\n    corretta, verifica che la data del tuo abbonamento non sia scaduta.\n  </p>\n  <p></p>\n  <b>3. Il sistema mi dice che non pu\u00F2 accettare connessioni dal mio indirizzo IP</b>\n  <p>\n    Il tuo abbonamento \u00E8 stato vincolato ad un indirizzo IP (indirizzo dal quale ti colleghi). Capita sovente che\n    questi indirizzi siano cambiati da parte del reparto IT per questioni di sicurezza informatica.\n    Per risolvere il problema, contattate il reparto IT e fatevi dire qual'\u00E8 il nuovo indirizzo IP e comunicatelo ad\n    ARS Edizioni Informatiche.\n  </p>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <div fxLayout=\"row\" fxLayoutAlign=\"end\" fxFill>\n    <button mat-stroked-button [mat-dialog-close]=\"true\" >Chiudi</button>\n  </div>\n</mat-dialog-actions>", styles: [".fill,.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.fill{min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important;line-height:1.2!important}.smaller{font-size:smaller!important;line-height:1.2!important}.small{font-size:small!important;line-height:1.2!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:1.2!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer .title-container-with-loader,.drawer-small .title-container,.drawer-small .title-container-with-loader{padding-right:5px;padding-bottom:20px;padding-left:0}.drawer .title-container,.drawer-small .title-container{padding-top:20px}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding-top:14px}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}.dialog-content{padding:0 24px 24px!important}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i1$2.FxLayoutDirective, selector: "    [fxLayout],    [fxLayout.xs],    [fxLayout.sm],    [fxLayout.md],    [fxLayout.lg],    [fxLayout.xl],    [fxLayout.lt-sm],    [fxLayout.lt-md],    [fxLayout.lt-lg],    [fxLayout.lt-xl],    [fxLayout.gt-xs],    [fxLayout.gt-sm],    [fxLayout.gt-md],    [fxLayout.gt-lg]  ", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i1$2.FxLayoutAlignDirective, selector: "    [fxLayoutAlign],    [fxLayoutAlign.xs],    [fxLayoutAlign.sm],    [fxLayoutAlign.md],    [fxLayoutAlign.lg],    [fxLayoutAlign.xl],    [fxLayoutAlign.lt-sm],    [fxLayoutAlign.lt-md],    [fxLayoutAlign.lt-lg],    [fxLayoutAlign.lt-xl],    [fxLayoutAlign.gt-xs],    [fxLayoutAlign.gt-sm],    [fxLayoutAlign.gt-md],    [fxLayoutAlign.gt-lg]  ", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i1$2.FxFlexFillDirective, selector: "    [fxFlexFill],    [fxFill],    [fxFlexFill.xs],    [fxFlexFill.sm],    [fxFlexFill.md],    [fxFlexFill.lg],    [fxFlexFill.xl],    [fxFlexFill.lt-sm],    [fxFlexFill.lt-md],    [fxFlexFill.lt-lg],    [fxFlexFill.lt-xl],    [fxFlexFill.gt-xs],    [fxFlexFill.gt-sm],    [fxFlexFill.gt-md],    [fxFlexFill.gt-lg]  ", inputs: ["fxFlexFill", "fxFill", "fxFlexFill.xs", "fxFlexFill.sm", "fxFlexFill.md", "fxFlexFill.lg", "fxFlexFill.xl", "fxFlexFill.lt-sm", "fxFlexFill.lt-md", "fxFlexFill.lt-lg", "fxFlexFill.lt-xl", "fxFlexFill.gt-xs", "fxFlexFill.gt-sm", "fxFlexFill.gt-md", "fxFlexFill.gt-lg"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: RecoverPasswordDialogComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         MatDialogTitle,
                         MatDialogContent,
-                        FormsModule,
+                        FormField,
                         MatFormFieldModule,
                         MatInputModule,
                         MatButtonModule,
                         MatDialogActions,
                         FlexLayoutModule,
                         MatDialogClose,
-                    ], template: "<div class=\"dialog-info\">\r\n  @if (f.form.invalid) {\r\n  <span class=\"dialog-info-error\">Ci sono ancora dei campi obbligatori (*) non compilati.</span>\r\n  } @else {\r\n  <span class=\"dialog-info-ok\">Tutti i campi obbligatori (*) sono compilati.</span>\r\n  }\r\n</div>\r\n<div mat-dialog-title>Per quale ragione non sei in grado di effettuare l'accesso?</div>\r\n<mat-dialog-content class=\"dialog-content\">\r\n\r\n  <b>1. Ho dimenticato la password</b>\r\n  <p>\r\n    Puoi recuperarla facilmente inserendo l'email a cui la password \u00E8 collegata. Non \u00E8 possibile recuperare password\r\n    aziendali (non collegate ad un email).</p>\r\n  <form name=\"form\" #f=\"ngForm\" (keyup.Enter)=\"!f.form.invalid ? ok() : null\" novalidate>\r\n\r\n    <mat-form-field style=\"width:100%\" [appearance]=\"dialogData().appearance\">\r\n      <mat-label>Email con cui ti sei registrato</mat-label>\r\n      <input type=\"email\" matInput name=\"email\" #email=\"ngModel\" [(ngModel)]=\"item.email\" required email\r\n        maxlength=\"200\" />\r\n      @if (email.invalid) {\r\n      <mat-error>Email non valida.</mat-error>\r\n      }\r\n    </mat-form-field>\r\n\r\n    <div style=\"margin-top:20px; margin-bottom:20px;\">\r\n      <button type=\"button\" mat-flat-button (click)=\"ok()\"  [disabled]=\"f.form.invalid\"\r\n        aria-label=\"Recupera password\">Recupera password</button>\r\n    </div>\r\n  </form>\r\n  <p></p>\r\n  <b>2. Il sistema mi dice che la password non \u00E8 corretta.</b>\r\n  <p>\r\n    E' molto probabile che ci sia stato un difetto di digitazione. Per favore controlla bene che non vi siano spazi non\r\n    richiesti e che la password rispetti perfettamente le maiuscole e minuscole. Nel caso in cui la digitazione fosse\r\n    corretta, verifica che la data del tuo abbonamento non sia scaduta.\r\n  </p>\r\n  <p></p>\r\n  <b>3. Il sistema mi dice che non pu\u00F2 accettare connessioni dal mio indirizzo IP</b>\r\n  <p>\r\n    Il tuo abbonamento \u00E8 stato vincolato ad un indirizzo IP (indirizzo dal quale ti colleghi). Capita sovente che\r\n    questi indirizzi siano cambiati da parte del reparto IT per questioni di sicurezza informatica.\r\n    Per risolvere il problema, contattate il reparto IT e fatevi dire qual'\u00E8 il nuovo indirizzo IP e comunicatelo ad\r\n    ARS Edizioni Informatiche.\r\n  </p>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <div fxLayout=\"row\" fxLayoutAlign=\"end\" fxFill>\r\n    <button mat-stroked-button [mat-dialog-close]=\"true\" >Chiudi</button>\r\n  </div>\r\n</mat-dialog-actions>", styles: [".fill,.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.fill{min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important;line-height:1.2!important}.smaller{font-size:smaller!important;line-height:1.2!important}.small{font-size:small!important;line-height:1.2!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:1.2!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer .title-container-with-loader,.drawer-small .title-container,.drawer-small .title-container-with-loader{padding-right:5px;padding-bottom:20px;padding-left:0}.drawer .title-container,.drawer-small .title-container{padding-top:20px}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding-top:14px}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}.dialog-content{padding:0 24px 24px!important}\n"] }]
+                    ], template: "<div class=\"dialog-info\">\n  @if (form().invalid()) {\n  <span class=\"dialog-info-error\">Ci sono ancora dei campi obbligatori (*) non compilati.</span>\n  } @else {\n  <span class=\"dialog-info-ok\">Tutti i campi obbligatori (*) sono compilati.</span>\n  }\n</div>\n<div mat-dialog-title>Per quale ragione non sei in grado di effettuare l'accesso?</div>\n<mat-dialog-content class=\"dialog-content\">\n\n  <b>1. Ho dimenticato la password</b>\n  <p>\n    Puoi recuperarla facilmente inserendo l'email a cui la password \u00E8 collegata. Non \u00E8 possibile recuperare password\n    aziendali (non collegate ad un email).</p>\n  <form (keyup.enter)=\"!form().invalid() ? ok() : undefined\" novalidate>\n\n    <mat-form-field style=\"width:100%\" [appearance]=\"dialogData().appearance\">\n      <mat-label>Email con cui ti sei registrato</mat-label>\n      <input type=\"email\" matInput [formField]=\"form.email\" />\n      @if (form.email().invalid()) {\n      <mat-error>Email non valida.</mat-error>\n      }\n    </mat-form-field>\n\n    <div style=\"margin-top:20px; margin-bottom:20px;\">\n      <button type=\"button\" mat-flat-button (click)=\"ok()\"  [disabled]=\"form().invalid()\"\n        aria-label=\"Recupera password\">Recupera password</button>\n    </div>\n  </form>\n  <p></p>\n  <b>2. Il sistema mi dice che la password non \u00E8 corretta.</b>\n  <p>\n    E' molto probabile che ci sia stato un difetto di digitazione. Per favore controlla bene che non vi siano spazi non\n    richiesti e che la password rispetti perfettamente le maiuscole e minuscole. Nel caso in cui la digitazione fosse\n    corretta, verifica che la data del tuo abbonamento non sia scaduta.\n  </p>\n  <p></p>\n  <b>3. Il sistema mi dice che non pu\u00F2 accettare connessioni dal mio indirizzo IP</b>\n  <p>\n    Il tuo abbonamento \u00E8 stato vincolato ad un indirizzo IP (indirizzo dal quale ti colleghi). Capita sovente che\n    questi indirizzi siano cambiati da parte del reparto IT per questioni di sicurezza informatica.\n    Per risolvere il problema, contattate il reparto IT e fatevi dire qual'\u00E8 il nuovo indirizzo IP e comunicatelo ad\n    ARS Edizioni Informatiche.\n  </p>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <div fxLayout=\"row\" fxLayoutAlign=\"end\" fxFill>\n    <button mat-stroked-button [mat-dialog-close]=\"true\" >Chiudi</button>\n  </div>\n</mat-dialog-actions>", styles: [".fill,.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.fill{min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important;line-height:1.2!important}.smaller{font-size:smaller!important;line-height:1.2!important}.small{font-size:small!important;line-height:1.2!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:1.2!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer .title-container-with-loader,.drawer-small .title-container,.drawer-small .title-container-with-loader{padding-right:5px;padding-bottom:20px;padding-left:0}.drawer .title-container,.drawer-small .title-container{padding-top:20px}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding-top:14px}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}.dialog-content{padding:0 24px 24px!important}\n"] }]
         }], propDecorators: { done: [{ type: i0.Output, args: ["done"] }] } });
 
 class PromptOtpDialogComponent {
     constructor() {
-        this.f = viewChild.required('f', /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "f" }] : /* istanbul ignore next */ []));
         this.done = output();
         this.dialogService = inject(DialogService);
         this.dialogData = signal((() => {
@@ -475,25 +530,37 @@ class PromptOtpDialogComponent {
             };
         })(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dialogData" }] : /* istanbul ignore next */ []));
+        /** Model backing the signal form. `value` holds the 6-digit OTP code. */
+        this.model = signal({ value: '' }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
+        /**
+         * Signal form for the OTP code. The code is always required here; the
+         * "complete 6 digits" rule comes from the OtpInputComponent validator,
+         * honoured through the ControlValueAccessor interop.
+         */
+        this.form = form(this.model, p => {
+            required(p.value);
+        });
     }
     /**
      * Validates the form and emits the OTP result, or shows an error if validation fails.
      */
     ok() {
-        if (this.f().form.invalid) {
+        if (this.form().invalid()) {
+            this.form().markAsTouched();
             this.dialogService.error('Ci sono degli errori da correggere.');
             return;
         }
-        this.done.emit({ value: this.value });
+        this.done.emit({ value: this.form.value().value() });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: PromptOtpDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: PromptOtpDialogComponent, isStandalone: true, selector: "ng-component", outputs: { done: "done" }, viewQueries: [{ propertyName: "f", first: true, predicate: ["f"], descendants: true, isSignal: true }], ngImport: i0, template: "<div mat-dialog-title [innerHTML]=\"dialogData().title | safeHtml\"></div>\r\n<mat-dialog-content class=\"dialog-content\">\r\n  @if (dialogData().description) {\r\n  <div [innerHtml]=\"dialogData().description | safeHtml\" style=\"padding-bottom: 20px;\"></div>\r\n  }\r\n  <form name=\"form\" #f=\"ngForm\" novalidate>\r\n    <div fxLayout=\"column\" fxLayoutGap=\"32px\" fxFill>\r\n      <div fxFlex=\"*\" fxLayout=\"column\" fxFill>\r\n        <otp-input name=\"otp\" [(ngModel)]=\"value\" required></otp-input>\r\n      </div>\r\n      <br>\r\n    </div>\r\n  </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <div fxLayout=\"row\" fxLayoutAlign=\"end\" fxFill>\r\n    <button mat-flat-button [disabled]=\"f.form.invalid\" (click)=\"ok()\">{{dialogData().okCaption}}</button>\r\n    <button mat-stroked-button [mat-dialog-close]=\"true\">{{dialogData().cancelCaption}}</button>\r\n  </div>\r\n</mat-dialog-actions>", styles: [".fill,.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.fill{min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important;line-height:1.2!important}.smaller{font-size:smaller!important;line-height:1.2!important}.small{font-size:small!important;line-height:1.2!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:1.2!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer .title-container-with-loader,.drawer-small .title-container,.drawer-small .title-container-with-loader{padding-right:5px;padding-bottom:20px;padding-left:0}.drawer .title-container,.drawer-small .title-container{padding-top:20px}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding-top:14px}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}.dialog-content{padding:0 24px 24px!important}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i2$1.FxLayoutDirective, selector: "    [fxLayout],    [fxLayout.xs],    [fxLayout.sm],    [fxLayout.md],    [fxLayout.lg],    [fxLayout.xl],    [fxLayout.lt-sm],    [fxLayout.lt-md],    [fxLayout.lt-lg],    [fxLayout.lt-xl],    [fxLayout.gt-xs],    [fxLayout.gt-sm],    [fxLayout.gt-md],    [fxLayout.gt-lg]  ", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$1.FxFlexDirective, selector: "    [fxFlex],    [fxFlex.xs],    [fxFlex.sm],    [fxFlex.md],    [fxFlex.lg],    [fxFlex.xl],    [fxFlex.lt-sm],    [fxFlex.lt-md],    [fxFlex.lt-lg],    [fxFlex.lt-xl],    [fxFlex.gt-xs],    [fxFlex.gt-sm],    [fxFlex.gt-md],    [fxFlex.gt-lg]  ", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i2$1.FxLayoutAlignDirective, selector: "    [fxLayoutAlign],    [fxLayoutAlign.xs],    [fxLayoutAlign.sm],    [fxLayoutAlign.md],    [fxLayoutAlign.lg],    [fxLayoutAlign.xl],    [fxLayoutAlign.lt-sm],    [fxLayoutAlign.lt-md],    [fxLayoutAlign.lt-lg],    [fxLayoutAlign.lt-xl],    [fxLayoutAlign.gt-xs],    [fxLayoutAlign.gt-sm],    [fxLayoutAlign.gt-md],    [fxLayoutAlign.gt-lg]  ", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2$1.FxLayoutGapDirective, selector: "    [fxLayoutGap],    [fxLayoutGap.xs],    [fxLayoutGap.sm],    [fxLayoutGap.md],    [fxLayoutGap.lg],    [fxLayoutGap.xl],    [fxLayoutGap.lt-sm],    [fxLayoutGap.lt-md],    [fxLayoutGap.lt-lg],    [fxLayoutGap.lt-xl],    [fxLayoutGap.gt-xs],    [fxLayoutGap.gt-sm],    [fxLayoutGap.gt-md],    [fxLayoutGap.gt-lg]  ", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$1.FxFlexFillDirective, selector: "    [fxFlexFill],    [fxFill],    [fxFlexFill.xs],    [fxFlexFill.sm],    [fxFlexFill.md],    [fxFlexFill.lg],    [fxFlexFill.xl],    [fxFlexFill.lt-sm],    [fxFlexFill.lt-md],    [fxFlexFill.lt-lg],    [fxFlexFill.lt-xl],    [fxFlexFill.gt-xs],    [fxFlexFill.gt-sm],    [fxFlexFill.gt-md],    [fxFlexFill.gt-lg]  ", inputs: ["fxFlexFill", "fxFill", "fxFlexFill.xs", "fxFlexFill.sm", "fxFlexFill.md", "fxFlexFill.lg", "fxFlexFill.xl", "fxFlexFill.lt-sm", "fxFlexFill.lt-md", "fxFlexFill.lt-lg", "fxFlexFill.lt-xl", "fxFlexFill.gt-xs", "fxFlexFill.gt-sm", "fxFlexFill.gt-md", "fxFlexFill.gt-lg"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i7.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: OtpInputComponent, selector: "otp-input" }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: PromptOtpDialogComponent, isStandalone: true, selector: "ng-component", outputs: { done: "done" }, ngImport: i0, template: "<div mat-dialog-title [innerHTML]=\"dialogData().title | safeHtml\"></div>\r\n<mat-dialog-content class=\"dialog-content\">\r\n  @if (dialogData().description) {\r\n  <div [innerHtml]=\"dialogData().description | safeHtml\" style=\"padding-bottom: 20px;\"></div>\r\n  }\r\n  <form novalidate>\r\n    <div fxLayout=\"column\" fxLayoutGap=\"32px\" fxFill>\r\n      <div fxFlex=\"*\" fxLayout=\"column\" fxFill>\r\n        <otp-input [formField]=\"form.value\"></otp-input>\r\n      </div>\r\n      <br>\r\n    </div>\r\n  </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <div fxLayout=\"row\" fxLayoutAlign=\"end\" fxFill>\r\n    <button mat-flat-button [disabled]=\"form().invalid()\" (click)=\"ok()\">{{dialogData().okCaption}}</button>\r\n    <button mat-stroked-button [mat-dialog-close]=\"true\">{{dialogData().cancelCaption}}</button>\r\n  </div>\r\n</mat-dialog-actions>\r\n", styles: [".fill,.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.fill{min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important;line-height:1.2!important}.smaller{font-size:smaller!important;line-height:1.2!important}.small{font-size:small!important;line-height:1.2!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:1.2!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer .title-container-with-loader,.drawer-small .title-container,.drawer-small .title-container-with-loader{padding-right:5px;padding-bottom:20px;padding-left:0}.drawer .title-container,.drawer-small .title-container{padding-top:20px}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding-top:14px}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}.dialog-content{padding:0 24px 24px!important}\n"], dependencies: [{ kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i1$2.FxLayoutDirective, selector: "    [fxLayout],    [fxLayout.xs],    [fxLayout.sm],    [fxLayout.md],    [fxLayout.lg],    [fxLayout.xl],    [fxLayout.lt-sm],    [fxLayout.lt-md],    [fxLayout.lt-lg],    [fxLayout.lt-xl],    [fxLayout.gt-xs],    [fxLayout.gt-sm],    [fxLayout.gt-md],    [fxLayout.gt-lg]  ", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i1$2.FxFlexDirective, selector: "    [fxFlex],    [fxFlex.xs],    [fxFlex.sm],    [fxFlex.md],    [fxFlex.lg],    [fxFlex.xl],    [fxFlex.lt-sm],    [fxFlex.lt-md],    [fxFlex.lt-lg],    [fxFlex.lt-xl],    [fxFlex.gt-xs],    [fxFlex.gt-sm],    [fxFlex.gt-md],    [fxFlex.gt-lg]  ", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i1$2.FxLayoutAlignDirective, selector: "    [fxLayoutAlign],    [fxLayoutAlign.xs],    [fxLayoutAlign.sm],    [fxLayoutAlign.md],    [fxLayoutAlign.lg],    [fxLayoutAlign.xl],    [fxLayoutAlign.lt-sm],    [fxLayoutAlign.lt-md],    [fxLayoutAlign.lt-lg],    [fxLayoutAlign.lt-xl],    [fxLayoutAlign.gt-xs],    [fxLayoutAlign.gt-sm],    [fxLayoutAlign.gt-md],    [fxLayoutAlign.gt-lg]  ", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i1$2.FxLayoutGapDirective, selector: "    [fxLayoutGap],    [fxLayoutGap.xs],    [fxLayoutGap.sm],    [fxLayoutGap.md],    [fxLayoutGap.lg],    [fxLayoutGap.xl],    [fxLayoutGap.lt-sm],    [fxLayoutGap.lt-md],    [fxLayoutGap.lt-lg],    [fxLayoutGap.lt-xl],    [fxLayoutGap.gt-xs],    [fxLayoutGap.gt-sm],    [fxLayoutGap.gt-md],    [fxLayoutGap.gt-lg]  ", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i1$2.FxFlexFillDirective, selector: "    [fxFlexFill],    [fxFill],    [fxFlexFill.xs],    [fxFlexFill.sm],    [fxFlexFill.md],    [fxFlexFill.lg],    [fxFlexFill.xl],    [fxFlexFill.lt-sm],    [fxFlexFill.lt-md],    [fxFlexFill.lt-lg],    [fxFlexFill.lt-xl],    [fxFlexFill.gt-xs],    [fxFlexFill.gt-sm],    [fxFlexFill.gt-md],    [fxFlexFill.gt-lg]  ", inputs: ["fxFlexFill", "fxFill", "fxFlexFill.xs", "fxFlexFill.sm", "fxFlexFill.md", "fxFlexFill.lg", "fxFlexFill.xl", "fxFlexFill.lt-sm", "fxFlexFill.lt-md", "fxFlexFill.lt-lg", "fxFlexFill.lt-xl", "fxFlexFill.gt-xs", "fxFlexFill.gt-sm", "fxFlexFill.gt-md", "fxFlexFill.gt-lg"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: OtpInputComponent, selector: "otp-input" }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: PromptOtpDialogComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatDialogTitle, MatDialogContent, FormsModule, FlexLayoutModule, MatButtonModule, MatIconModule,
-                        MatDialogActions, MatDialogClose, SafeHtmlPipe, OtpInputComponent], template: "<div mat-dialog-title [innerHTML]=\"dialogData().title | safeHtml\"></div>\r\n<mat-dialog-content class=\"dialog-content\">\r\n  @if (dialogData().description) {\r\n  <div [innerHtml]=\"dialogData().description | safeHtml\" style=\"padding-bottom: 20px;\"></div>\r\n  }\r\n  <form name=\"form\" #f=\"ngForm\" novalidate>\r\n    <div fxLayout=\"column\" fxLayoutGap=\"32px\" fxFill>\r\n      <div fxFlex=\"*\" fxLayout=\"column\" fxFill>\r\n        <otp-input name=\"otp\" [(ngModel)]=\"value\" required></otp-input>\r\n      </div>\r\n      <br>\r\n    </div>\r\n  </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <div fxLayout=\"row\" fxLayoutAlign=\"end\" fxFill>\r\n    <button mat-flat-button [disabled]=\"f.form.invalid\" (click)=\"ok()\">{{dialogData().okCaption}}</button>\r\n    <button mat-stroked-button [mat-dialog-close]=\"true\">{{dialogData().cancelCaption}}</button>\r\n  </div>\r\n</mat-dialog-actions>", styles: [".fill,.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.fill{min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important;line-height:1.2!important}.smaller{font-size:smaller!important;line-height:1.2!important}.small{font-size:small!important;line-height:1.2!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:1.2!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer .title-container-with-loader,.drawer-small .title-container,.drawer-small .title-container-with-loader{padding-right:5px;padding-bottom:20px;padding-left:0}.drawer .title-container,.drawer-small .title-container{padding-top:20px}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding-top:14px}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}.dialog-content{padding:0 24px 24px!important}\n"] }]
-        }], propDecorators: { f: [{ type: i0.ViewChild, args: ['f', { isSignal: true }] }], done: [{ type: i0.Output, args: ["done"] }] } });
+            args: [{ standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatDialogTitle, MatDialogContent, FormField, FlexLayoutModule, MatButtonModule, MatIconModule,
+                        MatDialogActions, MatDialogClose, SafeHtmlPipe, OtpInputComponent], template: "<div mat-dialog-title [innerHTML]=\"dialogData().title | safeHtml\"></div>\r\n<mat-dialog-content class=\"dialog-content\">\r\n  @if (dialogData().description) {\r\n  <div [innerHtml]=\"dialogData().description | safeHtml\" style=\"padding-bottom: 20px;\"></div>\r\n  }\r\n  <form novalidate>\r\n    <div fxLayout=\"column\" fxLayoutGap=\"32px\" fxFill>\r\n      <div fxFlex=\"*\" fxLayout=\"column\" fxFill>\r\n        <otp-input [formField]=\"form.value\"></otp-input>\r\n      </div>\r\n      <br>\r\n    </div>\r\n  </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <div fxLayout=\"row\" fxLayoutAlign=\"end\" fxFill>\r\n    <button mat-flat-button [disabled]=\"form().invalid()\" (click)=\"ok()\">{{dialogData().okCaption}}</button>\r\n    <button mat-stroked-button [mat-dialog-close]=\"true\">{{dialogData().cancelCaption}}</button>\r\n  </div>\r\n</mat-dialog-actions>\r\n", styles: [".fill,.wide{min-width:100%!important;max-width:100%!important;width:100%!important}.dialog-info{font-size:x-small;font-weight:700;text-align:right;padding:10px}.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #388E3C)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #a80710)}.dialog-header{padding-bottom:20px}.dialog-toolbar{padding:0 5px 0 24px;height:48px;min-height:48px}.dialog-close{margin-right:5px;margin-top:0}.dialog-menu{margin-left:10px;margin-top:10px}.dialog-title{padding:0 24px}.section-title{font-size:large;font-weight:600;padding-top:10px;padding-bottom:8px}.center{text-align:center}.fill{min-height:100%!important;max-height:100%!important;height:100%!important}.scroll-auto{overflow:auto;height:100%}.scroll-hidden{overflow:hidden;height:100%}b{font-weight:700}.large{font-size:large!important;line-height:1.2!important}.smaller{font-size:smaller!important;line-height:1.2!important}.small{font-size:small!important;line-height:1.2!important}.small-icon-button{width:1.5rem!important;height:1.5rem!important;padding:0!important;display:inline-flex!important;align-items:center;justify-content:center}.small-icon-button .mat-mdc-button-touch-target{width:1.5rem!important;height:1.5rem!important}.x-small{font-size:x-small!important;line-height:1.2!important}.bold{font-weight:700}.uppercase{text-transform:uppercase!important}.lowercase{text-transform:lowercase!important}.truncated{min-width:0;max-width:100%}@supports (-webkit-line-clamp: 2){.truncated{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.truncated span,.truncated div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@supports (-webkit-line-clamp: 2){.truncated span,.truncated div{overflow:hidden;text-overflow:ellipsis;white-space:initial;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}.clipped{min-width:0;max-width:100%}.clipped span,.clipped div{white-space:nowrap;overflow:hidden;text-overflow:clip}.accent{color:var(--ars-color-accent, #7894ae)!important}.primary{color:var(--ars-color-primary, #00a293)!important}.secondary{color:var(--ars-color-secondary, #4a635f)!important}.error{color:var(--ars-color-error, #ff5449)!important}.success{color:var(--ars-color-ok, #388E3C)!important}.warning{color:var(--ars-color-warning, #FFC107)!important}.text{color:var(--ars-color-text, #191c1b)!important}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;background-color:var(--ars-color-overlay, rgba(255, 255, 255, .75))}.drawer-content{padding-top:10px}.drawer .title-container,.drawer .title-container-with-loader,.drawer-small .title-container,.drawer-small .title-container-with-loader{padding-right:5px;padding-bottom:20px;padding-left:0}.drawer .title-container,.drawer-small .title-container{padding-top:20px}.drawer .title-container-with-loader,.drawer-small .title-container-with-loader{padding-top:14px}.drawer .title,.drawer-small .title{font-size:19.2px!important;font-weight:600;padding-left:15px;min-width:150px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.drawer .accordion-panel,.drawer-small .accordion-panel{background-color:transparent!important}.drawer .accordion-header,.drawer-small .accordion-header{padding-left:10px;padding-right:10px;border-radius:var(--mat-expansion-container-shape)}.drawer .mat-expansion-panel-body,.drawer-small .mat-expansion-panel-body{padding-left:10px!important;padding-right:10px!important;padding-bottom:20px!important}@media screen and (min-width:0px)and (max-width:430px){.drawer,.drawer-small{border-radius:0!important;min-width:100%!important;max-width:100%!important}}@media screen and (min-width:431px){.drawer{min-width:420px!important;max-width:420px!important}.drawer .title{min-width:200px}.drawer .mat-expansion-panel-body{padding-left:15px!important;padding-right:15px!important;padding-bottom:20px!important}.drawer-small{min-width:360px!important;max-width:360px!important}}.drawer-with-loader{padding-top:0!important}.drawer-transparent{background-color:transparent}.fade-in{animation:fadein .5s linear}@keyframes fadein{0%{opacity:0}to{opacity:1}}.bright{filter:brightness(.7)!important}@media(prefers-color-scheme:dark){.dialog-info-green,.dialog-info-ok{color:var(--ars-color-ok, #4CAF50)}.dialog-info-red,.dialog-info-error{color:var(--mat-form-field-error-text-color, #ff5449)}b,.bold{font-weight:600}.bright{filter:brightness(1.5)!important}}.dialog-content{padding:0 24px 24px!important}\n"] }]
+        }], propDecorators: { done: [{ type: i0.Output, args: ["done"] }] } });
 
 /*
  * Public API Surface of @arsedizioni/ars-utils/ui.dialogs.auth