@firestitch/2fa 12.0.3 → 12.0.6

package/bundles/firestitch-2fa.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@angular/common'), require('@angular/material/icon'), require('@angular/material/radio'), require('@angular/material/button'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/checkbox'), require('@angular/material/progress-spinner'), require('@firestitch/form'), require('@firestitch/skeleton'), require('@firestitch/radiogroup'), require('rxjs'), require('rxjs/operators')) :
-    typeof define === 'function' && define.amd ? define('@firestitch/2fa', ['exports', '@angular/core', '@angular/forms', '@angular/common', '@angular/material/icon', '@angular/material/radio', '@angular/material/button', '@angular/material/form-field', '@angular/material/input', '@angular/material/checkbox', '@angular/material/progress-spinner', '@firestitch/form', '@firestitch/skeleton', '@firestitch/radiogroup', 'rxjs', 'rxjs/operators'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.firestitch = global.firestitch || {}, global.firestitch["2fa"] = {}), global.ng.core, global.ng.forms, global.ng.common, global.ng.material.icon, global.ng.material.radio, global.ng.material.button, global.ng.material.formField, global.ng.material.input, global.ng.material.checkbox, global.ng.material.progressSpinner, global.i1, global.i7, global.i1$2, global.rxjs, global.rxjs.operators));
-})(this, (function (exports, i0, i6, i8, i2, i3$2, i4, i1$1, i3, i3$1, i5, i1, i7, i1$2, rxjs, operators) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@angular/common'), require('@angular/material/icon'), require('@angular/material/radio'), require('@angular/material/button'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/checkbox'), require('@angular/material/progress-spinner'), require('@firestitch/form'), require('@firestitch/skeleton'), require('@firestitch/radiogroup'), require('@firestitch/dialog'), require('rxjs/operators'), require('@angular/material/dialog'), require('rxjs')) :
+    typeof define === 'function' && define.amd ? define('@firestitch/2fa', ['exports', '@angular/core', '@angular/forms', '@angular/common', '@angular/material/icon', '@angular/material/radio', '@angular/material/button', '@angular/material/form-field', '@angular/material/input', '@angular/material/checkbox', '@angular/material/progress-spinner', '@firestitch/form', '@firestitch/skeleton', '@firestitch/radiogroup', '@firestitch/dialog', 'rxjs/operators', '@angular/material/dialog', 'rxjs'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.firestitch = global.firestitch || {}, global.firestitch["2fa"] = {}), global.ng.core, global.ng.forms, global.ng.common, global.ng.material.icon, global.ng.material.radio, global.ng.material.button, global.ng.material.formField, global.ng.material.input, global.ng.material.checkbox, global.ng.material.progressSpinner, global.i8, global.i9, global.i3, global.i1$1, global.rxjs.operators, global.ng.material.dialog, global.rxjs));
+})(this, (function (exports, i0, i7, i10, i4, i5, i6, i1$2, i3$1, i4$1, i5$1, i8, i9, i3, i1$1, operators, i1, rxjs) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -23,21 +23,92 @@
     }
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
+    var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
+    var i10__namespace = /*#__PURE__*/_interopNamespace(i10);
+    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
     var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
+    var i1__namespace$2 = /*#__PURE__*/_interopNamespace(i1$2);
+    var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
+    var i4__namespace$1 = /*#__PURE__*/_interopNamespace(i4$1);
+    var i5__namespace$1 = /*#__PURE__*/_interopNamespace(i5$1);
     var i8__namespace = /*#__PURE__*/_interopNamespace(i8);
-    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
-    var i3__namespace$2 = /*#__PURE__*/_interopNamespace(i3$2);
-    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
-    var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
+    var i9__namespace = /*#__PURE__*/_interopNamespace(i9);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
-    var i3__namespace$1 = /*#__PURE__*/_interopNamespace(i3$1);
-    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
+    var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
-    var i7__namespace = /*#__PURE__*/_interopNamespace(i7);
-    var i1__namespace$2 = /*#__PURE__*/_interopNamespace(i1$2);
 
     var FS_2FA_VERIFICATION_PROVIDER = new i0.InjectionToken('Provider for Verification service');
 
+    exports.FsVerificationMethodType = void 0;
+    (function (FsVerificationMethodType) {
+        FsVerificationMethodType["Sms"] = "sms";
+        FsVerificationMethodType["Email"] = "email";
+        FsVerificationMethodType["Authenticator"] = "authenticator";
+        FsVerificationMethodType["Code"] = "code";
+    })(exports.FsVerificationMethodType || (exports.FsVerificationMethodType = {}));
+
+    var Fs2FaVerificationMethodsComponent = /** @class */ (function () {
+        function Fs2FaVerificationMethodsComponent(_verificationProvider, _dialogData, _dialogRef) {
+            var _this = this;
+            this._verificationProvider = _verificationProvider;
+            this._dialogData = _dialogData;
+            this._dialogRef = _dialogRef;
+            this.verificationMethodType = exports.FsVerificationMethodType;
+            this.setVerificationMethod = function () {
+                return _this._verificationProvider
+                    .updateVerificationMethod(_this.method.id)
+                    .pipe(operators.tap(function (method) {
+                    _this._dialogRef.close(method);
+                }));
+            };
+            this._setActiveMethod();
+            this._initMethods();
+        }
+        Fs2FaVerificationMethodsComponent.prototype.compareWith = function (o1, o2) {
+            return o1 && o2 && o1.id === o2.id;
+        };
+        Fs2FaVerificationMethodsComponent.prototype._setActiveMethod = function () {
+            var _a;
+            this.method = (_a = this._dialogData) === null || _a === void 0 ? void 0 : _a.method;
+        };
+        Fs2FaVerificationMethodsComponent.prototype._initMethods = function () {
+            this.methods$ = this._verificationProvider
+                .methods()
+                .pipe(operators.map(function (methods) {
+                return methods
+                    .reduce(function (acc, method) {
+                    if (!acc[method.type]) {
+                        acc[method.type] = [];
+                    }
+                    acc[method.type].push(method);
+                    return acc;
+                }, {});
+            }), operators.shareReplay(1));
+        };
+        return Fs2FaVerificationMethodsComponent;
+    }());
+    Fs2FaVerificationMethodsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2FaVerificationMethodsComponent, deps: [{ token: FS_2FA_VERIFICATION_PROVIDER }, { token: i1.MAT_DIALOG_DATA }, { token: i1__namespace.MatDialogRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    Fs2FaVerificationMethodsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: Fs2FaVerificationMethodsComponent, selector: "ng-component", ngImport: i0__namespace, template: "<fs-dialog>\n  <h1 mat-dialog-title>\n    Verification Methods\n  </h1>\n  <form fsForm [submit]=\"setVerificationMethod\" [dirtySubmitButton]=\"false\">\n    <mat-dialog-content>\n      <ng-container *fsSkeleton=\"methods$ | async as methods\">\n        <fs-radio-group [(ngModel)]=\"method\" name=\"method\" [compareWith]=\"compareWith\">\n          <ng-container *ngFor=\"let methodMap of methods | keyvalue\">\n            <div class=\"method\">\n              <ng-container [ngSwitch]=\"methodMap.key\">\n                <ng-container *ngSwitchCase=\"verificationMethodType.Sms\">\n                  <div class=\"method-header\">\n                    <div class=\"method-icon\">\n                      <mat-icon>\n                        smartphone\n                      </mat-icon>\n                    </div>\n                    <div class=\"method-name\">\n                      <div class=\"method-title\">Text Message</div>\n                      <div class=\"method-subtitle\">\n                        Verification code send to one of following mobile number\n                      </div>\n                    </div>\n                  </div>\n                </ng-container>\n\n                <ng-container *ngSwitchCase=\"verificationMethodType.Email\">\n                  <div class=\"method-header\">\n                    <div class=\"method-icon\">\n                      <mat-icon>\n                        mail\n                      </mat-icon>\n                    </div>\n                    <div class=\"method-name\">\n                      <div class=\"method-title\">Email</div>\n                      <div class=\"method-subtitle\">\n                        Verification code send to one of following email\n                      </div>\n                    </div>\n                  </div>\n                </ng-container>\n              </ng-container>\n\n              <ng-container [ngSwitch]=\"methodMap.key\">\n                <ng-container *ngSwitchCase=\"verificationMethodType.Sms\">\n                  <mat-radio-button class=\"method-item\" *ngFor=\"let method of methodMap.value\" [value]=\"method\">\n                    {{ method.phoneNumber }}\n                  </mat-radio-button>\n                </ng-container>\n\n                <ng-container *ngSwitchCase=\"verificationMethodType.Email\">\n                  <mat-radio-button class=\"method-item\" *ngFor=\"let method of methodMap.value\" [value]=\"method\">\n                    {{ method.email }}\n                  </mat-radio-button>\n                </ng-container>\n              </ng-container>\n            </div>\n          </ng-container>\n        </fs-radio-group>\n      </ng-container>\n    </mat-dialog-content>\n    <mat-dialog-actions>\n      <div class=\"actions\">\n        <ng-container *ngIf=\"methods$ | async\">\n          <button mat-button type=\"submit\" color=\"primary\">Next</button>\n        </ng-container>\n        <button mat-button type=\"button\" [mat-dialog-close]=\"null\">Cancel</button>\n      </div>\n    </mat-dialog-actions>\n  </form>\n</fs-dialog>\n", styles: [".method{display:block;margin-bottom:20px}.method .method-header{display:flex;align-items:flex-start}.method .method-header .method-name{margin-left:10px}.method .method-header .method-name .method-title{font-size:14px;font-weight:400}.method .method-header .method-name .method-subtitle{font-size:12px;color:#a3a3a3}.method .method-item{display:block;margin:10px 0 0 35px}\n"], components: [{ type: i1__namespace$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i3__namespace.FsRadioGroupComponent, selector: "fs-radio-group", inputs: ["orientation", "radioPosition", "compareWith", "required", "disabled", "label", "name"] }, { type: i4__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5__namespace.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: i6__namespace.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: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i7__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i7__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i7__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i8__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "successDelay", "errorDelay", "submit", "tabGroup"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i9__namespace.ɵa, selector: "[fsSkeleton]", inputs: ["fsSkeletonPattern", "fsSkeleton"] }, { type: i7__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i10__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i10__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8__namespace.ɵw, selector: "button[type=\"submit\"]", inputs: ["dirtySubmit", "name"] }, { type: i1__namespace.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], pipes: { "async": i10__namespace.AsyncPipe, "keyvalue": i10__namespace.KeyValuePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2FaVerificationMethodsComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        templateUrl: './2fa-verification-methods.component.html',
+                        styleUrls: [
+                            './2fa-verification-methods.component.scss',
+                        ],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [FS_2FA_VERIFICATION_PROVIDER]
+                        }] }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i1.MAT_DIALOG_DATA]
+                        }] }, { type: i1__namespace.MatDialogRef }];
+        } });
+
     var Fs2FAVerificationOTPComponent = /** @class */ (function () {
         function Fs2FAVerificationOTPComponent(form) {
             this.form = form;
@@ -52,7 +123,7 @@
         };
         return Fs2FAVerificationOTPComponent;
     }());
-    Fs2FAVerificationOTPComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2FAVerificationOTPComponent, deps: [{ token: i1__namespace.FsFormDirective }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    Fs2FAVerificationOTPComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2FAVerificationOTPComponent, deps: [{ token: i8__namespace.FsFormDirective }], target: i0__namespace.ɵɵFactoryTarget.Component });
     Fs2FAVerificationOTPComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: Fs2FAVerificationOTPComponent, selector: "fs-2fa-verification-otp", outputs: { codeChange: "codeChange" }, ngImport: i0__namespace, template: "<p class=\"description\">\n  Enter the verification code generated by your 2 factor authenticator\n  app to verify it's you\n</p>\n\n<!--\n<code-input [initialFocusField]=\"0\"\n            [codeLength]=\"6\"\n            (codeChanged)=\"codeChanged($event)\"\n            (codeCompleted)=\"codeCompleted()\">>\n</code-input>\n-->\n", styles: [":host{display:block}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"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2FAVerificationOTPComponent, decorators: [{
                 type: i0.Component,
@@ -64,7 +135,7 @@
                         ],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
-            }], ctorParameters: function () { return [{ type: i1__namespace.FsFormDirective }]; }, propDecorators: { codeChange: [{
+            }], ctorParameters: function () { return [{ type: i8__namespace.FsFormDirective }]; }, propDecorators: { codeChange: [{
                     type: i0.Output
                 }] } });
 
@@ -78,10 +149,10 @@
         return Fs2FAVerificationSMSComponent;
     }());
     Fs2FAVerificationSMSComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2FAVerificationSMSComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    Fs2FAVerificationSMSComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: Fs2FAVerificationSMSComponent, selector: "fs-2fa-verification-code", inputs: { method: "method" }, outputs: { codeChange: "codeChange" }, ngImport: i0__namespace, template: "<p class=\"description\">\n  <ng-container *ngIf=\"method.phoneCode && method.phoneNumber && method.type === 'sms'\">\n    A text message with a verification code was just\n    sent to <span style=\"white-space: nowrap;\">+{{ method.phoneCode }} {{ method.phoneNumber }}</span> to verify it's you.\n  </ng-container>\n\n  <ng-container *ngIf=\"method.type === 'email'\">\n    A email with a verification code was just sent to {{ method.email }} to verify it's you.\n  </ng-container>\n\n  <ng-container *ngIf=\"false\">\n    Enter the one time code generated by the app administrator to verify it's you.\n  </ng-container>\n</p>\n\n<mat-form-field>\n  <mat-label>Code</mat-label>\n  <input type=\"text\"\n         matInput\n         name=\"code\"\n         autocomplete=\"one-time-code\"\n         [(ngModel)]=\"code\"\n         (ngModelChange)=\"codeChanged()\"\n         required\n         placeholder=\"Enter the code\"\n         inputmode=\"numeric\">\n</mat-form-field>\n", styles: [":host{display:block}mat-form-field{width:100%}\n"], components: [{ type: i1__namespace$1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }], directives: [{ type: i8__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.MatLabel, selector: "mat-label" }, { type: i3__namespace.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i6__namespace.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: i6__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i6__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1__namespace.ɵf, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }], viewProviders: [
+    Fs2FAVerificationSMSComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: Fs2FAVerificationSMSComponent, selector: "fs-2fa-verification-code", inputs: { method: "method" }, outputs: { codeChange: "codeChange" }, ngImport: i0__namespace, template: "<p class=\"description\">\n  <ng-container *ngIf=\"method.phoneNumber && method.type === 'sms'\">\n    A text message with a verification code was just\n    sent to <span style=\"white-space: nowrap;\">{{ method.phoneNumber }}</span> to verify it's you.\n  </ng-container>\n\n  <ng-container *ngIf=\"method.type === 'email'\">\n    A email with a verification code was just sent to {{ method.email }} to verify it's you.\n  </ng-container>\n\n  <ng-container *ngIf=\"false\">\n    Enter the one time code generated by the app administrator to verify it's you.\n  </ng-container>\n</p>\n\n<mat-form-field>\n  <mat-label>Code</mat-label>\n  <input type=\"text\"\n         matInput\n         name=\"code\"\n         autocomplete=\"one-time-code\"\n         [(ngModel)]=\"code\"\n         (ngModelChange)=\"codeChanged()\"\n         required\n         placeholder=\"Enter the code\"\n         inputmode=\"numeric\">\n</mat-form-field>\n", styles: [":host{display:block}mat-form-field{width:100%}\n"], components: [{ type: i1__namespace$2.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }], directives: [{ type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$2.MatLabel, selector: "mat-label" }, { type: i3__namespace$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i7__namespace.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: i7__namespace.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i7__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i8__namespace.ɵf, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }], viewProviders: [
             {
-                provide: i6.ControlContainer,
-                useExisting: i6.NgForm,
+                provide: i7.ControlContainer,
+                useExisting: i7.NgForm,
             },
         ], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2FAVerificationSMSComponent, decorators: [{
@@ -95,8 +166,8 @@
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                         viewProviders: [
                             {
-                                provide: i6.ControlContainer,
-                                useExisting: i6.NgForm,
+                                provide: i7.ControlContainer,
+                                useExisting: i7.NgForm,
                             },
                         ],
                     }]
@@ -106,12 +177,14 @@
                     type: i0.Output
                 }] } });
 
-    var Fs2FAVerificationFormComponent = /** @class */ (function () {
-        function Fs2FAVerificationFormComponent(verificationProvider, _cdRef) {
+    var Fs2FAVerificationComponent = /** @class */ (function () {
+        function Fs2FAVerificationComponent(verificationProvider, _cdRef, _dialog) {
             var _this = this;
             this.verificationProvider = verificationProvider;
             this._cdRef = _cdRef;
+            this._dialog = _dialog;
             this.verified = new i0.EventEmitter();
+            this.backToSignIn = new i0.EventEmitter();
             this.resendInProgress = false;
             this.trustedDevice = false;
             this._destroy$ = new rxjs.Subject();
@@ -123,14 +196,14 @@
                 }));
             };
         }
-        Fs2FAVerificationFormComponent.prototype.ngOnDestroy = function () {
+        Fs2FAVerificationComponent.prototype.ngOnDestroy = function () {
             this._destroy$.next();
             this._destroy$.complete();
         };
-        Fs2FAVerificationFormComponent.prototype.codeChanged = function (code) {
+        Fs2FAVerificationComponent.prototype.codeChanged = function (code) {
             this._code = code;
         };
-        Fs2FAVerificationFormComponent.prototype.resend = function () {
+        Fs2FAVerificationComponent.prototype.resend = function () {
             var _this = this;
             this.resendInProgress = true;
             this.verificationProvider
@@ -141,134 +214,27 @@
                 _this._cdRef.markForCheck();
             });
         };
-        return Fs2FAVerificationFormComponent;
-    }());
-    Fs2FAVerificationFormComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2FAVerificationFormComponent, deps: [{ token: FS_2FA_VERIFICATION_PROVIDER }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    Fs2FAVerificationFormComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: Fs2FAVerificationFormComponent, selector: "fs-2fa-verification-form", inputs: { method: "method" }, outputs: { verified: "verified" }, ngImport: i0__namespace, template: "<form fsForm [submit]=\"verify\">\n  <h2>2-Step Verification</h2>\n\n  <div class=\"code-container\">\n    <ng-container *ngIf=\"method.type === 'authenticator' else code\">\n      <fs-2fa-verification-otp class=\"otp\"></fs-2fa-verification-otp>\n    </ng-container>\n\n    <ng-template #code>\n      <fs-2fa-verification-code\n        [method]=\"method\"\n        (codeChange)=\"codeChanged($event)\">\n      </fs-2fa-verification-code>\n    </ng-template>\n  </div>\n\n  <div class=\"additional\">\n    <mat-checkbox\n      name=\"trust-device\"\n      [(ngModel)]=\"trustedDevice\">\n      Trust this device\n    </mat-checkbox>\n\n    <span matSuffix>\n    <button mat-button\n            type=\"button\"\n            color=\"primary\"\n            (click)=\"resend()\"\n            [disabled]=\"resendInProgress\"\n            class=\"resend-code-btn\">\n      <ng-container *ngIf=\"!resendInProgress else sending\">\n        Resend Code\n      </ng-container>\n      <ng-template #sending>\n        <mat-spinner [diameter]=\"12\"></mat-spinner> Sending\n      </ng-template>\n    </button>\n  </span>\n  </div>\n\n  <div class=\"actions\">\n    <button mat-raised-button\n            color=\"primary\"\n            type=\"submit\">\n      Verify\n    </button>\n\n    <ng-content></ng-content>\n  </div>\n</form>\n", styles: ["h2,.code-container{text-align:center}.code-container .otp{margin-bottom:15px}:host ::ng-deep .actions{margin:10px 0}:host ::ng-deep .actions a{width:100%;font-weight:400}:host ::ng-deep .actions button{width:100%}:host ::ng-deep .actions button[type=button]{font-weight:400;text-transform:none}.additional{display:flex;justify-content:space-between;align-items:baseline;margin-top:-5px}.additional .resend-code-btn{text-transform:none}.additional .resend-code-btn mat-spinner{display:inline-block;vertical-align:middle}\n"], components: [{ type: Fs2FAVerificationOTPComponent, selector: "fs-2fa-verification-otp", outputs: ["codeChange"] }, { type: Fs2FAVerificationSMSComponent, selector: "fs-2fa-verification-code", inputs: ["method"], outputs: ["codeChange"] }, { type: i3__namespace$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i4__namespace.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"] }, { type: i5__namespace.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i6__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i6__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i6__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "successDelay", "errorDelay", "submit", "tabGroup"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { type: i8__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1__namespace$1.MatSuffix, selector: "[matSuffix]" }, { type: i1__namespace.ɵw, selector: "button[type=\"submit\"]", inputs: ["dirtySubmit", "name"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2FAVerificationFormComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'fs-2fa-verification-form',
-                        templateUrl: './2fa-verification-form.component.html',
-                        styleUrls: [
-                            './2fa-verification-form.component.scss',
-                        ],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () {
-            return [{ type: undefined, decorators: [{
-                            type: i0.Inject,
-                            args: [FS_2FA_VERIFICATION_PROVIDER]
-                        }] }, { type: i0__namespace.ChangeDetectorRef }];
-        }, propDecorators: { method: [{
-                    type: i0.Input
-                }], verified: [{
-                    type: i0.Output
-                }] } });
-
-    exports.FsVerificationMethodType = void 0;
-    (function (FsVerificationMethodType) {
-        FsVerificationMethodType["Sms"] = "sms";
-        FsVerificationMethodType["Email"] = "email";
-        FsVerificationMethodType["Authenticator"] = "authenticator";
-        FsVerificationMethodType["Code"] = "code";
-    })(exports.FsVerificationMethodType || (exports.FsVerificationMethodType = {}));
-
-    var Fs2FaVerificationMethodsComponent = /** @class */ (function () {
-        function Fs2FaVerificationMethodsComponent(_verificationProvider) {
+        Fs2FAVerificationComponent.prototype.showVerificationMethods = function () {
             var _this = this;
-            this._verificationProvider = _verificationProvider;
-            this.methodChange = new i0.EventEmitter();
-            this.cancelled = new i0.EventEmitter();
-            this.verificationMethodType = exports.FsVerificationMethodType;
-            this.setVerificationMethod = function () {
-                return _this._verificationProvider
-                    .updateVerificationMethod(_this.method.id)
-                    .pipe(operators.tap(function (method) {
-                    _this.methodChange.emit(method);
-                }));
-            };
-            this._initMethods();
-        }
-        Fs2FaVerificationMethodsComponent.prototype.ngOnInit = function () {
-        };
-        Fs2FaVerificationMethodsComponent.prototype.compareWith = function (o1, o2) {
-            return o1 && o2 && o1.id === o2.id;
-        };
-        Fs2FaVerificationMethodsComponent.prototype.cancel = function () {
-            this.cancelled.emit();
-        };
-        Fs2FaVerificationMethodsComponent.prototype._initMethods = function () {
-            this.methods$ = this._verificationProvider
-                .methods()
-                .pipe(operators.map(function (methods) {
-                return methods
-                    .reduce(function (acc, method) {
-                    if (!acc[method.type]) {
-                        acc[method.type] = [];
-                    }
-                    acc[method.type].push(method);
-                    return acc;
-                }, {});
-            }), operators.shareReplay(1));
-        };
-        return Fs2FaVerificationMethodsComponent;
-    }());
-    Fs2FaVerificationMethodsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2FaVerificationMethodsComponent, deps: [{ token: FS_2FA_VERIFICATION_PROVIDER }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    Fs2FaVerificationMethodsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: Fs2FaVerificationMethodsComponent, selector: "fs-2fa-verification-methods", inputs: { method: "method" }, outputs: { methodChange: "methodChange", cancelled: "cancelled" }, ngImport: i0__namespace, template: "<h2>\n  Verification Methods\n</h2>\n<form fsForm [submit]=\"setVerificationMethod\">\n  <ng-container *fsSkeleton=\"methods$ | async as methods\">\n    <fs-radio-group [(ngModel)]=\"method\" name=\"method\" [compareWith]=\"compareWith\">\n      <ng-container *ngFor=\"let methodMap of methods | keyvalue\">\n        <div class=\"method\">\n          <ng-container [ngSwitch]=\"methodMap.key\">\n            <ng-container *ngSwitchCase=\"verificationMethodType.Sms\">\n              <div class=\"method-header\">\n                <div class=\"method-icon\">\n                  <mat-icon>\n                    smartphone\n                  </mat-icon>\n                </div>\n                <div class=\"method-name\">\n                  <div class=\"method-title\">Text Message</div>\n                  <div class=\"method-subtitle\">\n                    Verification code send to one of following mobile number\n                  </div>\n                </div>\n              </div>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"verificationMethodType.Email\">\n              <div class=\"method-header\">\n                <div class=\"method-icon\">\n                  <mat-icon>\n                    mail\n                  </mat-icon>\n                </div>\n                <div class=\"method-name\">\n                  <div class=\"method-title\">Email</div>\n                  <div class=\"method-subtitle\">\n                    Verification code send to one of following email\n                  </div>\n                </div>\n              </div>\n            </ng-container>\n          </ng-container>\n\n          <ng-container [ngSwitch]=\"methodMap.key\">\n            <ng-container *ngSwitchCase=\"verificationMethodType.Sms\">\n              <mat-radio-button class=\"method-item\" *ngFor=\"let method of methodMap.value\" [value]=\"method\">\n                + {{ method.phoneCode }} {{ method.phoneNumber }}\n              </mat-radio-button>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"verificationMethodType.Email\">\n              <mat-radio-button class=\"method-item\" *ngFor=\"let method of methodMap.value\" [value]=\"method\">\n                {{ method.email }}\n              </mat-radio-button>\n            </ng-container>\n          </ng-container>\n        </div>\n      </ng-container>\n    </fs-radio-group>\n  </ng-container>\n\n  <div class=\"actions\">\n    <ng-container *ngIf=\"methods$ | async\">\n      <button mat-button type=\"submit\" color=\"primary\">Next</button>\n    </ng-container>\n    <button mat-button type=\"button\" (click)=\"cancel()\">Cancel</button>\n  </div>\n</form>\n", styles: [".method{display:block;margin-bottom:20px}.method .method-header{display:flex;align-items:flex-start}.method .method-header .method-name{margin-left:10px}.method .method-header .method-name .method-title{font-size:14px;font-weight:400}.method .method-header .method-name .method-subtitle{font-size:12px;color:#a3a3a3}.method .method-item{display:block;margin:10px 0 0 35px}\n"], components: [{ type: i1__namespace$2.FsRadioGroupComponent, selector: "fs-radio-group", inputs: ["orientation", "radioPosition", "compareWith", "required", "disabled", "label", "name"] }, { type: i2__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3__namespace$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: i4__namespace.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: i6__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i6__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i6__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "successDelay", "errorDelay", "submit", "tabGroup"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { type: i7__namespace.ɵa, selector: "[fsSkeleton]", inputs: ["fsSkeletonPattern", "fsSkeleton"] }, { type: i6__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i8__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i8__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i8__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.ɵw, selector: "button[type=\"submit\"]", inputs: ["dirtySubmit", "name"] }], pipes: { "async": i8__namespace.AsyncPipe, "keyvalue": i8__namespace.KeyValuePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2FaVerificationMethodsComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'fs-2fa-verification-methods',
-                        templateUrl: './2fa-verification-methods.component.html',
-                        styleUrls: [
-                            './2fa-verification-methods.component.scss',
-                        ],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () {
-            return [{ type: undefined, decorators: [{
-                            type: i0.Inject,
-                            args: [FS_2FA_VERIFICATION_PROVIDER]
-                        }] }];
-        }, propDecorators: { method: [{
-                    type: i0.Input
-                }], methodChange: [{
-                    type: i0.Output
-                }], cancelled: [{
-                    type: i0.Output
-                }] } });
-
-    var Fs2FAVerificationComponent = /** @class */ (function () {
-        function Fs2FAVerificationComponent() {
-            this.verified = new i0.EventEmitter();
-            this.backToSignIn = new i0.EventEmitter();
-            this._view = 'code';
-        }
-        Object.defineProperty(Fs2FAVerificationComponent.prototype, "view", {
-            get: function () {
-                return this._view;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Fs2FAVerificationComponent.prototype.switchVerificationMethod = function (method) {
-            this._view = method;
-        };
-        Fs2FAVerificationComponent.prototype.setActiveMethod = function (method) {
-            this.method = method;
-            this.switchVerificationMethod('code');
-        };
-        Fs2FAVerificationComponent.prototype.cancel = function () {
-            this.switchVerificationMethod('code');
+            this._dialog.open(Fs2FaVerificationMethodsComponent, {
+                data: {
+                    method: this.method,
+                }
+            })
+                .afterClosed()
+                .pipe(operators.filter(function (method) { return !!method; }))
+                .subscribe(function (method) {
+                _this.method = method;
+                _this._cdRef.markForCheck();
+            });
         };
         Fs2FAVerificationComponent.prototype.toSignIn = function () {
             this.backToSignIn.emit();
         };
         return Fs2FAVerificationComponent;
     }());
-    Fs2FAVerificationComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2FAVerificationComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    Fs2FAVerificationComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: Fs2FAVerificationComponent, selector: "fs-2fa-verification", inputs: { method: "method" }, outputs: { verified: "verified", backToSignIn: "backToSignIn" }, ngImport: i0__namespace, template: "<ng-container [ngSwitch]=\"view\">\n  <ng-container *ngSwitchCase=\"'code'\">\n    <fs-2fa-verification-form [method]=\"method\" (verified)=\"verified.emit($event)\">\n      <button mat-button type=\"button\" (click)=\"switchVerificationMethod('methods')\">\n        Try other ways to verify\n      </button>\n\n      <a mat-button (click)=\"toSignIn()\">\n        Back to signin\n      </a>\n    </fs-2fa-verification-form>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"'methods'\">\n    <fs-2fa-verification-methods\n      [method]=\"method\"\n      (methodChange)=\"setActiveMethod($event)\"\n      (cancelled)=\"cancel()\">\n    </fs-2fa-verification-methods>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:block}\n"], components: [{ type: Fs2FAVerificationFormComponent, selector: "fs-2fa-verification-form", inputs: ["method"], outputs: ["verified"] }, { type: i4__namespace.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"] }, { type: i4__namespace.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { type: Fs2FaVerificationMethodsComponent, selector: "fs-2fa-verification-methods", inputs: ["method"], outputs: ["methodChange", "cancelled"] }], directives: [{ type: i8__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i8__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    Fs2FAVerificationComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2FAVerificationComponent, deps: [{ token: FS_2FA_VERIFICATION_PROVIDER }, { token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace$1.FsDialog }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    Fs2FAVerificationComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: Fs2FAVerificationComponent, selector: "fs-2fa-verification", inputs: { method: "method" }, outputs: { verified: "verified", backToSignIn: "backToSignIn" }, ngImport: i0__namespace, template: "<form fsForm [submit]=\"verify\" [dirtySubmitButton]=\"false\">\n  <h2>2-Step Verification</h2>\n\n  <div class=\"code-container\">\n    <ng-container *ngIf=\"method.type === 'authenticator' else code\">\n      <fs-2fa-verification-otp class=\"otp\"></fs-2fa-verification-otp>\n    </ng-container>\n\n    <ng-template #code>\n      <fs-2fa-verification-code\n        [method]=\"method\"\n        (codeChange)=\"codeChanged($event)\">\n      </fs-2fa-verification-code>\n    </ng-template>\n  </div>\n\n  <div class=\"additional\">\n    <mat-checkbox\n      name=\"trust-device\"\n      [(ngModel)]=\"trustedDevice\">\n      Trust this device\n    </mat-checkbox>\n\n    <span class=\"resend-code-btn\">\n      <ng-container *ngIf=\"!resendInProgress else sending\">\n        <a (click)=\"resend()\">\n          Resend Code\n        </a>\n      </ng-container>\n      <ng-template #sending>\n        <mat-spinner [diameter]=\"12\"></mat-spinner> Sending\n      </ng-template>\n    </span>\n  </div>\n\n  <div class=\"actions\">\n    <button mat-raised-button\n            color=\"primary\"\n            type=\"submit\">\n      Verify\n    </button>\n\n    <button mat-button type=\"button\" (click)=\"showVerificationMethods()\">\n      Try other ways to verify\n    </button>\n\n    <button mat-button type=\"button\" (click)=\"toSignIn()\">\n      Back to signin\n    </button>\n  </div>\n</form>\n", styles: [":host{display:block}h2,.code-container{text-align:center}.code-container .otp{margin-bottom:15px}:host ::ng-deep .actions{margin:10px 0}:host ::ng-deep .actions a{width:100%;font-weight:400}:host ::ng-deep .actions button{width:100%;margin-bottom:5px}:host ::ng-deep .actions button[type=button]{font-weight:400}.additional{display:flex;justify-content:space-between;align-items:baseline;margin-top:-5px}.additional .resend-code-btn{cursor:pointer;text-transform:none}.additional .resend-code-btn mat-spinner{display:inline-block;vertical-align:middle}\n"], components: [{ type: Fs2FAVerificationOTPComponent, selector: "fs-2fa-verification-otp", outputs: ["codeChange"] }, { type: Fs2FAVerificationSMSComponent, selector: "fs-2fa-verification-code", inputs: ["method"], outputs: ["codeChange"] }, { type: i4__namespace$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i5__namespace$1.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: i6__namespace.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: i7__namespace.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i7__namespace.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i7__namespace.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i8__namespace.FsFormDirective, selector: "[fsForm]", inputs: ["wrapperSelector", "messageSelector", "hintSelector", "labelSelector", "autocomplete", "shortcuts", "confirm", "confirmDialog", "confirmDrawer", "confirmBrowser", "confirmTabs", "dirtySubmitButton", "successDelay", "errorDelay", "submit", "tabGroup"], outputs: ["fsForm", "invalid", "valid", "submitted", "reseted", "cleared"] }, { type: i10__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7__namespace.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i8__namespace.ɵw, selector: "button[type=\"submit\"]", inputs: ["dirtySubmit", "name"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2FAVerificationComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -279,7 +245,12 @@
                         ],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
-            }], ctorParameters: function () { return []; }, propDecorators: { method: [{
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [FS_2FA_VERIFICATION_PROVIDER]
+                        }] }, { type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace$1.FsDialog }];
+        }, propDecorators: { method: [{
                     type: i0.Input
                 }], verified: [{
                     type: i0.Output
@@ -294,61 +265,62 @@
     }());
     Fs2FaModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2FaModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
     Fs2FaModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2FaModule, declarations: [Fs2FAVerificationComponent,
-            Fs2FAVerificationFormComponent,
             Fs2FAVerificationSMSComponent,
             Fs2FAVerificationOTPComponent,
-            Fs2FaVerificationMethodsComponent], imports: [i8.CommonModule,
-            i6.FormsModule,
-            i1$1.MatFormFieldModule,
-            i3.MatInputModule,
-            i4.MatButtonModule,
-            i1.FsFormModule,
+            Fs2FaVerificationMethodsComponent], imports: [i10.CommonModule,
+            i7.FormsModule,
+            i1$2.MatFormFieldModule,
+            i3$1.MatInputModule,
+            i6.MatButtonModule,
+            i8.FsFormModule,
+            i3.FsRadioGroupModule,
+            i1$1.FsDialogModule,
             // CodeInputModule,
-            i3$1.MatCheckboxModule,
-            i5.MatProgressSpinnerModule,
-            i7.FsSkeletonModule,
-            i7.FsSkeletonModule,
-            i2.MatIconModule,
-            i3$2.MatRadioModule,
-            i1$2.FsRadioGroupModule], exports: [Fs2FAVerificationComponent] });
+            i4$1.MatCheckboxModule,
+            i5$1.MatProgressSpinnerModule,
+            i9.FsSkeletonModule,
+            i9.FsSkeletonModule,
+            i4.MatIconModule,
+            i5.MatRadioModule], exports: [Fs2FAVerificationComponent] });
     Fs2FaModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2FaModule, providers: [], imports: [[
-                i8.CommonModule,
-                i6.FormsModule,
-                i1$1.MatFormFieldModule,
-                i3.MatInputModule,
-                i4.MatButtonModule,
-                i1.FsFormModule,
+                i10.CommonModule,
+                i7.FormsModule,
+                i1$2.MatFormFieldModule,
+                i3$1.MatInputModule,
+                i6.MatButtonModule,
+                i8.FsFormModule,
+                i3.FsRadioGroupModule,
+                i1$1.FsDialogModule,
                 // CodeInputModule,
-                i3$1.MatCheckboxModule,
-                i5.MatProgressSpinnerModule,
-                i7.FsSkeletonModule,
-                i7.FsSkeletonModule,
-                i2.MatIconModule,
-                i3$2.MatRadioModule,
-                i1$2.FsRadioGroupModule,
+                i4$1.MatCheckboxModule,
+                i5$1.MatProgressSpinnerModule,
+                i9.FsSkeletonModule,
+                i9.FsSkeletonModule,
+                i4.MatIconModule,
+                i5.MatRadioModule,
             ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2FaModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         imports: [
-                            i8.CommonModule,
-                            i6.FormsModule,
-                            i1$1.MatFormFieldModule,
-                            i3.MatInputModule,
-                            i4.MatButtonModule,
-                            i1.FsFormModule,
+                            i10.CommonModule,
+                            i7.FormsModule,
+                            i1$2.MatFormFieldModule,
+                            i3$1.MatInputModule,
+                            i6.MatButtonModule,
+                            i8.FsFormModule,
+                            i3.FsRadioGroupModule,
+                            i1$1.FsDialogModule,
                             // CodeInputModule,
-                            i3$1.MatCheckboxModule,
-                            i5.MatProgressSpinnerModule,
-                            i7.FsSkeletonModule,
-                            i7.FsSkeletonModule,
-                            i2.MatIconModule,
-                            i3$2.MatRadioModule,
-                            i1$2.FsRadioGroupModule,
+                            i4$1.MatCheckboxModule,
+                            i5$1.MatProgressSpinnerModule,
+                            i9.FsSkeletonModule,
+                            i9.FsSkeletonModule,
+                            i4.MatIconModule,
+                            i5.MatRadioModule,
                         ],
                         declarations: [
                             Fs2FAVerificationComponent,
-                            Fs2FAVerificationFormComponent,
                             Fs2FAVerificationSMSComponent,
                             Fs2FAVerificationOTPComponent,
                             Fs2FaVerificationMethodsComponent,