@firestitch/2fa 12.8.3 → 12.9.0

package/fesm2015/firestitch-2fa.js

@@ -36,10 +36,10 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i6$2 from '@firestitch/phone';
 import { FsPhoneModule } from '@firestitch/phone';
 import * as i2$1 from '@firestitch/list';
-import { FsListModule, FsListComponent } from '@firestitch/list';
-import * as i3$3 from '@firestitch/label';
+import { FsListComponent, FsListModule } from '@firestitch/list';
+import * as i3$2 from '@firestitch/label';
 import { FsLabelModule } from '@firestitch/label';
-import * as i3$2 from '@firestitch/country';
+import * as i4$2 from '@firestitch/country';
 import { FsCountryModule } from '@firestitch/country';
 import * as i4$1 from 'ng-qrcode';
 import { QrCodeModule } from 'ng-qrcode';
@@ -255,7 +255,7 @@ class Fs2faVerificationComponent {
     }
 }
 Fs2faVerificationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Fs2faVerificationComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i3.FsDialog }, { token: i2.FsMessage }], target: i0.ɵɵFactoryTarget.Component });
-Fs2faVerificationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: Fs2faVerificationComponent, selector: "fs-2fa-verification", inputs: { verificationMethod: "verificationMethod", resend: "resend", showTrustedDevice: "showTrustedDevice", trustDevice: "trustDevice", trustDays: "trustDays", getVerificationMethods: "getVerificationMethods", selectVerificationMethod: "selectVerificationMethod" }, outputs: { verified: "verified", codeChanged: "codeChanged", codeCompleted: "codeCompleted", trustDeviceChange: "trustDeviceChange" }, viewQueries: [{ propertyName: "verificationCodeComponent", first: true, predicate: Fs2faVerificationCodeComponent, descendants: true }], ngImport: i0, template: "<div class=\"code-container\">\n  <fs-2fa-verification-code\n    [recipient]=\"recipient\"\n    [type]=\"verificationMethod.type\"\n    [code]=\"code\"\n    (codeChanged)=\"codeChanged.emit($event)\"\n    (codeCompleted)=\"codeCompleted.emit()\">\n  </fs-2fa-verification-code>\n</div>\n\n<div class=\"additional\">\n  <div \n      class=\"trust-device\"\n      *ngIf=\"showTrustedDevice\">\n    <mat-checkbox\n        name=\"trust-device\"\n        [(ngModel)]=\"trustDevice\"\n        (ngModelChange)=\"trustDeviceChange.emit($event)\">\n        Trust Device & Bypass 2-Step Verification \n      <ng-container *ngIf=\"trustDays\">for {{trustDays}} days</ng-container>\n      <div class=\"small\">If you use a different browser or clear cookies you may need to perform 2-Step Verification again.</div>\n    </mat-checkbox>\n  </div>\n</div>", styles: [":host ::ng-deep .mat-checkbox{margin-top:2px}:host ::ng-deep .mat-checkbox .mat-checkbox-label{line-height:normal}:host ::ng-deep .mat-checkbox .mat-checkbox-layout{white-space:normal}.code-container{text-align:center}.additional{display:flex;justify-content:space-between;align-items:center;margin:4px 0 5px}.additional small{color:inherit}.additional .resend{cursor:pointer;text-transform:none}.additional .resend mat-spinner{display:inline-block;vertical-align:middle}\n"], components: [{ type: Fs2faVerificationCodeComponent, selector: "fs-2fa-verification-code", inputs: ["type", "recipient", "code"], outputs: ["codeChanged", "codeCompleted"] }, { type: i6$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"] }], directives: [{ type: i9$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+Fs2faVerificationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: Fs2faVerificationComponent, selector: "fs-2fa-verification", inputs: { verificationMethod: "verificationMethod", resend: "resend", showTrustedDevice: "showTrustedDevice", trustDevice: "trustDevice", trustDays: "trustDays", getVerificationMethods: "getVerificationMethods", selectVerificationMethod: "selectVerificationMethod" }, outputs: { verified: "verified", codeChanged: "codeChanged", codeCompleted: "codeCompleted", trustDeviceChange: "trustDeviceChange" }, viewQueries: [{ propertyName: "verificationCodeComponent", first: true, predicate: Fs2faVerificationCodeComponent, descendants: true }], ngImport: i0, template: "<div class=\"code-container\">\n  <fs-2fa-verification-code\n    [recipient]=\"recipient\"\n    [type]=\"verificationMethod.type\"\n    [code]=\"code\"\n    (codeChanged)=\"codeChanged.emit($event)\"\n    (codeCompleted)=\"codeCompleted.emit()\">\n  </fs-2fa-verification-code>\n</div>\n\n<div class=\"additional\">\n  <div \n      class=\"trust-device\"\n      *ngIf=\"showTrustedDevice\">\n    <mat-checkbox\n        name=\"trust-device\"\n        [(ngModel)]=\"trustDevice\"\n        (ngModelChange)=\"trustDeviceChange.emit($event)\">\n        Trust Device\n      <div class=\"small\">\n          Bypass 2-Step Verification on this browser <ng-container *ngIf=\"trustDays\">for {{trustDays}} days</ng-container> unless you clear cookies.</div>\n    </mat-checkbox>\n  </div>\n</div>", styles: [":host ::ng-deep .mat-checkbox{margin:2px 0}:host ::ng-deep .mat-checkbox .mat-checkbox-label{line-height:normal}:host ::ng-deep .mat-checkbox .mat-checkbox-layout{white-space:normal}.code-container{text-align:center}.additional{display:flex;justify-content:space-between;align-items:center;margin:4px 0 5px}.additional small{color:inherit}.additional .resend{cursor:pointer;text-transform:none}.additional .resend mat-spinner{display:inline-block;vertical-align:middle}\n"], components: [{ type: Fs2faVerificationCodeComponent, selector: "fs-2fa-verification-code", inputs: ["type", "recipient", "code"], outputs: ["codeChanged", "codeCompleted"] }, { type: i6$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"] }], directives: [{ type: i9$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i9.FsFormNoFsValidatorsDirective, selector: "[ngModel]:not([required]):not([fsFormRequired]):not([fsFormCompare]):not([fsFormDateRange]):not([fsFormEmail]):not([fsFormEmails]):not([fsFormFunction]):not([fsFormGreater]):not([fsFormInteger]):not([fsFormLesser]):not([fsFormMax]):not([fsFormMaxLength]):not([fsFormMin]):not([fsFormMinLength]):not([fsFormNumeric]):not([fsFormPattern]):not([fsFormPhone]):not([fsFormUrl]):not([validate])" }], viewProviders: [{ provide: ControlContainer, useExisting: NgForm }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Fs2faVerificationComponent, decorators: [{
             type: Component,
             args: [{
@@ -484,7 +484,7 @@ class AppComponent {
         this.mode = 'qr-code';
         this.trustDevice = true;
         this.verify = () => {
-            return this.twoFactorManageService.verificationMethodVerify(this.code, this.trustDevice)
+            return this.twoFactorManageService.verificationMethodVerify$(this.code, this.trustDevice)
                 .pipe(tap(() => {
                 this._message.success('Created app authenticator verification method');
                 this._dialogRef.close(true);
@@ -504,7 +504,7 @@ class AppComponent {
     }
     appTypeSelect(appType) {
         this.appType = appType;
-        this.twoFactorManageService.verificationMethodCreate({
+        this.twoFactorManageService.verificationMethodCreate$({
             type: VerificationMethodType.App,
             default: this.default,
         })
@@ -559,12 +559,12 @@ class EmailComponent {
             return of(true)
                 .pipe(switchMap(() => {
                 return this.verificationMethod ?
-                    this.twoFactorManageService.verificationMethodVerify(this.code, this.trustDevice)
+                    this.twoFactorManageService.verificationMethodVerify$(this.code, this.trustDevice)
                         .pipe(tap((verificationMethod) => {
                         this._message.success('Created email verification method');
                         this._dialogRef.close(verificationMethod);
                     })) :
-                    this.twoFactorManageService.verificationMethodCreate({
+                    this.twoFactorManageService.verificationMethodCreate$({
                         type: VerificationMethodType.Email,
                         email: this.email,
                         default: this.default,
@@ -623,12 +623,12 @@ class NumberComponent {
             return of(true)
                 .pipe(switchMap(() => {
                 return this.verificationMethod ?
-                    this.twoFactorManageService.verificationMethodVerify(this.code, this.trustDevice)
+                    this.twoFactorManageService.verificationMethodVerify$(this.code, this.trustDevice)
                         .pipe(tap((verificationMethod) => {
                         this._message.success('Created text message verification method');
                         this._dialogRef.close(verificationMethod);
                     })) :
-                    this.twoFactorManageService.verificationMethodCreate({
+                    this.twoFactorManageService.verificationMethodCreate$({
                         type: VerificationMethodType.Sms,
                         phoneNumber: this.phone.number,
                         phoneCode: this.phone.countryCode,
@@ -709,11 +709,14 @@ class TwoFactorManageService {
             return verificationMethod.type === type;
         });
     }
+    registerVerificationMethodDefault(value) {
+        this._verificationMethodDefault = value;
+    }
     registerVerificationMethodResend(value) {
         this._verificationMethodResend = value;
     }
-    registerVerificationMethodFetch(value) {
-        this._verificationMethodFetch = value;
+    registerVerificationMethodsFetch(value) {
+        this._verificationMethodsFetch = value;
     }
     registerVerificationMethodDelete(value) {
         this._verificationMethodDelete = value;
@@ -727,39 +730,46 @@ class TwoFactorManageService {
     registerAccountVerify(value) {
         this._accountVerify = value;
     }
-    verificationMethodDelete(verificationMethod) {
+    verificationMethodDelete$(verificationMethod) {
         return this._verificationMethodDelete(verificationMethod)
             .pipe(tap(() => {
-            this.verificationMethodFetch();
+            this.verificationMethodsFetch();
         }));
     }
-    verificationMethodVerify(code, trustDevice) {
+    verificationMethodVerify$(code, trustDevice) {
         return this._verificationMethodVerify(code, trustDevice)
             .pipe(tap(() => {
-            this.verificationMethodFetch();
+            this.verificationMethodsFetch();
         }));
     }
-    verificationMethodCreate(verificationMethod) {
+    verificationMethodCreate$(verificationMethod) {
         return this._verificationMethodCreate(verificationMethod);
     }
+    verificationMethodDefault$(verificationMethod) {
+        return this._verificationMethodDefault(verificationMethod);
+    }
     verificationMethodResend() {
         return this._verificationMethodResend();
     }
-    verificationMethodFetch() {
-        this._verificationMethodFetch()
-            .subscribe((verificationMethods) => {
+    verificationMethodsFetch(query) {
+        this.verificationMethodsFetch$(query)
+            .subscribe();
+    }
+    verificationMethodsFetch$(query) {
+        return this._verificationMethodsFetch(query)
+            .pipe(tap((verificationMethods) => {
             this._verificationMethods$.next(verificationMethods);
-        });
+        }));
     }
-    accountVerify() {
+    accountVerify$() {
         return this._accountVerify ? this._accountVerify() : of(true);
     }
     ngOnDestroy() {
         this._destroy$.next();
         this._destroy$.complete();
     }
-    addSms(defaultCountry) {
-        return this.accountVerify()
+    addSms$(defaultCountry) {
+        return this.accountVerify$()
             .pipe(switchMap(() => this._dialog.open(NumberComponent, {
             data: {
                 defaultCountry,
@@ -767,25 +777,25 @@ class TwoFactorManageService {
             },
         })
             .afterClosed()), tap(() => {
-            this.verificationMethodFetch();
+            this.verificationMethodsFetch();
         }), takeUntil(this._destroy$));
     }
-    addEmail() {
-        return this.accountVerify()
+    addEmail$() {
+        return this.accountVerify$()
             .pipe(switchMap(() => this._dialog.open(EmailComponent, {
             data: { twoFactorManageService: this },
         })
             .afterClosed()), tap(() => {
-            this.verificationMethodFetch();
+            this.verificationMethodsFetch();
         }), takeUntil(this._destroy$));
     }
-    addApp() {
-        return this.accountVerify()
+    addApp$() {
+        return this.accountVerify$()
             .pipe(switchMap(() => this._dialog.open(AppComponent, {
             data: { twoFactorManageService: this },
         })
             .afterClosed()), tap(() => {
-            this.verificationMethodFetch();
+            this.verificationMethodsFetch();
         }), takeUntil(this._destroy$));
     }
 }
@@ -809,55 +819,109 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }] });
 
-class VerificationMethodsComponent$1 {
+class VerificationMethodsComponent {
     constructor(_prompt) {
         this._prompt = _prompt;
         this.deleted = new EventEmitter();
         this.VerificationMethodType = VerificationMethodType;
     }
     ngOnInit() {
+        var _a, _b, _c, _d;
+        if (!this.verificationMethodDefault && ((_a = this.twoFactorManageService) === null || _a === void 0 ? void 0 : _a.verificationMethodDefault$)) {
+            this.verificationMethodDefault = (verificationMethod) => {
+                return this.twoFactorManageService.verificationMethodDefault$(verificationMethod);
+            };
+        }
+        if (!this.verificationMethodDelete && ((_b = this.twoFactorManageService) === null || _b === void 0 ? void 0 : _b.verificationMethodDelete$)) {
+            this.verificationMethodDelete = (verificationMethod) => {
+                return this.twoFactorManageService.verificationMethodDelete$(verificationMethod);
+            };
+        }
+        if (!this.verificationMethodsFetch && ((_c = this.twoFactorManageService) === null || _c === void 0 ? void 0 : _c.verificationMethodsFetch$)) {
+            this.verificationMethodsFetch = (query) => {
+                return this.twoFactorManageService.verificationMethodsFetch$(query);
+            };
+        }
+        if (!this.accountVerify && ((_d = this.twoFactorManageService) === null || _d === void 0 ? void 0 : _d.accountVerify$)) {
+            this.accountVerify = () => {
+                var _a;
+                return (_a = this.twoFactorManageService) === null || _a === void 0 ? void 0 : _a.accountVerify$();
+            };
+        }
         this.listConfig = {
+            paging: false,
             rowActions: [
+                {
+                    click: (verificationMethod) => {
+                        this.accountVerify()
+                            .pipe(switchMap(() => this.verificationMethodDefault(verificationMethod)))
+                            .subscribe(() => {
+                            this.list.reload();
+                        });
+                    },
+                    show: () => {
+                        return !!this.verificationMethodDefault;
+                    },
+                    label: 'Set as Default',
+                },
                 {
                     click: (verificationMethod) => {
                         this._prompt.confirm({
                             title: 'Confirm',
                             template: 'Would you like to delete this verification method?',
                         })
-                            .pipe(switchMap(() => this.twoFactorManageService.accountVerify()), switchMap(() => this.twoFactorManageService
-                            .verificationMethodDelete(verificationMethod)))
+                            .pipe(switchMap(() => this.accountVerify()), switchMap(() => this.verificationMethodDelete(verificationMethod)))
                             .subscribe(() => {
-                            this.deleted.emit(verificationMethod);
+                            this.deleted.emit();
+                            this.list.reload();
                         });
                     },
+                    show: () => {
+                        return !!this.verificationMethodDelete;
+                    },
                     label: 'Delete',
                 },
             ],
-            fetch: () => {
-                return this.twoFactorManageService.verificationMethods$
+            fetch: (query) => {
+                query = Object.assign(Object.assign({}, query), { type: this.type });
+                return this.verificationMethodsFetch(query)
                     .pipe(map((verificationMethods) => ({
                     data: verificationMethods.filter((verificationMethod) => {
-                        return verificationMethod.type === this.type;
+                        return !this.type || verificationMethod.type === this.type;
                     }),
                 })));
             },
         };
     }
+    reload() {
+        this.list.reload();
+    }
 }
-VerificationMethodsComponent$1.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: VerificationMethodsComponent$1, deps: [{ token: i1$3.FsPrompt }], target: i0.ɵɵFactoryTarget.Component });
-VerificationMethodsComponent$1.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: VerificationMethodsComponent$1, selector: "app-verification-methods", inputs: { twoFactorManageService: "twoFactorManageService", type: "type" }, outputs: { deleted: "deleted" }, ngImport: i0, template: "<fs-list [config]=\"listConfig\">\n  <fs-list-column class=\"col-name\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <div class=\"row\">\n        <ng-container *ngIf=\"row.type === VerificationMethodType.Sms\">\n          <fs-country [code]=\"row.phoneCountry\" [showName]=\"false\"></fs-country> {{row.phoneNumber | fsPhone}}\n        </ng-container>\n\n        <ng-container *ngIf=\"row.type === VerificationMethodType.Email\">\n          {{row.email}}\n        </ng-container>\n   \n        <app-defaulted *ngIf=\"row.default\"></app-defaulted>\n      </div>\n    </ng-template>\n  </fs-list-column>\n</fs-list>", styles: [":host ::ng-deep .col-name .row{display:flex;align-items:center}fs-country{margin-right:5px}app-defaulted{margin-left:5px}\n"], components: [{ type: i2$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i3$2.FsCountryComponent, selector: "fs-country", inputs: ["code", "showIcon", "showName", "region", "width"] }, { type: DefaultedComponent, selector: "app-defaulted" }], directives: [{ type: i2$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i9$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "fsPhone": i6$2.FsPhonePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: VerificationMethodsComponent$1, decorators: [{
+VerificationMethodsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: VerificationMethodsComponent, deps: [{ token: i1$3.FsPrompt }], target: i0.ɵɵFactoryTarget.Component });
+VerificationMethodsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: VerificationMethodsComponent, selector: "fs-2fa-verification-methods", inputs: { type: "type", accountVerify: "accountVerify", verificationMethodsFetch: "verificationMethodsFetch", verificationMethodDelete: "verificationMethodDelete", verificationMethodDefault: "verificationMethodDefault", twoFactorManageService: "twoFactorManageService" }, outputs: { deleted: "deleted" }, viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<fs-list [config]=\"listConfig\">\n  <fs-list-column class=\"col-icon\" width=\"1%\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <ng-container *ngIf=\"row.type === VerificationMethodType.Sms\">\n        <mat-icon>textsms</mat-icon>\n      </ng-container>\n\n      <ng-container *ngIf=\"row.type === VerificationMethodType.Email\">\n        <mat-icon>email</mat-icon>\n      </ng-container>\n\n      <ng-container *ngIf=\"row.type === VerificationMethodType.App\">\n        <mat-icon>phone_iphone</mat-icon>\n      </ng-container>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column class=\"col-name\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <div class=\"row\">\n        <ng-container *ngIf=\"row.type === VerificationMethodType.Sms\">\n          <div class=\"row\">\n            <fs-country [code]=\"row.phoneCountry\" [showName]=\"false\"></fs-country> \n            <span>{{row.phoneNumber | fsPhone}}</span>\n          </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"row.type === VerificationMethodType.Email\">\n          {{row.email}}\n        </ng-container>\n\n        <ng-container *ngIf=\"row.type === VerificationMethodType.App\">\n          App\n        </ng-container>\n\n        <app-defaulted *ngIf=\"row.default\"></app-defaulted>\n      </div>\n    </ng-template>\n  </fs-list-column>\n</fs-list>", styles: [":host ::ng-deep .col-name .row{display:flex;align-items:center}:host ::ng-deep .col-name fs-country img{display:flex}fs-country{margin-right:5px}app-defaulted{margin-left:5px}\n"], components: [{ type: i2$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$2.FsCountryComponent, selector: "fs-country", inputs: ["code", "showIcon", "showName", "region", "width"] }, { type: DefaultedComponent, selector: "app-defaulted" }], directives: [{ type: i2$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i9$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "fsPhone": i6$2.FsPhonePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: VerificationMethodsComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'app-verification-methods',
+                    selector: 'fs-2fa-verification-methods',
                     templateUrl: './verification-methods.component.html',
                     styleUrls: ['./verification-methods.component.scss'],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
-        }], ctorParameters: function () { return [{ type: i1$3.FsPrompt }]; }, propDecorators: { twoFactorManageService: [{
-                type: Input
+        }], ctorParameters: function () { return [{ type: i1$3.FsPrompt }]; }, propDecorators: { list: [{
+                type: ViewChild,
+                args: [FsListComponent]
             }], type: [{
                 type: Input
+            }], accountVerify: [{
+                type: Input
+            }], verificationMethodsFetch: [{
+                type: Input
+            }], verificationMethodDelete: [{
+                type: Input
+            }], verificationMethodDefault: [{
+                type: Input
+            }], twoFactorManageService: [{
+                type: Input
             }], deleted: [{
                 type: Output
             }] } });
@@ -872,8 +936,10 @@ class NumbersComponent {
         this.defaultCountry = _data.defaultCountry;
     }
     add() {
-        this.twoFactorManageService.addSms(this.defaultCountry)
-            .subscribe();
+        this.twoFactorManageService.addSms$(this.defaultCountry)
+            .subscribe(() => {
+            this.verificationMethods.reload();
+        });
     }
     deleted() {
         this._message.success('Deleted text message verification method');
@@ -883,7 +949,7 @@ class NumbersComponent {
     }
 }
 NumbersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NumbersComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i2.FsMessage }], target: i0.ɵɵFactoryTarget.Component });
-NumbersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NumbersComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog>\n  <h1 mat-dialog-title>\n    <mat-icon>textsms</mat-icon> Text Message Numbers\n  </h1>\n  <mat-dialog-content>\n    <app-verification-methods\n      [type]=\"VerificationMethodType.Sms\"\n      [twoFactorManageService]=\"twoFactorManageService\"\n      (deleted)=\"deleted()\">\n    </app-verification-methods>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button\n        mat-button\n        type=\"button\"\n        color=\"primary\"\n        [mat-dialog-close]=\"undefined\">\n      Close\n    </button>\n    <button\n        mat-button\n        (click)=\"add()\"\n        type=\"button\">\n      Add Number\n    </button>\n  </mat-dialog-actions>\n</fs-dialog>\n", styles: [""], components: [{ type: i3.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: VerificationMethodsComponent$1, selector: "app-verification-methods", inputs: ["twoFactorManageService", "type"], outputs: ["deleted"] }, { 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: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NumbersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NumbersComponent, selector: "ng-component", viewQueries: [{ propertyName: "verificationMethods", first: true, predicate: VerificationMethodsComponent, descendants: true }], ngImport: i0, template: "<fs-dialog>\n  <h1 mat-dialog-title>\n    <mat-icon>textsms</mat-icon> Text Message Numbers\n  </h1>\n  <mat-dialog-content>\n    <fs-2fa-verification-methods\n      [type]=\"VerificationMethodType.Sms\"\n      [twoFactorManageService]=\"twoFactorManageService\"\n      (deleted)=\"deleted()\">\n    </fs-2fa-verification-methods> \n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button\n        mat-button\n        type=\"button\"\n        color=\"primary\"\n        [mat-dialog-close]=\"undefined\">\n      Close\n    </button>\n    <button\n        mat-button\n        (click)=\"add()\"\n        type=\"button\">\n      Add Number\n    </button>\n  </mat-dialog-actions>\n</fs-dialog>\n", styles: [""], components: [{ type: i3.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: VerificationMethodsComponent, selector: "fs-2fa-verification-methods", inputs: ["type", "accountVerify", "verificationMethodsFetch", "verificationMethodDelete", "verificationMethodDefault", "twoFactorManageService"], outputs: ["deleted"] }, { 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: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NumbersComponent, decorators: [{
             type: Component,
             args: [{
@@ -894,7 +960,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
-                }] }, { type: i1.MatDialogRef }, { type: i2.FsMessage }]; } });
+                }] }, { type: i1.MatDialogRef }, { type: i2.FsMessage }]; }, propDecorators: { verificationMethods: [{
+                type: ViewChild,
+                args: [VerificationMethodsComponent]
+            }] } });
 
 class EmailsComponent {
     constructor(_data, _dialogRef, _message) {
@@ -905,8 +974,10 @@ class EmailsComponent {
         this.twoFactorManageService = _data.twoFactorManageService;
     }
     add() {
-        this.twoFactorManageService.addEmail()
-            .subscribe();
+        this.twoFactorManageService.addEmail$()
+            .subscribe(() => {
+            this.verificationMethods.reload();
+        });
     }
     deleted() {
         this._message.success('Deleted email verification method');
@@ -916,7 +987,7 @@ class EmailsComponent {
     }
 }
 EmailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EmailsComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i2.FsMessage }], target: i0.ɵɵFactoryTarget.Component });
-EmailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: EmailsComponent, selector: "ng-component", ngImport: i0, template: "<fs-dialog>\n  <h1 mat-dialog-title>\n    <mat-icon>email</mat-icon> Emails\n  </h1>\n  <mat-dialog-content>\n    <app-verification-methods\n      [type]=\"VerificationMethodType.Email\"\n      [twoFactorManageService]=\"twoFactorManageService\"\n      (deleted)=\"deleted()\">\n    </app-verification-methods>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button\n        mat-button\n        type=\"button\"\n        color=\"primary\"\n        [mat-dialog-close]=\"undefined\">\n      Close\n    </button>\n    <button\n        mat-button\n        (click)=\"add()\"\n        type=\"button\">\n      Add Email\n    </button>\n  </mat-dialog-actions>\n</fs-dialog>\n", styles: ["h1{display:flex;align-items:center}h1 mat-icon{margin-right:5px}\n"], components: [{ type: i3.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: VerificationMethodsComponent$1, selector: "app-verification-methods", inputs: ["twoFactorManageService", "type"], outputs: ["deleted"] }, { 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: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+EmailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: EmailsComponent, selector: "ng-component", viewQueries: [{ propertyName: "verificationMethods", first: true, predicate: VerificationMethodsComponent, descendants: true }], ngImport: i0, template: "<fs-dialog>\n  <h1 mat-dialog-title>\n    <mat-icon>email</mat-icon> Emails\n  </h1>\n  <mat-dialog-content>\n    <fs-2fa-verification-methods\n      [type]=\"VerificationMethodType.Email\"\n      [twoFactorManageService]=\"twoFactorManageService\"\n      (deleted)=\"deleted()\">\n    </fs-2fa-verification-methods>\n  </mat-dialog-content>\n  <mat-dialog-actions>\n    <button\n        mat-button\n        type=\"button\"\n        color=\"primary\"\n        [mat-dialog-close]=\"undefined\">\n      Close\n    </button>\n    <button\n        mat-button\n        (click)=\"add()\"\n        type=\"button\">\n      Add Email\n    </button>\n  </mat-dialog-actions>\n</fs-dialog>\n", styles: ["h1{display:flex;align-items:center}h1 mat-icon{margin-right:5px}\n"], components: [{ type: i3.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: VerificationMethodsComponent, selector: "fs-2fa-verification-methods", inputs: ["type", "accountVerify", "verificationMethodsFetch", "verificationMethodDelete", "verificationMethodDefault", "twoFactorManageService"], outputs: ["deleted"] }, { 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: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: EmailsComponent, decorators: [{
             type: Component,
             args: [{
@@ -927,7 +998,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
-                }] }, { type: i1.MatDialogRef }, { type: i2.FsMessage }]; } });
+                }] }, { type: i1.MatDialogRef }, { type: i2.FsMessage }]; }, propDecorators: { verificationMethods: [{
+                type: ViewChild,
+                args: [VerificationMethodsComponent]
+            }] } });
 
 class ManageMethodsComponent {
     constructor(_data, _cdRef, _dialog, _message) {
@@ -989,7 +1063,7 @@ class ManageMethodsComponent {
         });
     }
     textMessageAdd() {
-        this.twoFactorManageService.addSms(this._defaultCountry)
+        this.twoFactorManageService.addSms$(this._defaultCountry)
             .subscribe();
     }
     emailMessageManage() {
@@ -1000,7 +1074,7 @@ class ManageMethodsComponent {
         });
     }
     emailMessageAdd() {
-        this.twoFactorManageService.addEmail()
+        this.twoFactorManageService.addEmail$()
             .subscribe();
     }
     appRemove() {
@@ -1009,8 +1083,8 @@ class ManageMethodsComponent {
             return _verificationMethod.type === VerificationMethodType.App;
         });
         if (verificationMethod) {
-            this.twoFactorManageService.accountVerify()
-                .pipe(switchMap(() => this.twoFactorManageService.verificationMethodDelete(verificationMethod)))
+            this.twoFactorManageService.accountVerify$()
+                .pipe(switchMap(() => this.twoFactorManageService.verificationMethodDelete$(verificationMethod)))
                 .subscribe(() => {
                 this._message.success('Removed App Authenticator verification method');
                 this._cdRef.markForCheck();
@@ -1018,7 +1092,7 @@ class ManageMethodsComponent {
         }
     }
     appAdd() {
-        this.twoFactorManageService.addApp()
+        this.twoFactorManageService.addApp$()
             .subscribe();
     }
     ngOnDestroy() {
@@ -1053,11 +1127,12 @@ class Fs2faManageComponent {
             VerificationMethodType.Email,
             VerificationMethodType.App
         ];
-        this._twoFactorManageService.registerVerificationMethodFetch(this.verificationMethodsFetch);
+        this._twoFactorManageService.registerVerificationMethodsFetch(this.verificationMethodsFetch);
         this._twoFactorManageService.registerVerificationMethodDelete(this.verificationMethodDelete);
         this._twoFactorManageService.registerVerificationMethodCreate(this.verificationMethodCreate);
         this._twoFactorManageService.registerVerificationMethodVerify(this.verificationMethodVerify);
         this._twoFactorManageService.registerVerificationMethodResend(this.verificationMethodResend);
+        this._twoFactorManageService.registerVerificationMethodDefault(this.verificationMethodDefault);
         this._twoFactorManageService.registerAccountVerify(this.accountVerify);
         this._twoFactorManageService.verificationMethods$
             .subscribe((verificationMethods) => {
@@ -1075,7 +1150,7 @@ class Fs2faManageComponent {
             });
             this._cdRef.markForCheck();
         });
-        this._twoFactorManageService.verificationMethodFetch();
+        this._twoFactorManageService.verificationMethodsFetch();
     }
     manage() {
         const dialogRef = this._dialog.open(ManageMethodsComponent, {
@@ -1093,7 +1168,7 @@ class Fs2faManageComponent {
         });
     }
     reload() {
-        this._twoFactorManageService.verificationMethodFetch();
+        this._twoFactorManageService.verificationMethodsFetch();
     }
     ngOnDestroy() {
         this._destroy$.next();
@@ -1101,7 +1176,7 @@ class Fs2faManageComponent {
     }
 }
 Fs2faManageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Fs2faManageComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.MatDialog }, { token: TwoFactorManageService }], target: i0.ɵɵFactoryTarget.Component });
-Fs2faManageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: Fs2faManageComponent, selector: "fs-2fa-manage", inputs: { accountVerify: "accountVerify", defaultCountry: "defaultCountry", verificationMethodTypes: "verificationMethodTypes", verificationMethodsFetch: "verificationMethodsFetch", verificationMethodDelete: "verificationMethodDelete", verificationMethodCreate: "verificationMethodCreate", verificationMethodVerify: "verificationMethodVerify", verificationMethodResend: "verificationMethodResend" }, providers: [TwoFactorManageService], ngImport: i0, template: "<fs-label-field>\n  <fs-label>Status</fs-label>\n  <ng-container *ngIf=\"statuses\">\n    <ng-container *ngIf=\"statuses.length === 1\">\n      {{statuses[0]}} verification is enabled\n    </ng-container>\n\n    <ng-container *ngIf=\"statuses.length > 1\">\n      {{statuses.join(', ')}} verifications are enabled\n    </ng-container>\n\n    <ng-container *ngIf=\"statuses.length  === 0\">\n      No verification methods are enabled\n    </ng-container>\n  </ng-container>\n</fs-label-field>", styles: [""], components: [{ type: i3$3.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i3$3.FsLabelComponent, selector: "fs-label" }], directives: [{ type: i9$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+Fs2faManageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: Fs2faManageComponent, selector: "fs-2fa-manage", inputs: { accountVerify: "accountVerify", defaultCountry: "defaultCountry", verificationMethodTypes: "verificationMethodTypes", verificationMethodsFetch: "verificationMethodsFetch", verificationMethodDelete: "verificationMethodDelete", verificationMethodCreate: "verificationMethodCreate", verificationMethodDefault: "verificationMethodDefault", verificationMethodVerify: "verificationMethodVerify", verificationMethodResend: "verificationMethodResend" }, providers: [TwoFactorManageService], ngImport: i0, template: "<fs-label-field>\n  <fs-label>Status</fs-label>\n  <ng-container *ngIf=\"statuses\">\n    <ng-container *ngIf=\"statuses.length === 1\">\n      {{statuses[0]}} verification is enabled\n    </ng-container>\n\n    <ng-container *ngIf=\"statuses.length > 1\">\n      {{statuses.join(', ')}} verifications are enabled\n    </ng-container>\n\n    <ng-container *ngIf=\"statuses.length  === 0\">\n      No verification methods are enabled\n    </ng-container>\n  </ng-container>\n</fs-label-field>", styles: [""], components: [{ type: i3$2.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i3$2.FsLabelComponent, selector: "fs-label" }], directives: [{ type: i9$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Fs2faManageComponent, decorators: [{
             type: Component,
             args: [{
@@ -1123,6 +1198,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], verificationMethodCreate: [{
                 type: Input
+            }], verificationMethodDefault: [{
+                type: Input
             }], verificationMethodVerify: [{
                 type: Input
             }], verificationMethodResend: [{
@@ -1144,6 +1221,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }] });
 
+class Fs2faVerificationMethodsModule {
+}
+Fs2faVerificationMethodsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Fs2faVerificationMethodsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+Fs2faVerificationMethodsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Fs2faVerificationMethodsModule, declarations: [VerificationMethodsComponent], imports: [CommonModule,
+        FormsModule,
+        MatIconModule,
+        FsListModule,
+        FsPhoneModule,
+        FsCountryModule,
+        DefautledModule], exports: [VerificationMethodsComponent] });
+Fs2faVerificationMethodsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Fs2faVerificationMethodsModule, imports: [[
+            CommonModule,
+            FormsModule,
+            MatIconModule,
+            FsListModule,
+            FsPhoneModule,
+            FsCountryModule,
+            DefautledModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Fs2faVerificationMethodsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        MatIconModule,
+                        FsListModule,
+                        FsPhoneModule,
+                        FsCountryModule,
+                        DefautledModule,
+                    ],
+                    declarations: [
+                        VerificationMethodsComponent,
+                    ],
+                    exports: [VerificationMethodsComponent],
+                }]
+        }] });
+
 class Fs2faManageModule {
 }
 Fs2faManageModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Fs2faManageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -1152,7 +1267,6 @@ Fs2faManageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versi
         NumbersComponent,
         AppComponent,
         EmailComponent,
-        VerificationMethodsComponent$1,
         NumberComponent,
         EmailsComponent], imports: [CommonModule,
         FormsModule,
@@ -1172,7 +1286,8 @@ Fs2faManageModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versi
         QrCodeModule,
         ResendModule,
         DefautledModule,
-        Fs2faVerificationModule], exports: [Fs2faManageComponent] });
+        Fs2faVerificationModule,
+        Fs2faVerificationMethodsModule], exports: [Fs2faManageComponent] });
 Fs2faManageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Fs2faManageModule, imports: [[
             CommonModule,
             FormsModule,
@@ -1193,6 +1308,7 @@ Fs2faManageModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", versi
             ResendModule,
             DefautledModule,
             Fs2faVerificationModule,
+            Fs2faVerificationMethodsModule,
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Fs2faManageModule, decorators: [{
             type: NgModule,
@@ -1217,6 +1333,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         ResendModule,
                         DefautledModule,
                         Fs2faVerificationModule,
+                        Fs2faVerificationMethodsModule,
                     ],
                     declarations: [
                         Fs2faManageComponent,
@@ -1224,7 +1341,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         NumbersComponent,
                         AppComponent,
                         EmailComponent,
-                        VerificationMethodsComponent$1,
                         NumberComponent,
                         EmailsComponent,
                     ],
@@ -1232,97 +1348,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }] });
 
-class VerificationMethodsComponent {
-    constructor(_prompt) {
-        this._prompt = _prompt;
-        this.VerificationMethodType = VerificationMethodType;
-    }
-    ngOnInit() {
-        this.listConfig = {
-            paging: false,
-            rowActions: [
-                {
-                    click: (verificationMethod) => {
-                        this._prompt.confirm({
-                            title: 'Confirm',
-                            template: 'Would you like to delete this verification method?',
-                        })
-                            .pipe(switchMap(() => this.accountVerify()), switchMap(() => this.verificationMethodDelete(verificationMethod)))
-                            .subscribe(() => {
-                            this.list.reload();
-                        });
-                    },
-                    label: 'Delete',
-                },
-            ],
-            fetch: (query) => {
-                return this.verificationMethodsFetch(query)
-                    .pipe(map((verificationMethods) => ({
-                    data: verificationMethods,
-                })));
-            },
-        };
-    }
-}
-VerificationMethodsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: VerificationMethodsComponent, deps: [{ token: i1$3.FsPrompt }], target: i0.ɵɵFactoryTarget.Component });
-VerificationMethodsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: VerificationMethodsComponent, selector: "fs-2fa-verification-methods", inputs: { accountVerify: "accountVerify", verificationMethodsFetch: "verificationMethodsFetch", verificationMethodDelete: "verificationMethodDelete" }, viewQueries: [{ propertyName: "list", first: true, predicate: FsListComponent, descendants: true }], ngImport: i0, template: "<fs-list [config]=\"listConfig\">\n  <fs-list-column class=\"col-icon\" width=\"1%\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <ng-container *ngIf=\"row.type === VerificationMethodType.Sms\">\n        <mat-icon>textsms</mat-icon>\n      </ng-container>\n\n      <ng-container *ngIf=\"row.type === VerificationMethodType.Email\">\n        <mat-icon>email</mat-icon>\n      </ng-container>\n\n      <ng-container *ngIf=\"row.type === VerificationMethodType.App\">\n        <mat-icon>phone_iphone</mat-icon>\n      </ng-container>\n    </ng-template>\n  </fs-list-column>\n  <fs-list-column class=\"col-name\">\n    <ng-template fs-list-cell let-row=\"row\">\n      <div class=\"row\">\n        <ng-container *ngIf=\"row.type === VerificationMethodType.Sms\">\n          <div class=\"row\">\n            <fs-country [code]=\"row.phoneCountry\" [showName]=\"false\"></fs-country> \n            <span>{{row.phoneNumber | fsPhone}}</span>\n          </div>\n        </ng-container>\n\n        <ng-container *ngIf=\"row.type === VerificationMethodType.Email\">\n          {{row.email}}\n        </ng-container>\n\n        <ng-container *ngIf=\"row.type === VerificationMethodType.App\">\n          App\n        </ng-container>\n\n        <app-defaulted *ngIf=\"row.default\"></app-defaulted>\n      </div>\n    </ng-template>\n  </fs-list-column>\n</fs-list>", styles: [":host ::ng-deep .col-name .row{display:flex;align-items:center}:host ::ng-deep .col-name fs-country img{display:flex}fs-country{margin-right:5px}app-defaulted{margin-left:5px}\n"], components: [{ type: i2$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$2.FsCountryComponent, selector: "fs-country", inputs: ["code", "showIcon", "showName", "region", "width"] }, { type: DefaultedComponent, selector: "app-defaulted" }], directives: [{ type: i2$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i9$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "fsPhone": i6$2.FsPhonePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: VerificationMethodsComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'fs-2fa-verification-methods',
-                    templateUrl: './verification-methods.component.html',
-                    styleUrls: ['./verification-methods.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], ctorParameters: function () { return [{ type: i1$3.FsPrompt }]; }, propDecorators: { list: [{
-                type: ViewChild,
-                args: [FsListComponent]
-            }], accountVerify: [{
-                type: Input
-            }], verificationMethodsFetch: [{
-                type: Input
-            }], verificationMethodDelete: [{
-                type: Input
-            }] } });
-
-class Fs2faVerificationMethodsModule {
-}
-Fs2faVerificationMethodsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Fs2faVerificationMethodsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-Fs2faVerificationMethodsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Fs2faVerificationMethodsModule, declarations: [VerificationMethodsComponent], imports: [CommonModule,
-        FormsModule,
-        MatIconModule,
-        FsListModule,
-        FsPhoneModule,
-        FsCountryModule,
-        DefautledModule], exports: [VerificationMethodsComponent] });
-Fs2faVerificationMethodsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Fs2faVerificationMethodsModule, imports: [[
-            CommonModule,
-            FormsModule,
-            MatIconModule,
-            FsListModule,
-            FsPhoneModule,
-            FsCountryModule,
-            DefautledModule,
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Fs2faVerificationMethodsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        MatIconModule,
-                        FsListModule,
-                        FsPhoneModule,
-                        FsCountryModule,
-                        DefautledModule,
-                    ],
-                    declarations: [
-                        VerificationMethodsComponent,
-                    ],
-                    exports: [VerificationMethodsComponent],
-                }]
-        }] });
-
 /**
  * Generated bundle index. Do not edit.
  */