@firestitch/2fa 13.1.4 → 13.1.6

package/fesm2020/firestitch-2fa.mjs

@@ -26,7 +26,7 @@ import * as i3 from '@firestitch/dialog';
 import { FsDialogModule } from '@firestitch/dialog';
 import * as i2 from '@firestitch/message';
 import { Subject, of, BehaviorSubject } from 'rxjs';
-import { tap, finalize, filter, takeUntil, switchMap, map } from 'rxjs/operators';
+import { tap, finalize, switchMap, filter, takeUntil, map } from 'rxjs/operators';
 import * as i1 from '@firestitch/code-input';
 import { FsCodeInputComponent, FsCodeInputModule } from '@firestitch/code-input';
 import * as i1$1 from '@angular/material/dialog';
@@ -220,8 +220,8 @@ class Fs2faVerificationComponent {
     }
     showVerificationMethods() {
         this.getVerificationMethods()
-            .subscribe((verificationMethods) => {
-            this._dialog.open(Fs2faVerificationMethodsComponent, {
+            .pipe(switchMap((verificationMethods) => {
+            return this._dialog.open(Fs2faVerificationMethodsComponent, {
                 data: {
                     verificationMethod: this.verificationMethod,
                     verificationMethods,
@@ -229,14 +229,14 @@ class Fs2faVerificationComponent {
                 },
             })
                 .afterClosed()
-                .pipe(filter((verificationMethod) => !!verificationMethod))
-                .subscribe((verificationMethod) => {
-                this.verificationMethod = verificationMethod;
-                this.code = '';
-                this._cdRef.markForCheck();
-                setTimeout(() => {
-                    this.verificationCodeComponent.focus();
-                });
+                .pipe(filter((verificationMethod) => !!verificationMethod));
+        }))
+            .subscribe((verificationMethod) => {
+            this.verificationMethod = verificationMethod;
+            this.code = '';
+            this._cdRef.markForCheck();
+            setTimeout(() => {
+                this.verificationCodeComponent.focus();
             });
         });
     }
@@ -591,20 +591,24 @@ class EmailComponent {
         this.twoFactorManageService = _data.twoFactorManageService;
         this.default = !this.twoFactorManageService.hasVerificationMethods;
     }
-    codeCompleted() {
-        if (!this.form.submitting) {
-            this.form.triggerSubmit();
-        }
+    codeCompleted(code) {
+        this.code = code;
+        //Legacy support
+        setTimeout(() => {
+            if (!this.form.submitting) {
+                this.form.triggerSubmit();
+            }
+        });
     }
     codeChanged(code) {
         this.code = code;
     }
 }
 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,
                     args: [MAT_DIALOG_DATA]
@@ -654,20 +658,24 @@ class NumberComponent {
         this.defaultCountry = _data.defaultCountry;
         this.default = !this.twoFactorManageService.hasVerificationMethods;
     }
-    codeCompleted() {
-        if (!this.form.submitting) {
-            this.form.triggerSubmit();
-        }
+    codeCompleted(code) {
+        this.code = code;
+        //Legacy support
+        setTimeout(() => {
+            if (!this.form.submitting) {
+                this.form.triggerSubmit();
+            }
+        });
     }
     codeChanged(code) {
         this.code = code;
     }
 }
 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,
                     args: [MAT_DIALOG_DATA]