@firestitch/2fa 12.8.4 → 12.9.0

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/forms'), require('@angular/common'), require('@angular/material/icon'), require('@angular/material/radio'), require('@angular/material/button'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/checkbox'), require('@firestitch/form'), require('@firestitch/skeleton'), require('@firestitch/radiogroup'), require('@firestitch/dialog'), require('rxjs'), require('rxjs/operators'), require('@angular/material/dialog'), require('angular-code-input'), require('@firestitch/message'), require('@angular/material/progress-spinner'), require('@firestitch/phone'), require('@firestitch/list'), require('@firestitch/label'), require('@firestitch/country'), require('ng-qrcode'), require('@firestitch/prompt')) :
     typeof define === 'function' && define.amd ? define('@firestitch/2fa', ['exports', '@angular/core', '@angular/forms', '@angular/common', '@angular/material/icon', '@angular/material/radio', '@angular/material/button', '@angular/material/form-field', '@angular/material/input', '@angular/material/checkbox', '@firestitch/form', '@firestitch/skeleton', '@firestitch/radiogroup', '@firestitch/dialog', 'rxjs', 'rxjs/operators', '@angular/material/dialog', 'angular-code-input', '@firestitch/message', '@angular/material/progress-spinner', '@firestitch/phone', '@firestitch/list', '@firestitch/label', '@firestitch/country', 'ng-qrcode', '@firestitch/prompt'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.firestitch = global.firestitch || {}, global.firestitch["2fa"] = {}), global.ng.core, global.ng.forms, global.ng.common, global.ng.material.icon, global.ng.material.radio, global.ng.material.button, global.ng.material.formField, global.ng.material.input, global.ng.material.checkbox, global.i9, global.i11$1, global.i3$1, global.i3, global.rxjs, global.rxjs.operators, global.ng.material.dialog, global.i1$1, global.i2, global.ng.material.progressSpinner, global.i6$2, global.i2$1, global.i3$3, global.i3$2, global.i4$1, global.i1$3));
-})(this, (function (exports, i0, i8, i9$1, i4, i5, i6, i5$1, i11, i6$1, i9, i11$1, i3$1, i3, rxjs, operators, i1, i1$1, i2, i1$2, i6$2, i2$1, i3$3, i3$2, i4$1, i1$3) { 'use strict';
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.firestitch = global.firestitch || {}, global.firestitch["2fa"] = {}), global.ng.core, global.ng.forms, global.ng.common, global.ng.material.icon, global.ng.material.radio, global.ng.material.button, global.ng.material.formField, global.ng.material.input, global.ng.material.checkbox, global.i9, global.i11$1, global.i3$1, global.i3, global.rxjs, global.rxjs.operators, global.ng.material.dialog, global.i1$1, global.i2, global.ng.material.progressSpinner, global.i6$2, global.i2$1, global.i3$2, global.i4$2, global.i4$1, global.i1$3));
+})(this, (function (exports, i0, i8, i9$1, i4, i5, i6, i5$1, i11, i6$1, i9, i11$1, i3$1, i3, rxjs, operators, i1, i1$1, i2, i1$2, i6$2, i2$1, i3$2, i4$2, i4$1, i1$3) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -41,8 +41,8 @@
     var i1__namespace$2 = /*#__PURE__*/_interopNamespace(i1$2);
     var i6__namespace$2 = /*#__PURE__*/_interopNamespace(i6$2);
     var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
-    var i3__namespace$3 = /*#__PURE__*/_interopNamespace(i3$3);
     var i3__namespace$2 = /*#__PURE__*/_interopNamespace(i3$2);
+    var i4__namespace$2 = /*#__PURE__*/_interopNamespace(i4$2);
     var i4__namespace$1 = /*#__PURE__*/_interopNamespace(i4$1);
     var i1__namespace$3 = /*#__PURE__*/_interopNamespace(i1$3);
 
@@ -513,7 +513,7 @@
             this.mode = 'qr-code';
             this.trustDevice = true;
             this.verify = function () {
-                return _this.twoFactorManageService.verificationMethodVerify(_this.code, _this.trustDevice)
+                return _this.twoFactorManageService.verificationMethodVerify$(_this.code, _this.trustDevice)
                     .pipe(operators.tap(function () {
                     _this._message.success('Created app authenticator verification method');
                     _this._dialogRef.close(true);
@@ -534,7 +534,7 @@
         AppComponent.prototype.appTypeSelect = function (appType) {
             var _this = this;
             this.appType = appType;
-            this.twoFactorManageService.verificationMethodCreate({
+            this.twoFactorManageService.verificationMethodCreate$({
                 type: exports.VerificationMethodType.App,
                 default: this.default,
             })
@@ -593,12 +593,12 @@
                 return rxjs.of(true)
                     .pipe(operators.switchMap(function () {
                     return _this.verificationMethod ?
-                        _this.twoFactorManageService.verificationMethodVerify(_this.code, _this.trustDevice)
+                        _this.twoFactorManageService.verificationMethodVerify$(_this.code, _this.trustDevice)
                             .pipe(operators.tap(function (verificationMethod) {
                             _this._message.success('Created email verification method');
                             _this._dialogRef.close(verificationMethod);
                         })) :
-                        _this.twoFactorManageService.verificationMethodCreate({
+                        _this.twoFactorManageService.verificationMethodCreate$({
                             type: exports.VerificationMethodType.Email,
                             email: _this.email,
                             default: _this.default,
@@ -661,12 +661,12 @@
                 return rxjs.of(true)
                     .pipe(operators.switchMap(function () {
                     return _this.verificationMethod ?
-                        _this.twoFactorManageService.verificationMethodVerify(_this.code, _this.trustDevice)
+                        _this.twoFactorManageService.verificationMethodVerify$(_this.code, _this.trustDevice)
                             .pipe(operators.tap(function (verificationMethod) {
                             _this._message.success('Created text message verification method');
                             _this._dialogRef.close(verificationMethod);
                         })) :
-                        _this.twoFactorManageService.verificationMethodCreate({
+                        _this.twoFactorManageService.verificationMethodCreate$({
                             type: exports.VerificationMethodType.Sms,
                             phoneNumber: _this.phone.number,
                             phoneCode: _this.phone.countryCode,
@@ -774,11 +774,14 @@
                 return verificationMethod.type === type;
             });
         };
+        TwoFactorManageService.prototype.registerVerificationMethodDefault = function (value) {
+            this._verificationMethodDefault = value;
+        };
         TwoFactorManageService.prototype.registerVerificationMethodResend = function (value) {
             this._verificationMethodResend = value;
         };
-        TwoFactorManageService.prototype.registerVerificationMethodFetch = function (value) {
-            this._verificationMethodFetch = value;
+        TwoFactorManageService.prototype.registerVerificationMethodsFetch = function (value) {
+            this._verificationMethodsFetch = value;
         };
         TwoFactorManageService.prototype.registerVerificationMethodDelete = function (value) {
             this._verificationMethodDelete = value;
@@ -792,43 +795,50 @@
         TwoFactorManageService.prototype.registerAccountVerify = function (value) {
             this._accountVerify = value;
         };
-        TwoFactorManageService.prototype.verificationMethodDelete = function (verificationMethod) {
+        TwoFactorManageService.prototype.verificationMethodDelete$ = function (verificationMethod) {
             var _this = this;
             return this._verificationMethodDelete(verificationMethod)
                 .pipe(operators.tap(function () {
-                _this.verificationMethodFetch();
+                _this.verificationMethodsFetch();
             }));
         };
-        TwoFactorManageService.prototype.verificationMethodVerify = function (code, trustDevice) {
+        TwoFactorManageService.prototype.verificationMethodVerify$ = function (code, trustDevice) {
             var _this = this;
             return this._verificationMethodVerify(code, trustDevice)
                 .pipe(operators.tap(function () {
-                _this.verificationMethodFetch();
+                _this.verificationMethodsFetch();
             }));
         };
-        TwoFactorManageService.prototype.verificationMethodCreate = function (verificationMethod) {
+        TwoFactorManageService.prototype.verificationMethodCreate$ = function (verificationMethod) {
             return this._verificationMethodCreate(verificationMethod);
         };
+        TwoFactorManageService.prototype.verificationMethodDefault$ = function (verificationMethod) {
+            return this._verificationMethodDefault(verificationMethod);
+        };
         TwoFactorManageService.prototype.verificationMethodResend = function () {
             return this._verificationMethodResend();
         };
-        TwoFactorManageService.prototype.verificationMethodFetch = function () {
+        TwoFactorManageService.prototype.verificationMethodsFetch = function (query) {
+            this.verificationMethodsFetch$(query)
+                .subscribe();
+        };
+        TwoFactorManageService.prototype.verificationMethodsFetch$ = function (query) {
             var _this = this;
-            this._verificationMethodFetch()
-                .subscribe(function (verificationMethods) {
+            return this._verificationMethodsFetch(query)
+                .pipe(operators.tap(function (verificationMethods) {
                 _this._verificationMethods$.next(verificationMethods);
-            });
+            }));
         };
-        TwoFactorManageService.prototype.accountVerify = function () {
+        TwoFactorManageService.prototype.accountVerify$ = function () {
             return this._accountVerify ? this._accountVerify() : rxjs.of(true);
         };
         TwoFactorManageService.prototype.ngOnDestroy = function () {
             this._destroy$.next();
             this._destroy$.complete();
         };
-        TwoFactorManageService.prototype.addSms = function (defaultCountry) {
+        TwoFactorManageService.prototype.addSms$ = function (defaultCountry) {
             var _this = this;
-            return this.accountVerify()
+            return this.accountVerify$()
                 .pipe(operators.switchMap(function () { return _this._dialog.open(NumberComponent, {
                 data: {
                     defaultCountry: defaultCountry,
@@ -836,27 +846,27 @@
                 },
             })
                 .afterClosed(); }), operators.tap(function () {
-                _this.verificationMethodFetch();
+                _this.verificationMethodsFetch();
             }), operators.takeUntil(this._destroy$));
         };
-        TwoFactorManageService.prototype.addEmail = function () {
+        TwoFactorManageService.prototype.addEmail$ = function () {
             var _this = this;
-            return this.accountVerify()
+            return this.accountVerify$()
                 .pipe(operators.switchMap(function () { return _this._dialog.open(EmailComponent, {
                 data: { twoFactorManageService: _this },
             })
                 .afterClosed(); }), operators.tap(function () {
-                _this.verificationMethodFetch();
+                _this.verificationMethodsFetch();
             }), operators.takeUntil(this._destroy$));
         };
-        TwoFactorManageService.prototype.addApp = function () {
+        TwoFactorManageService.prototype.addApp$ = function () {
             var _this = this;
-            return this.accountVerify()
+            return this.accountVerify$()
                 .pipe(operators.switchMap(function () { return _this._dialog.open(AppComponent, {
                 data: { twoFactorManageService: _this },
             })
                 .afterClosed(); }), operators.tap(function () {
-                _this.verificationMethodFetch();
+                _this.verificationMethodsFetch();
             }), operators.takeUntil(this._destroy$));
         };
         return TwoFactorManageService;
@@ -884,7 +894,7 @@
                     }]
             }] });
 
-    var VerificationMethodsComponent$1 = /** @class */ (function () {
+    var VerificationMethodsComponent = /** @class */ (function () {
         function VerificationMethodsComponent(_prompt) {
             this._prompt = _prompt;
             this.deleted = new i0.EventEmitter();
@@ -892,49 +902,103 @@
         }
         VerificationMethodsComponent.prototype.ngOnInit = function () {
             var _this = this;
+            var _a, _b, _c, _d;
+            if (!this.verificationMethodDefault && ((_a = this.twoFactorManageService) === null || _a === void 0 ? void 0 : _a.verificationMethodDefault$)) {
+                this.verificationMethodDefault = function (verificationMethod) {
+                    return _this.twoFactorManageService.verificationMethodDefault$(verificationMethod);
+                };
+            }
+            if (!this.verificationMethodDelete && ((_b = this.twoFactorManageService) === null || _b === void 0 ? void 0 : _b.verificationMethodDelete$)) {
+                this.verificationMethodDelete = function (verificationMethod) {
+                    return _this.twoFactorManageService.verificationMethodDelete$(verificationMethod);
+                };
+            }
+            if (!this.verificationMethodsFetch && ((_c = this.twoFactorManageService) === null || _c === void 0 ? void 0 : _c.verificationMethodsFetch$)) {
+                this.verificationMethodsFetch = function (query) {
+                    return _this.twoFactorManageService.verificationMethodsFetch$(query);
+                };
+            }
+            if (!this.accountVerify && ((_d = this.twoFactorManageService) === null || _d === void 0 ? void 0 : _d.accountVerify$)) {
+                this.accountVerify = function () {
+                    var _a;
+                    return (_a = _this.twoFactorManageService) === null || _a === void 0 ? void 0 : _a.accountVerify$();
+                };
+            }
             this.listConfig = {
+                paging: false,
                 rowActions: [
+                    {
+                        click: function (verificationMethod) {
+                            _this.accountVerify()
+                                .pipe(operators.switchMap(function () { return _this.verificationMethodDefault(verificationMethod); }))
+                                .subscribe(function () {
+                                _this.list.reload();
+                            });
+                        },
+                        show: function () {
+                            return !!_this.verificationMethodDefault;
+                        },
+                        label: 'Set as Default',
+                    },
                     {
                         click: function (verificationMethod) {
                             _this._prompt.confirm({
                                 title: 'Confirm',
                                 template: 'Would you like to delete this verification method?',
                             })
-                                .pipe(operators.switchMap(function () { return _this.twoFactorManageService.accountVerify(); }), operators.switchMap(function () { return _this.twoFactorManageService
-                                .verificationMethodDelete(verificationMethod); }))
+                                .pipe(operators.switchMap(function () { return _this.accountVerify(); }), operators.switchMap(function () { return _this.verificationMethodDelete(verificationMethod); }))
                                 .subscribe(function () {
-                                _this.deleted.emit(verificationMethod);
+                                _this.deleted.emit();
+                                _this.list.reload();
                             });
                         },
+                        show: function () {
+                            return !!_this.verificationMethodDelete;
+                        },
                         label: 'Delete',
                     },
                 ],
-                fetch: function () {
-                    return _this.twoFactorManageService.verificationMethods$
+                fetch: function (query) {
+                    query = Object.assign(Object.assign({}, query), { type: _this.type });
+                    return _this.verificationMethodsFetch(query)
                         .pipe(operators.map(function (verificationMethods) { return ({
                         data: verificationMethods.filter(function (verificationMethod) {
-                            return verificationMethod.type === _this.type;
+                            return !_this.type || verificationMethod.type === _this.type;
                         }),
                     }); }));
                 },
             };
         };
+        VerificationMethodsComponent.prototype.reload = function () {
+            this.list.reload();
+        };
         return VerificationMethodsComponent;
     }());
-    VerificationMethodsComponent$1.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: VerificationMethodsComponent$1, deps: [{ token: i1__namespace$3.FsPrompt }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    VerificationMethodsComponent$1.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i3__namespace$2.FsCountryComponent, selector: "fs-country", inputs: ["code", "showIcon", "showName", "region", "width"] }, { type: DefaultedComponent, selector: "app-defaulted" }], directives: [{ type: i2__namespace$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2__namespace$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i9__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "fsPhone": i6__namespace$2.FsPhonePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: VerificationMethodsComponent$1, decorators: [{
+    VerificationMethodsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: VerificationMethodsComponent, deps: [{ token: i1__namespace$3.FsPrompt }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    VerificationMethodsComponent.ɵcmp = i0__namespace.ɵɵ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: i2$1.FsListComponent, descendants: true }], ngImport: i0__namespace, 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__namespace$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i4__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4__namespace$2.FsCountryComponent, selector: "fs-country", inputs: ["code", "showIcon", "showName", "region", "width"] }, { type: DefaultedComponent, selector: "app-defaulted" }], directives: [{ type: i2__namespace$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2__namespace$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i9__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "fsPhone": i6__namespace$2.FsPhonePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: VerificationMethodsComponent, decorators: [{
                 type: i0.Component,
                 args: [{
-                        selector: 'app-verification-methods',
+                        selector: 'fs-2fa-verification-methods',
                         templateUrl: './verification-methods.component.html',
                         styleUrls: ['./verification-methods.component.scss'],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     }]
-            }], ctorParameters: function () { return [{ type: i1__namespace$3.FsPrompt }]; }, propDecorators: { twoFactorManageService: [{
-                    type: i0.Input
+            }], ctorParameters: function () { return [{ type: i1__namespace$3.FsPrompt }]; }, propDecorators: { list: [{
+                    type: i0.ViewChild,
+                    args: [i2$1.FsListComponent]
                 }], type: [{
                     type: i0.Input
+                }], accountVerify: [{
+                    type: i0.Input
+                }], verificationMethodsFetch: [{
+                    type: i0.Input
+                }], verificationMethodDelete: [{
+                    type: i0.Input
+                }], verificationMethodDefault: [{
+                    type: i0.Input
+                }], twoFactorManageService: [{
+                    type: i0.Input
                 }], deleted: [{
                     type: i0.Output
                 }] } });
@@ -949,8 +1013,11 @@
             this.defaultCountry = _data.defaultCountry;
         }
         NumbersComponent.prototype.add = function () {
-            this.twoFactorManageService.addSms(this.defaultCountry)
-                .subscribe();
+            var _this = this;
+            this.twoFactorManageService.addSms$(this.defaultCountry)
+                .subscribe(function () {
+                _this.verificationMethods.reload();
+            });
         };
         NumbersComponent.prototype.deleted = function () {
             this._message.success('Deleted text message verification method');
@@ -961,7 +1028,7 @@
         return NumbersComponent;
     }());
     NumbersComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NumbersComponent, deps: [{ token: i1.MAT_DIALOG_DATA }, { token: i1__namespace.MatDialogRef }, { token: i2__namespace.FsMessage }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    NumbersComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: NumbersComponent, selector: "ng-component", ngImport: i0__namespace, 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__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i4__namespace.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__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1__namespace.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    NumbersComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i4__namespace.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__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1__namespace.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: NumbersComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -974,7 +1041,10 @@
                             type: i0.Inject,
                             args: [i1.MAT_DIALOG_DATA]
                         }] }, { type: i1__namespace.MatDialogRef }, { type: i2__namespace.FsMessage }];
-        } });
+        }, propDecorators: { verificationMethods: [{
+                    type: i0.ViewChild,
+                    args: [VerificationMethodsComponent]
+                }] } });
 
     var EmailsComponent = /** @class */ (function () {
         function EmailsComponent(_data, _dialogRef, _message) {
@@ -985,8 +1055,11 @@
             this.twoFactorManageService = _data.twoFactorManageService;
         }
         EmailsComponent.prototype.add = function () {
-            this.twoFactorManageService.addEmail()
-                .subscribe();
+            var _this = this;
+            this.twoFactorManageService.addEmail$()
+                .subscribe(function () {
+                _this.verificationMethods.reload();
+            });
         };
         EmailsComponent.prototype.deleted = function () {
             this._message.success('Deleted email verification method');
@@ -997,7 +1070,7 @@
         return EmailsComponent;
     }());
     EmailsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: EmailsComponent, deps: [{ token: i1.MAT_DIALOG_DATA }, { token: i1__namespace.MatDialogRef }, { token: i2__namespace.FsMessage }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    EmailsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: EmailsComponent, selector: "ng-component", ngImport: i0__namespace, 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__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i4__namespace.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__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1__namespace.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    EmailsComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.FsDialogComponent, selector: "fs-dialog", inputs: ["mobileMode"] }, { type: i4__namespace.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__namespace.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1__namespace.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1__namespace.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1__namespace.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i1__namespace.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["type", "mat-dialog-close", "aria-label", "matDialogClose"], exportAs: ["matDialogClose"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: EmailsComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1010,7 +1083,10 @@
                             type: i0.Inject,
                             args: [i1.MAT_DIALOG_DATA]
                         }] }, { type: i1__namespace.MatDialogRef }, { type: i2__namespace.FsMessage }];
-        } });
+        }, propDecorators: { verificationMethods: [{
+                    type: i0.ViewChild,
+                    args: [VerificationMethodsComponent]
+                }] } });
 
     var ManageMethodsComponent = /** @class */ (function () {
         function ManageMethodsComponent(_data, _cdRef, _dialog, _message) {
@@ -1097,7 +1173,7 @@
             });
         };
         ManageMethodsComponent.prototype.textMessageAdd = function () {
-            this.twoFactorManageService.addSms(this._defaultCountry)
+            this.twoFactorManageService.addSms$(this._defaultCountry)
                 .subscribe();
         };
         ManageMethodsComponent.prototype.emailMessageManage = function () {
@@ -1108,7 +1184,7 @@
             });
         };
         ManageMethodsComponent.prototype.emailMessageAdd = function () {
-            this.twoFactorManageService.addEmail()
+            this.twoFactorManageService.addEmail$()
                 .subscribe();
         };
         ManageMethodsComponent.prototype.appRemove = function () {
@@ -1118,8 +1194,8 @@
                 return _verificationMethod.type === exports.VerificationMethodType.App;
             });
             if (verificationMethod) {
-                this.twoFactorManageService.accountVerify()
-                    .pipe(operators.switchMap(function () { return _this.twoFactorManageService.verificationMethodDelete(verificationMethod); }))
+                this.twoFactorManageService.accountVerify$()
+                    .pipe(operators.switchMap(function () { return _this.twoFactorManageService.verificationMethodDelete$(verificationMethod); }))
                     .subscribe(function () {
                     _this._message.success('Removed App Authenticator verification method');
                     _this._cdRef.markForCheck();
@@ -1127,7 +1203,7 @@
             }
         };
         ManageMethodsComponent.prototype.appAdd = function () {
-            this.twoFactorManageService.addApp()
+            this.twoFactorManageService.addApp$()
                 .subscribe();
         };
         ManageMethodsComponent.prototype.ngOnDestroy = function () {
@@ -1166,11 +1242,12 @@
                 exports.VerificationMethodType.Email,
                 exports.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(function (verificationMethods) {
@@ -1188,7 +1265,7 @@
                 });
                 _this._cdRef.markForCheck();
             });
-            this._twoFactorManageService.verificationMethodFetch();
+            this._twoFactorManageService.verificationMethodsFetch();
         };
         Fs2faManageComponent.prototype.manage = function () {
             var _this = this;
@@ -1207,7 +1284,7 @@
             });
         };
         Fs2faManageComponent.prototype.reload = function () {
-            this._twoFactorManageService.verificationMethodFetch();
+            this._twoFactorManageService.verificationMethodsFetch();
         };
         Fs2faManageComponent.prototype.ngOnDestroy = function () {
             this._destroy$.next();
@@ -1216,7 +1293,7 @@
         return Fs2faManageComponent;
     }());
     Fs2faManageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faManageComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.MatDialog }, { token: TwoFactorManageService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    Fs2faManageComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace$3.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i3__namespace$3.FsLabelComponent, selector: "fs-label" }], directives: [{ type: i9__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    Fs2faManageComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace$2.FsLabelFieldComponent, selector: "fs-label-field", inputs: ["bottomMargin", "topMargin", "labelMargin"] }, { type: i3__namespace$2.FsLabelComponent, selector: "fs-label" }], directives: [{ type: i9__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faManageComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1238,6 +1315,8 @@
                     type: i0.Input
                 }], verificationMethodCreate: [{
                     type: i0.Input
+                }], verificationMethodDefault: [{
+                    type: i0.Input
                 }], verificationMethodVerify: [{
                     type: i0.Input
                 }], verificationMethodResend: [{
@@ -1262,6 +1341,47 @@
                     }]
             }] });
 
+    var Fs2faVerificationMethodsModule = /** @class */ (function () {
+        function Fs2faVerificationMethodsModule() {
+        }
+        return Fs2faVerificationMethodsModule;
+    }());
+    Fs2faVerificationMethodsModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faVerificationMethodsModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    Fs2faVerificationMethodsModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faVerificationMethodsModule, declarations: [VerificationMethodsComponent], imports: [i9$1.CommonModule,
+            i8.FormsModule,
+            i4.MatIconModule,
+            i2$1.FsListModule,
+            i6$2.FsPhoneModule,
+            i4$2.FsCountryModule,
+            DefautledModule], exports: [VerificationMethodsComponent] });
+    Fs2faVerificationMethodsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faVerificationMethodsModule, imports: [[
+                i9$1.CommonModule,
+                i8.FormsModule,
+                i4.MatIconModule,
+                i2$1.FsListModule,
+                i6$2.FsPhoneModule,
+                i4$2.FsCountryModule,
+                DefautledModule,
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faVerificationMethodsModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        imports: [
+                            i9$1.CommonModule,
+                            i8.FormsModule,
+                            i4.MatIconModule,
+                            i2$1.FsListModule,
+                            i6$2.FsPhoneModule,
+                            i4$2.FsCountryModule,
+                            DefautledModule,
+                        ],
+                        declarations: [
+                            VerificationMethodsComponent,
+                        ],
+                        exports: [VerificationMethodsComponent],
+                    }]
+            }] });
+
     var Fs2faManageModule = /** @class */ (function () {
         function Fs2faManageModule() {
         }
@@ -1273,7 +1393,6 @@
             NumbersComponent,
             AppComponent,
             EmailComponent,
-            VerificationMethodsComponent$1,
             NumberComponent,
             EmailsComponent], imports: [i9$1.CommonModule,
             i8.FormsModule,
@@ -1285,15 +1404,16 @@
             i3.FsDialogModule,
             i2$1.FsListModule,
             i9.FsFormModule,
-            i3$3.FsLabelModule,
+            i3$2.FsLabelModule,
             i6$2.FsPhoneModule,
             i11$1.FsSkeletonModule,
-            i3$2.FsCountryModule,
+            i4$2.FsCountryModule,
             CodeInputModule,
             i4$1.QrCodeModule,
             ResendModule,
             DefautledModule,
-            Fs2faVerificationModule], exports: [Fs2faManageComponent] });
+            Fs2faVerificationModule,
+            Fs2faVerificationMethodsModule], exports: [Fs2faManageComponent] });
     Fs2faManageModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faManageModule, imports: [[
                 i9$1.CommonModule,
                 i8.FormsModule,
@@ -1305,15 +1425,16 @@
                 i3.FsDialogModule,
                 i2$1.FsListModule,
                 i9.FsFormModule,
-                i3$3.FsLabelModule,
+                i3$2.FsLabelModule,
                 i6$2.FsPhoneModule,
                 i11$1.FsSkeletonModule,
-                i3$2.FsCountryModule,
+                i4$2.FsCountryModule,
                 CodeInputModule,
                 i4$1.QrCodeModule,
                 ResendModule,
                 DefautledModule,
                 Fs2faVerificationModule,
+                Fs2faVerificationMethodsModule,
             ]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faManageModule, decorators: [{
                 type: i0.NgModule,
@@ -1329,15 +1450,16 @@
                             i3.FsDialogModule,
                             i2$1.FsListModule,
                             i9.FsFormModule,
-                            i3$3.FsLabelModule,
+                            i3$2.FsLabelModule,
                             i6$2.FsPhoneModule,
                             i11$1.FsSkeletonModule,
-                            i3$2.FsCountryModule,
+                            i4$2.FsCountryModule,
                             CodeInputModule,
                             i4$1.QrCodeModule,
                             ResendModule,
                             DefautledModule,
                             Fs2faVerificationModule,
+                            Fs2faVerificationMethodsModule,
                         ],
                         declarations: [
                             Fs2faManageComponent,
@@ -1345,7 +1467,6 @@
                             NumbersComponent,
                             AppComponent,
                             EmailComponent,
-                            VerificationMethodsComponent$1,
                             NumberComponent,
                             EmailsComponent,
                         ],
@@ -1353,102 +1474,6 @@
                     }]
             }] });
 
-    var VerificationMethodsComponent = /** @class */ (function () {
-        function VerificationMethodsComponent(_prompt) {
-            this._prompt = _prompt;
-            this.VerificationMethodType = exports.VerificationMethodType;
-        }
-        VerificationMethodsComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            this.listConfig = {
-                paging: false,
-                rowActions: [
-                    {
-                        click: function (verificationMethod) {
-                            _this._prompt.confirm({
-                                title: 'Confirm',
-                                template: 'Would you like to delete this verification method?',
-                            })
-                                .pipe(operators.switchMap(function () { return _this.accountVerify(); }), operators.switchMap(function () { return _this.verificationMethodDelete(verificationMethod); }))
-                                .subscribe(function () {
-                                _this.list.reload();
-                            });
-                        },
-                        label: 'Delete',
-                    },
-                ],
-                fetch: function (query) {
-                    return _this.verificationMethodsFetch(query)
-                        .pipe(operators.map(function (verificationMethods) { return ({
-                        data: verificationMethods,
-                    }); }));
-                },
-            };
-        };
-        return VerificationMethodsComponent;
-    }());
-    VerificationMethodsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: VerificationMethodsComponent, deps: [{ token: i1__namespace$3.FsPrompt }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    VerificationMethodsComponent.ɵcmp = i0__namespace.ɵɵ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: i2$1.FsListComponent, descendants: true }], ngImport: i0__namespace, 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__namespace$1.FsListComponent, selector: "fs-list", inputs: ["config", "loaderLines"], outputs: ["filtersReady"] }, { type: i4__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3__namespace$2.FsCountryComponent, selector: "fs-country", inputs: ["code", "showIcon", "showName", "region", "width"] }, { type: DefaultedComponent, selector: "app-defaulted" }], directives: [{ type: i2__namespace$1.FsListColumnDirective, selector: "fs-list-column", inputs: ["show", "title", "name", "customize", "sortable", "sortableDefault", "direction", "align", "width", "class"] }, { type: i2__namespace$1.FsListCellDirective, selector: "[fs-list-cell]", inputs: ["colspan", "align", "class"] }, { type: i9__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "fsPhone": i6__namespace$2.FsPhonePipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: VerificationMethodsComponent, decorators: [{
-                type: i0.Component,
-                args: [{
-                        selector: 'fs-2fa-verification-methods',
-                        templateUrl: './verification-methods.component.html',
-                        styleUrls: ['./verification-methods.component.scss'],
-                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    }]
-            }], ctorParameters: function () { return [{ type: i1__namespace$3.FsPrompt }]; }, propDecorators: { list: [{
-                    type: i0.ViewChild,
-                    args: [i2$1.FsListComponent]
-                }], accountVerify: [{
-                    type: i0.Input
-                }], verificationMethodsFetch: [{
-                    type: i0.Input
-                }], verificationMethodDelete: [{
-                    type: i0.Input
-                }] } });
-
-    var Fs2faVerificationMethodsModule = /** @class */ (function () {
-        function Fs2faVerificationMethodsModule() {
-        }
-        return Fs2faVerificationMethodsModule;
-    }());
-    Fs2faVerificationMethodsModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faVerificationMethodsModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    Fs2faVerificationMethodsModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faVerificationMethodsModule, declarations: [VerificationMethodsComponent], imports: [i9$1.CommonModule,
-            i8.FormsModule,
-            i4.MatIconModule,
-            i2$1.FsListModule,
-            i6$2.FsPhoneModule,
-            i3$2.FsCountryModule,
-            DefautledModule], exports: [VerificationMethodsComponent] });
-    Fs2faVerificationMethodsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faVerificationMethodsModule, imports: [[
-                i9$1.CommonModule,
-                i8.FormsModule,
-                i4.MatIconModule,
-                i2$1.FsListModule,
-                i6$2.FsPhoneModule,
-                i3$2.FsCountryModule,
-                DefautledModule,
-            ]] });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: Fs2faVerificationMethodsModule, decorators: [{
-                type: i0.NgModule,
-                args: [{
-                        imports: [
-                            i9$1.CommonModule,
-                            i8.FormsModule,
-                            i4.MatIconModule,
-                            i2$1.FsListModule,
-                            i6$2.FsPhoneModule,
-                            i3$2.FsCountryModule,
-                            DefautledModule,
-                        ],
-                        declarations: [
-                            VerificationMethodsComponent,
-                        ],
-                        exports: [VerificationMethodsComponent],
-                    }]
-            }] });
-
     /**
      * Generated bundle index. Do not edit.
      */