@firestitch/2fa 12.0.0 → 12.0.3

package/fesm2015/firestitch-2fa.js

@@ -1,191 +1,344 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input, ViewChild, NgModule } from '@angular/core';
-import * as i6 from '@angular/common';
+import { InjectionToken, EventEmitter, Component, ChangeDetectionStrategy, Output, Input, Inject, NgModule } from '@angular/core';
+import * as i6 from '@angular/forms';
+import { ControlContainer, NgForm, FormsModule } from '@angular/forms';
+import * as i8 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { FlexLayoutModule } from '@angular/flex-layout';
-import * as i1 from '@angular/material/icon';
+import * as i2 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i2$1 from '@firestitch/list';
-import { FsListComponent, FsListModule } from '@firestitch/list';
-import * as i7 from '@firestitch/date';
-import { FsDateModule } from '@firestitch/date';
-import * as i1$1 from '@firestitch/country';
-import { FsCountryModule } from '@firestitch/country';
-import * as i5 from '@firestitch/device';
-import { FsDeviceModule } from '@firestitch/device';
-import * as i2 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { ItemType } from '@firestitch/filter';
-import { Observable, Subject } from 'rxjs';
-import { takeUntil, map } from 'rxjs/operators';
-import * as i3 from '@firestitch/badge';
-import { FsBadgeModule } from '@firestitch/badge';
+import * as i3$2 from '@angular/material/radio';
+import { MatRadioModule } from '@angular/material/radio';
+import * as i4 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i1$1 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i3 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i3$1 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i5 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i1 from '@firestitch/form';
+import { FsFormModule } from '@firestitch/form';
+import * as i7 from '@firestitch/skeleton';
+import { FsSkeletonModule } from '@firestitch/skeleton';
+import * as i1$2 from '@firestitch/radiogroup';
+import { FsRadioGroupModule } from '@firestitch/radiogroup';
+import { Subject } from 'rxjs';
+import { tap, takeUntil, map, shareReplay } from 'rxjs/operators';
 
-class FsCurrentDeviceComponent {
-}
-FsCurrentDeviceComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsCurrentDeviceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FsCurrentDeviceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsCurrentDeviceComponent, selector: "fs-current-device", ngImport: i0, template: "\n<div class=\"current-device\">\n  <mat-icon class=\"circle\">circle</mat-icon>\n  <mat-icon \n      class=\"check\"\n      matTooltip=\"This device\">\n    check_circle\n  </mat-icon>\n</div>\n", styles: [".current-device{transform:scale(.8);z-index:1;position:relative}.current-device .check,.current-device .circle{position:absolute;color:#027db4;top:0}.current-device .circle{color:#fff}\n"], components: [{ type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i2.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsCurrentDeviceComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'fs-current-device',
-                    templateUrl: './current-device.component.html',
-                    styleUrls: ['./current-device.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }] });
+const FS_2FA_VERIFICATION_PROVIDER = new InjectionToken('Provider for Verification service');
+
+class Fs2FAVerificationOTPComponent {
+    constructor(form) {
+        this.form = form;
+        this.codeChange = new EventEmitter();
+    }
+    codeChanged(event) {
+        this.codeChange.emit(event);
+        this.form.dirty();
+    }
+    codeCompleted() {
+        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.ɵ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,
+            args: [{
+                    selector: 'fs-2fa-verification-otp',
+                    templateUrl: './2fa-verification-otp.component.html',
+                    styleUrls: [
+                        './2fa-verification-otp.component.scss'
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i1.FsFormDirective }]; }, propDecorators: { codeChange: [{
+                type: Output
+            }] } });
+
+class Fs2FAVerificationSMSComponent {
+    constructor() {
+        this.codeChange = new EventEmitter();
+    }
+    codeChanged() {
+        this.codeChange.emit(this.code);
+    }
+}
+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: [
+        {
+            provide: ControlContainer,
+            useExisting: NgForm,
+        },
+    ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Fs2FAVerificationSMSComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fs-2fa-verification-code',
+                    templateUrl: './2fa-verification-code.component.html',
+                    styleUrls: [
+                        './2fa-verification-code.component.scss',
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    viewProviders: [
+                        {
+                            provide: ControlContainer,
+                            useExisting: NgForm,
+                        },
+                    ],
+                }]
+        }], propDecorators: { method: [{
+                type: Input
+            }], codeChange: [{
+                type: Output
+            }] } });
+
+class Fs2FAVerificationFormComponent {
+    constructor(verificationProvider, _cdRef) {
+        this.verificationProvider = verificationProvider;
+        this._cdRef = _cdRef;
+        this.verified = new EventEmitter();
+        this.resendInProgress = false;
+        this.trustedDevice = false;
+        this._destroy$ = new Subject();
+        this.verify = () => {
+            return this.verificationProvider
+                .verify(this._code, this.trustedDevice)
+                .pipe(tap((response) => {
+                this.verified.emit(response);
+            }));
+        };
+    }
+    ngOnDestroy() {
+        this._destroy$.next();
+        this._destroy$.complete();
+    }
+    codeChanged(code) {
+        this._code = code;
+    }
+    resend() {
+        this.resendInProgress = true;
+        this.verificationProvider
+            .resend()
+            .pipe(takeUntil(this._destroy$))
+            .subscribe(() => {
+            this.resendInProgress = false;
+            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 FsTrustedDevicesComponent {
-    constructor(_fsCountry) {
-        this._fsCountry = _fsCountry;
-        this.fetchTrustedDevices = (query) => new Observable();
-        this.removeTrustedDevice = (trustedDevice) => new Observable();
-        this.signOutTrustedDevice = (trustedDevice) => new Observable();
-        this.showAccount = true;
-        this._destroy$ = new Subject();
-    }
-    ngOnInit() {
-        this._fsCountry.ready$
-            .pipe(takeUntil(this._destroy$))
-            .subscribe(() => {
-            this._initListConfig();
-        });
-    }
-    ngOnDestroy() {
-        this._destroy$.next();
-        this._destroy$.complete();
-    }
-    _initListConfig() {
-        this.listConfig = {
-            filters: [
-                {
-                    name: 'keyword',
-                    type: ItemType.Keyword,
-                    label: 'Search',
-                },
-            ],
-            rowActions: [
-                {
-                    click: (data) => {
-                        this.signOutTrustedDevice(data)
-                            .subscribe(() => {
-                            this.reload();
-                        });
-                    },
-                    menu: true,
-                    label: 'Sign Out',
-                },
-                {
-                    click: (data) => {
-                        this.removeTrustedDevice(data)
-                            .subscribe(() => {
-                            this.reload();
-                        });
-                    },
-                    remove: {
-                        title: 'Confirm',
-                        template: 'Are you sure you would like to delete this record?',
-                    },
-                    menu: true,
-                    label: 'Delete',
-                },
-            ],
-            fetch: (query) => {
-                return this.fetchTrustedDevices(query)
-                    .pipe(map((response) => {
-                    return {
-                        data: response.data,
-                        paging: response.paging,
-                    };
-                }));
-            },
-        };
-    }
-    reload() {
-        this.listComponent.reload();
-    }
-}
-FsTrustedDevicesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsTrustedDevicesComponent, deps: [{ token: i1$1.FsCountry }], target: i0.ɵɵFactoryTarget.Component });
-FsTrustedDevicesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsTrustedDevicesComponent, selector: "fs-trusted-devices", inputs: { fetchTrustedDevices: "fetchTrustedDevices", removeTrustedDevice: "removeTrustedDevice", signOutTrustedDevice: "signOutTrustedDevice", showAccount: "showAccount" }, viewQueries: [{ propertyName: "listComponent", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<fs-list [config]=\"listConfig\">\n  <fs-list-column title=\"Account\" [show]=\"showAccount\">\n    <ng-template fs-list-cell let-row=\"row\" class=\"col-account\">\n      <div *ngIf=\"row.account\" class=\"row\">\n        <fs-badge \n          *ngIf=\"row.account.avatarUrl\"\n          shape=\"circle\" \n          image=\"{{ row.account.avatarUrl }}\">\n        </fs-badge>\n        <div>\n          {{ row.account.name }}\n          <div class=\"small\" *ngIf=\"row.account.email\">{{ row.account.email }}</div>  \n        </div>\n      </div>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Device\">\n    <ng-template fs-list-cell let-row=\"row\" class=\"col-device\">\n      <div class=\"device\" *ngIf=\"row.device\">\n        <fs-current-device *ngIf=\"row.currentDevice\"></fs-current-device>\n        <fs-device-os\n          [type]=\"row.device.type\"\n          [os]=\"row.device.osType\"\n          [version]=\"row.device.osVersion\">\n        </fs-device-os>\n      </div>     \n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Browser\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <fs-device-browser\n        *ngIf=\"row.device\"\n        [type]=\"row.device.browserType\"\n        [version]=\"row.device.browserVersion\"\n        [showName]=\"true\"\n      ></fs-device-browser>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Added\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{ row.createDate | fsDateAgo }}\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Location\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <fs-country [code]=\"row.ip.country\"></fs-country>\n      <div><small>{{row.ip.ip}}</small></div>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column title=\"Last signed in\">\n    <ng-template fs-list-cell let-row=\"row\">\n      {{ row.activityDate | fsDateAgo }}\n    </ng-template>\n  </fs-list-column>\n</fs-list>\n", styles: [":host ::ng-deep .col-account .row{display:flex;align-items:center}:host ::ng-deep .col-account .row fs-badge{margin-right:5px}:host ::ng-deep .col-device .device{position:relative;display:inline-block}:host ::ng-deep .col-device .device .current-device{right:8px;top:-8px;position:absolute}\n"], components: [{ type: i2$1.FsListComponent, selector: "fs-list", inputs: ["loaderLines", "config"], outputs: ["filtersReady"] }, { type: i3.FsBadgeComponent, selector: "fs-badge", inputs: ["text", "shape", "color", "tooltip", "size", "image", "icon", "iconSize", "iconColor", "backgroundSize"] }, { type: FsCurrentDeviceComponent, selector: "fs-current-device" }, { type: i5.FsDeviceOsComponent, selector: "fs-device-os", inputs: ["type", "os", "showName", "version"] }, { type: i5.FsDeviceBrowserComponent, selector: "fs-device-browser", inputs: ["type", "version", "showName"] }, { type: i1$1.FsCountryComponent, selector: "fs-country", inputs: ["showIcon", "showName", "width", "code"] }], directives: [{ type: i2$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "customize", "title", "name", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "fsDateAgo": i7.FsDateAgoPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsTrustedDevicesComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'fs-trusted-devices',
-                    templateUrl: './trusted-devices.component.html',
-                    styleUrls: ['./trusted-devices.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.FsCountry }]; }, propDecorators: { fetchTrustedDevices: [{
-                type: Input
-            }], removeTrustedDevice: [{
-                type: Input
-            }], signOutTrustedDevice: [{
-                type: Input
-            }], showAccount: [{
-                type: Input
-            }], listComponent: [{
-                type: ViewChild,
-                args: [FsListComponent]
+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');
+    }
+    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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Fs2FAVerificationComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fs-2fa-verification',
+                    templateUrl: './2fa-verification.component.html',
+                    styleUrls: [
+                        './2fa-verification.component.scss',
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { method: [{
+                type: Input
+            }], verified: [{
+                type: Output
+            }], backToSignIn: [{
+                type: Output
             }] } });
 
-class Fs2FaModule {
-    static forRoot() {
-        return {
-            ngModule: 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: [FsTrustedDevicesComponent,
-        FsCurrentDeviceComponent], imports: [CommonModule,
-        FlexLayoutModule,
-        MatIconModule,
-        MatTooltipModule,
-        FsListModule,
-        FsDateModule,
-        FsCountryModule,
-        FsDeviceModule,
-        FsBadgeModule], exports: [FsTrustedDevicesComponent,
-        FsCurrentDeviceComponent] });
-Fs2FaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Fs2FaModule, imports: [[
-            CommonModule,
-            FlexLayoutModule,
-            MatIconModule,
-            MatTooltipModule,
-            FsListModule,
-            FsDateModule,
-            FsCountryModule,
-            FsDeviceModule,
-            FsBadgeModule,
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Fs2FaModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FlexLayoutModule,
-                        MatIconModule,
-                        MatTooltipModule,
-                        FsListModule,
-                        FsDateModule,
-                        FsCountryModule,
-                        FsDeviceModule,
-                        FsBadgeModule,
-                    ],
-                    exports: [
-                        FsTrustedDevicesComponent,
-                        FsCurrentDeviceComponent,
-                    ],
-                    declarations: [
-                        FsTrustedDevicesComponent,
-                        FsCurrentDeviceComponent,
-                    ],
-                }]
+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,
+        FormsModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatButtonModule,
+        FsFormModule,
+        // CodeInputModule,
+        MatCheckboxModule,
+        MatProgressSpinnerModule,
+        FsSkeletonModule,
+        FsSkeletonModule,
+        MatIconModule,
+        MatRadioModule,
+        FsRadioGroupModule], exports: [Fs2FAVerificationComponent] });
+Fs2FaModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Fs2FaModule, providers: [], imports: [[
+            CommonModule,
+            FormsModule,
+            MatFormFieldModule,
+            MatInputModule,
+            MatButtonModule,
+            FsFormModule,
+            // CodeInputModule,
+            MatCheckboxModule,
+            MatProgressSpinnerModule,
+            FsSkeletonModule,
+            FsSkeletonModule,
+            MatIconModule,
+            MatRadioModule,
+            FsRadioGroupModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Fs2FaModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatButtonModule,
+                        FsFormModule,
+                        // CodeInputModule,
+                        MatCheckboxModule,
+                        MatProgressSpinnerModule,
+                        FsSkeletonModule,
+                        FsSkeletonModule,
+                        MatIconModule,
+                        MatRadioModule,
+                        FsRadioGroupModule,
+                    ],
+                    declarations: [
+                        Fs2FAVerificationComponent,
+                        Fs2FAVerificationFormComponent,
+                        Fs2FAVerificationSMSComponent,
+                        Fs2FAVerificationOTPComponent,
+                        Fs2FaVerificationMethodsComponent,
+                    ],
+                    exports: [
+                        Fs2FAVerificationComponent,
+                    ],
+                    providers: [],
+                }]
         }] });
 
-/**
- * Generated bundle index. Do not edit.
+/*
+ * Public API Surface of fs-2fa
+ */
+
+/**
+ * Generated bundle index. Do not edit.
  */
 
-export { Fs2FaModule, FsCurrentDeviceComponent, FsTrustedDevicesComponent };
+export { FS_2FA_VERIFICATION_PROVIDER, Fs2FAVerificationComponent, Fs2FaModule, FsVerificationMethodType };
 //# sourceMappingURL=firestitch-2fa.js.map