@firestitch/2fa 12.0.3 → 12.0.6

package/fesm2015/firestitch-2fa.js

@@ -1,34 +1,103 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, EventEmitter, Component, ChangeDetectionStrategy, Output, Input, Inject, NgModule } from '@angular/core';
-import * as i6 from '@angular/forms';
+import { InjectionToken, Component, ChangeDetectionStrategy, Inject, EventEmitter, Output, Input, NgModule } from '@angular/core';
+import * as i7 from '@angular/forms';
 import { ControlContainer, NgForm, FormsModule } from '@angular/forms';
-import * as i8 from '@angular/common';
+import * as i10 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2 from '@angular/material/icon';
+import * as i4 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i3$2 from '@angular/material/radio';
+import * as i5 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
-import * as i4 from '@angular/material/button';
+import * as i6 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i1$1 from '@angular/material/form-field';
+import * as i1$2 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i3 from '@angular/material/input';
+import * as i3$1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i3$1 from '@angular/material/checkbox';
+import * as i4$1 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i5 from '@angular/material/progress-spinner';
+import * as i5$1 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i1 from '@firestitch/form';
+import * as i8 from '@firestitch/form';
 import { FsFormModule } from '@firestitch/form';
-import * as i7 from '@firestitch/skeleton';
+import * as i9 from '@firestitch/skeleton';
 import { FsSkeletonModule } from '@firestitch/skeleton';
-import * as i1$2 from '@firestitch/radiogroup';
+import * as i3 from '@firestitch/radiogroup';
 import { FsRadioGroupModule } from '@firestitch/radiogroup';
+import * as i1$1 from '@firestitch/dialog';
+import { FsDialogModule } from '@firestitch/dialog';
+import { tap, map, shareReplay, takeUntil, filter } from 'rxjs/operators';
+import * as i1 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { Subject } from 'rxjs';
-import { tap, takeUntil, map, shareReplay } from 'rxjs/operators';
 
 const FS_2FA_VERIFICATION_PROVIDER = new InjectionToken('Provider for Verification service');
 
+var FsVerificationMethodType;
+(function (FsVerificationMethodType) {
+    FsVerificationMethodType["Sms"] = "sms";
+    FsVerificationMethodType["Email"] = "email";
+    FsVerificationMethodType["Authenticator"] = "authenticator";
+    FsVerificationMethodType["Code"] = "code";
+})(FsVerificationMethodType || (FsVerificationMethodType = {}));
+
+class Fs2FaVerificationMethodsComponent {
+    constructor(_verificationProvider, _dialogData, _dialogRef) {
+        this._verificationProvider = _verificationProvider;
+        this._dialogData = _dialogData;
+        this._dialogRef = _dialogRef;
+        this.verificationMethodType = FsVerificationMethodType;
+        this.setVerificationMethod = () => {
+            return this._verificationProvider
+                .updateVerificationMethod(this.method.id)
+                .pipe(tap((method) => {
+                this._dialogRef.close(method);
+            }));
+        };
+        this._setActiveMethod();
+        this._initMethods();
+    }
+    compareWith(o1, o2) {
+        return o1 && o2 && o1.id === o2.id;
+    }
+    _setActiveMethod() {
+        var _a;
+        this.method = (_a = this._dialogData) === null || _a === void 0 ? void 0 : _a.method;
+    }
+    _initMethods() {
+        this.methods$ = this._verificationProvider
+            .methods()
+            .pipe(map((methods) => {
+            return methods
+                .reduce((acc, method) => {
+                if (!acc[method.type]) {
+                    acc[method.type] = [];
+                }
+                acc[method.type].push(method);
+                return acc;
+            }, {});
+        }), shareReplay(1));
+    }
+}
+Fs2FaVerificationMethodsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Fs2FaVerificationMethodsComponent, deps: [{ token: FS_2FA_VERIFICATION_PROVIDER }, { token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
+Fs2FaVerificationMethodsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: Fs2FaVerificationMethodsComponent, selector: "ng-component", ngImport: i0, 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$1.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i3.FsRadioGroupComponent, selector: "fs-radio-group", inputs: ["orientation", "radioPosition", "compareWith", "required", "disabled", "label", "name"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { 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: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i7.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i8.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.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i9.ɵa, selector: "[fsSkeleton]", inputs: ["fsSkeletonPattern", "fsSkeleton"] }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i10.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.ɵw, selector: "button[type=\"submit\"]", inputs: ["dirtySubmit", "name"] }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], pipes: { "async": i10.AsyncPipe, "keyvalue": i10.KeyValuePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Fs2FaVerificationMethodsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    templateUrl: './2fa-verification-methods.component.html',
+                    styleUrls: [
+                        './2fa-verification-methods.component.scss',
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [FS_2FA_VERIFICATION_PROVIDER]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1.MatDialogRef }]; } });
+
 class Fs2FAVerificationOTPComponent {
     constructor(form) {
         this.form = form;
@@ -42,7 +111,7 @@ class Fs2FAVerificationOTPComponent {
         this.form.triggerSubmit();
     }
 }
-Fs2FAVerificationOTPComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Fs2FAVerificationOTPComponent, deps: [{ token: i1.FsFormDirective }], target: i0.ɵɵFactoryTarget.Component });
+Fs2FAVerificationOTPComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Fs2FAVerificationOTPComponent, deps: [{ token: i8.FsFormDirective }], target: i0.ɵɵFactoryTarget.Component });
 Fs2FAVerificationOTPComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: Fs2FAVerificationOTPComponent, selector: "fs-2fa-verification-otp", outputs: { codeChange: "codeChange" }, ngImport: i0, 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.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Fs2FAVerificationOTPComponent, decorators: [{
             type: Component,
@@ -54,7 +123,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: function () { return [{ type: i1.FsFormDirective }]; }, propDecorators: { codeChange: [{
+        }], ctorParameters: function () { return [{ type: i8.FsFormDirective }]; }, propDecorators: { codeChange: [{
                 type: Output
             }] } });
 
@@ -67,7 +136,7 @@ class Fs2FAVerificationSMSComponent {
     }
 }
 Fs2FAVerificationSMSComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Fs2FAVerificationSMSComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-Fs2FAVerificationSMSComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: Fs2FAVerificationSMSComponent, selector: "fs-2fa-verification-code", inputs: { method: "method" }, outputs: { codeChange: "codeChange" }, ngImport: i0, 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$1.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }], directives: [{ type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.MatLabel, selector: "mat-label" }, { type: i3.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.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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.ɵf, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }], viewProviders: [
+Fs2FAVerificationSMSComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: Fs2FAVerificationSMSComponent, selector: "fs-2fa-verification-code", inputs: { method: "method" }, outputs: { codeChange: "codeChange" }, ngImport: i0, 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$2.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.MatLabel, selector: "mat-label" }, { type: i3$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.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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i8.ɵf, selector: "[fsFormRequired],[ngModel][required]", inputs: ["fsFormRequired", "required", "fsFormRequiredMessage"] }], viewProviders: [
         {
             provide: ControlContainer,
             useExisting: NgForm,
@@ -95,11 +164,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Output
             }] } });
 
-class Fs2FAVerificationFormComponent {
-    constructor(verificationProvider, _cdRef) {
+class Fs2FAVerificationComponent {
+    constructor(verificationProvider, _cdRef, _dialog) {
         this.verificationProvider = verificationProvider;
         this._cdRef = _cdRef;
+        this._dialog = _dialog;
         this.verified = new EventEmitter();
+        this.backToSignIn = new EventEmitter();
         this.resendInProgress = false;
         this.trustedDevice = false;
         this._destroy$ = new Subject();
@@ -128,122 +199,25 @@ class Fs2FAVerificationFormComponent {
             this._cdRef.markForCheck();
         });
     }
-}
-Fs2FAVerificationFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Fs2FAVerificationFormComponent, deps: [{ token: FS_2FA_VERIFICATION_PROVIDER }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-Fs2FAVerificationFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: Fs2FAVerificationFormComponent, selector: "fs-2fa-verification-form", inputs: { method: "method" }, outputs: { verified: "verified" }, ngImport: i0, 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$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.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.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.MatSuffix, selector: "[matSuffix]" }, { type: i1.ɵw, selector: "button[type=\"submit\"]", inputs: ["dirtySubmit", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Fs2FAVerificationFormComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'fs-2fa-verification-form',
-                    templateUrl: './2fa-verification-form.component.html',
-                    styleUrls: [
-                        './2fa-verification-form.component.scss',
-                    ],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [FS_2FA_VERIFICATION_PROVIDER]
-                }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { method: [{
-                type: Input
-            }], verified: [{
-                type: Output
-            }] } });
-
-var FsVerificationMethodType;
-(function (FsVerificationMethodType) {
-    FsVerificationMethodType["Sms"] = "sms";
-    FsVerificationMethodType["Email"] = "email";
-    FsVerificationMethodType["Authenticator"] = "authenticator";
-    FsVerificationMethodType["Code"] = "code";
-})(FsVerificationMethodType || (FsVerificationMethodType = {}));
-
-class Fs2FaVerificationMethodsComponent {
-    constructor(_verificationProvider) {
-        this._verificationProvider = _verificationProvider;
-        this.methodChange = new EventEmitter();
-        this.cancelled = new EventEmitter();
-        this.verificationMethodType = FsVerificationMethodType;
-        this.setVerificationMethod = () => {
-            return this._verificationProvider
-                .updateVerificationMethod(this.method.id)
-                .pipe(tap((method) => {
-                this.methodChange.emit(method);
-            }));
-        };
-        this._initMethods();
-    }
-    ngOnInit() {
-    }
-    compareWith(o1, o2) {
-        return o1 && o2 && o1.id === o2.id;
-    }
-    cancel() {
-        this.cancelled.emit();
-    }
-    _initMethods() {
-        this.methods$ = this._verificationProvider
-            .methods()
-            .pipe(map((methods) => {
-            return methods
-                .reduce((acc, method) => {
-                if (!acc[method.type]) {
-                    acc[method.type] = [];
-                }
-                acc[method.type].push(method);
-                return acc;
-            }, {});
-        }), shareReplay(1));
-    }
-}
-Fs2FaVerificationMethodsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Fs2FaVerificationMethodsComponent, deps: [{ token: FS_2FA_VERIFICATION_PROVIDER }], target: i0.ɵɵFactoryTarget.Component });
-Fs2FaVerificationMethodsComponent.ɵcmp = i0.ɵɵ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, 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$2.FsRadioGroupComponent, selector: "fs-radio-group", inputs: ["orientation", "radioPosition", "compareWith", "required", "disabled", "label", "name"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$2.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: i4.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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i6.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.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.ɵa, selector: "[fsSkeleton]", inputs: ["fsSkeletonPattern", "fsSkeleton"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i8.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.ɵw, selector: "button[type=\"submit\"]", inputs: ["dirtySubmit", "name"] }], pipes: { "async": i8.AsyncPipe, "keyvalue": i8.KeyValuePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Fs2FaVerificationMethodsComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'fs-2fa-verification-methods',
-                    templateUrl: './2fa-verification-methods.component.html',
-                    styleUrls: [
-                        './2fa-verification-methods.component.scss',
-                    ],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [FS_2FA_VERIFICATION_PROVIDER]
-                }] }]; }, propDecorators: { method: [{
-                type: Input
-            }], methodChange: [{
-                type: Output
-            }], cancelled: [{
-                type: Output
-            }] } });
-
-class Fs2FAVerificationComponent {
-    constructor() {
-        this.verified = new EventEmitter();
-        this.backToSignIn = new EventEmitter();
-        this._view = 'code';
-    }
-    get view() {
-        return this._view;
-    }
-    switchVerificationMethod(method) {
-        this._view = method;
-    }
-    setActiveMethod(method) {
-        this.method = method;
-        this.switchVerificationMethod('code');
-    }
-    cancel() {
-        this.switchVerificationMethod('code');
+    showVerificationMethods() {
+        this._dialog.open(Fs2FaVerificationMethodsComponent, {
+            data: {
+                method: this.method,
+            }
+        })
+            .afterClosed()
+            .pipe(filter((method) => !!method))
+            .subscribe((method) => {
+            this.method = method;
+            this._cdRef.markForCheck();
+        });
     }
     toSignIn() {
         this.backToSignIn.emit();
     }
 }
-Fs2FAVerificationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Fs2FAVerificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-Fs2FAVerificationComponent.ɵcmp = i0.ɵɵ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, 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.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.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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i8.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+Fs2FAVerificationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Fs2FAVerificationComponent, deps: [{ token: FS_2FA_VERIFICATION_PROVIDER }, { token: i0.ChangeDetectorRef }, { token: i1$1.FsDialog }], target: i0.ɵɵFactoryTarget.Component });
+Fs2FAVerificationComponent.ɵcmp = i0.ɵɵ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, 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$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$1.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { 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: i7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i7.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i8.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i8.ɵw, selector: "button[type=\"submit\"]", inputs: ["dirtySubmit", "name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Fs2FAVerificationComponent, decorators: [{
             type: Component,
             args: [{
@@ -254,7 +228,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { method: [{
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [FS_2FA_VERIFICATION_PROVIDER]
+                }] }, { type: i0.ChangeDetectorRef }, { type: i1$1.FsDialog }]; }, propDecorators: { method: [{
                 type: Input
             }], verified: [{
                 type: Output
@@ -266,7 +243,6 @@ class Fs2FaModule {
 }
 Fs2FaModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Fs2FaModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 Fs2FaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Fs2FaModule, declarations: [Fs2FAVerificationComponent,
-        Fs2FAVerificationFormComponent,
         Fs2FAVerificationSMSComponent,
         Fs2FAVerificationOTPComponent,
         Fs2FaVerificationMethodsComponent], imports: [CommonModule,
@@ -275,14 +251,15 @@ Fs2FaModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         MatInputModule,
         MatButtonModule,
         FsFormModule,
+        FsRadioGroupModule,
+        FsDialogModule,
         // CodeInputModule,
         MatCheckboxModule,
         MatProgressSpinnerModule,
         FsSkeletonModule,
         FsSkeletonModule,
         MatIconModule,
-        MatRadioModule,
-        FsRadioGroupModule], exports: [Fs2FAVerificationComponent] });
+        MatRadioModule], exports: [Fs2FAVerificationComponent] });
 Fs2FaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Fs2FaModule, providers: [], imports: [[
             CommonModule,
             FormsModule,
@@ -290,6 +267,8 @@ Fs2FaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "1
             MatInputModule,
             MatButtonModule,
             FsFormModule,
+            FsRadioGroupModule,
+            FsDialogModule,
             // CodeInputModule,
             MatCheckboxModule,
             MatProgressSpinnerModule,
@@ -297,7 +276,6 @@ Fs2FaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "1
             FsSkeletonModule,
             MatIconModule,
             MatRadioModule,
-            FsRadioGroupModule,
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Fs2FaModule, decorators: [{
             type: NgModule,
@@ -309,6 +287,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         MatInputModule,
                         MatButtonModule,
                         FsFormModule,
+                        FsRadioGroupModule,
+                        FsDialogModule,
                         // CodeInputModule,
                         MatCheckboxModule,
                         MatProgressSpinnerModule,
@@ -316,11 +296,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         FsSkeletonModule,
                         MatIconModule,
                         MatRadioModule,
-                        FsRadioGroupModule,
                     ],
                     declarations: [
                         Fs2FAVerificationComponent,
-                        Fs2FAVerificationFormComponent,
                         Fs2FAVerificationSMSComponent,
                         Fs2FAVerificationOTPComponent,
                         Fs2FaVerificationMethodsComponent,

package/fesm2015/firestitch-2fa.js.map

@@ -1 +1 @@
-{"version":3,"file":"firestitch-2fa.js","sources":["../../src/app/tokens/verification.token.ts","../../src/app/components/2fa-verification-otp/2fa-verification-otp.component.ts","../../src/app/components/2fa-verification-otp/2fa-verification-otp.component.html","../../src/app/components/2fa-verification-code/2fa-verification-code.component.ts","../../src/app/components/2fa-verification-code/2fa-verification-code.component.html","../../src/app/components/2fa-verification-form/2fa-verification-form.component.ts","../../src/app/components/2fa-verification-form/2fa-verification-form.component.html","../../src/app/enums/verification-method-type.enum.ts","../../src/app/components/2fa-verification-methods/2fa-verification-methods.component.ts","../../src/app/components/2fa-verification-methods/2fa-verification-methods.component.html","../../src/app/components/2fa-verification/2fa-verification.component.ts","../../src/app/components/2fa-verification/2fa-verification.component.html","../../src/app/fs-2fa.module.ts","../../src/public_api.ts","../../src/firestitch-2fa.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\n\nimport { IFsVerificationProvider } from '../interfaces/verification-provider.interface';\n\nexport const FS_2FA_VERIFICATION_PROVIDER = new InjectionToken<IFsVerificationProvider>(\n  'Provider for Verification service',\n);\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  Output,\n} from '@angular/core';\n\nimport { FsFormDirective } from '@firestitch/form';\n\n\n@Component({\n  selector: 'fs-2fa-verification-otp',\n  templateUrl: './2fa-verification-otp.component.html',\n  styleUrls: [\n    './2fa-verification-otp.component.scss'\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Fs2FAVerificationOTPComponent {\n\n  @Output()\n  public codeChange = new EventEmitter<string>();\n\n  constructor(\n    public form: FsFormDirective,\n  ) {}\n\n  public codeChanged(event: string): void {\n    this.codeChange.emit(event);\n    this.form.dirty();\n  }\n\n  public codeCompleted(): void {\n    this.form.triggerSubmit();\n  }\n}\n","<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","import {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  Input,\n  Output,\n} from '@angular/core';\nimport { ControlContainer, NgForm } from '@angular/forms';\n\nimport { IFsVerificationMethod } from '../../interfaces/verification-method.interface';\n\n\n@Component({\n  selector: 'fs-2fa-verification-code',\n  templateUrl: './2fa-verification-code.component.html',\n  styleUrls: [\n    './2fa-verification-code.component.scss',\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  viewProviders: [\n    {\n      provide: ControlContainer,\n      useExisting: NgForm,\n    },\n  ],\n})\nexport class Fs2FAVerificationSMSComponent {\n\n  @Input()\n  public method: IFsVerificationMethod;\n\n  @Output()\n  public codeChange = new EventEmitter<string>();\n\n  public code: string;\n\n  public codeChanged(): void {\n    this.codeChange.emit(this.code);\n  }\n\n}\n","<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","import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  EventEmitter,\n  Inject,\n  Input, OnDestroy,\n  OnInit,\n  Output,\n} from '@angular/core';\n\nimport { Subject } from 'rxjs';\nimport { takeUntil, tap } from 'rxjs/operators';\n\nimport { IFsVerificationMethod } from '../../interfaces/verification-method.interface';\nimport { FS_2FA_VERIFICATION_PROVIDER } from '../../tokens/verification.token';\nimport { IFsVerificationProvider } from '../../interfaces/verification-provider.interface';\n\n\n@Component({\n  selector: 'fs-2fa-verification-form',\n  templateUrl: './2fa-verification-form.component.html',\n  styleUrls: [\n    './2fa-verification-form.component.scss',\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Fs2FAVerificationFormComponent implements OnDestroy {\n\n  @Input()\n  public method: IFsVerificationMethod;\n\n  @Output()\n  public verified = new EventEmitter<unknown>();\n\n  public resendInProgress = false;\n  public trustedDevice = false;\n\n  private _code: string;\n  private _destroy$ = new Subject<void>();\n\n  constructor(\n    @Inject(FS_2FA_VERIFICATION_PROVIDER)\n    public verificationProvider: IFsVerificationProvider,\n    private _cdRef: ChangeDetectorRef,\n  ) {}\n\n  public ngOnDestroy(): void {\n    this._destroy$.next();\n    this._destroy$.complete();\n  }\n\n  public verify = () => {\n    return this.verificationProvider\n      .verify(this._code, this.trustedDevice)\n      .pipe(\n        tap((response) => {\n          this.verified.emit(response);\n        }),\n      );\n  };\n\n  public codeChanged(code: string): void {\n    this._code = code;\n  }\n\n  public resend(): void {\n    this.resendInProgress = true;\n\n    this.verificationProvider\n      .resend()\n      .pipe(\n        takeUntil(this._destroy$),\n      )\n      .subscribe(() => {\n        this.resendInProgress = false;\n\n        this._cdRef.markForCheck();\n      })\n  }\n\n}\n","<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","export enum FsVerificationMethodType {\n  Sms = 'sms',\n  Email = 'email',\n  Authenticator = 'authenticator',\n  Code = 'code',\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  Inject,\n  Input,\n  OnInit,\n  Output,\n} from '@angular/core';\n\nimport { Observable } from 'rxjs';\nimport { map, shareReplay, tap } from 'rxjs/operators';\n\nimport { FS_2FA_VERIFICATION_PROVIDER } from '../../tokens/verification.token';\nimport { FsVerificationMethodType } from '../../enums/verification-method-type.enum';\nimport { IFsVerificationProvider } from '../../interfaces/verification-provider.interface';\nimport { IFsVerificationMethod } from '../../interfaces/verification-method.interface';\n\n\n@Component({\n  selector: 'fs-2fa-verification-methods',\n  templateUrl: './2fa-verification-methods.component.html',\n  styleUrls: [\n    './2fa-verification-methods.component.scss',\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Fs2FaVerificationMethodsComponent implements OnInit {\n\n  @Input()\n  public method: IFsVerificationMethod;\n\n  @Output()\n  public methodChange = new EventEmitter<IFsVerificationMethod>();\n\n  @Output()\n  public cancelled = new EventEmitter<void>();\n\n  public phone: string;\n  public code: string;\n  public methods$: Observable<Record<string, IFsVerificationMethod[]>>;\n  public readonly verificationMethodType = FsVerificationMethodType;\n\n  constructor(\n    @Inject(FS_2FA_VERIFICATION_PROVIDER)\n    private _verificationProvider: IFsVerificationProvider,\n  ) {\n    this._initMethods();\n  }\n\n  public ngOnInit(): void {\n  }\n\n  public compareWith(o1, o2) {\n    return o1 && o2 && o1.id === o2.id\n  }\n\n  public cancel(): void {\n    this.cancelled.emit();\n  }\n\n  public setVerificationMethod = () => {\n    return this._verificationProvider\n      .updateVerificationMethod(this.method.id)\n      .pipe(\n        tap((method: IFsVerificationMethod) => {\n          this.methodChange.emit(method);\n        })\n      );\n  };\n\n  private _initMethods(): void {\n    this.methods$ = this._verificationProvider\n      .methods()\n      .pipe(\n        map((methods) => {\n          return methods\n            .reduce((acc, method) => {\n              if (!acc[method.type]) {\n                acc[method.type] = [];\n              }\n\n              acc[method.type].push(method);\n\n              return acc;\n            }, {});\n        }),\n        shareReplay(1),\n      );\n  }\n}\n","<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","import {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  Input,\n  Output,\n} from '@angular/core';\n\nimport { IFsVerificationMethod } from '../../interfaces/verification-method.interface';\n\n\n@Component({\n  selector: 'fs-2fa-verification',\n  templateUrl: './2fa-verification.component.html',\n  styleUrls: [\n    './2fa-verification.component.scss',\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Fs2FAVerificationComponent {\n\n  @Input()\n  public method: IFsVerificationMethod;\n\n  @Output()\n  public verified = new EventEmitter<unknown>();\n\n  @Output()\n  public backToSignIn = new EventEmitter<void>();\n\n  private _view: 'code' | 'methods' = 'code';\n\n  constructor() {}\n\n  public get view(): 'code' | 'methods' {\n    return this._view;\n  }\n\n  public switchVerificationMethod(method: 'code' | 'methods'): void {\n    this._view = method;\n  }\n\n  public setActiveMethod(method: IFsVerificationMethod): void {\n    this.method = method;\n    this.switchVerificationMethod('code');\n  }\n\n  public cancel(): void {\n    this.switchVerificationMethod('code');\n  }\n\n  public toSignIn(): void {\n    this.backToSignIn.emit();\n  }\n\n}\n","<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","import { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\n\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatRadioModule } from '@angular/material/radio';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\n\nimport { FsFormModule } from '@firestitch/form';\nimport { FsSkeletonModule } from '@firestitch/skeleton';\nimport { FsRadioGroupModule } from '@firestitch/radiogroup';\n\n// import { CodeInputModule } from 'angular-code-input';\n\nimport { Fs2FAVerificationComponent } from './components/2fa-verification/2fa-verification.component';\nimport { Fs2FAVerificationSMSComponent } from './components/2fa-verification-code/2fa-verification-code.component';\nimport { Fs2FAVerificationOTPComponent } from './components/2fa-verification-otp/2fa-verification-otp.component';\nimport { Fs2FAVerificationFormComponent } from './components/2fa-verification-form/2fa-verification-form.component';\nimport { Fs2FaVerificationMethodsComponent } from './components/2fa-verification-methods/2fa-verification-methods.component';\n\n\n@NgModule({\n  imports: [\n    CommonModule,\n    FormsModule,\n\n    MatFormFieldModule,\n    MatInputModule,\n    MatButtonModule,\n\n    FsFormModule,\n\n    // CodeInputModule,\n    MatCheckboxModule,\n    MatProgressSpinnerModule,\n    FsSkeletonModule,\n    FsSkeletonModule,\n    MatIconModule,\n    MatRadioModule,\n    FsRadioGroupModule,\n  ],\n  declarations: [\n    Fs2FAVerificationComponent,\n\n    Fs2FAVerificationFormComponent,\n    Fs2FAVerificationSMSComponent,\n    Fs2FAVerificationOTPComponent,\n    Fs2FaVerificationMethodsComponent,\n  ],\n  exports: [\n    Fs2FAVerificationComponent,\n  ],\n  providers: [],\n})\nexport class Fs2FaModule {}\n","/*\n * Public API Surface of fs-2fa\n */\n\nexport { Fs2FaModule } from './app/fs-2fa.module';\n\n// Components\nexport { Fs2FAVerificationComponent } from './app/components/2fa-verification/2fa-verification.component';\n\nexport { IFsVerificationProvider } from './app/interfaces/verification-provider.interface';\nexport { IFsVerificationMethod } from './app/interfaces/verification-method.interface';\n\nexport { FsVerificationMethodType } from './app/enums/verification-method-type.enum';\n\nexport { FS_2FA_VERIFICATION_PROVIDER } from './app/tokens/verification.token';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"firestitch-2fa.js","sources":["../../src/app/tokens/verification.token.ts","../../src/app/enums/verification-method-type.enum.ts","../../src/app/components/2fa-verification-methods/2fa-verification-methods.component.ts","../../src/app/components/2fa-verification-methods/2fa-verification-methods.component.html","../../src/app/components/2fa-verification-otp/2fa-verification-otp.component.ts","../../src/app/components/2fa-verification-otp/2fa-verification-otp.component.html","../../src/app/components/2fa-verification-code/2fa-verification-code.component.ts","../../src/app/components/2fa-verification-code/2fa-verification-code.component.html","../../src/app/components/2fa-verification/2fa-verification.component.ts","../../src/app/components/2fa-verification/2fa-verification.component.html","../../src/app/fs-2fa.module.ts","../../src/public_api.ts","../../src/firestitch-2fa.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\n\nimport { IFsVerificationProvider } from '../interfaces/verification-provider.interface';\n\nexport const FS_2FA_VERIFICATION_PROVIDER = new InjectionToken<IFsVerificationProvider>(\n  'Provider for Verification service',\n);\n","export enum FsVerificationMethodType {\n  Sms = 'sms',\n  Email = 'email',\n  Authenticator = 'authenticator',\n  Code = 'code',\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  Inject,\n} from '@angular/core';\n\nimport { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';\n\nimport { Observable } from 'rxjs';\nimport { map, shareReplay, tap } from 'rxjs/operators';\n\nimport { FS_2FA_VERIFICATION_PROVIDER } from '../../tokens/verification.token';\nimport { FsVerificationMethodType } from '../../enums/verification-method-type.enum';\nimport { IFsVerificationProvider } from '../../interfaces/verification-provider.interface';\nimport { IFsVerificationMethod } from '../../interfaces/verification-method.interface';\n\n\n@Component({\n  templateUrl: './2fa-verification-methods.component.html',\n  styleUrls: [\n    './2fa-verification-methods.component.scss',\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Fs2FaVerificationMethodsComponent {\n\n  public method: IFsVerificationMethod;\n  public phone: string;\n  public code: string;\n  public methods$: Observable<Record<string, IFsVerificationMethod[]>>;\n  public readonly verificationMethodType = FsVerificationMethodType;\n\n  constructor(\n    @Inject(FS_2FA_VERIFICATION_PROVIDER)\n    private _verificationProvider: IFsVerificationProvider,\n    @Inject(MAT_DIALOG_DATA)\n    private _dialogData: any,\n    private _dialogRef: MatDialogRef<Fs2FaVerificationMethodsComponent>,\n  ) {\n    this._setActiveMethod();\n    this._initMethods();\n  }\n\n  public compareWith(o1, o2) {\n    return o1 && o2 && o1.id === o2.id\n  }\n\n  public setVerificationMethod = () => {\n    return this._verificationProvider\n      .updateVerificationMethod(this.method.id)\n      .pipe(\n        tap((method: IFsVerificationMethod) => {\n          this._dialogRef.close(method);\n        })\n      );\n  };\n\n  private _setActiveMethod(): void {\n    this.method = this._dialogData?.method;\n  }\n\n  private _initMethods(): void {\n    this.methods$ = this._verificationProvider\n      .methods()\n      .pipe(\n        map((methods) => {\n          return methods\n            .reduce((acc, method) => {\n              if (!acc[method.type]) {\n                acc[method.type] = [];\n              }\n\n              acc[method.type].push(method);\n\n              return acc;\n            }, {});\n        }),\n        shareReplay(1),\n      );\n  }\n}\n","<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","import {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  Output,\n} from '@angular/core';\n\nimport { FsFormDirective } from '@firestitch/form';\n\n\n@Component({\n  selector: 'fs-2fa-verification-otp',\n  templateUrl: './2fa-verification-otp.component.html',\n  styleUrls: [\n    './2fa-verification-otp.component.scss'\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Fs2FAVerificationOTPComponent {\n\n  @Output()\n  public codeChange = new EventEmitter<string>();\n\n  constructor(\n    public form: FsFormDirective,\n  ) {}\n\n  public codeChanged(event: string): void {\n    this.codeChange.emit(event);\n    this.form.dirty();\n  }\n\n  public codeCompleted(): void {\n    this.form.triggerSubmit();\n  }\n}\n","<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","import {\n  ChangeDetectionStrategy,\n  Component,\n  EventEmitter,\n  Input,\n  Output,\n} from '@angular/core';\nimport { ControlContainer, NgForm } from '@angular/forms';\n\nimport { IFsVerificationMethod } from '../../interfaces/verification-method.interface';\n\n\n@Component({\n  selector: 'fs-2fa-verification-code',\n  templateUrl: './2fa-verification-code.component.html',\n  styleUrls: [\n    './2fa-verification-code.component.scss',\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  viewProviders: [\n    {\n      provide: ControlContainer,\n      useExisting: NgForm,\n    },\n  ],\n})\nexport class Fs2FAVerificationSMSComponent {\n\n  @Input()\n  public method: IFsVerificationMethod;\n\n  @Output()\n  public codeChange = new EventEmitter<string>();\n\n  public code: string;\n\n  public codeChanged(): void {\n    this.codeChange.emit(this.code);\n  }\n\n}\n","<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","import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  EventEmitter,\n  Inject,\n  Input,\n  OnDestroy,\n  Output,\n} from '@angular/core';\n\nimport { FsDialog } from '@firestitch/dialog';\n\nimport { filter, takeUntil, tap } from 'rxjs/operators';\n\nimport { IFsVerificationMethod } from '../../interfaces/verification-method.interface';\nimport { Fs2FaVerificationMethodsComponent } from '../2fa-verification-methods/2fa-verification-methods.component';\nimport { Subject } from 'rxjs';\nimport { FS_2FA_VERIFICATION_PROVIDER } from '../../tokens/verification.token';\nimport { IFsVerificationProvider } from '../../interfaces/verification-provider.interface';\n\n\n@Component({\n  selector: 'fs-2fa-verification',\n  templateUrl: './2fa-verification.component.html',\n  styleUrls: [\n    './2fa-verification.component.scss',\n  ],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Fs2FAVerificationComponent implements OnDestroy {\n\n  @Input()\n  public method: IFsVerificationMethod;\n\n  @Output()\n  public verified = new EventEmitter<unknown>();\n\n  @Output()\n  public backToSignIn = new EventEmitter<void>();\n\n\n  public resendInProgress = false;\n  public trustedDevice = false;\n\n  private _code: string;\n  private _destroy$ = new Subject<void>();\n\n  constructor(\n    @Inject(FS_2FA_VERIFICATION_PROVIDER)\n    public verificationProvider: IFsVerificationProvider,\n    private _cdRef: ChangeDetectorRef,\n    private _dialog: FsDialog,\n  ) {}\n\n  public ngOnDestroy(): void {\n    this._destroy$.next();\n    this._destroy$.complete();\n  }\n\n  public verify = () => {\n    return this.verificationProvider\n      .verify(this._code, this.trustedDevice)\n      .pipe(\n        tap((response) => {\n          this.verified.emit(response);\n        }),\n      );\n  };\n\n  public codeChanged(code: string): void {\n    this._code = code;\n  }\n\n  public resend(): void {\n    this.resendInProgress = true;\n\n    this.verificationProvider\n      .resend()\n      .pipe(\n        takeUntil(this._destroy$),\n      )\n      .subscribe(() => {\n        this.resendInProgress = false;\n\n        this._cdRef.markForCheck();\n      })\n  }\n\n  public showVerificationMethods(): void {\n    this._dialog.open(\n      Fs2FaVerificationMethodsComponent,\n      {\n        data: {\n          method: this.method,\n        }\n      }\n    )\n      .afterClosed()\n      .pipe(\n        filter((method) => !!method),\n      )\n      .subscribe((method) => {\n        this.method = method;\n\n        this._cdRef.markForCheck();\n      });\n  }\n\n  public toSignIn(): void {\n    this.backToSignIn.emit();\n  }\n\n}\n","<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","import { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\n\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatRadioModule } from '@angular/material/radio';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\n\nimport { FsFormModule } from '@firestitch/form';\nimport { FsSkeletonModule } from '@firestitch/skeleton';\nimport { FsRadioGroupModule } from '@firestitch/radiogroup';\nimport { FsDialogModule } from '@firestitch/dialog';\n\n// import { CodeInputModule } from 'angular-code-input';\n\nimport { Fs2FAVerificationComponent } from './components/2fa-verification/2fa-verification.component';\nimport { Fs2FAVerificationSMSComponent } from './components/2fa-verification-code/2fa-verification-code.component';\nimport { Fs2FAVerificationOTPComponent } from './components/2fa-verification-otp/2fa-verification-otp.component';\nimport { Fs2FaVerificationMethodsComponent } from './components/2fa-verification-methods/2fa-verification-methods.component';\n\n\n@NgModule({\n  imports: [\n    CommonModule,\n    FormsModule,\n\n    MatFormFieldModule,\n    MatInputModule,\n    MatButtonModule,\n\n    FsFormModule,\n    FsRadioGroupModule,\n    FsDialogModule,\n\n    // CodeInputModule,\n    MatCheckboxModule,\n    MatProgressSpinnerModule,\n    FsSkeletonModule,\n    FsSkeletonModule,\n    MatIconModule,\n    MatRadioModule,\n  ],\n  declarations: [\n    Fs2FAVerificationComponent,\n\n    Fs2FAVerificationSMSComponent,\n    Fs2FAVerificationOTPComponent,\n    Fs2FaVerificationMethodsComponent,\n  ],\n  exports: [\n    Fs2FAVerificationComponent,\n  ],\n  providers: [],\n})\nexport class Fs2FaModule {}\n","/*\n * Public API Surface of fs-2fa\n */\n\nexport { Fs2FaModule } from './app/fs-2fa.module';\n\n// Components\nexport { Fs2FAVerificationComponent } from './app/components/2fa-verification/2fa-verification.component';\n\nexport { IFsVerificationProvider } from './app/interfaces/verification-provider.interface';\nexport { IFsVerificationMethod } from './app/interfaces/verification-method.interface';\n\nexport { FsVerificationMethodType } from './app/enums/verification-method-type.enum';\n\nexport { FS_2FA_VERIFICATION_PROVIDER } from './app/tokens/verification.token';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAIa,4BAA4B,GAAG,IAAI,cAAc,CAC5D,mCAAmC;;ICLzB;AAAZ,WAAY,wBAAwB;IAClC,uCAAW,CAAA;IACX,2CAAe,CAAA;IACf,2DAA+B,CAAA;IAC/B,yCAAa,CAAA;AACf,CAAC,EALW,wBAAwB,KAAxB,wBAAwB;;MCwBvB,iCAAiC;IAQ5C,YAEU,qBAA8C,EAE9C,WAAgB,EAChB,UAA2D;QAH3D,0BAAqB,GAArB,qBAAqB,CAAyB;QAE9C,gBAAW,GAAX,WAAW,CAAK;QAChB,eAAU,GAAV,UAAU,CAAiD;QAPrD,2BAAsB,GAAG,wBAAwB,CAAC;QAiB3D,0BAAqB,GAAG;YAC7B,OAAO,IAAI,CAAC,qBAAqB;iBAC9B,wBAAwB,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC;iBACxC,IAAI,CACH,GAAG,CAAC,CAAC,MAA6B;gBAChC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;aAC/B,CAAC,CACH,CAAC;SACL,CAAC;QAhBA,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAI,CAAC,YAAY,EAAE,CAAC;KACrB;IAEM,WAAW,CAAC,EAAE,EAAE,EAAE;QACvB,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAA;KACnC;IAYO,gBAAgB;;QACtB,IAAI,CAAC,MAAM,GAAG,MAAA,IAAI,CAAC,WAAW,0CAAE,MAAM,CAAC;KACxC;IAEO,YAAY;QAClB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,qBAAqB;aACvC,OAAO,EAAE;aACT,IAAI,CACH,GAAG,CAAC,CAAC,OAAO;YACV,OAAO,OAAO;iBACX,MAAM,CAAC,CAAC,GAAG,EAAE,MAAM;gBAClB,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE;oBACrB,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC;iBACvB;gBAED,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;gBAE9B,OAAO,GAAG,CAAC;aACZ,EAAE,EAAE,CAAC,CAAC;SACV,CAAC,EACF,WAAW,CAAC,CAAC,CAAC,CACf,CAAC;KACL;;+HAvDU,iCAAiC,kBASlC,4BAA4B,aAE5B,eAAe;mHAXd,iCAAiC,oDCxB9C,yhGAwEA;4FDhDa,iCAAiC;kBAP7C,SAAS;mBAAC;oBACT,WAAW,EAAE,2CAA2C;oBACxD,SAAS,EAAE;wBACT,2CAA2C;qBAC5C;oBACD,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD;;0BAUI,MAAM;2BAAC,4BAA4B;;0BAEnC,MAAM;2BAAC,eAAe;;;MEjBd,6BAA6B;IAKxC,YACS,IAAqB;QAArB,SAAI,GAAJ,IAAI,CAAiB;QAHvB,eAAU,GAAG,IAAI,YAAY,EAAU,CAAC;KAI3C;IAEG,WAAW,CAAC,KAAa;QAC9B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC5B,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;KACnB;IAEM,aAAa;QAClB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;KAC3B;;2HAhBU,6BAA6B;+GAA7B,6BAA6B,sGClB1C,8UAYA;4FDMa,6BAA6B;kBARzC,SAAS;mBAAC;oBACT,QAAQ,EAAE,yBAAyB;oBACnC,WAAW,EAAE,uCAAuC;oBACpD,SAAS,EAAE;wBACT,uCAAuC;qBACxC;oBACD,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD;sGAIQ,UAAU;sBADhB,MAAM;;;MEMI,6BAA6B;IAd1C;QAoBS,eAAU,GAAG,IAAI,YAAY,EAAU,CAAC;KAQhD;IAJQ,WAAW;QAChB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACjC;;2HAZU,6BAA6B;+GAA7B,6BAA6B,qIC1B1C,s6BA2BA,4iDDRiB;QACb;YACE,OAAO,EAAE,gBAAgB;YACzB,WAAW,EAAE,MAAM;SACpB;KACF;4FAEU,6BAA6B;kBAdzC,SAAS;mBAAC;oBACT,QAAQ,EAAE,0BAA0B;oBACpC,WAAW,EAAE,wCAAwC;oBACrD,SAAS,EAAE;wBACT,wCAAwC;qBACzC;oBACD,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,aAAa,EAAE;wBACb;4BACE,OAAO,EAAE,gBAAgB;4BACzB,WAAW,EAAE,MAAM;yBACpB;qBACF;iBACF;8BAIQ,MAAM;sBADZ,KAAK;gBAIC,UAAU;sBADhB,MAAM;;;MEDI,0BAA0B;IAkBrC,YAES,oBAA6C,EAC5C,MAAyB,EACzB,OAAiB;QAFlB,yBAAoB,GAApB,oBAAoB,CAAyB;QAC5C,WAAM,GAAN,MAAM,CAAmB;QACzB,YAAO,GAAP,OAAO,CAAU;QAhBpB,aAAQ,GAAG,IAAI,YAAY,EAAW,CAAC;QAGvC,iBAAY,GAAG,IAAI,YAAY,EAAQ,CAAC;QAGxC,qBAAgB,GAAG,KAAK,CAAC;QACzB,kBAAa,GAAG,KAAK,CAAC;QAGrB,cAAS,GAAG,IAAI,OAAO,EAAQ,CAAC;QAcjC,WAAM,GAAG;YACd,OAAO,IAAI,CAAC,oBAAoB;iBAC7B,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC;iBACtC,IAAI,CACH,GAAG,CAAC,CAAC,QAAQ;gBACX,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;aAC9B,CAAC,CACH,CAAC;SACL,CAAC;KAfE;IAEG,WAAW;QAChB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;QACtB,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC;KAC3B;IAYM,WAAW,CAAC,IAAY;QAC7B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;KACnB;IAEM,MAAM;QACX,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAE7B,IAAI,CAAC,oBAAoB;aACtB,MAAM,EAAE;aACR,IAAI,CACH,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B;aACA,SAAS,CAAC;YACT,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;YAE9B,IAAI,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC;SAC5B,CAAC,CAAA;KACL;IAEM,uBAAuB;QAC5B,IAAI,CAAC,OAAO,CAAC,IAAI,CACf,iCAAiC,EACjC;YACE,IAAI,EAAE;gBACJ,MAAM,EAAE,IAAI,CAAC,MAAM;aACpB;SACF,CACF;aACE,WAAW,EAAE;aACb,IAAI,CACH,MAAM,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,MAAM,CAAC,CAC7B;aACA,SAAS,CAAC,CAAC,MAAM;YAChB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;YAErB,IAAI,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC;SAC5B,CAAC,CAAC;KACN;IAEM,QAAQ;QACb,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;KAC1B;;wHAjFU,0BAA0B,kBAmB3B,4BAA4B;4GAnB3B,0BAA0B,0JC9BvC,y3CAmDA;4FDrBa,0BAA0B;kBARtC,SAAS;mBAAC;oBACT,QAAQ,EAAE,qBAAqB;oBAC/B,WAAW,EAAE,mCAAmC;oBAChD,SAAS,EAAE;wBACT,mCAAmC;qBACpC;oBACD,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD;;0BAoBI,MAAM;2BAAC,4BAA4B;qGAhB/B,MAAM;sBADZ,KAAK;gBAIC,QAAQ;sBADd,MAAM;gBAIA,YAAY;sBADlB,MAAM;;;MEoBI,WAAW;;yGAAX,WAAW;0GAAX,WAAW,iBAXpB,0BAA0B;QAE1B,6BAA6B;QAC7B,6BAA6B;QAC7B,iCAAiC,aAxBjC,YAAY;QACZ,WAAW;QAEX,kBAAkB;QAClB,cAAc;QACd,eAAe;QAEf,YAAY;QACZ,kBAAkB;QAClB,cAAc;;QAGd,iBAAiB;QACjB,wBAAwB;QACxB,gBAAgB;QAChB,gBAAgB;QAChB,aAAa;QACb,cAAc,aAUd,0BAA0B;0GAIjB,WAAW,aAFX,EAAE,YA9BJ;YACP,YAAY;YACZ,WAAW;YAEX,kBAAkB;YAClB,cAAc;YACd,eAAe;YAEf,YAAY;YACZ,kBAAkB;YAClB,cAAc;;YAGd,iBAAiB;YACjB,wBAAwB;YACxB,gBAAgB;YAChB,gBAAgB;YAChB,aAAa;YACb,cAAc;SACf;4FAaU,WAAW;kBAjCvB,QAAQ;mBAAC;oBACR,OAAO,EAAE;wBACP,YAAY;wBACZ,WAAW;wBAEX,kBAAkB;wBAClB,cAAc;wBACd,eAAe;wBAEf,YAAY;wBACZ,kBAAkB;wBAClB,cAAc;;wBAGd,iBAAiB;wBACjB,wBAAwB;wBACxB,gBAAgB;wBAChB,gBAAgB;wBAChB,aAAa;wBACb,cAAc;qBACf;oBACD,YAAY,EAAE;wBACZ,0BAA0B;wBAE1B,6BAA6B;wBAC7B,6BAA6B;wBAC7B,iCAAiC;qBAClC;oBACD,OAAO,EAAE;wBACP,0BAA0B;qBAC3B;oBACD,SAAS,EAAE,EAAE;iBACd;;;ACzDD;;;;ACAA;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firestitch/2fa",
-  "version": "12.0.3",
+  "version": "12.0.6",
   "repository": {
     "type": "git",
     "url": "https://github.com/Firestitch/ngx-2fa"
@@ -13,6 +13,10 @@
     "angular"
   ],
   "license": "MIT",
+  "peerDependencies": {
+    "@firestitch/dialog": ">=12.0.1",
+    "@firestitch/radiogroup": ">=9.1.0"
+  },
   "dependencies": {
     "tslib": "^2.0.0"
   },

package/app/components/2fa-verification-form/2fa-verification-form.component.d.ts

@@ -1,21 +0,0 @@
-import { ChangeDetectorRef, EventEmitter, OnDestroy } from '@angular/core';
-import { IFsVerificationMethod } from '../../interfaces/verification-method.interface';
-import { IFsVerificationProvider } from '../../interfaces/verification-provider.interface';
-import * as i0 from "@angular/core";
-export declare class Fs2FAVerificationFormComponent implements OnDestroy {
-    verificationProvider: IFsVerificationProvider;
-    private _cdRef;
-    method: IFsVerificationMethod;
-    verified: EventEmitter<unknown>;
-    resendInProgress: boolean;
-    trustedDevice: boolean;
-    private _code;
-    private _destroy$;
-    constructor(verificationProvider: IFsVerificationProvider, _cdRef: ChangeDetectorRef);
-    ngOnDestroy(): void;
-    verify: () => import("rxjs").Observable<unknown>;
-    codeChanged(code: string): void;
-    resend(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<Fs2FAVerificationFormComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<Fs2FAVerificationFormComponent, "fs-2fa-verification-form", never, { "method": "method"; }, { "verified": "verified"; }, never, ["*"]>;
-}