@firestitch/2fa 13.1.5 → 13.1.7

package/fesm2015/firestitch-2fa.mjs

@@ -62,15 +62,18 @@ class CodeInputComponent {
             this.codeLength = 6;
         }
     }
+    codeComplete(code) {
+        this.codeChanged.emit(code);
+    }
     focus() {
         this.codeInput.focusOnField(0);
     }
 }
 CodeInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CodeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CodeInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CodeInputComponent, selector: "app-code-input", inputs: { codeLength: "codeLength", code: "code" }, outputs: { codeCompleted: "codeCompleted", codeChanged: "codeChanged" }, viewQueries: [{ propertyName: "codeInput", first: true, predicate: FsCodeInputComponent, descendants: true }], ngImport: i0, template: "<fs-code-input\n  [codeLength]=\"codeLength\"\n  [ngModel]=\"code\"\n  name=\"code\"\n  [isPrevFocusableAfterClearing]=\"false\"\n  (completedLast)=\"codeCompleted.emit($event)\"\n  (ngModelChange)=\"codeChanged.emit($event)\">\n</fs-code-input>\n", styles: ["code-input{--item-spacing: 10px;--item-height: 20px;--item-border: none;--item-border-bottom: 2px solid #949494;--item-border-has-value: none;--item-border-bottom-has-value: 2px solid #949494;--item-border-focused: none;--item-border-bottom-focused: 2px solid #0061AF;--item-shadow-focused: none;--item-border-radius: 0px}code-input ::ng-deep span:first-child{padding-left:0!important}code-input ::ng-deep span:last-child{padding-right:0!important}code-input ::ng-deep input{font-size:20px!important;height:40px!important;padding:0!important}\n"], components: [{ type: i1.FsCodeInputComponent, selector: "fs-code-input", inputs: ["codeLength", "inputType", "inputMode", "initialFocusField", "isCharsCode", "isCodeHidden", "isPrevFocusableAfterClearing", "isFocusingOnLastByClickIfFilled", "disabled", "autocapitalize"], outputs: ["changed", "completed", "completedLast"] }], directives: [{ type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CodeInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: CodeInputComponent, selector: "app-code-input", inputs: { codeLength: "codeLength", code: "code" }, outputs: { codeCompleted: "codeCompleted", codeChanged: "codeChanged" }, viewQueries: [{ propertyName: "codeInput", first: true, predicate: FsCodeInputComponent, descendants: true }], ngImport: i0, template: "<fs-code-input\n  [codeLength]=\"codeLength\"\n  [ngModel]=\"code\"\n  name=\"code\"\n  [isPrevFocusableAfterClearing]=\"false\"\n  (completedLast)=\"codeComplete($event)\"\n  (ngModelChange)=\"codeChanged.emit($event)\">\n</fs-code-input>\n", styles: ["code-input{--item-spacing: 10px;--item-height: 20px;--item-border: none;--item-border-bottom: 2px solid #949494;--item-border-has-value: none;--item-border-bottom-has-value: 2px solid #949494;--item-border-focused: none;--item-border-bottom-focused: 2px solid #0061AF;--item-shadow-focused: none;--item-border-radius: 0px}code-input ::ng-deep span:first-child{padding-left:0!important}code-input ::ng-deep span:last-child{padding-right:0!important}code-input ::ng-deep input{font-size:20px!important;height:40px!important;padding:0!important}\n"], components: [{ type: i1.FsCodeInputComponent, selector: "fs-code-input", inputs: ["codeLength", "inputType", "inputMode", "initialFocusField", "isCharsCode", "isCodeHidden", "isPrevFocusableAfterClearing", "isFocusingOnLastByClickIfFilled", "disabled", "autocapitalize"], outputs: ["changed", "completed", "completedLast"] }], directives: [{ type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: CodeInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-code-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fs-code-input\n  [codeLength]=\"codeLength\"\n  [ngModel]=\"code\"\n  name=\"code\"\n  [isPrevFocusableAfterClearing]=\"false\"\n  (completedLast)=\"codeCompleted.emit($event)\"\n  (ngModelChange)=\"codeChanged.emit($event)\">\n</fs-code-input>\n", styles: ["code-input{--item-spacing: 10px;--item-height: 20px;--item-border: none;--item-border-bottom: 2px solid #949494;--item-border-has-value: none;--item-border-bottom-has-value: 2px solid #949494;--item-border-focused: none;--item-border-bottom-focused: 2px solid #0061AF;--item-shadow-focused: none;--item-border-radius: 0px}code-input ::ng-deep span:first-child{padding-left:0!important}code-input ::ng-deep span:last-child{padding-right:0!important}code-input ::ng-deep input{font-size:20px!important;height:40px!important;padding:0!important}\n"] }]
+            args: [{ selector: 'app-code-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<fs-code-input\n  [codeLength]=\"codeLength\"\n  [ngModel]=\"code\"\n  name=\"code\"\n  [isPrevFocusableAfterClearing]=\"false\"\n  (completedLast)=\"codeComplete($event)\"\n  (ngModelChange)=\"codeChanged.emit($event)\">\n</fs-code-input>\n", styles: ["code-input{--item-spacing: 10px;--item-height: 20px;--item-border: none;--item-border-bottom: 2px solid #949494;--item-border-has-value: none;--item-border-bottom-has-value: 2px solid #949494;--item-border-focused: none;--item-border-bottom-focused: 2px solid #0061AF;--item-shadow-focused: none;--item-border-radius: 0px}code-input ::ng-deep span:first-child{padding-left:0!important}code-input ::ng-deep span:last-child{padding-right:0!important}code-input ::ng-deep input{font-size:20px!important;height:40px!important;padding:0!important}\n"] }]
         }], propDecorators: { codeInput: [{
                 type: ViewChild,
                 args: [FsCodeInputComponent]
@@ -91,6 +94,9 @@ class Fs2faVerificationCodeComponent {
         this.codeCompleted = new EventEmitter();
         this.VerificationMethodType = VerificationMethodType;
     }
+    codeComplete(code) {
+        this.codeCompleted.emit(code);
+    }
     codeChange(code) {
         this.code = code;
         this.codeChanged.emit(this.code);
@@ -101,7 +107,7 @@ class Fs2faVerificationCodeComponent {
     }
 }
 Fs2faVerificationCodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: Fs2faVerificationCodeComponent, deps: [{ token: i9.FsFormDirective }], target: i0.ɵɵFactoryTarget.Component });
-Fs2faVerificationCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: Fs2faVerificationCodeComponent, selector: "fs-2fa-verification-code", inputs: { type: "type", recipient: "recipient", codeLength: "codeLength", code: "code" }, outputs: { codeChanged: "codeChanged", codeCompleted: "codeCompleted" }, viewQueries: [{ propertyName: "codeInputComponent", first: true, predicate: CodeInputComponent, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"type === VerificationMethodType.Sms\">\n  <p class=\"description\">\n    A text message with a verification code was just sent to <span style=\"white-space: nowrap;\">{{ recipient }}</span> to verify it's you.\n  </p>\n\n  <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"type === VerificationMethodType.Email\">\n  <p class=\"description\">\n    An email with a verification code was just sent to {{ recipient }} to verify it's you.\n  </p>\n  <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"type === VerificationMethodType.App\">\n  <p class=\"description\">\n    Enter the verification code generated by your 2 factor authenticator app to verify it's you.\n  </p>\n  <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n</ng-container>\n\n<ng-template #input> \n <app-code-input  \n    [code]=\"code\"\n    [codeLength]=\"codeLength\"\n    (codeChanged)=\"codeChange($event)\"\n    (codeCompleted)=\"codeCompleted.emit($event)\">\n  </app-code-input> \n</ng-template> ", styles: ["mat-form-field{width:100%}mat-form-field ::ng-deep .mat-form-field-subscript-wrapper{min-height:unset!important}mat-form-field ::ng-deep .mat-form-field-subscript-wrapper .fs-form-error{padding-bottom:5px}app-code-input{margin-bottom:5px}\n"], components: [{ type: CodeInputComponent, selector: "app-code-input", inputs: ["codeLength", "code"], outputs: ["codeCompleted", "codeChanged"] }], directives: [{ type: i9$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], viewProviders: [
+Fs2faVerificationCodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: Fs2faVerificationCodeComponent, selector: "fs-2fa-verification-code", inputs: { type: "type", recipient: "recipient", codeLength: "codeLength", code: "code" }, outputs: { codeChanged: "codeChanged", codeCompleted: "codeCompleted" }, viewQueries: [{ propertyName: "codeInputComponent", first: true, predicate: CodeInputComponent, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"type === VerificationMethodType.Sms\">\n  <p class=\"description\">\n    A text message with a verification code was just sent to <span style=\"white-space: nowrap;\">{{ recipient }}</span> to verify it's you.\n  </p>\n\n  <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"type === VerificationMethodType.Email\">\n  <p class=\"description\">\n    An email with a verification code was just sent to {{ recipient }} to verify it's you.\n  </p>\n  <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"type === VerificationMethodType.App\">\n  <p class=\"description\">\n    Enter the verification code generated by your 2 factor authenticator app to verify it's you.\n  </p>\n  <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n</ng-container>\n\n<ng-template #input> \n <app-code-input  \n    [code]=\"code\"\n    [codeLength]=\"codeLength\"\n    (codeChanged)=\"codeChange($event)\"\n    (codeCompleted)=\"codeComplete\">\n  </app-code-input> \n</ng-template> ", styles: ["mat-form-field{width:100%}mat-form-field ::ng-deep .mat-form-field-subscript-wrapper{min-height:unset!important}mat-form-field ::ng-deep .mat-form-field-subscript-wrapper .fs-form-error{padding-bottom:5px}app-code-input{margin-bottom:5px}\n"], components: [{ type: CodeInputComponent, selector: "app-code-input", inputs: ["codeLength", "code"], outputs: ["codeCompleted", "codeChanged"] }], directives: [{ type: i9$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], viewProviders: [
         {
             provide: ControlContainer,
             useExisting: NgForm,
@@ -114,7 +120,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                             provide: ControlContainer,
                             useExisting: NgForm,
                         },
-                    ], template: "<ng-container *ngIf=\"type === VerificationMethodType.Sms\">\n  <p class=\"description\">\n    A text message with a verification code was just sent to <span style=\"white-space: nowrap;\">{{ recipient }}</span> to verify it's you.\n  </p>\n\n  <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"type === VerificationMethodType.Email\">\n  <p class=\"description\">\n    An email with a verification code was just sent to {{ recipient }} to verify it's you.\n  </p>\n  <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"type === VerificationMethodType.App\">\n  <p class=\"description\">\n    Enter the verification code generated by your 2 factor authenticator app to verify it's you.\n  </p>\n  <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n</ng-container>\n\n<ng-template #input> \n <app-code-input  \n    [code]=\"code\"\n    [codeLength]=\"codeLength\"\n    (codeChanged)=\"codeChange($event)\"\n    (codeCompleted)=\"codeCompleted.emit($event)\">\n  </app-code-input> \n</ng-template> ", styles: ["mat-form-field{width:100%}mat-form-field ::ng-deep .mat-form-field-subscript-wrapper{min-height:unset!important}mat-form-field ::ng-deep .mat-form-field-subscript-wrapper .fs-form-error{padding-bottom:5px}app-code-input{margin-bottom:5px}\n"] }]
+                    ], template: "<ng-container *ngIf=\"type === VerificationMethodType.Sms\">\n  <p class=\"description\">\n    A text message with a verification code was just sent to <span style=\"white-space: nowrap;\">{{ recipient }}</span> to verify it's you.\n  </p>\n\n  <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"type === VerificationMethodType.Email\">\n  <p class=\"description\">\n    An email with a verification code was just sent to {{ recipient }} to verify it's you.\n  </p>\n  <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n</ng-container>\n\n<ng-container *ngIf=\"type === VerificationMethodType.App\">\n  <p class=\"description\">\n    Enter the verification code generated by your 2 factor authenticator app to verify it's you.\n  </p>\n  <ng-container *ngTemplateOutlet=\"input\"></ng-container>\n</ng-container>\n\n<ng-template #input> \n <app-code-input  \n    [code]=\"code\"\n    [codeLength]=\"codeLength\"\n    (codeChanged)=\"codeChange($event)\"\n    (codeCompleted)=\"codeComplete\">\n  </app-code-input> \n</ng-template> ", styles: ["mat-form-field{width:100%}mat-form-field ::ng-deep .mat-form-field-subscript-wrapper{min-height:unset!important}mat-form-field ::ng-deep .mat-form-field-subscript-wrapper .fs-form-error{padding-bottom:5px}app-code-input{margin-bottom:5px}\n"] }]
         }], ctorParameters: function () { return [{ type: i9.FsFormDirective }]; }, propDecorators: { codeInputComponent: [{
                 type: ViewChild,
                 args: [CodeInputComponent]
@@ -736,7 +742,8 @@ class EmailComponent {
         this.twoFactorManageService = _data.twoFactorManageService;
         this.default = !this.twoFactorManageService.hasVerificationMethods;
     }
-    codeCompleted() {
+    codeCompleted(code) {
+        this.code = code;
         //Legacy support
         setTimeout(() => {
             if (!this.form.submitting) {
@@ -749,10 +756,10 @@ class EmailComponent {
     }
 }
 EmailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: EmailComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$1.MatDialogRef }, { token: i0.ChangeDetectorRef }, { token: i2.FsMessage }], target: i0.ɵɵFactoryTarget.Component });
-EmailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: EmailComponent, selector: "ng-component", viewQueries: [{ propertyName: "form", first: true, predicate: FsFormDirective, descendants: true }], ngImport: i0, template: "<form fsForm [submit]=\"submit\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      Email Setup\n    </h1>\n    <mat-dialog-content>\n      <ng-container *ngIf=\"verificationMethod; else notVerificationMethod\">\n        <fs-2fa-verification\n          [verificationMethod]=\"verificationMethod\"\n          (codeChanged)=\"codeChanged($event)\"\n          (codeCompleted)=\"codeCompleted()\"\n          [resend]=\"resend\"\n          [(trustDevice)]=\"trustDevice\">\n        </fs-2fa-verification>\n      </ng-container>\n\n      <ng-template #notVerificationMethod>\n        <p>The app will only use this email for verifying your account security. </p>\n        <mat-form-field>\n          <mat-label>Email</mat-label>\n          <input\n            matInput\n            [required]=\"true\"\n            [(ngModel)]=\"email\"\n            [fsFormEmail]=\"true\"\n            name=\"email\">\n        </mat-form-field>\n        <mat-checkbox \n            name=\"default\"\n            [(ngModel)]=\"default\"\n            [disableRipple]=\"true\">\n          Make this the default verification method\n        </mat-checkbox>\n      </ng-template>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <button\n          mat-button\n          color=\"primary\"\n          type=\"submit\">\n        Next\n      </button>\n      <button\n          mat-button\n          type=\"button\"\n          [mat-dialog-close]=\"undefined\">\n        Cancel\n      </button>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n", styles: [":host ::ng-deep mat-checkbox .mat-ripple{display:none}:host ::ng-deep mat-checkbox .mat-checkbox-layout{white-space:wrap}mat-form-field{width:100%}mat-dialog-content{width:400px;max-width:100%}p{margin-top:0}app-code-input{margin-bottom:5px;display:block}\n"], components: [{ type: i3.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { type: Fs2faVerificationComponent, selector: "fs-2fa-verification", inputs: ["verificationMethod", "resend", "showTrustedDevice", "trustDevice", "codeLength", "trustDays", "formatRecipient", "getVerificationMethods", "selectVerificationMethod"], outputs: ["verified", "codeChanged", "codeCompleted", "trustDeviceChange"] }, { type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i6$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i6.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i9.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i9$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.MatLabel, selector: "mat-label" }, { type: i11$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i9.FsFormEmailDirective, selector: "[fsFormEmail]", inputs: ["fsFormEmail", "fsFormEmailMessage"] }, { type: i9.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i9.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit", "form"] }, { type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+EmailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: EmailComponent, selector: "ng-component", viewQueries: [{ propertyName: "form", first: true, predicate: FsFormDirective, descendants: true }], ngImport: i0, template: "<form fsForm [submit]=\"submit\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      Email Setup\n    </h1>\n    <mat-dialog-content>\n      <ng-container *ngIf=\"verificationMethod; else notVerificationMethod\">\n        <fs-2fa-verification\n          [verificationMethod]=\"verificationMethod\"\n          (codeChanged)=\"codeChanged($event)\"\n          (codeCompleted)=\"codeCompleted($event)\"\n          [resend]=\"resend\"\n          [(trustDevice)]=\"trustDevice\">\n        </fs-2fa-verification>\n      </ng-container>\n\n      <ng-template #notVerificationMethod>\n        <p>The app will only use this email for verifying your account security. </p>\n        <mat-form-field>\n          <mat-label>Email</mat-label>\n          <input\n            matInput\n            [required]=\"true\"\n            [(ngModel)]=\"email\"\n            [fsFormEmail]=\"true\"\n            name=\"email\">\n        </mat-form-field>\n        <mat-checkbox \n            name=\"default\"\n            [(ngModel)]=\"default\"\n            [disableRipple]=\"true\">\n          Make this the default verification method\n        </mat-checkbox>\n      </ng-template>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <button\n          mat-button\n          color=\"primary\"\n          type=\"submit\">\n        Next\n      </button>\n      <button\n          mat-button\n          type=\"button\"\n          [mat-dialog-close]=\"undefined\">\n        Cancel\n      </button>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n", styles: [":host ::ng-deep mat-checkbox .mat-ripple{display:none}:host ::ng-deep mat-checkbox .mat-checkbox-layout{white-space:wrap}mat-form-field{width:100%}mat-dialog-content{width:400px;max-width:100%}p{margin-top:0}app-code-input{margin-bottom:5px;display:block}\n"], components: [{ type: i3.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { type: Fs2faVerificationComponent, selector: "fs-2fa-verification", inputs: ["verificationMethod", "resend", "showTrustedDevice", "trustDevice", "codeLength", "trustDays", "formatRecipient", "getVerificationMethods", "selectVerificationMethod"], outputs: ["verified", "codeChanged", "codeCompleted", "trustDeviceChange"] }, { type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i6$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i6.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i9.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i9$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.MatLabel, selector: "mat-label" }, { type: i11$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i9.FsFormEmailDirective, selector: "[fsFormEmail]", inputs: ["fsFormEmail", "fsFormEmailMessage"] }, { type: i9.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i9.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit", "form"] }, { type: i1$1.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: "13.4.0", ngImport: i0, type: EmailComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<form fsForm [submit]=\"submit\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      Email Setup\n    </h1>\n    <mat-dialog-content>\n      <ng-container *ngIf=\"verificationMethod; else notVerificationMethod\">\n        <fs-2fa-verification\n          [verificationMethod]=\"verificationMethod\"\n          (codeChanged)=\"codeChanged($event)\"\n          (codeCompleted)=\"codeCompleted()\"\n          [resend]=\"resend\"\n          [(trustDevice)]=\"trustDevice\">\n        </fs-2fa-verification>\n      </ng-container>\n\n      <ng-template #notVerificationMethod>\n        <p>The app will only use this email for verifying your account security. </p>\n        <mat-form-field>\n          <mat-label>Email</mat-label>\n          <input\n            matInput\n            [required]=\"true\"\n            [(ngModel)]=\"email\"\n            [fsFormEmail]=\"true\"\n            name=\"email\">\n        </mat-form-field>\n        <mat-checkbox \n            name=\"default\"\n            [(ngModel)]=\"default\"\n            [disableRipple]=\"true\">\n          Make this the default verification method\n        </mat-checkbox>\n      </ng-template>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <button\n          mat-button\n          color=\"primary\"\n          type=\"submit\">\n        Next\n      </button>\n      <button\n          mat-button\n          type=\"button\"\n          [mat-dialog-close]=\"undefined\">\n        Cancel\n      </button>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n", styles: [":host ::ng-deep mat-checkbox .mat-ripple{display:none}:host ::ng-deep mat-checkbox .mat-checkbox-layout{white-space:wrap}mat-form-field{width:100%}mat-dialog-content{width:400px;max-width:100%}p{margin-top:0}app-code-input{margin-bottom:5px;display:block}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<form fsForm [submit]=\"submit\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      Email Setup\n    </h1>\n    <mat-dialog-content>\n      <ng-container *ngIf=\"verificationMethod; else notVerificationMethod\">\n        <fs-2fa-verification\n          [verificationMethod]=\"verificationMethod\"\n          (codeChanged)=\"codeChanged($event)\"\n          (codeCompleted)=\"codeCompleted($event)\"\n          [resend]=\"resend\"\n          [(trustDevice)]=\"trustDevice\">\n        </fs-2fa-verification>\n      </ng-container>\n\n      <ng-template #notVerificationMethod>\n        <p>The app will only use this email for verifying your account security. </p>\n        <mat-form-field>\n          <mat-label>Email</mat-label>\n          <input\n            matInput\n            [required]=\"true\"\n            [(ngModel)]=\"email\"\n            [fsFormEmail]=\"true\"\n            name=\"email\">\n        </mat-form-field>\n        <mat-checkbox \n            name=\"default\"\n            [(ngModel)]=\"default\"\n            [disableRipple]=\"true\">\n          Make this the default verification method\n        </mat-checkbox>\n      </ng-template>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <button\n          mat-button\n          color=\"primary\"\n          type=\"submit\">\n        Next\n      </button>\n      <button\n          mat-button\n          type=\"button\"\n          [mat-dialog-close]=\"undefined\">\n        Cancel\n      </button>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n", styles: [":host ::ng-deep mat-checkbox .mat-ripple{display:none}:host ::ng-deep mat-checkbox .mat-checkbox-layout{white-space:wrap}mat-form-field{width:100%}mat-dialog-content{width:400px;max-width:100%}p{margin-top:0}app-code-input{margin-bottom:5px;display:block}\n"] }]
         }], ctorParameters: function () {
         return [{ type: undefined, decorators: [{
                         type: Inject,
@@ -804,7 +811,8 @@ class NumberComponent {
         this.defaultCountry = _data.defaultCountry;
         this.default = !this.twoFactorManageService.hasVerificationMethods;
     }
-    codeCompleted() {
+    codeCompleted(code) {
+        this.code = code;
         //Legacy support
         setTimeout(() => {
             if (!this.form.submitting) {
@@ -817,10 +825,10 @@ class NumberComponent {
     }
 }
 NumberComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: NumberComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$1.MatDialogRef }, { token: i0.ChangeDetectorRef }, { token: i2.FsMessage }], target: i0.ɵɵFactoryTarget.Component });
-NumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: NumberComponent, selector: "ng-component", viewQueries: [{ propertyName: "form", first: true, predicate: FsFormDirective, descendants: true }], ngImport: i0, template: "<form fsForm [submit]=\"submit\" [autocomplete]=\"false\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      Text Message Setup\n    </h1>\n    <mat-dialog-content>\n      <ng-container *ngIf=\"verificationMethod; else notVerificationMethod\">\n        <fs-2fa-verification\n          [verificationMethod]=\"verificationMethod\"\n          (codeChanged)=\"codeChanged($event)\"\n          (codeCompleted)=\"codeCompleted()\"\n          [resend]=\"resend\"\n          [formatRecipient]=\"true\"\n          [(trustDevice)]=\"trustDevice\">\n        </fs-2fa-verification>\n      </ng-container>\n\n      <ng-template #notVerificationMethod>\n        <p>The app will only use this number for verifying your account security. Message and data rates may apply by your cell phone provider.</p>\n        <mat-form-field>\n          <mat-label>Phone number</mat-label>\n          <input \n            matInput\n            fsPhoneField\n            [(ngModel)]=\"phone\"\n            [required]=\"true\"\n            [country]=\"defaultCountry\"\n            [mode]=\"'object'\"\n            autocomplete=\"off\"\n            name=\"phone\">\n        </mat-form-field>\n        <mat-checkbox \n            name=\"default\"\n            [(ngModel)]=\"default\"\n            [disableRipple]=\"true\">\n          Make this the default verification method\n        </mat-checkbox>\n      </ng-template>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <button\n          mat-button\n          color=\"primary\"\n          type=\"submit\">\n        Next\n      </button>\n      <button\n          mat-button\n          type=\"button\"\n          [mat-dialog-close]=\"undefined\">\n        Cancel\n      </button>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n", styles: [":host ::ng-deep mat-checkbox .mat-ripple{display:none}:host ::ng-deep mat-checkbox .mat-checkbox-layout{white-space:wrap}app-code-input{margin-bottom:5px;display:block}mat-form-field{width:100%}mat-dialog-content{width:400px;max-width:100%}p{margin-top:0}h1{display:flex;align-items:center}h1 mat-icon{margin-right:5px}\n"], components: [{ type: i3.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { type: Fs2faVerificationComponent, selector: "fs-2fa-verification", inputs: ["verificationMethod", "resend", "showTrustedDevice", "trustDevice", "codeLength", "trustDays", "formatRecipient", "getVerificationMethods", "selectVerificationMethod"], outputs: ["verified", "codeChanged", "codeCompleted", "trustDeviceChange"] }, { type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i8$1.FsPhoneFieldComponent, selector: "[fsPhoneField]", inputs: ["allowNumberExt", "placeholder", "required", "disabled", "mode", "country", "autocomplete"] }, { type: i6$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i6.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i9.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i9$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.MatLabel, selector: "mat-label" }, { type: i11$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i9.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i9.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit", "form"] }, { type: i1$1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NumberComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: NumberComponent, selector: "ng-component", viewQueries: [{ propertyName: "form", first: true, predicate: FsFormDirective, descendants: true }], ngImport: i0, template: "<form fsForm [submit]=\"submit\" [autocomplete]=\"false\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      Text Message Setup\n    </h1>\n    <mat-dialog-content>\n      <ng-container *ngIf=\"verificationMethod; else notVerificationMethod\">\n        <fs-2fa-verification\n          [verificationMethod]=\"verificationMethod\"\n          (codeChanged)=\"codeChanged($event)\"\n          (codeCompleted)=\"codeCompleted($event)\"\n          [resend]=\"resend\"\n          [formatRecipient]=\"true\"\n          [(trustDevice)]=\"trustDevice\">\n        </fs-2fa-verification>\n      </ng-container>\n\n      <ng-template #notVerificationMethod>\n        <p>The app will only use this number for verifying your account security. Message and data rates may apply by your cell phone provider.</p>\n        <mat-form-field>\n          <mat-label>Phone number</mat-label>\n          <input \n            matInput\n            fsPhoneField\n            [(ngModel)]=\"phone\"\n            [required]=\"true\"\n            [country]=\"defaultCountry\"\n            [mode]=\"'object'\"\n            autocomplete=\"off\"\n            name=\"phone\">\n        </mat-form-field>\n        <mat-checkbox \n            name=\"default\"\n            [(ngModel)]=\"default\"\n            [disableRipple]=\"true\">\n          Make this the default verification method\n        </mat-checkbox>\n      </ng-template>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <button\n          mat-button\n          color=\"primary\"\n          type=\"submit\">\n        Next\n      </button>\n      <button\n          mat-button\n          type=\"button\"\n          [mat-dialog-close]=\"undefined\">\n        Cancel\n      </button>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n", styles: [":host ::ng-deep mat-checkbox .mat-ripple{display:none}:host ::ng-deep mat-checkbox .mat-checkbox-layout{white-space:wrap}app-code-input{margin-bottom:5px;display:block}mat-form-field{width:100%}mat-dialog-content{width:400px;max-width:100%}p{margin-top:0}h1{display:flex;align-items:center}h1 mat-icon{margin-right:5px}\n"], components: [{ type: i3.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode", "mobileButtonPlacement", "mobileWidth", "mode", "buttonLayout"] }, { type: Fs2faVerificationComponent, selector: "fs-2fa-verification", inputs: ["verificationMethod", "resend", "showTrustedDevice", "trustDevice", "codeLength", "trustDays", "formatRecipient", "getVerificationMethods", "selectVerificationMethod"], outputs: ["verified", "codeChanged", "codeCompleted", "trustDeviceChange"] }, { type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i8$1.FsPhoneFieldComponent, selector: "[fsPhoneField]", inputs: ["allowNumberExt", "placeholder", "required", "disabled", "mode", "country", "autocomplete"] }, { type: i6$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i6.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i9.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "submit", "successDelay", "errorDelay", "tabGroup", "deactivationGuard"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"], exportAs: ["fsForm"] }, { type: i1$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i9$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.MatLabel, selector: "mat-label" }, { type: i11$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.FsFormRequiredDirective, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }, { type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i9.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }, { type: i1$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i9.FsButtonDirective, selector: "[mat-raised-button],[mat-button],[mat-flat-button],[mat-stroked-button]", inputs: ["name", "dirtySubmit", "form"] }, { type: i1$1.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: "13.4.0", ngImport: i0, type: NumberComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<form fsForm [submit]=\"submit\" [autocomplete]=\"false\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      Text Message Setup\n    </h1>\n    <mat-dialog-content>\n      <ng-container *ngIf=\"verificationMethod; else notVerificationMethod\">\n        <fs-2fa-verification\n          [verificationMethod]=\"verificationMethod\"\n          (codeChanged)=\"codeChanged($event)\"\n          (codeCompleted)=\"codeCompleted()\"\n          [resend]=\"resend\"\n          [formatRecipient]=\"true\"\n          [(trustDevice)]=\"trustDevice\">\n        </fs-2fa-verification>\n      </ng-container>\n\n      <ng-template #notVerificationMethod>\n        <p>The app will only use this number for verifying your account security. Message and data rates may apply by your cell phone provider.</p>\n        <mat-form-field>\n          <mat-label>Phone number</mat-label>\n          <input \n            matInput\n            fsPhoneField\n            [(ngModel)]=\"phone\"\n            [required]=\"true\"\n            [country]=\"defaultCountry\"\n            [mode]=\"'object'\"\n            autocomplete=\"off\"\n            name=\"phone\">\n        </mat-form-field>\n        <mat-checkbox \n            name=\"default\"\n            [(ngModel)]=\"default\"\n            [disableRipple]=\"true\">\n          Make this the default verification method\n        </mat-checkbox>\n      </ng-template>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <button\n          mat-button\n          color=\"primary\"\n          type=\"submit\">\n        Next\n      </button>\n      <button\n          mat-button\n          type=\"button\"\n          [mat-dialog-close]=\"undefined\">\n        Cancel\n      </button>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n", styles: [":host ::ng-deep mat-checkbox .mat-ripple{display:none}:host ::ng-deep mat-checkbox .mat-checkbox-layout{white-space:wrap}app-code-input{margin-bottom:5px;display:block}mat-form-field{width:100%}mat-dialog-content{width:400px;max-width:100%}p{margin-top:0}h1{display:flex;align-items:center}h1 mat-icon{margin-right:5px}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, template: "<form fsForm [submit]=\"submit\" [autocomplete]=\"false\">\n  <fs-dialog>\n    <h1 mat-dialog-title>\n      Text Message Setup\n    </h1>\n    <mat-dialog-content>\n      <ng-container *ngIf=\"verificationMethod; else notVerificationMethod\">\n        <fs-2fa-verification\n          [verificationMethod]=\"verificationMethod\"\n          (codeChanged)=\"codeChanged($event)\"\n          (codeCompleted)=\"codeCompleted($event)\"\n          [resend]=\"resend\"\n          [formatRecipient]=\"true\"\n          [(trustDevice)]=\"trustDevice\">\n        </fs-2fa-verification>\n      </ng-container>\n\n      <ng-template #notVerificationMethod>\n        <p>The app will only use this number for verifying your account security. Message and data rates may apply by your cell phone provider.</p>\n        <mat-form-field>\n          <mat-label>Phone number</mat-label>\n          <input \n            matInput\n            fsPhoneField\n            [(ngModel)]=\"phone\"\n            [required]=\"true\"\n            [country]=\"defaultCountry\"\n            [mode]=\"'object'\"\n            autocomplete=\"off\"\n            name=\"phone\">\n        </mat-form-field>\n        <mat-checkbox \n            name=\"default\"\n            [(ngModel)]=\"default\"\n            [disableRipple]=\"true\">\n          Make this the default verification method\n        </mat-checkbox>\n      </ng-template>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <button\n          mat-button\n          color=\"primary\"\n          type=\"submit\">\n        Next\n      </button>\n      <button\n          mat-button\n          type=\"button\"\n          [mat-dialog-close]=\"undefined\">\n        Cancel\n      </button>\n    </mat-dialog-actions>\n  </fs-dialog>\n</form>\n", styles: [":host ::ng-deep mat-checkbox .mat-ripple{display:none}:host ::ng-deep mat-checkbox .mat-checkbox-layout{white-space:wrap}app-code-input{margin-bottom:5px;display:block}mat-form-field{width:100%}mat-dialog-content{width:400px;max-width:100%}p{margin-top:0}h1{display:flex;align-items:center}h1 mat-icon{margin-right:5px}\n"] }]
         }], ctorParameters: function () {
         return [{ type: undefined, decorators: [{
                         type: Inject,