@arsedizioni/ars-utils 22.5.36 → 22.5.38

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

@@ -3,7 +3,7 @@ import { viewChildren, computed, signal, forwardRef, ChangeDetectionStrategy, Co
 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 { SystemUtils, DtoUtils, SafeHtmlPipe } from '@arsedizioni/ars-utils/core';
 import { MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose, MatDialogRef } from '@angular/material/dialog';
 import * as i1$2 from '@arsedizioni/ars-utils/ui';
 import { FlexLayoutModule, PromptDialogType } from '@arsedizioni/ars-utils/ui';
@@ -254,6 +254,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
             args: [{ selector: 'password-strength', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatTooltipModule], template: "<div class=\"wide x-small bold\" style=\"white-space: nowrap; padding-top:4px\" [matTooltip]=\"strength().suggestions?.join('\\n ')\">\r\n    <span [class]=\"scoreClass()\">{{strength().label}}</span>\r\n</div>", styles: [".score-2{color:#f44336!important;font-weight:700}.score-3{color:#ff9800!important;font-weight:700}.score-4{color:#ffc107!important;font-weight:700}.score-5{color:#8bc34a!important;font-weight:700}.score-6{color:#4caf50!important;font-weight:700}.x-small{font-size:x-small}\n"] }]
         }], propDecorators: { password: [{ type: i0.Input, args: [{ isSignal: true, alias: "password", required: false }] }] } });
 
+/** Neutral form model: it declares every field the form owns and its empty value. */
+const _EMPTY_ITEM$3 = { user: '', password: '', rememberMe: false, code: '' };
 class CredentialsDialogComponent {
     constructor() {
         /** Error text of a field: the message declared in the schema, or the shared fallback. */
@@ -283,12 +285,7 @@ class CredentialsDialogComponent {
         })(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dialogData" }] : /* istanbul ignore next */ []));
         /** 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 */
+        this.model = signal(this.toForm(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
         /**
          * Signal form for the credentials. Validators follow the active mode: the user
@@ -310,6 +307,23 @@ class CredentialsDialogComponent {
         this.showPassword = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "showPassword" }] : /* istanbul ignore next */ []));
     }
+    /**
+     * Builds the form model from the dialog data, which may carry the account name to
+     * pre-fill.
+     * @returns A fresh form model.
+     */
+    toForm() {
+        return DtoUtils.toForm(_EMPTY_ITEM$3, { user: this.dialogData().user });
+    }
+    /**
+     * Builds the dialog result from the current form model. The fields the active mode
+     * does not use are left empty by the template and dropped here, so they travel as
+     * absent instead of as empty strings.
+     * @returns The credentials to emit through `done` or `recoveringPassword`.
+     */
+    toPayload() {
+        return DtoUtils.toPayload(this.model());
+    }
     /**
      * Switches the input mode of the dialog at runtime (e.g. from login to OTP).
      * Intended to be called from outside via the dialog component reference.
@@ -327,14 +341,14 @@ class CredentialsDialogComponent {
      * Emits the current form result and closes the dialog.
      */
     ok() {
-        this.done.emit(this.model());
+        this.done.emit(this.toPayload());
     }
     /**
      * 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.model());
+        this.recoveringPassword.emit(this.toPayload());
         const url = this.dialogData().recoverPasswordUrl;
         if (url) {
             window.open(url, '_blank');
@@ -363,7 +377,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                     ], 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 [formRoot]=\"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>{{ getErrorMessage(form.user().errors()) }}</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>{{ getErrorMessage(form.user().errors()) }}</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>{{ getErrorMessage(form.password().errors()) }}</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"] }] } });
 
+/** Neutral form model: it declares every field the form owns and its empty value. */
+const _EMPTY_ITEM$2 = {
+    userId: null,
+    userEmail: '',
+    oldPassword: '',
+    password: '',
+    password2: '',
+    code: '',
+};
 class ResetPasswordDialogComponent {
+    /**
+     * Builds the form model from the dialog data, which identifies the account either by
+     * id or by email depending on the mode.
+     * @returns A fresh form model.
+     */
+    toForm() {
+        const data = this.dialogData();
+        return DtoUtils.toForm(_EMPTY_ITEM$2, { userId: data.userId, userEmail: data.userEmail });
+    }
+    /**
+     * Builds the dialog result from the current form model. The fields the active mode
+     * does not use are left empty by the template and dropped here, so they travel as
+     * absent instead of as empty strings.
+     * @returns The reset data to emit through `done`.
+     */
+    toPayload() {
+        return DtoUtils.toPayload(this.model());
+    }
     constructor() {
         /** Error text of a field: the message declared in the schema, or the shared fallback. */
         this.getErrorMessage = SignalsUtils.getFieldErrorMessage;
@@ -378,13 +419,7 @@ class ResetPasswordDialogComponent {
         })(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dialogData" }] : /* istanbul ignore next */ []));
         /** Model backing the signal form. */
-        this.model = signal({
-            userEmail: '',
-            oldPassword: '',
-            password: '',
-            password2: '',
-            code: '',
-        }, /* @ts-ignore */
+        this.model = signal(this.toForm(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
         /**
          * Signal form for the password reset. Validators follow the active mode:
@@ -436,18 +471,12 @@ class ResetPasswordDialogComponent {
             this.dialogService.error('Email utente non specificata.');
             return;
         }
-        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.model());
+        this.done.emit(this.toPayload());
     }
     /**
      * Generates a random password and populates both password fields with it.
@@ -477,6 +506,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                     ], 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 [formRoot]=\"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>{{ getErrorMessage(form.userEmail().errors()) }}</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>{{ getErrorMessage(form.oldPassword().errors()) }}</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>{{ getErrorMessage(form.password().errors()) }}</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>{{ getErrorMessage(form.password2().errors()) }}</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"] }] } });
 
+/** Neutral form model: it declares every field the form owns and its empty value. */
+const _EMPTY_ITEM$1 = { email: '', recaptcha: false };
 class RecoverPasswordDialogComponent {
     constructor() {
         /** Error text of a field: the message declared in the schema, or the shared fallback. */
@@ -490,10 +521,7 @@ class RecoverPasswordDialogComponent {
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "dialogData" }] : /* istanbul ignore next */ []));
         /** Model backing the signal form. */
-        this.model = signal({
-            email: '',
-            recaptcha: false,
-        }, /* @ts-ignore */
+        this.model = signal(this.toForm(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
         /**
          * Signal form for the recovery request: the email is required and must be valid.
@@ -505,11 +533,27 @@ class RecoverPasswordDialogComponent {
             maxLength(p.email, 200);
         });
     }
+    /**
+     * Builds the form model. The dialog is always opened empty, so the model is the
+     * neutral one.
+     * @returns A fresh form model.
+     */
+    toForm() {
+        return DtoUtils.toForm(_EMPTY_ITEM$1);
+    }
+    /**
+     * Builds the dialog result from the current form model, dropping the email when it
+     * was left empty.
+     * @returns The result to emit through `done`.
+     */
+    toPayload() {
+        return DtoUtils.toPayload(this.model());
+    }
     /**
      * Emits the current form result to trigger the password-recovery flow.
      */
     ok() {
-        this.done.emit(this.model());
+        this.done.emit(this.toPayload());
     }
     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\">\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 [formRoot]=\"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>{{ getErrorMessage(form.email().errors()) }}</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: "directive", type: FormRoot, selector: "form[formRoot]", inputs: ["formRoot"] }, { 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 }); }
@@ -529,6 +573,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImpor
                     ], 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 [formRoot]=\"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>{{ getErrorMessage(form.email().errors()) }}</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"] }] } });
 
+/** Neutral form model: it declares every field the form owns and its empty value. */
+const _EMPTY_ITEM = { value: '' };
 class PromptOtpDialogComponent {
     constructor() {
         this.done = output();
@@ -546,7 +592,7 @@ 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 */
+        this.model = signal(this.toForm(), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
         /**
          * Signal form for the OTP code. The code is always required here; the
@@ -558,6 +604,21 @@ class PromptOtpDialogComponent {
             notEmpty(p.value);
         });
     }
+    /**
+     * Builds the form model. The dialog has no incoming value, so the model is the
+     * neutral one.
+     * @returns A fresh form model.
+     */
+    toForm() {
+        return DtoUtils.toForm(_EMPTY_ITEM);
+    }
+    /**
+     * Builds the dialog result from the current form model, dropping the empty code.
+     * @returns The result carrying the entered OTP code.
+     */
+    toPayload() {
+        return DtoUtils.toPayload(this.model());
+    }
     /**
      * Validates the form and emits the OTP result, or shows an error if validation fails.
      */
@@ -567,7 +628,7 @@ class PromptOtpDialogComponent {
             this.dialogService.error('Ci sono degli errori da correggere.');
             return;
         }
-        this.done.emit({ value: this.form.value().value() });
+        this.done.emit(this.toPayload());
     }
     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" }, 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 [formRoot]=\"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: "directive", type: FormRoot, selector: "form[formRoot]", inputs: ["formRoot"] }, { 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 }); }